Building Flash-based websites using Flex

Lesson 2 – Flex Essentials

Alex Gohinfo@alekkus.com

Agenda

● Adobe Flex Builder

● Flex Programming

● UI Components

● Customising UI Component

● Skinning using CSS

● Adobe's development tool for developing Flex applications

● Retail price - US$249● 60 days trial - http://www.adobe.com/products/flex/ ● Free to student - https://freeriatools.adobe.com/flex/ ● Free to unemployed developers - https://freeriatools.adobe.com/learnflex/

● Alternatively, any text editor can be used to do coding; compile to SWF using the Adobe's Flex compiler (free)

Adobe Flex Builder

Adobe Flex Builder – Design mode

Design area Project file navigator

Drawing components

Component Properties

Adobe Flex Builder – Source mode

Source codes edit area Project file navigator

Flex Programming

Design mode

Source mode

● Flex programming uses a mixture of MXML and Actionscript 3 codes.

● MXML, like HTML, is mainly to draw the user interface components.

● Actionscript, like Javascript, allows more complex user interactions or application behaviour.

● Note that there's always an equivalent Actionscript code for all MXML code, but not vice versa.

Common Flex UI Components - Controls

Label:

TextInput:

TextArea:

ComboBox:

CheckBox:

RadioBox:

Button:

ColorPicker:

DateField:

Hslider:

Image:

Datagrid:

DateChooser:

Common Flex UI Components – Layout and Navigators

Canvas:

HBox:

VBox:

Tile:

TabNavigator:

Accordion:

Customising Flex UI Components

● Flex provides many basic UI components to get you started. Once you are profiicent, you can make your own UI components or customise the existing ones.

Skinning UI Components using CSS

● Customising UI components requires in-depth knowledge of Actionscript.

● For newcomers, use CSS to change the appearance of UI components.

● Ensure a property or variable always get the latest value of another property or variable

● e.g.

Data Binding

● Flex Image component accept the following file formats: JPG, GIF, PNG, SWF (for vector)

● Image can be load at runtime or embed into the SWF file

● Load image at runtime

● Embed into SWF file – No need to wait for image to load, but SWF file size increases

Image Component

Official Adobe Flex Documentation

● A MUST-HAVE when developing Flex application

● Launch from Flex Builder, Help > Help contents, or Shift + F2.

● Flex component explorer - http://www.adobe.com/devnet/flex/tourdeflex/

● Flex examples and source codes - http://blog.flexexamples.com/

Resources