I am using a combobox for the us states, link. The label is set to the full name of the state, while the value attribute holds the abbreviation. What I want to do is to get the selected item's value. So I tried combo.selectedItem.value and combo.selectedItem.#value, but neither of them worked. Can someone shed a light on this please?
Here's a simple example that might be helpful.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:ComboBox id="comboBox" dataProvider="{[{label:'California', value:'CA'}, {label:'New York', value:'NY'}]}" />
<mx:Label text="{comboBox.selectedItem.value}" />
</mx:Application>
Here's another example. In this one we use XML as dataProvider.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:XML id="xml" xmlns="">
<states>
<state label="Alabama" value="AL" country="US" />
<state label="Alaska" value="AK" country="US" />
<state label="Arkansas" value="AR" country="US" />
</states>
</mx:XML>
<mx:ComboBox id="comboBox" dataProvider="{xml.state}" labelField="#label" />
<mx:Label text="{comboBox.selectedItem.#value}" />
</mx:Application>
You can populate an array with the values you want to get and retrieve the index of the selected item on the combo box (which should be the same as in the array).
Or in your component ... just look for the index (selected item) child on statesUS
Related
I have a native menu item with a shortcut for a simple letter like "F".
<s:menu>
<mx:FlexNativeMenu id="mainMenu"
dataProvider="{menuData}"
labelField="#label"
keyEquivalentField="#keyEquivalent"
showRoot="false" />
</s:menu>
<fx:Declarations>
<fx:XML format="e4x" id="menuData">
<root>
<menuitem label="Edit">
<menuitem label="Frame Selection" keyEquivalent="f"/>
</menuitem>
</root>
</fx:XML>
</fx:Declarations>
This works great, but when I try to type text in any textfield or textInput
anywhere in the app, I cant ever type f.
How can stop the menu from stealing my keyboard input ?
Perhaps a better pattern to menu accelerators would use the control key, such as CTRL+F in your example.
Your menuitem would therefore include controlKey="true"
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:menu>
<mx:FlexNativeMenu id="mainMenu"
dataProvider="{menuData}"
labelField="#label"
keyEquivalentField="#keyEquivalent"
showRoot="false" />
</s:menu>
<fx:Declarations>
<fx:XML format="e4x"
id="menuData">
<root>
<menuitem label="Edit">
<menuitem label="Frame Selection"
keyEquivalent="f"
controlKey="true" />
</menuitem>
</root>
</fx:XML>
</fx:Declarations>
<s:TextInput />
</s:WindowedApplication>
I am trying to make a simple change on look of Flex 4.5 Spark DropDownLis trough extending it's item renderer, anyway even a just shiny new item renderer bring me as result a items which labels is blanks.
If i remove the renderer everything is fine, but with it - the items is blank white.
<s:DropDownList id="cbX" x="140" y="281" width="276" itemRenderer="comboItemRenderer" labelField="#text">
<mx:XMLListCollection>
<fx:XMLList>
<node text="1" />
<node text="2" />
<node text="3" />
</fx:XMLList>
</mx:XMLListCollection>
</s:DropDownList>
item renderer :
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<s:Label text="{data}"/>
</s:ItemRenderer>
Is it a bug, or i am doing it wrong ?
Try to use:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<s:Label text="{label}"/>
</s:ItemRenderer>
The data for the renderer is still the data. But if you use labelField you rely on List's label calculation routine. So just display it.
I have a panel with a button in it. Clicking on the button will direct the panel to state "State2" adding another two buttons into the panel. During the state change, I want the panel to resize first and then show the newly added two buttons, so I applied transitions onto the state change.
My question is:
If I put the two buttons within a HBox directly under the addChild tag, it works fine. However, if I create a new component with the same code (HBox with two buttons in it) and then add the new component to the panel (Comp in the code commented), it won't show the resize effect.
Could someone tell me how to fix this? Thanks in advance.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:Script>
<![CDATA[
protected function button1_clickHandler(event:MouseEvent):void
{
currentState="State2";
}
]]>
</mx:Script>
<mx:transitions>
<mx:Transition>
<mx:Sequence targets="{[comp,panel1]}">
<mx:Resize target="{panel1}" />
<mx:AddChildAction />
</mx:Sequence>
</mx:Transition>
</mx:transitions>
<mx:states>
<mx:State name="State2">
<mx:AddChild relativeTo="{panel1}" position="lastChild">
<mx:HBox id="comp">
<mx:Button label="B" />
<mx:Button label="C" />
</mx:HBox>
<!--<local:Comp id="comp" />-->
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Panel layout="horizontal" borderThickness="1" borderStyle="solid" id="panel1" title="AB">
<mx:Button label="A" click="button1_clickHandler(event)"/>
</mx:Panel>
</mx:Application>
I guess <mx:AddChild> tag can handle only one component at a time.
You will get your sweet resize effect if you separate your custom component to another <mx:AddChild> tag, similar to the code below:
<mx:AddChild relativeTo="{panel1}" position="lastChild">
<mx:HBox id="comp">
<mx:Button label="B" />
<mx:Button label="C" />
<!-- Don't put your custom component here. -->
</mx:HBox>
</mx:AddChild>
<!-- Use separated AddChild. Still add to same relativeTo object -->
<mx:AddChild relativeTo="{panel1}" position="lastChild">
<local:Comp id="comp2" />
</mx:AddChild>
I hope you got what you want.
I've made a custom component based on MenuBar. This is the code
<?xml version="1.0" encoding="utf-8"?>
<mx:MenuBar xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%"
labelField="#label">
<mx:XMLList>
<menuitem label="Website" />
</mx:XMLList>
</mx:MenuBar>
The problem is that the "Website" isn't displayed.
EDIT
I found the correct syntax and it's working now
<?xml version="1.0" encoding="utf-8"?>
<mx:MenuBar xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%"
labelField="#label" dataProvider="{menuXmlListCollection}">
<mx:XMLListCollection id="menuXmlListCollection">
<mx:XMLList>
<menuitem label="Website" />
</mx:XMLList>
</mx:XMLListCollection>
</mx:MenuBar>
You can do this same thing with a ArrayCollection:
private var menuXmlListCollection: ArrayCollection = new ArrayCollection([
{ label: "Website"},
{ label: "Webmail"},
{ label: "Blog"}];
Back again this time working with data providers.
Well i been doing a bit of training with Flex, and I've searched, and i managed to get a ComboBox being populated through XML data. Its works pretty well, he gets the LabelField for each item from XML, but the ID associated to each item he doesn't get then from the XML.
Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="355" height="465" creationComplete="getPaises.send();"
xmlns:ns1="com.*" title="Perfil" fontWeight="normal">
<mx:HTTPService id="getPaises" url="com-handler/paises.php" result="paisesHandler()"/>
<mx:Script>
<![CDATA[
private function paisesHandler():void
{
pais.dataProvider = getPaises.lastResult.paises.pais;
pais.data = "id";
pais.labelField = "nome";
}
]]>
</mx:Script>
<mx:ComboBox x="121" y="328" width="200" id="pais">
</mx:ComboBox>
</mx:TitleWindow>
And now the ouput XML from PHP:
<?xml version="1.0" encoding="utf-8"?>
<paises>
<pais>
<id>1</id>
<nome>Portugal</nome>
</pais>
<pais>
<id>2</id>
<nome>Espanha</nome>
</pais>
</paises
Well this is what it happens, i does gets the Country names from the XML
(<nome></nome>) but he doesn't place the associated ID (<id</id>).
I now that because i placed a Label bindable to the ComboBox.selectedIndex
<mx:Label x="121" y="403" text="{pais.selectedIndex}"/>
And as you also see i used pais.data = "id"; that according to examples i saw in the web, it should include the ID from XML to each item NOME in the ComboBox.
I new to Flex, so probably didn't expressed things the right way.
Any help is appreciated. Thanks.
You don't need this line:
pais.data = "id";
change the label to
<mx:Label x="121" y="403" text="{pais.selectedItem.id}"/>
EDIT: The code can be simplified to
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="355" height="465" creationComplete="getPaises.send();"
xmlns:ns1="com.*" title="Perfil" fontWeight="normal">
<mx:HTTPService id="getPaises" url="com-handler/paises.php" resultFormat="e4x"/>
<mx:ComboBox x="121" y="328" width="200" id="pais" labelField="nome"
dataProvider="{XML(getPaises.lastResult).pais}"/>
</mx:TitleWindow>
Edited the data provider. Thanks