Adobe Flex

Adobe Flex Adobe Flex is a collection of technologies released by Adobe for the development and deployment  of cross platform, rich Internet applications (RIA) based on the proprietary Flash platform. It ‘s  composed of 2 technology MXML and ActionScript3.  Flex Application Delivered as a Flash .swf file wrapped in a generated HTML page and it requires  Flash Player 9 on the client. 

  Figure 1 Flex Application 

       

MXML MXML is a XML‐based markup language, offers a way to build and lay out graphic user interfaces  introduced by Macromedia in March 2004. Application developers use MXML in combination with  ActionScript to develop Rich Internet applications. Another user interface languages are UIML, XUL,  XForms, XAML, XHTML, or SVG. 

  Figure 2 example of MXML 

ActionScript ActionScript is a scripting language based on ECMAScript. ActionScript is used primarily for the  development of websites and software using the Adobe Flash Player platform. Its syntax is similar  to the JAVA programming language. 

  Figure 3 example of ActionScript 

   

Flex Application Development Process 1. 2. 3. 4.

Define User interface.  Add dynamic behavior.  Define and connect to data services as needed.  Build the source code into an SWF file that runs in the Flash Player. 

Flex Builder Flex Builder is an IDE, develop by adobe base on eclipse platform. It provides flex component in  graphic user interface that easy to use, developer can drag and drop component at main editor. It  also helps developer easily with code auto complete. It also provide a great debugging tool  however the cost of this IDE is about $249 and $0 for 60 days trial. 

  Figure 4 Flex editor 

Practice 1: Flex Builder Using 20 minutes for install, create new project, try perspective, view, run, debug, profiling     

Flex components Flex components is an MXML or ActionScript that already build for creating user interface. It can  divide into 5 categories as the following:  Controls  •

Button, Checkbox, ColorPicker, DateChooser, … 

Layout  •

Canvas, ControlBar, Form, Panel, TitleWindow,… 

Navigators  •

Accordian, MenuBar, TabBar, ViewStock, … 

Charts  •

Area, Bar, Column, Line, Pie, Plot, … 

Custom  •

Any file .MXML or .AS in project 

Practice2: Hello world Using Flex Builder to create user interface as the following: 

   

 

Practice3: View Stack Using Flex Builder to create user interface with view stack component as the following: 

 

Practice4: Tab Navigation / Accordian Using Flex Builder to create user interface with tab navigation and accordian component as the  following: 

 

     

 

Practice5: understand MXML Drawing user interface from the following MXML (without using Flex Builder) 

       

 

Event Handling There is 2 ways for create event handling into flex object. First is using attribute of object  component. Second is using EventListerner. 

Click Event I want to add event to myButton (button component). The event is when user click myButton it  will call function fillLabel to do some operation. 

  Using attribute  <mx:Button label=“Test” id=“myButton” x=“90” y=“96” click=“fillLabel(event)” />  Using EventListerner  <mx:Script>  myButton.addEventListener(MouseEvent.CLICK ,fillLabel);   

Practice6: Mouse click Event Create Flex application using attribute for event handling as the following: 

 

 

When user click Test button, it will show message “The button is clicked” and also add another  button like  

 

Practice7: addEventListener Create Flex application using addEventListener for event handling as the following: 

   

Enter Event TextInput Component  <mx:TextInput x="226" y="166" id="msg" enter="addToQueue()" /> 

TextArea Component  <mx:TextArea id="msg" x="27" y="266" height="40" keyUp="textArea_textInput(event);" />   

Practice8: Login form submit Create Flex application using enter event for submit form and after submit form will show alert  with username as the following: 

   

   

 

Timer Event // create Timer  private var myTimer:Timer = new Timer(5000, 0);  // add Event Listener  myTimer.addEventListener(TimerEvent.TIMER, findOperator);  // start Timer  myTimer.start(); 

Practice9: Countdown Create Flex application using timer for countdown from 60 seconds to 0 seconds as the following  conditions:  ƒ

Countdown time from 60 to 0 every 1 second 

ƒ

If 10 < time < 30 display time in yellow color 

ƒ

If 0 < time < 10 display time in red color 

ƒ

If time = o then display “Booooooom” 

 

 

 

XML: Extensible Markup Language XML is used for sharing of structured data across different information systems in Well‐formed  documents.  Implementation: XHTML, RSS  Processing: SAX, DOM  Other: DTD, XSD, XSL, XSLT, Xpath 

Example 

 

Connect XML with HTTPService There are 4 steps for using HTTPService for connects XML.  1. Define HTTPService point to xml file    2. Send Request to get XML data (normally with method send)    3. Bind data to display with dataProvider 

  4. Result 

 

Model Tag Model data use when flex application don’t want live XML. In model tag you can input xml data as  the following: 

  Figure 5 example of model tag 

 

Practice10: RSS reader Create Flex application using HTTPService for RSS reader from 3 sources as the following  ƒ

Engadget ‐ http://feeds.engadget.com/weblogsinc/engadget  

ƒ

Yahoo Sport ‐ http://rss.news.yahoo.com/rss/sports  

ƒ

Manager Sport ‐ http://www.manager.co.th/RSS/Sport/Sport.xml  

   

 

Practice 11: Item Renderer Create Flex application using Data Grid to feed content in xml/practice11.xml and display using  Item Renderer to render image in photo Field as the following: 

   

Other way to connect external data

 

ƒ

Remote Object 

ƒ

Web Service 

Vieew Stattes View states help yyou to separrate user inteerface base o on states succh as login, aafter login. Itt ‘s better  u create statee diagram th hat describe tthe flow of yyour applicattion before ccoding your  if you appliccation. 

 

  

 

   

 

 

Praactice 12: view sttates Creatte flex appliccation with 3 3 states (login n , chat, logo out) and   If useername != ‘fo ortest’ then aalert “login incorrect” 

 

 

   

 

Style: CSS Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a  document written in a markup language. It’s most common application is to style web pages  written in HTML and XHTML. CSS can be used locally by the readers of web pages to define colors,  fonts, layout, and other aspects of document presentation. It is designed primarily to enable the  separation of document content (written in HTML or a similar markup language) from document  presentation (written in CSS).  In Flex, CSS will defined under Style tag. 

  In Flex CSS can divided into 3 selectors as following: 

Global selectors    This selector will apply to all classes in the application. 

 

Type selectors   This selector will apply to particular classes. 

 

Class selectors   This selector will apply only selected class 

     

Practice 13: CSS Open Practice12 and control display with following CSS:  à

TextInput use font 10 

à

Label use font 12 and bold style 

à

Button use font 10 and blue color 

à

TextArea use font 9 and gray color 

à

TextInput for chat panel use font 9 and green color 

 

Validation Validation is a process that allows valid input to the system and notify if you type invalid input. In  flex there is many validation implemented, you can see at  http://livedocs.adobe.com/livecycle/es/sdkHelp/common/langref/mx/validators/package‐ detail.html  

Practice 14: validating Create Flex application for registration form as the following requirement: 

  ƒ

Username : available (a‐z A‐Z 0‐9 ) , length 6‐10 

ƒ

Email: must be valid email format 

ƒ

Telephone : available(0‐9), length 8‐12 

ƒ

Birthday : accept only yyyy‐mm‐dd (2008‐08‐20)  

Charts There are 3 steps for create chart in Flex Application:  1. Create a chart (you will choose Pie Chart, Bar Chart, Line Chart, …) 

  2. Link data to chart 

    3. Adding label to chart  for PieSeries add this following attribute  a. labelPosition="inside“  b. labelFunction="chartLabel“   

Practice 15: charts Apply Pie Chart in example into Column Chart. 

     

Why Custom Component? In very large project, there are many developers coding his job. It is better if we divide application  into components so they can code parallel, we can reuse some component and reduce amount of  code. 

Building component with MXML Example CountryComboBox.mxml 

  In main application MXML file we can use custom component with 

 

   

 

Practice 16: build component with MXML Create component myDate and validate input for building birthday application with MXML    Figure 6 myDate component 

 

  Figure 7 birthday application 

   

Building component with ActionScript(AS) First you must understand hierarchy class diagram in User Interface. 

  Then try to build one 

   

 

Practice 17: build component with AS Create component myDate and validate input for building birthday application with AS    Figure 8 myDate component 

  Figure 9 birthday application 

   

 

Test Challenge: RSS Feed Create RSS Feed Application with the following requirement  ƒ

With Flexible layout 

ƒ

New tab content 

ƒ

Add new source 

 

Test Challenge: Calculator Create calculator application 

   

 

Reference

   

ƒ

http://en.wikipedia.org/wiki/Adobe_Flex 

ƒ

http://en.wikipedia.org/wiki/MXML  

ƒ

http://www.adobe.com/devnet/flex/  

ƒ

http://flex.org/showcase/  

ƒ

http://examples.adobe.com/flex3/componentexplorer/explorer.html  

ƒ

http://blog.flexexamples.com  

ƒ

http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?co ntext=LiveDocs_Parts&file=00001936.html  

ƒ

http://www.flexer.info/2008/05/08/html‐tags‐and‐attributes‐supported‐by‐flash‐player/  

ƒ

The Essential guide to Flex3 (CHARLES E. BROWN) 

ƒ

Adobe Flex3 Essential Training (lynda.com)