I'm trying to create simple custom component with two labels with this MXML:
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="250" height="30">
<mx:String id="result" />
<mx:Label x="5" y="7" id="titleLabel" text="{label}" width="120"/>
<mx:Label x="125" y="7" id="resultLabel" text="{result}" width="120" textAlign="right" color="#A41D00"/>
</mx:Canvas>
It is working well at runtime, bud I have troubles making it working at design-time. How can I make databinding work at the design time? If it is impossible, how should I code the label text assignements?
Try with text={data.label} and text={data.result} instead of mere label and result.
You won't see the actual data at design time. I'm not exactly sure what you're going for but here's how you might code the Labels
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
<mx:Script>
<![CDATA[
private var str : String = "Hello world";
]]>
</mx:Script>
<mx:Label x="5" y="7" id="titleLabel" text="{str}" width="120"/>
<mx:Label x="125" y="7" id="resultLabel" text="{titleLabel.text}" width="120" textAlign="right" color="#A41D00"/>
</mx:Application>
Related
I have a custom component that has an background image.
But when you generate this component by an ItemRenderer in a List, the background image is gone.
What am I doing wrong?
Here is an image. The first element is not generated in a list and has a background image. The other three are part of a List and have no background image.
Here is the code of the MXML of the List
<mx:VBox>
<solutionItems:displaySolutionItem /> <!-- This element shows the background image -->
<mx:List selectable="false"
useRollOver="false"
id="listControllers"
backgroundAlpha="1"
dataProvider="{controllers}" >
<mx:itemRenderer>
<fx:Component>
<solutionItems:displaySolutionItem /> <!-- These elements have nog background image -->
</fx:Component>
</mx:itemRenderer>
</mx:List>
</mx:VBox>
And here is the code of <solutionItems:displaySolutionItem />
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundImage="{itemBackGround}"
backgroundSize="100%">
<mx:Script>
<![CDATA[
[Bindable]
[Embed(source="assets/Components/ContainerBackgrounds/BoxBg.png", scaleGridLeft="5", scaleGridRight="50", scaleGridTop="5", scaleGridBottom="50")]
private var itemBackGround:Class;
]]>
</mx:Script>
<mx:VBox
paddingBottom="10"
paddingLeft="10"
paddingRight="10"
paddingTop="10">
<mx:CheckBox id="chbControllerItem" label="NSL-4601" styleName="titleRed" />
<mx:HBox>
<mx:Image width="67" height="50" id="loader1" source="#Embed(source='assets/Components/ContainerBackgrounds/BoxBg.png')"/>
<mx:HBox>
<mx:VBox>
<mx:Label text="Cube size" styleName="formLabel" height="12" />
<mx:Label text="Cube config" styleName="formLabel" height="12" />
<mx:Label text="Display res" styleName="formLabel" height="12" />
<mx:Label text="DPI" styleName="formLabel" height="12" />
<mx:Label text="Price" styleName="formLabel" height="12" />
</mx:VBox>
<mx:Box>
<mx:Label text="50''" height="12" />
<mx:Text text="2x3 (1224mm x 3264mm)" height="12" />
<mx:Label text="WXGA (1360x768)" height="12" />
<mx:Label text="72 dpi" height="12" />
<mx:Label text="€ 101.000,00" height="12" />
</mx:Box>
</mx:HBox>
</mx:HBox>
</mx:VBox>
</mx:Canvas>
It is probably something small, but I can not find it.
The following will get around the problem:
Remove the backgroundImage="{itemBackGround}" from the Canvas element of the itemRenderer
Add the following before the VBox in the itemRenderer class. I tested it out and it works fine:
<mx:Canvas width="100%" height="100%" backgroundImage="{itemBackGround}" backgroundSize="100%"/>
If your find a better way, sure update your question to let us know,
Brian
Have you tried setting the alpha, or backgroundAlpha properties on your List or perhaps in the itemRenderer?
I'm guessing that the List is either drawing something on top of the background, or preventing the background from being drawn. You'd have to step through code to know for sure, though.
I didn't try this, but look like
component is not creating multiple instance/copies of image for each renderer
possible solution may be is, load image in any Singleton/Constant Class like in Model and NOT in component/list and use Model's attribute reference in component/list i.e. one copy for all renderer.
Hopes this works
I want to create a custom list in Flex for an interface prototype. The list is supposed to have an image and 3 text fields. This is what I have done so far, the control displayed is what I want. But, when I click on one of the items, the item does not appear (visually) to be selected. I was not sure how I would implement this.
Here is my code so far:
<s:List width="400" height="220"
dataProvider="{arrColl}"
alternatingItemColors="[#EEEEEE, white]">
<s:itemRenderer>
<fx:Component>
<mx:Canvas height="100">
<mx:Image height="90" width="120" source="{data.imageSource}"></mx:Image>
<mx:Label left="125" y="10" text="{data.title}" />
<mx:Label left="125" y="30" text="{data.type}" />
<mx:Label left="125" y="50" text="{data.description}" />
</mx:Canvas>
</fx:Component>
</s:itemRenderer>
</s:List>
Not sure what kind of graphic your data.imageSource is. Perhaps the Image is masking the highlight. Can you try making it the backgroundImage of the Canvas? Also, I've noticed that using PNG or JPG images in lists and grids can mask highlight colors. They also can prevent mouseclicks from reaching the listItem. If possible try using a SWF with vector graphics.
For anyone else, who is stuck and on the same boat - this is what I did and it works now:
<mx:List width="400" height="220"
dataProvider="{arrColl}"
alternatingItemColors="[#EEEEEE, white]">
<mx:itemRenderer>
<fx:Component>
<mx:Canvas height="100">
<mx:Image height="90" width="120" source="{data.imageSource}"></mx:Image>
<mx:Label left="125" y="10" text="{data.title}" fontWeight="bold" />
<mx:Label left="125" y="30" text="{data.type}" fontStyle="italic" />
<mx:Label left="125" y="50" text="{data.description}" />
</mx:Canvas>
</fx:Component>
</mx:itemRenderer>
</mx:List>
Note: The difference is the List and itemRenderer are from the mx namespace rather than the s namespace.
I have an ArrayCollection of objects.
I'm passing this array to a horizontallist as a dataprovider and I'm using a custom itemRenderer.
When executing the application, the horizontallist is displaying
[object CustomClass][object CustomClass][object CustomClass][object CustomClass]
I've tried casting each object in the itemrenderer as following:
<mx:Label text="{(data as CustomClass).label1}"/>
But it's not working...
Thanks for any help you can provide.
Regards,
BS_C3
Edit - 09 March 2010
Let's go for some more code =)
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Component id="Item">
<mx:VBox width="180">
<mx:HBox width="100%">
<mx:Spacer width="100%"/>
<mx:Button label="x"/>
</mx:HBox>
<mx:Image id="thumbnail"/>
<mx:Label width="100%" horizontalCenter="0" text="Collection"/>
<mx:HBox width="100%">
<mx:Label width="100" text="GIA"/>
<mx:Label text="{data.charg_st}"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label width="100" text="Finger Size"/>
<mx:Label text="xxxxxx"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label width="100" text="Carat"/>
<mx:Label text="{data.carats}"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label width="100" text="Color"/>
<mx:Label text="{data.color}"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label width="100" text="Clarity"/>
<mx:Label text="{data.clarity}"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label width="100" text="Shop"/>
<mx:Label text="{data.lgort_fp}"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label width="100" text="Resizing"/>
<mx:Label text="{data.resizing}"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label width="100" text="Price Excl. VAT"/>
<mx:Label text="{data.net_price_fp}"/>
</mx:HBox>
</mx:VBox>
</mx:Component>
<mx:HorizontalList
dataProvider="{GlobalData.instance.tray}"
columnCount="4"
rowCount="1"
horizontalScrollPolicy="off"
itemRenderer="{Item}"
/>
</mx:Canvas>
FYI, the horizonalList dataprovider is an ArrayCollection of objects.
Now, the horizontallist is displaying empty items... with the correct width...
The arraycollection is not empty (I'm using an alert on the click event on an item, and I do retrieve the expected data).
Hope this will help >_<
Regards,
BS_C3
Have you tried
<mx:Label text="{data.label1}"/>
? (label1 being a property of your objects)
Use the labelField field within your list, see here
<mx:List dataProvider="{myDataProvider}" labelField="label1"/>
Try declaring your custom class as a variable somewhere in your component. Once you declare an instance of the class, Flex might have more success identifying the properties of the class.
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private var myClass:CustomClass;
]]>
</mx:Script>
<mx:Component id="Item">
<mx:VBox width="180">
...
thelost had it right with his code too. You should be able to use
<mx:Label text="{data.label1}"/>
to access your class's properties in your itemRenderer.
Edit: I'm sure you've done this, but also double check that you've set the dataProvider in your HorizontalList to a [Bindable] declaration of your CustomClass.
I managed to resolve my issue.
When I removed the width property of the itemrenderer's vbox, all data appeared in the horizontalList.
Why? I wouldn't know why but it seems like it was positionning the data somewhere out of the visible scope of the horizontallist (huh??).
The thing is that everything is working now. And for the final code, there you have:
HorizontalList:
<mx:HorizontalList id="hlist"
dataProvider="{TrayData.instance.itemsCollection}"
columnCount="{TrayData.instance.hlistColumns}"
rowCount="1"
itemRenderer="components.TrayItem"
horizontalScrollPolicy="off"
horizontalCenter="0" verticalCenter="0"
borderStyle="none"
horizontalScrollPosition="{TrayData.instance.hsPosition}"
/>
ItemRenderer:
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:HBox width="100%">
<mx:Spacer width="100%"/>
<mx:Button label="x"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Spacer width="15%"/>
<mx:VBox width="70%">
<mx:Image id="thumbnail" horizontalAlign="center"/>
<mx:Label width="100%" textAlign="center" text="Collection"/>
<mx:HBox width="100%">
<mx:VBox id="labelBox" width="100">
<mx:Label width="100" text="GIA"/>
<mx:Label width="100" text="Finger Size"/>
<mx:Label width="100" text="Carat"/>
<mx:Label width="100" text="Color"/>
<mx:Label width="100" text="Clarity"/>
<mx:Label width="100" text="Shop"/>
<mx:Label width="100" text="Resizing"/>
<mx:Label width="100" text="Price"/>
</mx:VBox>
<mx:VBox id="dataBox" width="100%" horizontalAlign="left">
<mx:Label text="{data.resizingCode + ' ' + data.charg_st}"/>
<mx:Label text="{data.fingerSize}"/>
<mx:Label text="{((new Number(data.carats))/100).toString()}"/>
<mx:Label text="{data.color}"/>
<mx:Label text="{data.clarity}"/>
<mx:Label text="{data.lgort_fp}"/>
<mx:Label text="{data.net_price_fp}"/>
</mx:VBox>
</mx:HBox>
<mx:Button label="Order" enabled="{data.product_type == 'C'}" width="50%"/>
</mx:VBox>
<mx:Spacer width="15%"/>
</mx:HBox>
</mx:VBox>
Regards,
BS_C3
I am trying to use a combobox in flex with an array to change to a canvas in a view stack.
Can I do this with some custom action script? The UI I am designing could really benefit form this.
Here's a little demo app that demonstrates what you are trying to do:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
import mx.core.Container;
private function onComboBoxChange():void
{
stackNav.selectedChild = this[comboNav.selectedItem];
}
]]>
</mx:Script>
<mx:ComboBox id="comboNav" dataProvider="{['canvas1','canvas2']}" change="onComboBoxChange()"/>
<mx:ViewStack id="stackNav" width="400" height="300">
<mx:Canvas id="canvas1" width="100%" height="100%">
<mx:Label text="Hello" horizontalCenter="0" verticalCenter="0"/>
</mx:Canvas>
<mx:Canvas id="canvas2" width="100%" height="100%">
<mx:Label text="World!" horizontalCenter="0" verticalCenter="0"/>
</mx:Canvas>
</mx:ViewStack>
</mx:Application>
You can change the logic in onComboBoxChange() to use selectedIndex as well:
stackNav.selectedIndex = comboNav.selectedIndex;
Or you can bind the selectedIndex of the viewStack to the selectedIndex property of the combo:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:ComboBox id="comboNav" dataProvider="{['canvas1','canvas2']}"/>
<mx:ViewStack id="stackNav" width="400" height="300"
selectedIndex="{comboNav.selectedIndex}">
<mx:Canvas id="canvas1" width="100%" height="100%">
<mx:Label text="Hello" horizontalCenter="0" verticalCenter="0"/>
</mx:Canvas>
<mx:Canvas id="canvas2" width="100%" height="100%">
<mx:Label text="World!" horizontalCenter="0" verticalCenter="0"/>
</mx:Canvas>
</mx:ViewStack>
</mx:Application>
You can use this solution, but be warned that you can not pike a word with space
(try to change "canvas1" to "canvas 1") and you will see:
[Bindable] private var models:Array = ["tasks","users","bugs"];
public function changeViewStackModel():void {
//this.modelViewStack.selectedChild=users; //works
//this.modelViewStack.selectedChild="users"; //does not work
//this.modelViewStack.selectedChild=this.modelsCombo.selectedItem; //does not work
switch(modelsCombo.selectedItem) {
case "tasks": modelViewStack.selectedChild=tasks; break;
case "users": modelViewStack.selectedChild=users; break;
case "bugs": modelViewStack.selectedChild=bugs; break;
}
}
MXML code:
<mx:ComboBox id="modelsCombo" dataProvider="{models}" selectedIndex="0"
change="changeViewStackModel()"/>
<mx:ViewStack x="29.25" y="55" id="modelViewStack" width="90%" height="200">
<mx:Canvas id="tasks" label="Tasks"><mx:Label text="Tasks stack view!!"/>
</mx:Canvas>
<mx:Canvas id="users" label="Users"><mx:Label text="Users stack view!!"/>
</mx:Canvas>
<mx:Canvas id="bugs" label="Bugs"><mx:Label text="Bugs stack view!!"/>
</mx:Canvas>
</mx:ViewStack>
This is similar to my previous posting. But this time I want to call a function that exists on the main mxml page.
This is my main mxml page:
main.mxml
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">
<mx:Script>
<![CDATA[
public function changeText(currentText:String):void{
switch (currentText){
case "changeText":
lblOne.text = "More Text";
}
}
]]>
</mx:Script>
<mx:HBox x="137.5" y="10" width="100%" height="100%">
<ns1:menu id="buttons"> </ns1:menu>
</mx:HBox>
<mx:Canvas x="137" y="88" width="408.5" height="200">
<mx:HBox x="0" y="10" width="388.5" height="190">
<mx:Panel width="388" height="179" layout="absolute">
<mx:Label x="10" y="10" text="Some Text" visible="{buttons.showLabel}" id="lblOne"/>
</mx:Panel>
</mx:HBox>
</mx:Canvas>
</mx:Application>
Here is my included page:
menu.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
<mx:Script>
<![CDATA[
[Bindable] public var showLabel:Boolean = true;
]]>
</mx:Script>
<mx:MenuBar width="380" height="58"></mx:MenuBar>
<mx:Button x="10" y="10" width="80" label="Show" id="btnOne" click="this.showLabel=true;" />
<mx:Button x="94" y="10" width="80" label="Hide" id="btnTwo" click="this.showLabel=false;"/>
<mx:Button x="181" y="10" width="80" label="Run Function" id="btnThree" click="{changeText('changeText')}"/>
</mx:Canvas>
How do I call the changeText function from the button on menu.mxml?
Add this to menu:
<mx:Metadata>
[Event(name="buttonClicked", type="flash.events.Event")]
</mx:Metadata>
<mx:Button x="10" y="10" width="80" label="Show" id="btnOne" click="this.showLabel=true;dispatchEvent(new Event("buttonClicked"));"/>
Change main to:
<ns1:menu id="buttons" buttonClicked="changeText("Your Text");">
I couldn't tell where current text is coming from but if it is from menu you may have to build your own custom flex event or create a common variable for the two parts to access. The first is usually preferred.
P.S. The event metadata thing could also be achieved by adding the event listener when the creation of the application completes. You would add to main:
buttons.addEventListener("buttonClicked",changeText("Your Text"));
there is a simpler way, just use parentDocument.
Change this:
<mx:Button x="181" y="10" width="80" label="Run Function" id="btnThree" click="{changeText('changeText')}"/>
to:
<mx:Button x="181" y="10" width="80" label="Run Function" id="btnThree" click="{parentDocument*.changeText('changeText')}"/>**