9 Replies Latest reply on May 13, 2009 11:30 PM by VjFlex

    Use dropdown for the city and state in form

    VjFlex Level 1

      Please tell me if i want to use dropdownlist in my form for showing city, states and also how to get the big list for this(i.e. city,states)

        • 1. Re: Use dropdown for the city and state in form
          Barna Biro Level 3

          Hi there,

           

          Read up on the ComboBox component, if I'm right then that's what you want:

           

          http://livedocs.adobe.com/flex/3/html/help.html?content=dpcontrols_5.html

          http://livedocs.adobe.com/flex/3/langref/mx/controls/ComboBox.html

           

          Inside your form, you would simply create a ComboBox, popoulate it with whatever information you want and when the user clicks OK then simply read the data from all the fields and ComboBoxes and send it to the server ( or do with it whatever you want ).

           

          With best regards,

          Barna Biro

          Blog: http://blog.wisebisoft.com

          • 2. Re: Use dropdown for the city and state in form
            Gregory Lafrance Level 6

            This code should get you started:

             

            ---------------- mainapp.mxml ---------------

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
              creationComplete="statesSrvc.send();">
              <mx:Script>
                <![CDATA[
                  import mx.rpc.events.ResultEvent;
                  import mx.collections.XMLListCollection;
                 
                  [Bindable] private var statesXLC:XMLListCollection;
                 
                  private function statesHandler(evt:ResultEvent):void{
                    trace(evt.result.state.toString());
                    statesXLC = new XMLListCollection(evt.result.state as XMLList);
                  }
                ]]>
              </mx:Script>
              <mx:HTTPService id="statesSrvc" result="statesHandler(event)"
                resultFormat="e4x" url="states.xml"/>
              <mx:ComboBox id="statesCbx" dataProvider="{statesXLC}"
                labelField="@name" fontSize="14"/>
              <mx:Form>
                <mx:FormHeading label="State Information" fontSize="16"/>
                <mx:FormItem label="State:" fontSize="12" fontWeight="bold">
                  <mx:Label fontSize="12"
                    text="{statesXLC.getItemAt(statesCbx.selectedIndex).@name}"/>
                </mx:FormItem>
                <mx:FormItem label="Statehood:" fontSize="12" fontWeight="bold">
                  <mx:Label fontSize="12"
                    text="{statesXLC.getItemAt(statesCbx.selectedIndex).@statehood}"/>
                </mx:FormItem>
                <mx:FormItem label="Capital:" fontSize="12" fontWeight="bold">
                  <mx:Label fontSize="12"
                    text="{statesXLC.getItemAt(statesCbx.selectedIndex).@capital}"/>
                </mx:FormItem>
              </mx:Form>
            </mx:Application>

             

            --------------- states.xml -----------------

            <?xml version="1.0" encoding="utf-8"?>
            <states>
                <state name="Alabama" statehood="1819" capital="Montgomery"/>
                <state name="Alaska" statehood="1959" capital="Juneau"/>
                <state name="Arizona" statehood="1912" capital="Phoenix"/>
                <state name="Arkansas" statehood="1836" capital="Little Rock"/>
                <state name="California" statehood="1850" capital="Sacramento"/>
                <state name="Colorado" statehood="1876" capital="Denver"/>
                <state name="Connecticut" statehood="1788" capital="Hartford"/>
                <state name="Delaware" statehood="1787" capital="Dover"/>
                <state name="Florida" statehood="1845" capital="Tallahassee"/>
                <state name="Georgia" statehood="1788" capital="Atlanta"/>
                <state name="Hawaii" statehood="1959" capital="Honolulu"/>
                <state name="Idaho" statehood="1890" capital="Boise"/>
                <state name="Illinois" statehood="1818" capital="Springfield"/>
                <state name="Indiana" statehood="1816" capital="Indianapolis"/>
                <state name="Iowa" statehood="1846" capital="Des Moines"/>
                <state name="Kansas" statehood="1861" capital="Topeka"/>
                <state name="Kentucky" statehood="1792" capital="Frankfort"/>
                <state name="Louisiana" statehood="1812" capital="Baton Rouge"/>
                <state name="Maine" statehood="1820" capital="Augusta"/>
                <state name="Maryland" statehood="1788" capital="Annapolis"/>
                <state name="Massachusetts" statehood="1788" capital="Boston"/>
                <state name="Michigan" statehood="1837" capital="Lansing"/>
                <state name="Minnesota" statehood="1858" capital="Saint Paul"/>
                <state name="Mississippi" statehood="1817" capital="Jackson"/>
                <state name="Missouri" statehood="1821" capital="Jefferson City"/>
                <state name="Montana" statehood="1889" capital="Helena"/>
                <state name="Nebraska" statehood="1867" capital="Lincoln"/>
                <state name="Nevada" statehood="1864" capital="Carson City"/>
                <state name="New Hampshire" statehood="1788" capital="Concord"/>
                <state name="New Jersey" statehood="1787" capital="Trenton"/>
                <state name="New Mexico" statehood="1912" capital="Santa Fe"/>
                <state name="New York" statehood="1788" capital="Albany"/>
                <state name="North Carolina" statehood="1789" capital="Raleigh"/>
                <state name="North Dakota" statehood="1889" capital="Bismarck"/>
                <state name="Ohio" statehood="1803" capital="Columbus"/>
                <state name="Oklahoma" statehood="1907" capital="Oklahoma City"/>
                <state name="Oregon" statehood="1859" capital="Salem"/>
                <state name="Pennsylvania" statehood="1787" capital="Harrisburg"/>
                <state name="Rhode Island" statehood="1790" capital="Providence"/>
                <state name="South Carolina" statehood="1788" capital="Columbia"/>
                <state name="South Dakota" statehood="1889" capital="Pierre"/>
                <state name="Tennessee" statehood="1796" capital="Nashville"/>
                <state name="Texas" statehood="1845" capital="Austin"/>
                <state name="Utah" statehood="1896" capital="Salt Lake City"/>
                <state name="Vermont" statehood="1791" capital="Montpelier"/>
                <state name="Virginia" statehood="1788" capital="Richmond"/>
                <state name="Washington" statehood="1889" capital="Olympia"/>
                <state name="West Virginia" statehood="1863" capital="Charleston"/>
                <state name="Wisconsin" statehood="1848" capital="Madison"/>
                <state name="Wyoming" statehood="1890" capital="Cheyenne"/>
            </states>

            • 3. Re: Use dropdown for the city and state in form
              Barna Biro Level 3

              Hi Greg,

               

              A bit of an off topic if I might. You've been around here for quite, quite a long time. Would it be too much if I kindly ask you to use the code formatters? It's hard to read unfromatted code, especially when you need to scroll half a mile to get to the end of it. I would greatly appreciate the effort.

               

              Thanks,

              Barna Biro

              • 4. Re: Use dropdown for the city and state in form
                Gregory Lafrance Level 6

                I guess you mean the indent button? I usually just paste my code from Flex Builder into a text editor to remove the Flex Builder formatting, and then paste here, as Flex Builder formatting seems messy.

                 

                But if additional indenting would help I'll try to remember to do that.

                • 5. Re: Use dropdown for the city and state in form
                  Barna Biro Level 3

                  Greg Lafrance wrote:

                   

                  I guess you mean the indent button? I usually just paste my code from Flex Builder into a text editor to remove the Flex Builder formatting, and then paste here, as Flex Builder formatting seems messy.

                   

                  But if additional indenting would help I'll try to remember to do that.

                   

                  No, I mean into a  Java or Plain Text field so that the code is nicely formatted and highlighted ( it's called "Insert" button and from there, you select "Syntax Highlighting" and choose the prefered format ). Example:

                   

                  var text:String = "This is nicely formatted code".
                  

                   

                  Regarding Flex Builder, if you say that the code you paste from Flex Builder is messy then it's because you are using Tabs for indentation instead of Spaces. Go to Window -> Preferences -> Flex -> Editors and check "spaces". You can leave the indent size at it's default size ( 4 ) or change it if you want.

                   

                  Using spaces instead of tabs will assure that your code looks the same in any text editor.

                   

                  Good luck.

                  • 6. Re: Use dropdown for the city and state in form
                    Gregory Lafrance Level 6
                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                      creationComplete="init();">
                      <mx:Script>
                        <![CDATA[
                          import mx.core.UIComponent;
                          private function init():void{
                            var mySprite:Sprite = new Sprite();
                            mySprite.graphics.beginFill(0xFFCC00);
                            mySprite.graphics.drawCircle(30, 30, 30);
                            var label:TextField = new TextField();
                            label.width = 200;
                            label.text = "They call me mellow yellow...";
                            label.x = -30;
                            label.y = 80;
                            mySprite.addChild(label);
                            var uic:UIComponent = new UIComponent();
                            uic.addChild(mySprite);
                            this.addChild(uic);
                          }
                        ]]>
                      </mx:Script>
                    </mx:Application>
                    

                     

                    This is a test. I think this is what you meant. I do use spaces in Flex Builder, not tabs, but I'll try to insert code as in this example. Thanks for the tips.

                    • 7. Re: Use dropdown for the city and state in form
                      Barna Biro Level 3

                      Yeah, that's what I mean. I feel that it's way easier to read highlighted and nicely formatted code and another good thing is that if your code is insanely large then instead of streching the whole post, it simply adds a nice scrollbar to the code snippet.

                       

                      You're welcome.

                       

                      EDIT: and code can be copy-pasted more easily too. At least, that's how I feel about it.

                      • 8. Re: Use dropdown for the city and state in form
                        VjFlex Level 1

                        This thing is fine but if i want to add a big list of states, as in for different countries, different xml will be needed to be made like if i selected in Country Dropdwon ---> America, then list of american states should pop-up in the states dropdown and likewise for other countries.

                         

                        So, do i need to make all these xml's or there is some tool or source which makes it easy.

                        • 9. Re: Use dropdown for the city and state in form
                          Barna Biro Level 3

                          I don't know of any "tool" that would think the structure for you. XML is extremely easy, if you sacrifice max 1 day for it and read up on the syntax and how the structuring work then I'm sure that you can come up with a solution. By the way, no, you don't need N XML files, you could have one XML file which has a sightly more complex structure ( containing both "main states" and in case a state has "children" then it would ecapsulate that information too ).

                           

                          Once you have the structure, then all you need is a way to represent it. This part is really up to your choice, there are at least 4 ways I can think of representing something like that ( and believe me, there are more than 4 ways - it's really up to your imagination ).