September, 2008

flex — No Comments
22
Sep 08

Flex Veterans

few blogs that new flex developers (like me) should always keep visiting. I being fairly new to flex have learned a gr8 deal from these Flex veteran, reading there blogs always provides me with better solutions and ideas.

Ely Greenfield | Doug Mccune | Ted Patrick | Mrinal Wadhwa | Renaun Erickson | Abdul Quabiz

enjoy reading ;)

flex — No Comments
19
Sep 08

event.bubbles, event.cancelable, and event.currenttarget

Perhaps some of you may not know this, but event-bubbling in Actionscript3.0 is way cool and well worth your attention. So read on.

With event-bubbling you can let one Event subsequently call on every ancestor (containers of containers of etc.) of the DisplayObject that originally dispatched the Event, all the way up to the surface (read: Stage), hence the name ‘bubbling’.
Perhaps noteworthy is that bubbling for an Event instance is disabled by default, and can only be activated by setting the bubbling parameter in the Event constructor.

Although the documentation doesn’t seem to make it all too apparent, event-bubbling is actually the reason why the Event class has a currentTarget property (as well as a target property).
So what is the use of Event.currentTarget? While the target property will always have its value set to the DisplayObject that originally dispatched the Event, the currentTarget property always points to the DisplayObject that the event is currently processing (i.e. bubbling at).

Now, you will probably not always want your Event to bubble all the way up to the Stage of your movie. This is where the cancelable property comes into the picture.
Setting the cancelable property contructor-parameter to true allows you to call thestopPropagation() and stopImmediatePropagation() methods later on. Both methods basically abort the bubbling process.
The difference here is that the latter also aborts execution of other listeners for the same Event-type on the same currentTarget, whereas the former only aborts execution of listeners to subsequent targets.

The following example attempts to visualize the concept of event-bubbling in AS3.

Usage: Click the big button in the middle to dispatch a bubbling Event, and tick the CheckBoxes to have that Event canceled at a specific parent of the Button.

flex — No Comments
16
Sep 08

Event Propogation

There are different kinds of events in the Flex world. An event can be generated from user gesture, return of requests and component lifecycle. Use event is a two step process, (1) You need to write the handler (2) You need to register the handler to the event hook. To register event, there are two different ways:

Inline MXML way:<mx:Button id=”myButton” click=”myhandler(event)”/>

Actionscript way: myButton.addEventListener(MouseEvent.CLICK, myhandler);

The code above does the same job.  However, addEventListener provides more advanced control like event propagation and event priority. Event in Flex can be dispatched implicitly (user clicks on a button, the event is dispatched by the system) and explicitly (you can programmatically trigger an event).

Event propagation is an important topic for Flex programming. So, I will try to talk about what I have known on this topic here. Feel free to correct me if I am wrong. As I know, event propagation has three phases. They are capturing, at target, and bubbling. If you have an Application A contains a VBox B that has a Button C. When an user clicks the Button C, it first goes through “capturing phase”. In this phase, the event propagation through the topmost parent of C (ie. stage) and continue walk down the display object hierarchy until it reaches the original target (ie. C). The path for capturing phase is stage -> root -> A -> B -> C. When the event reaches C, the “at target phase” will be started and it just involves one object (ie. C). After that, the event bubbles up following the reverse path of the capturing phase and walk its way back up to root (C -> B -> A -> root -> stage). This is called “bubbling phase”.

fig02.jpg

As the event makes its way though each phase and each object within those phases, it calls all of the listener functions that were added for that event. This means that clicking on the Button C doesn’t limit the event to C, A and B also receive the event. Actually, they receive the event twice, once in the capturing phase and once in the bubbling phase.

However, by default, listener cannot receive event in capturing phase because the capability is turned off. To enable it, we need to set “true” to the third parameter in “addEventListener”, the “useCapture” parameter. If you don’t do that, listener would just listen to event in the “at target” or “bubbling” phase. However, it is an exclusion setting. Once you set the “useCapture” to true, it will not receive event in other phases. To get around this, you need to use “addEventListener” twice, once with “useCapture” set to false (or omitted) and once with “useCapture” set to true.  On the other hand, any listener along the path can stop the event propagation.

In the Event object, the “target” attributed is the component where the event originated (ie. C in this example) whereas “currentTarget” attribute is the component that event currently reaches. So, this attribute’s value will be changed along the propagation path. Apart from these two properties, Event object also contains properties like type (String), eventPhase (int), bubbles (boolean), and cancelable (boolean).

flex / innovation — 1 Comment
15
Sep 08

Flex Component Lifecycle

The lifecycle of component can be easily understood in few simple steps firstly you create a component holder, then create-children, set-sizes/properties and dispatch events. Following four methods plays a major role in component rendering.

  • createChildren()
  • commitProperties()
  • measure()
  • updateDisplayList()

Here is what I found after doing some studies. The most of the following part is taken from Adobe flex help however what I am trying to do here is to elaborate it more by putting up some comments to each step to make it clearer.

Following steps are demonstrating the Button component life cycle

  • Given if the component is going to be in a container then the parent property of component will be referred to the container(DisplayObjectContainer type)
  • Get the style settings of the component
  • Dispatches the preinitialize event on the component. // The preinitialize event(mx.events.FlexEvent) is triggered when the UIComponent is in a very raw stage and there is no children in existence at that time
  • Calls the component’s createChildren() method. // createChildren is a protected method of UIComponent class which we need to override when we create a subclass of the UIComponent. Also from within an override of the createChildren() method, you call the addChild() method to add each child object. You do not call this method directly. Flex calls the createChildren() method in response to the call to the addChild() method to add the component to its parent.
  • Calls the invalidateProperties(), invalidateSize(), and invalidateDisplayList() methods to trigger later calls to the commitProperties(), measure(), or updateDisplayList() methods during the next render event. //invalidateProperties() marks a component so that its commitProperties() method gets called during a later screen update. invalidateSize () Marks a component so that its measure() method gets called during a later screen update. invalidateDisplayList () Marks a component so that its updateDisplayList() method gets called during a later screen update.

The only exception to this rule is that Flex does not call the measure() method when the user sets the height and width of the component(it is the explicit hight and explicit width that the user can set for any component).

  • Dispatches the initialize event on the component. At this time, all of the component’s children are initialized, but the component has not been sized or processed for layout. You can use this event to perform additional processing of the component before it is laid out.// Initizlize event gets dispatched when the component has finished its construction and has all initialization properties set. After the initialization phase, properties are processed, the component is measured, laid out, and drawn. After which the creationComplete event is dispatched.
  • Dispatches the childAdd event on the parent container.The childAdd event is dispatched when the addChild() or addChildAt() method is called. At the time when this event is sent, the child object has been initialized, but its width and height have not yet been calculated, and the child has not been drawn on the screen. If you want to be notified when the child has been fully initialized and rendered, then register as a listener for the child’s creationComplete event.
  • Dispatches the initialize event on the parent container.Dispatched when the component has finished its construction and has all initialization properties set. After the initialization phase, properties are processed, the component is measured, laid out, and drawn, after which the creationComplete event is dispatched.
  • During the next render event, Flex performs the following actions:
    • Calls the component’s commitProperties() method.//commitProperties() processes the properties set on the component. You do not call this method directly. Flex calls the commitProperties() method when you use the addChild() method to add a component to a container, or when you call the invalidateProperties() method of the component. Calls to the commitProperties() method occur before calls to the measure() method. This lets you set property values that might be used by the measure() method.
    • Calls the component’s measure() method.// Measure() calculates the default size, and optionally the default minimum size, of the component. This is an advanced method that you might override when creating a subclass of UIComponent.
      The default implementation of measure() sets measuredWidth, measuredHeight, measuredMinWidth, and measuredMinHeight to 0.
    • Calls the component’s (Adobe help mention this method is in UIComponent where as it is in container class) container’s layoutChrome() method.The Container class, and some subclasses of the Container class, use the layoutChrome() method to define the border area around the container.
    • Calls the component’s updateDisplayList() method. //updateDisplayList() method sizes and positions the children of your component based on all previous property and style settings, and draws any skins or graphic elements that the component uses. The parent container for the component determines the size of the component itself.
    • Dispatches the updateComplete event on the component.
      Dispatched when an object has had its commitProperties(), measure(), and updateDisplayList() methods called (if needed).
      This is the last opportunity to alter the component before it is displayed. All properties have been committed and the component has been measured and layed out.
  • Flex dispatches additional render events if the commitProperties(), measure(), or updateDisplayList() methods call the invalidateProperties(), invalidateSize(), or invalidateDisplayList() methods.
  • After the last render event occurs, Flex performs the following actions:
    • Makes the component visible by setting the visible property to true.
    • Dispatches the creationComplete event on the component. The component is sized and processed for layout. This event is only dispatched once when the component is created.
    • Dispatches the updateComplete event on the component. Flex dispatches additional updateComplete events whenever the layout, position, size, or other visual characteristic of the component changes and the component is updated for display. Continue reading →
flex — No Comments
9
Sep 08

uploads file via http/https

I heard that quite a number of people have issues when it comes to uploading file-content from a Flex application to a server. This is especially true if the upload happens as part of a “session”, meaning a user is authenticated and each HTTP request carries a sessionid back to the server. That sessionid is usually transported in form of a cookie.

So why do things break when trying to do uploads from Flex, especially when using Firefox? The explanation is pretty simple: when you select a file for upload (using

1
FileReference.browse()

and

1
FileReference.upload()

– see here for a discussion about “Working with file upload and download”) and then send that selected file to the server, Firefox uses two different processes. The first one is the one that hosts your Flex (Flash) application and communicates with the server on one channel. The second one is the actual file-upload process that pipes multipart-mime data to the server. And, unfortunately, those two processes do not share cookies. So any sessionid-cookie that was established in the first channel is not being transported to the server in the second channel. This means that the server upload code cannot associate the posted data with an active session and rejects the data, thus failing the upload.

To fix this we need to make sure that we transport all the necessary information with the upload URL allowing the server to associate the uploaded data with an active session.

It has been suggested elsewhere, like here or here to just tackle on the sessionid to the URLs used for the upload. That will work, but moves logic from the server into the client and I don’t like that. What if the sessionid-parameter gets changed on the server? What if a different server application is receiving the upload-data? In both cases you will need to make modifications to the client as well. You have an unnecessary dependency between client and server.

For a recent project we used a different approach: our flex application communicates via remoting calls with the server (we use Flex Data Services in this case). When a user is about to upload a file to the server, the Flex-application will issue a call

1
getUserUploadURL(...)

. The receiving java-servlet will construct a one-time usable URL that encodes the users sessionid and a secret into the URL. The flex-code will in turn use that URL when the

1
FileReference.upload()

is executed. Once the server has received the data-stream for the current upload, the same URL cannot be used for subsequent uploads, instead the flex code has to ask for another url via

1
getUserUploadURL(...)

.

And on the server side the upload-code makes sure that no cookies are considered, but only the contents of the URL are used to figure out which session the uploaded data belongs to.

flex — 1 Comment
8
Sep 08

Inline Itemrenderer

I stumbled upon an unknown property as I was trying to use an Inline Item Renderer on my DataGrid Columns. If you use the <mx:component> tag with your inline item renderer and try to have your component call an event in your main application you will get a nasty “Access to undefined method ……”. This is because your Inline Item Renderer is unaware of what exists in your main application. But you can use the outerDocument property to access event handlers in you main application.

Example:
<mx:itemRenderer>
<mx:Component>
<mx:VBox >
<mx:Button label=”Remove” click=”outerDocument.remove()“/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>

flex / innovation — 1 Comment
5
Sep 08

Visualization techniques for networking data

Introduction

Humans have a natural ability to correlate patterns from multiple sources to become aware of information. Most current human-computer interfaces however are limited to visual and more exactly text-based interaction. While it is true that current computer systems use a large number of symbolic elements and metaphors in the Graphical User Interface (like icons, windows, drag and drop, and so on), the primary mean of information exchange is still the written (or in the case of computers typed) word.

This approach (while having the advantage of simplicity) is very limiting from an information-bandwidth (the rate at which information can be exchanged between the user and the computer) point of view. Because typing / reading has an upper limit (although estimate vary from 40 to 250 words per minute for typing and between 250 and 700 words per minute for reading, it is clear that such limits do exists and that most people are not able to cross certain barriers, no matter the amount of training), it is logical to conclude that we must look to alternative ways to consume more information quicker. From a technical point of view the two methods which are the easiest to implement with current hardware are:

  • alternative (non-textual) representation of (aggregated) data, making use of our ability to observe trends and patterns

  • auditory feedback for certain events

Both of these methods can easily be implemented with almost all consumer-grade computing equipment. The fact that both of these are “output” (from the computer point of view) methods can be justified that the rate at which outputs is produced (and needs to be consumed) is much larger than the rate of input we need to provide (two of the reasons being that a great deal of output is produced by automated systems and also because in todays interconnected world we consume the sum of many outputs). In the following pages I will focus on the first method and more specifically the way in which it applies to networking data.

Each part (after the introductory part about data visualization) will present one way to visualize data and discuss the applicability of the given method in the context of computer networking.

Continue reading →