I need help making what i thought was going to be an easy form type application in Flex. I need Drop Down List A to display a 2 pictures, populate a text field and select a specific option in Drop Down List B. Drop Down List B is also tied to one of the pictures so when you change Drop Down List B the picture will change.
For example Drop Down List A is a type of car, when you select your car it displays a picture of the car and a logo of the car and it chooses a car tire in Drop Down List B. As you change Drop Down List B it changes the picture of the car to correspond to the specific tire you chose and will also change Drop Down List C based on the car you chose and the tire you chose.
Here is what i have so far:
<?xml version="1.0" encoding="utf-8"?><s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" actionBarVisible="false" creationComplete="srv.send()" tabBarVisible="true" title="Home" splashScreenImage="@Embed('assets/splash.png')"> <s:states> <s:State name="State1"/> <s:State name="State2"/> </s:states> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> <s:HTTPService id="srv" url="assets/cars.xml"/> <s:SplashScreenImage> <s:SplashScreenImageSource source="@Embed('/assets/splash.jpg')"/> </s:SplashScreenImage> <!-- <s:SplashScreenImage> <s:SplashScreenImageSource source="@Embed('assets/splash.png')" dpi="240" aspectRatio="landscape"/> </s:SplashScreenImage> Define one or more SplashScreenImageSource. <s:SplashScreenImageSource source="@Embed('assets/logoDefault.jpg')"/> --> <s:ContentCache id="imgcache" enableCaching="true" enableQueueing="true" maxActiveRequests="1" maxCacheEntries="10"/> <s:ArrayCollection id="arrColl"> <s:source> <fx:Array id="arr"> </fx:Array> </s:source> </s:ArrayCollection> </fx:Declarations> <fx:Script> <![CDATA[ import spark.events.IndexChangeEvent; protected function dropDownList_changeHandler(evt:IndexChangeEvent):void { crop.text = "1.2x" + car.selectedItem; } ]]> </fx:Script> <s:SplitViewNavigator left="0" right="0" top="0" bottom="0" color="#212121"> </s:SplitViewNavigator> <s:BitmapImage includeIn="State1" height="100%" source="assets/state1.jpg" width="100%"/> <s:BitmapImage includeIn="State2" height="100%" source="assets/state2.jpg" width="100%"/> <s:Image left="0" right="0" top="0" bottom="0" source="assets/state1.jpg" source.State2="assets/state2.jpg"/> <s:HGroup y="54" left="15" right="298" height="32" y.State2="54" left.State2="15" right.State2="127"> <s:DropDownList id="car" width="187" height="20" change="dropDownList_changeHandler(event);" dataProvider="{srv.lastResult.list.car}" prompt="Select a car" width.State1="190" blendMode.State1="overlay" color.State1="#FFFFFF" contentBackgroundColor.State1="#464545" enabled.State1="true" width.State2="190" blendMode.State2="overlay" borderVisible.State2="false"> <s:itemRenderer> <fx:Component> <s:IconItemRenderer label="{data.carSensor} {data.cropFactor}" messageField="sensorSize"/> </fx:Component> </s:itemRenderer> </s:DropDownList> <s:TextArea id="crop" width="64" height="22" editable="false" width.State1="60" autoCorrect.State1="false" blendMode.State1="overlay" borderVisible.State1="false" editable.State1="false" enabled.State1="true" fontFamily.State1="_sans" fontSize.State1="20" fontWeight.State1="bold" paddingBottom.State1="0" paddingLeft.State1="0" paddingRight.State1="0" paddingTop.State1="0" selectable.State1="false" textAlign.State1="center" width.State2="60" blendMode.State2="overlay" borderVisible.State2="false" editable.State2="false" enabled.State2="true" fontFamily.State2="_sans" fontSize.State2="20" fontWeight.State2="bold" paddingBottom.State2="0" paddingLeft.State2="0" paddingRight.State2="0" paddingTop.State2="0" selectable.State2="false" textAlign.State2="center"/> <s:DropDownList id="tire" x="10" y="52" width="62" height="20" dataProvider="{srv.lastResult.list.tire}" prompt="tire" width.State1="64" blendMode.State1="overlay" width.State2="64" blendMode.State2="overlay"> <s:itemRenderer> <fx:Component> <s:IconItemRenderer label="{data.cartire}" messageField="cartire"/> </fx:Component> </s:itemRenderer> </s:DropDownList> <s:HGroup y="54" left="364" right="172" width="13" height="32"> </s:HGroup> <s:DropDownList id="desired" width="61" height="20" dataProvider="{srv.lastResult.list.desired}" width.State1="60" blendMode.State1="overlay" width.State2="60" blendMode.State2="overlay"> <s:itemRenderer> <fx:Component> <s:IconItemRenderer label="{data.carSensor} {data.cropFactor}" messageField="desired"/> </fx:Component> </s:itemRenderer> </s:DropDownList> <s:HGroup y="54" left="365" right="80" width="14" height="32"> </s:HGroup> <s:DropDownList id="actual" width="61" height="20" dataProvider="{srv.lastResult.list.actual}" blendMode.State1="overlay" blendMode.State2="overlay"> <s:itemRenderer> <fx:Component> <s:IconItemRenderer label="{data.carSensor} {data.cropFactor}" messageField="actual"/> </fx:Component> </s:itemRenderer> </s:DropDownList> </s:HGroup> <s:HGroup includeIn="State2" y="127" left="206" right="175" height="32"> <s:DropDownList id="cam2" width="192" height="20" blendMode="overlay" dataProvider="{srv.lastResult.list.cars2}"> <s:itemRenderer> <fx:Component> <s:IconItemRenderer label="{data.carSensor} {data.cropFactor}" messageField="cars2"/> </fx:Component> </s:itemRenderer> </s:DropDownList> <s:TextInput id="crop2" width="61" height="22" blendMode="overlay" borderVisible="false" editable="false" enabled="true" fontFamily="_sans" fontSize="20" fontWeight="bold" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" selectable="false" textAlign="center"/> </s:HGroup> <s:Button id="ShowState2" includeIn="State1" x="1" y="111" width="151" height="55" alpha="0" click="currentState='State2'" icon="assets/off.jpg"/> <s:Button id="ShowState1" includeIn="State2" x="2" y="112" width="147" height="53" alpha="0" click="currentState='State1'" enabled="true" icon="assets/on.jpg"/> <s:Image id="imaga" x="13" y="163" width="304" height="206" source="assets/singapore.jpg" fillMode.State1="scale" scaleMode.State1="zoom" fillMode.State2="scale" scaleMode.State2="zoom"/> <s:Image id="imagb" x="324" y="163" width="304" height="206" source="assets/singapore.jpg" fillMode.State1="scale" scaleMode.State1="zoom" fillMode.State2="scale" scaleMode.State2="zoom"/> <s:Image id="imagc" x="524" y="11" width="103" height="64" source="{data.image}" fillMode.State1="scale" scaleMode.State1="zoom" x.State2="524" y.State2="11" fillMode.State2="scale" scaleMode.State2="zoom"/> <s:Image id="imagd" includeIn="State2" x="524" y="84" width="103" height="64" fillMode="scale" scaleMode="zoom" source="assets/singapore.jpg"/> <!-- <s:List id="list" top="0" bottom="0" left="0" right="0" dataProvider="{srv.lastResult.list.car}"> <s:itemRenderer> <fx:Component> <s:IconItemRenderer label="{data.carSensor} {data.cropFactor}" messageField="sensorSize"/> </fx:Component> </s:itemRenderer> </s:List> --> </s:View>