2007 CU221

Presenter:

Rob Gonda

Overview

The presentation was intended to be a hands-on workshop that would give the attendee an overview of Flex features and hopefully leave them with the ability to create a Flex application. The workshop was organized into a series of projects of increasing complexity each with a stub "run through" mxml file that we were supposed to edit during the course of the workshop with the intent of creating a functioning example.

The reality was that after we spent an hour or so getting all the attendees properly configured and able to run a Flex application, and after several attempts at trying to get everyone in the class to modify the stub files, Rob decided to skip the hands on aspect of the course and we spent the bulk of the time looking at examples of code and then running them. The switching back and forth between Flex Builder and Browser was disconcerting, and even worse with the limited resolution of the overhead projector.

Setting up Flex

In my experience, Flex installed without an error, but I could not run or debug code. When I initially set this up, I didn't know enough about how Flex Builder was supposed to work to realize this problem. I initially thought you had to copy the contents of the bin folder to your server and execute there.

The solution to that problem was to create another user with administrator privileges and to install and run Flex as that user. As usual, YMMV, but it appears that you have to be a REAL administrator to install and run Flex Builder.

The Code

The samples for Rob‘s presentation are located here Flex_Builder_2.zip. Note: The file upload doesn't seem to be working, or it doesn't like zips so this link is broken till I figure this out.

Note: There are usually two version of each like-named application; one is a stub that we were supposed to type the lesson into, and the other with a "final" suffix, is the finished lesson. If you want to see what is going on just look at the final version as the other is only completed in the first few lessons (this was before the hands-on nature of the presentation as abandoned due to time constraints.

There were 17 examples plus the requisite "hello world" example in the presentation:

01-Basic

This was a simple form that showed how the click event of a button is handled. It also demonstrated how to debug this call and display its value in the debug perspective.

02-Basics II

This project shows how to create a component and include it in your application.

03-The Event Model

This project shows how to create and use events

04-Layout and Controls

Just like the title says, this describes organizing content on the page via Vertical and Horizontal boxes (VBox and HBox) which is essentially the row and column metaphor from the much-maligned (around CFUnited anyway) table layout. We also covered accordion and "toggle button" controls that simplify these presentation methods.

05-XML

Here we learned how to use an XML data source to populate a grid, which BTW, has all the features of the "best table sort ever".

06-Using View States

This one shows how to change the layout of a page dynamically based on an event. In the example, we used a button click and roll-over events to change the layout. This has the ability to hide portions of a complex form without switch to a new form and reloading the page. You can do the same thing with AJAX, but this seems a lot simpler.

07-Grids

Fun with Grids and XML data sources! Loaded via XML, editable cells, loading images, master-detail lots of examples some even work as advertised. But seriously folks I just had trouble with the editable cells example, other than that it is straight forward.

08-Dispatching Events

This example was supposed to show how to create your own custom event handler to extend an object. Unfortunately I never got it to work as the "final" example was blank. Rob promised to email the fixed code so I will add that to the zip when I get it or when I get the chance to figure out what is going wrong.

09-Repeaters

This shows how to use a repeater tag to iterate over a data object and create controls dynamically.

10-4EX

Now this one is really useful; a shopping cart app with 3 column layout, tree display, detail and add to shopping cart features.

11-Web Services

A simple app that shows how to use, you guessed it, web services!

14-17 MVC via Cairngorm

These examples all are based on the Cairngorn framework, which allows you to use a Model -View - Controlled (MVC) design for your application. This was the most advanced portion of the presentation which took up the afternoon portion of the workshop. Here Flex actually takes a back seat to the Cairngorm Framework which lets you abstract your business objects through services, create custom event handlers, use delegates and value objects, all of which are better described in the [http://cairngormdocs.org/ Cairgorm documentation], so I‘m not going to even try here. The bottom line seems to be that this is the "supreme" framework for serious Flex development. (I‘m not making that part up, Rob really said that).

Cairngorm Features

• Really a MicroArchitecture not a framework.
• All classes are singletons, meaning there is only one instance of a class allowed .and if you try to create another, you will raise an error.
• Value Objects – another name for a bean in the java world.
• Command – a distinct object with a single purposes. When a Command needs to talk to a business delegate it should implement a "Responder"
• Delegates – essentially an interface for a business object.
• Service Locator – Abstracts a Service so it can be implemented via the protocol de jour, be it Coldfusion RPC, web service or whatever.

Debugging Flex

You can set break points in the Flex IDE, just like in Java code. When you start the app from the IDE you just select the Debug button rather than thr run button. To see the Debug unique features, you need to switch to the Debug Perspective, which can be configured to switch on debug start (at least that‘s the way java works; the Flex plugin trys to hide some of the features of configuring Debug and Run features. This is better in some ways, since you don‘t need to know as much about run and debug configurations, but I think you loose some of the power of Eclipse.

Features

Debugging lets you create breakpoints, examine variable values and look at call stacks, just as any good debugger, if you are familiar with Debugging Java you should be right at home. Of course this is all only Client Side debugging; to debug the server you need to use the ColdFusion debugger which I hear has been resurrected in MX8, but I haven't used it yet.

Flex Components

Flex allows you to extend your application with Components (CFC‘s for the Coldfusion faithful), these are pure ActionScript 3.0 files with no MXML constraints, which is nice since this buys you built in constructors, inheritance, polymorphism and all the requisite Object Oriented goodness. IMHO, this is one of the best features of Flex, which also allows the use of Frameworks, like Cairngorm which I will talk about later.

There is one caveat to Components, they cannot be standalone applications in the Flex sense of applications.

Array Collections

A result from a ActionScript call can use the Array collection object which has extended properties to allow sorting, which can be handy on the client side.

Http Calls

By default return either a "result" or a "fault" event, so the error handling is simplified; all you need to do is implement both of these methods and the appropriate one will be invoked based on the return status of the call.

Tips and Tricks

Flex History

Flex handles history by using a javascript library that manipulates IFrames in the flex presentation layer, actually it looks like all flex is presented via iFrames.

MXML Declaration

When you are creating an MXML file, you need to make sure that the very first line in the file is the MXML declaration with no preceding white space.

Action Script in MXML

All action script code in the MXML file has to be in a CDATA tag so that you don‘t have to escape all the "<" and ">" and other xml reserved characters.

Deploying Flex

To deploy flex, all you need to do is to copy the contents of the output folder to the web server, this is usually named "Bin" but it is a property of the project so it could be different.

Alerts

To set an alert in Flex use the mx:controls.alert.show("My Debug Statement").

Search for folder

To tell flex to look for a file in a folder somewhere beneath the current root, you can use a ".." syntax, this lets you change the specific path – depth without breaking your code.

Utilities

Service Capture

Used to watch the results of a Web Service call. [http://kevinlangdon.com/serviceCapture/ http://kevinlangdon.com/serviceCapture/]