Tib Gi Pe Getting Started

TIBCO General Interface Getting Started
Professional Edition Software Release 3.3 February 2007
Important Information
SOME TIBCO SOFTWARE EMBEDS OR BUNDLES OTHER TIBCO SOFTWARE. USE OF SUCH EMBEDDED OR BUNDLED TIBCO SOFTWARE IS SOLELY TO ENABLE THE FUNCTIONALITY (OR PROVIDE LIMITED ADD-ON FUNCTIONALITY) OF THE LICENSED TIBCO SOFTWARE. THE EMBEDDED OR BUNDLED SOFTWARE IS NOT LICENSED TO BE USED OR ACCESSED BY ANY OTHER TIBCO SOFTWARE OR FOR ANY OTHER PURPOSE. USE OF TIBCO SOFTWARE AND THIS DOCUMENT IS SUBJECT TO THE TERMS AND CONDITIONS OF A LICENSE AGREEMENT FOUND IN EITHER A SEPARATELY EXECUTED SOFTWARE LICENSE AGREEMENT, OR, IF THERE IS NO SUCH SEPARATE AGREEMENT, THE CLICKWRAP END USER LICENSE AGREEMENT WHICH IS DISPLAYED DURING DOWNLOAD OR INSTALLATION OF THE SOFTWARE (AND WHICH IS DUPLICATED IN TIBCO GENERAL INTERFACE INSTALLATION). USE OF THIS DOCUMENT IS SUBJECT TO THOSE TERMS AND CONDITIONS, AND YOUR USE HEREOF SHALL CONSTITUTE ACCEPTANCE OF AND AN AGREEMENT TO BE BOUND BY THE SAME. This document contains confidential information that is subject to U.S. and international copyright laws and treaties. No part of this document may be reproduced in any form without the written authorization of TIBCO Software Inc. TIB, TIBCO, TIBCO Adapter, Predictive Business, Information Bus, The Power of Now, TIBCO General Interface, TIBCO General Interface Framework, and TIBCO General Interface Builder are either registered trademarks or trademarks of TIBCO Software Inc. in the United States and/or other countries. All other product and company names and marks mentioned in this document are the property of their respective owners and are mentioned for identification purposes only. THIS SOFTWARE MAY BE AVAILABLE ON MULTIPLE OPERATING SYSTEMS. HOWEVER, NOT ALL OPERATING SYSTEM PLATFORMS FOR A SPECIFIC SOFTWARE VERSION ARE RELEASED AT THE SAME TIME. PLEASE SEE THE README.TXT FILE FOR THE AVAILABILITY OF THIS SOFTWARE VERSION ON A SPECIFIC OPERATING SYSTEM PLATFORM. THIS DOCUMENT IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, OR NON-INFRINGEMENT. THIS DOCUMENT COULD INCLUDE TECHNICAL INACCURACIES OR TYPOGRAPHICAL ERRORS. CHANGES ARE PERIODICALLY ADDED TO THE INFORMATION HEREIN; THESE CHANGES WILL BE INCORPORATED IN NEW EDITIONS OF THIS DOCUMENT. TIBCO SOFTWARE INC. MAY MAKE IMPROVEMENTS AND/OR CHANGES IN THE PRODUCT(S) AND/OR THE PROGRAM(S) DESCRIBED IN THIS DOCUMENT AT ANY TIME. THE CONTENTS OF THIS DOCUMENT MAY BE MODIFIED AND/OR QUALIFIED, DIRECTLY OR INDIRECTLY, BY OTHER DOCUMENTATION WHICH ACCOMPANIES THIS SOFTWARE, INCLUDING BUT NOT LIMITED TO ANY RELEASE NOTES AND "READ ME" FILES. Copyright 2001-2007 TIBCO Software Inc. ALL RIGHTS RESERVED. TIBCO Software Inc. Confidential Information
| iii
Contents
Figures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii

Related Documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viii TIBCO General Interface Documentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viii Further 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Processing 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. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ease of Deployment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Support for Industry Standards and Best Practices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Scalable Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Development Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 13 13 13 14
Chapter 2 Introduction to TIBCO General Interface Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Starting TIBCO General Interface Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . General Interface Builder Launch Modes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Choosing a Workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Running Multiple Instances of General Interface Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . User Interface Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Projects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Work Area. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Palettes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 19 20 21 22 23 23 24 25
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
|v
Figures
Figure 1 Figure 2 Figure 3 Figure 4 Figure 5 Figure 6 Figure 7
Server-based MVC Architecture. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 RIA MVC Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Tab Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Tab Object View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 TIBCO General Interface Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 TIBCO General Interface Builder User Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Work Area Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
vi
| Figures
| vii
Preface
TIBCO General Interface consists of two components: TIBCO General Interface Builder and TIBCO General Interface Framework. TIBCO General Interface Builder is a development environment for building rich Internet applications. The object modeling features of General Interface Builder enable developers to quickly create reusable GUI components and assemble them into full applications or application modules. Applications can be accessed in a web browser from a URL, existing HTML page, or portal environment. General Interface Framework is the distributable runtime framework for running browser-based General Interface applications.
Topics
Related Documentation, page viii Typographical Conventions, page x How to Contact TIBCO Customer Support, page xii
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 Interface installation instructions. TIBCO General Interface Getting Started Read this manual for overview information and a tutorial that explains how to build a TIBCO General Interface application. TIBCO General Interface Developer Guide Refer to this manual for in-depth information about developing and deploying TIBCO General Interface applications. TIBCO General Interface Component Guide Refer to this manual to learn more about components and the Charting add-in, as well as component properties and events. TIBCO General Interface API Reference Refer to this online help content for descriptions of the TIBCO General Interface JavaScript API functions and methods. 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 and closed 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 TIBCO Developer Network at http://developer.tibco.com, a comprehensive community that provides opportunities to increase your understanding of TIBCO General Interface Builder. Among the many resources at this web site you will find: Video tutorials Sample projects
Preface ix
Product documentation Best practices documents Forums
| Typographical Conventions
Typographical Conventions
The following typographical conventions are used in this manual. Table 1 General Typographical Conventions Convention
code font
Use Code font identifies commands, code examples, filenames, pathnames, and output displayed in a command window. For example: Use MyCommand to start the foo process.
bold code font
Bold code font is used in the following ways: In procedures, to indicate what a user types. For example: Type the username
admin.
In large code samples, to indicate the parts of the sample that are of particular 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 Concepts for more details. To introduce new terms For example: A portal page may contain several portlets. 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: MyCommand pathname
Key combinations
Key name separated by a plus sign indicate keys pressed simultaneously. For example: Ctrl+C. Key names separated by a comma and space indicate keys pressed one after the other. For example: Esc, Ctrl+Q.
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 font
In 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 appear within each logical group. For example, the following command requires two parameters, which can be either param1 and param2 or param3 and param4:
MyCommand {param1 param2} | {param3 param4}
In the next example, the command requires two parameters. The first parameter can 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 the second parameter. And the last parameter is either param3 or param4.
MyCommand param1 [param2] {param3 | param4}
xii
| How to Contact TIBCO Customer Support

How to Contact TIBCO Customer Support
The Professional Edition of TIBCO General Interface is unsupported. If you would like support for this product, you may upgrade to the Enterprise Edition and 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 started with TIBCO Product Support, visit this site http://www.tibco.com/services/support.
|1
v
Chapter 1
Introduction
This chapter provides an introduction to TIBCO General Interface and a broad orientation to the environment.
Topics
Rich Internet Applications, page 2 Processing Model, page 4 Architecture, page 6 Features, page 13
| Chapter 1
Introduction
Rich Internet Applications

A survey by Forrester Research revealed that 70% of Fortune 2000 CIOs want to standardize on deploying applications to a web browser. However, of those surveyed, more than half stated that the limits of HTML prevented them from reaching this objective. Significant investment has been made in browser development since the first browsers were released. As a result of that effort, todays web browsers, such as Internet Explorer and Firefox, do provide a stable environment where enterprise-grade applications can be deployed. However, despite the volume of research and development, the web browser today remains fundamentally aligned with the document-centric paradigms that first defined the concept of a web page. HTML, evolving from its SGML roots, has always been a document-oriented markup language. With the advent of XML, DHTML, XHTML, and CSS, the browser became increasingly powerful and flexible in its core capabilities. Additionally, the cost of web applications was much lower than that of thick client development, deployment, and maintenance. Yet, as enterprises migrated applications to the web, they discovered that web applications provided far less interactivity and performance than the thick-client solutions they were meant to replace. As a result, many businesses traded off performance for cost, or alternatively, when the document paradigm of HTML was insufficient, paid the higher costs of developing, deploying, and maintaining thick clients. Either way, businesses have had to choose between web applications and thick clients.
TIBCO General Interface and AJAX

The TIBCO General Interface application framework solves this problem by enabling enterprises to deliver rich internet applications (RIAs) that look, feel, and perform like desktop installed software but run in a standard web browser. With General Interface, enterprises can have the best of both options: rich, highly productive, service-differentiating GUI functionality with the low-cost profile of web development, instant distribution, and accessibility. The TIBCO General Interface application framework leverages AJAX (asynchronous communications, JavaScript, and XML), event, and rendering capabilities of the web browser to instantly create a powerful, object-based enterprise-grade application environment into which your General Interface applications can be deployed. By working with an object-based environment, as opposed to declarative markup languages, development time is shortened, and the business can easily distribute, manage, and deploy high performance solutions.
Rich Internet Applications 3
The application programming interfaces (APIs) provided by the browser remain a weak point in the development of end user applications more complex than online retail shopping. The existing browser APIs are not designed to create robust enterprise-grade applications. Therefore, development is time-consuming and expensive, maintainability is difficult, and many businesses completely avoid implementing enterprise web applications. Browsers lack the foundation classes familiar to Microsoft Windows programmers and the object-oriented presentation packages familiar to Java programmers. Instead, HTML browsers provide a generic API intended for displaying series of hyperlinked web pages that lack the features provided by many thick clients. TIBCO General Interface solves existing browser limitations by distributing many of the processes typically handled by a centralized web application server to the browser on the client machine. The application framework does this by first wrapping, then extending, browser APIs with functionality more suitable to object-oriented application development. Rather than forcing you to model complex workflows with a series of flat HTML pages, the General Interface APIs enable you to create stateful, interactive, object-based, client applications that look, feel, and perform as if launched from the local operating system.
| Chapter 1
Introduction
Processing Model
By distributing many of the processes usually handled by centralized application servers to the browser on the client machine, enterprises can deliver full-featured software solutions that simply run in the browser without any need for extra runtime components or plug-ins. TIBCO General Interface is a powerful implementation of model-view-controller (MVC) principles. Unlike server-centric MVC architectures, with General Interface, the view processes are distributed to the web browser. This design removes the view generation work from servers and reduces demands on bandwidth, making applications far more scalable. The design also leverages the power of the client CPU to deliver highly responsive, stateful, full-featured applications in a browser.
Disadvantages of Server-Based MVC Architecture

In a traditional server-based MVC architecture, all processes run on the server. Requests are sent to the controller, models are updated, and the view returns a stream of HTML and data to the browser where it is rendered for the user. This results in system latency and reduced functional possibilities for the end user. The resulting HTML typically comprises 80% presentation instructions and 20% data. The browser is simply an HTML page rendering device. Figure 1 Server-based MVC Architecture
Processing Model 5
Rich Internet Application-Based MVC Architecture

In a rich Internet application based MVC architecture, view processes are distributed to the browser where they run on the client system. The distributed view employs an MVC architecture of its own, turning the browser into an RIA environment. Because client-side objects generate the HTML, significantly fewer processes need run on the server. Bandwidth is optimized for data. Application performance and scalability are significantly enhanced. Figure 2 RIA MVC Architecture
General Interface software enables the view portion of the MVC architecture to be distributed to and run on a web browser running on the client system. This approach has the following benefits: Improves application scalability by removing significant server processes Decreases latency by using substantially all the bandwidth to deliver data (instead of a minority of bandwidth for data in the traditional model where HTML markup takes up most of a transmission) Delivers full-featured application performance and rich GUI features to an unmodified web browser, without plug-ins, runtime environments, and extra software to install
| Chapter 1
Introduction
Architecture
The General Interface MVC implementation means that the General Interface components are broken down into three architectural elements, each of which plays a crucial role in how the component behaves. Model The Model maintains the state data for each object instance. For example, the model portion of the Matrix (jsx3.gui.Matrix) object tracks state properties such as the number of columns, the widths of each column, the outer dimensions for the table, how to sort which column, and so on. View The View refers to how the object instance is actually displayed on the client machine. A good way to envision a view is to think of object look-and-feel. 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, and calls from the application business logic.
How MVC Elements Work Together

The best way to describe how these three elements work together is to describe a typical GUI object, such as the Tab object, in context of these three elements. Figure 4 Tab Object View
The easiest aspect of MVC to understand is the view. The view is what end users see when they use the application. The three Tab object instances shown in Figure 4, for example, have a consistent view that adheres to the visual design for the application.
Architecture 7
With the view element now defined, its easier to explain the model portion of the MVC architecture. The model element allows the given Tab object to keep an index of properties that uniquely define its state in memory (see Table 1). The model is unaffected by how the tab visually displays its state. Instead, it maintains a single Boolean property, active, that is set to true or false. From an architectural perspective, separating the model from the view means that more of the code base can be leveraged on future projects. Regardless of whether the view for a Tab object has beveled edges or graphical icons, the model remains the same. This means that only the view code for a given class needs to be updated from project to project. Table 1 Tab Object Models Tab 1 Text Index Active activeColor inactiveColor Account Info 0 true cccccc 8c8c8c Tab 2 Search Results 1 false cccccc 8c8c8c Tab 3 Account History 2 false cccccc 8c8c8c
The controller element updates the model based on events passed from the corresponding view. For example, a user clicks the displayed view for a Tab object in an attempt to bring the contents of that tab forward in the view. The view, in this case the actual HTML that is displayed, then processes the click event by calling the controller requesting that the selected tab be made active, and therefore brought forward in the view. Next, the controller queries the model to validate that the Tab object that was clicked is not already active. If the given Tab object is already active, the controller exits early without applying any changes to the object. However, if the Tab object is inactive, the controller updates the model by setting the active property to true. And then, the view is repainted in the browser to visually depict the new model value. In general, the model passes data to the corresponding view for rendering. The view then passes events to the controller for processing. This updates the model to reflect the property changes, providing a closed feedback loop.
| Chapter 1
Introduction
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 ActiveX controls are required to deliver robust application functionality. To deliver high functionality in a standard browser environment, General Interface leverages many of the same principles that make server-side architectures successful. General Interface software is founded upon solid, object-oriented principles. This means that robustly scalable functionality requires only a minimal footprint of client memory and network bandwidth. The class libraries that underlie the software are lean, comprising over 400 logical functions in approximately 300KB of data. Due to the object-oriented architecture and object inheritance framework, over 2,200 function calls are actually available at runtime across more than 40 foundation objects. Furthermore, because the class libraries follow a consistent object-oriented structure, they can be modified as necessary by runtime updates, additions, and even sub-classing. In addition, new objects can also be built by combining foundation objects, all without increasing the overall framework size. To manage such a broad array of functionality, General Interface employs a multi-tiered approach to object design. Essentially, any available function can be categorized into four distinct layers, as illustrated in Figure 5 on page 9. These include:
Client logic layer This layer consists of all programmatic logic, such as business rules and client-specific functionality. Presentation layer This layer is founded upon solid object oriented design
principles that leverage many of the key concepts used by Java Swing, without the overhead of the Java Runtime Environment (JRE). A familiar Java-like syntax is used, generating complex HTML and JavaScript that runs natively in the browser, rather than Java class files that require the browser to load the memory-intensive JRE.
Data layer This layer is a client-side data cache used for quick access to application data. All data is cached as parsed XML and can be accessed at runtime through XSL queries. This is similar to the way SQL is used to interface with relational data stores on the server. Communication layer This layer manages threaded communications with remote web servers using web service protocols such as SOAP and XML-RPC, as well as traditional web protocols like HTTP GET/POST.
Architecture 9
Figure 5 TIBCO General Interface Architecture
Application Layer General Interface provides libraries of functional objects that hide the complexities of DHTML development. You do not need to be familiar with the specifics of HTML in a given browser and can focus instead on the actual business logic for the application. You write JavaScript to enforce business rules and workflow, not to move HTML around the screen. Accordingly, enterprises get more yield out of their development resources. Presentation Layer General Interface employs a presentation approach similar to Java Swing but without the overhead of the Java Runtime Environment. Developers familiar with container-based GUIs will find similar constructs in the General Interface environment. Application components, screens, and widgets are constructed from General Interface GUI objects and saved as object sets that can be imported or exported at runtime to deliver incremental application functionality on demand. Accordingly, businesses can leverage the General Interface components out of the box or create libraries of their own reusable application components. General Interface provides customizable GUI components. Prototypes are available in the System folder of the Component Libraries palette as a starting point. From these components, you can create custom components.
10
| Chapter 1
Introduction
Note that different prototype objects can be instances of the same base class. For example, Text Box provides the base class for instances of a text box, a text area, and a password field. Similarly the Block class is used as the base for Label and Image. General Interface GUI objects generate custom DHTML and JavaScript on the client. This design differs from traditional ASP or JSP architectures, where the presentation is generated on the server, and the resulting stream of HTML is returned to the browser for rendering. With General Interface, presentation generation doesnt occur on the server. Therefore, transfer of presentation instructions over the network isnt necessary. The result is highly responsive GUI applications that free up bandwidth for data (not HTML) and reduce the number of servers and server software licenses necessary to deliver a given application. Data Layer The client-side XML data cache provides you with a consistent API for data access and management. Benefits include:
Efficient data reuse Multiple client objects within the presentation layer can
use the same XML document for their source data, keeping redundant data transfer to a minimum.
Runtime data access Since server data is stored as XML, integrity is retained,
allowing for DOM-based access to the original data.

Cache management methods A robust API allows you to write
application-specific business rules that keep the client-side data synchronized with the server.
Client-side HTML generation With HTML generation on the client, server
communications are unnecessary for presentation changes such as sorting and styling.
Container Architecture
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 a web application as a series of hyperlinked pages, this architecture provides true object modeling when building an application. Container-based architectures have significant advantages, including:
Intelligent data refresh Specific containers can be targeted for updates while
others remain untouched. Compared with refreshing an entire HTML page, less network bandwidth and CPU time is required.
Architecture 11
Incremental functionality An application can import additional object sets only when required. The application initializes and responds faster because only a minimum object set is loaded. User actions can drive the loading of additional functionality. TIBCO General Interface Builder is an example of a robust application that loads functionality on demand. Modular design paradigm The ability to work in a familiar, modular
environment that is more efficient than HTML. High-level objects, such as Matrix and Dialog, take the place of div and span elements.
12
| Chapter 1
Introduction
Communication Layer General Interface supports multiple protocols for communicating with services in the network. The basic supported interactions, which all function over HTTP/S, include: Table 2 Supported Interactions Communication Type XML GET SOAP HTTP GET HTML FORM POST/GET Outbound Request Format URL with Name-value pairs XML/SOAP URL with Name-Value Pairs HTML Form Expected Response Format XML XML/SOAP XML/HTML/text XML/HTML
A key principle that drives the General Interface communication efficiency is to limit refresh to subsets of the screen, not the entire browser window. To facilitate this, General Interface improves and extends the traditional click-and-refresh APIs provided by the browser. Developers familiar with web application development have traditionally used standard approaches like HTML frames. Consider a standard web mail client, for example. To improve the user experience, the left frame persistently displays various folders and tools, while the right frame displays dynamic data. Although this design is adequate, there is no question that a web mail client is far less useable than an installed executable, such as Microsoft Outlook. Technologies that provide single-page persistence in a web browser do exist, but these often leverage a client-side Java applet that requires loading the Java Runtime Environment into client memory or running a specific server platform. However, this design can quickly undermine application stability and available client-side memory.
Features 13
Features
In addition to providing a powerful and efficient architecture, TIBCO General Interface makes it easy to develop and deploy applications. Industry-standard technology is used, so knowledge of existing technologies can be leveraged.
Ease of Deployment
The General Interface application framework and all General Interface applications are composed of JavaScript, XML, and CSS files. To deploy the environment and applications, you simply include a reference to these files in an HTML page that can be accessed by an end user from any HTTP or HTTPS server. The end user types the URL into a browser and starts using the General Interface application. To restrict and secure access to your application, use your existing mechanism for securing web page access.
Support for Industry Standards and Best Practices

General Interface uses industry standard and widely accepted technologies in both its underlying code (JavaScript, XML, and CSS) and overall architecture (Model-View-Controller and multi-tier design). Best-practice, server-side tasks are migrated to the browser to deliver the same successful results, maintainable code, and scalable performance. General Interface takes best-practice approaches from the server and implements them in the browser.
Scalable Architecture
The fastest page server simply cannot compete with locally served data. Load balancing, additional processors, page pre-caching, and any number of server-side enhancements are all ultimately short-term solutions. Rather than attempting to scale the server to meet the needs of the nth end user, consider a paradigm where each end user provides the resources for their own processing needs. Unlike traditional server architectures, TIBCO General Interface runs on the client, using the client CPU for data presentation and interaction. Even the TIBCO General Interface foundation classes that facilitate this process are cached on the client. This means after a TIBCO General Interface application is accessed, only raw data is requested from the server. Since no HTML needs to be transferred to the client, bandwidth is freed up to deliver more data to the end user more
14
| Chapter 1
Introduction
quickly. In addition, because presentation processes are now distributed to the client, servers no longer need to generate HTML for each connected user. With HTML generation processes no longer running on the server, the ratio of servers to end users is greatly improved.
Development Tools
You can develop TIBCO General Interface client applications and components using General Interface Builder, a script authoring environment, or your favorite IDE. Once the TIBCO General Interface runtime environment is loaded into an HTML page in the browser, you can directly interact with the General Interface GUI, data, and communication objects using JavaScript APIs. General Interface Builder, a rapid deployment environment, is a visual authoring environment optimized for creating General Interface applications and can run either as a standalone tool or within the embedded browser module of your favorite IDE.
Features 15
As a standalone development environment, TIBCO General Interface Builder provides a powerful, rapid application assembly and scripting environment. You can drag-and-drop GUI components, connect to services, examine cached data, and implement the behaviors of the client application using JavaScript business logic and events. When running TIBCO General Interface Builder in conjunction with your favorite IDE, you have a complete end-to-end live development and testing environment with object, code, message, and error inspection, plus a runtime JavaScript debugger.
16
| Chapter 1
Introduction
| 17
Chapter 2
Introduction to TIBCO General Interface Builder
This chapter explains how to start TIBCO General Interface Builder and also provides an overview of General Interface Builder features.
Topics
Starting TIBCO General Interface Builder, page 18 User Interface Basics, page 22
18
| Chapter 2
Starting TIBCO General Interface Builder

TIBCO General Interface Builder must be served from a local disk so that edits can 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 All Programs > TIBCO > TIBCO General Interface - Enterprise Edition version - > and choose a General Interface Builder launch mode. See General Interface Builder Launch Modes on page 19.
tibco/gi/version,
You can also browse to the TIBCO General Interface installation directory, and double-click a GI_Builder.* file.
Professional Edition Browse to the TIBCO General Interface installation directory, tibco-gi-version-pro, and double-click a GI_Builder.* file. See General Interface Builder Launch Modes on page 19. 2. Click Yes in the browser prompt, if any, to allow reading and writing files to and from the file system. 3. If this is the first time you are starting General Interface, complete the following: Read the license agreement and click Agree. Choose a project workspace. See Choosing a Workspace on page 20. Choosing an existing workspace doesnt replace previous sample applications with updated sample applications. This built-in functionality is designed to prevent workspace files from getting overwritten. Create a new workspace to get the updated sample applications. 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.
Starting TIBCO General Interface Builder 19
General Interface Builder Launch Modes

TIBCO General Interface Builder can be started in different modes as described in the following table. Table 3 General Interface Builder Launch Modes Launch Mode
HTML mode
Description Opens TIBCO General Interface Builder in the selected web browser. File name: GI_HOME/GI_Builder.html
launch_in_ide.html Launches a project in TIBCO General Interface Builder (HTML mode). This file is created automatically in your project directory when you create a project. Use this file only during development, not at runtime.
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 applications that run in XHTML pages, such as portlet applications. File name: GI_HOME/GI_Builder.xhtml
Console mode
(Internet Explorer only)
Opens TIBCO General Interface Builder as an HTML application (HTA). HTAs are not subject to the same security constraints as web pages and when run locally are given privileges to read and write to the local file system. TIBCO General Interface Builder occupies the entire screen of your monitor. 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 browsers favorites. For more information about files in the General Interface installation directory, see TIBCO General Interface Files and Folders in TIBCO General Interface Developer Guide.
20
| Chapter 2
Choosing a Workspace
The first time TIBCO General Interface Builder launches after installation, the application window is blank and a dialog prompts you to create or select a workspace directory.
The workspace is the directory that contains your projects, custom add-ins, custom prototypes, and your user settings for General Interface Builder. To choose a workspace and open or create a project, 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\My Documents\TibcoGI. Choosing an existing workspace doesnt replace previous sample applications with updated sample applications. This built-in functionality is designed to prevent workspace files from getting overwritten. Create a new workspace to get the updated sample applications. 2. Click the Reload Browser button in the Alert dialog to restart General Interface Builder. 3. Choose Create New Project or Open Existing Project in the Open/Create dialog.
For instructions on creating new projects, see Chapter 3, Tutorial: Creating an Application, on page 27.
Starting TIBCO General Interface Builder 21
For more information on workspaces and projects, see Managing Projects in TIBCO General Interface Developer Guide.
Running Multiple Instances of General Interface Builder

TIBCO General Interface Builder is designed to run as multiple instances simultaneously. You can open multiple instances of General Interface Builder from the same installation folder. Each instance of General Interface can run a different application or the same application. Because each instance is sharing the same preferences and settings files, competing changes to General Interface Builder preferences may not be persisted. You can also have multiple instances of General Interface Builder running projects in the same workspace or from multiple workspaces. Multiple releases can also be open at the same time. For example, you can open a project in General Interface 3.1 and also open a copy of that project in 3.2 at the same time. In addition, you can open multiple instances and multiple releases in different browsers, such as Internet Explorer and Firefox.
22
| Chapter 2
User Interface Basics

Developers familiar with visual, component-based environments such as Microsoft VisualBasic and Borland JBuilder will notice some parallel constructs in TIBCO General Interface Builder. Feature similarities include tools like data connection 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 the layout are saved and loaded each time you start TIBCO General Interface Builder. For more information about the user interface, such as menus and toolbars, see TIBCO General Interface Component Guide. Figure 6 TIBCO General Interface Builder User Interface
Open File Tabs Browser Menu TIBCO General Interface Builder Menu
Palettes
Work Area Work Area Views System Log Palette Taskbar
User Interface Basics 23
Projects
All development work in TIBCO General Interface Builder is done in a project in the 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 are created and opened in the work area. The JavaScript file, logic.js, is an empty file that you can add JavaScript code to. The default GUI component file, appCanvas.xml, is where you can begin designing your application user interface. When project files are saved, TIBCO General Interface Builder saves them to a project directory in the JSXAPPS directory in the specified workspace directory. For example, workspace/JSXAPPS/project_name. For more information on workspaces, see Choosing a Workspace on page 20. To access project files, click the JSXAPPS/project_name link in the General Interface Builder taskbar, located in the lower left area of the IDE. For more information, see Managing Projects in TIBCO General Interface Developer Guide.
Work Area
The work area is located in the center of the user interface. Here you can create and modify application components using palettes and tools, as well as work on other file types. Work Area Tabs and Editors The work area has a tabbed interface, so you can open multiple files simultaneously as you work. TIBCO General Interface Builder has built-in editors for creating and editing different types of files. These editors are available for the following file types: GUI components, XML, XSL, JavaScript, CSS (Cascading Style Sheets), dynamic properties, and mapping rules files. For more information, see Work Area Editors in TIBCO General Interface Developer Guide. If a file is read-only, a Lock icon displays on the work area tab. To unlock a locked, read-only file, double-click the Lock icon. Work Area Views The work area provides several views. The available views depend on what type of file is active in the work area. These views are available from the work area toolbar to the lower right of the work area as shown in Figure 7.
24
| Chapter 2
Figure 7 Work Area Views
Work Area Views
The work area views include: Live Component or Grid view Source view Formatted Source XML (Read Only) view Rendered HTML (Read Only) view Component Profile view
For more information, see Work Area Views in TIBCO General Interface Developer Guide.
Palettes
TIBCO General Interface Builder has palettes on all sides of the work area. All palettes can be floated or fixed for convenient access. Palettes can also be closed if not needed and reopened later from the Palettes menu. Click the Docking Options button on a palette and choose the desired docking option. General Interface Builder palettes include the following:
Component Libraries palette Drag-and-drop predefined GUI components into the work area. See Component Libraries Palette in TIBCO General Interface Developer Guide. Component Hierarchy palette View and manage the hierarchical model of
objects in your application. See Component Hierarchy Palette in TIBCO General Interface Developer Guide.
User Interface Basics 25
Properties Editor palette Set component properties. See Properties Editor
Palette 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 TIBCO General Interface Developer Guide
XSL Parameters palette Parameterize a components XSL transformation from CDF to HTML. See XSL Parameters Palette in TIBCO General Interface Developer Guide. Local Data Cache palette View, open, and edit cached XML and XSL files in
memory and save to disk. See Data and Cache Management in TIBCO General Interface Developer Guide.
Project Files palette View, open, and edit files referenced in the project. See Project Files Palette in TIBCO General Interface Developer Guide. Recycle Bin palette Recover deleted components from the Recycle Bin. See
Recycle Bin Palette in TIBCO General Interface Developer Guide.

System Log palette View system logging messages, such as warnings and
errors. See Logging Messages in TIBCO General Interface Developer Guide. Many of the palettes have a context menu. For more information, see Context Menus in TIBCO General Interface Developer Guide.
Tools
TIBCO General Interface Builder has a variety of tools and dialogs to assist you as you develop your applications.
Deployment Utility Generate the HTML or XHTML markup for launching deployed applications. See Deploying Applications in TIBCO General Interface Developer Guide. XML/XSL Merge Tool Merge a source document (XML or XSL) and an XSLT
filter document to test and view the text, HTML, or XML output. See Data and Cache Management in TIBCO General Interface Developer Guide.
XML Mapping Utility Configure and test data services. See Data Connection
and Mapping in TIBCO General Interface Developer Guide.

Test Interface Tool Test data services in the XML Mapping Utility. See Test Interface Tool in TIBCO General Interface Developer Guide.
26
| Chapter 2
Color Picker Tool Choose colors in hexadecimal format for use in your
JavaScript code and component files. See Color Picker Tool on page 232 in TIBCO General Interface Developer Guide.
JavaScript Test Utility Execute arbitrary JavaScript code. See Testing
JavaScript Code in TIBCO General Interface Developer Guide.

JavaScript Step Through Debugger Step through JavaScript code and inspect objects while debugging. This tool is only supported in Internet Explorer. See JavaScript Step Through Debugger in TIBCO General Interface Developer Guide. To debug in Firefox, use the Venkman extension. Visit http://getahead.ltd.uk/dwr/ajax/venkman/. Find and Replace Tool Find and replace text in a work area editor. See Find
and Replace Tool in TIBCO General Interface Developer Guide.

IDE Settings Modify TIBCO General Interface Builder IDE preferences for the
visual authoring environment. See Specifying IDE Settings in TIBCO General Interface Developer Guide.
Project Settings Modify project settings. See Modifying Project Settings in TIBCO General Interface Developer Guide.
| 27
Chapter 3
Tutorial: Creating an Application
This chapter is a tutorial that describes how to create a simple application using TIBCO General Interface Builder. This tutorial is based on the WSDL_Mapping_1 sample located in the workspace/JSXAPPS/samples directory. To look at the sample, choose Project > User Projects > Samples > WSDL_Mapping_1.
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
Introduction
This chapter demonstrates how to build a sample application that looks up city and state information. In TIBCO General Interface Builder, you create all the components that make up the application. The sample application looks like the following:
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 Developer Guide. If youre not familiar with the TIBCO General Interface Builder user interface, see User Interface Basics on page 22 for an introduction.
Creating a New Project 29
Creating a New Project

In this section, you create a new TIBCO General Interface project. A new project folder is created in the workspace/JSXAPPS directory, and all application-specific files are created and saved in this folder. The workspace is the directory that contains your projects, custom add-ins, custom prototypes, and your user settings for General Interface Builder. 1. Start TIBCO General Interface Builder and choose a workspace if you havent yet. If this is the first time youre starting General Interface Builder, see Starting TIBCO General Interface Builder on page 18. 2. Choose Project > New Project from the General Interface Builder menu or click 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 are open in the central work area. While building this sample application, all project data is stored locally in browser memory. The application is not automatically saved to the file system. Save the project before you close or refresh the browser window. If you dont save the project, the data is lost. For more information on projects, see Projects on page 23.
30
| Chapter 3
Creating a Layout
In this section, you create an application user interface that includes layout components to arrange the subcomponents. For all components, position information can be defined in two ways: Absolute positioning, with integer values for top, left, height, and width Relative positioning, using either a percentage of available space or by arranging components in sequence from top left to bottom right
This tutorial demonstrates both methods of positioning components. Now that youve created your project, a default GUI component file, appCanvas.xml, is open in a tab in the work area. The Component Libraries palette displays folders containing prototype components that can be added to the current component. The Component Hierarchy palette shows the hierarchical view of components in the GUI component file. Note that block, the default root component, is created automatically when you create a project. To avoid unexpected layout behavior in deployed applications, its recommended to use Block as a container only if it meets one of these requirements: The Block is owned by a layout manager, such as LayoutGrid, Tab, Stack, and Splitter. The Block is relatively positioned and has a width of 100%. The Block is absolutely positioned.
For tips on working with components, see Working with Components in TIBCO General Interface Component Guide. The following steps show you how to create a layout for the application: 1. Expand the Containers folder in the Component Libraries palette and drag a Layout -Top/Over component to the work area in the center of the General Interface Builder user interface. This component provides two panes for laying out application components. The Component Hierarchy palette shows that the new component, layout (--), is added as a child of block. 2. Right-click the appCanvas.xml tab at the top of the work area and select Save. The new layout component is saved in an XML file in the workspace/JSXAPPS/myAddressLookup/components directory. The appCanvas tab name is red when the file has unsaved changes and black after changes are saved.
Creating a Layout 31
The Component Hierarchy palette looks like this:
The next step is to modify properties for the layout component. Properties are characteristics that define a component. To modify component properties, you select the component in the Component Hierarchy palette and edit its properties in the Properties Editor palette. 3. To work more easily in the Properties Editor palette, click the Docking Options button on the palettes toolbar and choose Floating. When you dont need the Properties Editor palette, click the Toggle Display button to minimize it. To maximize it again, click the Properties Editor icon on the General Interface Builder taskbar at the bottom of the user interface. 4. Select the Layout - Top/Over component in the Component Hierarchy palette and change the following property values in the Properties Editor palette. To edit a field, type a value in the Value column and press the Tab or Enter key to save the value. The Name property is an internal name for the layout object. Component Name layout (--) Property Name Name Size Array Property Value
lytAddressLookup 50,*
The Properties Editor palette looks like this:
32
| Chapter 3
Notice that when you change the Name property, the name in the Component Hierarchy palette also changes. The sample address lookup layout requires several subcomponents, which you add and customize in the following steps.
Customizing Pane Properties

In this section, you set the properties for each pane in a Layout component, including background color, size, and display name. Many of the properties have a list of dynamic properties you can access from the Properties Editor palette context menu. For more information, see Dynamic Properties 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 in the Component Hierarchy palette and modify their properties in the Properties Editor palette as follows.
Creating a Layout 33
To insert a property value that starts with the @ symbol, right-click the Value column next to the property name and choose it from the context menu. Component Name pane (first) Property Name Name BG Color Padding Border pane (second) Name BG Color Border Property Value
paneInput @Solid Medium @8Pixel @No jsxborder paneOutput @Solid Light @Outset
The component hierarchy and the work area should look similar to the following:
2. Save the appCanvas.xml component.
34
| Chapter 3
For more information on components, see Working with Components in TIBCO General Interface Component Guide.
Adding Form Elements to the Application 35
Adding Form Elements to the Application

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 and state information. The sample application also requires a button for calling the web 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 Label component to the top pane component, paneInput, in the work area. 2. Open the Form Elements folder in the Component Libraries palette and drag a Text Box component to the paneInput component in the Component Hierarchy palette. The component hierarchy should look like the following:
3. Select the following child components of paneInput in the Component Hierarchy palette and enter the specified values in the Properties Editor palette. For padding and margin, be sure to enter a space between each number.
Component Name label
Property Name Name Width Height Text/HTML Padding
Property Value
lblZipcode 100 18 Type Zip Code: 4 0 0 0
36
| Chapter 3
Component Name
Property Name Margin
Property Value
0 4 0 0 txtZipcode 18 0 4 0 0
text box
Name Height Margin
For properties that require CSS values, such as margin and padding, you can use 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 paneOutput component. You need a layout here, because youll be adding two rows of components for the return information, city and state. 5. Change the new layout(--) component properties in the Properties Editor palette to the following: Component Name layout (--) Property Name Name Size Array Property Value
lytOutput 50,*
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 state information that the web service returns.
Cloning Components 37
Cloning Components
Cloning components saves time in creating your application and in setting component properties. A clone is a copy of a selected component. In this application, all three panes for zip code, city, and state will have a text label and a text box, all with similar properties. In this section, youll remove the existing lytOutput child panes. Then youll make clones of paneInput and move them to the lytOutput component. The two bottom panes will contain the city and state information returned by the Address Lookup Service. To create clones of the paneInput component, complete these steps: 1. Select the lytOutput component in the Component Hierarchy palette and click the Recycle Descendants button on the toolbar to delete the two descendant panes of lytOutput. Instead, youll use clones of the paneInput component. If you delete components by mistake, you can recover them from the Recycle Bin. Choose Palettes > Recycle Bin. 2. Select paneInput in the Component Hierarchy palette and click the Clone button on the toolbar two times to create two clones. Two clones of the paneInput component display at the bottom of the Component Hierarchy palette. 3. Drag the two paneInput clones and drop them on the lytOutput component in the Component Hierarchy palette.
38
| Chapter 3
The component hierarchy and work area should look like the following:
4. Change the properties for the two cloned panes (children of lytOutput) and their labels and text boxes in the Properties Editor palette: Component Name paneInput (first child of lytOutput) BG Color lblZipcode Name Text/HTML txtZipcode Name Enabled paneInput (second child of lytOutput) BG Color
@Solid Light @Solid Light lblCity City: txtCity Disabled paneState
Property Name Name
Property Value
paneCity
Name
Cloning Components 39
Component Name lblZipcode
Property Name Name Text/HTML
Property Value
lblState State: txtState Disabled
txtZipcode
Name Enabled
The txtCity and txtState text boxes are set to Disabled, because user input isnt allowed for these text boxes. The Address Lookup Service will return city and state values in these text boxes. The application should look similar to the following:
5. Save your application. Next, youll add a button and a button event to the application.
40
| Chapter 3
Adding a Button and Button Event

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 web service. The button event wont work until you generate the code that calls the web service. 1. Drag a Button component from the Form Elements folder in the Component Libraries palette to the paneInput component and modify its properties as follows: Component Name button Property Name Name Text/HTML BG Color Property Value
btnLookup Find City and State #ADADC6
You can use the Color Picker to choose color values. Choose Tools > Color Picker You can also click in the Value field in the Properties Editor palette and click the Color Picker button to open the Color Picker. 2. To work more easily in the Events Editor palette, click the Docking Options button 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 Execute event:
eg.service.callReturnCityState();
This button event wont work until you define this function in another tutorial, Tutorial: Communicating with a Web Service in TIBCO General Interface Developer Guide. This function calls the web service that returns city and state information. When a user inputs a zip code and clicks the button, the zip code is sent to the web service.
Adding a Button and Button Event 41
5. Save the project and choose Project > Run Project to run your application and see what it looks like. The application should look similar to this:
6. Close the running application. The objects created in the previous steps are live application objects. When you save the parent component to disk, the parent and all child components are saved with the current object states. Now that the user interface is complete, the next step is to create mappings between application objects and data elements. Once youve created the mappings, youll generate the code that calls the web service. To continue working with this application, see Tutorial: Communicating with a Web Service in TIBCO General Interface Developer Guide. In the next tutorial, you connect the components to a web service and test the application.
42
| Chapter 3
Further Information
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
A
adding and positioning application components 30 adding form elements 35 AJAX rich internet applications 2 application layer 9 applications adding and positioning components 30 tutorial 28 architecture 6, 8 Attributes Editor palette 25
deployment 13 Deployment Utility 25 development tools 14 docking options, palettes 24
E
events binding to components 40 Events Editor palette 25
C F
caching data Local Data Cache palette 25 Color Picker Tool 26 communication layer 12 Component Hierarchy palette 24 Component Libraries palette 24 components adding 30 binding events to 40 positioning 30 saving 30 views 23 console mode (HTA) 19 creating a layout 30 creating a new project 29 customer support xii customizing pane properties 32 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
D
data layer 10
J
JavaScript Step Through Debugger 26
44
| Index
JavaScript Test Utility 26
R
Recycle Bin palette 25 rich Internet application-based MVC architecture 5 running multiple instances of General Interface Builder 21
L
layouts, creating 30 Local Data Cache palette 25 logging System Log palette 25
S
scalable architecture 13 server-based MVC architecture 4 starting TIBCO General Interface Builder 18 support for industry standards 13 support, contacting xii 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 25 Local 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 4 Project Files palette 25 projects 23 creating 29 Project Files palette 25 settings 26 workspace 20 properties customizing panes 32 modifying 31 Properties Editor palette 25 Properties Editor palette 25
T
tabs work area 23 technical support xii Test Interface Tool 25 TIBCO General Interface AJAX 2 container model 10 features 13 TIBCO General Interface Builder GUI basics 22 HTA (console mode) 19 HTML mode 19 running multiple instances 21 starting 18, 19 XHTML mode 19 tools 25 tutorials creating an application 27 typographical conventions x
Index 45
U
user home 20
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

Tib Gi Pe Getting Started

Загружено:

Сведения о документе

Исходное описание:

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Tib Gi Pe Getting Started

Загружено:

Авторское право:

Доступные форматы

TIBCO General Interface Getting Started

Professional Edition Software Release 3.3 February 2007

Chapter 2 Introduction to TIBCO General Interface Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

TIBCO General Interface Getting Started

TIBCO General Interface Getting Started

Figure 1 Figure 2 Figure 3 Figure 4 Figure 5 Figure 6 Figure 7

TIBCO General Interface Getting Started

TIBCO General Interface Getting Started

TIBCO General Interface Getting Started

TIBCO General Interface Documentation

TIBCO General Interface Getting Started

Product documentation Best practices documents Forums

TIBCO General Interface Getting Started

bold code font

TIBCO General Interface Getting Started

Table 2 Syntax Typographical Conventions Convention

Use An optional item in a command or code syntax. For example:

bold code font

TIBCO General Interface Getting Started

| How to Contact TIBCO Customer Support

TIBCO General Interface Getting Started

TIBCO General Interface Getting Started

Rich Internet Applications

TIBCO General Interface and AJAX

TIBCO General Interface Getting Started

Rich Internet Applications 3

TIBCO General Interface Getting Started

Disadvantages of Server-Based MVC Architecture

TIBCO General Interface Getting Started

Rich Internet Application-Based MVC Architecture

TIBCO General Interface Getting Started

How MVC Elements Work Together

TIBCO General Interface Getting Started

TIBCO General Interface Getting Started

Figure 5 TIBCO General Interface Architecture

TIBCO General Interface Getting Started

allowing for DOM-based access to the original data.

TIBCO General Interface Getting Started

TIBCO General Interface Getting Started

TIBCO General Interface Getting Started

Support for Industry Standards and Best Practices

TIBCO General Interface Getting Started

TIBCO General Interface Getting Started

TIBCO General Interface Getting Started

TIBCO General Interface Getting Started

Introduction to TIBCO General Interface Builder

TIBCO General Interface Getting Started

Introduction to TIBCO General Interface Builder

Starting TIBCO General Interface Builder

TIBCO General Interface Getting Started

Starting TIBCO General Interface Builder 19

General Interface Builder Launch Modes

(Internet Explorer only)

TIBCO General Interface Getting Started

Introduction to TIBCO General Interface Builder

TIBCO General Interface Getting Started

Starting TIBCO General Interface Builder 21

Running Multiple Instances of General Interface Builder

TIBCO General Interface Getting Started

Introduction to TIBCO General Interface Builder

User Interface Basics

Work Area Work Area Views System Log Palette Taskbar

TIBCO General Interface Getting Started