In this section: |
|
You can use 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 controls.
You can also set properties for the HTML page in HTML Composer. For details, see Setting HTML Page Properties.
How to:
Reference: |
You can add reports and graphs to HTML Composer that will display when you run the layout. You can add a new report (that you create in Report Painter), a new graph (that you create in the Graph tool), 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 or graph whose values can be assigned with controls that are added with HTML Composer. For information, see Using 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 HTML Page tab, located in the Developer Studio Options dialog box. For details, see How to Set Page Properties.
Note:
In order for a graph to fit an HTML Composer frame properly at run time, in InfoAssist, you must select the Autofit command and verify that any graph headings are embedded. You must also embed the graph, into the HTML page, using the Import existing graph command.
You can reference an existing graph in your HTML page. To ensure the entire graph is displayed without the need to scroll, you must resize the frame so the entire graph fits.
InfoMini procedures cannot be referenced in an HTML page.
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 HTML Page tab, located in the Developer Studio Options dialog box.
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 the WebFOCUS InfoAssist User’s Manual.
The cursor changes into a crosshair. 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 HTML Page tab, located in the Developer Studio Options dialog box.
Note: 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 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:
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 pressing 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 component.
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 in your webpage, or adding directions or an 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 text element shortcut menu in 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 can 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.
To insert a bulleted or numbered list into a text element:
The right-click context menu opens.
For example, the following image shows each item of text on a different line with a bullet next to it.
Note:
To insert a nested list into the text element:
A list is started within the current list, allowing you to enter text on that list level, as shown in the following image.
Note: Pressing Tab while your cursor is on the same line as a list item will move that item one level down, resulting in a nested list. The bullet or number type selected is the next list type in the right-click context menu. For example, if you have a bulleted list that uses the disc bullet type, pressing Tab to move an item down one level will cause that nested list to have a circle bullet type.
You can continue to nest lists within other lists by using the same steps shown above.
Note: You cannot skip a list level. For example, in order to insert a nested bulleted list or nested numbered list on a lower level, there must be a list one level up from it.
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:
The following is an image of the Hyperlink Properties dialog box.
The URL action will create a hyperlink that brings you to a webpage. This action will allow you to enter a URL in the Source section.
The HTML File action will create a hyperlink that will bring you to an HTML Composer page. You will be able to select the HTML file to link to from the Source section.
The URL File action will create a hyperlink that will invoke a Managed Reporting .url file. You will be able to select the .url file to link to from the Source section. This action is only available if you are creating an HTML page hyperlink in the Repository area.
The Embedded Procedure action will link to a procedure that is already embedded in the page. The Source section will allow you to choose from the procedures already linked to the current page.
The Schedule action enables you to schedule a report or graph using ReportCaster. For more information on using scheduling, see Adding ReportCaster Schedule Capability to HTML Composer.
The External Procedure action will link to a procedure that is not embedded in the page. You must navigate to and specify the procedure from the Source section.
The Visual Discovery Exclude action is only available when a Visual Discovery control is used on the page. From the Source section, you will be able to choose a datapool already located on the page. This action will cause the currently Visual Discovery data to remain, while hiding the unselected data.
The Visual Discovery Restore action is only available when a Visual Discovery control is used on the page. From the Source section, you will be able to choose a datapool already located on the page. This action will cause hidden Visual Discovery data to be shown on the Visual Discovery control.
The Refresh Active Reports action is only available when an Active Report is on the page. This action will refresh all active reports currently on the page.
The source of where the hyperlink directs to. For URL actions, this is a hyperlink. For HTML actions, you will need to navigate to the HTML file you are directing to. For the Embedded Procedure action, this would be a selection from a list of available procedures. For the External Procedure action, you would have to navigate to the procedure you are directing to.
The Window Target Type will execute the action in a new window.
The Frame Target Type will execute the action in a selected frame.
The Deferred Target Type will run the report deferred.
The InfoWindow Target Type will execute the action in the WebFOCUS generated InfoWindow.
The Target/Template Name contains a list of targets in which the action can be executed from. These targets can be controls, frames, windows, or distribution methods when the Action is set to Schedule. These options can be different for specific actions.
Note: If the distribution method is a combination (for example, email, report library, and FTP) then, at run-time, you will be presented with an intermediate dialog requesting you to choose a single distribution method.
Allows for customization of the InfoWindow dimensions. This option will replace Target/Template Name when using InfoWindow as the Target Type.
When a parameter is added to the HTML page, the Additional parameters button becomes available at the bottom of the Hyperlink Properties dialog box, as shown in the following image.
The Additional parameters button lets you pass the selected parameter in the hyperlink being defined. Clicking the green OK button selects the parameter. Clicking the red Cancel button closes the parameter drop-down list.
or
The cursor changes into a crosshair.
The Hyperlink Properties dialog box opens.
For more information about active controls, see Creating Active Technologies Dashboards With HTML Composer.
Note: If linking hyperlink properties to another page or procedure, HTML Composer parses the other file for unresolved parameters and opens the New Parameters dialog box.
Note: If your hyperlink target type is an InfoWindow, you can move the InfoWindow by clicking the title bar and dragging it. You can move the InfoWindow regardless of if it is pinned or unpinned.
To add a hyperlink to a push button or image, complete the following steps.
Note: If linking hyperlink properties to another page or procedure, 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 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.
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 entire page 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 you 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 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 items 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 changes, 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. You can also link it to a control by assigning the label HTML for 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 HTML Composer.
Note:
The following image is an example of the HTML code that appears when a JavaScript event is selected from the Events subtab in 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 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 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, then move the window to the desired location in the layout.
You can layer objects that are added to the page layout by using the object right-click menu, as shown in the following image.
The options are:
Bring to front. Moves an object to the front so that it is stacked on top of every other object it overlaps.
Send to back. Moves an object to the back so that it is stacked below every other object it overlaps.
Move forward. Moves an object forward one position in the stacking z-order.
Move backward. Moves an object backwards one position in the stacking z-order.
When using any of these commands, the stacking order of the object will change. This is reflected in the z-index property in the Properties window. The z-index is the stacking order of a specific object.
The Events subtab displays a list of all available JavaScript events that can be used in conjunction with an object. The events that are available change depending on what type of object is selected. For example, a report object has different events available than a button object. When no object is selected, events for the HTML page are displayed.
Double-clicking on an event will create a function block for the selected object, using that event. You can view the created functions in the Embedded JavaScript tab, where you can type the JavaScript code to execute when the selected event occurs.
The following is a list of events that are available from the Event subtab and the circumstances in which the JavaScript code is called.
Event |
Circumstance |
---|---|
Load |
Page is loaded. |
UnLoad |
Page is unloaded. |
Click |
Object or page is clicked. |
Double Click |
Object or page is double-clicked. |
Mouse Down |
Mouse pointer is moved down. |
Mouse Up |
Mouse pointer is moved up. |
Mouse Over |
Mouse pointer is moved over an object. |
Mouse Move |
Mouse pointer is moved. |
Mouse Out |
Mouse pointer is moved away from an object. |
Key Pressed |
Key is pressed and released. |
Key Down |
Key is pressed. |
Key Up |
Key is released. |
Focus |
Object is the current focus. |
Blur |
Object is not the current focus. |
Before Load |
Before a control is populated. |
After Load |
After a control is populated. |
Value Selected |
Value within the control is selected. |
Value Changed |
Value within the control is changed. |
WebFOCUS |