This document provides an overview of exploring Adobe Flex, including: 1. Discussing Flex/Flash Builder IDE, naming conventions, and organizing Flex projects. 2. Covering key Flex features like CSS support, states management, layouts, controls, charts, and data binding. 3. Comparing MXML and ActionScript, how the MXMLC compiler works, using MXML components and properties. 4. Explaining debugging concepts like the problems view, trace function, and breakpoints in Flex.

1. Day 2
Exploring Adobe Flex
Senthil Kumar
Srinivasan

2. Flex/Flash Builder IDE

4. Project Name
Project Location
Web Application
AIR Application

5. Run the Application
Source Mode
Debugging the application
Design Mode

6. Place we need
Type the code
Place the MXML Component here

7. How to Run the Appl.. In Browser

8. Change the SDk’s

9. Naming conventions for Flex projects
Use a common directory for your Flex workspace in team environments.
Use the libs folder to bundle SWC libraries with your Flex project.
Use UpperCamel Casing for MXML and Action Script Files.
Do not use spaces and Special Characters when naming files!
Use packages to organize and structure your projects codebase.
Create and use an "assets" directory
Instance variables and flex controls will follow Hungarian Notation
Ex., txtUserName, lblSerail:String.
Function names should be in camelcase. It may contain underscores but never
at the beginning of the name.
Ex - onCreationComplete()

10. Flex – other features
CSS support / Runtime skinning support
States Management
Layout / Navigation
Canvas, Form, VBox, HBox, ControlBar, Accordion, LinkBar, MenuBar, ViewStack
Controls
Button, CheckBox, ComboBox, DataGrid, TextInput, List, Label, Tree
Charts – Pie , Line , Bar,, Area, stacked charts etc
Data Binding

11. MXML vs. AS3
( apples vs apples )
MXML : Macromedia XML
MXML tags are Instance of Action Script Classes
<mx:Button id=“test” />
var myButton:Button = new Button() .
 MXML === As3 Class

12. MXML
MXML are plain text based document Follows XML
standards
It is tag based <mx:Panel> similar to HTML
Always start with a XML declaration
Root node is always <mx:Application>

13. MXMLC Compiler
MXML to ActionScript 3 Classes
ActionScript 3 to ABC Bytecode
ABC Bytecode to SWF
SWF run within Flash Player 9

14. MXML - Components
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Button id="btnFirst" label="Click"/>
<mx:List id="grdEmp" dataProvider="{empColl}"/>
<mx:CheckBox id="chkPlace" label="Chennai" />
</mx:Application>

15. MXML - id
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Button id="btnFirst" label="Click"/>
<mx:List id="grdEmp" dataProvider="{empColl}"/>
<mx:CheckBox id="chkPlace" label="Chennai" />
</mx:Application>

16. MXML - Properties
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Button id="btnFirst" label="Click"/>
<mx:List id="grdEmp" dataProvider="{empColl}"/>
<mx:CheckBox id="chkPlace" label="Chennai" />
</mx:Application>

17. Introduction to Action Script
ECMA-262 edition and ECMA-4 complaint
 Versions
Action Script 1.0 – 2000 – 2003
Action Script 2.0 – 2003 – 2006
Flash Player 8 and Above
Action Script 3.0 – 2006 – present >> Flex 2.0 - Flash Player 9 and above
 Object-oriented from AS 3
 Initially designed for controlling simple 2D vector animations made in Adobe Flash
(formerly Macromedia Flash).
 Foundation for Flex 2 and above
 Online API >> http://livedocs.adobe.com/flex/3/html/toc.html

19. Debugging concepts and procedure
 The
Problem View
 Trace Function
Break Points
 The Problems view is located below the Source mode. Whenever the Problems
view shows errors, it means there are problems to be fixed before the application
can be compiled.
 Windows  Show View  Problems

20.  Show the Alert message while click the Button
 After Save the changes if any problems that are detected by the Flex compiler are
displayed automatically in the Problems view.

21. Double-click on the error in the Problems view, to move the cursor to the corresponding
line of code in the Source mode.
To fix this problem , we need to add the alert button in the Script Tag
Save the file, which compiles the code - the problem should go away.
 Run the application and click the button to see the Alert dialog box

22. Trace Function
The trace function sends a simple string to the Console view, so you can track what is
happening internally as your application is running.
Debug the application. Select the Console view to see the resultant trace message.

23. BreakPoints
Breakpoints are used to stops application execution at that point,you can inspect the
values of variables, step through code one line at a time, and add or remove breakpoints
as needed.
Set a breakpoint on the line that declares the variable. A breakpoint can be set or unset
(toggled) by double-clicking on the line number or by using the keyboard shortcut
Ctrl+Shift+B
Save and debug the application.
The Variables and Expression view is in the upper-right corner of Flex Builder
interface / Eclipse

24. Locate the Count variable, and check its value.

25.  Step through the code observing the value of Count as it changes.
Continue until the trace statement is reached.
 Click the Resume button in the Debug view, and the application
in the browser becomes active again.
 Close the browser to terminate the debugging session
and return to Flex Builder.

26. To switch to the Development perspective, click to display the list of
available perspectives and select Flex Development.

27. Go to the feed variable, right-click it and select Watch feed.

28. 

29. 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

30. 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.

31. 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.

32. 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

33. Styling Adobe Flex 2
• Corporate branding
• Marketing
• Differentiate your application
• User experience & usability
• Remove any reference to Flex !00

34. Styling in the wild

35. Styling in the wild

37. Nice, how can we get our
apps to look that good ?

38. ! It won’t be BORING ! – just few min

39. What can we use ?
CSS
Programmatic skins
Graphical skins
Custom components
 At least one CSS file
 Programmatic skin (AS3) classes
 Graphical skin assets (PNG, SWF etc)
 Themes can be compiled as a SWC and
easily distributed

40. Skinning vs Styling
Aeon
Ron Perlman

41. Styling
Blade II

42. Skinning
Hellboy

43. CSS in Flex 3
Differences to CSS for XHTML
 Used to set styles not properties
You can’t set size or position - they are properties not styles
Setting padding will drive you crazy!
Runtime changing of CSS

44. Using /Applying CSS
 Inline with <Style><Style> tags
 As MXML attribute < color=”#CC0000”>
 External using <Style source=”myStyle.css”/>
 Using ActionScript setStyle()
 To the whole application Application {
}
 To components ( or custom components ) NewTextLabel {
}
 Using class – selectors .rightButton {
}