Its taken me a while but I believe I have started to understand the new skinning architecture in Adobe Flex 4 and this blog article describes how to build a reusable custom component taking advantage of the architecture.

This custom component is simply a useful loading animation along with an optional loading message.  I often find myself loading remote data (usually from Domino) into multiple panels within an application and its good UI practice to give feedback to the user that the application is doing something.  Normally I would change the cursor to a busy indicator which is ok but not ideal, especially if your loading multiple panels with different datasets.

The aim is to have a custom component which will indicate something is loading for that specific pane so if you have multiple panes loading different data they will each have there own indicator.  The component will work with any standard Flex Spark container (Panel, Group etc).

Heres a quick demo so you can see in advance what the end result is (view source enabled).

The demo simulates the loading of data by using 2 buttons to kick off a load event and data loaded event.  Obviously these 2 events are normally controlled by your application and I would recommend looking at AS3 signals & Robotlegs as good frameworks for controlling this process.

Building the Component – first the state logic.

Our component needs to have 3 states – the default state, the loading data state and the data loaded state.

This state information needs to be passed to the skin so it can change its appearance basedon these states.

The component will consist of a simple custom component built in actionscript which will be responsible for passing the state information to the skin as well as having an optional loading title.  The other element will be the Skin file which is responsible for how the component looks in the 3 different states.

The actionscript component extends the SkinnableContainer which means we can wrap the component around any standard Flex container e.g.

<container:LoadingPane skinClass=”shinydesign.skin.LoadingPaneSkin” id=”loadingPanel” height=”300” width=”400” loadingTitle=”Loading Demo Data“>

<s:BorderContainer left=”5” right=”5” top=”5” bottom=”5” cornerRadius=”5” backgroundColor=”0xcccccc“></s:BorderContainer>

</container:LoadingPane>

We need some extra custom states in our component and the skin needs to know about them, to do this you add some meta data to the top of the class, in this case I have added 2 new states – loading and dataLoaded.

[SkinState("loading")]

[SkinState("dataLoaded")]

public class LoadingPane extends SkinnableContainer

If you were building your component in MXML you would do the following

<fx:Metadata>
        [SkinState("loading")]
        [SkinState("dataLoaded")]
</fx:Metadata>

Next we have some properties which are used to set the current state.  NB you don’t use the normal method of setting a state component.currentState=  instead you use the setter on the desired property, in this case component.loading=true.

public function set loading(value:Boolean):void

{

if(_loading !=value){

_loading=value;

_dataLoaded=false;

invalidateSkinState();

}

}

This method first checks to see if the value is different then sets it if it is, it then changes the dataLoaded property to false (because we are now loading in new data) and finally it calls the standard invalidateSkinState method.  This methods forces the skin to reevaluate its skin state.

When the skin does its evaluation it will call the standard getCurrentSkinState method on the host component, therefore we override it so we can return the state value we want.

override protected function getCurrentSkinState():String {

if(dataLoaded)

return ‘dataLoaded’;

if(loading)

return ‘loading’;

return super.getCurrentSkinState();

}

In this case if dataLoaded = true then we return the string ‘dataLoaded’, if loading = true we return ‘loading’.

Optional Loading Title

To allow a developer to use there own custom loading messages we need to have a custom skin part in the component – in this case we have made the skin part optional.

[SkinPart(required="false")]

 public var LoadingLabel:Label;

We have a string property -loadingTitle on the compoent which is used to set the text value on our LoadlingLabel – this property can be set either through MXML or through actionscript.

<container:LoadingPane id=”dataLoadingPane” loadingTitle=”Loading Demo Data“>

 

dataLoadingPane.loadingTitle=“Loading Demo Data”

We then override the event partAdded to check to see when the LoadingLabel is added to the Skin – at this point we can set the text property of the label.  NB This is one way of doing this there are other ways.

//Add the loading text if the label is being added to the skin

override protected function partAdded(partName:String, instance:Object):void {

super.partAdded(partName, instance);

if (instance == LoadingLabel) {

LoadingLabel.text=loadingTitle;

}

}

The Skin

The Skin is a separate file which holds the UI for our component.  The idea being this separation of logic and UI means I could easily apply a different skin if I wanted to.

The Skin itself needs to be based on our custom component and we need to add our additional custom states (NB normal and disabled are the default inherited states).

<fx:Metadata>[HostComponent("shinydesign.container.LoadingPane")]</fx:Metadata>

<s:states>

<s:State name=”normal” />

<s:State name=”disabled” />

<s:State name=”loading” />

<s:State name=”dataLoaded” />

</s:states>

I then added a Label for the loading title – this ties uo with the optional SkinPart in the Custom Component – LoadingLabel – NB The ID of the label must match the ID in the custom component.

The actual loading graphic is a small Flash Movie – We are using the Flash Player already so why not?  You use a SWFLoader to load a Flash Movie within a Flex Application.  NB the movie has already been embedded within the Flex Application and is not loaded from an external source.

[Embed(source="shinydesign/assets/GearsSmallMovie.swf")]

public static const Gears:Class;

<s:SWFLoader source=”{Gears}” width=”100” height=”100” id=”loadingGraphic“  alpha.dataLoaded=”0” alpha.loading=”1” />

The contentGroup Group is the standard area that is used by Flex to display any content which is within the container.

i.e. in this case the BorderContainer component will be within the contentGroup Group.

<container:LoadingPane skinClass=”shinydesign.skin.LoadingPaneSkin” id=”loadingPanel” height=”300” width=”400” loadingTitle=”Loading Demo Data“>

<s:BorderContainer left=”5” right=”5” top=”5” bottom=”5” cornerRadius=”5” backgroundColor=”0xcccccc“></s:BorderContainer>

</container:LoadingPane>

The Skin Effects

Like any good Flex application there is a subtle use of effects to cause a Fade between the loading graphic and the actual content.

This is done by the use of State Transistions.

<s:transitions>

<s:Transition fromState=”loading” toState=”dataLoaded” >

<s:Sequence>

<s:Fade target=”{contentGroup}” startDelay=”300“/>

<s:Fade target=”{loadingThrobber}” />

</s:Sequence>

</s:Transition>

<s:Transition fromState=”*” toState=”loading” >

<s:Sequence>

<s:Fade target=”{contentGroup}” startDelay=”300“/>

<s:Fade target=”{loadingThrobber}” />

</s:Sequence>

</s:Transition>

</s:transitions>

In my case I have targeted when the state is changed from loading to dataLoaded and from normal to loading.

The recommend method is to put the actual property values that will be changed within the component and just use the transitions to trigger the change.  You can see an example here.

<s:Group id=”contentGroup” alpha.loading=”0” alpha.dataLoaded=”1” left=”0” right=”0” top=”0” bottom=”0” minWidth=”0” minHeight=”0” includeIn=”dataLoaded“>

<s:layout>

In this case I have set the alpha property for the loading state to be 0 on the contentGroup (in other words hidden) but for dataLoaded its set to 1.  Because its a fade transistion it will animate between the 2 alpha values.

The syntax for this is PROPERTY.STATENAME

An important extra is the startDelay property of the transistion.  I used this to force a consistent minimum delay before the loading graphic is faded away.

If you don’t do this then when the data loads very quickly you can end up with jarring / blinking effect.  It seems slightly strange to slow down the display of the data but in the end the experience is much smoother.

Grab the Source

The SWC & source code is available here on GitHub.

Recent Blog Posts

111

Building a Custom Spark Component for Adobe Flex Thu, Aug 11th 2011 5:00a Mark Barton Its taken me a while but I believe I have started to understand the new skinning architecture in Adobe Flex 4 and this blog article describes how to build a reusable custom component taking advantage of the architecture. This custom component is simply a useful loading animation along with an optional loading message. I often find myself loading remote data (usually from Domino) into multiple panels within an application and its good UI practice to give feedback to the user that the applicatio [read] Keywords: domino application properties

99

Quick video of a Flex App reading X Page generated barcodes Mon, Jun 6th 2011 10:14a Mark Barton Further to the previous blog entry I have done a quick video to demonstrate the Flex App reading the barcodes which have been generated by an X Page. Saves having to print off the barcodes or you might not have access to a webcam. [read] Keywords: application

117

Creating Barcodes with an XPage / Reading them with Flex Wed, Jun 1st 2011 10:26a Mark Barton Barcodes you have to love them, those little digital pictures can make life a lot easier when trying to tag a multitude of things but still be machine readable. Already smart phones along with cheap / integrated webcams are putting potential barcode scanners at everyone’s fingertips, what we need is an easy way to create the barcode and then read it. 2D Barcodes 2D Barcodes like the Datamatrix and QR Code can encode a reasonably large amount of information, certainly enough to hold a uniqu [read] Keywords: domino xpages application applications database java javascript mobile properties server wiki

144

Adobe Flex & Robotlegs–a simple process flow diagram Wed, Feb 16th 2011 9:11a Mark Barton Carrying on with previous blog posts about RobotLegs I thought it might be useful to someone to have a simple process flow diagram along with an explanation on how it hangs together. Initially Robotlegs (or any framework that I can see) can appear a little over the top and there seems to be a lot of bits of code hanging together but this granularity is important as it allows reuse and testability and tries to eliminate close coupling between bits of code this in turn makes it easier to manage ch [read] Keywords: lotus notes application interface xml

84

Camera Trap Mon, Jan 3rd 2011 10:15a Mark Barton For Christmas this year I brought my wife a camera trap to help find out what animals visit the garden at night. The camera trap is a nifty bit of kit which consists of a digital camera, a PIR and lots of IR LEDs – similar to the one pictured here. The camera can take stills or videos and so far seems to be working well except for the IR illumination being a bit strong – just means you have to position it a bit further back than you think. So far I have put out a little bit of meat as [read] Keywords: application security

119

Implementing TagDragon in a Domino Application Mon, Sep 27th 2010 7:25a Mark Barton TagDragon is Ferdy Christant’s excellent JQuery plugin to provide type ahead functionality. The plugin is not free but requires a small donation but is worth it for a stable robust plugin. My requirements were to autocomplete on the entries in a view column for performance reasons. The bits you need are: Plugin from Ferdy JQuery Library A Holding form in Notes – not used for anything but redirecting A $$ViewTemplate for ‘holding’ the JSON formatted view. A J [read] Keywords: agent domino notes application database javascript

72

Blog Tag – Stickfight has thrown down the gauntlet (well fingerless glove) Mon, Aug 16th 2010 12:26p Mark Barton As part of our preparation for polishing our Adobe Flex skills Mark Myers has suggested a Blog Tag – where we set each other an Adobe Flex technical challenge in which we have 2 weeks to write a blog explaining how to solve it. Here is my first challenge to Mark. Your challenge is to create a custom component which has no external dependencies i.e. a black box which utilises the inbuilt internationalisation features of Adobe Flex to display popup help in the users currently selected language.& [read] Keywords:

69

Adobe Flex Frameworks & why they matter (particularly if your coming from Lotus Notes) Tue, Aug 3rd 2010 5:33p Mark Barton Frameworks – particularly micro AS3 frameworks for Flex seem to be in vogue, but why? What do they offer? Other than adding what looks like making your apps more complex. If your a Lotus Notes / Domino developer I am sure you have come across the classic tactical application which has grown over time to be a business critical application, you know the one which has had multiple developers over time (who have now left) and of course there is no documentation. One of the advantages o [read] Keywords: domino lotus notes application applications best practice google integration properties wiki xml

49

Adobe Flex & Lotus Notes Presentation Tue, Aug 3rd 2010 6:32a Mark Barton Here is the presentation I gave at LCTY Manchester – its done using the prezi application which I highly recommend. .prezi-player { width: 550px; } .prezi-player-links { text-align: center; } Lotus Notes & Adobe Flex on Prezi [read] Keywords: lotus notes notes client application css

62

Problems Debugging Flex apps in the latest build of Firefox Mon, Jul 26th 2010 4:14a Mark Barton I use Firefox and firebug to help debug Adobe Flex applications – firebug is a lot cheaper than paying for the advanced version of Flash Builder for the network monitor. The problem is in the latest version of Firefox they introduced process isolation for plugins – this just causes any flex app to freeze when I am trying to debug it and the only way to kill Firefox is to end the task. The solution (work around) is here. [read] Keywords: applications firefox network