Learning Flex – Lesson 5, Handling Events

Flex Events come in two types, user events (such as clicking a mouse or pressing a key) and system events (such as a component changing visibility or finishing instantiation).

Event handlers can be specified within a component tag in MXML for instance, a click event for a button could be handled like this –

<mx:Button id="myButton" click="myButton.label='clicked!'"/>

Flex expects an ActionScript  expression in this case and the single quotes are used to define the string within the overall handler expression.

Other than for trivial tasks, event handlers are normally written as ActionScript functions that may be defined externally or within a Script block. These are then called from the event handler spec such as click="clickHandler()".

Writing ActionScript code within a Script tag requires CDATA escaping as the ActionScript code is not valid XML. This is achieved by wrapping it with <![CDATA[ and ]]> so it is ignored by the XML parser.

Passing parameters to the handler is achieved by placing values between the parentheses. In the handler function, the passed value is given a type so the compiler knows what to expect. An example would be:

private function clickHandler(display:String):void
myButton.label = display;
<mx:Button id="myButton" click="clickHandler('clicked!')"/>

Creation Complete Event

An example of a system event is CreationComplete which is fired when a component has been initialized and placed in the application. The component will be visible at this time unless it’s visible property is false.

The CreationComplete event of a container is fired when it’s children have all broadcast their CreationComplete events and this process continues up the chain all the way to the final Application object.

This means that if we have components within a container, the order of event dispatch would be the components first, then the container, then the application.

Event Objects

Flex creates an event object each time an event is dispatched. This object contains information about the event that occurred. This object is often passed to the event handler so it may access properties from it.

The base event class is used as the common denominator for more specific event classes. This means that all event types have some common properties including type – the type of event that was fired and target which is a reference to the component object that caused the event.


Rocky Mountain Adobe Camp – Denver

As a member of the Rocky Mountain Adobe User Group, I got an email on this a while ago but I was waiting to see what the various tracks were going to be before committing.

Well I finally got round to checking and it looks like the Flash track is going to have lots of interesting Flex stuff

If you sign up before May 15th, it’s only $40 – that and a vacation day seems a pretty cheap way to get some training and a chance to mix with Flex folk so I’m going. If you’re interested, their homepage is here.

Learing Flex – Lesson 4, Control Basics

Text Control

There are a number of text controls for Flex;

  • Label – single line, non user editable.
  • TextInput – single line, can be edited.
  • TextArea – can  display multiple lines of text, may be editable, scrollbars if text exceeds the screen space available.

All text controls support HTML 1.0 and a variety of fonts and styles.

Image Control

The Image control can load JPG, SVG, GIF, SWF and PNG files. GIF and PNG files may use an Alpha level to produce degrees of transparency.

The @Embed directive instructs the compiler to add the image to the generated swf – this is useful for Air applications that may be used offline but will increase the size of the generated file. Images will be automatically loaded by default but setting the autoLoad property to false means that the image will not appear until the load() method is called on the image.

Other properties allow you to specify if the image can be scaled (scaleContent) and if the aspect ratio can be changed (maintainAspectRatio).

Events that are often used with images include mouseOver and mouse Out – combining these with state changes allows you to  change the behaviour of the app when the user moves the mouse cursor over the image (such as put up more detail or perhaps a larger image).

Form Container

A Form Container allows you to mark fields as required or optional, handle error messages and perform data validation.

A Form may contain one or more FormHeading tags to provide title(s) and FormItem tags which contain a label property for each item on the form.

Form children are arranged in a vertical format and left aligned by default.

Focus Management

Forms (and all other top level containers) have a built in focus manager.  This has a getFocus() method that can be called to determine what component currently has focus and a setFocus() method to force the focus to a particular component.

Radio Buttons

Radio Buttons must reference a RadioButtonGroup so that the application knows they are grouped together and can enforce only one being selected at a time. The RadioButton does this by specifying the id of the group for its groupName property.

The data value property is used to determine if the button has been selected and an initial value can be set using the selected property.

Data Binding and Models

Data binding allows you to map properties of controls to dynamic data structures such that when that data changes, the change is reflected in the control.

The Model tag allows you to build client side data models. It converts XML structures into a format that Flex can use. By assigning an id to a model, you can use dot notation to address items within the structure.

Here’s an example:

<mx:Model id="pet">

pet.name would give you fluffy. In this case you could consider “animal” as a class and pet as an object of that class.

To bind a control property to a data element, you use {} around the element name. An example would be <mx:Label text="{pet.name}"/>

Data binding really comes into play when the application is receiving information from an external source.

Learning Flex – Lesson 3, Part II

View States

note – this all changes for Flex 4 (Gumbo) containers.

States are defined within a States tag. Each State has a name specified. Within the State tag, you can change object properties, add or remove child objects.

To set a property, use SetProperty target=”{id of object}” name=”name of property” value=”new prop value“.

To add a child, the relativeTo property specifies the parent container, the positon attribute (before,after,firstChild,lastChild – default) specifies where the child will be placed. The child object can then be defined before the closing AddChild tag.

To remove a child, the target attribute is used to specify the id of the child to be removed.

Objects are only added or removed while the application is in that state, changing state to something else will switch back to the parent state as a baseline.

To change the state in the application, set this.currentState=”state name” (this references the application object and currentState is an attribute for it). Setting the current state to empty string (“”) sets the application to the initial or default state.

Learning Flex – Lesson 3, Laying out the Interface

I’m working my way through the recommended text Adobe Flex3 Training From the Source and these posts are going to be my way of writing some notes about the material covered in the lessons. Hopefully, that’ll make it stick a little  more and I’ll also have a handy reference when I’m done.

So – Lesson 3 is about Containers and States.

There are 3 main types of container – Absolute, Relative and what I’ll call Configurable.

Absolute = specify position (either x,y or via constraints)

Relative = based on the container type (Horez or Vert)

Configurable = uses a parameter to define whether it behaves like an Absolute or Relative container

Container Types

  • Application – specify layout attribute (absolute – default,horizontal,vertical)
  • Canvas – absolute position, children drawn at specified position (0,0) is top left and default position
  • ControlBar – used to draw a toolbar at the bottom of  a Panel or TitleWindow.  It has a direction attribute (horizontal – default, vertical).
  • ApplicationControlBar – used to hold components that provide access to elements throughout the application. If dock is set to true, it remains at the top of the window and does not scroll with the app.
  • Panel – subclass of Box with a layout property. Absolute is default
  • VBox – Vertical layout box
  • HBox – Horizontal layout box
  • Tile – lays out children in horizontal rows or vertical columns determined by the direction property
  • TitleWindow – optimized for use as a popup window. It has a title bar, border and content area, can be specified to have a close button and defined as modal (in which case it takes all keyboard and mouse input while it’s open.

Layout Constraints

pure x,y positioning is rarely a good idea when using absolute layouts as it fails to allow the container to take account of re-sizing and the addition/removal of children. There are two types of layout constraints that can help – edge positioning and enhanced constraints.

Edge Positioning

Flex allows constraints from top, verticalCenter, bottom, left, horizontalCenter or right. For example, if you wanted an object to be 10 pixels in from the right and 5 from the bottom, you would use the parameters right=”10″ bottom=”5″.

Enhanced Constraints

These divide a container into rows and columns that can then be used with offsets to position components.  A constantColumns tag surrounds constantColumn definitions, each specifying an id and width with a similar approach for rows. Components can then be specified using constraints such as left=”col1:5″

Container Size

There are three options for specifying sizes – percent, fixed (in pixels) or content (the default – space is allocated depending on the size of the child objects in that space.

You can also specify maximum and minimum sizes using minHeight, minWidth and the max equivalents.

Container sizes can add up to more than 100% – the container allocates the space proportionately after any fixed size components are taken care of.

A Spacer component can be used in relative components to ensure desired separation. For example if you needed one button on the left of a horizontal container, the other on the far right, you could put a spacer with width=”100%” between them to achieve this.

Spring Application Picture

Well I managed to get the database to talk to me again so here’s the picture of the app I promised –

Seam app

One more thing…

One thing I omitted from my previous post is I developed this app when I still had my Flex Builder trial. This is important because when you’re using remote objects in Flex Builder, you specify the server you’re going to connect to as part of your project setup and this gets compiled into the swf that’s created.

Obviously that’s not going to help you if you’re not using Flex Builder (and having your server pre-defined at compile time is a bit of an issue if you’re a “real” developer working with dev, test & prod environments).

I was thinking about digging through the documentation to figure something out but Christophe Coenraets came to the rescue with a post on externalizing your service configuration that has it covered.