In this section: How to: |
You may apply a RIA theme to an existing page in the HTML Composer. You may also change RIA themes for a page. RIA themes are only available for pages created without using a template.
Note: Applying a RIA theme to an existing page overwrites your current HTML page. You should make a copy of your original HTML file if you do not wish to overwrite it.
By applying a RIA theme to an existing non-RIA page, you convert the HTML page to a RIA.
Tip: This procedure also applies to changing between RIA themes on a page.
The available properties for the document object appear.
The RIA theme is applied to all components on the page. You may need to resize some of your components.
Note: You cannot revert your page back from RIA. Create a copy of your HTML page if you do not wish to overwrite it, or close the page without saving.
The following image shows a RIA theme that was applied to an existing page.
Optionally, you may want to animate objects and add RIA components (windows/accordion controls) to the existing page to further graphically enhance your page. See How to Create a RIA Page for details.
This procedure describes how to create a RIA page, add RIA components, and animate objects on the page.
The available properties for the document appear.
The RIA Components toolbar is added to the HTML Composer.
Note: These additional controls are optional to enhance the development of your page and are not required. Your page is a RIA once you apply a RIA theme. For details about how to add these components, see How to Add a RIA Window Component and How to Add a RIA Accordion Control Component.
The Animation Properties dialog box opens.
For descriptions of the available animation properties, see Animation Properties Dialog Box.
In the following example, the RIA shows the following:
Click the title of the accordion pages to switch between pages. For step-by-step instructions on how to create this example, see Usage Notes and RIA Example.
A window component behaves as a parent component, enabling you to add children, such as a report or graph, within the window. The window object can be animated, moved, or resized at run time.
A window component is created in the layout and assigned the name window(n), where n is a number.
Note: Report, graph, and frame objects are added as children of the RIA component. The role of a child indicates that they are grouped within the selected component and function inside of that component.
To add objects as a child of a window component:
Tip: If you have other objects on your Design canvas, you may press and hold the Alt key, left-click, and drag that object onto a RIA parent component.
For example, to create a report that runs within a window, drag a report from the Components toolbar into the window object on the Design tab, release the mouse, and resize the report object within the window component. Note that all the report options and properties are available from the right-click context menu of the report, within the window component.
The following image shows the design time view of a report that has been automatically resized to take up the entire window. This property carries through to run time so when the window is resized, the report will resize with it.
Minimize and restore buttons on a window control enable you to minimize the size of a window to show just the title bar or to restore the window back to its original size.
The window will collapse to show just the title bar, as shown in the following image.
The image is restored to its original size.
An accordion control behaves as a parent component, enabling you to create multiple pages within the control that you can scroll through, each containing objects as children. An accordion control can be animated at run time.
The cursor changes into a crosshair.
An accordion control with three pages is created by default and assigned the name accordion(n), where n is a number.
Note: Report, graph, and frame objects are added as children of the RIA component. The role of a child indicates that they are grouped within the selected component and function inside of that component.
To add objects as a child within the selected page of the accordion control:
Tip: If you have other objects on your Design canvas, you may press and hold the Alt key, left-click, and drag that object onto a RIA parent component.
For example, to create a graph that runs within an accordion page, drag a graph from the Components toolbar into the selected accordion page on the Design tab, release the mouse, and resize the graph object within the accordion component. Note that all the graph options and properties are available from the right-click context menu of the graph, from within the accordion component.
Tip: Double-clicking within an accordion control closes the selected page and opens the next page of the accordion control.
The next page in the accordion control is selected. Insert and resize objects, such as reports, graphs, and frames, within the selected page of the accordion component.
The next page in the accordion control is selected. Type the name for the page in the Selected Page Title properties field in the Properties window.
Tip: Repeat this action (right-click the accordion component and choose Select next page from the context menu) multiple times to get to the desired page of the accordion. Optionally, double-clicking within an accordion control closes the selected page and opens the next page of the accordion control.
The accordion page speed properties are Animated and Animation Speed in the Properties window when an accordion component is selected.
Selecting No turns off the animation speed for the accordion control, ignoring the Animation Speed setting, and displaying the default speed in the RIA.
The animation speed is only applied if Animation is set to Yes.
The following image shows an accordion control with the default animation and animation speed properties.
Note: These location, size, and opacity animation properties are not the same as the accordion Animated and Animated Speed properties, which are specific to accordion page speed in the RIA.
Reference: |
Adding animation properties to the RIA enables you to create visual effects and animated movement for your Web application. The Animation Properties dialog box is available from the Properties tab of the Properties window in the HTML Composer. By default, the location, size, and opacity animation options are not enabled for objects on an HTML page.
You may apply animation properties to the RIA with the Animation Properties dialog box in the HTML Composer.
Note: Animation properties are disabled for all objects by default, with the exception of the accordion page speed options.
The Animation Properties dialog box enables you to set the Location Animator, Size Animator, and Opacity Animator options for RIA objects on the HTML page.
Note: The Animation Properties option is only available from the Properties window if a RIA theme is enabled for the page. You may set animation properties for all objects on the page, such as reports, graphs, buttons, windows, and accordions.
Click the Animation Properties ellipsis button from the Properties window in the HTML Composer, as shown in the following image.
The Animation Properties dialog box opens, as shown in the following image.
The Location Animator options set up the location animation for an object. The animator is then instructed to move objects from one point to another in the RIA, based on the control action, or automatically, after the page fully loads.
The From and To Position indicates the starting position and ending position for the location animation event.
Note: It is suggested to keep the From Position Left/Top values the same as the current position on the layout, otherwise it will jump to the From Position Left/Top when the animation starts.
Controls the acceleration and deceleration of the animation. Options range from slowest to fastest, with normal being the default selection.
Indicates the event that will start the animation. The default is Auto Start, which starts the animation automatically. Otherwise, you may select another object from the drop-down list to identify another control that will be used to start the animation, like a button for example.
Indicates that on a second click of the control to activate, the animation should be executed in reverse.
The Size Animator options set up the width and height animation for the object. This enables an object to grow or shrink in size when the animation is selected.
The From and To Size indicates the starting size of the object and the ending size it will be after the animation event is executed.
Controls the acceleration and deceleration of the animation. Options range from slowest to fastest, with normal being the default selection.
Note: The location and size animation take the same amount of time to complete. They will be synchronized if used in conjunction with each other.
Indicates the event that will start the animation. The default is Auto Start, which starts the animation automatically. Otherwise, you may select another object from the drop-down list to identify another control that will be used to start the animation, like a button for example.
Indicates that on a second click of the control to activate, the animation should be executed in reverse.
The Opacity Animator options set up the opacity animation for the objects. Setting the opacity enables you to fade RIA components on your page.
Controls the acceleration and deceleration of the animation. Options range from slowest to fastest, with normal being the default selection.
Indicates the event that will start the animation. The default is Auto Start, which starts the animation automatically. Otherwise, you may select another object from the drop-down list to identify another control that will be used to start the animation, like a button for example.
Sets the type of background opacity. Options are pulsate, blink, fadeIn, and fadeOut, with pulsate being the default selection.
WebFOCUS |