dgassnerFlexAjax360F lex

Information about dgassnerFlexAjax360F lex

Published on November 28, 2007

Author: Elena

Source: authorstream.com

Content

Exploring the Flex AJAX Bridge:  Exploring the Flex AJAX Bridge David Gassner Bardo Technical Services Seattle, WA What is the Flex AJAX Bridge?:  What is the Flex AJAX Bridge? New technology included with: LiveCycle Data Services 2.5 (formerly known as Flex Data Services) http://www.adobe.com/products/ livecycle/dataservices/ Flex Builder 3.0 Public Beta http://labs.adobe.com/technologies/ flex/flexbuilder3/ What is it for?:  What is it for? The Flex AJAX Bridge enables communication between browser-hosted JavaScript and Flex 2 applications The browser's JavaScript code can control objects, call methods and set properties in the Flex application Data objects can be passed between the 2 runtime environments What's in the Bridge?:  What's in the Bridge? The Flex AJAX Bridge consists of two (2) complimentary code libraries: FABridge.js – a browser-side JavaScript function library FABridge.as – an ActionScript 3 class for inclusion in a Flex 2 application To find it in LCDS: C:\lcds\resources\FABridge* To find it in Flex Builder 3 public beta*: C:\Program Files\Adobe\Flex Builder 3\ sdks\moxie\frameworks\javascript\fabridge * Windows default standalone installation What do I need?:  What do I need? Flex 2 SDK included in LCDS, OR Moxie SDK included with Flex Builder 3 Flash Player 9 A supported browser: Microsoft Internet Explorer, Mozilla Firefox, or Opera with JavaScript enabled And, of course: The Flex AJAX Bridge files FABridge.as and FABridge.js What do I do?:  What do I do? Here are the programming steps: Incorporate the Bridge into your Flex application Compile the Flex application Include the JavaScript library into the HTML page Incorporate the Flex application into the HTML page Get a reference to the Flex application from JavaScript Call methods and set properties on Flex objects from JavaScript Incorporate the Bridge into Flex with MXML:  Incorporate the Bridge into Flex with MXML Add the FABridge.as file to your Flex project Instantiate the bridge object with an MXML declaration: <fab:FABridge xmlns:fab="bridge.*" /> Note: The Bridge object does not need a unique id when instantiated with MXML Incorporate the Bridge into Flex with ActionScript:  Incorporate the Bridge into Flex with ActionScript package { import flash.display.MovieClip; import bridge.FABridge; public class EmptySwf extends MovieClip { private var externalBridge:FABridge; public function EmptySwf() { super(); externalBridge = new FABridge(); externalBridge.rootObject = this; } } } Compile the Flex application:  Compile the Flex application The Flex application is compiled into a .swf file as usual Include the Browser JavaScript library:  Include the Browser JavaScript library Include the Bridge JavaScript library in your HTML page with standard <script> syntax: <script src="bridge/FABridge.js" ></script> Incorporate the compiled Flex application into the HTML page:  Incorporate the compiled Flex application into the HTML page To add the Bridge using JavaScript code, set a flashvars variable of 'bridgeName' as part of the SWF nesting code: <script language='javascript' charset='utf-8'> document.write("<object id='flexApp' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,5,0,0' height='400' width='400'>"); document.write("<param name='flashvars' value='bridgeName=example'/>"); document.write("<param name='src' value='EmptySwf.swf'/>"); document.write("<embed name='flexApp' pluginspage='http://www.macromedia.com/go/getflashplayer' src='EmptySwf.swf' height='400' width='400' flashvars='bridgeName=example'/>"); document.write("</object>"); </script> Get a reference to the Flex application in JavaScript:  Get a reference to the Flex application in JavaScript To get a reference to the Flex application: var flexApp = FABridge.example.root(); Where 'example' is the value of the bridgeName variable passed in FlashVars to the .swf file Controlling the Flex application:  Controlling the Flex application Anything Flex can do, JavaScript can do too! var flexApp = FABridge.example.root(); var spr = FABridge.example.create("flash.display.Sprite"); var g = spr.getGraphics(); g.beginFill(0xFF0000); g.lineStyle(2,2); g.drawRect(-100,-100,200,200); g.endFill(); flexApp.addChild(spr); spr.setX(300); spr.setY(300); SimpleSample.html Getting references to Flex objects:  Getting references to Flex objects Use the Flex object's id and prepend 'get' notation to get a reference to the object: Flex code: <mx:Button id="button" label="Listen to me from JavaScript" /> JavaScript code: var flexApp = FABridge.example.root(); var flexButton = flexApp.getButton(); Getting and setting Flex object properties:  Getting and setting Flex object properties Flex Code: <mx:CheckBox x="49" y="34" label="Checkbox" id="check" selected="true"/> JavaScript code to toggle the current state of the CheckBox: var flexApp = FABridge.example.root(); var currentCheckValue = flexApp.getCheck().getSelected(); flexApp.getCheck().setSelected( ! currentCheckValue ) Calling Flex functions:  Calling Flex functions Flex Code: public function testFunc( val1:String="default"):void { Alert.show(val1, "called remotely"); } JavaScript code to call a Flex custom function: var flexApp = FABridge.example.root(); flexApp.testFunc( "Hello, Actionscript World! Love, JavaScript…" ); Creating JavaScript event listeners:  Creating JavaScript event listeners Create a listener function in JavaScript that reacts to Flex events: var callback = function() { alert("Hello to Javascript from Flex!"); } flexApp.getButton().addEventListener( "click", callback); When the user clicks the Flex button, the JavaScript function executes Using AJAX Data Services:  Using AJAX Data Services AJAX Data Services integrates the Flex AJAX Bridge with LiveCycle Data Services' Data Management Service AJAX-style applications share data concurrently with Flex applications through LiveCycle Data Services Multiple Clients, One Server:  Multiple Clients, One Server LiveCycle Data Services Database Any AJAX Framework can be used:  Any AJAX Framework can be used The HTML document incorporates an invisible Flex application The Flex application communicates with LCDS and controls the AJAX environment The Inventory sample application demonstrates integration of: LiveCycle Data Services with live data Flex Application with DataService client Adobe's Spry framework client Dojo framework client (http://dojotoolkit.org/) Demo: The Inventory Application:  Demo: The Inventory Application Get the Inventory Application:  Get the Inventory Application The Inventory sample application is described in the LCDS documentation, but not included in the installation of the server Download the Inventory application and other demonstration files from: http://www.bardotech.com/resources/360flex Thanks!:  Thanks! David Gassner Bardo Technical Services Adobe Certified Training, Seattle, WA http://www.bardotech.com [email protected]

Related presentations


Other presentations created by Elena

Words
06. 12. 2007
0 views

Words

Cheryl Walker Literary Terms
05. 11. 2007
0 views

Cheryl Walker Literary Terms

Flame Pics 04 05
05. 11. 2007
0 views

Flame Pics 04 05

Storage tank Leak check 1
07. 11. 2007
0 views

Storage tank Leak check 1

mulkukarakus
22. 11. 2007
0 views

mulkukarakus

5para
23. 12. 2007
0 views

5para

From World War Two to Vietnam
24. 12. 2007
0 views

From World War Two to Vietnam

Burnswebversion
04. 01. 2008
0 views

Burnswebversion

9elKharrat
07. 01. 2008
0 views

9elKharrat

DesafioBibliotecaEsc olar
05. 11. 2007
0 views

DesafioBibliotecaEsc olar

group1
03. 01. 2008
0 views

group1

learning2004
16. 11. 2007
0 views

learning2004

Historizmus
01. 10. 2007
0 views

Historizmus

PUNJAB Sidhu
04. 10. 2007
0 views

PUNJAB Sidhu

Graciela Camara
04. 01. 2008
0 views

Graciela Camara

upwa6
01. 12. 2007
0 views

upwa6

Facilities Presentation CHE 4 02
04. 01. 2008
0 views

Facilities Presentation CHE 4 02

b689 w04
20. 02. 2008
0 views

b689 w04

prak astro
15. 11. 2007
0 views

prak astro

06svenss
03. 12. 2007
0 views

06svenss

bfslides0708
24. 02. 2008
0 views

bfslides0708

alt2
29. 02. 2008
0 views

alt2

OCCAnalystsVisitNov01
12. 12. 2007
0 views

OCCAnalystsVisitNov01

04 05
05. 03. 2008
0 views

04 05

PlanningDDivine
03. 10. 2007
0 views

PlanningDDivine

fiscalyear06a
27. 03. 2008
0 views

fiscalyear06a

Japan Spring 06
30. 03. 2008
0 views

Japan Spring 06

Old Faithful Premier Video
09. 10. 2007
0 views

Old Faithful Premier Video

eci147p3e
13. 04. 2008
0 views

eci147p3e

D5 Laura Botwinick Peter Angood
02. 10. 2007
0 views

D5 Laura Botwinick Peter Angood

family rel Qs 2004
28. 12. 2007
0 views

family rel Qs 2004

Shaxson
27. 12. 2007
0 views

Shaxson

WIC BFP Training Script
23. 11. 2007
0 views

WIC BFP Training Script

Vanhempainilta
05. 11. 2007
0 views

Vanhempainilta

OME CASEWRITING WORKSHOP
29. 12. 2007
0 views

OME CASEWRITING WORKSHOP

NASTIES AND BEASTIES THINGS1
19. 11. 2007
0 views

NASTIES AND BEASTIES THINGS1