The Design Tab and Preview Tabs

The Form Designer in TIBCO Business Studio - BPM Edition can have two tabs, the Design tab and the GWT Preview tab.

Each tab plays a different role:

  • The Design tab is where you model your form and configure its properties.
  • The GWT Preview tab shows how the form looks at runtime in a Google Web Toolkit (GWT) environment.

  • TIBCO Forms uses Google Web Toolkit (GWT) as the rendering technology for forms. The GWT Preview tabs displayed or hidden based on the active runtime environment specified in the Presentation Channel preferences. See Configuring Presentation Channels for details.

The appearance of the form in the preview tabs is determined by settings that are configured on the property sheets of the form itself, and for the panes and controls within the form.

Note: (only applies to Windows) Forms with multi-value properties do not display correctly in the GWT Preview tab. However, you can preview your forms by configuring Eclipse to use an external browser (Windows > Preferences > General > Web Browser) and opening the forms from the context menu in Project Explorer View. Alternatively, you can copy the form preview URL to the system clipboard. You can then paste the URL in any browser to preview the form. See Copy Form Preview URL.
Note: After you install a new external browser, you must either relaunch Business Studio to launch the form's preview in the default browser or add the new external browser details to Windows > Preferences > General > Web Browser to launch the form's preview in this browser.

The GWT Preview tab acts as working GWT application. You can specify data in the form, press the Submit button, and see the data that would be submitted to the server at runtime.

For example, if the user specifies a new customer name and clicks Submit, the System Log panel displays information about the specified text in GWT preview, if the INFO logging is enabled. To enable INFO logging, go to Window - > Preferences - > Form Designer - > Preview. GWT log samples are as follows:

GWT: 

(-:-) 2011-08-18 11:15:49,242 [INFO ] **** Form Inout and Out Data ****
(-:-) 2011-08-18 11:15:49,242 [INFO ] { items:[{"$param":"text_field", "mode":"INOUT", "type":"STRING", "$value":"John Smith"}]}

Thus the preview tab allows you not only to evaluate the appearance of your form with the current Properties view settings, but also to test its functionality.