Flex’s Local Shared Objects provide a convenient way to persist data on the client, in a similar way that cookies are used in web applications. Shared Objects are much more powerful however, allowing the persisting of structured data, with a default client set limit of 100kB of storage.

Typed objects can be added to the store by setting properties of the Shared Object’s data property to the value of the typed object (Example). However by default, when the object is read from the store, it will lose its type information and cannot be cast to type either. To make the object retain its class info, you must register the class before persisting. This is done using the registerClassAlias function. This is called with the full class name (package.Class) and the class itself.

Each class and sub-classed of the object must be registed this way, if you want to persist complex objects such as Value Objects and Presentation Objects (used with a presentation model). The easiest way to achieve this is to add the [RemoteClass] meta data to each class definition.

Many True Type Fonts (TTF) are made up of multiple .TTF files. One file will be for the normal font, while another file is for the Bold version of the Font. For example, the Verdana font that comes with Windows XP consists of four separate files.

The following code shows how to include multiple TTF files into a Flex CSS file.

1. @font-face
2. {
3. src:url("font/verdana.TTF");
4. font-family: EmbeddedVerdana;
5. font-weight: normal;
6. font-style: normal;
7. }
8.  
9. @font-face
10. {
11. src:url("font/verdanab.TTF");
12. font-family: EmbeddedVerdana;
13. font-weight: bold;
14. font-style: normal;
15. }
16.  
17. @font-face
18. {
19. src:url("font/verdanai.TTF");
20. font-family: EmbeddedVerdana;
21. font-weight: normal;
22. font-style: italic;
23. }
24.  
25. @font-face
26. {
27. src:url("font/verdanaz.TTF");
28. font-family: EmbeddedVerdana;
29. font-weight: bold;
30. font-style: italic;
31. }
32.  
33. Application
34. {
35. font-family: EmbeddedVerdana;
36. }
37. Download this code: embed-ttf-font.css

The Flex docs tell you that in order to use Fade effects with Text controls, you have to embed a True Type Font to use in the Flex application. The default Fonts available within Flex (Aerial, Verdana etc) will not fade.

This also applies to rotating Flex controls, which is not mentioned in the docs - as far as I can see.

I attended this years Scotch of the Rocks with a press pass from Fusion Authority, and they have just published the articles that I and fellow "member of the press" Kola Oyedeji wrote as reviews of the conference.

Read them at A Tale of CFML, Flex and a Pineapple and A Review of Scotch on the Rocks 2007 respectively.

The Flex Button control provides the means to add an icon to the button, in one of several states disabled/hover etc. However it does not automatically provide a disabled version of the icon you add for its normal enabled state. i.e. A "grayed out" version, which most other visual RAD tools would provided.

After hacking around in the Flex SDK, I found the following code which accomplishes this;

// Fade Disabled Icon

DisplayObject(this.getChildByName("disabledIcon")).alpha = 0.4;

This could be used as follows to produce an EditButton class;

<?xml version="1.0" encoding="utf-8"?>

<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
	icon="@Embed('EditButton.png')"
	label="Edit" creationComplete="init();"
>
        <mx:Metadata>
		[IconFile("EditButton.png")]
	</mx:Metadata>

	<mx:Script>

 	<![CDATA[

		private function init():void
		{
    			// Fade Disabled Icon
			DisplayObject(this.getChildByName("disabledIcon")).alpha = 0.4;
		}

	]]>

 	</mx:Script>

</mx:Button>

As I believe this to be a very valuable behavior, I have created a new IconButton Flex Component class to download, which provides a Button control which does automatically provided a disabled version of its main icon.

While working on the DeveloperCircuit Flex widget, I had the need to set a default sorting for a Flex DataGrid control. The standard control does not provide a mechanism to do this.

The Flex documentation suggests that you sort the underlying dataset, however I felt that this was very unsatisfactory. When you manually sort a DataGrid, the column which is being used to sort the data and the order of the sort, ascending or descending, is shown by the way of little black arrow in the column header. I felt that the default sorting should also be communicated to the user by this mechanism.

After some experimentation, this is the solution I came up with. There is a DataGrid event which is called when the user sorts a column. By announcing this event manually, once the underling data set has been returned by a call to a back end server, one can simulate the user action and set the default sorting of the DataGrid, complete with arrow. Example below:

<mx:RemoteObject
	id="someService"
	destination="ColdFusion"
	source="{this.someServiceLocation}"
	showBusyCursor="false"
	result="this.someDataGrid.dispatchEvent
	(
		new DataGridEvent
		(
			DataGridEvent.HEADER_RELEASE,
			false,
			true,
			0,	// The zero-based index of the column to sort in the DataGrid object's columns array.
			null,
			0,
			null,
			null,
			0
		)
	);"
/>