Skins

Copyright © Cloud Software Group, Inc. All Rights Reserved

Skins

The look and feel of FormBuilder Desktop is defined by the Home Page Layout resource, which is located in the Layouts folder of TIBCO Designer. This file refers to skin resources for images, CSS references, and so on.

The source file in the Layout window looks such as the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

<html>

<head>

..........

   <table width="780" border="0" cellspacing="0" cellpadding="0">

      <tr>

         <td colspan="5" height="2" class="tibheader-border"><img src="%%Skin.FileUrl('images.trans.gif')%%" alt="" width="1" height="2" border="0"></td>

..........

</body>

</html>

When you edit this file, you will notice that it refers to some skin resources such as %%Skin.FileUrl('images.trans.gif')%%.

If you want to remove these images, simply remove the entire HTML tag. If you want to replace these images, you need to create a skin.

To Create a Skin

Create a Skin Folder

1.

Create a new folder on your machine and name it, for example MySkins.

2.

Find a folder in your TIBCO directory called Default, which is located in bwfb\version\bui\sta\FBTemplates\skins\Default.

3.

It contains skin resources for the default FormBuilder Desktop that you can replace with your custom images or style sheets.

Figure 61 Creating Skins

4.

Copy the content of the Default folder into the skin folder you have created.

Add the Alias Library

5.

Open TIBCO Designer and add a new Alias Library in the design panel.

Figure 62 Add the Alias Library

6.

In the Aliases tab, add a new entry (using the Add button ) for this alias library and point it to the new skin folder.

7.

Click Apply.

8.

Search in the project panel and select the Skins Folder, located under the FormBuilder Desktop resource.

9.

Select the External Templates tab and add a reference to the Alias Library that you just created.

Figure 63 Add a Reference to the Alias Library

10.

Click OK and then click Apply.

Add a Skin Resource

11.

Select the Skins Folder and drop a new Skin resource in the design panel. For the Alias attribute, choose an appropriate alias from the dropdown list.

12.

Browse to the Default folder of the Skin Folder resource, which is in this example located in the directory MySkins.

Figure 64 Add a Skin Resource

The Skin resource populates automatically and maps to the default template values.

13.

Name the new Skin resource, and click Apply.

Figure 65 Name a Skin Resource

Choose FormBuilder Desktop Skin

14.

Select the FormBuilder Desktop resource and in the Configuration tab choose the new skin.

Figure 66 Choose a Skin

Each time you change images or other elements, such as CSS, in the folder MySkins, these changes will be reflected in the FormBuilder Desktop. You can also test it by using the tester.

If all your pages have guest access (which is default), you don’t need to login in order to run your formflows.