Wednesday, September 3, 2014

Oracle MAF Skinning

I tried two ways of doing skinning in MAF -
1. skin-addition -> skin-addition tag adds a new stylesheet to the existing skin
2. skin -> skin tag is used to define a new skin or to customize existing skin for particular OS or device.

Note: maf-config.xml file under Application Resources -> Dscriptors -> ADF META-INF contains the default skin family. That skin family will be applied to the application.

1. <skin-addition>

a. Open maf-skins.xml from ApplicationController project -> Application Sources -> META-INF
Drag and drop skin-addition from the component pallette,
There are two parameters:
**skin-id --> it is the name of existing skin(skin family) which can be found in maf-config.xml file appended with identifiers like iOS, iPhone, Android, Nexus 7, etc.
For example, let`s say skin-family is mobileAlta then we can use the below skin-id:
mobileAlta --> Applicable for all devices
mobileAlta.Android --> Applicable only for Android
mobileAlta.iOS --> Applicable only for iOS
mobileAlta.iPhone --> Applicable only for iPhones

**style-sheet-name --> the relative url of the css file

your file will look something like this:
<?xml version="1.0" encoding="UTF-8" ?>
<adfmf-skins xmlns="http://xmlns.oracle.com/adf/mf/skin">
 <skin-addition id="s1">
    <skin-id>mobileAlta-v1.1</skin-id>
    <style-sheet-name>resources/css/test.css</style-sheet-name>
  </skin-addition>
</adfmf-skins>

test.css needs to be created inside Web Content folder.




b. Now in test.css you can add additional changes, so apart from mobileAlta the changes in your css will also get applied.

For example if you want to change the background image, you need to update panel page:

.amx-panelPage
{
    background-image: url('../images/test.png');
    background-size:100%;
    background-position: center left;
    background-repeat: no-repeat;
    background-color: #d2d2d2; 
}

If you want to change bg color and text color of select one choice then you can add below:
.amx-selectOneChoice .selectItemsContainer
{
  background-color:Navy;
  color:White;


But the above two examples gets applied to all the panel page/ select one choice components in application.
Let`s say you have a requirement to put a specific style for a few buttons but not for all buttons.
You can add something like below in your css:
.amx-commandButton.adfmf-commandButton-Next   {
    background-image:url("../images/button_bg.png");
    background-position: center left;
    border-radius: 5px;
    border: 1px solid #535354;
}

And then you have to use adfmf-commandButton-Next for the style class attribute of your command button.


For tags of different components you can check out amx-mobileAlta-1.1.css file in the following location:
deploy\[name of your deployment profile]\framework\build\java_res\assets\www\css



2. <skins>

Skin tag is used to define a new skin or to customize existing skin for particular OS or device.
For example you want some customization in the default skin file for iOS and Android then you can use this way.

a.  Open maf-skins.xml file
Drag and drop "skin" from the component palette and fill with proper values.
The important parameters are:

*id --> It is same like skin-id attribute in skin-addition tag

family --> You can provide an existing skin family name or a new name. But this skin file will only get applied if the same name is provided in maf-config.xml.

extends --> default skin name which we want to extend and customize.
If you have created three skin tags, one for iOS, iPhone and iPad. Then the extends attribute in iPhone and iPad should be the id attribute of iOS. If there is no value in extends attribute, that means its a new skin file.

**style-sheet-name --> the relative url of the css file

Do it twice, once for android and once for iOS.

You file will look like below:
<?xml version="1.0" encoding="UTF-8" ?>
<adfmf-skins xmlns="http://xmlns.oracle.com/adf/mf/skin">
    <skin id="id3">
        <id>customFamily1.Android</id>
        <family>customFamily1</family>
        <extends>mobileAlta-v1.1</extends>
        <style-sheet-name>resources/css/testSkinAndroid.css</style-sheet-name>
        <version>
            <name>v1</name>
        </version>
    </skin>
    <skin id="s1">
        <id>customFamily1.iOS</id>
        <family>customFamily1</family>
        <extends>mobileAlta-v1.1</extends>
        <style-sheet-name>resources/css/testSkinIOS.css</style-sheet-name>
        <version>
            <name>v1</name>
        </version>
    </skin>

</adfmf-skins>

The family name we have given is customFamily1, and version v1.
We have extended mobileAlta-v1.1 so that we can add our customizations and utilize mobileAlta-v1.1 also.


Alternatively you can add multiple skins here. Some examples of id are below:
 <id>customFamily1.iPad iPad4,1</id> ---- This will be only called for iPADs
<id>customFamily1.Nexus 7</id> ---- This will be called only for nexus 7


b. Open maf-config.xml file (Application Resources -> Descriptors -> ADF META-INF)




















In maf-config.xml file you need to set skin family and version.
Set skin family to customFamily1(as given when adding skin in maf-skins.xml) and version to v1
Now automatically framework will pick skin based on device.

This is in brief on MAF skinning.

For more information check Oracle`s MAF Skinning document and go through the Skinning Demo sample.

Please let me know if it is helpful.

Regards,
Deepak











3 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Hi, would you know how to change the position of the springboard toggle button using style sheets? From bottom left to top left perhaps?

    Thanks

    ReplyDelete
  3. nice blogs
    great information.
    VLCC Institute the Leaders in Beauty & Wellness training, has successfully trained more than 75000 students so far.
    State-of-the-art infrastructure, market relevant courses, qualified and well-trained faculty, dedicated placement

    ReplyDelete