Catalyst. Flex. Flash Media. Server Family. Flash. Player. AIR. BlazeDS. Data
Services ... ADOBE FLEX. A highly .... Data Centric Development: Data-bound UI.
How Zend used Flex & PHP to build a Software Flight Recorder
Ryan Stewart
Kevin Schroeder
Platform Evangelist,
Technology Evangelist,
Adobe Systems
Zend
[email protected] Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
1
Adobe Flash Platform Applications, Content and Video
Tools to Design and Develop
Framework Flex
Flash CS4 Professional Clients AIR
Flash Player
Flash Catalyst AMF, XML, JSON, SOAP, RSS, ATOM, etc. HTTP/S, Sockets, RTMP, etc.
Flash Builder
Servers/ Services
Flash Media Server Family
BlazeDS Data Services
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
2
Flex Branding Change FLEX 3 GENERATION
FLEX 4 GENERATION
Flash Builder
Flash Catalyst
Consistent branding for tools
Flex framework, Flex Builder Flex framework Aligning Flex brand with the open source framework underlying both FB and FC Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
3
®
Flex Framework
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
4
ADOBE FLEX A highly productive, free open source framework for building expressive web applications that deploy consistently on all major browsers and on the desktop with Adobe AIR
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
5
Where Flex is used Product Configuration
Rich Media Applications
Line of Business Applications Data Visualization
Authoring Applications
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
6 6
Product Selection
Understanding Flex
2 languages
Flex Builder IDE
MXML (actually a library of ActionScript)
ActionScript 3
Compilers
Debuggers
Rich Component Library
Flex SDK MXML
Flex Class Library Debuggers
Flex Builder IDE Eclipse Plugin or turn-key install Accelerates Design Design view and code view
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
ActionScript
7
How Flex Works in the Browser Flex Builder IDE
Browser
Flex SDK MXML
Flash Player ActionScript
Flex Class Library
SOAP
HTTP/S
AMF/S
RTMP/S
Web Server
Compile XML/HTTP
LC Data Services
REST SOAP Web Services J2EE Application Server Existing Applications & Infrastructure
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
8
How Flex Works on the Desktop Flex Builder IDE
Files
SQLite
Flex SDK MXML
Desktop
Notifications Clipboard
AIR Client Runtime ActionScript
Flex Class Library
SOAP
HTTP/S
AMF/S
RTMP/S
Web Server
Compile & Package XML/HTTP
LC Data Services
REST SOAP Web Services J2EE Application Server Existing Applications & Infrastructure
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
9
Flex 3 is Open Source Open Source Flex SDK
Open Source BlazeDS Flex remoting and messaging
SDK source (framework, compiler, and debugger) is available under Mozilla Public License (MPL)
Available under Lesser General Public License (LGPL) v3 Commercial license, certified builds and enterprise support are available
Public bug database, roadmap, and daily builds available
Public bug base and daily builds
opensource.adobe.com/flex
opensource.adobe.com/blazeds
Enabling Open Source Innovation
Growing the Flex Market
Invites active participation from the Flex development community
Non-open source SDK licenses available for commercial ISVs that require it
Allows open source projects to extend Flex and embed it in projects
Raises Flex awareness by increasing usage and driving further adoption
Expands the market for commercial Flex products from Adobe and partners
Enables small ISVs to bundle the Flex SDK at no cost
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
10
Flash Builder 4 Flex Builder 3 plus new features
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
11
Flash Builder 4 Themes Support both design and data focused apps in a productive environment
Designer/Developer Remain
true to the
design Facilitate
workflows
Eliminate
manual
steps
Data-Centric Development
IDE Productivity & Testing
Support
Improve
many different back-ends Simplify
managing data
Generate
data-aware UI
hand-coding
Speed
up tuning & debugging Fit
in with established testing and build processes
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
12
Data-centric Development
1. Define Service
ColdFusion
PHP
Java
SOAP
REST
3. Bind Operations to Flex UI components
2. Model Service
Flash Builder examines service Builds design-time model Configure data types and operations
Databinding
UI Generation
Paging
Data-management
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
13
Data Centric Development: Supported Services
ColdFusion
Consume any ColdFusion Component (CFC)
New workflow with ColdFusion Builder to auto-generate data access CFCs
PHP
Built-in support for Zend Framework
Use Zend components or any PHP5 classes
New workflow with Zend Studio for class generation
Java
BlazeDS
LiveCycle Data Services ES – new workflow with LiveCycle Model Editor
HTTP, REST, SOAP Web Services
Extensible – add support for any other back-end
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
14
Data Centric Development: Data-bound UI
Drag and drop to bind operation results to UI
Invoke operations from component events (e.g. button clicks)
Generate Master/Detail relationships
Generate Charts
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
15
Data Centric Development: Client-side Data Management
Map client side data operations to server side operations
Create, Update, Delete, etc.
Automate bulk updates & deletions
Support for “rollback” of changes to data
One instance of any record
Changes reflected wherever data is displayed
Paging for large recordsets
Automatic fetching of X records at a time
Ideal for large datasets in grids, lists, etc.
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
16
Testing and Deployment
Network Monitor
Unit Testing
Code Coverage
Command-line Builds
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
17
Using Flex with PHP
Flex & PHP Studio & Flash Builder 4
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
18
PHP and Flex communication
Flex & AIR on the client, PHP on the server.
Web browser FLEX Apps
REST Services
Web Services
Desktop AIR Apps
PHP Server
Remoting (RPC)
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
19
How does remoting work? Flex/AIR Client
AMF3
PHP Server MyClass { getData() { … } saveData($myVO) {…} }
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
20
How does remoting work? AMF3
Flex/AIR Client RemoteObject
Client calls MyClass->getData()
PHP Server MyClass { getData() { … } saveData($myVO) {…}
getData(); saveData(myVO);
}
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
21
How does remoting work? Flex/AIR Client RemoteObject
PHP Server
AMF3 Client calls MyClass->getData()
MyClass { getData() { … } saveData($myVO) {…}
getData(); saveData(myVO);
}
MyVO { public var id:int; public var name:String;
MyVO { Automatic conversion between PHP and ActionScript class
public $id; public $name; }
} ®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
22
How does remoting work? Flex/AIR Client RemoteObject getData(); saveData(myVO);
PHP Server
AMF3 Client calls MyClass->getData() Server sends an array of MyVO objects
MyClass { getData() { … } saveData($myVO) {…}
Client calls RemoteObject.saveData(myVO) } MyClass->saveData($myVO) MyVO { public var id:int; public var name:String;
MyVO { Automatic conversion between PHP and ActionScript class
public $id; public $name; }
} ®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
23
Adobe Flex Customers Enterprise
Web 2.0
ISVs
Replace with a graphic
White Master
5.5” Tall & 4.3” Wide
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
24
Q&A
Replace with a graphic
White Master
5.5” Tall & 4.3” Wide
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
25
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
26
