Flex Daily Solutions @ FITC 2008

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

Who am I Flex Daily Solutions

CTO of Comtaste , RIA Development, Consulting and Training firm

www.comtaste.com

My Books

Flex Solutions: Essential Techniques for Flex 2 and Flex 3 Developers

Advanced AIR Applications

My Blog and my contacts

http://casario.blogs.com

http://blog.comtaste.com

Agenda

I’ll give some development solutions you could often face during your daily Flex development

I’ll talk about :

How to architecture Flex application

Use the open source library

How to optimize the use of RPC class with the AsynchToken

Trace Network traffic

Debug applications using the Logging APIs

Flex Builder IDE Optimizations

How to overcome the cross domain policy

Using the Proxy Service of BlazeDS

Focus on Flex 3 new features: the new Collection classes and the AdvancedDataGrid

Flex Inspirational Quotes

We will move very quickly  A lot of things to show and share !

Flex Daily Solutions

GOAL Architecture your code Design Patterns Flex Daily Solutions

Design patterns are a general reusable solutions to a commonly occurring problem in software design.

DP can speed up the development process by providing tested, proven development paradigms.

DP improves code readability for and between developers

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.

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.

GOAL Elements of a View Helper Design Patterns Flex Daily Solutions <h:UploadHelper id="uploadHelper" /> package com.fitc { import flash.events.Event; import flash.events.IOErrorEvent; ........ public class UploadHelper {} }

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.

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.

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.

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.

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("changeBlog", myEventHandler); } public function myEventHandler(event:FC_Event):void { mx.controls.Alert.show("Event dispatched"); }

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.

GOAL Elements of a Front Controller Design Patterns Flex Daily Solutions

After creating a subclass of the Event class we have to :

call the super() method of the Event class to call the constructor of the superclass and pass the event type to it.

override the clone() method to return a new copy of the event object by setting the type property and any new properties.

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); }

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="changeBlog", type="com.comtaste.fitc.FC_Event")] </mx:Metadata>

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="fc_cb" x="161" y="10" changeBlog="eventFired(event)" /> private function changeHandler():void { var eventObj:FC_Event = new FC_Event(myCombo.value as String,"changeBlog"); dispatchEvent(eventObj); }

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.

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.

GOAL The ASynchToken class Flex RPC Flex Daily Solutions var myHS:HTTPService = new HTTPService(); myHS .url = “http://www.comtaste.com/page.jsp"; 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); } );

GOAL Monitore the network traffic could be crucial in many contexts. TraceTarget Flex Daily Solutions Monitoring the network traffic

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

GOAL

The Logging API of Flex SDK allows you to write and send messages to an output created

by the developer.

They consists of three principal components:

the Logger object,

the log target,

and the destination.

Flex Daily Solutions Debug using the Logging APIs TraceTarget

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

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("myMXMLfileOrClass").info("My message"); Flex Daily Solutions Debug using the Logging APIs Logging APIs

GOAL

To filter a message with the Log class, a category and a level properties are used.

A category is used to filter messages sent from a logger. It's a simple String.

A level provides filtering options for the message defining the constants on the LogEventLevel class.

Flex Daily Solutions Debug using the Logging APIs Logging APIs

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

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.

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.

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"));.

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);

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 Adobe AIR is ;) Developing an AIR desktop application is very easy if you are a Flex developers.

GOAL Optimizing Flex Builder Performance IDE Optimizations Flex Daily Solutions

Flex Builder is an environments that requires a lot of system memory to work at its best

Simple Rules to optimize the IDE :

Limit the number of projects open at the same time on the workspace

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.

GOAL Optimizing Flex Builder Performance Flex Daily Solutions

To access these settings, go the Preferences dialog box of the program by selecting Window > Preferences > General > Editors

When selected, the Close editors automatically check box enables you to choose from the following options:

Number of opened editors before closing : Defines the maximum number of files that can be opened at the same time in the Editor.

When all editors are dirty or pinned : Enables you to choose to open a new editor or prompt to save and reuse.

IDE Optimizations

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

FlexBuilder.ini and eclipse.ini files

Increase the quantity of RAM Flex Builder can use by updating settings in the ini file :

Xms: Specifies the minimum amount of RAM used. (default value 128MB)

Xmx: Specifies the maximum amount of RAM used. (default value is 512MB)

Vmargs: is used to customize the operation of the JVM to run Eclipse.

IDE Optimizations

The more memory assigned to the JVM, the better the IDE performance will be.

IDE Optimizations Xms: 512MB Xmx: 1024MB -vmargs -Xms1024m -Xmx1024m -XX:PermSize=512m -XX:MaxPermSize=512m

GOAL Shortcuts Flex Daily Solutions Flex Builder Keyboard Shortcut

This is a list of my favourite keyboard shortcuts to move faster while working in Flex Builder :

Ctrl + Shift + L : Key Assist

Ctrl + Shift + T : Open type

Ctrl + O : Quick Outliner

CTRL + SHIFT + D : Add ASDoc Comment

Ctrl + Shift + P : Jump to matching brace

GOAL Shortcuts Flex Daily Solutions Flex Builder Keyboard Shortcut

Ctrl + Shift + O : Organize imports

Alt+Up and ALT + Down Arrow: Move line up or down

Ctrl+ Alt + Down: Repeat current line

Ctrl + D: Delete line

If you have any other chilly shortcuts RAISE your hand now ;)

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

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="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" import="java.io.BufferedReader, java.io.InputStreamReader, java.io.IOException, java.io.InputStream, java.net.MalformedURLException, java.net.URL, java.net.URLConnection" %> <%! private String contentURL; public static final String CONTENT_URL_NAME = "contentURL"; %> <% // get the url through the request: ............. Cross domain

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("http://www.[yourDomain].com"); loader.load(request); } private function loadProxyService(event:SecurityErrorEvent):void {} Cross domain

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

GOAL Flex Daily Solutions Overcoming the cross domain policy

High performance data transfer for more responsive applications

Real server push over standard HTTP

Full pub/sub messaging that extends existing messaging infrastructure

Publication of the Action Message Format (AMF) binary data protocol specification

Cross domain

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

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"> <properties> <wsdl>http://www.server.com/mycfc.cfc?wsdl</wsdl> <soap>*</soap> </properties> <adapter ref="soap-proxy"/> </destination> Cross domain

GOAL Flex Daily Solutions Overcoming the cross domain policy

<wsdl> : specifies the WSDL URL of a web service

<soap> : specifies the web service endpoint URLs that can be proxied. The asterisk indicates that any endpoint URL is allowed.

<adapter> : references an adapter called soap-proxy, which is is designed to proxy web services

Note that there is a default channel called my-amf configured in the proxy-config.xml file. BlazeDS uses "channels" 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).

Cross domain

GOAL Cross domain Flex Daily Solutions Overcoming the cross domain policy

In your Flex application you can now call the web service using the WebService class :

<mx:WebService id="srv" destination=“myWS"

useProxy="true" showBusyCursor="true" result="onResult(event)"/>

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.

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

GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features

Flex 3 introduces many brand new cool features. Some of these are :

Zoom and Magnification tools

CSS in Design view

Code refactoring

The AdvancedDataGrid control

Multiple SDK support

Deep linking

Web Service Introspection

My favourite ones are :

The AdvancedDataGrid control

The new Collection classes for grouping and summarize data

I’ll show you an example of both

The new AdvancedDataGrid component, which

extends and enriches the functions of the DataGrid by adding new and very useful features, such as:

Multicolumn sorting interface

Cell-level formatting functions

Tree view (hierarchical data and grouping data)

Cell selection

Custom rows

Column grouping

SummaryCollection

PrintAdvancedDataGrid

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("region")];

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);

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;

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.

GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features Consider an ArrayCollection created from a Model : <mx:Model id="myRegion" source=“assets/states.xml" /> <mx:ArrayCollection id="myAC" source="{myRegion.city}" />

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="myGC" source="{myAC}"> <mx:Grouping> <mx:GroupingField name="Region">

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="group">

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="SUM" dataField="population" label="total"/>

GOAL Flex 3 Flex Daily Solutions My favourite Flex 3 features These are the type of operations that you can handle using the Summary:

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

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

GOAL

The Cairngen build file contains a default target [main] which will create the typical Cairngorm project structure as follows:

business

commands

control

events

model

view

vo

Cairngen Flex Daily Solutions Boost your productivity with Cairngen

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

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

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 people that believe in what they do.

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.

GOAL Not only knowledge is power. Agenda Flex Daily Solutions Use knowledge in a constructive way. Improve your ability to get information.

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 find a man in five minutes who does “ Henry Ford

we make it RIA Marco Casario CTO – Comtaste http://casario.blogs.com