After this training session

• What is Adobe Flex?• How to create rich User Interfaces in Adobe Flex?• About Flex system architecture and design• Using actionscript in Flex Programming• To create rich Desktop Applications in Adobe AIR

…you will know

Introduction to Adobe Flex

• Platform for building rich internet applications

• Open Source Framework• Based on Eclipse IDE• Originated in Flash

Environment• Can develop cross platform

applications• Is cross browser compatible• Applications compatible with

Flash Lite embedded systems (mobiles, PDAs)

What is Adobe Flex?

Adobe Flex prerequisites

• Sun Java Runtime Environment 1.4.2 or later

• Adobe Flex Builder 3 • Flash Player 9• Flex 3 SDK• 512MB of RAM (1GB

recommended) • 200MB of available hard-

disk space

What you need?

Adobe Flex Builder interface

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.

DAY 1Creating rich user interfaces

• Flex UI Basics• Purpose of UI containers • Basic UI controls in a Flex application• What you can do with controls• Creating Styles• Transition and effects• Positioning developed application• Navigator containers• Customizing List based controls

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

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.

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.

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 "data provider". 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 capabilitiesPositioning capabilitiesAbility to dispatch eventsAbility to accept keyboard focus and mouse inputAbility to control visibility

Creating stylesSometimes 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 MXMLEmbedded Script tagExternal CSS StylesheetSetStyle() 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.

Transition and effectsWithin 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

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 "absolute", 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

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.

Customizing List based controls

List-based controls are those that extend the ListBase class at some point in their inheritance hierarchy. They include the ComboBox, List, HorizontalList, DataGrid, Tile, Menu, and Tree controls.

You can set a component's data provider in in two ways:

• Define the data provider inline in the MXML by defining an Array or Collection as a child tag of a control that takes a data provider.

• Use data binding to bind a control to an existing Array or Collection that is defined using ActionScript. This latter approach is used to display data resulting from server-side calls and to bind to data structures created in ActionScript

More To Learn

What to Learn in next part?

Flex System Architecture and DesignTransfer data between components by using data bindingsHandle FrameworkUsing Flex in the Adobe Integrated Runtime (AIR)

** Keep visiting for the next part of presentation