Supporting multiple form-factors using skins
Skins provide support for multiple form factors in a single executable file for devices of the same OS family. They are a sub-variant of an environment and are packaged together in one application. The decision on which skin to use is made automatically at run time.
This tutorial covers the following topics:
Skins can be created by either using MobileFirst Studio or CLI.
Before you can add a skin, make sure the environment for which you want to create the skin exists for the application. The skins are placed in directories that are next to the corresponding environment directory.
In a terminal window, navigate to the application folder and use the command:
mfp add skin.
Follow the on interactive instructions to complete the process.
Use the Skin wizard in the Studio to add the environment for which you want to create the skin.
A skin folder contains the following folders:
js. In order to alter the visuals and logic of the skin application, create new
.js files in the corresponding folders.
- To extend existing code and styling from the default skin, use the same file names as those of the default skin
- To create new code and styling, use different file names than those of the default skin. When you choose this option, you need to copy the HTML file to the skin folder. You must also change the reference to the
.cssfiles in the
HEADelement of the HTML file.
All skins for a specific environment are packaged within the app.
Applying skins at run time
skinLoader.js, is run when the app starts in order to determine which skin to load.
skinLoader.js file contains examples of code.
Skins are automatically registered in the
Registration determines the hierarchical order between the
common folder, environment, and skin.
If you remove a skin from the project, you must modify the
application-decsriptor.xml file manually.