Tutorial Four: Using Resource Styles

In this tutorial, you will create a hierarchy of resource styles and apply them to the objects in a simple interface.

If you have questions about this procedure, review Clearing an Interface .

1. Clear Builder Xcessory.
2. Redirect the output files to the directory Tut4 .

Creating the Interface

If you have questions about this procedure, review Creating and Resizing a Widget Instance and Placing a Child Widget .

1. Create a BulletinBoard with two PushButton children.

Using the Style Manager

Note: This tutorial assumes that you have not already created resource styles. Therefore, BaseStyle will be the only style that exists in the Style Manager, and the first style you create will be named BaseStyle1.

Creating substyles

The Style Manager appears. Since you cleared the resource style hierarchy when you began this tutorial, the style hierarchy is empty except for the BaseStyle.

Note that BaseStyle is "locked", that is, although you can bring up the Style Editor for BaseStyle in order to examine its contents, you can not add resources to the style.

BaseStyle remains highlighted while the Style Manager adds BaseStyle1 as its child. The fact that the parent remains highlighted enables you to create a set of sibling styles without repeatedly reselecting their common parent.

The new style is created as BaseStyle2.

The resource style hierarchy, displayed in the Style Manager, should now appear like the following figure:

1. Select Styles from the Browser Managers menu.
2. Select Create Substyle on the Style Manager Edit menu.
3. Create another substyle of BaseStyle.
4. Select BaseStyle2 by clicking on its name in the Style Manager.
5. Create two substyles of BaseStyle2.

Style Hierarchy

Using the Style Editor

You use the Style Editor to assign resource values to a given style.

A pop-up menu identical to the Style Manager Edit menu appears.

The Style Editor is displayed for BaseStyle4.

You can also load a style into the Style Editor by dropping the style onto the Edit drop target on the Style Editor, or by double-clicking MB1 on the style name.

Note that BaseStyle1 is loaded into the Style Editor.

You can add a resource to a style either by entering the resource name directly into the Resources text field, or by clicking the arrow button and then selecting the resource name from the combination box.

1. Move the cursor over BaseStyle4 and press MB3.
2. Select Edit Style from this pop-up menu.
3. Using MB2, drag BaseStyle1 to the Style Editor and drop it onto the Edit drop target.
4. Click the arrow button to the right of the Resources label on the Style Editor.

Assigning Resources

You can make multiple selections from the combination box by clicking MB1 on each resource name in turn. Each selected resource is highlighted in the combination box. You can unselect a resource by clicking on its highlighted name in the combination box.

1. Change the text in the Style Name field from "BaseStyle1" to "GreenObjects".
2. Click the arrow button to the right of the Resources text field.
3. Scroll down the resource selection box and select "background".
4. Press the arrow button once again to unpost the list.

Editing the Resource Values List

The resources that you have selected for the edited style are displayed in a list in the Style Manager's main display area, directly under the Resources text field. Assign values to these resources either by entering the value directly into the resource text field or by calling up any of the extended editors by clicking the (...) button to the right of the resource text field.

Note: The style is not itself changed until you have clicked the apply button at the bottom of the Style Editor.

The resource "background" is displayed in the Resources text field. The resource is also displayed along with a text field, (...) button, and app-defaults toggle in the Style Editor's main window. The functions of these fields and buttons are analogous to their counterparts in the Resource Editor.

Setting resources

Set background to "green" either with the Color Editor or by directly entering the value into the resource text field.

If you have questions about this procedure, review Using an Extended Editor . The Color Editor is described in detail in Extended Editors .

Applying Resource Values to a Style

Click the Apply button at the bottom of the Style Editor.

This applies the resource "background", with value "green", as well as the style name "GreenObjects" to the style formerly named BaseStyle1.

Updating the Style Editor

The Style Editor is now updated for BaseStyle2.

1. Move the cursor over BaseStyle2 on the Style Manager and press MB2.
2. Drag the icon to the Edit drop target on the Style Editor and release the mouse button.

Setting Other Styles

1. For BaseStyle2, change the Style Name to "GreyObjects".
2. Set "background" to "grey".
3. Apply these resource values to BaseStyle2.
4. For BaseStyle3, set Style Name to "BlueForeground".

Selecting Multiple Resources

Selecting a resource in this way adds it to the Resources style list, but does not deselect the previously selected items in the list.

1. Click the arrow button to the right of the Resources text field.
2. Scroll down the resource selection box and select "background".
3. Scroll down further until the resource "foreground" is displayed.
4. Select "foreground" by clicking MB1 on the resource name.
5. In the same fashion, add the resource "labelString" to the list.
6. Click the arrow button to remove the combination box.

Completing the Hierarchy

background = "red"

foreground = "blue"

labelString = "Blue"

Remember to click Apply on the Style Editor to apply these resource values to BaseStyle3.

Style Name = "RedForeground"

foreground = "red"

labelString = "Red"

Remember to click Apply on the Style Editor to apply these resource values to BaseStyle4.

Your style hierarchy, displayed in the Style Manager, should now appear like Edited Style Hierarchy :

1. Set the following resource values for BlueForeground (BaseStyle3):
2. Set the following resource values to BaseStyle4:
3. Click Dismiss to remove the Style Editor.

Edited Style Hierarchy

Applying Styles to Widgets

Now you will apply your styles to the objects in your interface.

Selecting objects

If you have questions about this procedure, review Selecting a Widget .

1. Select the BulletinBoard.
2. Select GreyObjects on the style hierarchy.

Applying styles to objects

The background color of the BulletinBoard changes to grey. The PushButtons are not affected because you applied the style to the BulletinBoard alone, and not its descendents.

1. Select "To Selected" from the Style Manager Apply menu.
2. With bulletinBoard still selected on the interface, select GreenObjects on the style hierarchy.

Applying styles to an instance tree

This time, the background color of all interface objects changes to green.

The foreground color of the PushButton changes to red. Note also that the background color of the PushButton changes to grey, reflecting the resource value defined in GreyObjects, the parent style of RedForeground.

The foreground color of the PushButton changes to blue. The background color of the PushButton changes to red. In this case, the value of the resource background defined in GreyObjects, "grey", is overridden by the value "red" set in BlueForeground itself.

1. Select "To Selected Tree(s)" from the Style Manager Apply menu.
2. Select pushButton on the interface and RedForeground on the style hierarchy.
3. Select "To Selected" from the Style Manager Apply menu.
4. Select pushButton1 on the interface and BlueForeground on the style hierarchy.
5. Select "To Selected" from the Style Manager Apply menu.

Saving and Testing the Interface

Now that you have built your interface and applied your styles, you will write out files and edit the Callbacks file to implement the functionality of your interface. The implementation of these styles requires no addition of code.

Feel free to generate code and connect the functionality of your interface for practice.

You have now completed Tutorial Four.