Your SlideShare is downloading. ×
Flex Solutions for your daily development Marco Casario CTO – Comtaste http://casario.blogs.com
Who am I Flex Daily Solutions <ul><li>CTO of  Comtaste , RIA Development, Consulting and Training firm </li></ul><ul><ul><...
Agenda <ul><li>I’ll give some development solutions you could often face during your daily Flex development </li></ul><ul>...
GOAL Architecture your code Design Patterns Flex Daily Solutions <ul><li>Design patterns are a general reusable solutions ...
GOAL Create a View Helper Design Patterns Flex Daily Solutions A view helper contains formatting code, delegating its proc...
GOAL Elements of a View Helper Design Patterns Flex Daily Solutions A View Helper  consists in an ActionScript class that ...
GOAL Elements of a View Helper Design Patterns Flex Daily Solutions <h:UploadHelper id=&quot;uploadHelper&quot; /> package...
GOAL Create a Model Locator Design Patterns Flex Daily Solutions The Model Locator pattern defines a component that is res...
GOAL Elements of a Model Locator Design Patterns Flex Daily Solutions A Model Locator is an ActionScript class that uses t...
GOAL Create a Front Controller Design Patterns Flex Daily Solutions The Front Controller pattern defines a component that ...
GOAL Elements of a Front Controller Design Patterns Flex Daily Solutions A front controller centralizes functions and appl...
GOAL Elements of a Front Controller Design Patterns Flex Daily Solutions public class EventController { private var myApp:...
GOAL Elements of a Front Controller Design Patterns Flex Daily Solutions To send complex data with a custom event we have ...
GOAL Elements of a Front Controller Design Patterns Flex Daily Solutions <ul><li>After creating a subclass of the Event cl...
GOAL Elements of a Front Controller Design Patterns Flex Daily Solutions public   class  FC_Event  extends  Event { public...
GOAL Elements of a Front Controller Design Patterns Flex Daily Solutions Now you have to define the custom event using the...
GOAL Elements of a Front Controller Design Patterns Flex Daily Solutions Now you have to define the custom event using the...
GOAL Advanced RPC tecnique  Flex RPC Flex Daily Solutions ASyncToken  is a dynamic class  that provides a place to set add...
GOAL The ASynchToken class  Flex RPC Flex Daily Solutions A dynamic class  allows develepers to programmatically add new p...
GOAL The ASynchToken class  Flex RPC Flex Daily Solutions var myHS:HTTPService = new HTTPService(); myHS .url = “http://ww...
GOAL Monitore the network traffic could be crucial in many contexts. TraceTarget Flex Daily Solutions Monitoring the netwo...
GOAL This class provides a logger target that uses the trace() method to output log messages  Flex Daily Solutions The Tra...
GOAL <ul><li>The Logging API of Flex SDK allows you to write and send messages to an output created </li></ul><ul><li>by t...
GOAL To use the Logging API and send the messages to the Flash Player Debug, you must define the log target and add it to ...
GOAL Then, using the  getLogger()  method of the Log object, you can send a message to the file that you intend to debug: ...
GOAL <ul><li>To filter a message with the Log class, a category and a level properties are used.  </li></ul><ul><li>A cate...
GOAL Flex Daily Solutions Debug using the Logging APIs  Logging APIs
GOAL You can print all the messages passed to the global trace() method in an external file called flashlog.txt.  Create a...
GOAL URLLoader Flex Daily Solutions Remote communication without using the RPC Flex classes The RPC classes are not the on...
GOAL URLLoader Flex Daily Solutions Remote communication without using the RPC Flex classes At first create an instance of...
GOAL URLLoader Flex Daily Solutions Remote communication without using the RPC Flex classes The URLRequest class specifies...
GOAL URLLoader Flex Daily Solutions Remote communication without using the RPC Flex classes When response data is returned...
GOAL Adobe AIR Flex Daily Solutions Flex on the desktop with AIR
GOAL Adobe AIR Flex Daily Solutions Flex on the desktop with AIR At the end of the FITC I want to hope everyone knows what...
GOAL Optimizing Flex Builder Performance IDE Optimizations Flex Daily Solutions <ul><li>Flex Builder is an environments th...
GOAL Optimizing Flex Builder Performance Flex Daily Solutions <ul><li>To access these settings, go the Preferences dialog ...
GOAL Optimizing Flex Builder Performance Flex Daily Solutions Check for the version of the JVM : FlexBuilder folderjrein>...
GOAL Optimizing Flex Builder Performance Flex Daily Solutions <ul><li>FlexBuilder.ini  and  eclipse.ini  files </li></ul><...
GOAL Optimizing Flex Builder Performance Flex Daily Solutions <ul><li>The more memory assigned to the JVM, the better the ...
GOAL Shortcuts Flex Daily Solutions Flex Builder Keyboard Shortcut  <ul><li>This is a list of my favourite keyboard shortc...
GOAL Shortcuts Flex Daily Solutions Flex Builder Keyboard Shortcut  <ul><li>Ctrl + Shift + O :  Organize imports </li></ul...
GOAL Flex Daily Solutions Overcoming the cross domain policy  A proxy service  acts as a bridge between the application an...
GOAL Flex Daily Solutions Overcoming the cross domain policy  You can develop your own proxy service creating a server-sid...
GOAL Flex Daily Solutions Overcoming the cross domain policy  You can also check on the client side whether the cross-doma...
GOAL Flex Daily Solutions Overcoming the cross domain policy  Another option is to use the Proxy Service of BlazeDS. Blaze...
GOAL Flex Daily Solutions Overcoming the cross domain policy  <ul><li>High performance data transfer for more responsive a...
GOAL Flex Daily Solutions Overcoming the cross domain policy  In order to use BlazeDS Proxy Service you need to install Bl...
GOAL Flex Daily Solutions Overcoming the cross domain policy  Add the web service destination in the  proxy-config.xml fil...
GOAL Flex Daily Solutions Overcoming the cross domain policy  <ul><li><wsdl> :  specifies the WSDL URL of a web service  <...
GOAL Cross domain Flex Daily Solutions Overcoming the cross domain policy  <ul><li>In your Flex application you can now ca...
GOAL Time is money. Save time reducing development time. The FlexLib project is a community effort to create open source u...
GOAL A lot of ready to use and to extend Flex components. Current components: AdvancedForm, Base64Image, EnhancedButtonSki...
GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features  <ul><li>Flex 3 introduces many brand new cool features. Som...
GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features  <ul><li>My favourite ones are  : </li></ul><ul><ul><ul><ul>...
GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features  <ul><li>The   new AdvancedDataGrid component, which </li></...
GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features  The Flex 3 SDK offers new classes that enable you to assign...
GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features  You can then create a GroupingCollection object and send th...
GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features  Finally, link the Grouping object to the grouping property ...
GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features  In Flex 3 you can create a summary using the summaries prop...
GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features  Consider an ArrayCollection created from a Model : <mx:Mode...
GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features  To create a summary data you must first create grouped data...
GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features  In the <mx:GroupingField> tag, specify the summaries proper...
GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features  For the SummaryRow class, specify the fields property, whic...
GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features  These are the type of operations that you can handle using ...
GOAL Cairngen is a one-shot code generation tool for Adobe Cairngorm developed by Eric Feminella  (http://www.ericfeminell...
GOAL Apache Ant is a software tool for automating software build processes.  Ant uses XML to describe the build process an...
GOAL <ul><li>The Cairngen build file contains a default target [main] which will create the typical Cairngorm project stru...
GOAL In addition, the main target will also create your applications ModelLocator, FrontController and Services.mxml and g...
GOAL After downloading Cairngen 2.1, extract Cairngen to your Flex project directory, or create a new generic project and ...
GOAL Flex  Inspirational  Quotes Agenda Flex Daily Solutions Fight your daily demotivation while coding
GOAL A developer is the product of his thoughts. Inspirational Quotes Flex Daily Solutions Think and Believe Big.
GOAL You’re a better Flex developer than you think you are. Agenda Flex Daily Solutions Good developers are ordinary peopl...
GOAL Let interest and enthusiasm guide you. Agenda Flex Daily Solutions Learn to be eager and avid of knowledge. It’s more...
GOAL Not only knowledge is power. Agenda Flex Daily Solutions Use knowledge in a constructive way.  Improve your ability t...
GOAL Simplicity. Agenda Flex Daily Solutions Don’t even think that a more complex and better solution than yours exists .
GOAL Never sell yourself short. Agenda Flex Daily Solutions Find your own skills and your talents.
GOAL Be your Flex Entreprenure. Agenda Flex Daily Solutions “  I don’t know the answer to those questions, but I could fin...
we make it RIA Marco Casario CTO – Comtaste http://casario.blogs.com
Upcoming SlideShare
Loading in...5
×

Flex Daily Solutions @ FITC 2008

6,257

Published on

This is my presentation at the FITC Conference 2008 in Amsterdam.

Published in: Technology, Business
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,257
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "Flex Daily Solutions @ FITC 2008"

  1. 1. Flex Solutions for your daily development Marco Casario CTO – Comtaste http://casario.blogs.com
  2. 2. Who am I Flex Daily Solutions <ul><li>CTO of Comtaste , RIA Development, Consulting and Training firm </li></ul><ul><ul><ul><ul><li>www.comtaste.com </li></ul></ul></ul></ul><ul><li>My Books </li></ul><ul><ul><ul><li>Flex Solutions: Essential Techniques for Flex 2 and Flex 3 Developers </li></ul></ul></ul><ul><ul><ul><li>Advanced AIR Applications </li></ul></ul></ul><ul><li>My Blog and my contacts </li></ul><ul><ul><ul><ul><li>http://casario.blogs.com </li></ul></ul></ul></ul><ul><ul><ul><ul><li>http://blog.comtaste.com </li></ul></ul></ul></ul>
  3. 3. Agenda <ul><li>I’ll give some development solutions you could often face during your daily Flex development </li></ul><ul><li>I’ll talk about : </li></ul><ul><ul><ul><li>How to architecture Flex application </li></ul></ul></ul><ul><ul><ul><li>Use the open source library </li></ul></ul></ul><ul><ul><ul><li>How to optimize the use of RPC class with the AsynchToken </li></ul></ul></ul><ul><ul><ul><li>Trace Network traffic </li></ul></ul></ul><ul><ul><ul><li>Debug applications using the Logging APIs </li></ul></ul></ul><ul><ul><ul><li>Flex Builder IDE Optimizations </li></ul></ul></ul><ul><ul><ul><li>How to overcome the cross domain policy </li></ul></ul></ul><ul><ul><ul><li>Using the Proxy Service of BlazeDS </li></ul></ul></ul><ul><ul><ul><li>Focus on Flex 3 new features: the new Collection classes and the AdvancedDataGrid </li></ul></ul></ul><ul><ul><ul><li>Flex Inspirational Quotes </li></ul></ul></ul><ul><li>We will move very quickly  A lot of things to show and share ! </li></ul>Flex Daily Solutions
  4. 4. GOAL Architecture your code Design Patterns Flex Daily Solutions <ul><li>Design patterns are a general reusable solutions to a commonly occurring problem in software design. </li></ul><ul><ul><li>DP can speed up the development process by providing tested, proven development paradigms. </li></ul></ul><ul><ul><li>DP improves code readability for and between developers </li></ul></ul>
  5. 5. GOAL Create a View Helper Design Patterns Flex Daily Solutions A view helper contains formatting code, delegating its processing responsibilities to its helper classes, implemented as Actionscript classes. Helpers also store the view's intermediate data model and serve as business data adapters.
  6. 6. GOAL Elements of a View Helper Design Patterns Flex Daily Solutions A View Helper consists in an ActionScript class that encapsulates business logic in a helper instead of a view, making our application more modular by facilitating component re-use.
  7. 7. GOAL Elements of a View Helper Design Patterns Flex Daily Solutions <h:UploadHelper id=&quot;uploadHelper&quot; /> package com.fitc { import flash.events.Event; import flash.events.IOErrorEvent; ........ public class UploadHelper {} }
  8. 8. GOAL Create a Model Locator Design Patterns Flex Daily Solutions The Model Locator pattern defines a component that is responsible for centralizing data in an application. When the data is updated in ModelLocator, all view components binded to the model, update themselves to render the new data.
  9. 9. GOAL Elements of a Model Locator Design Patterns Flex Daily Solutions A Model Locator is an ActionScript class that uses the Singleton pattern. This pattern has a method that creates a new instance of the class if one does not exist. If an instance already exists, it simply returns a reference to that object.
  10. 10. GOAL Create a Front Controller Design Patterns Flex Daily Solutions The Front Controller pattern defines a component that is responsible for processing application requests. A front controller centralizes functions and applies them across all views and states.
  11. 11. GOAL Elements of a Front Controller Design Patterns Flex Daily Solutions A front controller centralizes functions and applies them across all views and states. It’s an ActionScript class that uses the addEventListener() method to create and manage event handlers.
  12. 12. GOAL Elements of a Front Controller Design Patterns Flex Daily Solutions public class EventController { private var myApp:FrontController_2 = Application.application as FrontController_2; public function EventController() { super(); myApp.addEventListener(&quot;changeBlog&quot;, myEventHandler); } public function myEventHandler(event:FC_Event):void { mx.controls.Alert.show(&quot;Event dispatched&quot;); }
  13. 13. GOAL Elements of a Front Controller Design Patterns Flex Daily Solutions To send complex data with a custom event we have to extend the Event class. The flash.events.Event class doesn’t allow developers to add properties to it.
  14. 14. GOAL Elements of a Front Controller Design Patterns Flex Daily Solutions <ul><li>After creating a subclass of the Event class we have to : </li></ul><ul><li>call the super() method of the Event class to call the constructor of the superclass and pass the event type to it. </li></ul><ul><li>override the clone() method to return a new copy of the event object by setting the type property and any new properties. </li></ul>
  15. 15. GOAL Elements of a Front Controller Design Patterns Flex Daily Solutions public class FC_Event extends Event { public var evProp:String; public function FC_Event(evParam:String,type:String) { super (type); this .evProp = evParam; } override public function clone():Event { return new FC_Event(evProp,type); }
  16. 16. GOAL Elements of a Front Controller Design Patterns Flex Daily Solutions Now you have to define the custom event using the Metadata and then dispatch the event from your component: <mx:Metadata> [Event(name=&quot;changeBlog&quot;, type=&quot;com.comtaste.fitc.FC_Event&quot;)] </mx:Metadata>
  17. 17. GOAL Elements of a Front Controller Design Patterns Flex Daily Solutions Now you have to define the custom event using the Metadata and then dispatch the event from your component: <comp:FC_CB id=&quot;fc_cb&quot; x=&quot;161&quot; y=&quot;10&quot; changeBlog=&quot;eventFired(event)&quot; /> private function changeHandler():void { var eventObj:FC_Event = new FC_Event(myCombo.value as String,&quot;changeBlog&quot;); dispatchEvent(eventObj); }
  18. 18. GOAL Advanced RPC tecnique Flex RPC Flex Daily Solutions ASyncToken is a dynamic class that provides a place to set additional or token-level data for asynchronous rpc operations. Each RPC calls return objects typed as AsyncToken.
  19. 19. GOAL The ASynchToken class Flex RPC Flex Daily Solutions A dynamic class allows develepers to programmatically add new properties at run-time. We can take advantage of this features to append a flag to the class to track our services calls.
  20. 20. GOAL The ASynchToken class Flex RPC Flex Daily Solutions var myHS:HTTPService = new HTTPService(); myHS .url = “http://www.comtaste.com/page.jsp&quot;; var token:AsyncToken = myHS .send(); token.addResponder(new Responder( function (event:ResultEvent):void { states = event.result.people.person; }, function (event:FaultEvent):void { Alert.show(“Error occured: ”+ event.fault.faultString); } );
  21. 21. GOAL Monitore the network traffic could be crucial in many contexts. TraceTarget Flex Daily Solutions Monitoring the network traffic
  22. 22. GOAL This class provides a logger target that uses the trace() method to output log messages Flex Daily Solutions The TraceTarget class TraceTarget
  23. 23. GOAL <ul><li>The Logging API of Flex SDK allows you to write and send messages to an output created </li></ul><ul><li>by the developer. </li></ul><ul><li>They consists of three principal components: </li></ul><ul><ul><li>the Logger object, </li></ul></ul><ul><ul><li>the log target, </li></ul></ul><ul><ul><li>and the destination. </li></ul></ul>Flex Daily Solutions Debug using the Logging APIs TraceTarget
  24. 24. GOAL To use the Logging API and send the messages to the Flash Player Debug, you must define the log target and add it to the Log object: myLogTarget:TraceTarget = new TraceTarget(); Log.addTarget(myLogTarget); Logging APIs Flex Daily Solutions Debug using the Logging APIs
  25. 25. GOAL Then, using the getLogger() method of the Log object, you can send a message to the file that you intend to debug: Log.getLogger(&quot;myMXMLfileOrClass&quot;).info(&quot;My message&quot;); Flex Daily Solutions Debug using the Logging APIs Logging APIs
  26. 26. GOAL <ul><li>To filter a message with the Log class, a category and a level properties are used. </li></ul><ul><li>A category is used to filter messages sent from a logger. It's a simple String. </li></ul><ul><li>A level provides filtering options for the message defining the constants on the LogEventLevel class. </li></ul>Flex Daily Solutions Debug using the Logging APIs Logging APIs
  27. 27. GOAL Flex Daily Solutions Debug using the Logging APIs Logging APIs
  28. 28. GOAL You can print all the messages passed to the global trace() method in an external file called flashlog.txt. Create and configure the mm.cfg file (usually located in driveDocuments and Settingsuser_name) as follow : TraceOutputFileName=c:/logs/flashlog.txt ErrorReportingEnable=1 TraceOutputFileEnable=1 MaxWarnings=0 Troubleshooting tips for flashlog.txt not being generated . Flex Daily Solutions Debug with the flashlog.txt file Logging APIs
  29. 29. GOAL URLLoader Flex Daily Solutions Remote communication without using the RPC Flex classes The RPC classes are not the only system for remote data communication with Flex. We can also use the URLLoader class, part of the flash.net package, which permits the downloading of data as text, binary data, or URL-encoded variables.
  30. 30. GOAL URLLoader Flex Daily Solutions Remote communication without using the RPC Flex classes At first create an instance of the URLLoader class: private var myURLService:URLLoader; At this point, you can call the load() method of the class, which expects to receive a URLRequest object as a parameter.
  31. 31. GOAL URLLoader Flex Daily Solutions Remote communication without using the RPC Flex classes The URLRequest class specifies that all the information is wrapped in a single HTTP request: myURLService.load( new URLRequest(“http://server.com/data.xml&quot;));.
  32. 32. GOAL URLLoader Flex Daily Solutions Remote communication without using the RPC Flex classes When response data is returned, the COMPLETE event is dispatched. This event makes up part of the flash.events.Event class, and you usually record it with the addEventListener method: myURLService.addEventListener(Event.COMPLETE, completeHandler);
  33. 33. GOAL Adobe AIR Flex Daily Solutions Flex on the desktop with AIR
  34. 34. GOAL Adobe AIR Flex Daily Solutions Flex on the desktop with AIR At the end of the FITC I want to hope everyone knows what Adobe AIR is ;) Developing an AIR desktop application is very easy if you are a Flex developers.
  35. 35. GOAL Optimizing Flex Builder Performance IDE Optimizations Flex Daily Solutions <ul><li>Flex Builder is an environments that requires a lot of system memory to work at its best </li></ul><ul><li>Simple Rules to optimize the IDE : </li></ul><ul><ul><ul><li>Limit the number of projects open at the same time on the workspace </li></ul></ul></ul><ul><ul><ul><li>Flex Builder maintains every project that has a file open in Editor view in memory. You can limit the number of files that you can keep open in Editor view and ensure that the IDE automatically closes them. </li></ul></ul></ul>
  36. 36. GOAL Optimizing Flex Builder Performance Flex Daily Solutions <ul><li>To access these settings, go the Preferences dialog box of the program by selecting Window > Preferences > General > Editors </li></ul><ul><ul><ul><li>When selected, the Close editors automatically check box enables you to choose from the following options: </li></ul></ul></ul><ul><ul><ul><ul><li>Number of opened editors before closing : Defines the maximum number of files that can be opened at the same time in the Editor. </li></ul></ul></ul></ul><ul><ul><ul><ul><li>When all editors are dirty or pinned : Enables you to choose to open a new editor or prompt to save and reuse. </li></ul></ul></ul></ul>IDE Optimizations
  37. 37. GOAL Optimizing Flex Builder Performance Flex Daily Solutions Check for the version of the JVM : FlexBuilder folderjrein>java -version Check on the Sun site the latest version of the JRE and if a newer version exists, download. Copy the jre folder in the package you just downloaded to the installation folder of Flex Builder, overwriting the one that’s already there . IDE Optimizations
  38. 38. GOAL Optimizing Flex Builder Performance Flex Daily Solutions <ul><li>FlexBuilder.ini and eclipse.ini files </li></ul><ul><li>Increase the quantity of RAM Flex Builder can use by updating settings in the ini file : </li></ul><ul><ul><li>Xms: Specifies the minimum amount of RAM used. (default value 128MB) </li></ul></ul><ul><ul><li>Xmx: Specifies the maximum amount of RAM used. (default value is 512MB) </li></ul></ul><ul><ul><li>Vmargs: is used to customize the operation of the JVM to run Eclipse. </li></ul></ul>IDE Optimizations
  39. 39. GOAL Optimizing Flex Builder Performance Flex Daily Solutions <ul><li>The more memory assigned to the JVM, the better the IDE performance will be. </li></ul>IDE Optimizations Xms: 512MB Xmx: 1024MB -vmargs -Xms1024m -Xmx1024m -XX:PermSize=512m -XX:MaxPermSize=512m
  40. 40. GOAL Shortcuts Flex Daily Solutions Flex Builder Keyboard Shortcut <ul><li>This is a list of my favourite keyboard shortcuts to move faster while working in Flex Builder : </li></ul><ul><ul><li>Ctrl + Shift + L : Key Assist </li></ul></ul><ul><ul><li>Ctrl + Shift + T : Open type </li></ul></ul><ul><ul><li>Ctrl + O : Quick Outliner </li></ul></ul><ul><ul><li>CTRL + SHIFT + D : Add ASDoc Comment </li></ul></ul><ul><ul><li>Ctrl + Shift + P : Jump to matching brace </li></ul></ul>
  41. 41. GOAL Shortcuts Flex Daily Solutions Flex Builder Keyboard Shortcut <ul><li>Ctrl + Shift + O : Organize imports </li></ul><ul><li>Alt+Up and ALT + Down Arrow: Move line up or down </li></ul><ul><li>Ctrl+ Alt + Down: Repeat current line </li></ul><ul><li>Ctrl + D: Delete line </li></ul><ul><li>If you have any other chilly shortcuts RAISE your hand now ;) </li></ul>
  42. 42. GOAL Flex Daily Solutions Overcoming the cross domain policy A proxy service acts as a bridge between the application and the remote data to load. It eliminates the need for crossdomain.xml policy file on the server that hosts the web service. Instead of directly accessing external resources on different domains, Flex will access this proxy service, which looks after accessing the resources on the specified domains . Cross domain
  43. 43. GOAL Flex Daily Solutions Overcoming the cross domain policy You can develop your own proxy service creating a server-side proxy file that consists of a script published on the server. <%@ page language=&quot;java&quot; contentType=&quot;text/html; charset=utf-8&quot; pageEncoding=&quot;utf-8&quot; import=&quot;java.io.BufferedReader, java.io.InputStreamReader, java.io.IOException, java.io.InputStream, java.net.MalformedURLException, java.net.URL, java.net.URLConnection&quot; %> <%! private String contentURL; public static final String CONTENT_URL_NAME = &quot;contentURL&quot;; %> <% // get the url through the request: ............. Cross domain
  44. 44. GOAL Flex Daily Solutions Overcoming the cross domain policy You can also check on the client side whether the cross-domain file exists and then decide if loading the proxy service. An object dispatches a SecurityErrorEvent event to report the occurrence of a security error. var loader:URLLoader = new URLLoader(); loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, loadProxyService); var request:URLRequest = new URLRequest(&quot;http://www.[yourDomain].com&quot;); loader.load(request); } private function loadProxyService(event:SecurityErrorEvent):void {} Cross domain
  45. 45. GOAL Flex Daily Solutions Overcoming the cross domain policy Another option is to use the Proxy Service of BlazeDS. BlazeDS is the remoting and HTTP-based messeaging which Adobe is contributing to the community under LGPL. It’s free and open source. Cross domain
  46. 46. GOAL Flex Daily Solutions Overcoming the cross domain policy <ul><li>High performance data transfer for more responsive applications </li></ul><ul><li>Real server push over standard HTTP </li></ul><ul><li>Full pub/sub messaging that extends existing messaging infrastructure </li></ul><ul><li>Publication of the Action Message Format (AMF) binary data protocol specification </li></ul>Cross domain
  47. 47. GOAL Flex Daily Solutions Overcoming the cross domain policy In order to use BlazeDS Proxy Service you need to install BlazeDS on your server. After installation you’ll find the proxy-config.xml file in the WEB-INF/flex/ folder. Open the proxy-config.xml in a text or XML editor and add your web service. Cross domain
  48. 48. GOAL Flex Daily Solutions Overcoming the cross domain policy Add the web service destination in the proxy-config.xml file, above the </service> tag: <destination id=“myWS&quot;> <properties> <wsdl>http://www.server.com/mycfc.cfc?wsdl</wsdl> <soap>*</soap> </properties> <adapter ref=&quot;soap-proxy&quot;/> </destination> Cross domain
  49. 49. GOAL Flex Daily Solutions Overcoming the cross domain policy <ul><li><wsdl> : specifies the WSDL URL of a web service </li></ul><ul><li><soap> : specifies the web service endpoint URLs that can be proxied. The asterisk indicates that any endpoint URL is allowed. </li></ul><ul><li><adapter> : references an adapter called soap-proxy, which is is designed to proxy web services </li></ul><ul><li>Note that there is a default channel called my-amf configured in the proxy-config.xml file. BlazeDS uses &quot;channels&quot; to send data back and forth between Flex clients and the server. The actual channel is defined in the services-config.xml file and it is only referenced in the proxy-config.xml file. This particular channel uses the Action Message Format (AMF). </li></ul>Cross domain
  50. 50. GOAL Cross domain Flex Daily Solutions Overcoming the cross domain policy <ul><li>In your Flex application you can now call the web service using the WebService class : </li></ul><ul><li><mx:WebService id=&quot;srv&quot; destination=“myWS&quot; </li></ul><ul><li>useProxy=&quot;true&quot; showBusyCursor=&quot;true&quot; result=&quot;onResult(event)&quot;/> </li></ul>
  51. 51. GOAL Time is money. Save time reducing development time. The FlexLib project is a community effort to create open source user interface components for Adobe Flex Flex open source Flex Daily Solutions Don’t reinvent the wheel.
  52. 52. GOAL A lot of ready to use and to extend Flex components. Current components: AdvancedForm, Base64Image, EnhancedButtonSkin, CanvasButton, ConvertibleTreeList, Draggable Slider, Fire, Highlighter, HorizontalAxisDataSelector IconLoader, ImageMap, PromptingTextArea, PromptingTextInput, Scrollable Menu Controls, SuperTabNavigator, Alternative Scrolling Canvases, Horizontal Accordion, TreeGrid, FlowBox, Docking ToolBar, Flex Scheduling Framework Flex open source Flex Daily Solutions The flexlib Library
  53. 53. GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features <ul><li>Flex 3 introduces many brand new cool features. Some of these are : </li></ul><ul><ul><ul><ul><ul><li>Zoom and Magnification tools </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>CSS in Design view </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Code refactoring </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>The AdvancedDataGrid control </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Multiple SDK support </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Deep linking </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Web Service Introspection </li></ul></ul></ul></ul></ul>
  54. 54. GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features <ul><li>My favourite ones are : </li></ul><ul><ul><ul><ul><ul><li>The AdvancedDataGrid control </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>The new Collection classes for grouping and summarize data </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>I’ll show you an example of both </li></ul></ul></ul></ul></ul>
  55. 55. GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features <ul><li>The new AdvancedDataGrid component, which </li></ul><ul><li>extends and enriches the functions of the DataGrid by adding new and very useful features, such as: </li></ul><ul><li>Multicolumn sorting interface </li></ul><ul><li>Cell-level formatting functions </li></ul><ul><li>Tree view (hierarchical data and grouping data) </li></ul><ul><li>Cell selection </li></ul><ul><li>Custom rows </li></ul><ul><li>Column grouping </li></ul><ul><li>SummaryCollection </li></ul><ul><li>PrintAdvancedDataGrid </li></ul>
  56. 56. GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features The Flex 3 SDK offers new classes that enable you to assign a GroupingCollection to a data provider instead of flat data (usually returned as response data). To regroup the data in a grouping view, you must instance a Grouping object and specify the data to use for the regrouping through its fields property: var myGroup:Grouping = new Grouping(); myGroup.fields = [new GroupingField(&quot;region&quot;)];
  57. 57. GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features You can then create a GroupingCollection object and send the ArrayCollection to it(the flat data is contained in the source property): var myGroupColl:GroupingCollection = new GroupingCollection(); myGroupColl.source = new ArrayCollection(myRegion.city);
  58. 58. GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features Finally, link the Grouping object to the grouping property of the GroupingCollection object and create the collection class to send to the dataProvider of the AdvancedDataGrid: myGroupColl.grouping = myGroup; myGroupColl.refresh(); myADG.dataProvider = myGroupColl;
  59. 59. GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features In Flex 3 you can create a summary using the summaries property of the GroupingField class. The summary data can be visualized in a row of the AdvancedDataGrid. To create summary data, use the summaries property of the GroupingField class. This property accepts instances of the SummaryRow classand it contains the fields property, which specifies an Array of one or more SummaryFields objects defining the data fields to create for the summary.
  60. 60. GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features Consider an ArrayCollection created from a Model : <mx:Model id=&quot;myRegion&quot; source=“assets/states.xml&quot; /> <mx:ArrayCollection id=&quot;myAC&quot; source=&quot;{myRegion.city}&quot; />
  61. 61. GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features To create a summary data you must first create grouped data: <mx:GroupingCollection id=&quot;myGC&quot; source=&quot;{myAC}&quot;> <mx:Grouping> <mx:GroupingField name=&quot;Region&quot;>
  62. 62. GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features In the <mx:GroupingField> tag, specify the summaries property, which takes instances of the SummaryRow class: <mx:summaries> <mx:SummaryRow summaryPlacement=&quot;group&quot;>
  63. 63. GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features For the SummaryRow class, specify the fields property, which defines the fields on which to carry out the summary operations: <mx:fields> <mx:SummaryField operation=&quot;SUM&quot; dataField=&quot;population&quot; label=&quot;total&quot;/>
  64. 64. GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features These are the type of operations that you can handle using the Summary:
  65. 65. GOAL Cairngen is a one-shot code generation tool for Adobe Cairngorm developed by Eric Feminella (http://www.ericfeminella.com/) Cairngen is built entirely in Ant, and provides a solution for generating Cairngorm classes from within the Flex builder IDE. Cairngen Flex Daily Solutions Boost your productivity with Cairngen
  66. 66. GOAL Apache Ant is a software tool for automating software build processes. Ant uses XML to describe the build process and its dependencies, whereas make has its Makefile format. By default the XML file is named build.xml. Ant is an Apache project. It is open source software, and is released under the Apache Software License. Cairngen Flex Daily Solutions Boost your productivity with Cairngen
  67. 67. GOAL <ul><li>The Cairngen build file contains a default target [main] which will create the typical Cairngorm project structure as follows: </li></ul><ul><ul><li>business </li></ul></ul><ul><ul><li>commands </li></ul></ul><ul><ul><li>control </li></ul></ul><ul><ul><li>events </li></ul></ul><ul><ul><li>model </li></ul></ul><ul><ul><li>view </li></ul></ul><ul><ul><li>vo </li></ul></ul>Cairngen Flex Daily Solutions Boost your productivity with Cairngen
  68. 68. GOAL In addition, the main target will also create your applications ModelLocator, FrontController and Services.mxml and generate them to the appropriate packages. Cairngen Flex Daily Solutions Boost your productivity with Cairngen
  69. 69. GOAL After downloading Cairngen 2.1, extract Cairngen to your Flex project directory, or create a new generic project and point it to the location where you extracted Cairngen 2.x. Cairngen Flex Daily Solutions Boost your productivity with Cairngen
  70. 70. GOAL Flex Inspirational Quotes Agenda Flex Daily Solutions Fight your daily demotivation while coding
  71. 71. GOAL A developer is the product of his thoughts. Inspirational Quotes Flex Daily Solutions Think and Believe Big.
  72. 72. GOAL You’re a better Flex developer than you think you are. Agenda Flex Daily Solutions Good developers are ordinary people that believe in what they do.
  73. 73. GOAL Let interest and enthusiasm guide you. Agenda Flex Daily Solutions Learn to be eager and avid of knowledge. It’s more important than your brainpower.
  74. 74. GOAL Not only knowledge is power. Agenda Flex Daily Solutions Use knowledge in a constructive way. Improve your ability to get information.
  75. 75. GOAL Simplicity. Agenda Flex Daily Solutions Don’t even think that a more complex and better solution than yours exists .
  76. 76. GOAL Never sell yourself short. Agenda Flex Daily Solutions Find your own skills and your talents.
  77. 77. GOAL Be your Flex Entreprenure. Agenda Flex Daily Solutions “ I don’t know the answer to those questions, but I could find a man in five minutes who does “ Henry Ford
  78. 78. we make it RIA Marco Casario CTO – Comtaste http://casario.blogs.com

×