Adobe Flex 2.0 training day 3

FLEX 2.0Today we really focussed on data to be used in Flex. As a very important (and most difficult) part in Flex 2.0 you can exchange data between components using custom events. When you use bindings to get data from components then you have a problem because the code is less flexable. So we better make loosely coupled components. So a component do not know anything about the outside world and send information to the object and from the object to the component. This is what we call using components as black boxes. Imagine an application that depends on the architecture of the component, so when the component changes, then your code will break ! Better would be that  component should throw something  (eg. button tells that it has been clicked). Then the component is really independent of the outside world (= black box). To make this all work we use custom events.  The steps to create a custom event are:

  • declare the event
  • create event object
  • dispatch event
  • eventHandler to handle the event

When you declare an event you just make a new Actionscript class the inherit from the standard Event class… so sounds easy 🙂 You must subclass the Event class because in Flex 2.0 (AS 3) the Event class is not dynamically anymore. You can also add then properties to define in the subclass. Your custom constructor should do at least two things:

  • should call the super() method (so it initialises his parents)
  • populate the properties of the class

The constructor also always have two parameters:

  • a name
  • a associated class

Next thing was to talk a little bit about event bubbling. Imagine you have an application that eg do several things when you click a button, at that moment event bubbling will be interesting to use because everything will happen automatically when you click that one specific button. When the event is dispatched three things happen: the three phases as we can call it:

  • Phase 1 (you have to explicitly set this face) : The flash player searches for listeners of that event. It searches the whole application starting from the application MXML tag.
  • Phase 2 (default is this the start point and is face 1 not active) : Only the event handler that is defined in the event is called. Next Phase 3 starts.
  • Phase 3: Start at the  object and go up the tree to search other event handlers and executes them.

Summarised it is all  about the question if you want some things to happen before the event handler is called or after it is called. If you want it before then you use phase 1 (you have to set it) if not the other event handlers will be called after the event handler on the object is called.(it starts with phase 2 and then bubbles up the tree).

After that difficult “custom events” unit we started with the use of dynamic data together with Flex. Eg retrieving XML data with the HTTPService class. Actually in Flex there are 4 ways to talk to the server:

  • HTTP Calls (HTTPService)
  • Webservices
  • Remote objects (comparable with remoting in Flash 8)
  • Flex data services

When you use HTTP calls you have to explicit use the send method to start getting the data. But you know the Flash player uses a asynchronous model so when you create a HTTPService, the next line in your code you are not sure the data is already inside the application. It does not stop to wait for the data to be comming back. So also here we can better use events to know exactly when data is received at runtime. When you use events you always get the result event (when everything went OK) and a fault event (if something went wrong) that is broadcasted automatically.

You can offcourse also loop through the (received) data by using a Repeater. The code between the Repeater tags is executed several times then. You can use the zero based currentIndex and the currentItem property to do something with the incomming data. The currentItem property is actually a pointer to the item or object that is used at that moment. What I just told is when you use binding, without binding using Actionscript you can use the getRepeaterItem method.

When you have the data in your application you normally also wants to show the data. One way is to use the Datagrid control also one remarquable thing to know is that the order of the colums is not predictable. Maybe the Flex programming team has used some kind of random() function when they implemented this control 🙂 . An other very interesing use of the Datagrid control is to use it as your debug tool because it is very easy to use and wrap all incomming data in this control.

Something really cool is the item renderer and item editor. The renderer is used to display data and the editor is used to edit data as you maybe were already thinking. With this technique you can eg make a dropdown box that uses your own custom component. So these are things that makes Flex 2.0 really really interesting !

The last thing to do today was to fullfill the last lab for this first part of the course. And then we make it to have seen 412 pages of course material in only three days 🙂

Tomorrow we start with the second part of this one week course focussing more on the Flex data services and charting components so tomorrow more information on these topics.

Advertisements

2 responses to “Adobe Flex 2.0 training day 3

  1. deflex 9 November , 2006 at 2:17 am

    What is the chance that you might make the “412 pages” available to your blog readers?

  2. Koen 9 November , 2006 at 6:39 am

    The chance will be 0.0 % because I really respect the teachers who wrote the course material and put a lot of effort in it. But the next days, months, … I will develop some sample applications myself and those applications I will put online.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s