8/3/2019 Tib Gi Pe Getting Started
1/58
TIBCO General Interface
Getting Started
Professional EditionSoftware Release 3.3February 2007
8/3/2019 Tib Gi Pe Getting Started
2/58
Important Information
SOME TIBCO SOFTWARE EMBEDS OR BUNDLES OTHER TIBCO SOFTWARE. USE OF SUCHEMBEDDED 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 BYANY OTHER TIBCO SOFTWARE OR FOR ANY OTHER PURPOSE.
USE OF TIBCO SOFTWARE AND THIS DOCUMENT IS SUBJECT TO THE TERMS ANDCONDITIONS OF A LICENSE AGREEMENT FOUND IN EITHER A SEPARATELY EXECUTEDSOFTWARE LICENSE AGREEMENT, OR, IF THERE IS NO SUCH SEPARATE AGREEMENT,THE CLICKWRAP END USER LICENSE AGREEMENT WHICH IS DISPLAYED DURINGDOWNLOAD OR INSTALLATION OF THE SOFTWARE (AND WHICH IS DUPLICATED INTIBCO GENERAL INTERFACE INSTALLATION). USE OF THIS DOCUMENT IS SUBJECT TOTHOSE TERMS AND CONDITIONS, AND YOUR USE HEREOF SHALL CONSTITUTEACCEPTANCE OF AND AN AGREEMENT TO BE BOUND BY THE SAME.
This document contains confidential information that is subject to U.S. and international copyrightlaws and treaties. No part of this document may be reproduced in any form without the writtenauthorization of TIBCO Software Inc.
TIB, TIBCO, TIBCO Adapter, Predictive Business, Information Bus, The Power of Now, TIBCOGeneral Interface, TIBCO General Interface Framework, and TIBCO General Interface Builder areeither registered trademarks or trademarks of TIBCO Software Inc. in the United States and/orother countries.
All other product and company names and marks mentioned in this document are the property oftheir 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. PLEASE SEE THE README.TXT FILE FOR THEAVAILABILITY OF THIS SOFTWARE VERSION ON A SPECIFIC OPERATING SYSTEMPLATFORM.
THIS DOCUMENT IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHEREXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OFMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, OR NON-INFRINGEMENT.THIS DOCUMENT COULD INCLUDE TECHNICAL INACCURACIES OR TYPOGRAPHICALERRORS. CHANGES ARE PERIODICALLY ADDED TO THE INFORMATION HEREIN; THESECHANGES 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, DIRECTLYOR INDIRECTLY, BY OTHER DOCUMENTATION WHICH ACCOMPANIES THIS SOFTWARE,INCLUDING BUT NOT LIMITED TO ANY RELEASE NOTES AND "READ ME" FILES.
Copyright 2001-2007 TIBCO Software Inc. ALL RIGHTS RESERVED.
TIBCO Software Inc. Confidential Information
8/3/2019 Tib Gi Pe Getting Started
3/58
TIBCO General Interface Getting Started
| iii
Contents
Figures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii
Related Documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viii
TIBCO General Interface Documentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viiiFurther Information . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viii
Typographical Conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . x
How to Contact TIBCO Customer Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xii
Chapter 1 Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Rich Internet Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
TIBCO General Interface and AJAX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2Processing Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Disadvantages of Server-Based MVC Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Rich Internet Application-Based MVC Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
How MVC Elements Work Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Architecture Details . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Container Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Features. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Ease of Deployment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Support for Industry Standards and Best Practices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Scalable Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Development Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Chapter 2 Introduction to TIBCO General Interface Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Starting TIBCO General Interface Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
General Interface Builder Launch Modes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Choosing a Workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Running Multiple Instances of General Interface Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
User Interface Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Projects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Work Area. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Palettes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
8/3/2019 Tib Gi Pe Getting Started
4/58
TIBCO General Interface Getting Started
iv | Contents
Chapter 3 Tutorial: Creating an Application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Creating a New Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Creating a Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Customizing Pane Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Adding Form Elements to the Application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Cloning Components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Adding a Button and Button Event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Further Information . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
8/3/2019 Tib Gi Pe Getting Started
5/58
TIBCO General Interface Getting Started
|v
Figures
Figure 1 Server-based MVC Architecture. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Figure 2 RIA MVC Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Figure 3 Tab Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Figure 4 Tab Object View. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Figure 5 TIBCO General Interface Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Figure 6 TIBCO General Interface Builder User Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Figure 7 Work Area Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
8/3/2019 Tib Gi Pe Getting Started
6/58
TIBCO General Interface Getting Started
vi | Figures
8/3/2019 Tib Gi Pe Getting Started
7/58
TIBCO General Interface Getting Started
|vii
Preface
TIBCO General Interface consists of two components: TIBCO General InterfaceBuilder and TIBCO General Interface Framework.
TIBCO General Interface Builder is a development environment for building richInternet applications. The object modeling features of General Interface Builderenable developers to quickly create reusable GUI components and assemble theminto full applications or application modules. Applications can be accessed in aweb browser from a URL, existing HTML page, or portal environment.
General Interface Framework is the distributable runtime framework forrunning browser-based General Interface applications.
Topics
Related Documentation, page viii
Typographical Conventions, page x
How to Contact TIBCO Customer Support, page xii
8/3/2019 Tib Gi Pe Getting Started
8/58
TIBCO General Interface Getting Started
viii | Related Documentation
Related Documentation
This section lists documentation resources you may find useful.
TIBCO General Interface Documentation
The following documents form the TIBCO General Interface documentation set:
TIBCO General Interface Installation Read this manual for General Interfaceinstallation instructions.
TIBCO General Interface Getting Started Read this manual for overviewinformation and a tutorial that explains how to build a TIBCO GeneralInterface application.
TIBCO General Interface Developer Guide Refer to this manual for in-depthinformation about developing and deploying TIBCO General Interfaceapplications.
TIBCO General Interface Component Guide Refer to this manual to learn moreabout components and the Charting add-in, as well as component propertiesand events.
TIBCO General Interface API Reference Refer to this online help content fordescriptions of the TIBCO General Interface JavaScript API functions andmethods.
TIBCO General Interface Migration Read this manual for instructions on
migrating applications from previous General Interface releases. TIBCO General Interface Release Notes Read the release notes for a list of new
and changed features. This document also contains lists of known issues andclosed issues for this release.
To open the documentation in the product, choose Help > Help Contents.Documentation is also available online at http://developer.tibco.com.
Further Information
For further information on TIBCO General Interface Builder, visit TIBCODeveloper Network at http://developer.tibco.com, a comprehensive communitythat provides opportunities to increase your understanding of TIBCO GeneralInterface Builder. Among the many resources at this web site you will find:
Video tutorials
Sample projects
8/3/2019 Tib Gi Pe Getting Started
9/58
TIBCO General Interface Getting Started
Preface | ix
Product documentation
Best practices documents
Forums
8/3/2019 Tib Gi Pe Getting Started
10/58
TIBCO General Interface Getting Started
x | Typographical Conventions
Typographical Conventions
The following typographical conventions are used in this manual.
Table 1 General Typographical Conventions
Convention Use
code font Code font identifies commands, code examples, filenames, pathnames, andoutput displayed in a command window. For example:
UseMyCommand
to start the foo process.bold code
fontBold code font is used in the following ways:
In procedures, to indicate what a user types. For example: Type the usernameadmin.
In large code samples, to indicate the parts of the sample that are ofparticular interest.
In command syntax, to indicate the default value.
italic font Italic font is used in the following ways:
To indicate a document title. For example: See TIBCO BusinessWorks Conceptsfor more details.
To introduce new terms For example: A portal page may contain severalportlets. Portlets are mini-applications that run in a portal.
To indicate a variable in a command or code syntax that you must replace.For example: MyCommandpathname
Keycombinations
Key name separated by a plus sign indicate keys pressed simultaneously. Forexample: Ctrl+C.
Key names separated by a comma and space indicate keys pressed one after theother. For example: Esc, Ctrl+Q.
8/3/2019 Tib Gi Pe Getting Started
11/58
TIBCO General Interface Getting Started
Preface |xi
Table 2 Syntax Typographical Conventions
Convention Use
[ ] An optional item in a command or code syntax.
For example:
MyCommand [optional_parameter] required_parameter
| A logical OR that separates multiple items of which only one may be chosen.
For example, you can select only one of the following parameters:MyCommand para1 | param2 | param3
bold code
fontIn command syntax, indicates the default parameter for a command.
For example, if no parameter is specified, MyCommand is enabled:
MyCommand [enable | disable]
{ } A logical group of items in a command. Other syntax notations may appearwithin each logical group.
For example, the following command requires two parameters, which can beeither param1 and param2 or param3 and param4:
MyCommand {param1 param2} | {param3 param4}
In the next example, the command requires two parameters. The first parametercan be either param1 or param2 and the second can be either param3 or param4:
MyCommand {param1 | param2} {param3 | param4}
In the next example, the command can accept either two or three parameters.The first parameter must be param1. You can optionally include param2 as thesecond parameter. And the last parameter is either param3 or param4.
MyCommand param1 [param2] {param3 | param4}
8/3/2019 Tib Gi Pe Getting Started
12/58
TIBCO General Interface Getting Started
xii | How to Contact TIBCO Customer Support
How to Contact TIBCO Customer Support
The Professional Edition of TIBCO General Interface is unsupported. If youwould like support for this product, you may upgrade to the Enterprise Editionand purchase a Support Contract.
For self-service support, education, and access to the TIBCO Developer Network,visit http://developer.tibco.com.
For an overview of TIBCO Support Services and information about getting startedwith TIBCO Product Support, visit this site
http://www.tibco.com/services/support.
8/3/2019 Tib Gi Pe Getting Started
13/58
TIBCO General Interface Getting Started
|1
v
Chapter 1 Introduction
This chapter provides an introduction to TIBCO General Interface and a broadorientation to the environment.
Topics
Rich Internet Applications, page 2
Processing Model, page 4
Architecture, page 6
Features, page 13
8/3/2019 Tib Gi Pe Getting Started
14/58
TIBCO General Interface Getting Started
2 | Chapter 1 Introduction
Rich Internet Applications
A survey by Forrester Research revealed that 70% of Fortune 2000 CIOs want tostandardize on deploying applications to a web browser. However, of thosesurveyed, more than half stated that the limits of HTML prevented them fromreaching this objective.
Significant investment has been made in browser development since the firstbrowsers were released. As a result of that effort, todays web browsers, such asInternet Explorer and Firefox, do provide a stable environment whereenterprise-grade applications can be deployed. However, despite the volume ofresearch and development, the web browser today remains fundamentallyaligned with the document-centric paradigms that first defined the concept of aweb page. HTML, evolving from its SGML roots, has always been adocument-oriented markup language.
With the advent of XML, DHTML, XHTML, and CSS, the browser becameincreasingly powerful and flexible in its core capabilities. Additionally, the cost ofweb applications was much lower than that of thick client development,
deployment, and maintenance. Yet, as enterprises migrated applications to theweb, they discovered that web applications provided far less interactivity andperformance than the thick-client solutions they were meant to replace. As aresult, many businesses traded off performance for cost, or alternatively, when thedocument paradigm of HTML was insufficient, paid the higher costs ofdeveloping, deploying, and maintaining thick clients. Either way, businesses havehad to choose between web applications and thick clients.
TIBCO General Interface and AJAX
The TIBCO General Interface application framework solves this problem byenabling 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, highlyproductive, service-differentiating GUI functionality with the low-cost profile of
web development, instant distribution, and accessibility.The TIBCO General Interface application framework leverages AJAX(asynchronous communications, JavaScript, and XML), event, and renderingcapabilities of the web browser to instantly create a powerful, object-basedenterprise-grade application environment into which your General Interfaceapplications can be deployed. By working with an object-based environment, asopposed to declarative markup languages, development time is shortened, andthe business can easily distribute, manage, and deploy high performancesolutions.
Ri h I A li i |3
8/3/2019 Tib Gi Pe Getting Started
15/58
TIBCO General Interface Getting Started
Rich Internet Applications |3
The application programming interfaces (APIs) provided by the browser remain aweak point in the development of end user applications more complex thanonline retail shopping. The existing browser APIs are not designed to create
robust enterprise-grade applications. Therefore, development is time-consumingand expensive, maintainability is difficult, and many businesses completely avoidimplementing enterprise web applications. Browsers lack the foundation classesfamiliar to Microsoft Windows programmers and the object-oriented presentationpackages familiar to Java programmers. Instead, HTML browsers provide ageneric API intended for displaying series of hyperlinked web pages that lack thefeatures provided by many thick clients.
TIBCO General Interface solves existing browser limitations by distributing many
of the processes typically handled by a centralized web application server to thebrowser on the client machine. The application framework does this by firstwrapping, then extending, browser APIs with functionality more suitable toobject-oriented application development. Rather than forcing you to modelcomplex workflows with a series of flat HTML pages, the General Interface APIsenable you to create stateful, interactive, object-based, client applications thatlook, feel, and perform as if launched from the local operating system.
4 | Chapter 1 Introduction
8/3/2019 Tib Gi Pe Getting Started
16/58
TIBCO General Interface Getting Started
4 | Chapter 1 Introduction
Processing Model
By distributing many of the processes usually handled by centralized applicationservers to the browser on the client machine, enterprises can deliver full-featuredsoftware solutions that simply run in the browser without any need for extraruntime components or plug-ins.
TIBCO General Interface is a powerful implementation of model-view-controller(MVC) principles. Unlike server-centric MVC architectures, with GeneralInterface, the view processes are distributed to the web browser. This designremoves the view generation work from servers and reduces demands onbandwidth, making applications far more scalable. The design also leverages thepower of the client CPU to deliver highly responsive, stateful, full-featuredapplications 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 astream of HTML and data to the browser where it is rendered for the user. Thisresults in system latency and reduced functional possibilities for the end user. Theresulting HTML typically comprises 80% presentation instructions and 20% data.The browser is simply an HTML page rendering device.
Figure 1 Server-based MVC Architecture
Processing Model |5
8/3/2019 Tib Gi Pe Getting Started
17/58
TIBCO General Interface Getting Started
Processing Model |5
Rich Internet Application-Based MVC Architecture
In a rich Internet application based MVC architecture, view processes aredistributed 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 RIAenvironment. Because client-side objects generate the HTML, significantly fewerprocesses need run on the server. Bandwidth is optimized for data. Applicationperformance and scalability are significantly enhanced.
Figure 2 RIA MVC Architecture
General Interface software enables the view portion of the MVC architecture to bedistributed to and run on a web browser running on the client system. Thisapproach 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 whereHTML markup takes up most of a transmission)
Delivers full-featured application performance and rich GUI features to anunmodified web browser, without plug-ins, runtime environments, and extrasoftware to install
6 | Chapter 1 Introduction
8/3/2019 Tib Gi Pe Getting Started
18/58
TIBCO General Interface Getting Started
6 | Chapter 1 Introduction
Architecture
The General Interface MVC implementation means that the General Interfacecomponents are broken down into three architectural elements, each of whichplays a crucial role in how the component behaves.
Model
TheModel maintains the state data for each object instance. For example, themodel portion of the Matrix (jsx3.gui.Matrix) object tracks state properties
such as the number of columns, the widths of each column, the outer dimensionsfor the table, how to sort which column, and so on.
View
The View refers to how the object instance is actually displayed on the clientmachine. A good way to envision a view is to think of object look-and-feel.Figure 3 shows several different views that the Tab object can produce:
Figure 3 Tab Objects
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, andcalls 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.
Figure 4 Tab Object View
The easiest aspect of MVC to understand is the view. The view is what end userssee when they use the application. The three Tab object instances shown in
Figure 4, for example, have a consistent view that adheres to the visual design forthe application.
Architecture |7
8/3/2019 Tib Gi Pe Getting Started
19/58
TIBCO General Interface Getting Started
|
With the view element now defined, its easier to explain the model portion of theMVC architecture. The model element allows the given Tab object to keep anindex of properties that uniquely define its state in memory (see Table 1). The
model is unaffected by how the tab visually displays its state. Instead, itmaintains a single Boolean property, active, that is set to true or false.
From an architectural perspective, separating the model from the view means thatmore of the code base can be leveraged on future projects. Regardless of whetherthe view for a Tab object has beveled edges or graphical icons, the model remainsthe same. This means that only the view code for a given class needs to beupdated from project to project.
The controller element updates the model based on events passed from thecorresponding view. For example, a user clicks the displayed view for a Tab objectin an attempt to bring the contents of that tab forward in the view. The view, inthis case the actual HTML that is displayed, then processes the click event bycalling the controller requesting that the selected tab be made active, andtherefore brought forward in the view. Next, the controller queries the model tovalidate that the Tab object that was clicked is not already active. If the given Tabobject is already active, the controller exits early without applying any changes tothe object. However, if the Tab object is inactive, the controller updates the modelby 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. Theview then passes events to the controller for processing. This updates the modelto reflect the property changes, providing a closed feedback loop.
Table 1 Tab Object Models
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
8 | Chapter 1 Introduction
8/3/2019 Tib Gi Pe Getting Started
20/58
TIBCO General Interface Getting Started
|
Architecture Details
Applications that leverage TIBCO 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 ActiveXcontrols are required to deliver robust application functionality.
To deliver high functionality in a standard browser environment, GeneralInterface leverages many of the same principles that make server-sidearchitectures 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 classlibraries that underlie the software are lean, comprising over 400 logical functionsin approximately 300KB of data. Due to the object-oriented architecture and objectinheritance framework, over 2,200 function calls are actually available at runtimeacross more than 40 foundation objects. Furthermore, because the class librariesfollow a consistent object-oriented structure, they can be modified as necessary byruntime updates, additions, and even sub-classing. In addition, new objects canalso be built by combining foundation objects, all without increasing the overall
framework size.To manage such a broad array of functionality, General Interface employs amulti-tiered approach to object design. Essentially, any available function can becategorized into four distinct layers, as illustrated in Figure 5 on page 9. Theseinclude:
Client logic layer This layer consists of all programmatic logic, such asbusiness rules and client-specific functionality.
Presentation layer This layer is founded upon solid object oriented designprinciples that leverage many of the key concepts used by Java Swing,without the overhead of the Java Runtime Environment (JRE). A familiarJava-like syntax is used, generating complex HTML and JavaScript that runsnatively in the browser, rather than Java class files that require the browser toload 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 atruntime through XSL queries. This is similar to the way SQL is used tointerface with relational data stores on the server.
Communication layer This layer manages threaded communications withremote web servers using web service protocols such as SOAP and XML-RPC,as well as traditional web protocols like HTTP GET/POST.
Architecture |9
8/3/2019 Tib Gi Pe Getting Started
21/58
TIBCO General Interface Getting Started
|
Figure 5 TIBCO General Interface Architecture
Application Layer
General Interface provides libraries of functional objects that hide thecomplexities of DHTML development. You do not need to be familiar with thespecifics of HTML in a given browser and can focus instead on the actual businesslogic for the application. You write JavaScript to enforce business rules andworkflow, not to move HTML around the screen. Accordingly, enterprises getmore yield out of their development resources.
Presentation Layer
General Interface employs a presentation approach similar to Java Swing butwithout the overhead of the Java Runtime Environment. Developers familiar withcontainer-based GUIs will find similar constructs in the General Interfaceenvironment. Application components, screens, and widgets are constructed from
General Interface GUI objects and saved as object sets that can be imported orexported at runtime to deliver incremental application functionality on demand.Accordingly, businesses can leverage the General Interface components out of thebox or create libraries of their own reusable application components.
General Interface provides customizable GUI components. Prototypes areavailable in the System folder of the Component Libraries palette as a startingpoint. From these components, you can create custom components.
10 | Chapter 1 Introduction
8/3/2019 Tib Gi Pe Getting Started
22/58
TIBCO General Interface Getting Started
Note that different prototype objects can be instances of the same base class. Forexample, 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 andImage.
General Interface GUI objects generate custom DHTML and JavaScript on theclient. This design differs from traditional ASP or JSP architectures, where thepresentation is generated on the server, and the resulting stream of HTML isreturned to the browser for rendering. With General Interface, presentationgeneration doesnt occur on the server. Therefore, transfer of presentationinstructions over the network isnt necessary. The result is highly responsive GUIapplications that free up bandwidth for data (not HTML) and reduce the number
of servers and server software licenses necessary to deliver a given application.
Data Layer
The client-side XML data cache provides you with a consistent API for data accessand 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 datatransfer 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 writeapplication-specific business rules that keep the client-side data synchronizedwith the server.
Client-side HTML generation With HTML generation on the client, servercommunications are unnecessary for presentation changes such as sorting andstyling.
Container Architecture
TIBCO General Interface uses a container-based model for visual components,
similar to that of Java Swing and other object-based GUIs. Rather than treating aweb application as a series of hyperlinked pages, this architecture provides trueobject modeling when building an application.
Container-based architectures have significant advantages, including:
Intelligent data refresh Specific containers can be targeted for updates whileothers remain untouched. Compared with refreshing an entire HTML page,less network bandwidth and CPU time is required.
Architecture |11
8/3/2019 Tib Gi Pe Getting Started
23/58
TIBCO General Interface Getting Started
Incremental functionality An application can import additional object sets onlywhen required. The application initializes and responds faster because only aminimum object set is loaded. User actions can drive the loading of additionalfunctionality. TIBCO General Interface Builder is an example of a robustapplication that loads functionality on demand.
Modular design paradigm The ability to work in a familiar, modularenvironment that is more efficient than HTML. High-level objects, such asMatrix and Dialog, take the place of div and span elements.
12 | Chapter 1 Introduction
8/3/2019 Tib Gi Pe Getting Started
24/58
TIBCO General Interface Getting Started
Communication Layer
General Interface supports multiple protocols for communicating with services inthe network. The basic supported interactions, which all function over HTTP/S,
include:
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 facilitatethis, General Interface improves and extends the traditional click-and-refreshAPIs provided by the browser. Developers familiar with web applicationdevelopment have traditionally used standard approaches like HTML frames.Consider a standard web mail client, for example. To improve the userexperience, the left frame persistently displays various folders and tools, whilethe right frame displays dynamic data. Although this design is adequate, there isno 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, butthese often leverage a client-side Java applet that requires loading the JavaRuntime Environment into client memory or running a specific server platform.However, this design can quickly undermine application stability and availableclient-side memory.
Table 2 Supported Interactions
CommunicationType
Outbound Request FormatExpected ResponseFormat
XML GET URL with Name-value pairs XML
SOAP XML/SOAP XML/SOAP
HTTP GET URL with Name-Value Pairs XML/HTML/text
HTML FORMPOST/GET
HTML Form XML/HTML
Features |13
8/3/2019 Tib Gi Pe Getting Started
25/58
TIBCO General Interface Getting Started
Features
In addition to providing a powerful and efficient architecture, TIBCO GeneralInterface makes it easy to develop and deploy applications. Industry-standardtechnology is used, so knowledge of existing technologies can be leveraged.
Ease of Deployment
The General Interface application framework and all General Interfaceapplications are composed of JavaScript, XML, and CSS files. To deploy theenvironment and applications, you simply include a reference to these files in anHTML 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 Interfaceapplication. To restrict and secure access to your application, use your existingmechanism for securing web page access.
Support for Industry Standards and Best PracticesGeneral Interface uses industry standard and widely accepted technologies inboth its underlying code (JavaScript, XML, and CSS) and overall architecture(Model-View-Controller and multi-tier design). Best-practice, server-side tasksare migrated to the browser to deliver the same successful results, maintainablecode, and scalable performance. General Interface takes best-practice approachesfrom the server and implements them in the browser.
Scalable Architecture
The fastest page server simply cannot compete with locally served data. Loadbalancing, additional processors, page pre-caching, and any number ofserver-side enhancements are all ultimately short-term solutions. Rather thanattempting to scale the server to meet the needs of the nth end user, consider aparadigm where each end user provides the resources for their own processing
needs.Unlike traditional server architectures, TIBCO General Interface runs on theclient, using the client CPU for data presentation and interaction. Even the TIBCOGeneral Interface foundation classes that facilitate this process are cached on theclient. This means after a TIBCO General Interface application is accessed, onlyraw data is requested from the server. Since no HTML needs to be transferred tothe client, bandwidth is freed up to deliver more data to the end user more
14 | Chapter 1 Introduction
8/3/2019 Tib Gi Pe Getting Started
26/58
TIBCO General Interface Getting Started
quickly. In addition, because presentation processes are now distributed to theclient, servers no longer need to generate HTML for each connected user. WithHTML generation processes no longer running on the server, the ratio of serversto end users is greatly improved.
Development Tools
You can develop TIBCO General Interface client applications and componentsusing General Interface Builder, a script authoring environment, or your favoriteIDE. Once the TIBCO General Interface runtime environment is loaded into anHTML 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 authoringenvironment optimized for creating General Interface applications and can runeither as a standalone tool or within the embedded browser module of yourfavorite IDE.
Features |15
8/3/2019 Tib Gi Pe Getting Started
27/58
TIBCO General Interface Getting Started
As a standalone development environment, TIBCO General Interface Builderprovides a powerful, rapid application assembly and scripting environment. Youcan drag-and-drop GUI components, connect to services, examine cached data,and implement the behaviors of the client application using JavaScript businesslogic and events.
When running TIBCO General Interface Builder in conjunction with your favoriteIDE, you have a complete end-to-end live development and testing environmentwith object, code, message, and error inspection, plus a runtime JavaScriptdebugger.
16 | Chapter 1 Introduction
8/3/2019 Tib Gi Pe Getting Started
28/58
TIBCO General Interface Getting Started
|17
8/3/2019 Tib Gi Pe Getting Started
29/58
TIBCO General Interface Getting Started
Chapter 2 Introduction to TIBCO General Interface
Builder
This chapter explains how to start TIBCO General Interface Builder and alsoprovides an overview of General Interface Builder features.
Topics
Starting TIBCO General Interface Builder, page 18
User Interface Basics, page 22
18 | Chapter 2 Introduction to TIBCO General Interface Builder
8/3/2019 Tib Gi Pe Getting Started
30/58
TIBCO General Interface Getting Started
Starting TIBCO General Interface Builder
TIBCO General Interface Builder must be served from a local disk so that editscan be saved to disk.
To start TIBCO General Interface Builder, complete the following steps:
1. Start TIBCO General Interface Builder according to the edition you have:
Enterprise Edition From the Microsoft Windows Start menu, select AllPrograms > TIBCO > TIBCO General Interface - Enterprise Edition -version - > and choose a General Interface Builder launch mode. See
General Interface Builder Launch Modes on page 19.
You can also browse to the TIBCO General Interface installation directory,tibco/gi/version, and double-click a GI_Builder.* file.
Professional Edition Browse to the TIBCO General Interface installationdirectory,tibco-gi-version-pro, and double-click a GI_Builder.* file. SeeGeneral Interface Builder Launch Modes on page 19.
2. Click Yes in the browser prompt, if any, to allow reading and writing files toand from the file system.
3. If this is the first time you are starting General Interface, complete thefollowing:
Read the license agreement and click Agree.
Choose a project workspace. See Choosing a Workspace on page 20.
4. Choose to open or create a project in the Open/Create Project dialog.
If you are new to General Interface Builder, see Tutorial: Creating an Application
on page 27.
Choosing an existing workspace doesnt replace previous sample applicationswith updated sample applications. This built-in functionality is designed toprevent workspace files from getting overwritten. Create a new workspace to getthe updated sample applications.
Starting TIBCO General Interface Builder |19
8/3/2019 Tib Gi Pe Getting Started
31/58
TIBCO General Interface Getting Started
General Interface Builder Launch Modes
TIBCO General Interface Builder can be started in different modes as described inthe following table.
For more information about files in the General Interface installation directory, seeTIBCO General Interface Files and Folders in TIBCO General Interface Developer
Guide.
Table 3 General Interface Builder Launch Modes
Launch Mode Description
HTML mode Opens TIBCO General Interface Builder in the selected webbrowser.
File name: GI_HOME/GI_Builder.html
launch_in_ide.html Launches a project in TIBCO GeneralInterface Builder (HTML mode). This file is createdautomatically in your project directory when you create aproject. Use this file only during development, not atruntime.
File name:workspace/JSXAPPS/project_dir/launch_in_ide.html
XHTML mode Opens TIBCO General Interface Builder in XHTML mode.This can be useful for developing and testing applicationsthat run in XHTML pages, such as portlet applications.
File name: GI_HOME/GI_Builder.xhtml
Console mode
(InternetExplorer only)
Opens TIBCO General Interface Builder as an HTMLapplication (HTA). HTAs are not subject to the same security
constraints as web pages and when run locally are givenprivileges to read and write to the local file system. TIBCOGeneral Interface Builder occupies the entire screen of yourmonitor. Note that console mode runs only in HTML mode,not in XHTML mode.
File name: GI_HOME/GI_Builder.hta
You can also create a shortcut of a launch page and add it to your browsersfavorites.
20 | Chapter 2 Introduction to TIBCO General Interface Builder
http://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdf8/3/2019 Tib Gi Pe Getting Started
32/58
TIBCO General Interface Getting Started
Choosing a Workspace
The first time TIBCO General Interface Builder launches after installation, theapplication 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, complete the following steps:
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. Click the Choose button to accept the default workspace location. The
default location is C:\Documents and Settings\username\MyDocuments\TibcoGI.
2. Click the Reload Browserbutton in the Alert dialog to restart GeneralInterface Builder.
3. Choose Create New Project or Open Existing Project in the Open/Createdialog.
For instructions on creating new projects, see Chapter 3, Tutorial: Creating anApplication, on page 27.
Choosing an existing workspace doesnt replace previous sample applicationswith updated sample applications. This built-in functionality is designed toprevent workspace files from getting overwritten. Create a new workspace to getthe updated sample applications.
Starting TIBCO General Interface Builder |21
8/3/2019 Tib Gi Pe Getting Started
33/58
TIBCO General Interface Getting Started
For more information on workspaces and projects, see Managing Projects inTIBCO General Interface Developer Guide.
Running Multiple Instances of General Interface Builder
TIBCO General Interface Builderis designed to run as multiple instancessimultaneously. You can open multiple instances of General Interface Builderfrom the same installation folder. Each instance of General Interface can run adifferent application or the same application.
You can also have multiple instances of General Interface Builder running projectsin the same workspace or from multiple workspaces.
Multiple releases can also be open at the same time. For example, you can open aproject in General Interface 3.1 and also open a copy of that project in 3.2 at thesame time.
In addition, you can open multiple instances and multiple releases in differentbrowsers, such as Internet Explorer and Firefox.
Because each instance is sharing the same preferences and settings files,
competing changes to General Interface Builder preferences may not be persisted.
22 | Chapter 2 Introduction to TIBCO General Interface Builder
http://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdf8/3/2019 Tib Gi Pe Getting Started
34/58
TIBCO General Interface Getting Started
User Interface Basics
Developers familiar with visual, component-based environments such asMicrosoft VisualBasic and Borland JBuilder will notice some parallel constructs inTIBCO General Interface Builder. Feature similarities include tools like dataconnection wizards, event-binding, and object modeling.
Figure 6 shows the main interface elements of TIBCO General Interface Builder.The default layout is fully customizable. Any modifications you make to thelayout are saved and loaded each time you start TIBCO General Interface Builder.
For more information about the user interface, such as menus and toolbars, seeTIBCO General Interface Component Guide.
Figure 6 TIBCO General Interface Builder User Interface
Palettes
Work
System Log
Taskbar
Area
Browser Menu
Open File Tabs
Work AreaViews
TIBCO GeneralInterface BuilderMenu
Palette
User Interface Basics |23
P j t
8/3/2019 Tib Gi Pe Getting Started
35/58
TIBCO General Interface Getting Started
Projects
All development work in TIBCO General Interface Builder is done in a project inthe workspace. Projects are collections of files you create and edit in TIBCO
General Interface Builder. Project files are displayed in the Project Files palette.When a project is created, the default files logic.js and appCanvas.xml arecreated and opened in the work area. The JavaScript file, logic.js, is an emptyfile that you can add JavaScript code to. The default GUI component file,appCanvas.xml, is where you can begin designing your application userinterface. When project files are saved, TIBCO General Interface Builder savesthem to a project directory in the JSXAPPS directory in the specified workspacedirectory. For example, workspace/JSXAPPS/project_name. For more information onworkspaces, see Choosing a Workspace on page 20.
For more information, see Managing Projects in TIBCO General Interface DeveloperGuide.
Work Area
The work area is located in the center of the user interface. Here you can create andmodify application components using palettes and tools, as well as work on otherfile types.
Work Area Tabs and Editors
The work area has a tabbed interface, so you can open multiple filessimultaneously as you work. TIBCO General Interface Builder has built-in editorsfor creating and editing different types of files. These editors are available for thefollowing file types: GUI components, XML, XSL, JavaScript, CSS (CascadingStyle Sheets), dynamic properties, and mapping rules files. For more information,see Work Area Editors in TIBCO General Interface Developer Guide.
Work Area Views
The work area provides several views. The available views depend on what typeof file is active in the work area. These views are available from the work areatoolbar to the lower right of the work area as shown in Figure 7.
To access project files, click the JSXAPPS/project_name link in the General InterfaceBuilder taskbar, located in the lower left area of the IDE.
If a file is read-only, a Lock icon displays on the work area tab. To unlock alocked, read-only file, double-click the Lock icon.
http://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdf8/3/2019 Tib Gi Pe Getting Started
36/58
User Interface Basics |25
Properties Editor palette Set component properties See Properties Editor
http://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdf8/3/2019 Tib Gi Pe Getting Started
37/58
TIBCO General Interface Getting Started
Properties Editor palette Set component properties. See Properties EditorPalette in TIBCO General Interface Developer Guide.
Events Editor palette Specify events for components. See Events Editor Palette
in TIBCO General Interface Developer Guide. Attributes Editor palette Edit component attributes to extend the serialized
HTML representation of components. See Attributes Editor Palette in TIBCOGeneral Interface Developer Guide
XSL Parameters palette Parameterize a components XSL transformation fromCDF to HTML. See XSL Parameters Palette in TIBCO General InterfaceDeveloper Guide.
Local Data Cache palette View, open, and edit cached XML and XSL files inmemory and save to disk. See Data and Cache Management in TIBCO GeneralInterface Developer Guide.
Project Files palette View, open, and edit files referenced in the project. SeeProject Files Palette in TIBCO General Interface Developer Guide.
Recycle Bin palette Recover deleted components from the Recycle Bin. SeeRecycle Bin Palette in TIBCO General Interface Developer Guide.
System Log palette View system logging messages, such as warnings anderrors. See Logging Messages in TIBCO General Interface Developer Guide.
Tools
TIBCO General Interface Builder has a variety of tools and dialogs to assist you asyou develop your applications.
Deployment Utility Generate the HTML or XHTML markup for launchingdeployed applications. See Deploying Applications in TIBCO General InterfaceDeveloper Guide.
XML/XSL Merge Tool Merge a source document (XML or XSL) and an XSLTfilter document to test and view the text, HTML, or XML output. See Data andCache Management in TIBCO General Interface Developer Guide.
XML Mapping Utility Configure and test data services. See Data Connectionand Mapping in TIBCO General Interface Developer Guide.
Test Interface Tool Test data services in the XML Mapping Utility. See TestInterface Tool in TIBCO General Interface Developer Guide.
Many of the palettes have a context menu. For more information, see ContextMenus in TIBCO General Interface Developer Guide.
26 | Chapter 2 Introduction to TIBCO General Interface Builder
Color Picker Tool Choose colors in hexadecimal format for use in your
http://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdf8/3/2019 Tib Gi Pe Getting Started
38/58
TIBCO General Interface Getting Started
Color Picker Tool Choose colors in hexadecimal format for use in yourJavaScript code and component files. See Color Picker Tool on page 232 inTIBCO General Interface Developer Guide.
JavaScript Test Utility Execute arbitrary JavaScript code. See TestingJavaScript Code in TIBCO General Interface Developer Guide.
JavaScript Step Through Debugger Step through JavaScript code and inspectobjects while debugging. This tool is only supported in Internet Explorer. SeeJavaScript Step Through Debugger in TIBCO General Interface Developer Guide.To debug in Firefox, use the Venkman extension. Visithttp://getahead.ltd.uk/dwr/ajax/venkman/.
Find and Replace Tool Find and replace text in a work area editor. See Findand Replace Tool in TIBCO General Interface Developer Guide.
IDE Settings Modify TIBCO General Interface Builder IDE preferences for thevisual authoring environment. See Specifying IDE Settings in TIBCO GeneralInterface Developer Guide.
Project Settings Modify project settings. See Modifying Project Settings inTIBCO General Interface Developer Guide.
|27
Chapter 3 Tutorial: Creating an Application
http://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdf8/3/2019 Tib Gi Pe Getting Started
39/58
TIBCO General Interface Getting Started
Chapter 3 Tutorial: Creating an Application
This chapter is a tutorial that describes how to create a simple application usingTIBCO General Interface Builder.
This tutorial is based on the WSDL_Mapping_1 sample located in theworkspace/JSXAPPS/samples directory. To look at the sample, chooseProject > User Projects > Samples > WSDL_Mapping_1.
Topics
Introduction, page 28
Creating a New Project, page 29 Creating a Layout, page 30
Adding Form Elements to the Application, page 35
Cloning Components, page 37
Adding a Button and Button Event, page 40
Further Information, page 42
28 | Chapter 3 Tutorial: Creating an Application
Introduction
8/3/2019 Tib Gi Pe Getting Started
40/58
TIBCO General Interface Getting Started
Introduction
This chapter demonstrates how to build a sample application that looks up cityand state information. In TIBCO General Interface Builder, you create all thecomponents that make up the application. The sample application looks like thefollowing:
After you complete this tutorial, you can continue to the next tutorial where you
connect the components to a data service and test the application. See Chapter 5,Tutorial: Communicating with a Web Service in TIBCO General Interface DeveloperGuide.
If youre not familiar with the TIBCO General Interface Builder user interface, seeUser Interface Basics on page 22 for an introduction.
Creating a New Project |29
Creating a New Project
http://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdf8/3/2019 Tib Gi Pe Getting Started
41/58
TIBCO General Interface Getting Started
g j
In this section, you create a new TIBCO General Interface project. A new projectfolder is created in the workspace/JSXAPPS directory, and all application-specificfiles are created and saved in this folder. The workspace is the directory thatcontains your projects, custom add-ins, custom prototypes, and your user settingsfor General Interface Builder.
1. Start TIBCO General Interface Builder and choose a workspace if you haventyet. If this is the first time youre starting General Interface Builder, seeStarting TIBCO General Interface Builder on page 18.
2. Choose Project > New Project from the General Interface Builder menu orclick Create New Project in the Open/Create dialog.
3. Type myAddressLookup in the Project Directory Name field and click Create.
4. Click Continue in the General Interface Builder legal notice dialog.
A new project is loaded in the browser window. Two default, empty files areopen in the central work area.
For more information on projects, see Projects on page 23.
While building this sample application, all project data is stored locally inbrowser memory. The application is not automatically saved to the filesystem. Save the project before you close or refresh the browser window. Ifyou dont save the project, the data is lost.
30 | Chapter 3 Tutorial: Creating an Application
Creating a Layout
8/3/2019 Tib Gi Pe Getting Started
42/58
TIBCO General Interface Getting Started
g y
In this section, you create an application user interface that includes layoutcomponents to arrange the subcomponents. For all components, positioninformation 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 byarranging components in sequence from top left to bottom right
This tutorial demonstrates both methods of positioning components.
Now that youve created your project, a default GUI component file,appCanvas.xml, is open in a tab in the work area. The Component Librariespalette displays folders containing prototype components that can be added tothe current component. The Component Hierarchy palette shows the hierarchicalview of components in the GUI component file. Note that block, the default rootcomponent, is created automatically when you create a project.
For tips on working with components, see Working with Components in TIBCOGeneral 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 aLayout -Top/Over component to the work area in the center of the GeneralInterface Builder user interface. This component provides two panes forlaying out application components.
The Component Hierarchy palette shows that the new component, layout (--),is added as a child of block.
2. Right-click theappCanvas.xml tab at the top of the work area and select Save.The new layout component is saved in an XML file in theworkspace/JSXAPPS/myAddressLookup/components directory. The appCanvastab name is red when the file has unsaved changes and black after changes aresaved.
To avoid unexpected layout behavior in deployed applications, its recommendedto 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, andSplitter.
The Block is relatively positioned and has a width of 100%.
The Block is absolutely positioned.
Creating a Layout |31
The Component Hierarchy palette looks like this:
http://../component_guide/tib_gi_pe_component_guide.pdfhttp://../component_guide/tib_gi_pe_component_guide.pdf8/3/2019 Tib Gi Pe Getting Started
43/58
TIBCO General Interface Getting Started
The next step is to modify properties for the layout component. Properties arecharacteristics that define a component. To modify component properties, youselect the component in the Component Hierarchy palette and edit itsproperties in the Properties Editor palette.
3. To work more easily in the Properties Editor palette, click the DockingOptions button on the palettes toolbar and choose Floating.
4. Select the Layout - Top/Over component in the Component Hierarchy paletteand change the following property values in the Properties Editor palette. Toedit a field, type a value in the Value column and press the Tab or Enter key tosave the value. The Name property is an internal name for the layout object.
The Properties Editor palette looks like this:
When you dont need the Properties Editor palette, click the Toggle Displaybutton to minimize it. To maximize it again, click the Properties Editor iconon the General Interface Builder taskbar at the bottom of the user interface.
ComponentName
Property Name Property Value
layout (--) NamelytAddressLookup
Size Array 50,*
32 | Chapter 3 Tutorial: Creating an Application
Notice that when you change the Name property, the name in the ComponentHierarchy palette also changes
8/3/2019 Tib Gi Pe Getting Started
44/58
TIBCO General Interface Getting Started
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 DynamicProperties Files in TIBCO General Interface Developer Guide.
To customize pane properties, complete the following steps:
1. Expand the lytAddressLookup node and select the following components inthe Component Hierarchy palette and modify their properties in theProperties Editor palette as follows.
Creating a Layout |33
http://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdf8/3/2019 Tib Gi Pe Getting Started
45/58
TIBCO General Interface Getting Started
The component hierarchy and the work area should look similar to thefollowing:
2. Save the appCanvas.xml component.
To insert a property value that starts with the @ symbol, right-click the Valuecolumn next to the property name and choose it from the context menu.
Component Name Property Name Property Value
pane (first) Name paneInput
BG Color @Solid Medium
Padding @8Pixel
Border @No jsxborder
pane (second) Name paneOutput
BG Color @Solid Light
Border @Outset
34 | Chapter 3 Tutorial: Creating an Application
For more information on components, see Working with Components in TIBCOGeneral Interface Component Guide.
http://../component_guide/tib_gi_pe_component_guide.pdfhttp://../component_guide/tib_gi_pe_component_guide.pdf8/3/2019 Tib Gi Pe Getting Started
46/58
TIBCO General Interface Getting Started
General Interface Component Guide.
Adding Form Elements to the Application |35
Adding Form Elements to the Application
8/3/2019 Tib Gi Pe Getting Started
47/58
TIBCO General Interface Getting Started
In this section, youll add text boxes and labels to describe the text boxes. Text
boxes are required for entering a zip code and for displaying returned city andstate information. The sample application also requires a button for calling theweb service. Youll 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 Labelcomponent to the top pane component, paneInput, in the work area.
2. Open the Form Elements folder in the Component Libraries palette and draga Text Box component to the paneInput component in the ComponentHierarchy palette.
The component hierarchy should look like the following:
3. Select the following child components of paneInput in the Component
Hierarchy palette and enter the specified values in the Properties Editorpalette.
For padding and margin, be sure to enter a space between each number.
Component Name Property Name Property Value
label Name lblZipcode
Width 100
Height 18
Text/HTML Type Zip Code:
Padding4 0 0 0
36 | Chapter 3 Tutorial: Creating an Application
0 0 0
Component Name Property Name Property Value
8/3/2019 Tib Gi Pe Getting Started
48/58
TIBCO General Interface Getting Started
For properties that require CSS values, such as margin and padding, you canuse General Interface syntax or W3C valid CSS syntax. See Entering CSS
Values in TIBCO General Interface Component Guide.4. Drag-and-drop another Layout - Top/Over component from the Containers
folder in the Component Libraries palette onto the lower paneOutputcomponent. You need a layout here, because youll be adding two rows ofcomponents for the return information, city and state.
5. Change the new layout(--) component properties in the Properties Editorpalette to the following:
In the next section, youll make two clones of the paneInput pane to create two
panes for the lytOutput component. These panes are for the city and stateinformation that the web service returns.
Margin 0 4 0 0
text box NametxtZipcode
Height 18
Margin 0 4 0 0
Component Name Property Name Property Value
layout (--) Name lytOutput
Size Array 50,*
Cloning Components |37
Cloning Components
http://../component_guide/tib_gi_pe_component_guide.pdfhttp://../component_guide/tib_gi_pe_component_guide.pdfhttp://../component_guide/tib_gi_pe_component_guide.pdfhttp://../component_guide/tib_gi_pe_component_guide.pdf8/3/2019 Tib Gi Pe Getting Started
49/58
TIBCO General Interface Getting Started
Cloning components saves time in creating your application and in setting
component properties. A clone is a copy of a selected component. In thisapplication, all three panes for zip code, city, and state will have a text label and atext box, all with similar properties.
In this section, youll remove the existing lytOutput childpanes. Then youllmake clones of paneInput and move them to the lytOutput component. The twobottom panes will contain the city and state information returned by the AddressLookup Service.
To create clones of the paneInput component, complete these steps:
1. Select the lytOutput component in the Component Hierarchy palette andclick the Recycle Descendants button on the toolbar to delete the twodescendant panes of lytOutput. Instead, youll use clones of the paneInputcomponent.
2. Select paneInput in the Component Hierarchy palette and click the Clonebutton on the toolbar two times to create two clones. Two clones of thepaneInputcomponent display at the bottom of the Component Hierarchypalette.
3. Drag the two paneInput clones and drop them on the lytOutput component
in the Component Hierarchy palette.
If you delete components by mistake, you can recover them from the Recycle Bin.
Choose Palettes > Recycle Bin.
38 | Chapter 3 Tutorial: Creating an Application
The component hierarchy and work area should look like the following:
8/3/2019 Tib Gi Pe Getting Started
50/58
TIBCO General Interface Getting Started
4. Change the properties for the two cloned panes (children of lytOutput) andtheir labels and text boxes in the Properties Editor palette:
Component Name Property Name Property Value
paneInput
(first child of lytOutput)
Name paneCity
BG Color @Solid Light
lblZipcode Name lblCity
Text/HTML City:
txtZipcode Name txtCity
Enabled Disabled
paneInput
(second child of lytOutput)
Name paneState
BG Color @Solid Light
Cloning Components |39
lblZipcode N lblState
Component Name Property Name Property Value
8/3/2019 Tib Gi Pe Getting Started
51/58
TIBCO General Interface Getting Started
The txtCity and txtState text boxes are set to Disabled, because user input isntallowed 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:
5. Save your application.
Next, youll add a button and a button event to the application.
lblZipcode Name lblState
Text/HTMLState:
txtZipcode Name txtState
Enabled Disabled
40 | Chapter 3 Tutorial: Creating an Application
Adding a Button and Button Event
8/3/2019 Tib Gi Pe Getting Started
52/58
TIBCO General Interface Getting Started
Now, youll 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 webservice. The button event wont work until you generate the code that calls theweb service.
1. Drag a Button component from the Form Elements folder in the ComponentLibraries palette to the paneInput component and modify its properties asfollows:
2. To work more easily in the Events Editor palette, click the Docking Optionsbutton on the palettes toolbar and choose Floating.
3. Delete this JavaScript statement in the Value field of the Execute event:
alert(hello);
4. Type in the following JavaScript statement in the Value field of the Executeevent:
eg.service.callReturnCityState();
This button event wont work until you define this function in another
tutorial, Tutorial: Communicating with a Web Service in TIBCO GeneralInterface Developer Guide. This function calls the web service that returns cityand state information. When a user inputs a zip code and clicks the button, thezip code is sent to the web service.
Component Name Property Name Property Value
button Name btnLookup
Text/HTML Find City and State
BG Color #ADADC6
You can use the Color Picker to choose color values. Choose Tools > Color PickerYou can also click in the Value field in the Properties Editor palette and click theColor Picker button to open the Color Picker.
Adding a Button and Button Event |41
5. Save the project and choose Project > Run Project to run your application andsee what it looks like. The application should look similar to this:
http://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdf8/3/2019 Tib Gi Pe Getting Started
53/58
TIBCO General Interface Getting Started
6. Close the running application.
The objects created in the previous steps are live application objects. When yousave the parent component to disk, the parent and all child components are savedwith the current object states.
Now that the user interface is complete, the next step is to create mappingsbetween application objects and data elements. Once youve created the
mappings, youll generate the code that calls the web service.
To continue working with this application, see Tutorial: Communicating with aWeb Service in TIBCO General Interface Developer Guide. In the next tutorial, youconnect the components to a web service and test the application.
42 | Chapter 3 Tutorial: Creating an Application
Further Information
http://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdf8/3/2019 Tib Gi Pe Getting Started
54/58
TIBCO General Interface Getting Started
For more tutorials and sample applications, see:
TIBCO General Interface samples workspace/JSXAPPS/samples
TIBCO Developer Network at http://developer.tibco.com
Sample Projects
Video Tutorials
| 43
Index
8/3/2019 Tib Gi Pe Getting Started
55/58
TIBCO General Interface Getting Started
A
adding and positioning application components 30
adding form elements 35
AJAX rich internet applications 2
application layer 9
applicationsadding and positioning components 30
tutorial 28
architecture 6, 8
Attributes Editor palette 25
C
caching data
Local Data Cache palette 25
Color Picker Tool 26
communication layer 12
Component Hierarchy palette 24
Component Libraries palette 24
componentsadding 30
binding events to 40
positioning 30
saving 30
views 23
console mode (HTA) 19
creating a layout 30
creating a new project 29customer support xii
customizing pane properties 32
D
data layer 10
deployment 13
Deployment Utility 25
development tools 14
docking options, palettes 24
E
events
binding to components 40
Events Editor palette 25
F
Find and Replace Tool 26
form elements, adding to application 35
H
HTA (console mode) 19
HTML mode 19
I
IDE settings 26
interface basics 22
J
JavaScript Step Through Debugger 26
44 | Index
JavaScript Test Utility 26 R
Recycle Bin palette 25
8/3/2019 Tib Gi Pe Getting Started
56/58
TIBCO General Interface Getting Started
L
layouts, creating 30
Local Data Cache palette 25
logging
System Log palette 25
P
palettes 24
Attributes Editor palette 25
Component Hierarchy palette 24
Component Libraries palette 24
docking options 24
Events Editor palette 25Local Data Cache palette 25
Project Files palette 25
Properties Editor palette 25
Recycle Bin palette 25
System Log palette 25
XSL Parameters palette 25
presentation layer 9
processing model 4Project Files palette 25
projects 23
creating 29
Project Files palette 25
settings 26
workspace 20
properties
customizing panes 32modifying 31
Properties Editor palette 25
Properties Editor palette 25
rich Internet application-based MVC architecture 5
running multiple instances of General InterfaceBuilder 21
S
scalable architecture 13
server-based MVC architecture 4starting TIBCO General Interface Builder 18
support for industry standards 13
support, contacting xii
System Log palette 25
T
tabs
work area 23
technical support xii
Test Interface Tool 25
TIBCO General Interface
AJAX 2
container model 10features 13
TIBCO General Interface Builder
GUI basics 22
HTA (console mode) 19
HTML mode 19
running multiple instances 21
starting 18, 19
XHTML mode 19tools 25
tutorials
creating an application 27
typographical conventions x
Index |45
U
user home 20
8/3/2019 Tib Gi Pe Getting Started
57/58
TIBCO General Interface Getting Started
V
views
component 23
work area 23
W
work area 23
tabs 23
views 23
workspace 20
X
XHTML mode 19
XML Mapping Utility 25
XML/XSL Merge Tool 25
XSL Parameters palette 25
46 | Index
8/3/2019 Tib Gi Pe Getting Started
58/58
TIBCO General Interface Getting Started