Next step is to add an Image component from the component library & set its ID to “appSkinImg” from the Flex Properties / Source View, whichever you are comfortable with.

This is the main control which serves as a skin for our application.

Now add 3 Button components. We are using these buttons to change our application skin in runtime & store it in the config file. This is just to provide a high level idea; real time scenario may be differing for different Applications.

Now let’s get into the Script part of this Application.

I’ve split this part into three different categories:

·         Application Event(s)

·         Component Event(s)

·         Methods to Load / Update Skin Data

Application Event(s):

-          Every time when Application starts, we need to load the skin specific data from the configuration file (Not the AIR configuration file, which we discussed above) to change the look & feel on the start-up of our Application. Same file will be used to store the skin details, when user changes the skin.  In “initialize” event we are calling the “evntAppInit()” method which loads the data. We can directly call the loadConfig() method, but in case if we want to do some additional processes on initialize event, it is better to go with this approach.

-          We are using Window event, named “applicationComplete” to get the reference of our main Application Window. You can find more info on this event in Flex help.