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

1. Flex Solutions for your daily development Marco Casario CTO – Comtaste http://casario.blogs.com

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. 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. 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. 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. 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. 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. 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. 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. 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.

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. 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. 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. 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. 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. 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. GOAL Monitore the network traffic could be crucial in many contexts. TraceTarget Flex Daily Solutions Monitoring the network traffic

22. GOAL This class provides a logger target that uses the trace() method to output log messages Flex Daily Solutions The TraceTarget class TraceTarget

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. 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

27. GOAL Flex Daily Solutions Debug using the Logging APIs Logging APIs

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 driveocuments and Settingsser_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. 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. 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. 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. 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. GOAL Adobe AIR Flex Daily Solutions Flex on the desktop with AIR

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.

37. GOAL Optimizing Flex Builder Performance Flex Daily Solutions Check for the version of the JVM : FlexBuilder folderrein>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

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. 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. 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. 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

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. 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

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. 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

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

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. 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. GOAL Flex Inspirational Quotes Agenda Flex Daily Solutions Fight your daily demotivation while coding

71. GOAL A developer is the product of his thoughts. Inspirational Quotes Flex Daily Solutions Think and Believe Big.

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. 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. GOAL Not only knowledge is power. Agenda Flex Daily Solutions Use knowledge in a constructive way. Improve your ability to get information.

75. GOAL Simplicity. Agenda Flex Daily Solutions Don’t even think that a more complex and better solution than yours exists .

76. GOAL Never sell yourself short. Agenda Flex Daily Solutions Find your own skills and your talents.

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. we make it RIA Marco Casario CTO – Comtaste http://casario.blogs.com