Work Area Editors

Page restrictions apply
Attachments:11
Added by Barbara Weinstein, last edited by Barbara Weinstein on Aug 11, 2009

General Interface Builder has built-in editors for creating and editing files. Editors are available for the following file types:

GUI components
XML
XSL
JavaScript
CSS (Cascading Style Sheets)
Dynamic properties
Properties bundle
Mapping rules files
GIPP test cases
GITAK test cases

Working with Files

To create a file, choose File > New and select the file type you'd like to create. A new untitled file tab opens in the work area.

To save the file,

Choose File > Save or Save As or right-click the file tab at the top of the work area and choose Save or Save As.
Optionally, browse to the recommended directory in the project. Choose components for GUI components, js for JavaScript, jss for dynamic properties files, xml for properties bundle files, rules for mapping rules files, xml for XML documents, and xsl for XSL documents.
Enter a file name and extension. Enter the .xml extension for GUI components, XML, dynamic properties, and mapping rules files. Enter the .xsl extension for XSL files. Enter the .js extension for JavaScript files and the .css extension for CSS files.
Choose Save to close the Save File dialog.

Work Area View Support

The work area provides several views. The available views depend on what type of file is active in the work area.

The views include:

These views are available from the work area toolbar to the lower right of the work area as shown in the following figure.

Live Component View

The Live Component view is available for GUI components and is the graphical view of the components in one component file of your application. You can drag and drop components from the Component Libraries palette into this view. You can also modify component properties in the Properties Editor palette and add event handlers in the Events Editor palette. The Component Hierarchy palette displays the hierarchical structure of the component file. For an example of how to work with components, see General Interface Getting Started.

Grid View

The Grid view is available for dynamic properties files and properties bundle files. You can use dynamic properties files, which are XML resource files, to create custom properties for components. Properties bundle files are XML resource files used to localize your application for a specific language and country.

For more information, see Dynamic Properties Files. See Properties Bundle Files and Internationalizing and Localizing Applications.

Source View

The Source view is available for all file types and displays the editable source for XML files and text files, such as JavaScript and CSS files. For components, the Source view displays the XML source of the component serialization file.

Formatted Source XML (Read Only) View

The Formatted Source XML view displays XML source in an easy-to-read format with syntax highlighting. For example, attributes and values are in different colors than element names. This view is read-only and is available for all component files and XML files, including XSL, dynamic properties files, and properties bundle files.

Rendered HTML (Read Only) View

The Rendered HTML view displays the HTML that will be used to render the component(s) in the browser. This view is read-only and is available only for GUI components.

When running General Interface Builder in HTML and XHTML mode, well-formed HTML, which is XHTML, is pretty-printed in the Rendered HTML (Read Only) view. If the markup isn't well-formed, pretty printing isn't used and a parsing error displays in the System Log palette.

For example, if you entered HTML without a closing element in the Text/HTML property for a label, such as <b>My Label, a mismatched tag error message displays in the System Log palette and the Rendered HTML (Read Only) view isn't pretty-printed. If you entered valid XHTML with open and close elements, such as <b>My Label</b>, no error is reported and the Rendered HTML (Read Only) view is pretty-printed.

Component Profile View

The Component Profile view allows you to define the profile of a component. This view is available only for GUI components.

Here you can assign a name, description, and icon URL for the component. This is useful if you're creating custom components and exporting them to the Component Libraries palette (workspace / prototypes). The icon displays next to the name of the component in the Component Libraries palette and the description displays as a tooltip.

Modifying a Component at Runtime

The onBeforeDeserialization and onAfterDeserialization text areas can be used to specify JavaScript to execute before or after the object is deserialized. If the component is loaded at runtime, the code is executed immediately before the XML is converted into JavaScript objects or after the JavaScript objects are instantiated and bound to the GUI model.

Executing JavaScript code before an object is deserialized is useful when the runtime needs to be prepared before the component is loaded, such as preloading data for the component. Executing JavaScript code after an object is deserialized is useful when the component needs to be initialized with information only available at runtime. For example, you might want to modify the CDF for a Matrix list component and then re-populate the list after it displays on-screen.

JavaScript code entered in the onBeforeDeserialization text area has access to the objXML context variable, which is an instance of jsx3.xml.Document. The objXML context variable represents the serialization file in-memory and the jsx1 namespace prefix resolves to the namespace for the file (in this case, urn:tibco.com/v3.0).

For example, if you have a Block in your serialization file named foo and you want to change the background color to red, you could put the following code in the onBeforeDeserialize event:

objXML.setSelectionNamespaces("xmlns:jsx1='" +
   jsx3.app.Model.CURRENT_VERSION + "'");
var objNode =
   objXML.selectSingleNode("//jsx1:object\[@type='jsx3.gui.Block']/
   jsx1:strings\[@name='foo']");
if(objNode) {
   objNode.setAttribute("jsxbgcolor","red");
}

The onAfterDeserialize event provides direct access to the actual model objects, after they are deserialized but before they are rendered on-screen. In this example code, the background of Block foo is rendered in red after the object is created:

var objBlock = objJSX.getDescendantOfName("foo");
if(objBlock) {
   objBlock.setBackgroundColor("red");
}

Note that the objJSX variable, which is an instance of jsx3.app.Model, points to the root object in the serialization file.

For more examples, see Executing Code Before or After Deserialization.

Dynamic Properties Files

Dynamic properties are XML resource files that contain externalized strings as name-value pairs. This feature enables you to organize the styles and text used by the application in a centralized location for easier application maintenance. Dynamic properties can be used for localization and for IDE lookup values. Properties bundle files are also used for localization. For more information, see Properties Bundle Files.

When authoring dynamic properties and properties bundle files using non-ASCII characters and non-western languages, save the file in a format that supports such characters, such as UTF-8 or UTF-16. See Character Encoding.

General Interface has built-in dynamic properties that you can use. These built-in dynamic properties begin with an @ symbol. You can also create your own custom dynamic properties files using the Dynamic Properties editor.

General Interface and custom dynamic properties are available on the context menu in the Properties Editor palette as shown in the following figure. To assign a dynamic property, right-click in the Properties Editor palette and select a dynamic property. You can also type the property key (ID) in the Value cell, such as @Dialog BG for the BG Color property. After a dynamic property is selected, the explicit value displays in the Value field next to the name of the dynamic property.

Creating Dynamic Properties Files

To create a dynamic properties file in General Interface Builder,

Choose File > New > Dynamic Properties File. A visual editor displays in the work area.
Enter a name for the property in the ID field.
To select a type, click in the Type column and choose a type from the drop-down list or begin typing the name, such as jsxb, to see the list of matches.
Enter a value for the type in the Value field. If the value is JavaScript code, check the Eval checkbox.
Values can be text or JavaScript code. For more information on entering JavaScript code, see Specifying Code in Dynamic Properties. For information on CSS values, see General Interface Component Guide.
For example, you might want to add a custom color for the BG Color property. Enter a name for the property, such as bluebgcolor. Select jsxbgcolor as the type and enter a color value, such as #6E6CEF.
You can use the Color Picker to choose a color. Choose Tools > Color Picker or click the Color Picker button in the Properties Editor palette.
Continue to edit values and do the following as needed to set up the list of properties:
- To add a new row, press Enter, click the Add button , or right-click a row and choose Insert New Record.
- To delete a row, select a row and click the Delete button .
Choose File > Save and Reload or right-click the work area tab and choose Save and Reload.

Browse to the jss folder of your project and enter a file name with the .xml extension.

For dynamic properties files, be sure to use the .xml extension as some servers won't recognize the .jss extension used in previous releases. By default, General Interface, version 3.2 and higher, supports the .xml extension, which is the recommended file extension.

Click Save in the Save File dialog.

Loading and Using the Dynamic Properties File

To load the dynamic properties file and apply properties to a component, complete the following steps:

Set the dynamic properties file to automatically load with the application, so the new properties are always available. Right-click the dynamic properties file in the Project Files palette and choose Auto Load.
Return to the Live Component View and select the component you want to apply the property to in the Component Hierarchy palette or in the work area.
Find the property you added in the Properties Editor palette, such as BG Color, and right-click the Value cell to invoke the lookup list of property values. The property value you added displays on the list.

Properties Bundle Files

The Properties Bundle editor is used to create and edit properties bundle files, which are used to localize your application for a specific language and country. A locale is a region of the world that shares a common language, writing, calendar, and so on.

Properties bundle files, also known as resource bundles, contain locale-specific objects, such as menu and button labels in the application user interface. When these strings are externalized in the properties bundle files, it's easier to translate applications into other languages. The application simply loads the locale-specific resource appropriate for the user's locale.
For more information on localizing, see Internationalizing and Localizing Applications.

Mapping Rules Files

Mapping rules files are XML files that define mappings between application objects and data elements or CDF documents and data elements. Mapping rules files are created with the XML Mapping Utility. For more information, see Communicating with Data Services.

GIPP Test Cases

GIPP test cases are used with the General Interface Test Recorder. For more information, see Using the Test Recorder.

GITAK Test Cases

GITAK test cases are used with the General Interface Test Recorder. For more information, see Using the Test Recorder.

Managing Projects

Chapter 2 General Interface Builder Basics

Component Libraries Palette and the Online Repository

Expand all Collapse all