Presentation on the basics of Adobe Flex. Introduction and UI concepts.

5. Adobe Flex Builder interface

6. How to create an application MXML is a XML-based user interface markup language. Application developers use MXML in combination with ActionScript to develop Rich Internet applications. Adobe Flex Builder is the IDE which allow you to write MXML, use drag and drop controls , do some action scripting and VOILA ! Your application is ready to be deployed over the web or as desktop application.

8. Flex UI basics A Flex application's user-interface (UI) is composed of two component types - Containers and Controls. Containers define application layout and navigation. Controls represent a broad category of UI objects required for a fully functional and interactive application. Flex user interface controls are found in the mx.controls package of the Flex Class library. Some Flex controls are not interactive, examples of non-interactive controls include Label and ProgressBar

9. Purpose of UI containers Flex containers serve as a mechanism for defining application layout and navigation. Common layout containers include VBox , HBox , Canvas , Tile and Form . Navigation containers include Accordion , Tab Navigator and View Stack . Each container extends the Container Class , serves a unique purpose and is available for use at the discretion of the application developer. Application is the default container provided at the root of your Flex application. There is no need to define the Application container as it comes part of any Flex application courtesy with the <mx:Application> tag.

10. Basic UI controls in a Flex application Text-based controls are designed to display text and/or receive text input. Examples include Label , Text , TextArea , TextInput , and RichTextEditor . Button-based controls receive user input in the form of keyboard or mouse events. Examples include Button , LinkButton , CheckBox , RadioButton and PopUpButton . List-based controls is a subset of data provider controls, visually represent hierarchical or non-hierarchical (flat) data structures. Examples include ComboBox , List , HorizontalList , DataGrid , TileList and Tree . Menu-based controls another subset of data provider controls enable user-initiated navigation through use of a static menu or a popup menu. Examples include Menu , MenuBar and PopUpMenuButton .

11. What you can do with controls? Data provider controls display data from a variety of sources, both internal and external to your application. All data provider controls require designation of a &quot;data provider&quot;. List based controls and Menu based controls are a subset of data provider controls. All Flex controls subclass (or extend) the UIComponent class , and therefore, inherit the following key behaviors: Resizing capabilities Positioning capabilities Ability to dispatch events Ability to accept keyboard focus and mouse input Ability to control visibility

12. Creating styles Sometimes for branding or making the application UI unique, styling application becomes essential. Style properties are defined at the component level in one of 4 ways: Inline MXML Embedded Script tag External CSS Stylesheet SetStyle() method Many components have only one state while others have many states. Each state has a unique skin. For example, a button component has 8 states ( up , over , down , disabled , selected up , selected over , selected down , selected disabled ). Each button state has a skin referenced by skin name: upSkin , overSkin , downSkin , disabledSkin , selectedUpSkin , selectedOverSkin , selectedDownSkin , selectedDisabledSkin . You can also change color, font color, background border properties of components to provide an unique styling of the application.

13. Transition and effects Within the Flex framework, the term View refers to the User Interface (UI) as a whole and represents an aggregate of all visual permutations of an application. This naming convention mirrors the convention adopted by a popular Flex architecture, MVC (model-view-controller). Altering the appearance of a component involves the use of overrides via a State. Valid overrides include AddChild , RemoveChild , SetEventHandler , SetProperty and SetStyle . Thus transitions are formed from one state to another state. You can also associate effects to a transition, which includes: Masking effects : Iris, WipeDown, WipeLeft, WipeRight, WipeUp Tween effects : Blur, Dissolve, Fade, Glow, Move, Pause, Resize, Rotate, Zoom

14. Positioning developed application Most Flex containers use a predefined set of rules to automatically position all child components that you define within them. If you use a Canvas container, or an Application or Panel container with the layout property set to &quot; absolute &quot;, you can specify absolute positions for its children, or use constraint-based layout. There are three ways to position your components in a Flex application: Using automatic positioning Using absolute positioning Using constraint-based layout

15. Navigator containers Accordion - Displays only one panel at a time. To navigate a container, the user clicks the navigation button that corresponds to the child panel that they want to access. TabNavigator - A TabNavigator container creates and manages a set of tabs, which you use to navigate among its children. ViewStack - A ViewStack navigator container is made up of a collection of child containers that are stacked on top of each other, with only one container visible, or active, at a time.

17. More To Learn What to Learn in next part? Flex System Architecture and Design Transfer data between components by using data bindings Handle Framework Using Flex in the Adobe Integrated Runtime (AIR) ** Keep visiting for the next part of presentation