In flex 3, I have created the child components in the canvas using the repeater component. I want to made changes in only one of the child component created by repeater. Is there any method or way to access the particular child component and made required property changes ?
<mx:Repeater id="myrep" dataProvider="{myAC}">
<mx:Label id="Label1" text="This is button "/>
</mx:Repeater>
In above code suppose I have create 10 label and I want to apply some changes in 5th Label only ? Is it possible.
Thanks
Yes, it's possible.
You could access repeater's generated components like this:
component_id[index]
So in your case,for changing 5th element's label, your code would be Label1[4].text='blah blah'.
However changing repeater's generated components in this manner, is a bad practice. Instead use bindings.
For example:
//...
[Bindable]
var myAC:ArrayCollection = new ArrayCollection(["label1","label2","label3","label4","label5","label6"]) ;
//...
<mx:Repeater id="myrep" dataProvider="{myAC}">
<mx:Label id="Label1" text="{myrep.currentItem}"/>
</mx:Repeater>
//Changing label of 5th element
myAC[4] = 'blah blah';
Related
i have a custom toggleButtonBar class that allows label placement on the button, however, i would like to have the labels to be multiline. I'm not good at extending default components. Is there anyone that can help me out?
package com.vit2print.plugin.transvit.tools
{
import mx.controls.Button;
import mx.controls.ToggleButtonBar;
import mx.core.IFlexDisplayObject;
public class IconToggleButtonBar extends ToggleButtonBar
{
[Inspectable(enumeration="left,right,top,bottom", defaultValue="left")]
public var labelPlacement:String = "left";
override protected function createNavItem(label:String, icon:Class=null):IFlexDisplayObject {
var b:Button = Button(super.createNavItem(label, icon));
b.labelPlacement = labelPlacement;
return b;
}
}
}
Any help would be appreciated.
If you can use Spark components, you can accomplish this through a custom skin for the buttons of the ButtonBar. When skinning the ButtonBar, you'll have to create 4 skins though:
one for the ButtonBar itself
one for the first button
one for the middle buttons
one for the last button
Unless all the buttons can look the same, in which case you'll need only one skin for all three kinds of buttons.
First create the three (or one) skins for the buttons by copying the default Spark ToggleButtonSkin. In the FlashBuilder wizard that would look like this:
Scroll down to the bottom and find the Label tag with id labelDisplay. It has its masDisplayedLines property set to 1. Remove it or set it to a value that is more convenient for your use case.
Now create a skin for the ButtonBar itself by copying the default Spark ButtonBarSkin. Find the three button factories and replace the skinClass styles with the button skin(s) you've just created.
<fx:Declarations>
<fx:Component id="firstButton">
<s:ButtonBarButton skinClass="net.riastar.skins.MyButtonBarFirstButtonSkin" />
</fx:Component>
<fx:Component id="middleButton" >
<s:ButtonBarButton skinClass="net.riastar.skins.MyButtonBarButtonSkin" />
</fx:Component>
<fx:Component id="lastButton" >
<s:ButtonBarButton skinClass="net.riastar.skins.MyButtonBarLastButtonSkin" />
</fx:Component>
</fx:Declarations>
Now apply this skin to your ButtonBar and you're all set.
<s:ButtonBar dataProvider="{dp}" skinClass="net.riastar.so.MyButtonBarSkin" width="200" />
Remember, in general with Spark components: if you want them to look different without really changing / customizing their behaviour, use skinning instead of custom components.
I am trying to process the user feeds retrieved from facebook by dynamically adding them to the flash app, and i need the feed to be displayed in a box with its publisher name and picture beside it (as normal)..
the question is how could i display them aligned under each other if i don't know their heights? is there a way to just add them under each other without specifying the height?
like in html adding divs under each other?
and other question how to add a scroll bar if the content exceeds the flash window?
iam new to as3 & flash so any advice will help.. thanks..
my code:
protected function getFeedsHandler(result:Object,fail:Object):void
{
if(result)
{
var i:Number;
for(i=0;i<10;i++)
if(result[i])
{
var fdLbl= new Label();
addElementAt(fdLbl,1);
fdLbl.text=result[i].message;
fdLbl.x=20;
fdLbl.y=(i+2)*100;
fdLbl.width=400;
var fdImg= new Image();
addElementAt(fdImg,1);
fdImg.source=FacebookDesktop.getImageUrl(result[i].from.id,"small");
fdImg.x=20;
fdImg.y=(i+2)*80;
fdImg.width=400;
var nameLbl= new Label();
addElementAt(nameLbl,1);
nameLbl.text=result[i].from.name;
nameLbl.x=20;
nameLbl.y=(i+2)*90;
}
}
the interface:
<s:Button id="loginoutBtn" right="10" top="10" label="Log out"
click.loggedin="logout(event)"
label.loggedout="Log in" click.loggedout="login(event)"/>
<s:Form includeIn="loggedin" left="70" top="10">
<s:FormItem label="User">
<s:Label id="nameLbl" text=""/>
</s:FormItem>
<s:FormItem label="birthday">
<s:Label id="brthday"/>
</s:FormItem>
<s:FormItem label="feeds">
<s:Image id="feedImg"/>
<s:Label id="feedLbl" x="0"/>
<s:Label id="statusLbl" width="405"/>
</s:FormItem>
</s:Form>
<s:Image id="userImg" includeIn="loggedin" left="10" top="10" width="50"/>
So it looks like you're using Flex and specifically you're using the spark components. In using Spark there's a couple of options on how you would achieve this, one option is to put the component you made above into a VGroup. The VGroup vertically stacks visual components, it has a property called gap you can set to add or remove spacing between the components (number of pixels between each object nested into the VGroup). The addition of a s:Scroller component wrapping the VGroup will give you the scroll bars, essentially the way this works is you set the size on the s:Scroller to the size you want to visible (can be a percentage like 100% width/height of the view/container), then you set no explicit size on the VGroup, the VGroup will expand to have a height equal to the height of all the components nested in it plus any padding plus the gap space, the scroller will take care of figuring out how big the scroll tab button should be and adjust the scrollRect on the VGroup for you, essentially it's going to work like magic :). This would look something like the following:
<s:Scroller width="100%" height="100%">
<s:VGroup id="loadedContentVGroup">
<yourpackage:YourCustomComponent/>
</s:VGroup>
</s:Scroller>
If you don't constrain the scroller's height and width it will not work as it doesn't have a defined region to draw in and will just become as large as it's children (the nested components). In all likelihood you would add elements to the VGroup in AS3 so you'd probably want to give it an ID.
Your other option is to use a spark List and then set your visual component as the itemRenderer. For each data element in the data provider for the list (some sort of collection class, ArrayCollection, XMLCollection etc.) it will set an element of the array as the "data" property on your visual component. You would then use bindings to the data property in your visual component to make sure if the renderer is re-used/recycled the elements within it update automatically. Here's an example of that:
<s:List dataProvider="{new ArrayCollection([{name:'Shaun', birthday:'04-28-1983', imageSource:'someImage.png'}])}"
itemRenderer="views.YourCustomComponent"
width="100%"/>
In your case the dataProvider for the list could be assigned in the result handler code you have above, it appears result is an array so you can just wrap it in an ArrayCollection like myList.dataProvider = new ArrayCollection(result);
Here's a potential view definition for a single entry in the list (the itemRenderer class used above)
[views.YourCustomComponent]
<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
implements="mx.core.IDataRenderer">
<fx:Script>
<![CDATA[
private var _data:Object;
[Bindable(eventName="dataChanged")]
public function get data():Object
{
return _data;
}
public function set data(value:Object):void
{
if(_data == value)
return;
_data = value;
dispatchEvent(new Event("dataChanged"));
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Label text="{data.name}"/>
<s:Label text="{data.birthday}"/>
<s:Image source="{data.imageSource}"/>
</s:VGroup>
There are certainly caveats and alternatives to these answers but this will hopefully get you going in the right direction, if you're doing this for mobile development be sure to check out the recommendations with regard to creating renderers for mobile, the idea here is to reduce the processing needed for creating and re-using renderers on mobile as much as possible to lighten the load on the CPU and memory.
One other thing to note it appears your mixing defining the view in AS3 and MXML, while this is technically okay I find it to be a bit confusing myself. I would normally define the entire layout in MXML, or if need be entirely in AS3. If defined in MXML and a component needs to be conditionally hidden by code I would just toggle the visible/includeInLayout properties. I suppose this is just a preference but it seems it could get hairy determining what is causing particular layouts to occur when you have to look between the two to piece it together.
References to the AS3 reference for classes used:
http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/spark/components/VGroup.html
http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/spark/components/Scroller.html
http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/spark/components/List.html
Details on custom item renderers http://help.adobe.com/en_US/flex/using/WS03d33b8076db57b9-23c04461124bbeca597-8000.html <-- references Jeffry Houser a regular on SO with the name www.flextras.com
I have a simple list with a tileLayout of images. From the examples I've looked at it looks like i'm supposed to use the DefaultComplexItemRenderer. It works, and my array of images loads fine, but each item has a solid background. I need the background behind each image to have an alpha of 0. How Can I set that?
In the past i've just made a custom itemRenderer, and overrided the drawBackground function on itemRenderers, but DefaultComplexRenderer doesn't have a drawBackground function to override.
Is there another simple solution in the flex code? OR it would be awesome if someone could show me how to make a custom DefaultComplexRenderer.
NOTE:
This is a Flex MOBILE project. I know some itemRenderer's aren't friendly with mobile. Adobe says to "always do item renderers in AS3 rather than mxml" so, keep that in mind.
Thanks!
Here's my code:
<fx:Declarations>
<s:ArrayList id="arrList">
<s:BitmapImage source="assets/images/one.png" scaleMode="letterbox" smooth="true" width="100%" height="100%"/>
<s:BitmapImage source="assets/images/two.png" scaleMode="letterbox" smooth="true" width="100%" height="100%"/>
<s:BitmapImage source="assets/images/three.png" scaleMode="letterbox" smooth="true" width="100%" height="100%"/>
<s:BitmapImage source="assets/images/four.png" scaleMode="letterbox" smooth="true" width="100%" height="100%"/>
</s:ArrayList>
</fx:Declarations>
<s:List id="extrasList_list" width="100%" height="100%"
dataProvider="{arrList}"
itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
horizontalCenter="0"
verticalCenter="0">
<s:layout>
<s:TileLayout requestedColumnCount="-1"
requestedRowCount="-1"
horizontalGap="10"
verticalGap="10"
orientation="rows"
columnAlign="justifyUsingWidth"
/>
</s:layout>
</s:List>
Things I've tried:
this in my main css file...
s|DefaultComplexItemRenderer {
contentBackgroundAlpha:0;
}
but i get this warning, and it doesn't work...
-Cannot resolve namespace qualified type 'DefaultComplexItemRenderer' in CSS selector 'DefaultComplexItemRenderer'
[Edit]
The contentBackgroundAlpha and contentBackgroundColor styles for a Flex List are somewhat misleading! You generally want to style the item renderers. In the context of a list, these styles only affect a tiny bit of "chrome" that can appear around the list. See below for details on styling the renderers.
If you just want to show an image, the IconItemRenderer is the way to go. It extends LabelItemRenderer so it's optimized for mobile and also has two text fields as well.
Flex List components recycle item renderers to be efficient, and only create as many renderers as needed to display what is currently visible. To do this, the list populates the renderer's data property. So you want to configure your item renderer using this data property.
An efficient way to do that is to override the setter function for data. Create a new Actionscript class that extends IconItemRenderer add this to it:
override public function set data(value:Object):void
{
super.data = value;
// IconItemRenderer already has a BitmapImage component, it's property name is iconDisplay
// your ArrayList should therefore only contain Strings representing the image sources
// note how I've changed your ArrayList in the declarations tag below
iconDisplay.source = data.imageSource;
}
You'll likely want to configure that iconDisplay BitmapImage to look how you want it. The method above may get called frequently, so you can put code that only needs to happen once somewhere else... by overriding a Flex component lifecycle method like createChildren():
override protected function createChildren():void
{
super.createChildren();
iconDisplay.scaleMode="letterbox";
iconDisplay.smooth=true;
}
Now tell the List to use your renderer w/syntax like this:
<s:List itemRenderer="com.yourdomain.or.whatever.MyIconItemRendererClass" />
Styling the renderer:
<s:List alternatingItemColors="[0xFFFFFF, 0xFFFFFF]" selectionColor="#FF0000" />
Another way is to override the mobile item renderer's drawBackground() and/or drawBorder() protected methods and draw your own stuff w/the graphics api (or nothing at all).
Supplying the data:
Instead of giving the list an array of BitmapImage components, you give it an array of objects that contain your data. It's better to use strongly typed objects, but this works too:
<fx:Declarations>
<s:ArrayList id="arrList">
<fx:Object imageSource="assets/images/one.png" />
<fx:Object imageSource="assets/images/two.png" />
<fx:Object imageSource="assets/images/three.png" />
</s:ArrayList>
</fx:Declarations>
I like writing renderers in Actionscript... But there is also an MXML example in the link to IconItemRenderer docs at the top. It also shows how you to set the values of the two text areas in this renderer (with labelField and messageField). You can also specify a function that returns the label/message/icon values (with labelFunction, messageFunction, and iconFunction).
Looks like you should be able to use setStyle('contentBackgroundAlpha', 0); on your DefaultComplexItemRenderer.
Not 100% this is what you're looking for, not really familiar with this class. Any reason you're using this over extending LabelItemRenderer?
edit
I believe you may want to extend IconItemRenderer
Check out this tutorial
http://www.youtube.com/watch?v=EOpsDZaQrOI
Thanks for trying to help guys, but I found the quickest/simple solution to be be just as simple as copying the DefaultComplexItemRender from the SDK into a custom one, and then changing this one line of code
autoDrawBackground="false"
It's simple and it worked.
Is there any way to change Spark button label dynamically? When i click on it, i want the label to change. I bind the String to label and gives value for the first time, but even flashBuilder shows me that Data binding will not be able to detect assignments.
Here is my button:
<s:Button name="button" label="{butt}" x="5" y="3" useHandCursor="true"
click="start()" buttonMode="true" cornerRadius="5"
skinClass="skins.CustomButtom"/>
And here is assigment:
public var butt:String = "Start";
Update
Both answers work.
Make the variable Bindable like this:
[Bindable]
public var butt:String = "Start";
It is not advisable to have buttons with changing labels.
Even if you must, it is preferable to change the label property directly instead of introducing a binding because Flash Player needs to instantiate extra listeners for bound variables.
In this case, a binding is required only if you are going to be changing the label frequently.
Without the bindable, you might have noticed that Flash will assign the value "Start" to the label of the button (generally, the value of the bound variable at the time of creation of the button).
I'm trying to do this using only mxml, no <script> tags, although I don't necessarily need a solution that's only mxml. It was more of an educational exercise to see if I could do it all in mxml.
I have a custom component that has a slider and textinput and their value/text properties are bound together. I'm surfacing a few properties of the slider in my component so that it can sort of be treated like a slider.
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle" horizontalGap="0">
<mx:int id="value">{slider.value}</mx:int>
<mx:int id="minimum">0</mx:int>
<mx:int id="maximum">100</mx:int>
<mx:int id="tickInterval">25</mx:int>
<mx:Array id="labels">['0%','50%','100%']</mx:Array>
<mx:HSlider id="slider" liveDragging="true" snapInterval="1"
value="{int(input.text)}"
minimum="{minimum}"
maximum="{maximum}"
tickInterval="{tickInterval}"
labels="{labels}"/>
<mx:Spacer width="25"/>
<mx:TextInput id="input" restrict="0-9" text="{slider.value}" maxChars="3" width="30"/>
<mx:Label text="%"/>
</mx:HBox>
Notice the slider's VALUE property is bound to the input field's TEXT property, and vice versa. A two-way binding. This lets the user slide the thumb or type in the input field to select a value and they stay in sync with each other.
Also, the component's VALUE property is bound to the slider's VALUE property so that the value of this component will always contain the value of the slider (so that the component can be used like a slider).
The slider's properties are also bound to the component's properties (min, max, tick marks)
The problem is that I want to initialize the value of the slider from the value of the component, but the slider's value is already bound to the textinput. Can I also bind it to the component?
My application will have something like this:
<local:mycomponent minimum="20" maximum="80" labels="['20','50','80']" value="40"/>
A few things I tried that didn't work:
(1) I had an initialize handler.
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" initialize="slider.value=value">
This worked if my app had
myslider.value = 40;
but didn't work if I had
<local:mycomponent value="40"/>
(2) I tried a creationComplete handler
(3) I tried mx:binding
<mx:Binding source="slider.value" destination="this.value"/>
It seems like I'm missing something simple.
Note the curly brackets:
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" initialize="{slider.value=value}">
In the brackets, there may be any code. Without them, there can only be event handler (function).