IBM Worklight v5.0.5 > Develop IBM Worklight applications > Development guidelines for mobile environments

Application skins

An application skin is a set of web resources that govern the appearance and behavior of the application. Skins are used to adjust the application to different devices of the same family. You can package multiple skins in your application and decide at run time, on application startup, which skin to apply to the application.

When you define a skin in the IBM Worklight Studio, the studio generates a folder for the skin resources and adds a <skin> element in the application descriptor. The <skin> element includes the name of the skin and a list of resource folders. When the studio builds the application, it applies the optimization rules on the resource folders in the order they occur within the <skin> element.

In the following example, two skins are packaged with the Android application:

Resources for the android.tablet skin are in the android.tablet folder.

<android>
    <skins>
        <skin name="default"> 
            <folder name="common" />
            <folder name="android" />
        </skin>
        <skin name="android.tablet"> 
            <folder name="common" />
            <folder name="android" />
            <folder name="android.tablet" />
        </skin>
    </skins>
</android>

You can also create custom skin hierarchies, by creating resource folders under the application folder and manually defining the skin hierarchy in the application descriptor. For example, you can define a phone folder to include resources that are related to rendering the app on a phone, and a tablet folder to include resources for rendering the app on a tablet. Then you can create four skins using these resources in the following way:


Apply skins at run time

To set which skin to apply at run time, implement the function getSkinName() in the file skinLoader.js. This file is located under the /common/js folder for the app.


Delete a skin

To delete a skin, remove the element that defines the skin from the app descriptor.


Parent Development guidelines for mobile environments