gi 3.9 developerguide

TIBCO General Interface - Enterprise Edition Developer Guide

Software Release 3.9.1April 2012

Important InformationSOME TIBCO SOFTWARE EMBEDS OR BUNDLES OTHER TIBCO SOFTWARE. USE OF SUCH EMBEDDED OR BUNDLED TIBCO SOFTWARE IS SOLELY TO ENABLE THE FUNCTIONALITY (OR PROVIDE LIMITED ADD-ON FUNCTIONALITY) OF THE LICENSED TIBCO SOFTWARE. THE EMBEDDED OR BUNDLED SOFTWARE IS NOT LICENSED TO BE USED OR ACCESSED BY ANY OTHER TIBCO SOFTWARE OR FOR ANY OTHER PURPOSE.

USE OFLICENSAGREELICENSSOFTWTHERE AGREEDOCUMCONST

This doctreaties.Softwar

TIB, TIBInterfacPerformtradema

EJB, JavMicrosy

All otherespecti

THIS SOOPERATIME. SSPECIFI

THIS DOIMPLIEFITNES

THIS DOCHANGINCORPIMPROVTHIS DO

THE COINDIREBUT NO

U.S. Pat

Copyrig

TIBCO S TIBCO SOFTWARE AND THIS DOCUMENT IS SUBJECT TO THE TERMS AND CONDITIONS OF A E AGREEMENT FOUND IN EITHER A SEPARATELY EXECUTED SOFTWARE LICENSE MENT, OR, IF THERE IS NO SUCH SEPARATE AGREEMENT, THE CLICKWRAP END USER E AGREEMENT WHICH IS DISPLAYED DURING DOWNLOAD OR INSTALLATION OF THE ARE (AND WHICH IS DUPLICATED IN TIBCO GENERAL INTERFACE INSTALLATION) OR IF IS NO SUCH SOFTWARE LICENSE AGREEMENT OR CLICKWRAP END USER LICENSE MENT, THE LICENSE(S) LOCATED IN THE "LICENSE" FILE(S) OF THE SOFTWARE. USE OF THIS

ENT IS SUBJECT TO THOSE TERMS AND CONDITIONS, AND YOUR USE HEREOF SHALL ITUTE ACCEPTANCE OF AND AN AGREEMENT TO BE BOUND BY THE SAME.

ument contains confidential information that is subject to U.S. and international copyright laws and No part of this document may be reproduced in any form without the written authorization of TIBCO e Inc.

CO, TIBCO Adapter, Predictive Business, Information Bus, The Power of Now, TIBCO General e, TIBCO General Interface Framework, TIBCO General Interface Builder, TIBCO General Interface ance Profiler, and TIBCO General Interface Test Automation Kit are either registered trademarks or rks of TIBCO Software Inc. in the United States and/or other countries.

a EE, J2EE, and all Java-based trademarks and logos are trademarks or registered trademarks of Sun stems, Inc. in the U.S. and other countries.

r product and company names and marks mentioned in this document are the property of their ve owners and are mentioned for identification purposes only.

FTWARE MAY BE AVAILABLE ON MULTIPLE OPERATING SYSTEMS. HOWEVER, NOT ALL TING SYSTEM PLATFORMS FOR A SPECIFIC SOFTWARE VERSION ARE RELEASED AT THE SAME EE THE README.TXT FILE FOR THE AVAILABILITY OF THIS SOFTWARE VERSION ON A C OPERATING SYSTEM PLATFORM.

CUMENT IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR D, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY, S FOR A PARTICULAR PURPOSE, OR NON-INFRINGEMENT.

CUMENT COULD INCLUDE TECHNICAL INACCURACIES OR TYPOGRAPHICAL ERRORS. ES ARE PERIODICALLY ADDED TO THE INFORMATION HEREIN; THESE CHANGES WILL BE ORATED IN NEW EDITIONS OF THIS DOCUMENT. TIBCO SOFTWARE INC. MAY MAKE EMENTS AND/OR CHANGES IN THE PRODUCT(S) AND/OR THE PROGRAM(S) DESCRIBED IN CUMENT AT ANY TIME.

NTENTS OF THIS DOCUMENT MAY BE MODIFIED AND/OR QUALIFIED, DIRECTLY OR CTLY, BY OTHER DOCUMENTATION WHICH ACCOMPANIES THIS SOFTWARE, INCLUDING T LIMITED TO ANY RELEASE NOTES AND "READ ME" FILES.

ent No. 8,136,109

ht 2001-2012 TIBCO Software Inc. ALL RIGHTS RESERVED.

oftware Inc. Confidential Information

1Copyright TIBCO Software Inc. All Rights Reserved.

General Interface Developer GuideGeneral Interface Developer Guide

Software Release 3.9

March 2010

Chapter 1 Introduction to General InterfaceChapter 2 General Interface Builder BasicsChapter 3 General Interface Framework BasicsChapter 4 Handling Application DataChapter 5 Communicating with Data ServicesChapter 6 Communicating with a Web Service TutorialChapter 7 Using CDF Form Mapping TutorialChapter 8 Optimizing Application PerformanceChapter 9 Accessing Data Across SubdomainsChapter 10 Adding and Debugging JavaScript CodeChapter 11 Class Inheritance and IntrospectionChapter 12 Extensions to JavaScript Exception HandlingChapter 13 General Interface JavaScript Documentation CompilerChapter 14 Protecting Namespaces in Multiple Application EnvironmentsChapter 15 Implementing Context-Sensitive HelpChapter 16 Logging and Application MonitorsChapter 17 Internationalizing and Localizing ApplicationsChapter 18 Deploying ApplicationsChapter 19 Optimizing Load PerformanceChapter 20 Asynchronous Modular PlatformChapter 21 Asynchronous Programming UtilitiesChapter 22 Using the Test RecorderAppendix A General Interface Builder Menus, Toolbars, Dialogs, and Tools


Chapter 1 Introduction to General Interface

This chapter provides an introduction to General Interface software, which includes GeneralInterface Framework and General Interface Builder.

General Interface Files and FoldersFurther Information on General Interface Topics

General Interface Files and FoldersGeneral Interface consists of two components:

General Interface Framework The distributable runtime framework for runningbrowser-based General Interface applications. The framework is located in the JSXdirectory.General Interface Builder A browser-based, visual development environment fordeveloping General Interface applications that use the General Interface Framework.General Interface Builder is itself a General Interface application. General InterfaceBuilder is located in the directory.GI_Builder

Although the installation directory is different for Enterprise Edition and Professional Edition,the contents of the directories are the same. The figure shows the directory structure and itscontents.


Further Information on General Interface TopicsFor more information, see the following topics:

Workspace and projects: Managing ProjectsGeneral Interface Builder preferences: Customizing the IDELogging system configuration file: Logging and Application MonitorsParameterized launch pages: Deploying as a Full Console Application


Chapter 2 General Interface Builder Basics

This chapter provides an overview of General Interface Builder features and the user interface.

Using PalettesCustomizing the IDEManaging ProjectsWork Area EditorsComponent Libraries Palette and the Online RepositoryData and Cache ManagementData Connection and MappingJabber SupportGeneral Interface DocumentationFurther Information on General Interface Basics

Using PalettesThis section describes the General Interface Builder palettes that you use as you work with yourapplication.

Project Files PaletteA list of all files referenced by an application are displayed in the Project Files palette. Files caninclude GUI components, XML and XSL documents, JavaScript files, CSS files, dynamicproperties 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 projectdirectory.

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


Component Libraries PaletteThe Component Libraries palette, shown in the next figure, provides predefined GUI prototypeobjects for adding functionality to your application. Components are organized in foldersaccording to function. For example, objects in the folder such as Dialog, Layout, andContainersTabbed 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 allowobject behavior and look-and-feel to be easily customized.

Prototype objects can be dragged from the Component Libraries palette to any object in thework area or to the Component Hierarchy palette. A new object of the selected type is createdas 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 componentdefinition to the workspace directory adds it to the folder in the Component/prototypes UserLibraries palette. The custom component can then be reused like any other prototypecomponent.

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

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


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

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

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

Use to select multiple components. Use to choose a range ofCtrl+click Shift+clickcomponents.

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

Properties Editor PaletteEach object has a predefined set of properties that define look-and-feel, on-screen position, andother characteristics. When a component is selected, its properties display in the PropertiesEditor 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 moreinformation, see .Dynamic Properties FilesType a dynamic property key or a properties bundle key in the Value column. See

and .Dynamic Properties Files Properties Bundle FilesClick 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 themouse over the property name or see General Interface GUI PropertyReference (Help > API Documentation > GUI Property Reference).

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


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

Events Editor PaletteIn addition to properties, objects can have model events. Model events are published inresponse 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 datais discarded

The Events Editor palette, as shown in the next figure, provides a set of model events for eachobject. 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 theevent name or see General Interface GUI Event Reference (Help > APIDocumentation > GUI Event Reference).

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


1.

2. 3.

4.

Attributes Editor PaletteYou can use the Attributes Editor palette to add and edit HTML attributes for the componentselected 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 and value to a block, this HTML markupfoo baris added to the rendered HTML markup for the component selected in the ComponentHierarchy palette:

XSL Parameters PaletteThe XSL Parameters palette is only available for components that implement

, such as Menu, Tree, and Matrix components. The XSL Parameters palettejsx3.xml.Cacheableallows you to add and edit XSL parameters that are passed to the XSL template, which rendersthe component as HTML.

To add an XSL parameter, complete these steps:

Select a component that implements in the Component Hierarchyjsx3.xml.Cacheablepalette or in the work area.Choose to open the palette.Palettes > XSL Parameters PaletteChoose a predefined parameter from the drop-down list or type the name of a newparameter in the Name field.

Type a value in the Value field.

10

Copyright TIBCO Software Inc. All Rights Reserved.

4. 5.

Type a value in the Value field.Click the button .Add Attribute

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: and jsx_rowbg1 These parameters control the background color of odd and even numbered rowsjsx_rowbg2.

respectively.

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

Recycle Bin paletteWhen you delete components from the work area or the Component Hierarchy palette, they'resent to the Recycle Bin and held in memory until the project is closed or the Recycle Bin isemptied. You can open the Recycle Bin from the Palettes menu and recover the components atany time during the project session.

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

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

To recover components from the Recycle Bin palette, choose select thePalettes > Recycle Bin,component to recover, and click the button on the toolbar. TheRestore Recycled Objectcomponents are restored to the Component Hierarchy palette and the Live Component view.

11


Local Data Cache PaletteThe Local Data Cache palette provides access to all cached XML and XSL files for inspectionand updates. The Local Data Cache palette allows you to view and edit cached files. Modifiedfiles 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 PaletteGeneral Interface Builder uses the System Log palette to display system out messages from thesystem, 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 GeneralInterface Builder System Log palette in the IDE. For more information, see Understanding the

.Logging System Configuration File

12


1. 2.

3.

The System Log palette has the following features:

Docking optionsAdjustable log levels, such as , , , , , , or OFF FATAL ERROR WARN INFO DEBUG TRACESupport for sound for messagesColor 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 MessagesThe System Log palette supports sound for messages. This is turned off by default but can beenabled in the logging system configuration file, ./logger.xmlGI_HOME

To enable sound for messages,

Open located in the directory.logger.xml , GI_HOMEChange the property for the handler from to abeepLevel ide jsx3.util.Logger.OFFlogging level, such as . Sound is played for the specified loggingjsx3.util.Logger.ERRORlevel and higher.For example, if the property is a sound playsbeepLevel jsx3.util.Logger.ERROR,whenever error and fatal messages are reported. See .Log Levels

"*jsx3.util.Logger.ERROR*"

Firefox requires a plug-in that can play .wav files.

Save .logger.xml

Customizing the IDEGeneral Interface Builder offers a fully customizable integrated development environment(IDE). You can modify IDE settings in the IDE Settings dialog. You can also customize theposition of the General Interface Builder palettes.

13


Specifying IDE SettingsIn the IDE Settings dialog, you can modify General Interface Builder IDE preferences for thevisual authoring environment. The options in this dialog allow you to customize the IDE,modify and add keyboard shortcuts for menus, and set paths. Settings in this dialog are savedto ./settings/builder.xmlworkspace

To open the IDE Settings dialog, choose .Tools > IDE Settings

The IDE Settings dialog has several panels:

IDE Settings PanelIDE Hot Keys PanelPaths PanelGIPP and GITAK Panel

This section discusses some but not all of the available options. For more information, see IDE.Settings Dialog

IDE Settings PanelOn the IDE Settings panel, you can modify options for character encoding, set warnings,modify the snap-to spacing, and so on.

Character EncodingGeneral Interface Builder provides support for writing files in a specified character encoding,such as UTF-8 or UTF-16. The ability to choose a character encoding is particularly useful fordeveloping and localizing applications for multilingual environments.

General Interface Builder allows you to specify an encoding for all project files, as well asseparately specify an encoding for XML files.

14


1.

2.

3.

4.

5.

1.

General Interface Builder settings in the IDE Settings dialog allow you to:

Specify character encoding for all project filesSpecify character encoding for XML filesSpecify whether to add character encodings to XML declarationsSpecify the output line separatorTest the specified encodings to verify they can be written

For applications loaded from the local disk, such as General InterfaceBuilder, Firefox reads non-XML files that are encoded in a standard 8-bitencoding. Firefox can read local XML files in any encoding supported bythe host system only if the encoding is included in the XML declaration.

Modifying encoding optionsTo modify encoding options, complete the following steps:

Enter an encoding in the field. Click the button to verifyOutput character encoding Testthat the specified encoding is available on the system and can be written. If this field isempty, the default is used. This default is system-dependent.Select an output line separator. If this field is empty, the default is used. This default issystem-dependent.Check the checkbox if you want to use a different encodingInstead encode XML file asfor XML files. Enter an encoding. Click the button to verify that the specifiedTestencoding can be written and that it's available on the system.If this option is unchecked, XML files are written in the same encoding as specified in the

field or the default system encoding if that field is empty.Output character encodingCheck the if you want the encoding in theAdd character encoding to XML declarationXML declaration.Click or to save your changes.Save Apply

For Internet Explorer, encoding behavior varies according to MicrosoftWindows updates and security settings, which might need to be modified.UTF-16 and the default system encoding should be supported regardless.If the test fails for other encodings, you might need to enable the

object. See "How to disable the ADODB.Stream object fromADODB.StreamInternet Explorer" at

and reverse thehttp://support.microsoft.com/default.aspx?kbid=870669 instructions to enable it.

For descriptions of options on this panel, see .IDE Settings Panel

IDE Hot Keys PanelOn the IDE Hot Keys panel, you can add new hot keys and modify existing hot keys forGeneral Interface Builder menus. Hot keys are keyboard shortcut commands that activatemenus. For example, pressing Ctrl+N executes this menu command, File > New > GUIComponent.

To add or modify a hot key,

Double-click a row in the Menu list.

15


1. 2. 3. 4. 5.

1. 2.

3.

4. 5.

Double-click a row in the Menu list.Press the keys you want for the hot key, such as Ctrl+Alt+m.Click .SetClick to save the changes and close the dialog or click .Save ApplyUse the browser reload button to restart General Interface Builder for the changes to takeeffect.

To revert to the default hot key, double-click a row and choose .Use Default

Paths PanelOn the Paths panel, you can set the workspace path for your projects and the HTTP base pathfor running applications from a local HTTP server.

WorkspaceThe workspace is the directory that contains your projects, custom add-ins and prototypes, andyour user settings for General Interface Builder.

To modify the workspace path,

Open the IDE Settings dialog and click the Paths button.Click the Browse button next to the Workspace field to open the Choose Folderdialog.Navigate to a folder, select it, and click Click again to close the ChooseChoose. ChooseFolder dialog. You can also use the New Folder button to create a new folder.Click to save the changes and close the IDE Settings dialog or click .Save ApplyClick at the Restart Required prompt and use the browser reload button to restartOKGeneral Interface Builder.

HTTP BaseThe path in the HTTP Base field is used when you select . ToProject > Run Project From HTTPuse this feature, you must have an HTTP web server, such as Apache, hosting both the GeneralInterface installation directory and your workspace directory.

To add an HTTP base, enter the base URI for the General Interface directory on a local HTTPserver. If this field is empty and you choose , you areProject > Run Project From HTTPprompted to enter a path.

If the relative path between the workspace directory and the General Interface directory isn'tthe same on the HTTP server as on disk, you must enter the relative path to the workspacedirectory in the WS Path field.

GIPP and GITAK PanelOn the GIPP and GITAK panel, you can specify the installation paths for the General InterfacePerformance Profiler (GIPP) and General Interface Test Automation Kit (GITAK). GIPP is aJavaScript profiling tool for benchmarking the performance of General Interface applications,and GITAK is a functional testing tool for testing General Interface applications. For moreinformation, see the General Interface Performance Profiler Guide and the General InterfaceTest Automation Kit User Guide.

16


Chat PanelOn the Chat panel, you can specify server and login settings for the Jabber client in GeneralInterface Builder. See .Jabber Support

Setting Palette Docking Options

Most palettes have a Docking Options button for customizing the palette. The optionsinclude moving the palette to a different quadrant of the General Interface Builder userinterface, floating the palette, and closing the palette. The System Log palette, which hasslightly different docking options, can be displayed at the bottom of the IDE, floated, opened ina separate browser window, or closed.

Docking settings are saved in your user settings and reloaded each time you open GeneralInterface Builder.

To access docking options, click the down arrow next to the Docking Options button .

To hide all the palettes, click the Show Edit Pane button on the General InterfaceBuilder taskbar.

Managing ProjectsAll development work in General Interface Builder is done in a project in the workspace.Projects are collections of files you create and edit in General Interface Builder. Project files aredisplayed in the Project Files palette and stored in the workspace.

Choosing a WorkspaceThe workspace is the directory that contains your projects, custom add-ins, custom prototypes,and your user settings for General Interface Builder.

The first time General Interface Builder launches after installation, a dialog prompts you tocreate or select a workspace directory. You can create a new directory, select an existingdirectory, or choose the default workspace directory. The default workspace location is

. You can use multipleC:\Documents and Settings\username\My Documents\TibcoGIworkspaces for your projects, as well as change workspaces.

For more information, see General Interface Getting Started.

Changing a WorkspaceYou can keep all of your projects in one workspace or use multiple workspaces. You canmodify the workspace location in the IDE Settings dialog. See .Workspace

17


1.

2.

3.

4.

Creating ProjectsWhen you create a project, default files are created and opened in the work area: and logic.js

. The JavaScript file, is an empty file that you can add JavaScript codeappCanvas.xml logic.js,to. The default GUI component file, , is where you can begin designing yourappCanvas.xmlapplication user interface.

To create a project, complete these steps:

Choose or click the link in the WelcomeProject > New Project Create a New Projectscreen (Help > Welcome Screen) to open the new project wizard.Choose General Interface Application as the project type, and click .Next

Choose the project template and click .Next

Specify a project path and click .Finish

18


3.

4. Specify a project path and click .Finish

A new project is loaded in the browser window. Two default, empty files are open in thecentral work area.

While building this sample application, all project data is stored locally inbrowser memory. The application is automatically saved to the filenotsystem. Save the project before you close or refresh the browser window.If you don't save the project, the data is lost.

Project Files and FoldersWhen you create a project, a project folder is created in the folder./JSXAPPSworkspace

The top-level project folder has the same name as your project. All project folders include thedefault subdirectories and files listed in the following table. This default structure can bemodified and additional folders can be created as needed. For example, you might createfolders for image, WSDL, and CSS files.

19


Project Files Description

config.xml Contains application configuration data, such as project settings and filelocations. See .Modifying Project Settings

launch.html Launches the application in the web browser. Use this file only duringdevelopment, not at runtime.

launch_in_ide.html Launches the application in General Interface Builder. Use this file onlyduring development, not at runtime.

To access project files and folders, click the link in the GeneralJSXAPPS/project_nameInterface Builder taskbar, located in the lower left area of the IDE.

ProjectFolders

Description

components Contains the XML files for application components. Each component has anassociated XML file with object definitions. For component files, use the .xmlextension. When you create a new project, a default component named

is created in this folder. See General Interface Component Guide.appCanvas.xml

js Contains included JavaScript files for your application. For JavaScript files, usethe .js extension. When you create a new project, a default file named logic.jsis created in this folder. See .Adding and Debugging JavaScript Code

jss Contains dynamic properties XML files. For dynamic properties files, use the.xml extension. See .Dynamic Properties Files

rules Contains mapping rules XML files for connecting to web services. Rules filesdefine the mappings between GUI components and SOAP message elements.For mapping rules files, use the .xml extension. See Basic Steps for

.Communicating with Data Services

xml Contains any XML files with content data, such as default values, for theapplication. For XML files, use the .xml extension.

xsl Contains any XSL files used for transforming application data. For XSL files,use the .xsl extension.

These project folder names are conventions only and not mandatory.

Saving ProjectsWhen you save project files, General Interface Builder saves them to a project directory in the

directory in the specified workspace directory. For example, JSXAPPS workspace For more information on workspaces, see General Interface Getting/JSXAPPS/project_name.

Started.

There are several ways to save files in a project:

Right-click a file tab in the work area and choose , or .Save Save and Reload, Save As

Choose , , or .File > Save Save and Reload, Save As Save All

20


Choose , , or .File > Save Save and Reload, Save As Save AllFor a local data cache XML file, right-click a file tab in the work area and choose Save to

or .Cache Save a Copy to Disk

For menu definitions, see .File Menu

Running ProjectsThere are several ways to run a project:

Choose .Project > Run ProjectChoose .Project > Run Project from HTTPDouble-click the default launch file, , which is/launch.htmlworkspace/project_dirgenerated when you create the project. Use this file only during development, not duringdeployment.

To run deployed applications, see .Deploying Applications

Running Projects from HTTPTo use this menu command, you must have an HTTP server, such as Apache, running locallyand hosting both the General Interface installation directory and your workspace directory. Formore information, see .HTTP Base

To run a project in a new browser window on a local HTTP server, choose Project > Run. If the HTTP server isn't configured, you are prompted to configure it.Project From HTTP

Opening ProjectsThere are several ways to open a project:

Choose the link in the Welcome screen (Help > WelcomeOpen an Existing ProjectScreen) and choose a project from the list.Choose and choose a project from the list. To open a GeneralProject > User ProjectsInterface sample project, choose and choose a sampleProject > User Projects > Samplesproject from the list.Choose and choose a recently opened project from the list.Project > Recent ProjectsDouble-click the default General Interface Builder launch file, workspace/ project_dir/launch_in_ide.html, which is generated when you create the project. Use this file tolaunch the project only during development, not at runtime.

You can also open multiple instances of the same project in different browsers, such as InternetExplorer and Firefox. However, because each instance is sharing the same preferences andsettings files, competing changes to General Interface Builder preferences may not be persisted.

Closing ProjectsTo close a project, simply close the browser.

21


Deploying ProjectsTo deploy a project, set deployment options on the Deployment panel of the Project Settingsdialog. Use the Deployment Utility to create a hyperlink to the deployed application. Then copyyour application files and General Interface software to an HTTP or HTTPS web server.

For more information, see the following:

Deployment PanelDeploying Applications

Modifying Project SettingsWhen you create a new project in General Interface Builder, a default configuration file isautomatically created as part of the project in the project directory: workspace

. The configuration file contains application configuration/JSXAPPS/project_dir/config.xmldata, such as project settings and file locations. Project settings include deployment, add-ins,class path, and legacy settings.

You can modify the project settings in the Project Settings dialog. Any changes you make in theProject Settings dialog are saved to the configuration file.

If you edit this file manually, close General Interface Builder before editing.

To open the Project Settings dialog, choose . To save your changes inProject > Project Settingsthe Project Settings dialog, click the or button.Apply Save

22


1.

2.

The Project Settings dialog has several panels:

Deployment PanelAdd-Ins PanelClasspath PanelLegacy Settings Panel

For more information on available options in the Project Settings dialog, see Project Settings.Dialog

Deployment PanelSettings on this panel control the behavior of the deployed application. For definitions ofoptions not discussed here, see . For more information on deployment,Project Settings Dialogsee .Deploying Applications

NamespaceThe General Interface runtime creates a single instance of a for each loadedjsx3.app.Serverapplication. The application namespace, which is a unique JavaScript identifier for the

instance, provides access to the instance.jsx3.app.Server jsx3.app.Server

When specifying a namespace, it's recommended that you use the reverse-domain namingconvention with the dot symbol (.). For example . Using the reverse-domaincom.tibco.APPnaming convention reduces the likelihood that other JavaScript code will interfere with yourapplication.

To specify the namespace, complete these steps:

Choose to open the Deployment panel of theProject > Project Settings >DeploymentProject Settings dialog.Type the namespace in the Namespace field. For example, set the namespace to eg.chart.APP.

You can also override the namespace per deployment using the deploymentjsxappnsparameter. See .Deployment Parameters

ModeThe deployment mode for the deployed application can be set to Live or Static mode. SelectLive mode if the application needs to be online and is connected over HTTP/S to a server foronline data access.

Select Static mode when working offline. When in offline mode, the application can't access aserver. Data is static and is referenced using static URLs stored in rules files. Choose Staticwhen developing and testing an application offline or when a back-end web service isn'tavailable.

The Mode setting is used by the j class.sx3.net.Service

Body Hot KeysHot keys are keyboard shortcuts that an end user can use to interact with a GUI component,such as a button or menu, in a running application.

When the Body Hot Keys option is checked on the Deployment panel, any hot key event thatbubbles up to the HTML element is sent to the application. Even if the focus is in thebody

23


1. 2. 3. 4.

bubbles up to the HTML element is sent to the application. Even if the focus is in thebodybrowser window and not in the General Interface application, the application receives the hotkey and responds to it. Choose this option for deployment of standalone console applications.See .Deploying as a Full Console Application

When the Body Hot Keys option is unchecked, hot keys only function if the focus is in theGeneral Interface application. This deployment choice prevents your application fromresponding to hot keys initiated in other General Interface applications on the page. Choose thisoption for deployment of non-console applications that are a portion of a web page. See

.Deploying as a Non-Console Application

onLoad ScriptEnter one or more JavaScript statements that you want executed when the applicationinitializes. For example, you might want to execute a main method, communicate with a server,create controller objects by instantiating a controller class, or create the state of the application.For more information, see and .Executing Code When the Application Loads Deployment Panel

onUnload ScriptEnter one or more JavaScript statements that you want executed when the browser window isunloaded. The onUnload event allows you to save user state and do any final cleanup beforeexiting. For more information, see and Executing Code When the Application Unloads

.Deployment Panel

For descriptions of other options on this panel, see .Deployment Panel

For more information on deployment, see .Deploying Applications

Add-Ins PanelUse the Add-Ins panel to enable the Charting add-in or custom add-ins for a project. Add-insare disabled by default to accelerate load time of General Interface Builder and GeneralInterface applications.

Enabling Add-insTo enable add-ins,

Choose to open the Project Settings dialog and click .Project > Project Settings Add-InsCheck the add-in you'd like to enable on the Add-Ins panel.Click to save the changes and close the dialog or click .Save ApplyClick at the Restart Required prompt and use the browser reload button to restartOKGeneral Interface Builder.

After add-ins are enabled, their prototypes are available in the Component Libraries palette inGeneral Interface Builder.

For more information on the Charting add-in, see General Interface Component Guide.

Custom Add-insFor custom add-ins to display on the Add-Ins panel, they must be saved to the or JSX/addins

directory. Typically, add-ins to be used by a team of developers would be/addinsworkspacesaved to the directory and posted by an administrator to a location accessible to theJSX/addinsteam. Add-ins for individual use can be saved to the directory./addinsworkspace

24


1.

2.

3. 4. 5.

For a tutorial on custom add-ins, see General Interface Component Guide.

Classpath PanelThe project class path is used by General Interface to find custom classes that are dynamicallyloaded by your application.

To add a class path, complete the following steps:

Click in the Path field and type the path to the classes.

The class path is relative to the project directory. For example, entering js/as the path would load the specified classes in the workspace

directory./JSXAPPS/project_dir/js

Press the Tab key and type the packages to load in the Packages field. For example, .com.tibco.*

Press Enter to commit the class path.Click to save the changes and close the dialog or click .Save ApplyUse the browser reload button to restart General Interface Builder for the changes to takeeffect.

To delete a class path, click the button next to the row.Delete

Path Packages Description

js/ com.tibco.* Loads classes with three words beginning with fromcom.tibcothe directory . For example,/JSXAPPS/project_dir/jsworkspacethis would load the class file workspace

./JSXAPPS/project_dir/js/com/tibco/Object.js

js-ext/ com.tibco.ext.* Loads classes with four words beginning with com.tibco.extfrom the directory . For/JSXAPPS/project_dir/js-extworkspaceexample, this would load the class file workspace

./JSXAPPS/project_dir/js-ext/com/tibco/ext/Object.js

js-foo/ com.foo.** Loads all nested classes of from the directory com.foo workspace./JSXAPPS/project_dir/js-foo/

js-foo2/ com.foo.*.* Loads classes with four words beginning with from thecom.foodirectory ./JSXAPPS/project_dir/js-foo2workspace

Work Area EditorsGeneral Interface Builder has built-in editors for creating and editing files. Editors are availablefor the following file types:

GUI componentsXMLXSLJavaScript

CSS (Cascading Style Sheets)

25


1.

2.

3.

4.

CSS (Cascading Style Sheets)Dynamic propertiesProperties bundleMapping rules filesGIPP test casesGITAK test cases

Working with FilesTo create a file, choose and select the file type you'd like to create. A new untitledFile > Newfile tab opens in the work area.

To save the file,

Choose or or right-click the file tab at the top of the work area andFile > Save Save Aschoose or .Save Save AsOptionally, browse to the recommended directory in the project. Choose forcomponentsGUI components, for JavaScript, for dynamic properties files, for propertiesjs jss xmlbundle files, for mapping rules files, for XML documents, and for XSLrules xml xsldocuments.Enter a file name and extension. Enter the extension for GUI components, XML,.xmldynamic properties, and mapping rules files. Enter the extension for XSL files. Enter.xslthe extension for JavaScript files and the extension for CSS files..js .cssChoose to close the Save File dialog.Save

Work Area View SupportThe work area provides several views. The available views depend on what type of file is activein the work area.

The views include:

Live Component ViewGrid ViewSource ViewFormatted Source XML (Read Only) ViewRendered HTML (Read Only) ViewComponent Profile View

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

26


Live Component ViewThe Live Component view is available for GUI components and is the graphical view of thecomponents in one component file of your application. You can drag and drop componentsfrom the Component Libraries palette into this view. You can also modify componentproperties 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. Foran example of how to work with components, see General Interface Getting Started.

Grid ViewThe Grid view is available for dynamic properties files and properties bundle files. You canuse dynamic properties files, which are XML resource files, to create custom properties forcomponents. Properties bundle files are XML resource files used to localize your application fora specific language and country.

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

Source View

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

Formatted Source XML (Read Only) ViewThe Formatted Source XML view displays XML source in an easy-to-read format withsyntax highlighting. For example, attributes and values are in different colors than elementnames. This view is read-only and is available for all component files and XML files, includingXSL, dynamic properties files, and properties bundle files.

Rendered HTML (Read Only) ViewThe 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,

27


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 markupisn't well-formed, pretty printing isn't used and a parsing error displays in the System Logpalette.

For example, if you entered HTML without a closing element in the Text/HTML property for alabel, such as , a mismatched tag error message displays in the System Log paletteMy Labeland the Rendered HTML (Read Only) view isn't pretty-printed. If you entered valid XHTMLwith open and close elements, such as no error is reported and the RenderedMy Label,HTML (Read Only) view is pretty-printed.

Component Profile ViewThe Component Profile view allows you to define the profile of a component. This view isavailable only for GUI components.

Here you can assign a name, description, and icon URL for the component. This is useful ifyou're creating custom components and exporting them to the Component Libraries palette (

/ ). The icon displays next to the name of the component in theworkspace prototypesComponent Libraries palette and the description displays as a tooltip.

Modifying a Component at RuntimeThe onBeforeDeserialization and onAfterDeserialization text areas can be used to specifyJavaScript to execute before or after the object is deserialized. If the component is loaded atruntime, the code is executed immediately before the XML is converted into JavaScript objectsor 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 tobe 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 tobe initialized with information only available at runtime. For example, you might want tomodify the CDF for a Matrix list component and then re-populate the list after it displayson-screen.

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

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

objXML.setSelectionNamespaces("xmlns:jsx1='" + jsx3.app.Model.CURRENT_VERSION + "'");

objNode =var objXML.selectSingleNode("//jsx1:object\[@type='jsx3.gui.Block']/ jsx1:strings\[@name='foo']");

(objNode) {if objNode.setAttribute("jsxbgcolor","red");}

The event provides direct access to the actual model objects, after they areonAfterDeserializedeserialized but before they are rendered on-screen. In this example code, the background of

Block is rendered in red after the object is created:foo

28


Block is rendered in red after the object is created:foo

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

objBlock.setBackgroundColor("red");}

Note that the variable, which is an instance of , points to theobjJSX jsx3.app.Modelroot object in the serialization file.

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

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

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

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

General Interface and custom dynamic properties are available on the context menu in theProperties 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 theproperty key (ID) in the Value cell, such as @Dialog BG for the BG Color property. After adynamic property is selected, the explicit value displays in the Value field next to the name ofthe dynamic property.

29


1. 2. 3.

Creating Dynamic Properties FilesTo create a dynamic properties file in General Interface Builder,

Choose . A visual editor displays in the work area.File > New > Dynamic Properties FileEnter 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 orbegin typing the name, such as , to see the list of matches.jsxb

30


3.

4.

5.

6.

7.

8.

1.

Enter a value for the type in the Value field. If the value is JavaScript code, check theEval checkbox.Values can be text or JavaScript code. For more information on entering JavaScript code,see . For information on CSS values, see GeneralSpecifying Code in Dynamic PropertiesInterface Component Guide.For example, you might want to add a custom color for the BG Color property. Enter aname for the property, such as . Select as the type and enter abluebgcolor jsxbgcolorcolor value, such as .#6E6CEFYou can use the Color Picker to choose a color. Choose or click the Tools > Color Picker

button in the Properties Editor palette.Color PickerContinue 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 andchoose . Insert New RecordTo delete a row, select a row and click the button .Delete

Choose or right-click the work area tab and choose File > Save and Reload Save and.Reload

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

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

Click in the Save File dialog.Save

Loading and Using the Dynamic Properties FileTo load the dynamic properties file and apply properties to a component, complete thefollowing steps:

Set the dynamic properties file to automatically load with the application, so the new

31


1.

2.

3.

Set the dynamic properties file to automatically load with the application, so the newproperties are always available. Right-click the dynamic properties file in the ProjectFiles palette and choose .Auto LoadReturn to the Live Component View and select the component you want to apply theproperty 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, andright-click the Value cell to invoke the lookup list of property values. The property valueyou added displays on the list.

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

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

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

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

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

.Using the Test Recorder

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

.Using the Test Recorder

Component Libraries Palette and the Online RepositoryGeneral Interface Builder provides an interface for the online component repository hosted onGeneralInterface.org. This repository allows you to share components with theGeneralInterface.org community. You can upload components to the repository for subsequentdownload and use by other developers and you can browse and download componentsuploaded by other developers from around the world.

The interface to the component repository is in the Component Libraries palette in Builder. The

Component Libraries palette includes the following tabs:

32


1. 2. 3.

4.

Component Libraries palette includes the following tabs:

System tab: A tree that shows all of the built-in system components. These files arestored at the path .GI_HOME/GI_Builder/prototypesUser tab: A tree that shows the components that the current user has created in theirlocal GI workspace. Components downloaded from GeneralInterface.org are also savedhere. These files are stored at the path . GI_WORKSPACE/prototypes

Online tab: List of the shared components that have been previously uploaded toGeneralInterface.org.

Saving a Component to the Workspace

A component must exist in the GI workspace before you can upload it to the online repository.To save a component to the GI workspace:

Open an existing component or create a new component in General Interface Builder.Choose .File > Save a Copy to LibraryEnter a name for the file and save it in the directory. You can save it to anyprototypesnested folder as long as it is contained within .prototypesTo display the component in the Users tab of the Component Libraries palette, click the

icon.Reload

The component is now available for upload.

To create new component folders in your workspace, click the icon and enterNew Folder

the folder name. To remove components, select the components and click the icon.Delete

33


1.

2. 3. 4.

5. 6.

1.

2. 3.

Uploading a Component to the Online Repository

For each component that you upload, you must agree to the General Interface termsof service .http://www.generalinterface.org/terms.html

To upload a component to the GeneralInterface.org online repository

Select the component on the User tab in the Component Libraries palette.

Click the icon.Upload ComponentEnter a name and description.Select the check box to agree to the General Interface terms of service. To review theterms of service, click the underlined link.Click .UploadIf you are not already logged in, you will be prompted to enter your user name andpassword. Log in, then click again.Upload

The component is uploaded and summary infomation is presented. If you have any customcode in the application, Dojo Foundation staff will review the code before making it available toothers.

To view an uploaded component, open the Online tab. Click the icon and chooseFiltersfiltering option as needed to display the component.

Downloading Components from the Online Repository

To download previously uploaded components:

Open the Online tab in the Component Libraries palette.

Click the icon and to choose how to filter the list of components.FiltersDrag and drop the component to the canvas or to the desired level in the ComponentHierarchy.

Using the Online Tab

The Online tab of the Prototype Libraries palette supports the options described in this section.

Refreshing the DisplayClickt the icon on the User or Online tab to reload the current list of components.Refresh

Displaying Component DetailsOn the Online tab, you can display component details by double-clicking the component entry.

To return to the component list, click the icon.List

Using Filters

The following filter options are available by clicking the icon.Filters

Function Description

34


All Show all available components.

Featured Show the components that the Dojo Foundation is currently featuring.

Rating Show the user ratings along with the component name.

Downloads Show the number of times that the component has been downloaded.

User Show the login name of the user who uploaded the component.

Date Show the date that the component was uploaded.

Using Feeds

The following options are available by clicking the icon. To view these options, youFeedsmust be subscribe to Live Bookmarks. If you are not subscribed, you are prompted to do sowhen you first choose a Feeds option on the Online tab.

Function Description

Top Rated Show the components with the highest user ratings.

Most Popular Show the components that have been downloaded most frequently

Most Recent Show the components that were uploaded most recently

Data and Cache Management

At the most basic level, a General Interface application consists of files stored on the file system.The formats of application files are industry-standard, such as XML, XSL, and CSS. You can useviewing and editing features built into General Interface Builder or you can use externaleditors.

General Interface Builder provides the following XML editing and management features:

Access to all component XML files for inspection and updates. Buttons to the lower rightof the work area provide multiple views of each component, including an editable XMLview. Component definitions can be refreshed using the toolbar on the ComponentHierarchy palette.Access to all cached XML and XSL files for inspection and updates. The Local DataCache palette allows you to view and open cached files for editing. Modified files can besaved and reloaded with a single command.

35


XML/XSL Merge Tool is used for testing the text, HTML, or XML output from a mergeoperation. You can view both the parsed output and its source. If parsing errors occur,error notification is provided. You can open multiple instances of this tool.

Character-level debugging that helps you identify the location of any XML parsingerrors.

Data Connection and MappingGeneral Interface software is designed to interface with industry-standard web protocols.

XML Mapping UtilityThe XML Mapping Utility provides a visual environment for configuring and testing dataservices including data mapping, testing, and off-line development.

To open the XML Mapping Utility, choose .Tools > XML Mapping Utility

36


To open the XML Mapping Utility, choose .Tools > XML Mapping Utility

For more information on the XML Mapping Utility, see andCommunicating with Data Services.Communicating with a Web Service Tutorial

Visual BindingsThe XML Mapping Utility provides a visual interface for mapping GUI components to dataservices. You can use drag-and-drop to create bindings for inbound and outbound SOAPmessages and XML documents. XML elements can be bound to the values of GUI objects, nodesin XML documents, and JavaScript variables. All mapping information is stored in an XML filereferenced in the project. If modifications are needed, you reopen this file in the XML MappingUtility.

TestingWhen mappings are complete, the interaction with the data service can be tested. You canpreview the outbound message before it is sent, test the message against the live service,preview the response message, and enter a callback script to execute when the response isreceived.

Decoupled Web Service DevelopmentFor tight project timelines, avoiding sequential dependencies is critical to project success.General Interface Builder is designed to allow parallel development of back-end and front-endapplications. Back-end data services do not need to be complete or accessible for applicationdevelopment to begin. You can save a representative snapshot of server data on the local filesystem. During testing, the live web service environment can be simulated using this storeddata. An application can even be deployed using static data, then reconfigured when theback-end service becomes available.

37


Additional Visual ToolsAdditional protocols and interactions are supported using the General Interface APIs. For moreinformation on designing interactions, see the online API documentation in General InterfaceBuilder.

For General Interface feature updates and examples to assist the application developmentprocess, visit Developer Network at .http://www.generalinterface.org

Jabber SupportGeneral Interface Builder includes a Jabber client, allowing you to participate in chats fromwithin Builder. The client is implemented on top of the Dojo XMPP library. It works with Jabberservers that support the Jabber HTTP Bind protocol, such as .OpenFire

An OpenFire server is available for use at http://chat.generalinterface.org. Sign in with yourDojo Foundation .account credentials

The Jabber client in Builder feature supports the following actions:

Adding and removing buddies

Assigning nicknames to buddies

One-to-one conversations

Online/away/offline buddy statuses

To configure your Jabber settings, open the IDE Settings window, as described in Customizing.the IDE

When Jabber is configured, you can open the Chat palette from the Palettes menu.

General Interface DocumentationGeneral Interface provides the following documentation to assist you as you develop yourGeneral Interface applications:

Product documentation

Context-sensitive help

Spyglass help

API documentation

Online documentation, forums, samples, and other resources at .http://www.generalinterface.org

38


Product DocumentationProduct documentation is available online at

.http://www.generalinterface.org/docs/display/DOC/Learning+Center

Context-sensitive HelpTo access context-sensitive help in General Interface Builder, move focus to an area of the IDE,such as a dialog, editor, or palette, and press or click the Help button .Alt+F1

To implement context-sensitive help in your applications, see Implementing Context-Sensitive.Help

Spyglass HelpDocumentation is also available in a spyglass in various areas of General Interface Builder. Aspyglass contains descriptive text in HTML and can contain more information than a tooltip. Toinvoke a spyglass, hover the mouse over the following areas in the IDE:

Property names in the Properties Editor palette

Model event names in the Events Editor palette

APIs icon in the Settings panel of the XML Mapping Utility

You can also add spyglass documentation to your own applications using the Spyglass event and the spy methods in the interface. For more information, see(jsxspy) jsx3.gui.Interactive

General Interface API Reference.

API DocumentationOnline API documentation is available online at

.http://www.generalinterface.org/docs/display/DOC/API+Documentation

Further Information on General Interface BasicsFor more tutorials and sample applications, see:

General Interface samples /JSXAPPS/samplesworkspaceDeveloper Network at http://www.generalinterface.org

Sample Projects Video Tutorials

39


Chapter 3 General Interface Framework BasicsThis chapter discusses the basics of General Interface Framework, which is the runtime forGeneral Interface applications.

Class Loading in General InterfaceURI ResolutionCustom Document FormatsCommon Data Format (CDF)Flexible CDF SchemaCommon Interface Format (CIF)Common Exchange Format (CXF)

Class Loading in General InterfaceGeneral Interface Builder uses dynamic class loading for increased performance and acceleratedload time. Dynamic class loading causes classes to be loaded as they're needed at the lastpossible moment. Since only statically loaded classes are loaded at application startup, theapplication loads much faster.

The classes distributed with General Interface are partitioned into two categories:

Statically loaded classes that are always loaded by General Interface at applicationstartupDynamically loaded classes

For a list of statically loaded system classes, see .General Interface Framework Classes

How Classes are LoadedAs a General Interface application loads, General Interface Framework statically loads a subsetof the system classes. Next, application classes and application code using the Auto Loadoption are statically loaded. Finally, all other classes are loaded using the dynamic class loadingmechanism. The following table provides an overview of how classes are loaded.

40


ClassLoadingType

General InterfaceClasses

Application Classes Application Code

Staticallyloaded

Classes automaticallyloaded by GeneralInterface. See the nexttable.

Auto Load enabled. Auto Load enabled.

Dynamicallyloaded

Load other GeneralInterface classes using

orjsx3.require()automatically withdeserialization.

Auto Load disabled. Addcustom classes to class path.Load class using

orjsx3.require()automatically withdeserialization.

Auto Load disabled.Load code using Server.loadResource().

General Interface Framework ClassesThe General Interface runtime system, General Interface Framework, always statically loads theclasses listed in the following table as the application initializes.

All other system classes, such as Matrix, must be loaded dynamically using the require()method or through deserialization. See .jsx3.require() Method

jsx3.app.AddIn jsx3.app.Cache jsx3.app.DOM

jsx3.app.Model jsx3.app.Properties jsx3.app.PropsBundle

jsx3.app.Server jsx3.app.Settings jsx3.gui.Alerts

jsx3.gui.Alerts jsx3.gui.Block jsx3.gui.Event

jsx3.gui.Heavyweight jsx3.gui.HotKey jsx3.gui.Interactive

jsx3.gui.Painted jsx3.lang.Class jsx3.lang.Exception

jsx3.lang.Method jsx3.lang.NativeError jsx3.lang.Object

jsx3.lang.Package jsx3.net.Request jsx3.net.URI

jsx3.net.URIResolver jsx3.util.DateFormat jsx3.util.EventDispatcher

jsx3.util.List jsx3.util.Locale jsx3.util.Logger

jsx3.util.MessageFormat jsx3.util.NumberFormat jsx3.xml.CDF

jsx3.xml.Document jsx3.xml.Entity jsx3.xml.Template

Application ClassesTo statically load your application class files as the application loads, enable the Auto Loadoption for the JavaScript files in the Project Files palette. For more information, see Enabling the

.Auto Load Option

To dynamically load custom application classes when the Auto Load option is off, classes must

meet the following requirements:

41


1. 2.

meet the following requirements:

The classes must be on the class path, so the system class loader can find the classes. See .Specifying Class Paths

The method must be used to load classes explicitly that are not loadedjsx3.require()automatically by the component through deserialization. See .jsx3.require() Method

Application CodeTo statically load your application code as the application initializes, enable Auto Load for theJavaScript files in the Project Files palette. For more information, see Enabling the Auto Load

.Option

If you don't want the application code statically loaded, you can load it dynamically using the method. This method looks up a resource registered with theServer.loadResource()

application by its id. The resource must be registered in the file of the application.config.xmlFor more information, see General Interface API Reference.

Enabling the Auto Load OptionTo statically load JavaScript files as the application initializes, you can enable the Auto Loadoption for individual JavaScript files in your project. When a JavaScript file is set to auto load,the file is statically loaded after the Framework classes are loaded.

To enable the Auto Load option for one or more JavaScript files in your project, complete thesesteps:

Right-click a JavaScript file in the Project Files palette.Choose Auto Load from the context menu. The file name now displays in bold in theProject Files palette.

When you enable the Auto Load option, the attribute for the JavaScript file is set to onLoad truein the application configuration file ( ).config.xml

42


"1" "map" main_js"id" "string" script"type" "string" true"onLoad" "boolean" js/logic.js"src" "string"

jsx3.require() MethodThe method can be used to load classes explicitly. Use the fully qualified classjsx3.require()name when using the method. For example,jsx3.require()

jsx3.require("jsx3.net.Form");

Only classes that can be found by the system class loader are loaded. Custom classes can beadded on the Classpath panel of the Project Settings dialog. See .Specifying Class Paths

When a component file is deserialized, the class of each object encountered in the file isdynamically loaded if it's not already loaded. Therefore, it's often not necessary to use the

method with classes that descend from jsx3.app.Model. However, if JavaScriptjsx3.require()code references these classes and if the code executes before a deserialization automaticallyloads the class, you must use the method to explicitly load the class.jsx3.require()

The method must be called at least once before making these types ofjsx3.require()references:

A static reference to a class descending from (typically ).jsx3.gui.Model jsx3.gui.**Any references to subclasses of that execute before the class is loaded throughModelobject deserialization.

Specifying Class PathsIf you've created custom classes, you need to specify the class paths, so the system class loadercan find the classes. Class paths are set on the Classpath panel of the Project Settings dialog.Class paths are saved as settings in the application configuration file, , and areconfig.xmldeployed with the project.

For specifics on setting class paths, see .Classpath Panel

Classes must be located in the same directory structure as the package name. See .Class Naming Conventions

43


Class Naming ConventionsThe following file and directory naming conventions for classes are required only for dynamicclass loading. For classes that aren't dynamically loaded, these naming conventions are arecommendation only.

The JavaScript class file name should be identical to the class name with a .js extension. Forexample, a class named would be saved as . The directory structure ofSomeClass SomeClass.jsthe class file must match the package name that the class is in. For example, if SomeClass.js isin a package and is saved to a directory in the project, the class file location shouldcom.tibco jsbe .js/com/tibco/SomeClass.js

URI ResolutionThis section describes how URIs are resolved in General Interface. A Uniform ResourceIdentifier (URI) identifies or names a resource required by the application.

The URI functionality of General Interface has been updated to provide additional functionalityand to simplify development. Project resources are now referenced by the project configurationfile ( relative to the base directory of the project. Referencing resources in theconfig.xml)configuration file allows you to rename and move project directories more easily.

Any relative URI that isn't of a legacy 3.1 format (beginning with or ) is resolvedJSX/ JSXAPPS/relative to a base URI that depends on the context of the URI. General Interface 3.1 applicationsperform as expected in version 3.2 and higher. However, it is strongly recommended that youupdate your applications to take advantage of the relative URI functionality.

44


1.

2.

Using URIs in General Interface BuilderIn General Interface, version 3.1, URIs that referenced resources contained in a project directorywere of the following form:

JSXAPPS/appname/subfolders/filename.xml

The version 3.1 format is still valid in version 3.2 and higher, because URIs beginning with are handled in a special manner. As of version 3.2, these URIs can be written relativeJSXAPPS/

to the base directory of the project. The previous example can now be written as follows to takeadvantage of relative paths:

subfolders/filename.xml

In General Interface Builder, version 3.2 and higher, any property editable in the PropertiesEditor palette can accept a relative URI, which is resolved relative to the project directory. Forexample, these properties accept relative URIs: the Image property for ToolbarButton and theXML URL property for List. URIs that appear in free form properties, such as Text/HTML forBlock, are never resolved. URIs set as values of attributes in the Attributes Editor are also notresolved.

In summary, the URI requirements in General Interface Builder, version 3.2 and higher, includethe following:

All properties editable in the Properties Editor palette that expect a path (XML URL,Image URL, and so on) can take an absolute path or a path relative to the projectdirectory.All other inputs (HTML attributes, free-form HTML) have to be pre- resolved staticallyor using the URIResolver API. See .URI Resolvers

Using dynamic properties is one way of externalizing these paths. Be certain that values storedin the dynamic property agree with the requirements described above, depending on how theyare used.

To reference a resource that is located outside of the project directory, use a relative URIstarting with one or more "../" tokens or one of the supported absolute URI formats. See URI

.Format Support

Using URIs with the General Interface APIWhen using URIs in JavaScript with the General Interface APIs, it's important to understandhow each API resolves any URIs sent to it. For example, the methodjsx3.app.Model.load()resolves URIs relative to the project directory of the application that the Model instance isowned by. For more information, see General Interface API Reference.

URI Format SupportThe following URI formats are considered to be absolute in General Interface. They alwaysresolve to the same location regardless of what they are resolved against.

For more information on the element, query parameters, and deployment parameters,scriptsee .Deployment Parameters

45


URI Format Description

JSX/... Legacy format for General Interface 3.1. Resolves relative to theparent of the directory as determined by the location of the JSX

script. If multiple elements are used in one HTMLJSX30.js scriptpage, the URL for the script file be the same.JSX30.js must

JSXAPPS/... Legacy format for General Interface 3.1. Resolves relative to theparent of the directory, as determined by the JSXAPPS jsxapppathquery parameter of the attribute of the elementsrc scriptreferencing the . If multiple elements are usedJSX30.js script scriptin one HTML page, the applications be located in the same must

directory.JSXAPPS

GI_Builder/... Legacy format for General Interface 3.1. Resolves as whenJSX/...General Interface Builder is running. Applications should notreference any URIs of this format, because the directoryGI_Buildercan't be deployed under the standard licensing terms.

jsx:///... Format for General Interface 3.2 and higher. Resolves relative to the directory as determined by the location of the script.JSX JSX30.js

jsxaddin://addin/... Format for General Interface 3.2 and higher. Resolves relative to thebase directory of the add-in specified by the host portion ( of)addinthe URI. The host portion of the URI follows the double forwardslashes (//). The host of the URI should be the add-in key (

) with any colon characters (:) replaced with anAddIn.getKey()exclamation point (!). The add-in must be loaded for the URI toresolve correctly.

jsxuser:///... Format for General Interface 3.2 and higher. Resolves relative to theparent of the directory (workspace). When General InterfaceJSXAPPSBuilder is running, this URI resolves relative to the workspacedirectory.

jsxapp://app/... General Interface 3.2 and higher format. If the Server instancecorresponding to the host portion of the URI is loaded into memory,the URI is resolved relative to the application base directory (

). The host portion ( of the URI is the relative pathjsxappbase )appfrom the directory to the application base directoryJSXAPPScontaining the file with any forward slashes (\/) replacedconfig.xmlwith exclamation points (!). If the Server instance isn't loaded intomemory, the URI resolves relative to the directory containing the

of the application. You can override the applicationconfig.xml Note:base directory ( ). See jsxappbase Overriding the Application Base

.Directory

Additionally, any URIs specifying a scheme or an absolute path (beginning with a forwardslash) are also considered absolute and will not be modified.

Any other URI is considered relative and will be resolved by a URI resolver depending on thecontext in which it is encountered.

46


URI ResolversGeneral Interface, version 3.2, introduces a new interface, . An object thatjsx3.net.URIResolveruses relative URIs must implement methods in the interface to define a contextURIResolveragainst which those URIs are resolved. Two classes, and ,jsx3.app.Server jsx3.app.AddInimplement this interface. The class uses the URI scheme and the class usesServer jsxapp: AddInthe URI scheme described previously. Additionally, static resolvers are provided forjsxaddin:the and schemes. For more information, see General Interface API Reference.jsx: jsxuser:

Custom Document FormatsGeneral Interface applications use custom document formats to store and process data, storemapping rules, and to define GUI components.

Common Data FormatCommon Data Format (CDF) is used by General Interface to store data. A CDF documentprovides a common format for sharing data among components, transferring data betweenclient controls, and performing data mapping. See . Support is alsoCommon Data Format (CDF)provided for flexible CDF schema. See .Flexible CDF Schema

Common Exchange FormatCommon Exchange Format (CXF), which is based on CDF, is used to store mapping rules toand from CDF and GUI components. CXF documents are created at design time by the XMLMapping Utility from source documents, such as WSDL, Schema, XML, and XHTML. CXFprovides a common format for connecting to and exchanging data with disparate systems andservices. At runtime, CXF is used to perform the actual interactions. See Common Exchange

.Format (CXF)

Common Interface FormatCommon Interface Format (CIF) is a serialization format used to define components.jsx3.guiThe CIF format provides improved readability and smaller file size. See Common Interface

.Format (CIF)

Common Data Format (CDF)

Common Data Format (CDF)The Common Data Format (CDF) is an XML Schema that provides an abstraction layer forclient data. It allows components of an application to use a single data format. Benefits includethe ability to share data among components, reliably transfer data between client controls usingdrag-and-drop, and perform data mapping. Component data can be inserted or updatedwithout using XSLT. The interface also defines a common set of methods forjsx3.xml.CDFmanipulating data. The class, which implements the CDF interface, canjsx3.xml.CDF.Documentalso be used to expose the CDF convenience methods on an XML document.

Components that consume structured data require CDF. These components include:

Menu

47


MenuTreeSelect and ComboMatrixCharting

There are two ways to work with CDF documents:

Through a CDF component, such as Matrix and TreeDirectly with the API. See the class in the online API help injsx3.xml.CDF.DocumentGeneral Interface Builder.

CDF SchemaThe CDF schema is described by the following XSD:

48


"1.0"xmlns:xsd "http://www.w3.org/2001/XMLSchema" "data" "unbounded" "0" "jsxid" "xsd:string" "jsxroot"

"cdfrecord" "unbounded" "0" "jsxtip" "xsd:string" "jsxvalue" "xsd:string" "jsxdivider" "xsd:string" "jsxtext" "xsd:string" "jsxstyle" "xsd:string" "jsxkeycode" "xsd:string" "jsxunselectable" "xsd:string" "jsxexecute" "xsd:string" "jsxgroupname" "xsd:string" "jsximg" "xsd:string" "jsxselected" "xsd:string" "jsxid" "required" "xsd:string"

The CDF schema is an open schema that can be extended using custom entities and attributes.In the following example, the and attributes are system attributes with specialjsxtext jsxidmeaning. The attribute is required for a record in the CDF. This attribute acts as a key andjsxidshould be a unique value. The and attributes are custom, developer-definednumber nameattributes.

49


"1.0"

50


Underlying CDF Model On-screen View

rOj

"jsxroot" "New" "Open" "Save"

"jsxroot" "New" "Open" "Image..." "Save"

"jsxroot" "Font" "font" "font" "Color"

51


"jsxroot" "Bold" "1" "x.gif" "2" "IL" "MA" "NV" "WI"

CDF System AttributesSystem attributes are reserved attributes used by General Interface to render CDF components.Each component has an associated XSL file for transforming CDF code into HTML for displayin your application. The system attributes listed in are referenced in the component XSL.

The attribute is required for all CDF components and must be a unique value. Support forjsxidoptional attributes varies according to component. The and attributes arejsxtext jsximgcommonly used and apply to most CDF components.

52


Attribute Component Description

jsxdisabled Button, Checkbox,ImageButton, Menu,RadioButton,ToolbarButton

Disables the record so that a user cannot select it.The record text is displayed in a grey color. Specify avalue of to disable the record.1

jsxdivider Menu Creates a linear divider between the current recordand the preceding record. Specify a value of to1display the divider.

jsxexecute Matrix, Menu, Tree,Table

Allows an event to run a program function when theevent fires. A function name or a string of JavaScriptstatements can be specified. Separate multiplestatements with a semicolon (;) character. Forexample, jsxexecute="var a=12;var b='5';"

jsxgroupname Matrix, Menu Adds the record to a group that can be used bymultiple CDF records or components. Records in agroup are mutually exclusive options. For example,a menu for selecting fonts allows only one fontoption to be chosen.

jsxid all Uniquely identifies the CDF record. This value canbe user-defined or automatically generated using the

method ( . This attribute is getKey() jsx3.xml.CDF).required

jsximg Matrix, Menu, Tree,Table

References a graphic file to use as an icon. Specifythe file path relative to the project directory, forexample, . Image position dependsimages/icon.gifon the component. For best results, use a 16x16transparent GIF file.

jsxkeycode Menu Defines a keyboard shortcut for calling the record.Specify any named key, such as Tab, Alt, Shift, orCtrl, and use the plus character (+) as a delimiter. Forexample, .jsxkeycode="ctrl+e"

jsxnomask Button, Checkbox,ImageButton, Menu,RadioButton,ToolbarButton(when used as aMatrix mask)

Disables a visible mask (checkbox, radio button,menu, and so on) so it's hidden and a user can'tselect it. Specify a value of to hide the mask for1that row.

jsxselected Matrix, Menu, Tree,Table

Specifies whether the record is selected or notselected by default. Specify a value of to define the1record as selected.

jsxstyle Matrix, Menu, Tree,Select, Table

Applies a CSS style to this record. Specify any CSScode. For example, jsxstyle="font-weight:bold;".

53


1. 2. 3.

jsxtext Matrix, Tree, Select,Menu, Table

Defines the visible text for the record. For example,in a menu component, the value of this attribute isthe name of the menu item as displayed in theapplication.

jsxtip Matrix, Tree, Select,Menu, Table

Defines the tooltip text to display when the cursorhovers over the record. For example, jsxtip="Type

.your address here"

jsxunselectable Matrix, Tree, Table Specifies whether a tree node or list item can beselected by end users. Specify a value of to prevent1the record from being selected. When the value ofthis attribute is , the execute method for the record1cannot be called.

Any CDF attribute value of , , , , , or jsxtext jsxtip jsximg jsxkeyode jsxstyle in the form of { } is replaced with the dynamic property if it exists. Ifjsxclass xxx xxx

the property doesn't exist, then the value isn't changed. Dynamic properties comefrom the server owning the CDF control. The conversion occurs when the XMLdocument is retrieved from source and before it's placed in the cache. For moreinformation, see the API for .CDF.convertProperties()

CDF records can also include custom attributes. C

gi 3.9 developerguide

Documents

bundled tibco software

licensed tibco software

rks of tibco software

tibco general e

tibco adapter

bundled software

software license agreement

specific software version