Your SlideShare is downloading. ×
Day 2
Exploring Adobe Flex
Senthil Kumar
Srinivasan
Flex/Flash Builder IDE
Project Name

Project Location

Web Application

AIR Application
Run the Application

Source Mode
Debugging the application

Design Mode
Place we need
Type the code

Place the MXML Component here
How to Run the Appl.. In Browser
Change the SDk’s
Naming conventions for Flex projects
Use a common directory for your Flex workspace in team environments.
Use the libs fol...
Flex – other features
CSS support / Runtime skinning support

States Management
Layout / Navigation
Canvas, Form, VBox, HB...
MXML vs. AS3
( apples vs apples )

MXML : Macromedia XML

MXML tags are Instance of Action Script Classes
<mx:Button id=“...
MXML

MXML are plain text based document Follows XML
standards
It is tag based <mx:Panel> similar to HTML

Always start...
MXMLC Compiler

MXML to ActionScript 3 Classes
ActionScript 3 to ABC Bytecode
ABC Bytecode to SWF

SWF run within Flash Pl...
MXML - Components

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Button id="btnFirst" l...
MXML - id

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Button id="btnFirst" label="Cl...
MXML - Properties

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Button id="btnFirst" l...
Introduction to Action Script
ECMA-262 edition and ECMA-4 complaint
 Versions
Action Script 1.0 – 2000 – 2003

Action ...
Debugging concepts and procedure
 The

Problem View

 Trace Function
Break Points
 The Problems view is located below ...
 Show the Alert message while click the Button

 After Save the changes if any problems that are detected by the Flex co...
Double-click on the error in the Problems view, to move the cursor to the corresponding
line of code in the Source mode.
...
Trace Function
The trace function sends a simple string to the Console view, so you can track what is
happening internall...
BreakPoints
Breakpoints are used to stops application execution at that point,you can inspect the
values of variables, st...
Locate the Count variable, and check its value.
 Step through the code observing the value of Count as it changes.
Continue until the trace statement is reached.
 Click...
To switch to the Development perspective, click to display the list of
available perspectives and select Flex Development.
Go to the feed variable, right-click it and select Watch feed.

Flex UI basics
A Flex application's user-interface (UI) is composed
of two component types - Containers and Controls.
Cont...
Purpose of UI containers
Flex containers serve as a mechanism for defining
application layout and navigation.
Common layou...
Basic UI controls in a Flex application
Text-based controls are designed to display text and/or
receive text input. Exampl...
Creating styles
Sometimes for branding or making the application UI unique, styling application becomes
essential. Style p...
Styling Adobe Flex 2

• Corporate branding
• Marketing

• Differentiate your application
• User experience & usability

• ...
Styling in the wild
Styling in the wild
Nice, how can we get our
apps to look that good ?
! It won’t be BORING ! – just few min
What can we use ?

CSS

Programmatic skins

Graphical skins

Custom components

 At least one CSS file

 Programmatic sk...
Skinning vs Styling

Aeon

Ron Perlman
Styling

Blade II
Skinning

Hellboy
CSS in Flex 3
Differences to CSS for XHTML
 Used to set styles not properties

You can’t set size or position - they ar...
Using /Applying CSS
 Inline with <Style><Style> tags
 As MXML attribute < color=”#CC0000”>
 External using <Style sourc...
Exploring Adobe Flex
Exploring Adobe Flex
Exploring Adobe Flex
Exploring Adobe Flex
Upcoming SlideShare
Loading in...5
×

Exploring Adobe Flex

525

Published on

Exploring Adobe Flex

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
525
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Exploring Adobe Flex "

  1. 1. Day 2 Exploring Adobe Flex Senthil Kumar Srinivasan
  2. 2. Flex/Flash Builder IDE
  3. 3. Project Name Project Location Web Application AIR Application
  4. 4. Run the Application Source Mode Debugging the application Design Mode
  5. 5. Place we need Type the code Place the MXML Component here
  6. 6. How to Run the Appl.. In Browser
  7. 7. Change the SDk’s
  8. 8. 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()
  9. 9. 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
  10. 10. 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
  11. 11. 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>
  12. 12. MXMLC Compiler MXML to ActionScript 3 Classes ActionScript 3 to ABC Bytecode ABC Bytecode to SWF SWF run within Flash Player 9
  13. 13. 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>
  14. 14. 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>
  15. 15. 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>
  16. 16. 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
  17. 17. 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
  18. 18.  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.
  19. 19. 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
  20. 20. 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.
  21. 21. 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
  22. 22. Locate the Count variable, and check its value.
  23. 23.  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.
  24. 24. To switch to the Development perspective, click to display the list of available perspectives and select Flex Development.
  25. 25. Go to the feed variable, right-click it and select Watch feed.
  26. 26.
  27. 27. 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
  28. 28. 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.
  29. 29. 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.
  30. 30. 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
  31. 31. Styling Adobe Flex 2 • Corporate branding • Marketing • Differentiate your application • User experience & usability • Remove any reference to Flex !00
  32. 32. Styling in the wild
  33. 33. Styling in the wild
  34. 34. Nice, how can we get our apps to look that good ?
  35. 35. ! It won’t be BORING ! – just few min
  36. 36. 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
  37. 37. Skinning vs Styling Aeon Ron Perlman
  38. 38. Styling Blade II
  39. 39. Skinning Hellboy
  40. 40. 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
  41. 41. 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 { }

×