Tuesday, September 4, 2007

The Road to Flex-2

  • All constraints are set relative to edges of a Canvas container (or those that can act as a canvas container like Application, Panel). They cannot be set relative to other controls or containers
  • Constraints help in controlling the view when window size changes
  • View state is one of the several views that you define for an application or a custom component. Every MXML page has at least one state, referred to as the base view state.
  • Each MXML page has a property called currentState that can be used to control which state of application to show to the user at any given time.
  • Setting currentState to blank string resets app to initial state
  • Forms are needed to collect info from users. In flex form containers can designate fields as optional or required, handle error messages and do validations. Form container uses <mx:Form>, <mx:FormHeading>, <mx:FormItem>. <mx:Form> is outermost tag and always arranges children in vertical fashion and left aligns them. We can have multiple heads. Form heading enable to specify label for a group of form items. Form item will automatically supply one label control. Other controls are added within tags and follow the label. By default all controls laid vertically right to the label. To change one needs to specify 'direction' property.
Questions:
  1. How are view constraints set in Flex?
  2. What is the use of having such constraints?
  3. What is the use of view states?
  4. What is the use of the property currentState?
  5. What will happen if the property currentState is set to a blank string?
  6. What is the use of forms in flex?
  7. How many heads/headings can a form have?
  8. What is the default layout for controls in a form? How can that be changed?
A sample MXML showing use of forms:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Form>
<mx:FormHeading label="Form Heading"/>
<mx:FormItem label="Item1 Name">
<mx:TextInput id="item1Txt" text=""/>
</mx:FormItem>
<mx:FormItem label="Item2 Name">
<mx:TextInput id="item2Txt" text=""/>
</mx:FormItem>
<mx:FormItem label="Item3 CB">
<mx:CheckBox id="cb1" selected="true"/>
</mx:FormItem>
<mx:FormItem>
<mx:HBox>
<mx:Button label="Save"/>
<mx:Button label="Cancel"/>
</mx:HBox>
</mx:FormItem>
</mx:Form>
</mx:Application>

No comments: