Tib Gi Pe Getting Started

8/3/2019 Tib Gi Pe Getting Started

1/58

TIBCO General Interface

Getting Started

Professional EditionSoftware Release 3.3February 2007


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


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


4/58


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


5/58


|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


6/58


vi | Figures


7/58


|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/58


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


9/58


Preface | ix

Product documentation

Best practices documents

Forums


10/58


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.


11/58


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}


12/58


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.


13/58


|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


14/58


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


15/58


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.



16/58



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


17/58


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



18/58



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


19/58


|

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



20/58


|

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


21/58


|

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.



22/58


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


23/58


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.



24/58


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


25/58


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



26/58


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


27/58


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.



28/58


|17


29/58


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


30/58


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


31/58


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.

http://../dev_guide/tib_gi_pe_developer_guide.pdfhttp://../dev_guide/tib_gi_pe_developer_guide.pdf


32/58


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


33/58


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.



34/58


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


35/58


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.pdf


36/58

User Interface Basics |25

Properties Editor palette Set component properties See Properties Editor


37/58


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.


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.pdf


38/58


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.pdf


39/58


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


40/58


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


41/58


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.


Creating a Layout


42/58


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.pdf


43/58


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,*


Notice that when you change the Name property, the name in the ComponentHierarchy palette also changes


44/58


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


45/58


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


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.pdf


46/58


General Interface Component Guide.

Adding Form Elements to the Application |35

Adding Form Elements to the Application


47/58


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.


label Name lblZipcode

Width 100

Height 18

Text/HTML Type Zip Code:

Padding4 0 0 0


0 0 0



48/58


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


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.pdf


49/58


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.


The component hierarchy and work area should look like the following:


50/58


4. Change the properties for the two cloned panes (children of lytOutput) andtheir labels and text boxes in the Properties Editor palette:


paneInput

(first child of lytOutput)

Name paneCity


lblZipcode Name lblCity

Text/HTML City:

txtZipcode Name txtCity

Enabled Disabled

paneInput

(second child of lytOutput)

Name paneState


Cloning Components |39

lblZipcode N lblState



51/58


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


Adding a Button and Button Event


52/58


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.


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:


53/58


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.


Further Information


54/58


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


55/58


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


56/58


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


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



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


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


57/58


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


58/58


Tib Gi Pe Getting Started

Documents

Transcript of Tib Gi Pe Getting Started