Archive for the ‘Flex’ Category

Rotating Text in Flex

Friday, January 11th, 2008

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.


Scotch of the Rocks 2007 Article

Monday, August 27th, 2007

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.


Automatic Disabled Icon with Flex Button Control

Sunday, July 29th, 2007

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.


Default Sorting for a Flex DataGrid

Friday, June 15th, 2007

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
		)
	);"
/>

Copyright © 2005, David Beale

  • Valid XHTML 1.0!
  • Valid CSS
  • Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0