TIBCO General Interface Enterprise Edition Getting Started

Software Release 3.9.1 April 2012

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

General Interface Getting Started

General Interface Getting Started Software Release 3.9 March 2010 Chapter 1 Getting Started Introduction Chapter 2 Starting General Interface Builder Chapter 3 User Interface Basics Chapter 4 Tutorial on Creating an Application

Copyright TIBCO Software Inc. All Rights Reserved.

Chapter 1 Getting Started Introduction

This chapter provides an introduction to General Interface and a broad orientation to the environment. Rich Internet Applications Processing Model Architecture Features

Rich Internet Applications

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

General Interface and Ajax

The General Interface application framework solves this problem by enabling enterprises to deliver rich internet applications (RIAs) that look, feel, and perform like desktop installed software but run in a standard web browser. With General Interface, enterprises can have the best of both options: rich, highly productive, service-differentiating GUI functionality with the low-cost profile of web development, instant distribution, and accessibility. The General Interface application framework leverages Ajax (asynchronous communications, JavaScript, and XML), event, and rendering capabilities of the web browser to instantly create a powerful, object-based enterprise-grade application environment into which your General Interface applications can be deployed. By working with an object-based environment, as opposed to declarative markup languages, development time is shortened, and the business can easily distribute, manage, and deploy high performance solutions. The application programming interfaces (APIs) provided by the browser remain a weak point in the development of end user applications more complex than online retail shopping. The
Copyright TIBCO Software Inc. All Rights Reserved.

in the development of end user applications more complex than online retail shopping. The existing browser APIs are not designed to create robust enterprise-grade applications. Therefore, development is time-consuming and expensive, maintainability is difficult, and many businesses completely avoid implementing enterprise web applications. Browsers lack the foundation classes familiar to Microsoft Windows programmers and the object-oriented presentation packages familiar to Java programmers. Instead, HTML browsers provide a generic API intended for displaying series of hyperlinked web pages that lack the features provided by many thick clients. General Interface solves existing browser limitations by distributing many of the processes typically handled by a centralized web application server to the browser on the client machine. The application framework does this by first wrapping, then extending, browser APIs with functionality more suitable to object-oriented application development. Rather than forcing you to model complex workflows with a series of flat HTML pages, the General Interface APIs enable you to create stateful, interactive, object-based, client applications that look, feel, and perform as if launched from the local operating system.

Processing Model
By distributing many of the processes usually handled by centralized application servers to the browser on the client machine, enterprises can deliver full-featured software solutions that simply run in the browser without any need for extra runtime components or plug-ins. General Interface is a powerful implementation of model-view-controller (MVC) principles. Unlike server-centric MVC architectures, with General Interface, the view processes are distributed to the web browser. This design removes the view generation work from servers and reduces demands on bandwidth, making applications far more scalable. The design also leverages the power of the client CPU to deliver highly responsive, stateful, full-featured applications in a browser.

Disadvantages of Server-Based MVC Architecture

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

Copyright TIBCO Software Inc. All Rights Reserved.

Rich Internet Application-Based MVC Architecture

In a rich Internet application based MVC architecture, view processes are distributed to the browser where they run on the client system. The distributed view employs an MVC architecture of its own, turning the browser into an RIA environment. Because client-side objects generate the HTML, significantly fewer processes need run on the server. Bandwidth is optimized for data. Application performance and scalability are significantly enhanced.

General Interface software enables the view portion of the MVC architecture to be distributed to and run on a web browser running on the client system. This approach has the following benefits: Improves application scalability by removing significant server processes Decreases latency by using substantially all the bandwidth to deliver data (instead of a minority of bandwidth for data in the traditional model where HTML markup takes up most of a transmission) Delivers full-featured application performance and rich GUI features to an unmodified web browser, without plug-ins, runtime environments, and extra software to install

Architecture
The General Interface MVC implementation means that the General Interface components are broken down into three architectural elements, each of which plays a crucial role in how the component behaves.

Model
The Model maintains the state data for each object instance. For example, the model portion of the Matrix (jsx3.gui.Matrix) object tracks state properties such as the number of columns, the widths of each column, the outer dimensions for the table, how to sort which column, and so on.

View
The View refers to how the object instance is actually displayed on the client machine. A good way to envision a view is to think of object look-and-feel. The following figure shows different views that the Tab object can produce:

Copyright TIBCO Software Inc. All Rights Reserved.

Controller
The Controller dictates how a given object will interact with events. Events include user-initiated events and system-initiated events, including mouse-clicks, key-presses, drag-and-drop operations, screen and component repainting, and calls from the application business logic.

How MVC Elements Work Together

The best way to describe how these three elements work together is to describe a typical GUI object, such as the Tab object, in context of these three elements.

The easiest aspect of MVC to understand is the view. The view is what end users see when they use the application. The three Tab object instances shown in the previous figure, for example, have a consistent view that adheres to the visual design for the application. With the view element now defined, it's easier to explain the model portion of the MVC architecture. The model element allows the given Tab object to keep an index of properties that uniquely define its state in memory (see the following table). The model is unaffected by how the tab visually displays its state. Instead, it maintains a single Boolean property, active, that is set to true or false. From an architectural perspective, separating the model from the view means that more of the code base can be leveraged on future projects. Regardless of whether the view for a Tab object has beveled edges or graphical icons, the model remains the same. This means that only the view code for a given class needs to be updated from project to project. Tab 1 Text Index Active activeColor Tab 2 Tab 3

Account Info Search Results Account History 0 true cccccc 1 false cccccc 8c8c8c 2 false cccccc 8c8c8c

inactiveColor 8c8c8c

The controller element updates the model based on events passed from the corresponding view. For example, a user clicks the displayed view for a Tab object in an attempt to bring the contents of that tab forward in the view. The view, in this case the actual HTML that is displayed, then processes the click event by calling the controller requesting that the selected tab be made active, and therefore brought forward in the view. Next, the controller queries the model to validate that the Tab object that was clicked is not already active. If the given Tab object is already active, the controller exits early without applying any changes to the object. However, if the Tab object is inactive, the controller updates the model by setting the active property to true. And then, the view is repainted in the browser to visually depict the new model value. In general, the model passes data to the corresponding view for rendering. The view then passes events to the controller for processing. This updates the model to reflect the property
Copyright TIBCO Software Inc. All Rights Reserved.

passes events to the controller for processing. This updates the model to reflect the property changes, providing a closed feedback loop.

Architecture Details
Applications that leverage General Interface run in a standard browser. No other software is required to run the application on a client machine. This means that the client application is completely native, allowing for stable, fast, and true thin client, zero-install applications. No applets, plug-ins, or ActiveX controls are required to deliver robust application functionality. To deliver high functionality in a standard browser environment, General Interface leverages many of the same principles that make server-side architectures successful. General Interface software is founded upon solid, object-oriented principles. This means that robustly scalable functionality requires only a minimal footprint of client memory and network bandwidth. The class libraries that underlie the software are lean, comprising over 400 logical functions in approximately 300KB of data. Due to the object-oriented architecture and object inheritance framework, over 2,200 function calls are actually available at runtime across more than 40 foundation objects. Furthermore, because the class libraries follow a consistent object-oriented structure, they can be modified as necessary by runtime updates, additions, and even sub-classing. In addition, new objects can also be built by combining foundation objects, all without increasing the overall framework size. To manage such a broad array of functionality, General Interface employs a multi-tiered approach to object design. Essentially, any available function can be categorized into four distinct layers, as illustrated in the following figure. These include: Client logic layer This layer consists of all programmatic logic, such as business rules and client-specific functionality. Presentation layer This layer is founded upon solid object oriented design principles that leverage many of the key concepts used by Java Swing, without the overhead of the Java Runtime Environment (JRE). A familiar Java-like syntax is used, generating complex HTML and JavaScript that runs natively in the browser, rather than Java class files that require the browser to load the memory-intensive JRE. Data layer This layer is a client-side data cache used for quick access to application data. All data is cached as parsed XML and can be accessed at runtime through XSL queries. This is similar to the way SQL is used to interface with relational data stores on the server. Communication layer This layer manages threaded communications with remote web servers using web service protocols such as SOAP and XML-RPC, as well as traditional web protocols like HTTP GET/POST.

Copyright TIBCO Software Inc. All Rights Reserved.

Application Layer
General Interface provides libraries of functional objects that hide the complexities of DHTML development. You do not need to be familiar with the specifics of HTML in a given browser and can focus instead on the actual business logic for the application. You write JavaScript to enforce business rules and workflow, not to move HTML around the screen. Accordingly, enterprises get more yield out of their development resources.

Presentation Layer
General Interface employs a presentation approach similar to Java Swing but without the overhead of the Java Runtime Environment. Developers familiar with container-based GUIs will find similar constructs in the General Interface environment. Application components, screens, and widgets are constructed from General Interface GUI objects and saved as object sets that can be imported or exported at runtime to deliver incremental application functionality on demand. Accordingly, businesses can leverage the General Interface components out of the box or create libraries of their own reusable application components. General Interface provides customizable GUI components. Prototypes are available in the System folder of the Component Libraries palette as a starting point. From these components, you can create custom components. Note that different prototype objects can be instances of the same base class. For example, Text Box provides the base class for instances of a text box, a text area, and a password field. Similarly the Block class is used as the base for Label and Image. General Interface GUI objects generate custom DHTML and JavaScript on the client. This design differs from traditional ASP or JSP architectures, where the presentation is generated on the server, and the resulting stream of HTML is returned to the browser for rendering. With General Interface, presentation generation doesn't occur on the server. Therefore, transfer of presentation instructions over the network isn't necessary. The result is highly responsive GUI applications that free up bandwidth for data (not HTML) and reduce the number of servers and server software licenses necessary to deliver a given application.

Copyright TIBCO Software Inc. All Rights Reserved.

Data Layer
The client-side XML data cache provides you with a consistent API for data access and management. Benefits include: Efficient data reuse Multiple client objects within the presentation layer can use the same XML document for their source data, keeping redundant data transfer to a minimum. Runtime data access Since server data is stored as XML, integrity is retained, allowing for DOM-based access to the original data. Cache management methods A robust API allows you to write application-specific business rules that keep the client-side data synchronized with the server. Client-side HTML generation With HTML generation on the client, server communications are unnecessary for presentation changes such as sorting and styling.

Container Architecture
General Interface uses a container-based model for visual components, similar to that of Java Swing and other object-based GUIs. Rather than treating a web application as a series of hyperlinked pages, this architecture provides true object modeling when building an application. Container-based architectures have significant advantages, including: Intelligent data refresh Specific containers can be targeted for updates while others remain untouched. Compared with refreshing an entire HTML page, less network bandwidth and CPU time is required. Incremental functionality An application can import additional object sets only when required. The application initializes and responds faster because only a minimum object set is loaded. User actions can drive the loading of additional functionality. General Interface Builder is an example of a robust application that loads functionality on demand. Modular design paradigm The ability to work in a familiar, modular environment that is more efficient than HTML. High-level objects, such as Matrix and Dialog, take the place of div and span elements.

Communication Layer
General Interface supports multiple protocols for communicating with services in the network. The basic supported interactions, which all function over HTTP/S, include the following. Communication Type XML GET SOAP HTTP GET Outbound Request Format Expected Response Format

URL with Name-value pairs XML XML/SOAP XML/SOAP

URL with Name-Value Pairs XML/HTML/text XML/HTML

HTML FORM POST/GET HTML Form

A key principle that drives the General Interface communication efficiency is to limit refresh to subsets of the screen, not the entire browser window. To facilitate this, General Interface improves and extends the traditional click-and-refresh APIs provided by the browser. Developers familiar with web application development have traditionally used standard approaches like HTML frames. Consider a standard web mail client, for example. To improve
Copyright TIBCO Software Inc. All Rights Reserved.

approaches like HTML frames. Consider a standard web mail client, for example. To improve the user experience, the left frame persistently displays various folders and tools, while the right frame displays dynamic data. Although this design is adequate, there is no question that a web mail client is far less useable than an installed executable, such as Microsoft Outlook. Technologies that provide single-page persistence in a web browser do exist, but these often leverage a client-side Java applet that requires loading the Java Runtime Environment into client memory or running a specific server platform. However, this design can quickly undermine application stability and available client-side memory.

Features
In addition to providing a powerful and efficient architecture, General Interface makes it easy to develop and deploy applications. Industry-standard technology is used, so knowledge of existing technologies can be leveraged.

Ease of Deployment
The General Interface application framework and all General Interface applications are composed of JavaScript, XML, and CSS files. To deploy the environment and applications, you simply include a reference to these files in an HTML page that can be accessed by an end user from any HTTP or HTTPS server. The end user types the URL into a browser and starts using the General Interface application. To restrict and secure access to your application, use your existing mechanism for securing web page access.

Support for Industry Standards and Best Practices

General Interface uses industry standard and widely accepted technologies in both its underlying code (JavaScript, XML, and CSS) and overall architecture (Model-View-Controller and multi-tier design). Best-practice, server-side tasks are migrated to the browser to deliver the same successful results, maintainable code, and scalable performance. General Interface takes best-practice approaches from the server and implements them in the browser.

Scalable Architecture
The fastest page server simply cannot compete with locally served data. Load balancing, additional processors, page pre-caching, and any number of server-side enhancements are all ultimately short-term solutions. Rather than attempting to scale the server to meet the needs of the nth end user, consider a paradigm where each end user provides the resources for their own processing needs. Unlike traditional server architectures, General Interface runs on the client, using the client CPU for data presentation and interaction. Even the General Interface foundation classes that facilitate this process are cached on the client. This means after a General Interface application is accessed, only raw data is requested from the server. Since no HTML needs to be transferred to the client, bandwidth is freed up to deliver more data to the end user more quickly. In addition, because presentation processes are now distributed to the client, servers no longer need to generate HTML for each connected user. With HTML generation processes no longer running on the server, the ratio of servers to end users is greatly improved.

Copyright TIBCO Software Inc. All Rights Reserved.

10

Development Tools
You can develop General Interface client applications and components using General Interface Builder, a script authoring environment, or your favorite IDE. Once the General Interface runtime environment is loaded into an HTML page in the browser, you can directly interact with the General Interface GUI, data, and communication objects using JavaScript APIs. General Interface Builder, a rapid deployment environment, is a visual authoring environment optimized for creating General Interface applications and can run either as a standalone tool or within the embedded browser module of your favorite IDE.

As a standalone development environment, General Interface Builder provides a powerful, rapid application assembly and scripting environment. You can drag and drop GUI components, connect to services, examine cached data, and implement the behaviors of the client application using JavaScript business logic and events. When running General Interface Builder in conjunction with your favorite IDE, you have a complete end-to-end live development and testing environment with object, code, message, and error inspection.

Copyright TIBCO Software Inc. All Rights Reserved.

11

Chapter 2 Starting General Interface Builder

This chapter explains how to start General Interface Builder and how to choose a workspace. Launching General Interface Builder General Interface Builder Launch Modes Choosing a Workspace Running Multiple Instances of General Interface Builder

Launching General Interface Builder

General Interface Builder must run from a local disk. So that you can load and save files, General Interface requires access rights to any files that you're working with. To launch General Interface Builder: 1. Browse to the General Interface installation directory, tibco-gi-version_-pro, and double-click a GI_Builder.* file. See General Interface Builder Launch Modes. 2. Click Yes in the browser prompt, if any, to allow reading and writing files to and from the file system. a. The ActiveX prompt appears on Internet Explorer. On Firefox, you will see two security prompts. Check the Remember this setting box before clicking Allow. b. If General Interface Builder fails to launch and an alert notifies you that a required resource is unavailable, see General Interface Builder Doesn't Launch. 3. If this is the first time you are starting General Interface Builder: a. Read the license agreement and click Agree. b. Choose a project workspace. See Choosing a Workspace. Choosing an existing workspace doesn't replace previous sample applications with updated sample applications, to prevent workspace files from being overwritten. Create a new workspace for the updated sample applications. 4. If the Welcome screen opens, click the Create a New Project or Open an Existing Project link to begin working on a project. The Welcome screen provides links to more General Interface resources. If the Welcome screen doesn't open, choose Project > New Project, Project Recent Projects, or Project > User Projects to begin working on a project. If you are new to General Interface Builder, see Tutorial on Creating an Application.

General Interface Builder Doesn't Launch

If General Interface Builder displays an alert that says a resource is unavailable, there are several possible reasons: The General Interface Builder file is blocked by its own restrictions. Microsoft's Attachment Manager might block the ZIP file and its contents. To unblock the ZIP file: Right-click the ZIP file and click Properties.
Copyright TIBCO Software Inc. All Rights Reserved.

12

Right-click the ZIP file and click Properties. On the General tab, click Unblock. If you don't see this button, your file is not blocked and there's no need to unblock it. If the file is blocked, an Internet icon displays in the status bar. If the file isn't blocked, a My Computer icon displays in the status bar. The ActiveX control wasn't loaded. Be sure to accept the ActiveX prompt. Internet Explorer uses the Microsoft ActiveX control for file system access. ActiveX is not required for deployed General Interface applications. Also be sure that your browser security settings allow for loading of ActiveX. For Internet Explorer, enable the setting "Allow active content to run in files on My Computer" (Tools > Internet Options > Advanced). General Interface Builder isn't running from the local file system. Because General Interface Builder requires file access to load and save files, you must run General Interface Builder from your local file system and have access rights to any files you are working with.

General Interface Builder Launch Modes

You can start General Interface Builder in different modes. Launch Mode HTML mode Description Opens General Interface Builder in the selected web browser. File name:
GI_HOME/GI_Builder.html

XHTML mode

Opens General Interface Builder in XHTML mode. This can be useful for developing and testing applications that run in XHTML pages, such as portlet applications. File name: GI_HOME/GI_Builder.xhtml Note: XHTML mode is not supported by Internet Explorer 7. Opens General Interface Builder as an HTML application (HTA). HTAs are not subject to the same security constraints as web pages, and when run locally are given privileges to read and write to the local file system. General Interface Builder occupies the entire screen of your monitor. Note: Console mode runs only in HTML mode, not in XHTML mode. File name: GI_HOME/GI_Builder.hta

Console mode (Internet Explorer only)

launch_in_ide.html Launches a project in General Interface Builder in HTML mode. This file is created automatically in your project directory when you create a project. Note: Use this file to launch General Interface only during development, not at runtime. File name: workspace
/JSXAPPS/project_dir/_launch_in_ide.html

You can create a shortcut of a launch page and add it to your browser's favorites. For more information about files in the General Interface installation directory, see the General Interface Developer Guide.
Copyright TIBCO Software Inc. All Rights Reserved.

13

Choosing a Workspace
The first time General Interface Builder launches after installation, the application window is blank and a dialog prompts you to create or select a workspace directory.

The workspace is the directory that contains your projects, custom add-ins, custom prototypes, and your user settings for General Interface Builder. To choose a workspace and open or create a project: 1. Do one of the following: Click the Browse button in the Create or Locate Workspace dialog to navigate to an existing directory or to create a new directory. The workspace must be on your local drive, so General Interface Builder can read and write files to the local file system.

Click the Choose button to accept the default workspace location. The default location is C:\Documents and Settings\username_\My Documents\TibcoGI., Choosing an existing workspace doesn't replace previous sample applications with updated sample applications. This built-in functionality is designed to prevent workspace files from getting overwritten. Create a new workspace to get the updated sample applications. 2. Click the Reload Browser button in the Alert dialog to restart General Interface Builder. The workspace configuration is saved in the browser cookie. If you use a cookie cleaner, configure it to keep the cookies for the local machine. For instructions on creating new projects, see Tutorial on Creating an Application. For more information on workspaces and projects, see the General Interface Developer Guide.

Copyright TIBCO Software Inc. All Rights Reserved.

14

Running Multiple Instances of General Interface Builder

General Interface Builder is designed to run as multiple instances simultaneously. You can open multiple instances of General Interface Builder from the same installation folder. Each instance of General Interface can run a different application or the same application. Because each instance is sharing the same preferences and settings files, competing changes to General Interface Builder preferences cannot be persisted. You can also have multiple instances of General Interface Builder running projects in the same workspace or from multiple workspaces. Multiple releases can also be open at the same time. For example, you can open a project in General Interface 3.1 and also open a copy of that project in 3.2 at the same time. In addition, you can open multiple instances and multiple releases in different browsers, such as Internet Explorer and Firefox. When a project canvas file is saved in a newer version of General Interface Builder, it cannot be open in an older version.

Copyright TIBCO Software Inc. All Rights Reserved.

15

Chapter 3 User Interface Basics

This chapter provides an overview of General Interface Builder features. About the General Interface Builder Interface About General Interface Builder Projects About the General Interface Builder Work Area About General Interface Builder Palettes Tools and Settings

About the General Interface Builder Interface

Developers familiar with visual, component-based environments such as Microsoft VisualBasic and Borland JBuilder will notice some parallel constructs in General Interface Builder. Feature similarities include tools like data connection wizards, event-binding, and object modeling. The figure shows the main interface elements of General Interface Builder. The default layout is fully customizable. Any modifications you make to the layout are saved and loaded each time you start General Interface Builder. For more information about the user interface, such as menus and toolbars, see General Interface Component Guide.

Copyright TIBCO Software Inc. All Rights Reserved.

16

About General Interface Builder Projects

All development work in General Interface Builder is done in a project in the workspace. Projects are collections of files you create and edit in General Interface Builder. Project files appear in the Project Files palette. When you create a project, the default files logic.js and appCanvas.xml are automatically created and opened in the work area:
logic.js is an empty JavaScript file to which you can add JavaScript code. appCanvas.xml, is the default GUI component file, where you begin designing your

application user interface. When you save project files, General Interface Builder saves them to your project directory. For example, logic.js is by default at this location: workspace/ JSXAPPS/project_namee/ js / logic.js For more information about workspaces, see Choosing a Workspace. To access project files, click the JSXAPPS/project_name link in the General Interface Builder taskbar, located in the lower left area of the IDE. In releases prior to 3.7, project files appear in the folders that correspond to their type, regardless of where they are located on the file system. Beginning with Release 3.7, files are in the same location as the file system. For more information, see the General Interface Developer Guide.

About the General Interface Builder Work Area

The center of General Interface Builder is the work area. In the work area, you can create and modify application components using palettes and tools, and edit files of types such as XML and JavaScript.

Work Area Tabs and Editors

The work area is tabbed, so that you can open multiple files simultaneously as you work. General Interface Builder includes editors for creating and editing files of these types: GUI components, XML, XSL, JavaScript, CSS (Cascading Style Sheets), dynamic properties, and mapping rules files. For more information, see the General Interface Developer Guide. If a file is read-only, a Lock icon appears on the work area tab. To unlock a locked, read-only file, double-click the Lock icon.

Work Area Views

The views available in the work area are: Live Component or Grid view
Copyright TIBCO Software Inc. All Rights Reserved.

17

Live Component or Grid view Source view Formatted Source XML (Read Only) view Rendered HTML (Read Only) view Component Profile view

For more information, see the General Interface Developer Guide.

About General Interface Builder Palettes

General Interface Builder has palettes on all sides of the work area. You can arrange palates for convenient access as you workyou can assign them fixed locations, or float them over the work area. You can also close palettes when you don't need them, then reopen them later from the Palettes menu. To arrange a palette on the work area, click its Docking Options button General Interface Builder palettes include: Component Libraries palette Drag and drop predefined GUI components into the work area. Component Hierarchy palette View and manage the hierarchical model of objects in your application. Properties Editor palette Set component properties. Events Editor palette Specify events for components. Attributes Editor palette Edit component attributes to extend the serialized HTML representation of components. XSL Parameters palette Parameterize a component's XSL transformation from CDF to HTML. Local Data Cache palette View, open, and edit cached XML and XSL files in memory and save to disk. Project Files palette View, open, and edit files referenced in the project. Recycle Bin palette Recover deleted components from the Recycle Bin. System Log palette View system logging messages, such as warnings and errors. Many of the palettes have a context menu. For more information, see the General Interface Developer Guide. For more information, see the General Interface Developer Guide.
Copyright TIBCO Software Inc. All Rights Reserved.

18

Tools and Settings

General Interface Builder has a variety of tools and settings dialogs to assist you as you develop your applications. For more information, see the General Interface Developer Guide. Deployment Utility Generate the HTML or XHTML markup for launching deployed applications. XML/XSL Merge Tool Merge a source document (XML or XSL) and an XSLT filter document to test and view the text, HTML, or XML output. XML Mapping Utility Configure and test data services. Test Interface Tool Test data services in the XML Mapping Utility. Color Picker Tool Choose colors in hexadecimal format for use in your JavaScript code and component files. Find and Replace Tool Find and replace text in a work area editor. IDE Settings Modify General Interface Builder IDE preferences for the visual authoring environment. Project Settings Modify project settings.

Copyright TIBCO Software Inc. All Rights Reserved.

19

Chapter 4 Tutorial on Creating an Application

This chapter is a tutorial that describes how to create a simple application using General Interface Builder. This tutorial is based on the WSDL_Mapping_1 sample located in the workspace /JSXAPPS/samples directory. To look at the sample, choose Project > User Projects > Samples > WSDL_Mapping_1. Introduction to Creating an Application Creating a New Project Creating a Layout Adding Form Elements to the Application Cloning Components for an Application Adding a Button and Button Event

Introduction to Creating an Application

This chapter demonstrates how to build a sample application that looks up city and state information. In General Interface Builder, you create all the components that make up the application.

Creating a Sample Application

After you complete this tutorial, you can continue to the next tutorial to connect the components to a data service and test the application. See the General Interface Developer Guide. If you're not familiar with the General Interface Builder user interface, see User Interface Basics for an introduction.

Copyright TIBCO Software Inc. All Rights Reserved.

20

Creating a New Project

In this section, you create a new General Interface project. A new project folder is created in the workspace/JSXAPPS directory, and all application-specific files are created and saved in this folder. The workspace is the directory that contains your projects, custom add-ins, custom prototypes, and your user settings for General Interface Builder. 1. Start General Interface Builder and choose a workspace if you haven't yet. If this is the first time you're starting General Interface Builder, see Starting General Interface Builder. 2. Choose Project > New Project or click the Create a New Project link in the Welcome screen (Help > Welcome Screen) to open the new project wizard. 3. Choose General Interface Application as the project type, and click Next.

4. Choose the project template and click Next.

Copyright TIBCO Software Inc. All Rights Reserved.

21

5. Specify a project path and click Finish.

A new project is loaded in the browser window. Two default, empty files are open in the central work area. While building this sample application, all project data is stored locally in browser memory. The application is not automatically saved to the file system. Save the project before you close or refresh the browser window. If you don't save the project, the data is lost. For more information on projects, see About General Interface Builder Projects.

Creating a Layout
In this section, you create an application user interface that includes layout components to arrange the subcomponents. For all components, position information can be defined in two ways: Absolute positioning, with integer values for top, left, height, and width Relative positioning, using either a percentage of available space or by arranging components in sequence from top left to bottom right This tutorial demonstrates both methods of positioning components. Now that you've created your project, a default GUI component file, appCanvas.xml, is open in a tab in the work area. The Component Libraries palette displays folders containing prototype components that can be added to the current component. The Component Hierarchy palette shows the hierarchical view of components in the GUI component file. Note that block, the default root component, is created automatically when you create a project.

Copyright TIBCO Software Inc. All Rights Reserved.

22

To avoid unexpected layout behavior in deployed applications, it's recommended to use Block as a container only if it meets one of these requirements: The Block is owned by a layout manager, such as LayoutGrid, Tab, Stack, and Splitter. The Block is relatively positioned and has a width of 100%. The Block is absolutely positioned.

For tips on working with components, see the General Interface Component Guide. The following steps show you how to create a layout for the application: 1. Expand the Containers folder in the Component Libraries palette and drag a Layout -Top/Over component to the work area in the center of the General Interface Builder user interface. This component provides two panes for laying out application components. The Component Hierarchy palette shows that the new component, layout (--), is added as a child of block. 2. Right-click the appCanvas.xml tab at the top of the work area and select Save. The new layout component is saved in an XML file in the workspace /JSXAPPS/myAddressLookup/components directory. The appCanvas tab name is red when the file has unsaved changes and black after changes are saved. The Component Hierarchy palette looks like this:

The next step is to modify properties for the layout component. Properties are characteristics that define a component. To modify component properties, you select the component in the Component Hierarchy palette and edit its properties in the Properties Editor palette (Palettes > Properties Editor Palette). 3. To work more easily in the Properties Editor palette, click the Docking Options button on the palette's toolbar and choose Floating. When you don't need the Properties Editor palette, click the Toggle Display button to minimize it. To maximize it again, click the Properties Editor icon on the General Interface Builder taskbar at the bottom of the user interface. 4. Select the Layout - Top/Over component in the Component Hierarchy palette and change the following property values in the Properties Editor palette. To edit a field, type a value in the Value column and press the Tab or Enter key to save the value. The
Copyright TIBCO Software Inc. All Rights Reserved.

4.
23

type a value in the Value column and press the Tab or Enter key to save the value. The Name property is an internal name for the layout object. Name: Set property value to lytAddressLookup Rows Array: Set property value to 50,* The Properties Editor palette looks like this:

Notice that when you change the Name property, the name in the Component Hierarchy palette also changes. The sample address lookup layout requires several subcomponents, which you add and customize in the following steps.

Customizing Pane Properties

In this section, you set the properties for each pane in a Layout component, including background color, size, and display name. Many of the properties have a list of dynamic properties you can access from the Properties Editor palette context menu . For more information, see the General Interface Developer Guide.

Copyright TIBCO Software Inc. All Rights Reserved.

24

Properties Editor

To customize pane properties, complete the following steps: 1. Expand the lytAddressLookup node in the Component Hierarchy palette. Select the first pane component and modify its properties in the Properties Editor palette as follows: Name: Set property value to paneInput BG Color: Set property value to @Solid Medium Padding: Set property value to @8Pixel Border: Set property value to @No jsxborder 2. Select the second pane component and modify its properties in the Properties Editor palette as follows: Name: Set property value to paneOutput BG Color: Set property value to @Solid Light Border: Set property value to @Outset 3. To insert a property value that starts with the @ symbol, right-click the Value column next to the property name and choose it from the context menu. Note that after a dynamic property is selected, the explicit value displays in the Value field next to the name of the dynamic property. The component hierarchy and the work area should look similar to the following:

Copyright TIBCO Software Inc. All Rights Reserved.

25

4. Save the appCanvas.xml component. For more information on components, see the General Interface Component Guide.

Adding Form Elements to the Application

In this section, you'll add text boxes and labels to describe the text boxes. Text boxes are required for entering a zip code and for displaying returned city and state information. The sample application also requires a button for calling the web service. You'll add the button later in the tutorial. To add form elements to the application, complete these steps: 1. Open the Block folder in the Component Libraries palette and drag a Label component to the top pane component, paneInput, in the work area. 2. Open the Form Elements folder in the Component Libraries palette and drag a Text Box component to the paneInput component in the Component Hierarchy palette. The component hierarchy should look like the following:

Copyright TIBCO Software Inc. All Rights Reserved.

26

3. Select the label component of paneInput in the Component Hierarchy palette and enter the following values in the Properties Editor palette. For padding and margin, be sure to enter a space between each number. Name: Set the property value to lblZipcode Width: Set the property value to 100 Height: Set the property value to 18 Text/HTML: Set the property value to Type Zip Code Padding: Set the property value to 4 0 0 0 Margin: Set the property value to 0 4 0 0 4. Select the textbox child component of paneInput and enter the specified values in the Properties Editor palette. For padding and margin, be sure to enter a space between each number. Name: Set the property value to txtZipcode Height: Set the property value to 18 Margin: Set the property value to 0 4 0 0 To learn more about properties in the Properties Editor palette, hover the mouse over the property name or see General Interface GUI Property Reference. For properties that require CSS values, such as margin and padding, you can use General Interface syntax or W3C valid CSS syntax. See the General Interface Component Guide. 5. Drag and drop another Layout - Top/Over component from the Containers folder in the Component Libraries palette onto the lower paneOutput component. You need a layout here, because you'll be adding two rows of components for the return information, city and state. 6. Change the new layout(--) component properties in the Properties Editor palette to the following: Name: Set the property value to lytOutput Rows Array: Set the property value to 50,*** In the next section, you'll make two clones of the paneInput pane to create two panes for the lytOutput component. These panes are for the city and state information that the web service returns.
Copyright TIBCO Software Inc. All Rights Reserved.

27

Cloning Components for an Application

Cloning components saves time in creating your application and in setting component properties. A clone is a copy of a selected component. In this application, all three panes for zip code, city, and state will have a text label and a text box, all with similar properties. In this section, you'll remove the existing lytOutput child ** panes. Then you'll make clones of paneInput and move them to the lytOutput component. The two bottom panes will contain the city and state information returned by the Address Lookup Service. To create clones of the paneInput component, complete these steps: 1. Expand the lytOutput component in the Component Hierarchy palette, select both children, and click the Recycle button on the toolbar to delete the two child panes. Instead, you'll use clones of the paneInput component. Use Ctrl+click to select multiple components. Use Shift+click to choose a range of components. If you delete components by mistake, you can recover them from the Recycle Bin. Choose Palettes > Recycle Bin. 2. Select paneInput in the Component Hierarchy palette and click the Clone button on the toolbar two times to create two clones. Two clones of the paneInput ** component display at the bottom of the Component Hierarchy palette. 3. Select the two paneInput clones and drag and drop them on the lytOutput component in the Component Hierarchy palette. The component hierarchy and work area should look like the following:

4. Change the following properties for the panelinput (first child of lytOutput) in the
Copyright TIBCO Software Inc. All Rights Reserved.

28

4. Change the following properties for the panelinput (first child of lytOutput) in the Properties Editor palette: Name: Set property value to paneCity BG Color: Set property value to @Solid Light 5. Change the following properties for lblZipcode in the Properties Editor palette: Name: Set property value to lblCity Text/HTML: Set property value to City 6. Change the following properties for txtZipcode in the Properties Editor palette: Name: Set property value to txtCity Enabled: Set property value to Disabled 7. Change the following properties for the panelinput (second child of lytOutput) in the Properties Editor palette: Name: Set property value to paneState BG Color: Set property value to @Solid Light 8. Change the following properties for lblZipcode in the Properties Editor palette: Name: Set property value to lblState Text/HTML: Set property value to State 9. Change the following properties for txtZipcode in the Properties Editor palette: Name: Set property value to txtState Enabled: Set property value to Disabled The txtCity and txtState text boxes are set to Disabled, because user input isn't allowed for these text boxes. The Address Lookup Service will return city and state values in these text boxes. The application should look similar to the following:

10. Save your application. Next, you'll add a button and a button event to the application.

Copyright TIBCO Software Inc. All Rights Reserved.

29

Adding a Button and Button Event

Now, you'll add a button and a button event. After entering the zip code in the application, the user will click the button to send the input data to the web service. The button event won't work until you generate the code that calls the web service. 1. Drag a Button component from the Form Elements folder in the Component Libraries palette to the paneInput component and modify its properties as follows: Name: Set property value to btnLookup Text/HTML: Set property value to Find City and State BG Color: Set property value to #ADADC6 You can also use the Color Picker to choose color values. Choose Tools > Color Picker You can also click in the Value field in the Properties Editor palette and click the Color Picker button to open the Color Picker. 2. Choose Palettes > Events Editor Palette to open the Events Editor palette if it's not open. 3. Click the Docking Options button on the Events Editor palette toolbar and choose Floating to make working in the Events Editor palette easier. 4. Delete this JavaScript statement in the Value field of the Execute event alert('hello'); 5. Type in the following JavaScript statement in the Value field of the Execute event
eg.service.callReturnCityState();

This button event won't work until you define this function in another tutorial. This function calls the web service that returns city and state information. When a user inputs a zip code and clicks the button, the zip code is sent to the web service. 6. Save the project and choose Project > Run Project to run your application and see what it looks like. The application should look similar to this:

7. Close the running application. The objects created in the previous steps are live application objects. When you save the parent component to disk, the parent and all child components are saved with the current object states. Now that the user interface is complete, the next step is to create mappings between application objects and data elements. Once you've created the mappings, you'll generate the code that calls the web service.
Copyright TIBCO Software Inc. All Rights Reserved.

30

the web service. To continue working with this application, see the General Interface Developer Guide. In the next tutorial, you connect the components to a web service and test the application.

Copyright TIBCO Software Inc. All Rights Reserved.