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. We can package multiple skins in the application and decide at run time, on application startup, which skin to apply to the application.

Only the following environments support application skins: Android, iPhone, iPad, BlackBerry 6, 7 and 10.

When we use MobileFirst Studio to define a skin, MobileFirst Studio generates a folder for the skin resources and adds a <skin> element in the application descriptor file. The <skin> element includes the name of the skin and a list of resource folders. When MobileFirst Studio builds the application, it applies the optimization rules on the resource folders in the order in which they occur within the <skin> element.

In the following example, two skins are packaged with the Android application: the default skin and another skin called android.tablet. 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>

We 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, we can define a phone folder to include resources related to rendering the app on a phone, and a tablet folder to include resources for rendering the app on a tablet. Then create four skins using these resources in the following way:

• android.phone: common > android > phone

• android.tablet: common > android > tablet

• ios.phone: common > iphone > phone

• ios.tablet: common > iphone > tablet

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 environment/js folder of the application.

Figure 1. The skinLoader.js file

Delete a skin

To delete a skin, remove the element that defines the skin from the app descriptor, delete the skin directory, and delete or modify the skinLoader.js file.

Parent topic: Develop user interface of hybrid applications