TIBCO® General Interface Enterprise Edition
Getting Started
Software Release 3.9.1
April 2012
Important Information
SOME 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 OF TIBCO SOFTWARE AND THIS DOCUMENT IS SUBJECT TO THE TERMS AND CONDITIONS OF A
LICENSE AGREEMENT FOUND IN EITHER A SEPARATELY EXECUTED SOFTWARE LICENSE
AGREEMENT, OR, IF THERE IS NO SUCH SEPARATE AGREEMENT, THE CLICKWRAP END USER
LICENSE AGREEMENT WHICH IS DISPLAYED DURING DOWNLOAD OR INSTALLATION OF THE
SOFTWARE (AND WHICH IS DUPLICATED IN TIBCO GENERAL INTERFACE INSTALLATION) OR IF
THERE IS NO SUCH SOFTWARE LICENSE AGREEMENT OR CLICKWRAP END USER LICENSE
AGREEMENT, THE LICENSE(S) LOCATED IN THE "LICENSE" FILE(S) OF THE SOFTWARE. USE OF THIS
DOCUMENT IS SUBJECT TO THOSE TERMS AND CONDITIONS, AND YOUR USE HEREOF SHALL
CONSTITUTE ACCEPTANCE OF AND AN AGREEMENT TO BE BOUND BY THE SAME.
This document contains confidential information that is subject to U.S. and international copyright laws and
treaties. No part of this document may be reproduced in any form without the written authorization of TIBCO
Software Inc.
TIB, TIBCO, TIBCO Adapter, Predictive Business, Information Bus, The Power of Now, TIBCO General
Interface, TIBCO General Interface Framework, TIBCO General Interface Builder, TIBCO General Interface
Performance Profiler, and TIBCO General Interface Test Automation Kit are either registered trademarks or
trademarks of TIBCO Software Inc. in the United States and/or other countries.
EJB, Java EE, J2EE, and all Java-based trademarks and logos are trademarks or registered trademarks of Sun
Microsystems, Inc. in the U.S. and other countries.
All other product and company names and marks mentioned in this document are the property of their
respective owners and are mentioned for identification purposes only.
THIS SOFTWARE MAY BE AVAILABLE ON MULTIPLE OPERATING SYSTEMS. HOWEVER, NOT ALL
OPERATING SYSTEM PLATFORMS FOR A SPECIFIC SOFTWARE VERSION ARE RELEASED AT THE SAME
TIME. SEE THE README.TXT FILE FOR THE AVAILABILITY OF THIS SOFTWARE VERSION ON A
SPECIFIC OPERATING SYSTEM PLATFORM.
THIS DOCUMENT IS PROVIDED “AS IS” WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR
IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE, OR NON-INFRINGEMENT.
THIS DOCUMENT COULD INCLUDE TECHNICAL INACCURACIES OR TYPOGRAPHICAL ERRORS.
CHANGES ARE PERIODICALLY ADDED TO THE INFORMATION HEREIN; THESE CHANGES WILL BE
INCORPORATED IN NEW EDITIONS OF THIS DOCUMENT. TIBCO SOFTWARE INC. MAY MAKE
IMPROVEMENTS AND/OR CHANGES IN THE PRODUCT(S) AND/OR THE PROGRAM(S) DESCRIBED IN
THIS DOCUMENT AT ANY TIME.
THE CONTENTS OF THIS DOCUMENT MAY BE MODIFIED AND/OR QUALIFIED, DIRECTLY OR
INDIRECTLY, BY OTHER DOCUMENTATION WHICH ACCOMPANIES THIS SOFTWARE, INCLUDING
BUT NOT LIMITED TO ANY RELEASE NOTES AND "READ ME" FILES.
U.S. Patent No. 8,136,109
Copyright © 2001-2012 TIBCO Software Inc. ALL RIGHTS RESERVED.
TIBCO Software Inc. Confidential Information
1
General Interface Getting Started
General Interface Getting Started
Software Release 3.9
March 2010
Chapter 1 Getting Started Introduction
Chapter 2 Starting General Interface Builder
Chapter 3 User Interface Basics
Chapter 4 Tutorial on Creating an Application
Copyright © TIBCO Software Inc. All Rights Reserved.
2
Chapter 1 Getting Started Introduction
This chapter provides an introduction to General Interface and a broad orientation to the
environment.
Rich Internet Applications
Processing Model
Architecture
Features
Rich Internet Applications
A survey by Forrester Research revealed that 70% of Fortune 2000 CIOs want to standardize on
deploying applications to a web browser. However, of those surveyed, more than half stated
that the limits of HTML prevented them from reaching this objective.
Significant investment has been made in browser development since the first browsers were
released. As a result of that effort, today's web browsers, such as Internet Explorer and Firefox,
do provide a stable environment where enterprise-grade applications can be deployed.
However, despite the volume of research and development, the web browser today remains
fundamentally aligned with the document-centric paradigms that first defined the concept of a
web page. HTML, evolving from its SGML roots, has always been a document-oriented markup
language.
With the advent of XML, DHTML, XHTML, and CSS (Cascading Style Sheets), the browser
became increasingly powerful and flexible in its core capabilities. Additionally, the cost of web
applications was much lower than that of thick client development, deployment, and
maintenance. Yet, as enterprises migrated applications to the web, they discovered that web
applications provided far less interactivity and performance than the thick-client solutions they
were meant to replace. As a result, many businesses traded off performance for cost, or
alternatively, when the document paradigm of HTML was insufficient, paid the higher costs of
developing, deploying, and maintaining thick clients. Either way, businesses have had to
choose between web applications and thick clients.
General Interface and Ajax
The General Interface application framework solves this problem by enabling enterprises to
deliver rich internet applications (RIAs) that look, feel, and perform like desktop installed
software but run in a standard web browser. With General Interface, enterprises can have the
best of both options: rich, highly productive, service-differentiating GUI functionality with the
low-cost profile of web development, instant distribution, and accessibility.
The General Interface application framework leverages Ajax (asynchronous communications,
JavaScript, and XML), event, and rendering capabilities of the web browser to instantly create a
powerful, object-based enterprise-grade application environment into which your General
Interface applications can be deployed. By working with an object-based environment, as
opposed to declarative markup languages, development time is shortened, and the business can
easily distribute, manage, and deploy high performance solutions.
The application programming interfaces (APIs) provided by the browser remain a weak point
in the development of end user applications more complex than online retail shopping. The
Copyright © TIBCO Software Inc. All Rights Reserved.
3
in the development of end user applications more complex than online retail shopping. The
existing browser APIs are not designed to create robust enterprise-grade applications.
Therefore, development is time-consuming and expensive, maintainability is difficult, and
many businesses completely avoid implementing enterprise web applications. Browsers lack
the foundation classes familiar to Microsoft Windows programmers and the object-oriented
presentation packages familiar to Java programmers. Instead, HTML browsers provide a
generic API intended for displaying series of hyperlinked web pages that lack the features
provided by many thick clients.
General Interface solves existing browser limitations by distributing many of the processes
typically handled by a centralized web application server to the browser on the client machine.
The application framework does this by first wrapping, then extending, browser APIs with
functionality more suitable to object-oriented application development. Rather than forcing you
to model complex workflows with a series of flat HTML pages, the General Interface APIs
enable you to create stateful, interactive, object-based, client applications that look, feel, and
perform as if launched from the local operating system.
Processing Model
By distributing many of the processes usually handled by centralized application servers to the
browser on the client machine, enterprises can deliver full-featured software solutions that
simply run in the browser without any need for extra runtime components or plug-ins.
General Interface is a powerful implementation of model-view-controller (MVC) principles.
Unlike server-centric MVC architectures, with General Interface, the view processes are
distributed to the web browser. This design removes the view generation work from servers
and reduces demands on bandwidth, making applications far more scalable. The design also
leverages the power of the client CPU to deliver highly responsive, stateful, full-featured
applications in a browser.
Disadvantages of Server-Based MVC Architecture
In a traditional server-based MVC architecture, all processes run on the server. Requests are
sent to the controller, models are updated, and the view returns a stream of HTML and data to
the browser where it is rendered for the user. This results in system latency and reduced
functional possibilities for the end user. The resulting HTML typically comprises 80%
presentation instructions and 20% data. The browser is simply an HTML page rendering
device.
Copyright © TIBCO Software Inc. All Rights Reserved.
4
Rich Internet Application-Based MVC Architecture
In a rich Internet application based MVC architecture, view processes are distributed to the
browser where they run on the client system. The distributed view employs an MVC
architecture of its own, turning the browser into an RIA environment. Because client-side
objects generate the HTML, significantly fewer processes need run on the server. Bandwidth is
optimized for data. Application performance and scalability are significantly enhanced.
General Interface software enables the view portion of the MVC architecture to be distributed
to and run on a web browser running on the client system. This approach has the following
benefits:
Improves application scalability by removing significant server processes
Decreases latency by using substantially all the bandwidth to deliver data (instead of a
minority of bandwidth for data in the traditional model where HTML markup takes up
most of a transmission)
Delivers full-featured application performance and rich GUI features to an unmodified
web browser, without plug-ins, runtime environments, and extra software to install
Architecture
The General Interface MVC implementation means that the General Interface components are
broken down into three architectural elements, each of which plays a crucial role in how the
component behaves.
Model
The Model maintains the state data for each object instance. For example, the model portion of
the Matrix (jsx3.gui.Matrix) object tracks state properties such as the number of columns, the
widths of each column, the outer dimensions for the table, how to sort which column, and so
on.
View
The View refers to how the object instance is actually displayed on the client machine. A good
way to envision a view is to think of object look-and-feel. The following figure shows different
views that the Tab object can produce:
Copyright © TIBCO Software Inc. All Rights Reserved.
5
Controller
The Controller dictates how a given object will interact with events. Events include
user-initiated events and system-initiated events, including mouse-clicks, key-presses,
drag-and-drop operations, screen and component repainting, and calls from the application
business logic.
How MVC Elements Work Together
The best way to describe how these three elements work together is to describe a typical GUI
object, such as the Tab object, in context of these three elements.
The easiest aspect of MVC to understand is the view. The view is what end users see when they
use the application. The three Tab object instances shown in the previous figure, for example,
have a consistent view that adheres to the visual design for the application.
With the view element now defined, it's easier to explain the model portion of the MVC
architecture. The model element allows the given Tab object to keep an index of properties that
uniquely define its state in memory (see the following table). The model is unaffected by how
the tab visually displays its state. Instead, it maintains a single Boolean property, active, that is
set to true or false.
From an architectural perspective, separating the model from the view means that more of the
code base can be leveraged on future projects. Regardless of whether the view for a Tab object
has beveled edges or graphical icons, the model remains the same. This means that only the
view code for a given class needs to be updated from project to project.
Tab 1
Tab 2
Tab 3
Text
Account Info Search Results Account History
Index
0
1
2
Active
true
false
false
activeColor
cccccc
cccccc
cccccc
inactiveColor 8c8c8c
8c8c8c
8c8c8c
The controller element updates the model based on events passed from the corresponding
view. For example, a user clicks the displayed view for a Tab object in an attempt to bring the
contents of that tab forward in the view. The view, in this case the actual HTML that is
displayed, then processes the click event by calling the controller requesting that the selected
tab be made active, and therefore brought forward in the view. Next, the controller queries the
model to validate that the Tab object that was clicked is not already active. If the given Tab
object is already active, the controller exits early without applying any changes to the object.
However, if the Tab object is inactive, the controller updates the model by setting the active
property to true. And then, the view is repainted in the browser to visually depict the new
model value.
In general, the model passes data to the corresponding view for rendering. The view then
passes events to the controller for processing. This updates the model to reflect the property
Copyright © TIBCO Software Inc. All Rights Reserved.
6
passes events to the controller for processing. This updates the model to reflect the property
changes, providing a closed feedback loop.
Architecture Details
Applications that leverage General Interface run in a standard browser. No other software is
required to run the application on a client machine. This means that the client application is
completely native, allowing for stable, fast, and true thin client, zero-install applications. No
applets, plug-ins, or ActiveX controls are required to deliver robust application functionality.
To deliver high functionality in a standard browser environment, General Interface leverages
many of the same principles that make server-side architectures successful. General Interface
software is founded upon solid, object-oriented principles. This means that robustly scalable
functionality requires only a minimal footprint of client memory and network bandwidth. The
class libraries that underlie the software are lean, comprising over 400 logical functions in
approximately 300KB of data. Due to the object-oriented architecture and object inheritance
framework, over 2,200 function calls are actually available at runtime across more than 40
foundation objects. Furthermore, because the class libraries follow a consistent object-oriented
structure, they can be modified as necessary by runtime updates, additions, and even
sub-classing. In addition, new objects can also be built by combining foundation objects, all
without increasing the overall framework size.
To manage such a broad array of functionality, General Interface employs a multi-tiered
approach to object design. Essentially, any available function can be categorized into four
distinct layers, as illustrated in the following figure. These include:
Client logic layer This layer consists of all programmatic logic, such as business rules and
client-specific functionality.
Presentation layer This layer is founded upon solid object oriented design principles that
leverage many of the key concepts used by Java Swing, without the overhead of the Java
Runtime Environment (JRE). A familiar Java-like syntax is used, generating complex
HTML and JavaScript that runs natively in the browser, rather than Java class files that
require the browser to load the memory-intensive JRE.
Data layer This layer is a client-side data cache used for quick access to application data.
All data is cached as parsed XML and can be accessed at runtime through XSL queries.
This is similar to the way SQL is used to interface with relational data stores on the
server.
Communication layer This layer manages threaded communications with remote web
servers using web service protocols such as SOAP and XML-RPC, as well as traditional
web protocols like HTTP GET/POST.
Copyright © TIBCO Software Inc. All Rights Reserved.
7
Application Layer
General Interface provides libraries of functional objects that hide the complexities of DHTML
development. You do not need to be familiar with the specifics of HTML in a given browser
and can focus instead on the actual business logic for the application. You write JavaScript to
enforce business rules and workflow, not to move HTML around the screen. Accordingly,
enterprises get more yield out of their development resources.
Presentation Layer
General Interface employs a presentation approach similar to Java Swing but without the
overhead of the Java Runtime Environment. Developers familiar with container-based GUIs
will find similar constructs in the General Interface environment. Application components,
screens, and widgets are constructed from General Interface GUI objects and saved as object
sets that can be imported or exported at runtime to deliver incremental application
functionality on demand. Accordingly, businesses can leverage the General Interface
components out of the box or create libraries of their own reusable application components.
General Interface provides customizable GUI components. Prototypes are available in the
System folder of the Component Libraries palette as a starting point. From these components,
you can create custom components.
Note that different prototype objects can be instances of the same base class. For example, Text
Box provides the base class for instances of a text box, a text area, and a password field.
Similarly the Block class is used as the base for Label and Image.
General Interface GUI objects generate custom DHTML and JavaScript on the client. This
design differs from traditional ASP or JSP architectures, where the presentation is generated on
the server, and the resulting stream of HTML is returned to the browser for rendering. With
General Interface, presentation generation doesn't occur on the server. Therefore, transfer of
presentation instructions over the network isn't necessary. The result is highly responsive GUI
applications that free up bandwidth for data (not HTML) and reduce the number of servers and
server software licenses necessary to deliver a given application.
Copyright © TIBCO Software Inc. All Rights Reserved.
8
Data Layer
The client-side XML data cache provides you with a consistent API for data access and
management. Benefits include:
Efficient data reuse Multiple client objects within the presentation layer can use the same
XML document for their source data, keeping redundant data transfer to a minimum.
Runtime data access Since server data is stored as XML, integrity is retained, allowing
for DOM-based access to the original data.
Cache management methods A robust API allows you to write application-specific
business rules that keep the client-side data synchronized with the server.
Client-side HTML generation With HTML generation on the client, server
communications are unnecessary for presentation changes such as sorting and styling.
Container Architecture
General Interface uses a container-based model for visual components, similar to that of Java
Swing and other object-based GUIs. Rather than treating a web application as a series of
hyperlinked pages, this architecture provides true object modeling when building an
application.
Container-based architectures have significant advantages, including:
Intelligent data refresh Specific containers can be targeted for updates while others
remain untouched. Compared with refreshing an entire HTML page, less network
bandwidth and CPU time is required.
Incremental functionality An application can import additional object sets only when
required. The application initializes and responds faster because only a minimum object
set is loaded. User actions can drive the loading of additional functionality. General
Interface Builder is an example of a robust application that loads functionality on
demand.
Modular design paradigm The ability to work in a familiar, modular environment that is
more efficient than HTML. High-level objects, such as Matrix and Dialog, take the place
of div and span elements.
Communication Layer
General Interface supports multiple protocols for communicating with services in the network.
The basic supported interactions, which all function over HTTP/S, include the following.
Communication Type
Outbound Request Format
XML GET
URL with Name-value pairs XML
SOAP
XML/SOAP
HTTP GET
URL with Name-Value Pairs XML/HTML/text
HTML FORM POST/GET HTML Form
Expected Response Format
XML/SOAP
XML/HTML
A key principle that drives the General Interface communication efficiency is to limit refresh to
subsets of the screen, not the entire browser window. To facilitate this, General Interface
improves and extends the traditional click-and-refresh APIs provided by the browser.
Developers familiar with web application development have traditionally used standard
approaches like HTML frames. Consider a standard web mail client, for example. To improve
Copyright © TIBCO Software Inc. All Rights Reserved.
9
approaches like HTML frames. Consider a standard web mail client, for example. To improve
the user experience, the left frame persistently displays various folders and tools, while the
right frame displays dynamic data. Although this design is adequate, there is no question that a
web mail client is far less useable than an installed executable, such as Microsoft Outlook.
Technologies that provide single-page persistence in a web browser do exist, but these often
leverage a client-side Java applet that requires loading the Java Runtime Environment into
client memory or running a specific server platform. However, this design can quickly
undermine application stability and available client-side memory.
Features
In addition to providing a powerful and efficient architecture, General Interface makes it easy
to develop and deploy applications. Industry-standard technology is used, so knowledge of
existing technologies can be leveraged.
Ease of Deployment
The General Interface application framework and all General Interface applications are
composed of JavaScript, XML, and CSS files. To deploy the environment and applications, you
simply include a reference to these files in an HTML page that can be accessed by an end user
from any HTTP or HTTPS server. The end user types the URL into a browser and starts using
the General Interface application. To restrict and secure access to your application, use your
existing mechanism for securing web page access.
Support for Industry Standards and Best Practices
General Interface uses industry standard and widely accepted technologies in both its
underlying code (JavaScript, XML, and CSS) and overall architecture (Model-View-Controller
and multi-tier design). Best-practice, server-side tasks are migrated to the browser to deliver the
same successful results, maintainable code, and scalable performance. General Interface takes
best-practice approaches from the server and implements them in the browser.
Scalable Architecture
The fastest page server simply cannot compete with locally served data. Load balancing,
additional processors, page pre-caching, and any number of server-side enhancements are all
ultimately short-term solutions. Rather than attempting to scale the server to meet the needs of
the nth end user, consider a paradigm where each end user provides the resources for their
own processing needs.
Unlike traditional server architectures, General Interface runs on the client, using the client
CPU for data presentation and interaction. Even the General Interface foundation classes that
facilitate this process are cached on the client. This means after a General Interface application
is accessed, only raw data is requested from the server. Since no HTML needs to be transferred
to the client, bandwidth is freed up to deliver more data to the end user more quickly. In
addition, because presentation processes are now distributed to the client, servers no longer
need to generate HTML for each connected user. With HTML generation processes no longer
running on the server, the ratio of servers to end users is greatly improved.
Copyright © TIBCO Software Inc. All Rights Reserved.
10
Development Tools
You can develop General Interface client applications and components using General Interface
Builder, a script authoring environment, or your favorite IDE. Once the General Interface
runtime environment is loaded into an HTML page in the browser, you can directly interact
with the General Interface GUI, data, and communication objects using JavaScript APIs.
General Interface Builder, a rapid deployment environment, is a visual authoring environment
optimized for creating General Interface applications and can run either as a standalone tool or
within the embedded browser module of your favorite IDE.
As a standalone development environment, General Interface Builder provides a powerful,
rapid application assembly and scripting environment. You can drag and drop GUI
components, connect to services, examine cached data, and implement the behaviors of the
client application using JavaScript business logic and events.
When running General Interface Builder in conjunction with your favorite IDE, you have a
complete end-to-end live development and testing environment with object, code, message, and
error inspection.
Copyright © TIBCO Software Inc. All Rights Reserved.
11
Chapter 2 Starting General Interface Builder
This chapter explains how to start General Interface Builder and how to choose a workspace.
Launching General Interface Builder
General Interface Builder Launch Modes
Choosing a Workspace
Running Multiple Instances of General Interface Builder
Launching General Interface Builder
General Interface Builder must run from a local disk. So that you can load and save files,
General Interface requires access rights to any files that you're working with.
To launch General Interface Builder:
1. Browse to the General Interface installation directory, tibco-gi-version_-pro, and
double-click a GI_Builder.* file. See General Interface Builder Launch Modes.
2. Click Yes in the browser prompt, if any, to allow reading and writing files to and from
the file system.
a. The ActiveX prompt appears on Internet Explorer. On Firefox, you will see two
security prompts. Check the Remember this setting box before clicking Allow.
b. If General Interface Builder fails to launch and an alert notifies you that a required
resource is unavailable, see General Interface Builder Doesn't Launch.
3. If this is the first time you are starting General Interface Builder:
a. Read the license agreement and click Agree.
b. Choose a project workspace. See Choosing a Workspace.
Choosing an existing workspace doesn't replace previous sample
applications with updated sample applications, to prevent
workspace files from being overwritten. Create a new workspace
for the updated sample applications.
4. If the Welcome screen opens, click the Create a New Project or Open an Existing Project
link to begin working on a project. The Welcome screen provides links to more General
Interface resources. If the Welcome screen doesn't open, choose Project > New Project,
Project Recent Projects, or Project > User Projects to begin working on a project.
If you are new to General Interface Builder, see Tutorial on Creating an Application.
General Interface Builder Doesn't Launch
If General Interface Builder displays an alert that says a resource is unavailable, there are
several possible reasons:
The General Interface Builder file is blocked by its own restrictions.
Microsoft's Attachment Manager might block the ZIP file and its contents. To unblock
the ZIP file:
Right-click the ZIP file and click Properties.
Copyright © TIBCO Software Inc. All Rights Reserved.
12
Right-click the ZIP file and click Properties.
On the General tab, click Unblock. If you don't see this button, your file is not
blocked and there's no need to unblock it.
If the file is blocked, an Internet icon displays in the status bar. If
the file isn't blocked, a My Computer icon displays in the status bar.
The ActiveX control wasn't loaded.
Be sure to accept the ActiveX prompt. Internet Explorer uses the Microsoft
ActiveX control for file system access. ActiveX is not required for deployed
General Interface applications.
Also be sure that your browser security settings allow for loading of ActiveX. For
Internet Explorer, enable the setting "Allow active content to run in files on My
Computer" (Tools > Internet Options > Advanced).
General Interface Builder isn't running from the local file system.
Because General Interface Builder requires file access to load and save files, you
must run General Interface Builder from your local file system and have access
rights to any files you are working with.
General Interface Builder Launch Modes
You can start General Interface Builder in different modes.
Launch Mode
Description
HTML mode
Opens General Interface Builder in the selected web browser. File name:
GI_HOME/GI_Builder.html
XHTML mode
Opens General Interface Builder in XHTML mode. This can be useful for
developing and testing applications that run in XHTML pages, such as
portlet applications. File name: GI_HOME/GI_Builder.xhtml Note:
XHTML mode is not supported by Internet Explorer 7.
Console mode
(Internet Explorer
only)
Opens General Interface Builder as an HTML application (HTA). HTAs
are not subject to the same security constraints as web pages, and when
run locally are given privileges to read and write to the local file system.
General Interface Builder occupies the entire screen of your monitor.
Note: Console mode runs only in HTML mode, not in XHTML mode.
File name: GI_HOME/GI_Builder.hta
launch_in_ide.html Launches a project in General Interface Builder in HTML mode. This file
is created automatically in your project directory when you create a
project. Note: Use this file to launch General Interface only during
development, not at runtime. File name: workspace
/JSXAPPS/project_dir/_launch_in_ide.html
You can create a shortcut of a launch page and add it to your browser's favorites.
For more information about files in the General Interface installation directory, see the General
Interface Developer Guide.
Copyright © TIBCO Software Inc. All Rights Reserved.
13
Choosing a Workspace
The first time General Interface Builder launches after installation, the application window is
blank and a dialog prompts you to create or select a workspace directory.
The workspace is the directory that contains your projects, custom add-ins, custom prototypes,
and your user settings for General Interface Builder.
To choose a workspace and open or create a project:
1. Do one of the following:
Click the Browse button in the Create or Locate Workspace dialog to navigate to
an existing directory or to create a new directory.
The workspace must be on your local drive, so General Interface
Builder can read and write files to the local file system.
Click the Choose button to accept the default workspace location. The default
location is C:\Documents and Settings\username_\My Documents\TibcoGI.,
Choosing an existing workspace doesn't replace previous sample
applications with updated sample applications. This built-in
functionality is designed to prevent workspace files from getting
overwritten. Create a new workspace to get the updated sample
applications.
2. Click the Reload Browser button in the Alert dialog to restart General Interface Builder.
The workspace configuration is saved in the browser cookie. If you use a cookie cleaner,
configure it to keep the cookies for the local machine.
For instructions on creating new projects, see Tutorial on Creating an Application.
For more information on workspaces and projects, see the General Interface Developer Guide.
Copyright © TIBCO Software Inc. All Rights Reserved.
14
Running Multiple Instances of General Interface Builder
General Interface Builder is designed to run as multiple instances simultaneously. You can open
multiple instances of General Interface Builder from the same installation folder. Each instance
of General Interface can run a different application or the same application.
Because each instance is sharing the same preferences and settings files, competing
changes to General Interface Builder preferences cannot be persisted.
You can also have multiple instances of General Interface Builder running projects in the same
workspace or from multiple workspaces.
Multiple releases can also be open at the same time. For example, you can open a project in
General Interface 3.1 and also open a copy of that project in 3.2 at the same time.
In addition, you can open multiple instances and multiple releases in different browsers, such
as Internet Explorer and Firefox.
When a project canvas file is saved in a newer version of General Interface Builder, it cannot be
open in an older version.
Copyright © TIBCO Software Inc. All Rights Reserved.
15
Chapter 3 User Interface Basics
This chapter provides an overview of General Interface Builder features.
About the General Interface Builder Interface
About General Interface Builder Projects
About the General Interface Builder Work Area
About General Interface Builder Palettes
Tools and Settings
About the General Interface Builder Interface
Developers familiar with visual, component-based environments such as Microsoft VisualBasic
and Borland JBuilder will notice some parallel constructs in General Interface Builder. Feature
similarities include tools like data connection wizards, event-binding, and object modeling.
The figure shows the main interface elements of General Interface Builder. The default layout is
fully customizable. Any modifications you make to the layout are saved and loaded each time
you start General Interface Builder.
For more information about the user interface, such as menus and toolbars, see General
Interface Component Guide.
Copyright © TIBCO Software Inc. All Rights Reserved.
16
About General Interface Builder Projects
All 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
appear in the Project Files palette.
When you create a project, the default files logic.js and appCanvas.xml are automatically
created and opened in the work area:
logic.js is an empty JavaScript file to which you can add JavaScript code.
appCanvas.xml, is the default GUI component file, where you begin designing your
application user interface.
When you save project files, General Interface Builder saves them to your project directory. For
example, logic.js is by default at this location: workspace/ JSXAPPS/project_namee/ js / logic.js
For more information about workspaces, see Choosing a Workspace.
To access project files, click the JSXAPPS/project_name link in the General Interface Builder
taskbar, located in the lower left area of the IDE.
In releases prior to 3.7, project files appear in the folders that correspond to their
type, regardless of where they are located on the file system. Beginning with Release
3.7, files are in the same location as the file system.
For more information, see the General Interface Developer Guide.
About the General Interface Builder Work Area
The center of General Interface Builder is the work area. In the work area, you can create and
modify application components using palettes and tools, and edit files of types such as XML
and JavaScript.
Work Area Tabs and Editors
The work area is tabbed, so that you can open multiple files simultaneously as you work.
General Interface Builder includes editors for creating and editing files of these types: GUI
components, XML, XSL, JavaScript, CSS (Cascading Style Sheets), dynamic properties, and
mapping rules files. For more information, see the General Interface Developer Guide.
If a file is read-only, a Lock icon appears on the work area tab. To unlock a locked,
read-only file, double-click the Lock icon.
Work Area Views
The views available in the work area are:
Live Component or Grid view
Copyright © TIBCO Software Inc. All Rights Reserved.
17
Live Component or Grid view
Source view
Formatted Source XML (Read Only) view
Rendered HTML (Read Only) view
Component Profile view
For more information, see the General Interface Developer Guide.
About General Interface Builder Palettes
General Interface Builder has palettes on all sides of the work area. You can arrange palates for
convenient access as you work—you can assign them fixed locations, or float them over the
work area. You can also close palettes when you don't need them, then reopen them later from
the Palettes menu.
To arrange a palette on the work area, click its Docking Options button
.
General Interface Builder palettes include:
Component Libraries palette Drag and drop predefined GUI components into the work
area.
Component Hierarchy palette View and manage the hierarchical model of objects in
your application.
Properties Editor palette Set component properties.
Events Editor palette Specify events for components.
Attributes Editor palette Edit component attributes to extend the serialized HTML
representation of components.
XSL Parameters palette Parameterize a component's XSL transformation from CDF to
HTML.
Local Data Cache palette View, open, and edit cached XML and XSL files in memory and
save to disk.
Project Files palette View, open, and edit files referenced in the project.
Recycle Bin palette Recover deleted components from the Recycle Bin.
System Log palette View system logging messages, such as warnings and errors.
Many of the palettes have a context menu. For more information, see the
General Interface Developer Guide.
For more information, see the General Interface Developer Guide.
Copyright © TIBCO Software Inc. All Rights Reserved.
18
Tools and Settings
General Interface Builder has a variety of tools and settings dialogs to assist you as you develop
your applications. For more information, see the General Interface Developer Guide.
Deployment Utility Generate the HTML or XHTML markup for launching deployed
applications.
XML/XSL Merge Tool Merge a source document (XML or XSL) and an XSLT filter
document to test and view the text, HTML, or XML output.
XML Mapping Utility Configure and test data services.
Test Interface Tool Test data services in the XML Mapping Utility.
Color Picker Tool Choose colors in hexadecimal format for use in your JavaScript code
and component files.
Find and Replace Tool Find and replace text in a work area editor.
IDE Settings Modify General Interface Builder IDE preferences for the visual authoring
environment.
Project Settings Modify project settings.
Copyright © TIBCO Software Inc. All Rights Reserved.
19
Chapter 4 Tutorial on Creating an Application
This chapter is a tutorial that describes how to create a simple application using General
Interface Builder.
This tutorial is based on the WSDL_Mapping_1 sample located in the workspace
/JSXAPPS/samples directory. To look at the sample, choose Project > User Projects > Samples >
WSDL_Mapping_1.
Introduction to Creating an Application
Creating a New Project
Creating a Layout
Adding Form Elements to the Application
Cloning Components for an Application
Adding a Button and Button Event
Introduction to Creating an Application
This chapter demonstrates how to build a sample application that looks up city and state
information. In General Interface Builder, you create all the components that make up the
application.
Creating a Sample Application
After you complete this tutorial, you can continue to the next tutorial to connect the
components to a data service and test the application. See the General Interface Developer
Guide.
If you're not familiar with the General Interface Builder user interface, see User Interface Basics
for an introduction.
Copyright © TIBCO Software Inc. All Rights Reserved.
20
Creating a New Project
In this section, you create a new General Interface project. A new project folder is created in the
workspace/JSXAPPS directory, and all application-specific files are created and saved in this
folder. The workspace is the directory that contains your projects, custom add-ins, custom
prototypes, and your user settings for General Interface Builder.
1. Start General Interface Builder and choose a workspace if you haven't yet. If this is the
first time you're starting General Interface Builder, see Starting General Interface Builder.
2. Choose Project > New Project or click the Create a New Project link in the Welcome
screen (Help > Welcome Screen) to open the new project wizard.
3. Choose General Interface Application as the project type, and click Next.
4. Choose the project template and click Next.
Copyright © TIBCO Software Inc. All Rights Reserved.
21
5. Specify a project path and click Finish.
A new project is loaded in the browser window. Two default, empty files are open in the
central work area.
While building this sample application, all project data is stored locally in browser
memory. The application is not automatically saved to the file system. Save the
project before you close or refresh the browser window. If you don't save the project,
the data is lost.
For more information on projects, see About General Interface Builder Projects.
Creating a Layout
In this section, you create an application user interface that includes layout components to
arrange the subcomponents. For all components, position information can be defined in two
ways:
Absolute positioning, with integer values for top, left, height, and width
Relative positioning, using either a percentage of available space or by arranging
components in sequence from top left to bottom right
This tutorial demonstrates both methods of positioning components.
Now that you've created your project, a default GUI component file, appCanvas.xml, is open in a
tab in the work area. The Component Libraries palette displays folders containing prototype
components that can be added to the current component. The Component Hierarchy palette
shows the hierarchical view of components in the GUI component file. Note that block, the
default root component, is created automatically when you create a project.
Copyright © TIBCO Software Inc. All Rights Reserved.
22
To avoid unexpected layout behavior in deployed applications, it's recommended to
use Block as a container only if it meets one of these requirements:
The Block is owned by a layout manager, such as LayoutGrid, Tab, Stack, and
Splitter.
The Block is relatively positioned and has a width of 100%.
The Block is absolutely positioned.
For tips on working with components, see the General Interface Component Guide.
The following steps show you how to create a layout for the application:
1. Expand the Containers folder in the Component Libraries palette and drag a Layout
-Top/Over component to the work area in the center of the General Interface Builder
user interface. This component provides two panes for laying out application
components.
The Component Hierarchy palette shows that the new component, layout (--), is added
as a child of block.
2. Right-click the appCanvas.xml tab at the top of the work area and select Save. The new
layout component is saved in an XML file in the workspace
/JSXAPPS/myAddressLookup/components directory. The appCanvas tab name is red when
the file has unsaved changes and black after changes are saved.
The Component Hierarchy palette looks like this:
The next step is to modify properties for the layout component. Properties are
characteristics that define a component. To modify component properties, you select the
component in the Component Hierarchy palette and edit its properties in the Properties
Editor palette (Palettes > Properties Editor Palette).
3. To work more easily in the Properties Editor palette, click the Docking Options button
on the palette's toolbar and choose Floating.
When you don't need the Properties Editor palette, click the Toggle
Display button
to minimize it. To maximize it again, click the
Properties Editor icon on the General Interface Builder taskbar at the
bottom of the user interface.
4. Select the Layout - Top/Over component in the Component Hierarchy palette and
change the following property values in the Properties Editor palette. To edit a field,
type a value in the Value column and press the Tab or Enter key to save the value. The
Copyright © TIBCO Software Inc. All Rights Reserved.
4.
23
type a value in the Value column and press the Tab or Enter key to save the value. The
Name property is an internal name for the layout object.
Name: Set property value to lytAddressLookup
Rows Array: Set property value to 50,*
The Properties Editor palette looks like this:
Notice that when you change the Name property, the name in the Component
Hierarchy palette also changes.
The sample address lookup layout requires several subcomponents, which you add and
customize in the following steps.
Customizing Pane Properties
In this section, you set the properties for each pane in a Layout component, including
background color, size, and display name.
Many of the properties have a list of dynamic properties you can access from the Properties
Editor palette context menu . For more information, see the General Interface Developer Guide.
Copyright © TIBCO Software Inc. All Rights Reserved.
24
Properties Editor
To customize pane properties, complete the following steps:
1. Expand the lytAddressLookup node in the Component Hierarchy palette. Select the first
pane component and modify its properties in the Properties Editor palette as follows:
Name: Set property value to paneInput
BG Color: Set property value to @Solid Medium
Padding: Set property value to @8Pixel
Border: Set property value to @No jsxborder
2. Select the second pane component and modify its properties in the Properties Editor
palette as follows:
Name: Set property value to paneOutput
BG Color: Set property value to @Solid Light
Border: Set property value to @Outset
3. To insert a property value that starts with the @ symbol, right-click the Value column
next to the property name and choose it from the context menu. Note that after a
dynamic property is selected, the explicit value displays in the Value field next to the
name of the dynamic property.
The component hierarchy and the work area should look similar to the following:
Copyright © TIBCO Software Inc. All Rights Reserved.
25
4. Save the appCanvas.xml component.
For more information on components, see the General Interface Component Guide.
Adding Form Elements to the Application
In this section, you'll add text boxes and labels to describe the text boxes. Text boxes are
required for entering a zip code and for displaying returned city and state information. The
sample application also requires a button for calling the web service. You'll add the button later
in the tutorial.
To add form elements to the application, complete these steps:
1. Open the Block folder in the Component Libraries palette and drag a Label component
to the top pane component, paneInput, in the work area.
2. Open the Form Elements folder in the Component Libraries palette and drag a Text Box
component to the paneInput component in the Component Hierarchy palette.
The component hierarchy should look like the following:
Copyright © TIBCO Software Inc. All Rights Reserved.
26
3. Select the label component of paneInput in the Component Hierarchy palette and enter
the following values in the Properties Editor palette. For padding and margin, be sure to
enter a space between each number.
Name: Set the property value to lblZipcode
Width: Set the property value to 100
Height: Set the property value to 18
Text/HTML: Set the property value to Type Zip Code
Padding: Set the property value to 4 0 0 0
Margin: Set the property value to 0 4 0 0
4. Select the textbox child component of paneInput and enter the specified values in the
Properties Editor palette. For padding and margin, be sure to enter a space between each
number.
Name: Set the property value to txtZipcode
Height: Set the property value to 18
Margin: Set the property value to 0 4 0 0
To learn more about properties in the Properties Editor palette,
hover the mouse over the property name or see General Interface
GUI Property Reference.
For properties that require CSS values, such as margin and padding, you can use
General Interface syntax or W3C valid CSS syntax. See the General Interface
Component Guide.
5. Drag and drop another Layout - Top/Over component from the Containers folder in the
Component Libraries palette onto the lower paneOutput component. You need a layout
here, because you'll be adding two rows of components for the return information, city
and state.
6. Change the new layout(--) component properties in the Properties Editor palette to the
following:
Name: Set the property value to lytOutput
Rows Array: Set the property value to 50,***
In the next section, you'll make two clones of the paneInput pane to create two panes for the
lytOutput component. These panes are for the city and state information that the web service
returns.
Copyright © TIBCO Software Inc. All Rights Reserved.
27
Cloning Components for an Application
Cloning components saves time in creating your application and in setting component
properties. A clone is a copy of a selected component. In this application, all three panes for zip
code, city, and state will have a text label and a text box, all with similar properties.
In this section, you'll remove the existing lytOutput child ** panes. Then you'll make clones of
paneInput and move them to the lytOutput component. The two bottom panes will contain the
city and state information returned by the Address Lookup Service.
To create clones of the paneInput component, complete these steps:
1. Expand the lytOutput component in the Component Hierarchy palette, select both
children, and click the Recycle button
on the toolbar to delete the two child panes.
Instead, you'll use clones of the paneInput component.
Use Ctrl+click to select multiple components. Use Shift+click to choose a range of
components. If you delete components by mistake, you can recover them from the
Recycle Bin. Choose Palettes > Recycle Bin.
2. Select paneInput in the Component Hierarchy palette and click the Clone button
on
the toolbar two times to create two clones. Two clones of the paneInput ** component
display at the bottom of the Component Hierarchy palette.
3. Select the two paneInput clones and drag and drop them on the lytOutput component
in the Component Hierarchy palette.
The component hierarchy and work area should look like the following:
4. Change the following properties for the panelinput (first child of lytOutput) in the
Copyright © TIBCO Software Inc. All Rights Reserved.
28
4. Change the following properties for the panelinput (first child of lytOutput) in the
Properties Editor palette:
Name: Set property value to paneCity
BG Color: Set property value to @Solid Light
5. Change the following properties for lblZipcode in the Properties Editor palette:
Name: Set property value to lblCity
Text/HTML: Set property value to City
6. Change the following properties for txtZipcode in the Properties Editor palette:
Name: Set property value to txtCity
Enabled: Set property value to Disabled
7. Change the following properties for the panelinput (second child of lytOutput) in the
Properties Editor palette:
Name: Set property value to paneState
BG Color: Set property value to @Solid Light
8. Change the following properties for lblZipcode in the Properties Editor palette:
Name: Set property value to lblState
Text/HTML: Set property value to State
9. Change the following properties for txtZipcode in the Properties Editor palette:
Name: Set property value to txtState
Enabled: Set property value to Disabled
The txtCity and txtState text boxes are set to Disabled, because user input isn't
allowed for these text boxes. The Address Lookup Service will return city and
state values in these text boxes.
The application should look similar to the following:
10. Save your application.
Next, you'll add a button and a button event to the application.
Copyright © TIBCO Software Inc. All Rights Reserved.
29
Adding a Button and Button Event
Now, you'll add a button and a button event. After entering the zip code in the application, the
user will click the button to send the input data to the web service. The button event won't
work until you generate the code that calls the web service.
1. Drag a Button component from the Form Elements folder in the Component Libraries
palette to the paneInput component and modify its properties as follows:
Name: Set property value to btnLookup
Text/HTML: Set property value to Find City and State
BG Color: Set property value to #ADADC6
You can also use the Color Picker to choose color values. Choose Tools > Color
Picker You can also click in the Value field in the Properties Editor palette and
click the Color Picker button
to open the Color Picker.
2. Choose Palettes > Events Editor Palette to open the Events Editor palette if it's not open.
3. Click the Docking Options button
on the Events Editor palette toolbar and choose
Floating to make working in the Events Editor palette easier.
4. Delete this JavaScript statement in the Value field of the Execute event alert('hello');
5. Type in the following JavaScript statement in the Value field of the Execute event
eg.service.callReturnCityState();
This button event won't work until you define this function in another tutorial. This
function calls the web service that returns city and state information. When a user inputs
a zip code and clicks the button, the zip code is sent to the web service.
6. Save the project and choose Project > Run Project to run your application and see what it
looks like. The application should look similar to this:
7. Close the running application.
The objects created in the previous steps are live application objects. When you save the parent
component to disk, the parent and all child components are saved with the current object states.
Now that the user interface is complete, the next step is to create mappings between application
objects and data elements. Once you've created the mappings, you'll generate the code that calls
the web service.
Copyright © TIBCO Software Inc. All Rights Reserved.
30
the web service.
To continue working with this application, see the General Interface Developer Guide. In the
next tutorial, you connect the components to a web service and test the application.
Copyright © TIBCO Software Inc. All Rights Reserved.