Using Palettes

Page restrictions apply
Attachments:16
Added by Barbara Weinstein, last edited by Barbara Weinstein on Nov 23, 2009 (view change)

Chapter 2 General Interface Builder Basics

This section describes the General Interface Builder palettes that you use as you work with your application.

Project Files Palette

A list of all files referenced by an application are displayed in the Project Files palette. Files can include GUI components, XML and XSL documents, JavaScript files, CSS files, dynamic properties files, properties bundle files, mapping rules files, and other files, such as text files. The file and folder hierarchy reflects where the files are located in relation to the project directory.

For more information on projects, see Managing Projects. For definitions of toolbar buttons, see Project Files Palette Toolbar.

Component Libraries Palette

The Component Libraries palette, shown in the next figure, provides predefined GUI prototype objects for adding functionality to your application. Components are organized in folders according to function. For example, objects in the Containers folder such as Dialog, Layout, and Tabbed Pane, act as containers for other objects. Form Elements objects, such as Text Area, Button, and Select, collect user input.

These object libraries not only reduce the time required to build applications, they also allow object behavior and look-and-feel to be easily customized.

Prototype objects can be dragged from the Component Libraries palette to any object in the work area or to the Component Hierarchy palette. A new object of the selected type is created as a child of the object where it's dropped if the parent object accepts children.

You can also create, manage, and share your own libraries of components. Saving a component definition to the workspace /prototypes directory adds it to the User folder in the Component Libraries palette. The custom component can then be reused like any other prototype component.

The Addins folder contains any prototypes defined in an add-in, such as Charting. You can also create your own custom add-ins. Add-ins must be enabled on the Add-Ins panel before they display in the Addins folder. For more information, see General Interface Component Guide.

For more information on components and tutorial on custom add-ins, see the General Interface Component Guide.

Component Hierarchy Palette

The Component Hierarchy palette, shown in the next figure, lets you view and manage the hierarchical model of objects in your application.

Objects can contain other objects. For example, a LayoutGrid component could include Text Box, Label, and Button objects, as well as other components. Applications usually consist of multiple components that work together using JavaScript logic.

Using the Component Hierarchy palette, you can select objects and then modify them using other palettes, such as Properties Editor palette, Events Editor palette, and so on. Once you've defined a component or object, you can also clone it to quickly make multiple copies. Objects can also be exported to reuse in other applications or imported from another project into the current one. For more information about working with components, see General Interface Component Guide.

Use Ctrl+click to select multiple components. Use Shift+click to choose a range of components.

For definitions of toolbar buttons, see Component Hierarchy Palette Toolbar.

Properties Editor Palette

Each object has a predefined set of properties that define look-and-feel, on-screen position, and other characteristics. When a component is selected, its properties display in the Properties Editor palette. As you can see in the next figure, properties are name-value pairs.

To modify a property, do one of the following in the Properties Editor palette:

Type a value in the Value column.
Right-click and choose a dynamic property value from the menu, if available. For more information, see Dynamic Properties Files.
Type a dynamic property key or a properties bundle key in the Value column. See Dynamic Properties Files and Properties Bundle Files.

Click the down arrow in the Value column and select a value from the list, if available.

To learn more about properties in the Properties Editor palette, hover the mouse over the property name or see General Interface GUI Property Reference (Help > API Documentation > GUI Property Reference).

To modify a common property for multiple components, select multiple components in the Component Hierarchy palette using Ctrl+click or Shift+click and set the property value. In the following example, the three selected components have a common width property of 120. If property values are different, [multiple values] displays in the value field.

For more information on properties, see General Interface Component Guide.

Events Editor Palette

In addition to properties, objects can have model events. Model events are published in response to user actions, allowing your application to respond to user input. For example, when a user clicks a Cancel button in a dialog, an event specifies that the dialog closes and data is discarded

The Events Editor palette, as shown in the next figure, provides a set of model events for each object. Events are name-value pairs, where the value is a JavaScript statement.

To learn more about events in the Events Editor palette, hover the mouse over the event name or see General Interface GUI Event Reference (Help > API Documentation > GUI Event Reference).

For more information, see General Interface Component Guide and Associating Code with an Event.

Attributes Editor Palette

You can use the Attributes Editor palette to add and edit HTML attributes for the component selected in the Component Hierarchy palette.

HTML attributes change how the component is rendered when it's displayed in the browser. After using the Attributes Editor palette, you can view your changes in the Rendered HTML (Read Only) view of the work area.

If, for example, you add an attribute of name foo and value bar to a block, this HTML markup is added to the rendered HTML markup for the component selected in the Component Hierarchy palette:

<div id="_jsx_1_3" label="block" class="jsx30block" *foo="bar"*
   style="position:relative;width:490px;height:516px;
   font-size:10px;;overflow:auto;font-family:Verdana;z-index:1;
   text-align:left;display:block;"/>
</div>

XSL Parameters Palette

The XSL Parameters palette is only available for components that implement jsx3.xml.Cacheable, such as Menu, Tree, and Matrix components. The XSL Parameters palette allows you to add and edit XSL parameters that are passed to the XSL template, which renders the component as HTML.

To add an XSL parameter, complete these steps:

Select a component that implements jsx3.xml.Cacheable in the Component Hierarchy palette or in the work area.
Choose Palettes > XSL Parameters Palette to open the palette.
Choose a predefined parameter from the drop-down list or type the name of a new parameter in the Name field.
Type a value in the Value field.
Click the Add Attribute button .

To change an existing XSL parameter, select the Value field, change the value, and press Enter.

To remove a parameter, right-click a row and choose Remove Parameter.

For example, the XSL for the Matrix List prototype defines two parameters: jsx_rowbg1 and jsx_rowbg2. These parameters control the background color of odd and even numbered rows respectively.

To learn more about XSL parameters, see General Interface XSL Parameter Reference (Help > API Documentation > XSL Parameter Reference).

Recycle Bin palette

When you delete components from the work area or the Component Hierarchy palette, they're sent to the Recycle Bin and held in memory until the project is closed or the Recycle Bin is emptied. You can open the Recycle Bin from the Palettes menu and recover the components at any time during the project session.

Each open component editor maintains its own Recycle Bin, which is only visible when the component is active. Whenever you close a component editor, close a project, choose Save and Reload, Revert, Revert All, or navigate to another project in General Interface Builder, the Recycle Bin is emptied and the components can't be recovered.

To delete a single component, select a component in the Live Component view or the Component Hierarchy palette. Press Ctrl+Delete or use the Recycle button on the Component Hierarchy palette toolbar.

To recover components from the Recycle Bin palette, choose Palettes > Recycle Bin, select the component to recover, and click the Restore Recycled Object button on the toolbar. The components are restored to the Component Hierarchy palette and the Live Component view.

Local Data Cache Palette

The Local Data Cache palette provides access to all cached XML and XSL files for inspection and updates. The Local Data Cache palette allows you to view and edit cached files. Modified files can be saved and reloaded with a single command.

For more information on caching, see Handling Application Data.

For definitions of toolbar buttons, see Local Data Cache Palette Toolbar.

System Log Palette

General Interface Builder uses the System Log palette to display system out messages from the system, as well as any logging messages in your JavaScript code. The system log handler, defined in the logging system configuration file, prints logging messages to the General Interface Builder System Log palette in the IDE. For more information, see Understanding the Logging System Configuration File.

The System Log palette has the following features:

Docking options
Adjustable log levels, such as OFF, FATAL, ERROR, WARN, INFO, DEBUG, or TRACE
Support for sound for messages
Color coding of messages, such as red for error messages

For definitions of toolbar buttons, see System Log Palette Toolbar.

For more information about logging, see Logging and Application Monitors.

Enabling Sound for Messages

The System Log palette supports sound for messages. This is turned off by default but can be enabled in the logging system configuration file, GI_HOME/logger.xml.

To enable sound for messages,

Open logger.xml , located in the GI_HOME directory.
Change the beepLevel property for the ide handler from jsx3.util.Logger.OFF to a logging level, such as jsx3.util.Logger.ERROR. Sound is played for the specified logging level and higher.
For example, if the beepLevel property is jsx3.util.Logger.ERROR, a sound plays whenever error and fatal messages are reported. See Log Levels.
```
<property name="beepLevel" eval="true"
      value="*jsx3.util.Logger.ERROR*"/>
```
Firefox requires a plug-in that can play .wav files.
Save logger.xml.