Flash Builder 4.7 and design view question

Question

I have programmed a large, commercial level mobile application using Flash Builder 4.6. It is working GREAT when ran on both iOS and Android devices. 
I was using the trial version of Flash Builder 4.6 to develop this application. I used the states feature that FB has built in to handle Portrait, Landscape, and Phone / Tablet configs. This means that I built 4 different layouts for all 8 of my views in my mobile application. Using the design view in FB 4.6 was what allowed me to do this.
I have to say that I LOVE Flash Builder so far. GREAT tool. 
My trial ended just last week. I had to purchase version 4.7 of the software, only to find out that they REMOVED the design view from the software.
All complaining aside, what have other programmers who are in the same boat as me done as a solution? I would like to continue to program in AS and Flash Builder as I have taken the time to write the application and learn the whole platform. 
As it stands now, I am in the process of downgrading my liscence keys from 4.7 to 4.6, but in order to do this I had to RETURN my retail version of FB 4.7 premium (bought online) and buy a volume liscening version (NOT through adobe, only allowed to do this through a reseller such as CDW). then once I have a key for 4.7 through volume liscencing, it can be downgraded to 4.6.
I'm hoping to get input from others in the same boat. Did you change Programming languages? if so, to what? Did you change IDE's? If so, to what?

Answer 1

Joe -
     I actually never completed the downgrade to 4.6 so I've been using 4.7 without the design view.    In 4.6, I would put a control on the view within design view.  Then I would change each state, move it around, and it would be placed that way.  In my case, each view has 4 states - portraitPhone, landscapePhone, portraitTablet, and landscapeTablet.   I had to do this 4 times for each control under 4.6
     So I went back and looked at my code in 4.7 and all the resulting code was these explicit x, y, height, and width values.  See the code below:
<s:states> <s:State name="portraitPhone" stateGroups="phone,portrait"
/>
 <s:State name="landscapePhone" stateGroups="phone,landscape"/>
 <s:State name="portraitTablet" stateGroups="tablet,portrait"/>
 <s:State name="landscapeTablet" stateGroups="tablet,landscape"/>
 </s:states>
 <s:List id="lstMake" x="10" y="19" height="25%" allowMultipleSelection="false"borderVisible="
true" click="changeMake(event)" labelField="label"width.landscapePhone="
295" height.landscapePhone="105"x.landscapeTablet="
25" y.landscapeTablet="54" width.landscapeTablet="461"height.landscapeTablet="
292" fontSize.landscapeTablet="24"width.portraitPhone="
182" height.portraitPhone="175"x.portraitTablet="
16" y.portraitTablet="35" width.portraitTablet="399"height.portraitTablet="
360" fontSize.portraitTablet="24">
 <s:dataProvider>
 <s:ArrayList id="makeCollection">
 <fx:Object label="Cadillac" data="18"/>
 <fx:Object label="Chevrolet" data="1"/>
 <fx:Object label="Dodge" data="2"/>
 <fx:Object label="Ford" data="3"/>
 <fx:Object label="GMC" data="4"/>
 <fx:Object label="Isuzu" data="6"/>
 <fx:Object label="Jeep" data="7"/>
 <fx:Object label="Licoln" data="8"/>
 <fx:Object label="Mazda" data="9"/>
 <fx:Object label="Mercury" data="10"/>
 <fx:Object label="Nissan" data="11"/>  
<fx:Object label="Oldsmobile" data="12"/>
 <fx:Object label="Sterling" data="20"/>
 <fx:Object label="Suzuki" data="13"/>
 <fx:Object label="Toyota" data="14"/>
 </s:ArrayList>
 </s:dataProvider>
 </s:List>
 <s:Label x="10" y="8" fontSize="11" text="Vehicle Make"x.landscapeTablet="
10" y.landscapeTablet="23" fontSize.landscapeTablet="24"fontSize.portraitTablet="
24"/>
 <s:Label x="143" y="11" fontSize="11" text="Vehicle Year"x.landscapePhone="
354" y.landscapePhone="10"x.landscapeTablet="
517" y.landscapeTablet="23" width.landscapeTablet="143"height.landscapeTablet="
26" fontSize.landscapeTablet="24"x.portraitPhone="
204" y.portraitPhone="8"x.portraitTablet="
446" y.portraitTablet="11" fontSize.portraitTablet="24"/>
 <s:List id="lstYear" x="145" y="20" height="25%" allowMultipleSelection="false"borderVisible="
true" click="doYearChange(event)" dataProvider="{yearCollection}"labelField="
value"x.landscapePhone="
313" y.landscapePhone="19" width.landscapePhone="157"height.landscapePhone="
105"x.landscapeTablet="
524" y.landscapeTablet="54" width.landscapeTablet="343"height.landscapeTablet="
292" fontSize.landscapeTablet="24"x.portraitPhone="
200" y.portraitPhone="19" height.portraitPhone="194"x.portraitTablet="
453" y.portraitTablet="37" width.portraitTablet="276"height.portraitTablet="
358" fontSize.portraitTablet="24">
 </s:List>
 <s:List id="lstModel" x="10" y="147" height="30%" borderVisible="true"dataProvider="
{modelCollection}" labelFunction="lblFunct"width.landscapePhone="
460" height.landscapePhone="99"x.landscapeTablet="
13" y.landscapeTablet="384" width.landscapeTablet="992"height.landscapeTablet="
309" fontSize.landscapeTablet="24"x.portraitPhone="
10" y.portraitPhone="221" width.portraitPhone="301"height.portraitPhone="
184" allowMultipleSelection="false"click="doModelSelected(event)" fontSize.portraitPhone="
12"x.portraitTablet="
16" y.portraitTablet="428" width.portraitTablet="742"height.portraitTablet="
521" fontSize.portraitTablet="24"></s:List>
 <s:Label x="12" y="132" fontSize="11" text="Vehicle Model"x.landscapeTablet="
10" y.landscapeTablet="354" fontSize.landscapeTablet="24"x.portraitPhone="
10" y.portraitPhone="207"x.portraitTablet="
10" y.portraitTablet="401" width.portraitTablet="154"height.portraitTablet="
21" fontSize.portraitTablet="24"/>
  So instead of continuing to try and modify these values by hand, then run the program, using trial and error, I took a different tact.   I removed ALL x y height and width values.  Then, I wrapped all the mxml code in either <s:HGroup or <s:Vghroup tags depending on what I wanted.  Then I would just set the vertical and horizontal align on these groups.  This allows everything to scale correctly based on the size of the view (each device really is a little different).   Finally,  I hand entered things like font sizes by using State Groups like this:   fontSize.phone="12"  fontSize.tablet="22".    It still took testing on the screen to see how my layouts worked but it just makes the UI so much easier to change around and works so much better with out all the static stuff in it.
If you have some time , I would suggest taking one of your 4.6 views that has all these static variables and trying to modify it to work like I said above.    My modified code (to do the same thing as above) is below:
<s:states> <s:State name="portraitPhone" stateGroups="phone,portrait"
/>
 <s:State name="landscapePhone" stateGroups="phone,landscape"/>
 <s:State name="portraitTablet" stateGroups="tablet,portrait"/>
 <s:State name="landscapeTablet" stateGroups="tablet,landscape"/>
 </s:states>
 <s:VGroup height="100%" width="100%" verticalAlign="top">
 <s:HGroup paddingTop="10" width="100%" height="50%">
 <s:VGroup width="60%" paddingLeft="5">
 <s:Label fontSize="11" text="Vehicle Make"fontSize.tablet="
24"/>
 <s:List id="lstMake" width="100%" allowMultipleSelection="false"borderVisible="
true" click="changeMake(event)" labelField="label"fontSize.tablet="
24" fontSize.phone="12">
 <s:layout>
 <s:VerticalLayout horizontalAlign="contentJustify" requestedMaxRowCount.portraitTablet="8" requestedMaxRowCount.phone="6" requestedMaxRowCount.landscapeTablet="4"gap="
0" rowHeight.phone="28" variableRowHeight="false" rowHeight="55"verticalAlign="
middle"/>
 </s:layout>
 <s:dataProvider>
 <s:ArrayList id="makeCollection">
 <fx:Object label="Cadillac" data="18"/>
 <fx:Object label="Chevrolet" data="1"/>
 <fx:Object label="Dodge" data="2"/>
 <fx:Object label="Ford" data="3"/>
 <fx:Object label="GMC" data="4"/>
 <fx:Object label="Isuzu" data="6"/>
 <fx:Object label="Jeep" data="7"/>
 <fx:Object label="Lincoln" data="8"/>
 <fx:Object label="Mazda" data="9"/>
 <fx:Object label="Mercury" data="10"/>
 <fx:Object label="Nissan" data="11"/>  
<fx:Object label="Oldsmobile" data="12"/>
 <fx:Object label="Sterling" data="20"/>
 <fx:Object label="Suzuki" data="13"/>
 <fx:Object label="Toyota" data="14"/>
 </s:ArrayList>
 </s:dataProvider>
 </s:List>
 </s:VGroup>
 <s:VGroup width="30%">
 <s:Label fontSize="11" text="Vehicle Year"fontSize.tablet="
24"/>
 <s:List id="lstYear" width="100%" allowMultipleSelection="false" borderVisible="
true" click="doYearChange(event)" dataProvider="{yearCollection}"labelField="
value" fontSize.phone="12" fontSize.tablet="24">
 <s:layout>
 <s:VerticalLayout horizontalAlign="contentJustify" requestedMaxRowCount.portraitTablet="8" requestedMaxRowCount.phone="6" requestedMaxRowCount.landscapeTablet="4"gap="
0" rowHeight.phone="28" variableRowHeight="false" rowHeight.tablet="55"verticalAlign="
middle"  
/>
 </s:layout>
 </s:List>
 </s:V