Copyright © TIBCO Software Inc. All Rights Reserved
Copyright © TIBCO Software Inc. All Rights Reserved


Chapter 2 Concepts : The Design Tab and Preview Tabs

The Design Tab and Preview Tabs
The Form Designer in TIBCO Business Studio can have three tabs, the Design tab, the GWT Preview tab, and the Mobile Preview tab:
The Design tab is where you model your form and configure its properties.
The GWT Preview tab shows how the form will look at runtime in a Google Web Toolkit (GWT) environment.
The Mobile Preview tab shows the URL used to navigate and preview the mobile forms on a mobile device at design time.
TIBCO Forms uses Google Web Toolkit (GWT) as the rendering technology for forms. The GWT Preview and Mobile Preview tabs are displayed or hidden based on the active runtime environment specified in the Presentation Channel preferences. See Presentation Channel Settings 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.
The GWT Preview tab act as working GWT application. You can specify data in the form, press the Submit key, 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 will display 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.
Presentation Channel Settings
The Presentation Channel preferences govern the runtime environment in which forms are built, previewed and deployed. These can be configured at project level or globally for all projects.
To configure Presentation Channel at project level perform the following steps:
1.
2.
In the navigation pane on the left side of the Properties dialog, click Presentation Channels, and select the Enable project specific settings check box.
3.
Double-click Default Channel (or other presentation channel you are using, if applicable) to edit the list of included channel types. You can have the following setting:
By default, Google Web Toolkit (GWT) environment is enabled. Workspace Google Web Toolkit, Openspace Google Web Toolkit, and Openspace Email check boxes are selected (GWT Preview tab is displayed)
To enable the Openspace Mobile environment, select the Openspace Mobile check box (Mobile Preview tab is displayed)
4.
Click Finish and OK when you are done to close the dialogs. In Google Web Toolkit (GWT) environment, the changes take effect immediately just by refreshing or reactivating the preview tab.
To configure Presentation Channel globally, go to Window > Preferences > Presentation Channels. The Default Channel (Default) is displayed in the right side pane. Double-click Default Channel to edit the list of included channel types. The changes made at this level will apply to all projects that do not have the Enabled project specific settings check box enabled.
 
For more information on Presentation Channels, see the TIBCO Business Studio Process Modeling Guide.
Port Settings for Preview
You can set the port used to serve up the preview of forms for both the internal preview tabs and the preview of mobile forms from external applications or devices. By default, this is set to 8888. You can change the port if there is a conflict with another application using port 8888 on your machine.
To change the port, go to Window > Preferences > Forms Designer > Preview. If you change it to a value of 0, then an arbitrary, available port number will be used.
Copying the Form Preview URL
By clicking the button in the main toolbar, you can copy the form preview URL to the system clipboard. You can then paste the URL in any browser to preview the form. This way you can see how the form is rendered in other browsers on a specific platform apart from the built-in browser used in Eclipse.
Logging
A system log pane for the preview tabs is provided to display trace and debug messages from the system as well as any logging messages from your JavaScript code.
The logging window displays the log output generated by the application, filtered according to the verbosity level set by the Logging Level drop-down list.
Locale
Choose the locale from the drop-down list: English, Chinese, French, German, Spanish, and so on. Changing this setting will only have an effect if locale-specific resource bundles are defined for the form. For more info about localizing a form, please refer to Localizing a Form.
Logging Level
Choose the log level by clicking the appropriate button (GWT):
The verbosity (detail) of logging increases with the logging level in cumulative fashion. For example, the WARN level will also show all ERROR and FATAL messages; INFO will also show WARN messages; and so on.
You can choose the logging level in the preview pane using context.form.log or context.form.logger. The logger API is available in all the script contexts and it allows the user to log at all logging levels. See API for Scripting for details of log and logger APIs. The logging level specified will apply only to that specific preview session. Messages logged by user scripts will be shown in the DEBUG log level.
You can change the default logging level used in the preview tabs in the user preferences, under Window > Preferences > Form Designer > Preview.
For the GWT preview, the setting made in Preferences will be the lowest level of logging available in preview. For example, if the logging level is set to INFO in the Preferences, you will not be able to change to DEBUG in the preview pane.
At runtime, when GWT Forms are used, you can enable logging by using a URL parameter log_level. You need to set the value of the log_level parameter to any one of the logging levels mentioned above. The specified log level and all above it will be enabled in that case. For example, if you access Openspace as: http://<server>:<port>/openspace?log_level=INFO
You will be able to see all INFO, WARN, ERROR and FATAL messages in the log viewer.
Reload
Click the Reload button in the GWT preview and in Mobile preview mode to close the current form and reload it.
Performance Metrics
Click the Performance Metrics button in GWT preview to view the form load timings. The performance table is displayed with the timings for the following operations:
Figure 51 Performance Table
 
You can use this information to analyze the load timings of various forms.
By default, the performance metrics option is enabled in GWT preview. To change the default settings, go to Windows -> Preferences -> Form Designer -> GWT Forms and clear the Collect performance metrics check box.
Figure 52 The Performance Metrics Settings
At runtime (Openspace, Workspace or a Custom Client Application), if you would like to collect performance metrics, pass in a url parameter tibco_instr with a value true. For example:
http://<server>:<host>/workspace/workspace.html?tibco_instr=true
This enables you to view the performance metrics anytime during the form's life cycle. You can view the performance metrics by pressing ALT+F12 and close the dialog using the Close button or by pressing the ESC key.
View Datastore Data
Click the View Datastore Data button in GWT preview mode to preview the current state of the form data that would be submitted to the server. You can click this button at any point during form usage.
Visibility in the Preview Tab
All panes and controls are visible in the Design tab so that you can edit them, even if they are configured to be initially invisible at runtime. Below, for instance, is a form as it appears in the Design tab. (The example used here is a part of the Capture Claim form from the tutorials in Chapter 1, Getting Started.)
This form has panes whose Visible property (on the General tab of the Properties View for each pane) is cleared.
Figure 53 Invisible and Visible Form Parts
The shaded diagonal lines across two of the panes in this form indicate that the Visible property of those panes is initially cleared, or set to false.
In another section of the Capture Claim form, the visibility flag of the Witness Information pane is bound to the value of the Witness Available check box. When the check box is selected, the visibility of this pane is set to true, and the pane is shown. When the check box is cleared, the visibility of this pane is set to false, and the pane disappears. This behavior is fully functional in the GWT Preview.
Figure 54 Visibility of a Pane Depending on a Check Box
To see this example, open the FormsTutorialSolutions project in the Project Explorer, as described in Chapter 1, Getting Started. Open the Capture Claim form and click one of the preview tabs. Notice the bottom portion of this form as it initially appears in the preview tab. Try selecting and clearing the Witness Available check box to observe the change in the visibility of the Witness Information pane.
 

Copyright © TIBCO Software Inc. All Rights Reserved
Copyright © TIBCO Software Inc. All Rights Reserved