How-to: Modify the chameleon skin theme

Abstract:
How to quickly and easily change the skin parameters (colors) of a Backbase application using the chameleon skin.

Background:
Any backbase application using the chameleon skin loads a b:skinSettings widget which sets the color preferences by creating/rendering css styles.

Example:
(note: please remember to change the declared namespace to match your own, both in step #1 as well as in step #2)

1. Place a skins value changer by using a select with a behavior, placed anywhere in your application.

        <span id="chameleonColorSwitch">Change skin color:
                <!--  behavior defined in xml/skin.xml -->
                <select e:behavior="exp:chameleonColorSwitch" xmlns:exp="http://www.backbase.com/2007/explorer">

                        <option>blue</option>
                        <option>red</option>
                        <option>green</option>
                        <option>bright</option>

                </select>
        </span>

2. Create a skin.xml file to store the behavior that implements the change listener for the select (defined in step 1)

note: External File [skin.xml]

3. Include the skin.xml file into your application using a include ( ). You have to do this in file that is accessed or included on every page in the application -- the main page in a Single Page Interface (SPI) or in the header/footer or other common behaviors file in an MPI. You can also use this method in JSF by simply wrapping the xi:include code in f:verbatim (as shown below).

<f:verbatim>
        <xi:include href="/xml/skin.xml" />
</f:verbatim>

AttachmentSize
skin.txt2.94 KB