Reference: |
This section describes usage notes for creating an RIA and provides steps to create an RIA example.
The RIA look and feel that is inherited when an RIA theme is applied can be matched by the Report or Chart StyleSheet in order for the styling to match the theme. The table below describes the RIA themes and the StyleSheets that correspond to the theme for each tool.
RIA Theme |
BI Portal Theme |
Report and Chart StyleSheet |
---|---|---|
Clean |
Any |
Any |
Ocean Rounded |
Teal |
ENria_ocean_rounded_theme |
Carbon Rounded |
Black |
ENria_carbon_rounded_theme |
Dark Ocean Rounded |
Green |
ENria_dark_ocean_rounded_theme |
Olive Rounded |
Green |
ENria_olive_rounded_theme |
Blue |
Blue |
ENria_blue_theme |
Charcoal |
Black |
ENria_charcoal_theme |
Gray |
Silver |
ENria_gray_theme |
High Contrast |
Any |
Any |
Ruby |
Red |
ENria_ruby_theme |
Information Builders |
Information Builders |
ENInformationBuilders_Dark ENInformationBuilders_DarkComp ENInformationBuilders_Default1 ENInformationBuilders_Light1 ENInformationBuilders_Light2 ENInformationBuilders_Medium1 ENInformationBuilders_Medium2 |
Black |
Black |
ENBlack_Dark ENBlack_DarkComp ENBlack_Light1 ENBlack_Light2 ENBlack_Medium1 ENBlack_Medium2 ENblack_theme ENblackbluepurple |
Blue |
Blue |
ENBlue_Dark ENBlue_DarkComp ENBlue_Light1 ENBlue_Light2 ENBlue_Medium1 ENBlue_Medium2 ENblue_theme ENblue-medium |
Green |
Green |
ENGreen_Dark ENGreen_DarkComp ENGreen_Light1 ENGreen_Light2 ENGreen_Medium1 ENGreen_Medium2 ENgreen-gray |
Orange |
Orange |
ENOrange_Dark ENOrange_DarkComp ENOrange_Light1 ENOrange_Light2 ENOrange_Medium1 ENOrange_Medium2 |
Purple |
Purple |
ENPurple_Dark ENPurple_DarkComp ENPurple_Light1 ENPurple_Light2 ENPurple_Medium1 ENPurple_Medium2 ENpurple-light |
Red |
Red |
ENRed_Dark ENRed_DarkComp ENRed_Light1 ENRed_Light2 ENRed_Medium1 ENRed_Medium2 ENred-bronze |
Silver |
Silver |
ENSilver_Dark ENSilver_DarkComp ENSilver_Light1 ENSilver_Light2 ENSilver_Medium1 ENSilver_Medium2 |
Teal |
Teal |
ENTeal_Dark ENTeal_DarkComp ENTeal_Light1 ENTeal_Light2 ENTeal_Medium1 ENTeal_Medium2 |
When applying StyleSheets and Templates it is important to note the following:
The following apply when creating an RIA in HTML Composer.
Note: The file extensions of the RIA StyleSheet templates vary, depending on the tool, but all appear as ria_stylesheet_theme.file extension, where the file extension is .txt or .sty. The available RIA StyleSheets are:
Selecting one of these templates in your tool enables you to inherit the same RIA look and feel for the report or chart when the same RIA theme is applied in HTML Composer. For more information on StyleSheets/Templates matching the look of a certain RIA theme, see Matching RIA Themes and StyleSheets.
The following image shows a Tab Control on an RIA page with these options.
Note: You can change the text on a tab control by entering the text in the Title of element property field in the Properties window.
Suppose you want to create an RIA that shows:
This example assumes that you are familiar with the basic Developer Studio features. The following example creates an RIA by:
Create the sales graph to be used as a target from a drill-down report in the RIA.
or
The Add Procedure dialog box opens.
The Procedure Viewer opens.
Tip: The Gotham Grinds Sales data source (ggsales.mas) is available from the ibisamp Applications on localhost folder of Developer Studio. You may copy this source file to the project directory of your choice.
InfoAssist opens.
Select the ggsales.mas Master File and click OK.
InfoAssist refreshes showing a pie chart.
The heading appears as By Product: <PRODUCT. Click Apply and OK.
The available properties for the document object appear.
The RIA theme is applied to all components on the page and the RIA Components toolbar is added to HTML Composer.
The cursor changes into a crosshair. Drag the crosshair to create the image object and size, and select an image from the Get source file dialog box.
Tip: The button object appears as button1<DIV> in the Properties window drop-down list.
The Animation Properties dialog box opens.
This indicates that the blinking animation for the push button will start automatically in the RIA page.
Tip: The RIA window component appears as window1<DIV> in the Properties window drop-down list.
Tip: The Gotham Grinds Sales data source (ggsales.mas) is available from the ibisamp Applications on the localhost folder of Developer Studio. You may copy this source file to the project directory of your choice.
Select Column Data as the active object. Select Execute Procedure as the Drill Down Type. Select graphbyproduct.fex as the Procedure name (which we created in step 1 of this example). Enter iframe1 as the Target Frame location, which we will add later in HTML Composer.
The drill down report appears in the RIA window component.
Tip: The RIA window component appears as window1<DIV> in the Properties window drop-down list.
The Animation Properties dialog box opens.
This indicates that clicking the Push button will activate this window at run time.
This indicates that the location of the window will start the animation 10 pixels from the left position of the page when the window is animated.
Tip: The RIA accordion control component appears as accordion1<DIV> in the Properties window drop-down list.
Note: The frame component appears as iframe1<IFRAME> in the Properties window drop-down list. This is the name that we assigned as the Target Frame location for the drill-down report that appears in the RIA window.
The next page in the accordion control is selected.
The report and control are added within the Sales by Region accordion page. Resize the objects, if necessary.
The following image shows the RIA at run time.
WebFOCUS |