Download - Introduction To Rich Internet Applications
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