Upload
stefano-virgilli
View
1.561
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Building Flash-based websites using Flex Lesson 2 – Flex Essentials by Alex goh, associate trainer @ LAB School ( http://lab.edu.sg/ ), Adobe Authorized Training Centre, Singapore
Citation preview
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