In this section: |
|
You can use the HTML Composer to create an HTML page that launches and displays your reports and graphs. You can add elements to the HTML page, such as reports, graphs, text, and form controls.
You can also set properties for the HTML page in the HTML Composer. For details, see Setting HTML Page Properties.
How to:
Reference: |
You can add reports and/or graphs to the HTML Composer that will display when you run the layout. You can add a new report (that you create in the Report Painter), a new graph (that you create in the Graph Assistant or Advanced Graph Assistant), or add an existing report or graph that resides on an available server. You can also launch Document Composer from HTML Composer and create compound documents.
You can also include parameters in a report and/or graph whose values can be assigned with controls that are added with the HTML Composer. For information, see Using Form Controls to Supply Incoming Parameter Values.
You can set the graphic used as a placeholder for a report or graph in the layout using the Settings dialog box. For details, see How to Set Page Properties.
The cursor changes into a crosshair.
A report or graph object is created in the layout and assigned the name report(n) or graph(n), where n is a number. The object will appear in gray and white to indicate that the placeholder does not have a report or graph associated with it. Once a report or graph is associated with the object, the object displays the contents of the report or graph if live or simulated data is active (live data is the default) or a colored placeholder if preview is off in the Settings dialog.
or
The Open dialog box opens.
The selected tool opens. For details on using these tools, see the Creating Reports With Report Painter manual and Creating a Graph With Graph Assistant in the Creating Charts With Graph Tools manual.
Note: For a graph, the Graph Assistant opens. For a report, the Report Painter opens.
The cursor changes into a crosshair. Click and drag the crosshair to create a report or graph object and adjust it to the size you want.
A report or graph object is created in the layout and assigned the name report(n) or graph(n), where n is a number. The object will appear in gray and white to indicate that the placeholder does not have a report or graph associated with it. Once a report or graph is associated with the object, the object displays the contents of the report or graph if live or simulated data is active (live data is the default) or a colored placeholder if preview is off in the Settings dialog.
Note: If you want to access the Manage Layout dialog box, choose this method.
The Get source file dialog box opens.
The report or graph object appears in the Design view of the HTML Composer.
The Procedure Viewer opens.
When a report is selected, the Properties tab in the Properties window contains options that control the properties of your report and reporting objects.
Click a property to display a description of the selected property at the bottom of the Properties window.
When a graph is selected, the Properties tab in the Properties window contains options that control the properties of your graph.
Click a property to display a description of the selected property at the bottom of the Properties window.
The cursor changes into a crosshair.
Document Composer opens. For details on using Document Composer, see the Creating Compound Reports With Document Composer manual.
How to: Reference: |
You can select to include or exclude components to be imported into your procedure with the Manage Layout dialog box. The Manage Layout dialog box allows you to select from components of your request such as TABLE, SET, and GRAPH.
If you have several requests in one procedure, you can use the Manage Layout dialog box to suppress the display of individual TABLE, SET, and GRAPH components (for example, temporary HOLD files). By default, the last TABLE is set to display.
The Get source file dialog box opens.
The Manage Layout dialog box opens. For details, see Manage Layout Dialog Box.
The following image is the Manage Layout dialog box.
The Manage Layout dialog box contains the following fields/options:
Displays all the components (SET, DEFINE, and so on) in the request.
Displays the contents of the selected component.
Determines whether the request is included in the procedure, outside of the procedure, or in the procedure and layout.
Activates the component and displays the component in the layout.
Deactivates the component and does not display the component in the layout. This is a good method for hiding report requests that produce temporary files.
Removes the component from the procedure.
Displays the layout reports and graphs in the Data field.
This check box only displays when you access the Manage Layout dialog box from the Insert menu. When accessing it from the context menu, only the report or graph component displays, and the check box does not apply.
How to:
Reference: |
You can use a frame to embed additional Web sources or run reports. You can also use a frame as the output location or target for a drill-down report. You can also use a frame to run a table of contents report, an OLAP report, a PDF report, an Excel report, or a Maintain procedure.
The cursor changes into a crosshair.
A frame is created in the layout and assigned the name iframen, where n is a number.
or
The cursor changes into a crosshair.
A frame is created in the layout and assigned the name iframe(n), where n is a number.
The Hyperlink Properties dialog box opens.
Note: A report with parameters requires that you select values (at run time) in order to generate the output.
Note: False is the default Auto Execute option for reports with parameters.
The Style Composer opens.
This option hides the frame at run time until the values are selected.
In the example below, the frame is not shown before the values are selected.
In the same example below, parameter values have been selected and the frame appears showing the output results.
How to: Reference: |
You can add a horizontal or vertical line to the layout. This is useful for distinguishing between sections of your launch or display page.
or
The cursor changes into a crosshair.
A line is created in the layout.
How to: Reference: |
You can add an image to the layout. This is useful for including graphics such as a company logo.
You can insert an image into your report layout and add a hyperlink to it. After you run your report and click the image you can launch a URL or run a report or Maintain procedure the same way you can by clicking a hyperlink or push button. For more information, see How to Add a Hyperlink to a Push Button or an Image.
Note: When inserting images, images must be referenced from a specific directory location. Links to images are not supported.
or
The cursor changes into a crosshair.
The Get source file dialog box opens.
Note: You can multiselect image files from the Get source files dialog box. The files will be cascaded on the canvas and can then be moved as required.
Note: You can always return an image to its original size by right-clicking the image and selecting Restore size from the context menu.
Images will retain their aspect ratio if they are resized by clicking and dragging their corner borders.
How to: |
You can add .SWF files that are Adobe® Flash Player compatible to accompany reports or graphs on an HTML page.
Note:
or
The cursor changes into a crosshair.
The Get source file dialog box opens.
When Flash content is selected, the Properties tab in the Properties window contains options that control the properties of the Flash content.
Click a property to display a description of the selected property at the bottom of the Properties window.
How to: Reference: |
You can add text to the layout. This is useful for including headings for your Web page, or adding directions or explanation for your report or graph.
or
The cursor changes into a crosshair.
A text object is created in the layout and assigned the name textn, where n is a number.
You may apply various formatting and style options to words and individual text characters within the text element. The formatting options are available from the Formatting toolbar in the HTML Composer.
Note: Any formatting and styling that you may have applied to individual text strings within the text element will remain unchanged. Changes made to the entire text element are only applied to part of the text string that has not been formatted.
The Formatting toolbar is activated.
Note: The Bold, Italic, Underline, Superscript, and Font Style options are available when formatting individual words or text characters. The Font Style and Alignment options are available when the entire text element is selected.
Tip: You may also access the Font Style dialog box from the Font ellipsis button of the Styling Font field in the Properties window.
The format options are applied to the text selected.
How to: |
You can create a hyperlink for your HTML page. A hyperlink can execute a report or Maintain procedure, link to a URL, or open an HTML page. You can create a hyperlink in two ways:
or
The cursor changes into a crosshair.
The Hyperlink Properties dialog box opens.
For more information about active form controls, see Creating Active Technologies Dashboards With the HTML Composer.
Note: If linking hyperlink properties to another page or procedure, the HTML Composer parses the other file for unresolved parameters and opens the New Parameters dialog box.
To add a hyperlink to a push button or image, complete the following steps.
Note: If linking hyperlink properties to another page or procedure, the HTML Composer parses the other file for unresolved parameters and opens the New Parameters dialog box.
How to: Reference: |
A group box can be used to create a border around a group of objects, for example, forms or reports and graphs.
or
The cursor changes into a crosshair.
A group box is created in the layout and assigned the name groupbox(n), where n is a number.
For more information about formatting text, see How to Format Text in the Layout.
In this section: How to: Reference: |
You can add a push button to the layout. A push button enables you to execute a report or Maintain procedure, or link to a URL or HTML file. This behavior is similar to a hyperlink.
or
The cursor changes into a crosshair.
A push button is created in the layout and assigned the name button(n), where n is a number.
The Hyperlink Properties dialog box opens. Use the Hyperlink Properties dialog box to assign a target and action to the push button.
The submit button on a form control enables you to submit your request after selecting parameter values at run time. You may run multiple reports with one submit button.
Note: A push button can also be used in place of a submit button.
The following image is an example of the submit button selected.
The following image is an example of the whole control selected.
The Hyperlink Properties dialog box opens.
Repeat these steps for multiple procedures.
When a push button is selected, the Properties tab in the Properties window contains options that control the properties of your buttons.
Click a property to display a description of the selected property at the bottom of the Properties window.
The HTML Composer enables you to select Maintain procedures (.mnt, .fcm) to run from your HTML form, either within a frame or in a new window. Select a Maintain procedure as the source for the External procedure in the Hyperlink Properties dialog box. This makes it easy to create customized launch forms for WebFOCUS Maintain, and to integrate WebFOCUS reporting and Maintain in your applications. For details about inserting a frame, see How to Assign a URL, HTML File, or Report to a Frame.
How to: Reference: |
You can add a reset button to the layout. A reset button enables you to reset the form back to its initial settings.
or
The cursor changes into a crosshair.
A reset button is created in the layout and assigned the name reset(n), where n is a number.
When a Reset button is selected, the Properties tab in the Properties window contains options that control the properties of your buttons.
Click a property to display a description of the selected property at the bottom of the Properties window.
You can add a tab control to the layout. Tab controls enable you to create multiple pages in one HTML form and present a better display for viewing secondary information.
When a tab control object is added to the layout, each tab control consists of:
A tab item is the tab label. You may edit the name of the tab item, style the tab item, and add multiple tab items. Each tab item is associated with a tab body.
A tab body is the tab page where you associate your components, such as report and graph objects, images, and lines.
The Tab control can be displayed as a full screen or part of an HTML page.
In the example below, the selected tab shows a report and a second tab that contains a graph.
or
The cursor changes into a crosshair.
Tip: You should make the object large enough to associate report/graph components within the tab control.
A tab control object is created in the layout and assigned the Properties name tab(n), where n is a number of the tab. By default, the tab control has one tab page. Each tab page consists of a tab item (tabitem(n)) and tab body (tabitembody(n)).
You may resize the tab control to fit the full screen of your layout, making the tab control the full background of your browser window at run time. When set to full screen mode, scroll bars will not be applied to the output window. Therefore, you may have to adjust the tab control (and any items on the tab) in the layout to ensure that they appear appropriately for display at run time.
Note: It is recommended to set the tab control to full screen mode at the beginning of the development process. If there are existing components on the layout that are not part of the tab control, these components will become inaccessible if the tab control is changed to full screen mode.
The cursor changes into a crosshair.
The tab control displays as a full screen in the layout, as shown in the image below.
Note: This setting can be applied only to one tab control in your application. If one tab control is set to full screen mode, the full screen mode item will be greyed out for any additional tab controls.
A tab is added to the tab control object.
The tab items are resized to the size of the widest tab item and they are evenly spaced.
When a tab control is selected, the Properties tab in the Properties window contains options that control the properties of your tabs.
Note: You may set options for the tab control, individual tab items, and the tab body.
Click a property to display a description of the selected property at the bottom of the Properties window.
You may modify and style the tab item(s) and tab body properties.
When the tab control is selected, you may change the default size of the tab labels, the appearance of the tabs, and the location of the tab items on the tab control.
These properties are available from the Properties tab of the Properties window when the tab control is selected. The tab control appears as tab(n) in the Properties window drop-down list.
The default tab edge is Straight.
The default tab location is Top.
Note: If the tab location is changed, any background images applied to the tabs will not be rotated. You will have to reinsert a different image that is rotated appropriately.
In addition to using the Style Composer, you can add background images to tab items by using the Background properties field.
The Background properties field is available from the Properties tab of the Properties window when the tab item is selected. The tab item appears as tabitem(n) in the Properties window drop-down list.
The Get source file dialog box opens, as shown in the image below.
The background image is added to the tab item.
You may have to manually resize the tab item to fit the image.
Note: If the tab location is changed (from Top to Left for example), any background images applied to the tabs will not be rotated. You will have to reinsert a different image that is rotated appropriately.
You may add background images to a tab item or tab body using the Style Composer. For example, you may add a small icon with text to a tab item or your company logo as the background image for a tab body.
Note: Background images can also be applied to tab items by using the Background properties setting. For more information, see How to Use the Tab Item Background Properties Field.
The Style Composer dialog box appears.
Tip: If you are adding an icon to a tab item, select a small image and do not tile the image.
The background image is added to the tab item/tab body.
You may associate any component from the Insert menu (such as an image or line) to the tab body. This procedure details how to add a report or graph object component to the tab body.
The cursor changes into a crosshair.
The component is associated to the tab body.
How to: Reference: |
You can add a label to the layout. A label is simply a piece of text. The label component enables you to create and name a label, and link it to a control by assigning the label HTMLfor property the same value as the Unique Identifier property for the control.
or
The cursor changes into a crosshair.
A label is created in the layout and assigned the name labeln, where n is a number.
For example, suppose you have a drop-down list in your layout. The default Unique Identifier property name assigned to the drop-down list object is combobox1. Enter combobox1 in the HTMLfor property field to link the label to the drop-down list in your layout.
When label is selected, the Properties tab in the Properties window contains options that control the properties of the label in your layout. New pages will show labels as <LABEL> tags in the Properties window.
Click a property to display a description of the selected property at the bottom of the Properties window.
How to: |
The Properties window is a dockable window that consists of several tabs and components.
The Properties subtab options are accessible in the Design view of the HTML Composer.
Note: To code a JavaScript event for an object, select a JavaScript event and click the ellipsis button in the Events subtab. The HTML Composer adds the event to the HTML code and switches from Design to HTML view. In the HTML view, you are prompted to define the event. Add the appropriate JavaScript code.
The following image is an example of the HTML code that appears when a JavaScript event is selected from the Events subtab in the HTML Composer.
For layout purposes, you may want to dock or reposition the Properties window. You can dock the Properties window on all four sides of the HTML Composer. When you choose to dock the Properties window on the top or bottom, the columns are split in half.
The Properties window appears as shown in the following image when you double-click the title bar.
If you selected to dock the Properties window on the bottom of the screen it will appear as shown in the following image.
To undock the Properties window, click the Properties title bar and then move the window to the desired location in the layout.
WebFOCUS |