gi 3.9 gettingstarted

TIBCO General Interface - Enterprise Edition Getting Started

Software Release 3.9.1April 2012

Important InformationSOME 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 OFLICENSAGREELICENSSOFTWTHERE AGREEDOCUMCONST

This doctreaties.Softwar

TIB, TIBInterfacPerformtradema

EJB, JavMicrosy

All otherespecti

THIS SOOPERATIME. SSPECIFI

THIS DOIMPLIEFITNES

THIS DOCHANGINCORPIMPROVTHIS DO

THE COINDIREBUT NO

U.S. Pat

Copyrig

TIBCO S TIBCO SOFTWARE AND THIS DOCUMENT IS SUBJECT TO THE TERMS AND CONDITIONS OF A E AGREEMENT FOUND IN EITHER A SEPARATELY EXECUTED SOFTWARE LICENSE MENT, OR, IF THERE IS NO SUCH SEPARATE AGREEMENT, THE CLICKWRAP END USER E AGREEMENT WHICH IS DISPLAYED DURING DOWNLOAD OR INSTALLATION OF THE ARE (AND WHICH IS DUPLICATED IN TIBCO GENERAL INTERFACE INSTALLATION) OR IF IS NO SUCH SOFTWARE LICENSE AGREEMENT OR CLICKWRAP END USER LICENSE MENT, THE LICENSE(S) LOCATED IN THE "LICENSE" FILE(S) OF THE SOFTWARE. USE OF THIS

ENT IS SUBJECT TO THOSE TERMS AND CONDITIONS, AND YOUR USE HEREOF SHALL ITUTE ACCEPTANCE OF AND AN AGREEMENT TO BE BOUND BY THE SAME.

ument contains confidential information that is subject to U.S. and international copyright laws and No part of this document may be reproduced in any form without the written authorization of TIBCO e Inc.

CO, TIBCO Adapter, Predictive Business, Information Bus, The Power of Now, TIBCO General e, TIBCO General Interface Framework, TIBCO General Interface Builder, TIBCO General Interface ance Profiler, and TIBCO General Interface Test Automation Kit are either registered trademarks or rks of TIBCO Software Inc. in the United States and/or other countries.

a EE, J2EE, and all Java-based trademarks and logos are trademarks or registered trademarks of Sun stems, Inc. in the U.S. and other countries.

r product and company names and marks mentioned in this document are the property of their ve owners and are mentioned for identification purposes only.

FTWARE MAY BE AVAILABLE ON MULTIPLE OPERATING SYSTEMS. HOWEVER, NOT ALL TING SYSTEM PLATFORMS FOR A SPECIFIC SOFTWARE VERSION ARE RELEASED AT THE SAME EE THE README.TXT FILE FOR THE AVAILABILITY OF THIS SOFTWARE VERSION ON A C OPERATING SYSTEM PLATFORM.

CUMENT IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR D, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY, S FOR A PARTICULAR PURPOSE, OR NON-INFRINGEMENT.

CUMENT COULD INCLUDE TECHNICAL INACCURACIES OR TYPOGRAPHICAL ERRORS. ES ARE PERIODICALLY ADDED TO THE INFORMATION HEREIN; THESE CHANGES WILL BE ORATED IN NEW EDITIONS OF THIS DOCUMENT. TIBCO SOFTWARE INC. MAY MAKE EMENTS AND/OR CHANGES IN THE PRODUCT(S) AND/OR THE PROGRAM(S) DESCRIBED IN CUMENT AT ANY TIME.

NTENTS OF THIS DOCUMENT MAY BE MODIFIED AND/OR QUALIFIED, DIRECTLY OR CTLY, BY OTHER DOCUMENTATION WHICH ACCOMPANIES THIS SOFTWARE, INCLUDING T LIMITED TO ANY RELEASE NOTES AND "READ ME" FILES.

ent No. 8,136,109

ht 2001-2012 TIBCO Software Inc. ALL RIGHTS RESERVED.

oftware Inc. Confidential Information

1Copyright TIBCO Software Inc. All Rights Reserved.

General Interface Getting StartedGeneral Interface Getting Started

Software Release 3.9

March 2010

Chapter 1 Getting Started IntroductionChapter 2 Starting General Interface BuilderChapter 3 User Interface BasicsChapter 4 Tutorial on Creating an Application


Chapter 1 Getting Started IntroductionThis chapter provides an introduction to General Interface and a broad orientation to theenvironment.

Rich Internet ApplicationsProcessing ModelArchitectureFeatures

Rich Internet ApplicationsA survey by Forrester Research revealed that 70% of Fortune 2000 CIOs want to standardize ondeploying applications to a web browser. However, of those surveyed, more than half statedthat the limits of HTML prevented them from reaching this objective.

Significant investment has been made in browser development since the first browsers werereleased. 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 remainsfundamentally aligned with the document-centric paradigms that first defined the concept of aweb page. HTML, evolving from its SGML roots, has always been a document-oriented markuplanguage.

With the advent of XML, DHTML, XHTML, and CSS (Cascading Style Sheets), the browserbecame increasingly powerful and flexible in its core capabilities. Additionally, the cost of webapplications was much lower than that of thick client development, deployment, andmaintenance. Yet, as enterprises migrated applications to the web, they discovered that webapplications provided far less interactivity and performance than the thick-client solutions theywere meant to replace. As a result, many businesses traded off performance for cost, oralternatively, when the document paradigm of HTML was insufficient, paid the higher costs ofdeveloping, deploying, and maintaining thick clients. Either way, businesses have had tochoose between web applications and thick clients.

General Interface and AjaxThe General Interface application framework solves this problem by enabling enterprises todeliver rich internet applications (RIAs) that look, feel, and perform like desktop installedsoftware but run in a standard web browser. With General Interface, enterprises can have thebest of both options: rich, highly productive, service-differentiating GUI functionality with thelow-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 apowerful, object-based enterprise-grade application environment into which your GeneralInterface applications can be deployed. By working with an object-based environment, asopposed to declarative markup languages, development time is shortened, and the business caneasily distribute, manage, and deploy high performance solutions.

The application programming interfaces (APIs) provided by the browser remain a weak pointin the development of end user applications more complex than online retail shopping. The


in the development of end user applications more complex than online retail shopping. Theexisting browser APIs are not designed to create robust enterprise-grade applications.Therefore, development is time-consuming and expensive, maintainability is difficult, andmany businesses completely avoid implementing enterprise web applications. Browsers lackthe foundation classes familiar to Microsoft Windows programmers and the object-orientedpresentation packages familiar to Java programmers. Instead, HTML browsers provide ageneric API intended for displaying series of hyperlinked web pages that lack the featuresprovided by many thick clients.

General Interface solves existing browser limitations by distributing many of the processestypically 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 withfunctionality more suitable to object-oriented application development. Rather than forcing youto model complex workflows with a series of flat HTML pages, the General Interface APIsenable you to create stateful, interactive, object-based, client applications that look, feel, andperform as if launched from the local operating system.

Processing ModelBy distributing many of the processes usually handled by centralized application servers to thebrowser on the client machine, enterprises can deliver full-featured software solutions thatsimply 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 aredistributed to the web browser. This design removes the view generation work from serversand reduces demands on bandwidth, making applications far more scalable. The design alsoleverages the power of the client CPU to deliver highly responsive, stateful, full-featuredapplications in a browser.

Disadvantages of Server-Based MVC ArchitectureIn a traditional server-based MVC architecture, all processes run on the server. Requests aresent to the controller, models are updated, and the view returns a stream of HTML and data tothe browser where it is rendered for the user. This results in system latency and reducedfunctional possibilities for the end user. The resulting HTML typically comprises 80%presentation instructions and 20% data. The browser is simply an HTML page renderingdevice.


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

General Interface software enables the view portion of the MVC architecture to be distributedto and run on a web browser running on the client system. This approach has the followingbenefits:

Improves application scalability by removing significant server processesDecreases latency by using substantially all the bandwidth to deliver data (instead of aminority of bandwidth for data in the traditional model where HTML markup takes upmost of a transmission)Delivers full-featured application performance and rich GUI features to an unmodifiedweb browser, without plug-ins, runtime environments, and extra software to install

ArchitectureThe General Interface MVC implementation means that the General Interface components arebroken down into three architectural elements, each of which plays a crucial role in how thecomponent behaves.

ModelThe Model maintains the state data for each object instance. For example, the model portion ofthe Matrix ( ) object tracks state properties such as the number of columns, thejsx3.gui.Matrixwidths of each column, the outer dimensions for the table, how to sort which column, and soon.

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


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

How MVC Elements Work TogetherThe best way to describe how these three elements work together is to describe a typical GUIobject, 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 theyuse 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 MVCarchitecture. The model element allows the given Tab object to keep an index of properties thatuniquely define its state in memory (see the following table). The model is unaffected by howthe tab visually displays its state. Instead, it maintains a single Boolean property, , that isactiveset to true or false.

From an architectural perspective, separating the model from the view means that more of thecode base can be leveraged on future projects. Regardless of whether the view for a Tab objecthas beveled edges or graphical icons, the model remains the same. This means that only theview code for a given class needs to be updated from project to project.

Tab 1 Tab 2 Tab 3

Text Account Info Search Results Account History

Index 0 1 2

Active true false false

activeColor cccccc cccccc cccccc

inactiveColor 8c8c8c 8c8c8c 8c8c8c

The controller element updates the model based on events passed from the correspondingview. For example, a user clicks the displayed view for a Tab object in an attempt to bring thecontents of that tab forward in the view. The view, in this case the actual HTML that isdisplayed, then processes the click event by calling the controller requesting that the selectedtab be made active, and therefore brought forward in the view. Next, the controller queries themodel to validate that the Tab object that was clicked is not already active. If the given Tabobject is already active, the controller exits early without applying any changes to the object.However, if the Tab object is inactive, the controller updates the model by setting the activeproperty to true. And then, the view is repainted in the browser to visually depict the newmodel value.

In general, the model passes data to the corresponding view for rendering. The view thenpasses events to the controller for processing. This updates the model to reflect the property


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

Architecture DetailsApplications that leverage General Interface run in a standard browser. No other software isrequired to run the application on a client machine. This means that the client application iscompletely native, allowing for stable, fast, and true thin client, zero-install applications. Noapplets, plug-ins, or ActiveX controls are required to deliver robust application functionality.

To deliver high functionality in a standard browser environment, General Interface leveragesmany of the same principles that make server-side architectures successful. General Interfacesoftware is founded upon solid, object-oriented principles. This means that robustly scalablefunctionality requires only a minimal footprint of client memory and network bandwidth. Theclass libraries that underlie the software are lean, comprising over 400 logical functions inapproximately 300KB of data. Due to the object-oriented architecture and object inheritanceframework, over 2,200 function calls are actually available at runtime across more than 40foundation objects. Furthermore, because the class libraries follow a consistent object-orientedstructure, they can be modified as necessary by runtime updates, additions, and evensub-classing. In addition, new objects can also be built by combining foundation objects, allwithout increasing the overall framework size.

To manage such a broad array of functionality, General Interface employs a multi-tieredapproach to object design. Essentially, any available function can be categorized into fourdistinct layers, as illustrated in the following figure. These include:

Client logic layer This layer consists of all programmatic logic, such as business rules andclient-specific functionality.Presentation layer This layer is founded upon solid object oriented design principles thatleverage many of the key concepts used by Java Swing, without the overhead of the JavaRuntime Environment (JRE). A familiar Java-like syntax is used, generating complexHTML and JavaScript that runs natively in the browser, rather than Java class files thatrequire 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 theserver.Communication layer This layer manages threaded communications with remote webservers using web service protocols such as SOAP and XML-RPC, as well as traditionalweb protocols like HTTP GET/POST.


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

Presentation LayerGeneral Interface employs a presentation approach similar to Java Swing but without theoverhead of the Java Runtime Environment. Developers familiar with container-based GUIswill find similar constructs in the General Interface environment. Application components,screens, and widgets are constructed from General Interface GUI objects and saved as objectsets that can be imported or exported at runtime to deliver incremental applicationfunctionality on demand. Accordingly, businesses can leverage the General Interfacecomponents out of the box or create libraries of their own reusable application components.

General Interface provides customizable GUI components. Prototypes are available in theSystem 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, TextBox provides the base class for instances of a text box, a text area, and a password field.Similarly the class is used as the base for Label and Image.Block

General Interface GUI objects generate custom DHTML and JavaScript on the client. Thisdesign differs from traditional ASP or JSP architectures, where the presentation is generated onthe server, and the resulting stream of HTML is returned to the browser for rendering. WithGeneral Interface, presentation generation doesn't occur on the server. Therefore, transfer ofpresentation instructions over the network isn't necessary. The result is highly responsive GUIapplications that free up bandwidth for data (not HTML) and reduce the number of servers andserver software licenses necessary to deliver a given application.


Data LayerThe client-side XML data cache provides you with a consistent API for data access andmanagement. Benefits include:

Efficient data reuse Multiple client objects within the presentation layer can use the sameXML 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, allowingfor DOM-based access to the original data.Cache management methods A robust API allows you to write application-specificbusiness rules that keep the client-side data synchronized with the server.Client-side HTML generation With HTML generation on the client, servercommunications are unnecessary for presentation changes such as sorting and styling.

Container ArchitectureGeneral Interface uses a container-based model for visual components, similar to that of JavaSwing and other object-based GUIs. Rather than treating a web application as a series ofhyperlinked pages, this architecture provides true object modeling when building anapplication.

Container-based architectures have significant advantages, including:

Intelligent data refresh Specific containers can be targeted for updates while othersremain untouched. Compared with refreshing an entire HTML page, less networkbandwidth and CPU time is required.Incremental functionality An application can import additional object sets only whenrequired. The application initializes and responds faster because only a minimum objectset is loaded. User actions can drive the loading of additional functionality. GeneralInterface Builder is an example of a robust application that loads functionality ondemand.Modular design paradigm The ability to work in a familiar, modular environment that ismore efficient than HTML. High-level objects, such as Matrix and Dialog, take the placeof and elements.div span

Communication LayerGeneral Interface supports multiple protocols for communicating with services in the network.The basic supported interactions, which all function over HTTP/S, include the following.

Communication Type Outbound Request Format Expected Response Format

XML GET URL with Name-value pairs XML

SOAP XML/SOAP XML/SOAP

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

HTML FORM POST/GET HTML Form XML/HTML

A key principle that drives the General Interface communication efficiency is to limit refresh tosubsets of the screen, not the entire browser window. To facilitate this, General Interfaceimproves 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


approaches like HTML frames. Consider a standard web mail client, for example. To improvethe user experience, the left frame persistently displays various folders and tools, while theright frame displays dynamic data. Although this design is adequate, there is no question that aweb 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 oftenleverage a client-side Java applet that requires loading the Java Runtime Environment intoclient memory or running a specific server platform. However, this design can quicklyundermine application stability and available client-side memory.

FeaturesIn addition to providing a powerful and efficient architecture, General Interface makes it easyto develop and deploy applications. Industry-standard technology is used, so knowledge ofexisting technologies can be leveraged.

Ease of DeploymentThe General Interface application framework and all General Interface applications arecomposed of JavaScript, XML, and CSS files. To deploy the environment and applications, yousimply include a reference to these files in an HTML page that can be accessed by an end userfrom any HTTP or HTTPS server. The end user types the URL into a browser and starts usingthe General Interface application. To restrict and secure access to your application, use yourexisting mechanism for securing web page access.

Support for Industry Standards and Best PracticesGeneral Interface uses industry standard and widely accepted technologies in both itsunderlying code (JavaScript, XML, and CSS) and overall architecture (Model-View-Controllerand multi-tier design). Best-practice, server-side tasks are migrated to the browser to deliver thesame successful results, maintainable code, and scalable performance. General Interface takesbest-practice approaches from the server and implements them in the browser.

Scalable ArchitectureThe 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 allultimately short-term solutions. Rather than attempting to scale the server to meet the needs ofthe nth end user, consider a paradigm where each end user provides the resources for theirown processing needs.

Unlike traditional server architectures, General Interface runs on the client, using the clientCPU for data presentation and interaction. Even the General Interface foundation classes thatfacilitate this process are cached on the client. This means after a General Interface applicationis accessed, only raw data is requested from the server. Since no HTML needs to be transferredto the client, bandwidth is freed up to deliver more data to the end user more quickly. Inaddition, because presentation processes are now distributed to the client, servers no longerneed to generate HTML for each connected user. With HTML generation processes no longerrunning on the server, the ratio of servers to end users is greatly improved.

10

Copyright TIBCO Software Inc. All Rights Reserved.

Development ToolsYou can develop General Interface client applications and components using General InterfaceBuilder, a script authoring environment, or your favorite IDE. Once the General Interfaceruntime environment is loaded into an HTML page in the browser, you can directly interactwith the General Interface GUI, data, and communication objects using JavaScript APIs.

General Interface Builder, a rapid deployment environment, is a visual authoring environmentoptimized for creating General Interface applications and can run either as a standalone tool orwithin 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 GUIcomponents, connect to services, examine cached data, and implement the behaviors of theclient application using JavaScript business logic and events.

When running General Interface Builder in conjunction with your favorite IDE, you have acomplete end-to-end live development and testing environment with object, code, message, anderror inspection.

11


1.

2.

a.

b.

3. a. b.

4.

Chapter 2 Starting General Interface BuilderThis chapter explains how to start General Interface Builder and how to choose a workspace.

Launching General Interface BuilderGeneral Interface Builder Launch ModesChoosing a WorkspaceRunning Multiple Instances of General Interface Builder

Launching General Interface BuilderGeneral 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:

Browse to the General Interface installation directory, , andtibco-gi-version_-prodouble-click a GI_Builder.* file. See .General Interface Builder Launch ModesClick in the browser prompt, if any, to allow reading and writing files to and fromYesthe file system.

The ActiveX prompt appears on Internet Explorer. On Firefox, you will see twosecurity prompts. Check the box before clicking .Remember this setting AllowIf General Interface Builder fails to launch and an alert notifies you that a requiredresource is unavailable, see .General Interface Builder Doesn't Launch

If this is the first time you are starting General Interface Builder:Read the license agreement and click .AgreeChoose a project workspace. See .Choosing a Workspace

Choosing an existing workspace doesn't replace previous sampleapplications with updated sample applications, to preventworkspace files from being overwritten. Create a new workspacefor the updated sample applications.

If the Welcome screen opens, click the or Create a New Project Open an Existing Projectlink to begin working on a project. The Welcome screen provides links to more GeneralInterface resources. If the Welcome screen doesn't open, choose , Project > New Project

, or to begin working on a project.Project Recent Projects Project > User Projects

If you are new to General Interface Builder, see .Tutorial on Creating an Application

General Interface Builder Doesn't LaunchIf General Interface Builder displays an alert that says a resource is unavailable, there areseveral 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 unblockthe ZIP file:

Right-click the ZIP file and click .Properties

12


Right-click the ZIP file and click .PropertiesOn the General tab, click . If you don't see this button, your file is notUnblockblocked and there's no need to unblock it.

If the file is blocked, an Internet icon displays in the status bar. Ifthe 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 MicrosoftActiveX control for file system access. ActiveX is required for deployednotGeneral Interface applications.Also be sure that your browser security settings allow for loading of ActiveX. ForInternet Explorer, enable the setting "Allow active content to run in files on MyComputer" (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, youmust run General Interface Builder from your local file system and have accessrights to any files you are working with.

General Interface Builder Launch ModesYou can start General Interface Builder in different modes.

Launch Mode Description

HTML mode Opens General Interface Builder in the selected web browser. File name: /GI_Builder.htmlGI_HOME

XHTML mode Opens General Interface Builder in XHTML mode. This can be useful fordeveloping and testing applications that run in XHTML pages, such asportlet applications. File name: Note:/GI_Builder.xhtmlGI_HOMEXHTML mode is not supported by Internet Explorer 7.

Console mode(Internet Exploreronly)

Opens General Interface Builder as an HTML application (HTA). HTAsare not subject to the same security constraints as web pages, and whenrun 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_Builder.htaGI_HOME

launch_in_ide.html Launches a project in General Interface Builder in HTML mode. This fileis created automatically in your project directory when you create aproject. Note: Use this file to launch General Interface only duringdevelopment, 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 GeneralInterface Developer Guide.

13


1.

2.

Choosing a WorkspaceThe first time General Interface Builder launches after installation, the application window isblank 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:

Do one of the following: Click the button in the Create or Locate Workspace dialog to navigate toBrowsean existing directory or to create a new directory.

The workspace must be on your local drive, so General InterfaceBuilder can read and write files to the local file system.

Click the button to accept the default workspace location. The defaultChooselocation is .,C:\Documents and Settings\username_\My Documents\TibcoGI

Choosing an existing workspace doesn't replace previous sampleapplications with updated sample applications. This built-infunctionality is designed to prevent workspace files from gettingoverwritten. Create a new workspace to get the updated sampleapplications.

Click the button in the Alert dialog to restart General Interface Builder.Reload BrowserThe 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.

14


Running Multiple Instances of General Interface BuilderGeneral Interface Builder is designed to run as multiple instances simultaneously. You can openmultiple instances of General Interface Builder from the same installation folder. Each instanceof General Interface can run a different application or the same application.

Because each instance is sharing the same preferences and settings files, competingchanges to General Interface Builder preferences cannot be persisted.

You can also have multiple instances of General Interface Builder running projects in the sameworkspace or from multiple workspaces.

Multiple releases can also be open at the same time. For example, you can open a project inGeneral 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, suchas Internet Explorer and Firefox.

When a project canvas file is saved in a newer version of General Interface Builder, it cannot beopen in an older version.

15


Chapter 3 User Interface BasicsThis chapter provides an overview of General Interface Builder features.

About the General Interface Builder InterfaceAbout General Interface Builder ProjectsAbout the General Interface Builder Work AreaAbout General Interface Builder PalettesTools and Settings

About the General Interface Builder InterfaceDevelopers familiar with visual, component-based environments such as Microsoft VisualBasicand Borland JBuilder will notice some parallel constructs in General Interface Builder. Featuresimilarities 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 isfully customizable. Any modifications you make to the layout are saved and loaded each timeyou start General Interface Builder.

For more information about the user interface, such as menus and toolbars, see General.Interface Component Guide

16


About General Interface Builder ProjectsAll 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 filesappear in the Project Files palette.

When you create a project, the default files and are automaticallylogic.js appCanvas.xmlcreated 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 yourapplication user interface.

When you save project files, General Interface Builder saves them to your project directory. Forexample, is by default at this location: workspace/ js logic.jslogic.js JSXAPPS/project_namee/ /

For more information about workspaces, see .Choosing a Workspace

To access project files, click the JSXAPPS/project_name link in the General Interface Buildertaskbar, located in the lower left area of the IDE.

In releases prior to 3.7, project files appear in the folders that correspond to theirtype, regardless of where they are located on the file system. Beginning with Release3.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 AreaThe center of General Interface Builder is the work area. In the work area, you can create andmodify application components using palettes and tools, and edit files of types such as XMLand JavaScript.

Work Area Tabs and EditorsThe 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: GUIcomponents, XML, XSL, JavaScript, CSS (Cascading Style Sheets), dynamic properties, andmapping 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 ViewsThe views available in the work area are:

Live Component or Grid view

17


Live Component or Grid viewSource viewFormatted Source XML (Read Only) viewRendered HTML (Read Only) viewComponent Profile view


About General Interface Builder PalettesGeneral Interface Builder has palettes on all sides of the work area. You can arrange palates forconvenient access as you workyou can assign them fixed locations, or float them over thework area. You can also close palettes when you don't need them, then reopen them later fromthe Palettes menu.

To arrange a palette on the work area, click its button .Docking Options

General Interface Builder palettes include:

Component Libraries palette Drag and drop predefined GUI components into the workarea.Component Hierarchy palette View and manage the hierarchical model of objects inyour application.Properties Editor palette Set component properties.Events Editor palette Specify events for components.Attributes Editor palette Edit component attributes to extend the serialized HTMLrepresentation of components.XSL Parameters palette Parameterize a component's XSL transformation from CDF toHTML.Local Data Cache palette View, open, and edit cached XML and XSL files in memory andsave 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 theGeneral Interface Developer Guide.


18


Tools and SettingsGeneral Interface Builder has a variety of tools and settings dialogs to assist you as you developyour applications. For more information, see the General Interface Developer Guide.

Deployment Utility Generate the HTML or XHTML markup for launching deployedapplications.XML/XSL Merge Tool Merge a source document (XML or XSL) and an XSLT filterdocument 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 codeand 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 authoringenvironment.Project Settings Modify project settings.

19


Chapter 4 Tutorial on Creating an ApplicationThis chapter is a tutorial that describes how to create a simple application using GeneralInterface Builder.

This tutorial is based on the WSDL_Mapping_1 sample located in the workspace directory. To look at the sample, choose /JSXAPPS/samples Project > User Projects > Samples >

.WSDL_Mapping_1

Introduction to Creating an ApplicationCreating a New ProjectCreating a LayoutAdding Form Elements to the ApplicationCloning Components for an ApplicationAdding a Button and Button Event

Introduction to Creating an ApplicationThis chapter demonstrates how to build a sample application that looks up city and stateinformation. In General Interface Builder, you create all the components that make up theapplication.

Creating a Sample Application

After you complete this tutorial, you can continue to the next tutorial to connect thecomponents to a data service and test the application. See the General Interface DeveloperGuide.

If you're not familiar with the General Interface Builder user interface, see User Interface Basicsfor an introduction.

20


1.

2.

3.

4.

Creating a New ProjectIn this section, you create a new General Interface project. A new project folder is created in the

directory, and all application-specific files are created and saved in this/JSXAPPSworkspacefolder. The workspace is the directory that contains your projects, custom add-ins, customprototypes, and your user settings for General Interface Builder.

Start General Interface Builder and choose a workspace if you haven't yet. If this is thefirst time you're starting General Interface Builder, see .Starting General Interface BuilderChoose or click the link in the WelcomeProject > New Project Create a New Projectscreen (Help > Welcome Screen) to open the new project wizard.Choose General Interface Application as the project type, and click .Next

Choose the project template and click .Next

21


4.

5. Specify a project path and click .Finish

A new project is loaded in the browser window. Two default, empty files are open in thecentral work area.

While building this sample application, all project data is stored locally in browsermemory. The application is automatically saved to the file system. Save thenotproject 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 LayoutIn this section, you create an application user interface that includes layout components toarrange the subcomponents. For all components, position information can be defined in twoways:

Absolute positioning, with integer values for top, left, height, and widthRelative positioning, using either a percentage of available space or by arrangingcomponents 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, , is open in aappCanvas.xmltab in the work area. The Component Libraries palette displays folders containing prototypecomponents that can be added to the current component. The Component Hierarchy paletteshows the hierarchical view of components in the GUI component file. Note that block, thedefault root component, is created automatically when you create a project.

22


1.

2.

3.

4.

To avoid unexpected layout behavior in deployed applications, it's recommended touse Block as a container if it meets of these requirements:only one

The Block is owned by a layout manager, such as LayoutGrid, Tab, Stack, andSplitter.The Block is relatively positioned and has a width of 100%.The Block is absolutely positioned.

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:

Expand the folder in the Component Libraries palette and drag a Containers Layout component to the work area in the center of the General Interface Builder-Top/Over

user interface. This component provides two panes for laying out applicationcomponents.The Component Hierarchy palette shows that the new component, layout (--), is addedas a child of block.Right-click the appCanvas.xml tab at the top of the work area and select . The newSavelayout component is saved in an XML file in the workspace

directory. The appCanvas tab name is red when/JSXAPPS/myAddressLookup/componentsthe 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 arecharacteristics that define a component. To modify component properties, you select thecomponent in the Component Hierarchy palette and edit its properties in the PropertiesEditor palette (Palettes > Properties Editor Palette).To work more easily in the Properties Editor palette, click the button Docking Options

on the palette's toolbar and choose .Floating

When you don't need the Properties Editor palette, click the Toggle

button to minimize it. To maximize it again, click the Display icon on the General Interface Builder taskbar at theProperties Editor

bottom of the user interface.

Select the component in the Component Hierarchy palette andLayout - Top/Overchange the following property values in the Properties Editor palette. To edit a field,

type a value in the Value column and press the or key to save the value. TheTab Enter

23


4.

type a value in the Value column and press the or key to save the value. TheTab EnterName property is an internal name for the layout object.

Name: Set property value to lytAddressLookupRows 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 ComponentHierarchy palette also changes.

The sample address lookup layout requires several subcomponents, which you add andcustomize in the following steps.

Customizing Pane PropertiesIn this section, you set the properties for each pane in a Layout component, includingbackground color, size, and display name.

Many of the properties have a list of dynamic properties you can access from the PropertiesEditor palette context menu . For more information, see the General Interface Developer Guide.

24


1.

2.

3.

Properties Editor

To customize pane properties, complete the following steps:

Expand the node in the Component Hierarchy palette. Select the firstlytAddressLookup component and modify its properties in the Properties Editor palette as follows: pane

Name: Set property value to paneInputBG Color: Set property value to @Solid MediumPadding: Set property value to @8PixelBorder: Set property value to @No jsxborder

Select the second component and modify its properties in the Properties Editorpanepalette as follows:

Name: Set property value to paneOutputBG Color: Set property value to @Solid LightBorder: Set property value to @Outset

To insert a property value that starts with the @ symbol, right-click the columnValuenext to the property name and choose it from the context menu. Note that after adynamic property is selected, the explicit value displays in the Value field next to thename of the dynamic property.The component hierarchy and the work area should look similar to the following:

25


3.

4.

1.

2.

Save the component.appCanvas.xml

For more information on components, see the General Interface Component Guide.

Adding Form Elements to the ApplicationIn this section, you'll add text boxes and labels to describe the text boxes. Text boxes arerequired for entering a zip code and for displaying returned city and state information. Thesample application also requires a button for calling the web service. You'll add the button laterin the tutorial.

To add form elements to the application, complete these steps:

Open the folder in the Component Libraries palette and drag a componentBlock Labelto the top pane component, , in the work area.paneInputOpen the folder in the Component Libraries palette and drag a Form Elements Text Boxcomponent to the component in the Component Hierarchy palette.paneInputThe component hierarchy should look like the following:

26


2.

3.

4.

5.

6.

Select the component of in the Component Hierarchy palette and enterlabel paneInputthe following values in the Properties Editor palette. For padding and margin, be sure toenter a space between each number.

Name: Set the property value to lblZipcodeWidth: Set the property value to 100Height: Set the property value to 18Text/HTML: Set the property value to Type Zip CodePadding: Set the property value to 4 0 0 0Margin: Set the property value to 0 4 0 0

Select the child component of and enter the specified values in thetextbox paneInputProperties Editor palette. For padding and margin, be sure to enter a space between eachnumber.

Name: Set the property value to txtZipcodeHeight: Set the property value to 18Margin: 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 InterfaceGUI Property Reference.

For properties that require CSS values, such as margin and padding, you can useGeneral Interface syntax or W3C valid CSS syntax. See the General InterfaceComponent Guide.

Drag and drop another component from the folder in theLayout - Top/Over ContainersComponent Libraries palette onto the lower component. You need a layoutpaneOutputhere, because you'll be adding two rows of components for the return information, cityand state.Change the new component properties in the Properties Editor palette to thelayout(--)following:

Name: Set the property value to lytOutputRows 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 thelytOutput component. These panes are for the city and state information that the web servicereturns.

27


1.

2.

3.

4.

Cloning Components for an ApplicationCloning components saves time in creating your application and in setting componentproperties. A clone is a copy of a selected component. In this application, all three panes for zipcode, 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 ofpaneInput and move them to the lytOutput component. The two bottom panes will contain thecity and state information returned by the Address Lookup Service.

To create clones of the paneInput component, complete these steps:

Expand the component in the Component Hierarchy palette, select bothlytOutputchildren, and click the button on the toolbar to delete the two child panes.RecycleInstead, you'll use clones of the paneInput component.Use to select multiple components. Use to choose a range ofCtrl+click Shift+clickcomponents. If you delete components by mistake, you can recover them from theRecycle Bin. Choose .Palettes > Recycle Bin

Select in the Component Hierarchy palette and click the button onpaneInput Clonethe toolbar two times to create two clones. Two clones of the paneInput ** componentdisplay at the bottom of the Component Hierarchy palette.Select the two clones and drag and drop them on the componentpaneInput lytOutputin the Component Hierarchy palette.The component hierarchy and work area should look like the following:

Change the following properties for the (first child of ) in thepanelinput lytOutput

28


3.

4.

5.

6.

7.

8.

9.

10.

Change the following properties for the (first child of ) in thepanelinput lytOutputProperties Editor palette:

Name: Set property value to paneCityBG Color: Set property value to @Solid Light

Change the following properties for in the Properties Editor palette: lblZipcodeName: Set property value to lblCityText/HTML: Set property value to City

Change the following properties for txtZipcode in the Properties Editor palette: Name: Set property value to txtCityEnabled: Set property value to Disabled

Change the following properties for the panelinput (second child of ) in thelytOutputProperties Editor palette:

Name: Set property value to paneStateBG Color: Set property value to @Solid Light

Change the following properties for lblZipcode in the Properties Editor palette: Name: Set property value to lblStateText/HTML: Set property value to State

Change the following properties for txtZipcode in the Properties Editor palette: Name: Set property value to txtStateEnabled: Set property value to DisabledThe and text boxes are set to , because user input isn'ttxtCity txtState Disabledallowed for these text boxes. The Address Lookup Service will return city andstate values in these text boxes.The application should look similar to the following:

Save your application.

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

29


1.

2.

3.

4. 5.

6.

7.

Adding a Button and Button EventNow, you'll add a button and a button event. After entering the zip code in the application, theuser will click the button to send the input data to the web service. The button event won'twork until you generate the code that calls the web service.

Drag a component from the folder in the Component LibrariesButton Form Elementspalette to the component and modify its properties as follows: paneInput

Name: Set property value to btnLookupText/HTML: Set property value to Find City and StateBG Color: Set property value to #ADADC6You can also use the Color Picker to choose color values. Choose Tools > Color

You can also click in the Value field in the Properties Editor palette andPickerclick the Color Picker button to open the Color Picker.

Choose to open the Events Editor palette if it's not open.Palettes > Events Editor Palette

Click the button on the Events Editor palette toolbar and choose Docking Options to make working in the Events Editor palette easier.Floating

Delete this JavaScript statement in the Value field of the Execute event alert('hello');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. Thisfunction calls the web service that returns city and state information. When a user inputsa zip code and clicks the button, the zip code is sent to the web service.Save the project and choose to run your application and see what itProject > Run Projectlooks like. The application should look similar to this:

Close the running application.

The objects created in the previous steps are live application objects. When you save the parentcomponent 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 applicationobjects and data elements. Once you've created the mappings, you'll generate the code that calls

the web service.

30


the web service.

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

title_getting_startedGI-3.9-GettingStartedGeneral Interface Getting StartedChapter 1 Getting Started IntroductionRich Internet ApplicationsProcessing ModelArchitectureFeatures

Chapter 2 Starting General Interface BuilderLaunching General Interface BuilderGeneral Interface Builder Launch ModesChoosing a WorkspaceRunning Multiple Instances of General Interface Builder

Chapter 3 User Interface BasicsAbout the General Interface Builder InterfaceAbout General Interface Builder ProjectsAbout the General Interface Builder Work AreaAbout General Interface Builder PalettesTools and Settings

Chapter 4 Tutorial on Creating an ApplicationIntroduction to Creating an ApplicationCreating a New ProjectCreating a LayoutAdding Form Elements to the ApplicationCloning Components for an ApplicationAdding a Button and Button Event