Using CSS to Customize the Rendering of a Form Control

TIBCO Business Studio Forms supports the use of Cascading Style Sheets (CSS) for customizing how form controls are rendered. You can use CSS with Business Studio Forms to apply styling to a form control.

Sample Project

To view the sample for this task, import the advanced sample projects as described in Importing the Forms Advanced Samples. The sample form and CSS file for the task described in this section are contained in the forms.samples.layout sample project.

  • The form (ControlRendering.form) is at:
    forms.samples.layout/Forms/CSS Samples/ControlRendering/
  • The CSS file (ControlRendering.css) is at:
    forms.samples.layout/Presentation Resources/css/

You can double-click the form and CSS filenames (as well as those of other project resources) in the Project Explorer to open them in the editor. There, you can examine their contents and use them as models for your own projects.

Explanation

This task covers the case where you want to apply special styling to a specific control in a form.

In order to design the rendering of a control, it is useful to know how the control is rendered in the browser. TIBCO Forms makes use of CSS classes attached to the HTML DOM nodes in order to control rendering. Generally, it is not necessary to know which actual HTML elements are being used in the rendering, and as a practice you should try to use only the CSS classes in devising CSS selectors in your stylesheets, as this approach is the most portable across different target platforms.

Shown here is a representation of the CSS classes that are used to render a control, and their relationship to one another within the nested DOM:

     —component, customclass
          —label
          —container
               —control
               —hint

See Reference for a detailed description of the CSS classes used in rendering forms.

The customclass is the name of a CSS class specified in the design time model.

Procedure

  1. Create a form that contains one or more controls.
  2. Link the form to a custom CSS stylesheet.

    A custom CSS stylesheet called ControlRendering.css is provided in the forms.samples.layout project in the directory Forms/Presentation Resources/css/

    Tip:
    To create a CSS file in your project
     In the Project Explorer, right-click the Presentation Resources folder for your project and click New > File. The New File dialog opens, where you indicate the parent folder where the CSS file for this form will be contained, and the file name. If there is already a css folder within your Presentation Resources folder, you can choose that one or, if not, create a folder with that name. But whether you use a subfolder, and if so, what it is named is unimportant. What is important is that the CSS file be placed in or under the Presentation Resources folder and that its filename ends with the extension .css. When you click Finish, the CSS file is created and opened in the editor.
    Tip:
    To link a form to a CSS stylesheet
     Be sure the CSS file is already present in the Presentation Resources folder. Then, in the Properties view for the form, click the Resources tab. Click the plus sign (+) to add a resource. The Pick Resource dialog opens, displaying a list of the resources currently residing in the Presentation Resources folder, including CSS files, JavaScript, and image files, if any. Select the desired CSS file and click OK. Your CSS file has now been added as a resource to your form. The definitions it contains will be used to render the form in HTML.

    The remainder of these instructions assume that your CSS file matches the sample file in the forms.samples.layout project.

  3. With the form open and visible in the editor, click one of the controls on the form to open the Properties view for the control.
  4. Enter control-rendering in the Style Class Name(s) box on the General tab of the Properties view for the control.
  5. Change the label font properties for this control. Add the following lines in the linked CSS stylesheet: 

    .highlight .label,
    {
        color: #FF0000;
        font-family: Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
    }

The CSS selector used here is .highlight .label. This is used for clients that use GWT, which is the rendering used in AMX BPM Openspace and Workspace.

  1. Put a border around the highlighted control and change the background color. Add the following lines to the linked CSS stylesheet: 
        .highlight,
    {
        border-style:solid;
        border-width: thin;
        background-color: #DDFFDD;
    }