Ok so we start with the “main-app.xml” file. This is the AIR specific configuration file, where we can change the Application specific parameters like:

1. Application Name
2. Version
3. Description etc...

But we’ll directly move to the following settings which allow us to change the windows related settings. When dealing with custom chrome window, following settings need to keep in mind.

1. SystemChrome
• For creating skinnable application, this parameter should be “none”
2. Transparent
• This parameter should be “true”

Initially in the configuration file, both the properties (1 & 2) may be commented, so you need to remove the comment for these parameters & then set their values.

There may be a possibility that our Application doesn’t require resizing of the window (because of the odd shape). So we can remove the resizing option by changing the “resizable” parameter value to “false”.

Ok that’s all we need to change in the configuration file.

Now we can move to “main.mxml” file. This is our main UI where we want to set the Application skin. Here we need to set the following properties.

1. borderStyle = “none”
• By setting this value, window won’t show the border around it.
2. backgroundAlpha = “0”
• This will make windows background transparent. This’ll be helpful when you place an transparent image (PNG file with alpha transparency) on the main Application interface.
3. showTitleBar = “false”
4. showStatusBar = “false”
• By default Title Window & Status Bar display is true (Even if the background is transparent, because default value is true). We need to set these values to false.
5. horizontalScrollPolicy = “off”
6. vertical ScrollPolicy = “off”

<mx:WindowedApplication       xmlns:mx="http://www.adobe.com/2006/mxml"       width="350" height="350" layout="absolute"       borderStyle="none" backgroundAlpha="0"       showTitleBar="false" showStatusBar="false"       horizontalScrollPolicy="off" verticalScrollPolicy="off"       initialize="{evntAppInit()}"       applicationComplete="{evntAppComplete()}" >

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.

Component Event(s):

-          There are three events, from which two events for Image component & one event is for Buttons (for changing the Application skin & store it in the configuration file).

-          “startMove()” method is used to move the main Application window. We are calling this method on the “mouseDown” event of the image component (evntMoveMe()). Moving process of the window will be automatically ended on “mouseUp” event, so we don’t need to declare that event.

-          “close()” method is used to close the window. This method unloads the contents of the window; basically it’ll close the Application. (You may need to read more in AIR documentation, in-case your Application is dealing with multiple windows).

o   In this Application, we are using this method on the “doubleClick” event of the image component (evntCloseMe()), so when user double clicks on the Application interface (internally its image which is dispatching this event) we are closing the Application.

-          “evntChangeSkin()” method is used to change the skin. It is attached with click event of all buttons. Method will change the skin as well as store it in the configuration file.

o   Method first changes the value in XML data object.

o   Then it’ll change the source of the Image component, from the resource folder, using “changeSkin()” method.

o   Finally it’ll update the file with this updated skin data.

Methods to Load / Update Skin Data:

-          There are two methods “loadConfig()” & “updateConfig()”, both methods require File operation.  These methods are using “File” & “FileStream” objects.

o   “File” object creates a pointer to the configuration file & “FileStream” object is used to open configuration file for reading or writing the data.

-           “loadConfig()” will do read operation. First it’ll try to read the configuration file from the Application storage directory. If it doesn’t found the file then it’ll copy the existing file to that directory & then load the data.

o   Using “applicationDirectory” I was getting security error and after some googling I found a LINK for this solution HERE or you can go directly to the solution URL HERE.

-          “updateConfig()” will update the config file with new data (skin detail).