Flash Builder 46 Creating Converter App 3
1) Create a new Flex Mobile Project.
1a)Project Location.
Project name: Converter3.
1b)Mobile Settings.
Select View-Based Application.
1c) Server Settings.
Application server type: None.
1d)Build Paths.
Application ID: com.example.converter3
2) Project creation done.
3) Set Device and Switch to Design mode.
4) Set Run Configuration.
Target Platform: Google Android
Launch Method: On Desktop:Samsung Galaxy Ace
5) Edit the codes.
5a) Select the existing <f:xDeclarations> tag.
5b) Replace with the following codes:
<fx:Declarations>
<s:RadioButtonGroup id="radiogroup1"/>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Group>
<s:Group>
<s:Label id="label1" x="10" y="10" text="Select Measurement:"/>
<s:VGroup x="10" y="33">
<s:RadioButton id="radioButton1" label="Inch"
groupName="radiogroup1"/>
<s:RadioButton id="radioButton2" label="Centimeter"
groupName="radiogroup1"/>
</s:VGroup>
<s:Label id="label2" x="10" y="111" text="Input value:"/>
<s:TextInput id="text1" x="10" y="134"/>
<s:Button id="button1" x="10" y="175" label="Convert"/>
</s:Group>
<s:Group>
<s:Label id="label3" x="10" y="226" text="Inch:"/>
<s:TextInput id="text2" x="10" y="249" enabled="false"/>
<s:Label id="label4" x="10" y="290" text="Centimeter"/>
<s:TextInput id="text3" x="10" y="313" enabled="false"/>
</s:Group>
</s:Group>
5c) Outcome:
The components are divided into two groups using <s:Group>
5c) Run.
At the moment, there is no visual impact of <s:Group>
5d) Rotate.
6) Go to Design Mode and add States.
6a) Add Portrait state.
Create as Blank State
Set as start state.
6b) Add Landscape state.
6c) Outcome.
Check that the Device Orientation corresponds to the States.
7) Add Spark Layouts.
7a) Switch to Source Mode and click the outer <s:Group>
7b) Select landscape state and set Layout: spark.layouts.HorizontalLayout.
7c) Run the simulator and rotate.
BEFORE PROCEEDING TO NEXT STEPS, CHANGE DEVICE TO IPAD.
(This is to ensure that all objects are visible on the View).
8) Reposition the second <s:Group> items
8a) Switch to Design Mode. Select landscape state.
8b) Select the objects as shown below. Using up-arrow key, move them up.
8c) Select portrait state.
8d) Select the objects as shown below. Using up-arrow key, move them up.
CHANGE YOUR DEVICE BACK TO SAMSUNG GALAXY ACE
8e) The <s:Group> rearrange themselves when the device orientation changed.
However, the second sub-group fall out of screen.
8f) Switch to Source Mode.
Edit the text objects. Add width="200".
8g) Outcome.
i) Portrait.
ii) Landscape.
No comments:
Post a Comment