General Interface is an open source project hosted by the Dojo Foundation

Managing 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 are displayed in the Project Files palette and stored in the workspace.

Choosing a Workspace

The workspace is the directory that contains your projects, custom add-ins, custom prototypes, and your user settings for General Interface Builder.

The first time General Interface Builder launches after installation, a dialog prompts you to create or select a workspace directory. You can create a new directory, select an existing directory, or choose the default workspace directory. The default workspace location is C:\Documents and Settings\username\My Documents\TibcoGI. You can use multiple workspaces for your projects, as well as change workspaces.

For more information, see General Interface Getting Started.

Changing a Workspace

You can keep all of your projects in one workspace or use multiple workspaces. You can modify the workspace location in the IDE Settings dialog. See Workspace.

Creating Projects

When you create a project, default files are created and opened in the work area: logic.js and appCanvas.xml. The JavaScript file, logic.js, is an empty file that you can add JavaScript code to. The default GUI component file, appCanvas.xml, is where you can begin designing your application user interface.

To create a project, complete these steps:

  1. 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.
  2. Choose General Interface Application as the project type, and click Next.
    Click here to expand screenshot...


  3. Choose the project template and click Next.
    Click here to expand screenshot...


  4. Specify a project path and click Finish.
    Click here to expand screenshot...


    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.

Project Files and Folders

When you create a project, a project folder is created in the workspace/JSXAPPS folder.

The top-level project folder has the same name as your project. All project folders include the default subdirectories and files listed in the following table. This default structure can be modified and additional folders can be created as needed. For example, you might create folders for image, WSDL, and CSS files.

Project Files Description
config.xml Contains application configuration data, such as project settings and file locations. See Modifying Project Settings.
launch.html Launches the application in the web browser. Use this file only during development, not at runtime.
launch_in_ide.html Launches the application in General Interface Builder. Use this file only during development, not at runtime.
To access project files and folders, click the JSXAPPS/project_name link in the General Interface Builder taskbar, located in the lower left area of the IDE.
Project Folders Description
components Contains the XML files for application components. Each component has an associated XML file with object definitions. For component files, use the .xml extension. When you create a new project, a default component named appCanvas.xml is created in this folder. See General Interface Component Guide.
js Contains included JavaScript files for your application. For JavaScript files, use the .js extension. When you create a new project, a default file named logic.js is created in this folder. See Adding and Debugging JavaScript Code.
jss Contains dynamic properties XML files. For dynamic properties files, use the .xml extension. See Dynamic Properties Files.
rules Contains mapping rules XML files for connecting to web services. Rules files define the mappings between GUI components and SOAP message elements. For mapping rules files, use the .xml extension. See Basic Steps for Communicating with Data Services.
xml Contains any XML files with content data, such as default values, for the application. For XML files, use the .xml extension.
xsl Contains any XSL files used for transforming application data. For XSL files, use the .xsl extension.
These project folder names are conventions only and not mandatory.

Saving Projects

When you save project files, General Interface Builder saves them to a project directory in the JSXAPPS directory in the specified workspace directory. For example, workspace/JSXAPPS/project_name. For more information on workspaces, see General Interface Getting Started.

There are several ways to save files in a project:

  • Right-click a file tab in the work area and choose Save, Save and Reload, or Save As.
  • Choose File > Save, Save and Reload, Save As, or Save All.
  • For a local data cache XML file, right-click a file tab in the work area and choose Save to Cache or Save a Copy to Disk.

For menu definitions, see File Menu.

Running Projects

There are several ways to run a project:

  • Choose Project > Run Project.
  • Choose Project > Run Project from HTTP.
  • Double-click the default launch file, workspace/project_dir/launch.html, which is generated when you create the project. Use this file only during development, not during deployment.

To run deployed applications, see Deploying Applications.

Running Projects from HTTP

To use this menu command, you must have an HTTP server, such as Apache, running locally and hosting both the General Interface installation directory and your workspace directory. For more information, see HTTP Base.

To run a project in a new browser window on a local HTTP server, choose Project > Run Project From HTTP. If the HTTP server isn't configured, you are prompted to configure it.

Opening Projects

There are several ways to open a project:

  • Choose the Open an Existing Project link in the Welcome screen (Help > Welcome Screen) and choose a project from the list.
  • Choose Project > User Projects and choose a project from the list. To open a General Interface sample project, choose Project > User Projects > Samples and choose a sample project from the list.
  • Choose Project > Recent Projects and choose a recently opened project from the list.
  • Double-click the default General Interface Builder launch file, workspace/ project_dir /launch_in_ide.html, which is generated when you create the project. Use this file to launch the project only during development, not at runtime.

You can also open multiple instances of the same project in different browsers, such as Internet Explorer and Firefox. However, because each instance is sharing the same preferences and settings files, competing changes to General Interface Builder preferences may not be persisted.

Closing Projects

To close a project, simply close the browser.

Deploying Projects

To deploy a project, set deployment options on the Deployment panel of the Project Settings dialog. Use the Deployment Utility to create a hyperlink to the deployed application. Then copy your application files and General Interface software to an HTTP or HTTPS web server.

For more information, see the following:

Modifying Project Settings

When you create a new project in General Interface Builder, a default configuration file is automatically created as part of the project in the project directory: workspace/JSXAPPS/project_dir/config.xml. The configuration file contains application configuration data, such as project settings and file locations. Project settings include deployment, add-ins, class path, and legacy settings.

You can modify the project settings in the Project Settings dialog. Any changes you make in the Project Settings dialog are saved to the configuration file.

If you edit this file manually, close General Interface Builder before editing.

To open the Project Settings dialog, choose Project > Project Settings. To save your changes in the Project Settings dialog, click the Apply or Save button.

The Project Settings dialog has several panels:

For more information on available options in the Project Settings dialog, see Project Settings Dialog.

Deployment Panel

Settings on this panel control the behavior of the deployed application. For definitions of options not discussed here, see Project Settings Dialog. For more information on deployment, see Deploying Applications.

Namespace

The General Interface runtime creates a single instance of a jsx3.app.Server for each loaded application. The application namespace, which is a unique JavaScript identifier for the jsx3.app.Server instance, provides access to the jsx3.app.Server instance.

When specifying a namespace, it's recommended that you use the reverse-domain naming convention with the dot symbol (.). For example com.tibco.APP. Using the reverse-domain naming convention reduces the likelihood that other JavaScript code will interfere with your application.

To specify the namespace, complete these steps:

  1. Choose Project > Project Settings >Deployment to open the Deployment panel of the Project Settings dialog.
  2. Type the namespace in the Namespace field. For example, set the namespace to eg.chart.APP.

You can also override the namespace per deployment using the jsxappns deployment parameter. See Deployment Parameters.

Mode

The deployment mode for the deployed application can be set to Live or Static mode. Select Live mode if the application needs to be online and is connected over HTTP/S to a server for online data access.

Select Static mode when working offline. When in offline mode, the application can't access a server. Data is static and is referenced using static URLs stored in rules files. Choose Static when developing and testing an application offline or when a back-end web service isn't available.

The Mode setting is used by the j sx3.net.Service class.

Body Hot Keys

Hot keys are keyboard shortcuts that an end user can use to interact with a GUI component, such as a button or menu, in a running application.

When the Body Hot Keys option is checked on the Deployment panel, any hot key event that bubbles up to the HTML body element is sent to the application. Even if the focus is in the browser window and not in the General Interface application, the application receives the hot key and responds to it. Choose this option for deployment of standalone console applications. See Deploying as a Full Console Application.

When the Body Hot Keys option is unchecked, hot keys only function if the focus is in the General Interface application. This deployment choice prevents your application from responding to hot keys initiated in other General Interface applications on the page. Choose this option for deployment of non-console applications that are a portion of a web page. See Deploying as a Non-Console Application.

onLoad Script

Enter one or more JavaScript statements that you want executed when the application initializes. For example, you might want to execute a main method, communicate with a server, create controller objects by instantiating a controller class, or create the state of the application. For more information, see Executing Code When the Application Loads and Deployment Panel.

onUnload Script

Enter one or more JavaScript statements that you want executed when the browser window is unloaded. The onUnload event allows you to save user state and do any final cleanup before exiting. For more information, see Executing Code When the Application Unloads and Deployment Panel.

For descriptions of other options on this panel, see Deployment Panel.

For more information on deployment, see Deploying Applications.

Add-Ins Panel

Use the Add-Ins panel to enable the Charting add-in or custom add-ins for a project. Add-ins are disabled by default to accelerate load time of General Interface Builder and General Interface applications.

Enabling Add-ins

To enable add-ins,

  1. Choose Project > Project Settings to open the Project Settings dialog and click Add-Ins.
  2. Check the add-in you'd like to enable on the Add-Ins panel.
  3. Click Save to save the changes and close the dialog or click Apply.
  4. Click OK at the Restart Required prompt and use the browser reload button to restart General Interface Builder.

After add-ins are enabled, their prototypes are available in the Component Libraries palette in General Interface Builder.

For more information on the Charting add-in, see General Interface Component Guide.

Custom Add-ins

For custom add-ins to display on the Add-Ins panel, they must be saved to the JSX/addins or workspace/addins directory. Typically, add-ins to be used by a team of developers would be saved to the JSX/addins directory and posted by an administrator to a location accessible to the team. Add-ins for individual use can be saved to the workspace/addins directory.

For a tutorial on custom add-ins, see General Interface Component Guide.

Classpath Panel

The project class path is used by General Interface to find custom classes that are dynamically loaded by your application.

To add a class path, complete the following steps:

  1. Click in the Path field and type the path to the classes.
    The class path is relative to the project directory. For example, entering js/ as the path would load the specified classes in the workspace/JSXAPPS/project_dir/js directory.
  2. Press the Tab key and type the packages to load in the Packages field. For example, com.tibco.*.
  3. Press Enter to commit the class path.
  4. Click Save to save the changes and close the dialog or click Apply.
  5. Use the browser reload button to restart General Interface Builder for the changes to take effect.

To delete a class path, click the Delete button next to the row.

Path Packages Description
js/ com.tibco.* Loads classes with three words beginning with com.tibco from the directory workspace/JSXAPPS/project_dir/js. For example, this would load the class file workspace/JSXAPPS/project_dir/js/com/tibco/Object.js.
js-ext/ com.tibco.ext.* Loads classes with four words beginning with com.tibco.ext from the directory workspace/JSXAPPS/project_dir/js-ext. For example, this would load the class file workspace/JSXAPPS/project_dir/js-ext/com/tibco/ext/Object.js.
js-foo/ com.foo.** Loads all nested classes of com.foo from the directory workspace/JSXAPPS/project_dir/js-foo/.
js-foo2/ com.foo.*.* Loads classes with four words beginning with com.foo from the directory workspace/JSXAPPS/project_dir/js-foo2.

Contents

Searching General Interface Docs

Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.