Applying Template Containers and Selector Style Classes
This topic describes how to apply template containers and selector style classes.
To apply styles defined in a template to a page element, you must specify the container. Or, you can apply multiple classes from different containers to a page element.
Note that for any page element you can apply only one container or one or more selector classes.
After you select the container or classes to apply to a page element, the container or class names appear on the Layout Designer – Layout page in the in the Class Name field in the Layout grid.
Every page element properties page in the Mobile Application Platform Layout Designer features a Class Selection section that features controls for applying layout template containers and selector classes to page elements.
To access the properties page for a layout page element, select and in the Layout grid, click the Properties link next to a page element.
Image: Class Selection controls for page element properties
This example illustrates the fields and controls in the Class Selection section for page element properties. You can find definitions for the fields and controls later on this page.
If there are multiple containers and selector classes defined for a template, use the View All and/or the page forward and back buttons to view and select them.
|
Field or Control |
Definition |
|---|---|
| Template Name |
Displays the name of the template applied to the page. |
| Sub Template Classes |
This link appears only when one or more sub-templates are defined in the template that is applied to the layout page. Click the link to access the Select Sub Template Class Information page and to select classes from a sub-template to apply to the element. The Select Sub Template Class Information page is described later in this topic. |
| Select |
Select the box to select the container or class. |
| Class Name |
Displays the container class name as defined on the layout template. |
| View Container Summary |
Click the link to access the Container Summary page and to view details about the classes defined for a container. |
| Comments |
Displays comments for containers or classes as defined in the layout template. |
| Class |
Displays the selector class name defined in the selected container. |
| View Class Summary |
Click the link to access the Class Summary page and to view details about the selector classed defined for the selected container. |
| Add Class |
After you select a containers or a selector class to apply to the page, click the Add Class button. |
| Clear |
Click the button to clear selected classes from the Multiple Class Workspace area. |
| Class Name |
This field displays the name of the class selected. |
| Style |
This field displays the style(s) defined in the class. |
Use the Select Sub Template Class Information page (IB_DOCCONTSEL_SEC) to select containers and styles in a sub-template defined in a container to apply to the page element.
To access the page, click the Sub Template Classes link on the Class Selection section of properties page for a page element.
Image: Select Sub Template Class Information page
This example illustrates the fields and controls on the Select Sub Template Class Information page.
When you select a sub-template from the Sub Template drop-down list, the containers and selector classes appear on the page.
The fields and controls on the page function the same as those in the Class Selection section of the properties page for a page element. See Using Class Selection Controls earlier in this topic for descriptions of the fields and controls on this page.
To apply a layout template container class to a page element:
Navigate to the properties page for the element.
Select , and in the Layout grid click the Properties link.
If applying container classes from a sub-template, go to Step 2, otherwise, go to Step 3.
Click the Sub Template Classes link. The Select Sub Template Class Information page appears.
In the Containers area of the Class Selection section, locate the container that contains the styles to apply to the page element.
Use the View All or page forward and page back buttons to view all containers defined in a template or sub-template. You can also click the View Container Summary link to view details about the containers defined in a template or sub-template.
Check the Select box for the container styles to apply to the page element.
If applying container classes from a sub-template, go to Step 5, otherwise, go to Step 6.
Click theOK button at the bottom of the page. The properties page for the element appears.
Click the OK button at the bottom of the page. The Layout Designer – Layout page appears. The container class appears in the Class Name field for the page element.
Click the Save button.
This topic describes how to apply multiple layout template and sub-template selector classes to page elements.
To apply multiple layout template selector classes to a page element:
Navigate to the properties page for the element.
Select , and in the Layout grid click the Properties link.
If applying selector classes from a sub-template, go to Step 2, otherwise, go to Step 3.
Click the Sub Template Classes link. The Select Sub Template Class Information page appears.
In the Containers area of the Class Selection section, locate the container that contains the selector classes to apply to the page element.
In the Containers section, use the View All or page forward and page back buttons to view all containers defined in the template or sub-template. You can also click the View Container Summary link to view details about the containers defined in a template sub-template.
In the Classes section, use the View All or page forward and page buttons to view all the selector classes defined for a container. You can also click the View Class Summary button to view details about selector classes defined in a container.
Check the Select box a selector class to apply to the page element.
In the Multiple Class Workspace section, click the Add Class button. The class name and styles defined appear in the section.
Repeat Steps 4-5 for each selector class to apply to the element.
When finished, go to Step 7 if applying selector classes from a sub-template, otherwise, go to Step 8.
Click the OK button at the bottom of the page. The properties page for the element appears.
Click the OK button at the bottom of the page. The Layout Designer – Layout page appears. The selector classes appear in the Class Name field in the Layout grid for the page element.
Click the Save button.