INTRODUCTION TO BUILDING RIA WITH ADOBE FLEX AND AIRBy Abdelmonaim Remani

Silicon Valley Code Camp 08

ONCE UPON A TIME

AT FIRST THERE WAS WEB 1.0 Page-Based Architecture: Static or Dynamic Technologies

Client Side (Rendering Presentation) HTML CSS JavaScript DOM DHTML

Server Side (Business Logic and Data) Dynamic Content

CGI Java Servlets and JSP .NET and ASP PHP Ruby on Rails Etc…

Data Databases XML JSON

THE WEB IS IN COMA

Web 1.0 was loosing to Desktop Applications Performance and Speed Responsiveness Visual Richness / Media Data-Driven vs. Event-Driven Availability (Online vs. Offline)

.COM bubble broke The Browser War

LA RENAISSANCE

– The community focused on developing standards– A second look at Web Application

• They have what Web applications have two very important characteristics that Desktop Applications don’t have– They are Centralized– The are Inherently safe

» Run in context the browser» Require no installation

– More powerful desktop machines are being made available (Moore’s Law)

THE RAISE OF WEB 2.0

New Technologies ???

The use features and technologies that we already have in a different way

The use of these features for something more powerful than what they were intended for

THE BLOODLESS REVOLUTION OFAJAX

• AJAX (Asynchronous JavaScript And XML)• As the acronym implies, AJAX is simply

JavaScript, and XML or any other data interchange format

• It is about exploiting the communication feature of the browser in a new different way

• The goal is to get data from the server without a invoking full-page refresh for a better user experience

• How?• AJAX is a Hack

THE GOLD RUSH• AJAX brought a better user experience to the

browser• AJAX adoption increased quickly• Web Applications’ complexity increased• Drastic Change of the architecture of Web

Applications is represented by– No page-based– A shift of programmatic logic from the server-side to

the client-side• Reduced the load on the server

– The sate is handled by the client instead of the server– Data is loaded only when necessary

• Took advantage of the local machine power– The Vision: One day the server is only going to used to

distribute the application

WAIT A MINUTE…

• It happened so fast– No developer tools– No libraries– No application or testing frameworks

• AJAX evolved from technologies that were never meat or designed to build applications– JavaScript

• is not OOP• No runtime-error handling• Cross-browser coding

• Scalability problems– Twitter please don’t die on me!!!

HOLD YOUR HORSES Three Camps

The Optimistics Let’s make it work Bullet-proof libraries and toolkits: DOJO, JQuery,

etc… http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks

The Pessimistics JavaScript development sucks… Forget AJAX! Focus on new tech

Rich Internet Applications: Adobe Flex, JavaFX, and Microsoft Silverlight

The Google Way GWT Shifts some of the focus from feature

richness to development and software engineering tools

We could allow developers to program in any programming language, and just translate or compile it into JavaScript

ANTHROPOLOGIA

Developers: Coders Build Applications

Functional Data Driven UGLY

Designers: Artists Build Applications

Event-Driven Beautiful

Devigners?

RICH INTERNET APPLICATIONS (RIA)

WHAT ARE RIAS

Application that combine the benefits of Web and Desktop applications User experience of the Desktop Applications

Responsive Data Driven Rich Media Online and Offline

Low cost of Deployment and reach of Web Applications

TECHNOLOGIES

RIA Technologies Adobe Flex JavaFX Microsoft SilverLight OpenLaszlo Etc…

ADOBE FLEX

WHAT IS FLEX

Adobe Flex is a platform for building Rich Internet Application and Desktop Applications SDK (Open Source)

Compiler, debugger, and other tools Libraries Provides a skeleton of Flex Application by extending

the Flex Framework Prebuilt Components Programming Languages (MXML and ActionScript 3.0)

WHAT IS FLEX

Flex Builder 3 IDE based on Eclipse Design tools

Server-Side Enterprise Messaging Support Data Services

Data sharing and communiction among clients Data push from server to clients Etc…

Options: Live Cycle Data Services, BlazeDS, etc… Adobe Flex Charting

FLEX APPLICATIONS

Delivered as SWF (Shockwave Flash) files in HTML Runs on Flash Player 9 or later On 99.3% of the browsers

Delivered as a Desktop application Runs on AIR (Adobe Integrated Environment)

RUN TIME

Flash Player 9 In the browser Tow virtual machines for backward Compatibility

New Virtual Machine: AVM2 Run time error reporting Compile time type checking

AIR On the desktop Application built in Flex, Flash, and HTML Seamless Install

PROGRAMMING LANGUAGESMXML

WHAT IS MXML

Adobe Flex’s Markup (Declarative) XML Based Used to Create visual and non-visual

component Compiles into ActionScript 3.0

THE ANATOMY OF MXML

XML Declaration <mx:Application> Tag

“mx” Namespace “Layout” Attribute

MXML CONTROLS Controls (Id, properties, and events) In absolute Layout

<mx:Label> <mx:TextInput> <mx:Button> <mx:Image>

Using Layout Controls <mx:VBox> <mxHBox>

Other

PROGRAMMING LANGUAGESACTIONSCRIPT 3.0

THE LANGUAGE FEATURES

Based on the ECMAScript Specification Object-Oriented

Runs on a new VM: AVM2 (ActionScript Virtual Machine 2)

Complete Access to Flash API and libraries

THE LANGUAGE FEATURES

ActionScript 3.0 vs. ActionScript 2.0 New Features

Packages Primitive Data Types (int and uint) Native XML types and E4X (ECMAscript for XML) Native Regular Expression support New event model 10 times faster

Strongly typed Sealed Classes: Dynamically adding methods is not

allowed Etc…

VARIABLES

Variable Declaration var <Variable Name> : <VariableType>;

Variable Assignment <Variable Name> = <Value>;

OPERATORS Arithmetic

+ Addition- Subtraction* Multiplication/ Division% Modulo++ Increment-- Decrement

Arithmetic Compound Assignment+= -= *= /=

OPERATORS

Bitwise& AND<< Left Shift~ NOT| OR>> Right Shift>>> Unsigned Right Shift^ XOR

OPERATORS Comparison

== Equality> Greater Than>= Greater Than or Equals != Inequality< Less Than<= Less Than or Equals=== Strict Equality!== Strict Inequality

OPERATORS

Logical&& AND! NOT|| OR

Other?: Conditional+ Concatenation+= Concatenation Assignment

CONTROL STRUCTURES

Conditional Statements If Statement

CONTROL STRUCTURES

Switch Statement

CONTROL STRUCTURES

Looping Statements While Loop

CONTROL STRUCTURES

Do-While Loop

CONTROL STRUCTURES

For-Each and For-In Loops

ARRAYS

METHODS

METHODS

CLASSES & INTERFACES

CLASSES & INTERFACES

CLASSES & INTERFACES

BUILDING FLEX APPS

THE PROCESS

Layout Visual component and style them Add event-handling Use data or communication services Build and run

FLEX & XML

E4X

Parse XML (Similar to XPath) Manipulate XML Data XML Classes in ActionScript 3.0

XML XMLList

PARSING XML USING E4X

xmlData.employee[2] xmlData..employee All nodes called node xmlData..employee.(firstName==‘Joe’) xmlData..employee.(@id > 1)

Q&A

THANK YOU