Flex_rest_optimization

Flex with Rest and Optimazation MyLabs Flex with Rest and Optimazation

Ways between AJAX and Flex using the flashVars properties, querying string parameters, using the navigateToURL() method using the ExternalInterface class

Using FlashVar Property You pass request data to Flex applications by defining the flashVars properties in the wrapper The flashVars properties and URL fragments are read in the Flex application at run time. As a result, changing flashVars properties or URL fragments does not require you to recompile the Flex application.

Using FlashVar Property <html> <head> <title>/flex2/code/wrapper/SimplestFlashVarTestWrapper.html</title> <style> body { margin: 0px; overflow:hidden } </style> </head> <body scroll='no'> <table width='100%' height='100%' cellspacing='0' cellpadding='0'><tr><td valign='top'> <h1>Simplest FlashVarTest Wrapper</h1> <object id='mySwf' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab' height='100%' width='100%'> <param name='src' value='FlashVarTest.swf'/> <param name='flashVars' value='firstName=Nick&lastName=Danger'/> <embed name='mySwf' src='FlashVarTest.swf' pluginspage='http://www.adobe.com/go/getflashplayer' height='100%' width='100%' flashVars='firstName=Nick&lastName=Danger'/> </object> </td></tr></table> </body> </html>

Using URL fragments Append value to the SWF file’s URL in the HTML wrapper that embeds the Flex application. http://www.domain.com/myApp.swf firstName=Marco&lastname=Casario In your Flex app to access the values you use the Application.application.parameters object:

Using URL fragments <mx:Script> <![CDATA[ import mx.managers.BrowserManager; import mx.managers.IBrowserManager; import mx.utils.URLUtil; private var bm:IBrowserManager; [Bindable] private var fName:String; [Bindable] private var lName:String; private function init(e:Event):void { bm = BrowserManager.getInstance(); bm.init("", "Welcome!"); /* The following code will parse a URL that passes firstName and lastName as query string parameters after the "#" sign; for example: http://www.mydomain.com/MyApp.html#firstName=Nick&lastName=Danger */ var o:Object = URLUtil.stringToObject(bm.fragment, "&"); fName = o.firstName; lName = o.lastName; } ]]> </mx:Script>

Using the navigateToURL () method The navigateToURL () method loads a document from aspecific URL into a window or passes variables to another application at a defined URL <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script><![CDATA[ import flash.net.*; public function executeSearch(event:MouseEvent):void { var u:URLRequest = new URLRequest("http://www.google.com/search?hl=en&q=" + ta1.text); navigateToURL(u,"_blank"); } ]]></mx:Script> <mx:TextArea id="ta1"/> <mx:Button label="Search" click="executeSearch(event)"/> </mx:Application>

Using the navigateToURL() method You can use the navigateToURL() method to invoke JavaScript functions: / /in Flex var u:URLRequest = new URLRequest(" javascript:catchClick ('"+ eName + "','" + eType +"')"); navigateToURL(u,"_self"); //On the HTML page <SCRIPT LANGUAGE="JavaScript"> function catchClick(name, type) { alert(name + " triggered the " + type + " event."); } </SCRIPT>

Using the ExternalInterface API The ExternalInterface is part of the flash.external package This class allows developers to pass data from the Flex application to the enclosing HTML page, process it, and then pass it back to the Flex application. Moreover you can call any JavaScript method on the wrapper, pass parameters, and get a return value. The ExternalInterface class is the External API, an application programming interface that enables straightforward communication between ActionScript and the Flash Player container; for example, an HTML page with JavaScript, or a desktop application with Flash Player embedded. Use of ExternalInterface is recommended for all JavaScript-ActionScript communication.

Using the ExternalInterface API Access javascript from flex <![CDATA[ import mx.controls.Alert; private function init():void { var userAgent:String = ExternalInterface.call("navigator.userAgent.toString"); Alert.show(userAgent, "navigator.userAgent:"); } ]]> </mx:Script> <mx:ApplicationControlBar dock="true"> <mx:Button label="Display user agent" click="init();" /> </mx:ApplicationControlBar>

Using the ExternalInterface API Access flex from javascript public function myFunc(s:String):void { // whatever you want} public function initApp():void { ExternalInterface.addCallback("myFlexFunction",myFunc); } <SCRIPT LANGUAGE="JavaScript"> function callApp() { window.document.title = document.getElementById("newTitle").value; mySwf.myFlexFunction(window.document.title); } </SCRIPT>

ExternalInterface API security Restrictions: By default, scripts on the HTML page can communicate only with ActionScript in a Flex application if the page and the application are in the same domain. Using the allowScriptAccess parameter (an HTML parameter) you can determine whether your Flex application can call JavaScript in the HTML page, and it applies to all functions on the page. <object id=‘myName' classid=' clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab' allowScriptAccess='always' height='100%' width='100%'>

The Flex AJAX Bridge The Flex Ajax Bridge (FABridge) is a small, unobtrusive code library that you can insert into a Flex widget, or an empty SWF file to expose it to scripting in the web browser. It’s based on the ExternalInterface API. It will save you a lot of time. Using the library anything you can do with ActionScript, you can do with JavaScript.

When to use the Flex AJAX Bridge The FABridge library is useful in the following situations: You have only one or two people on your team who know Flex. The FABridge library lets everyone on your team use the work produced by one or two Flex specialists. You are building an integrated rich Internet application (RIA) with Flex and Ajax portions.Although you could build the integration yourself using ExternalInterface, you might find it faster to start with the FABridge.

Optimization Framework Optimization Code Optimization

Framework Optimization Runtime Shared Libraries (RSLs) Flex 1.5 introduced the concept of Runtime Shared Libraries (RSLs). With RSLs, you can reduce the size of your application’s SWF file by externalizing shared assets into standalone files that can be separately downloaded and cached on the client. These shared assets are loaded by any number of applications at runtime, but only need to be transferred to the client once. If you have multiple applications but those applications share a core set of graphic files, components, and other assets, your users only have to download those assets once in an RSL. You can reduce the resulting file size for your main application dramatically. If a file in one of the RSLs changes, Flex recompiles and resends that RSL to the client. Flex does not recompile the application and other unchanged RSLs.

Code Optimization Object creation Measurement/Layout Rendering

Optimizing Actionscript: Object Creation Solution #1: Deferred Creation Delay object creation until the object becomes visible Is baked into Accordion, TabNavigator, and ViewStack Can be added to custom containers, but subclassing ViewStack is easier

Optimizing Actionscript: Object Creation Solution #2: Ordered Creation During startup, stagger creation of objects <mx:Application> <mx:Panel width="250" height="100" creationPolicy=“queued” /> <mx:Label text="One" /> </mx:Panel> <mx:Panel width="250" height="100" creationPolicy=“queued” /> <mx:Label text="Two" /> </mx:Panel> </mx:Application>

Measurement/Layout: Definition The process of assigning a position and size to every component <mx:Application> <mx:HBox> <mx:Button label=“1”/> <mx:Button label=“2”/> </mx:HBox> <mx:TextArea width=“100%” height=“100%” text=“Text”/> </mx:Application>

Solution #1: Reduce Container Nesting Try to use HBox and VBox instead of Grid Avoid nesting a VBox inside a Panel or Application The root of an MXML component doesn’t need to be a Container Use Canvas with constraints Warning sign: a Container with a single child

Useful Links http://livedocs.adobe.com/flex/3/

Flex_rest_optimization

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to Flex_rest_optimization (20)

Recently uploaded (20)

Flex_rest_optimization