0 Replies Latest reply on May 20, 2013 12:30 PM by OJO2013

    Help, Flex, Flashbuilder

    OJO2013

      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>