View
218
Download
0
Category
Preview:
Citation preview
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
1/32
Adobe Flex Overview and Developing RIA Application using Flex Day 1
Presented by Web 2.0 CoE (NTDG)
CONFIDENTIAL
September, 2009
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
2/32
- 2 -INTERNAL
Agenda
Flex SDK and Builder
Adobe Flex Overview
Working of Flex
Creating Flex Project
Data Binding
Demo / Assignment
Flex Components
Event Handling
MXML / Action Script
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
3/32
- 3 -INTERNAL
Introduction
Adobe Flex is a software development kit released by Adobe Systems for thedevelopment and deployment of cross-platform rich Internet applications based on the
Adobe Flash platform.
The initial release in March 2004 by Macromedia included a software development kit, anIDE, and a J2EE integration application known as Flex Data Services. Since Adobeacquired Macromedia in 2005, subsequent releases of Flex no longer require a license forFlex Data Services, which has become a separate product rebranded as LiveCycle DataServices.
In February 2008, Adobe released the Flex 3 SDK under the open source Mozilla PublicLicense. Adobe Flash Player, the runtime on which Flex applications are viewed, andAdobe Flex Builder, the IDE built on the open source Eclipse platform and used to buildFlex applications, remain proprietary.
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
4/32
- 4 -INTERNAL
Flex Architecture
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
5/32
- 5 -INTERNAL
Flex Architecture Cont
Flash and Flex frame works are used for creating applications. Flash player and AIR are
the runtimes for the compiled flash and flex application and are integrated to the browser
and desktop, respectively.
Flex technology provides developers with a frame work of extendable classes and an IDE
called Flex Builder which allow programmers to quickly build RIA using the Action Script
and MXML programming language
Flex provides users with a frame work of classes, including visual components, and two
programming languages ; MXML for the visual layout and ActinScript for the business
logic.
Flex is more concentrated to wards Developers where Flash for designers.
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
6/32
- 6 -INTERNAL
MXML and ActionScript
XML/HTTPREST
SOAP Web Services
How Flex Works
Browser
J2EE Application Server
LC Data Services
Flash Player
Web Server
Existing Applications and Infrastructure
Flex Builder IDE
Flex SDK
MXML ActionScript
Flex Class Library
.swf
Compile
.swf
HTTP/S AMF/S RTMP/SSOAP
Adobe AIR
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
7/32
- 7 -INTERNAL
Flex Application Process Cont
MXML and Action Script Code in a Flex Application, are translated into ActionScript and
then also compiled into .SWF file.
Once the .swf file is placed on the server user can request the application from the server.
Flex application can also dynamically request data.
The request will go through the application to the database, back to the application server
and then finally to the browser.
Flash and Flex can also work together. One can develop application in flash compile them
into .swf file and can integrate it with flex framework.
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
8/32
- 8 -INTERNAL
Flex Builder
Adobe flex framework is available for free in an open source SDK that includes extensive
Action Script 3 and MXML class libraries.
Adobe Flex SDK
Free
Rich AS3 and MXML class libraries
Pre-built components
Compiler for creating swf. Adobe flex builder
Contains everything in SDK
Accelerated design , development, testing
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
9/32
- 9 -INTERNAL
Flex Builder Cont...
Flex Builder has two versions
Standard
Professional
Flex 3 builder is available for 60 days trial and the professional version has the all thefeatures of standard version with rich charting dashboards and advance DataGrid options.
The flex builder work bench contained the following
Menu bar
Toolbar
Views
perspective
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
10/32
- 10 -INTERNAL
Flex Builder Image
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
11/32
- 11 -INTERNAL
Flex Builder Cont...
Flex navigator shows the projects and associated files.
The main coding area is called the editor. The editor has two views source and design. In
design mode all the properties of a component can be explored.
The outline shows all the components associated with the project.
You can create your won workspace and switch workspace. Flex builder provides views asflex development/debugging etc
Demo Example 1 (Creating New Project).
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
12/32
- 12 -INTERNAL
Creating New project
Create your own workspace to work. A simple flex project has the follwong folder structure
Bin-debug
Html-template
Libs
Src
In the main folder structure in the workspace .settings folder contains the mainconfiguration files.
The bin-debug folder is where the complied swf file and related application files arecreated. In html-template the html wrapper page resides
The libs folder is for any optional classes that are needed by the application
Src file is where the main source files and other assets are placed.
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
13/32
- 13 -INTERNAL
Flex Components
The inbuilt components that are available with flex builder are
Visual components
Containers
Navigators
DataGrid and Charts
Validators and formatters
All the components are available in the outline view in the design mode. One can choose
the desired components and drag them on to the application.
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
14/32
- 14 -INTERNAL
Visual Components
These components contains
General controls
Button controls
Date controls
Loader controls
Menu controls
Text controls
Repeater controls
We can use the prebuilt visual components included with Flex, extend components to add
new properties and methods, and create components as required by application.
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
15/32
- 15 -INTERNAL
Components Cont
Point of reuse in the Flex Framework for UI components
Mostly written in AS but can be created in MXML
Skinable through CSS
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
16/32
- 16 -INTERNAL
Components Cont
Characteristics of visual components:
Size : Height and width of a component. All visual components have a default size.
we can use the default size, specify own size, or let Flex resize a component aspart of laying out the application.
Events: Application or user actions that require a component response. Events
include component creation, mouse actions such as moving the mouse over a
component, and button clicks.
Styles: Characteristics such as font, font size, and text alignment. These are the
same styles that we define and use with Cascading Style Sheets (CSS).
Behaviors: Visible or audible changes to the component triggered by an
application or user action. Examples of behaviors are moving or resizing acomponent based on a mouse click.
Skins: Classes that control a visual component's appearance.
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
17/32
- 17 -INTERNAL
Introduction to MXML
MXML is a xml based tag library or xml Markup language. The source view of the
application provides you with a bunch of code with different tags.
MXML is used mainly to declarative lay out the interface of applications, and can also be
used to implement business logic and internet application behaviors.
Like HTML, MXML provides tags that define user interfaces. MXML is more structured
than HTML, and it provides a much richer tag set.
You can write MXML code in plain text file or in a IDE.
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
18/32
- 18 -INTERNAL
Simple MXML Code
1.
2.
3.
4.
7.
9.
10.
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
19/32
- 19 -INTERNAL
Flex Application Structure
Flex application / MXML application in a single file or multiple files. Main file is defined
inside file. Additional files (Action Script or MXML files) can be accessed
or referenced from the main application.
Best practice is to divide the application in to smaller modules depending on their discrete
work. Call or load the module with appropriate user action or events. Modular archiotecture
has the following advantages
Ease Of development
Re usability
Maintainability.
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
20/32
- 20 -INTERNAL
Action Script
ActionScript is the programming language for the Adobe Flash Player and Adobe AIR
run-time environments.
Is a Object Oriented Programming.
ActionScript is executed by the ActionScript Virtual Machine (AVM), which is part of
Flash Player and AIR. ActionScript code is typically compiled into bytecode format by a
compiler. The bytecode is embedded in SWF files, which are executed by Flash Player
and AIR.
Some of the data types user in AS3 are
String: a textual value, like a name or the text of a book chapter
Numeric: ActionScript 3.0 includes three specific data types for numeric data:
Number: any numeric value, including values with or without a fraction int: an integer (a whole number without a fraction)
uint: an "unsigned" integer, meaning a whole number that can't be negative
Boolean: a true-or-false value, such as whether a switch is on or whether two
values are equal
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
21/32
- 21 -INTERNAL
Action Script Cont...
Flex developers use ActionScript to implement custom behaviour with in the flex
application.
Simple script block can be implemented in the application file using the block.
For complex or modular files the can be moved to indivitual AS files.
1.
2.
3. 4.
5.
6. Private function test():void {
7. }
8. ]]>
9.
10.
11.
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
22/32
- 22 -INTERNAL
Handling Events
An event-handling system allows programmers to respond to user input and system
events in a convenient way. Events can be of any type
Simple mouse Event, Keyboard event
Complex data manipulation events
In Action Script 3.0, each event is represented by an event object, which is an instance of
the Event class or one of its subclasses
Event handling in flex
Step 1: When application detects an event(Mouse click) , it create event object
to represent that particular event.
Step 2: the Event object is dispatched to the target event.
We can "listen" for event objects in code using event listeners. Event listeners are thefunctions or methods that is written to respond to specific events.
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
23/32
- 23 -INTERNAL
Handling Events Cont...
A simple event listener code will look as follows
Example
function eventResponse(eventObject:EventType):void
{
// Actions performed in response to the event go here.
}
eventTarget.addEventListener(EventType.EVENT_NAME, eventResponse);
Event Object Event SpecificConstant
Event target
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
24/32
- 24 -INTERNAL
Data Binding
Data binding is the process of tying the data in one object to another object. It provides a
convenient way to pass data between the different layers of the application.
Data binding requires
Source property
Destination property
A triggering event ( dynamic binding)
Flex provides three ways for data binding
the curly braces ({ }) syntax in MXML
the tag in MXML
the BindingUtils methods in ActionScript
http://z/COE/Assets/langref/mxml/binding.htmlhttp://z/COE/Assets/langref/mx/binding/utils/BindingUtils.htmlhttp://z/COE/Assets/langref/mx/binding/utils/BindingUtils.htmlhttp://z/COE/Assets/langref/mxml/binding.html8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
25/32
- 25 -INTERNAL
Data Binding Cont...
(Option 1)
(Option 2)
The curly braces syntax and the tag both define a data binding at
compile time. We can also use Action Script code to define a data binding at run time
using Bindingutils.
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
26/32
- 26 -INTERNAL
Data Binding Cont...
import mx.binding.utils.*; // Define data binding.
public function initBindingHandler():void {
BindingUtils.bindProperty(myText, "text", myTI, "text"); }
]]>
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
27/32
- 27 -INTERNAL
[Bindable] Metadata tag
[Bindable] metadata tag is used to signal flex to perform copy from the source to
destination and overwrite the latest value on the destination.
[Bindable] metadata tag must be used to register the property with in flex and the source
property must dispatch an event.
The syntax is:
[Bindable][Bindable(event="eventname")]
[Bindable] metadata can be used in following places:
Before a public class definition.
Before a public, protected, or private property defined as a variable to make that
specific property support binding.
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
28/32
- 28 -INTERNAL
Flex Builder Controls
Controls are userinterface components or visual components as button, textarea,
checkbox..etc.
All the controls are kept inside a container it may be the application container or a form
container or some other container.
Flex controls are Action Script objects derived from the flash.display.Sprite and
mx.core.UIComponent classes
All the controls have some common properties as
Sizing controls: specifying the height and width
Positioning controls: specifying the x and y position
The appearance of a control can be changed by using styles (CSS) depending on useractions.
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
29/32
- 29 -INTERNAL
Examples of Controls
Button controls
Image in a button control
Button bar controls
Link bar control
Tab bar control
Check box and radio button control
All the controls are present in the outline of the flex builder.
SWF loader is a special control which lets load one flex application in to another flex
application as a swf file.
Image controls is used to embed image in to the application.
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
30/32
- 30 -INTERNAL
Demo Example 1
In this demo we will cover:
Creating a new flex project/switching workspace
Exploring the components
Working in design mode in flex builder
Designing a simple login form using the component
EXERCISE
Create a new flex project. Build a registration form for a xyz company. Having thefollowing field.
User name, password, confirm password, role of the employer (drop down HR,
admin, developer), DOB, about me test field, register button,
All fields should be correctly aligned and should be inside a form.
Alert success when user provides the correct user name and password
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
31/32
- 31 -INTERNAL
Your Turn! (Q&A)
8/8/2019 Adobe Flex Overview and Developing RIA Application using Flex - Day 1
32/32
32
Recommended