theojo (1) [Avatar] Offline
#1
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>

<fxsmilieeclarations>
<!-- 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>

<!-- <br /> <br /> <s:SplashScreenImage> <br /> <s:SplashScreenImageSource <br /> source="@Embed('assets/splash.png')" <br /> dpi="240" <br /> aspectRatio="landscape"/> <br /> </s:SplashScreenImage> <br /> Define one or more SplashScreenImageSource. <br /> <s:SplashScreenImageSource <br /> source="@Embed('assets/logoDefault.jpg')"/> <br /> -->
<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>
</fxsmilieeclarations>

<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">

<ssmilieropDownList 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>
</ssmilieropDownList>


<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"/>


<ssmilieropDownList 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>
</ssmilieropDownList>


<s:HGroup y="54" left="364" right="172" width="13" height="32">
</s:HGroup>


<ssmilieropDownList 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>
</ssmilieropDownList>


<s:HGroup y="54" left="365" right="80" width="14" height="32">
</s:HGroup>


<ssmilieropDownList 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>
</ssmilieropDownList>
</s:HGroup>


<s:HGroup includeIn="State2" y="127" left="206" right="175" height="32">
<ssmilieropDownList 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>
</ssmilieropDownList>

<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"/>


<!-- <br /> <s:List id="list" top="0" bottom="0" left="0" right="0" <br /> dataProvider="{srv.lastResult.list.car}"> <br /> <s:itemRenderer> <br /> <fx:Component> <br /> <s:IconItemRenderer <br /> label="{data.carSensor} {data.cropFactor}" <br /> messageField="sensorSize"/> <br /> </fx:Component> <br /> </s:itemRenderer> <br /> </s:List> <br /> -->




</s:View>