Supporting multiple form-factors by using skins
improve this page | report issueOverview
Skins provide support for multiple form factors in a single executable file for devices of the same OS family.
Skins are a sub-variant of an environment.
Skins 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:
Skin creation
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.
CLI
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.
Studio
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: images
, CSS
, and js
.
Create new .css
and .js
files in the corresponding folders.
.js
and .css
files in the HEAD
element of the HTML file.
Skin packaging
All skins for a specific environment are packaged within the app.
Applying skins at run time
A special, developer-controlled JavaScript file is run when the app starts.
It determines which skin to load.
The default skinLoader.js
file contains examples of code.
function getSkinName() {
var skinName = "default";
if (device.version == "2.2" || device.version == "2.1") {
skinName = "android.HTML5";
}
return skinName;
}
Skin registration
Skins are automatically registered in the application-descriptor.xml
file.
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.
<android version="1.0">
<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>
<skin name="android.phone">
<folder name="common"/>
<folder name="android"/>
<folder name="android.phone"/>
</skin>
</skins>
<worklightSettings include="false"/>
<security>
<encryptWebResources enabled="false"/>
<testWebResourcesChecksum enabled="false" ignoreFileExtensions="png, jpg, jpeg, gif, mp4, mp3"/>
<publicSigningKey>Replace this text with the actual public signing key of the certificate used to sign the APK, available by using the 'Extract public signing key' wizard.</publicSigningKey>
<packageName>Replace this text with the actual package name of the application, which is the value of the 'package' attribute in the 'manifest' element in the AndroidManifest.xml file.</packageName>
</security>
</android>