Usage Notes and RIA Example

Reference:

This section describes usage notes for creating an RIA and provides steps to create an RIA example.


Top of page

x
Reference: Matching RIA Themes and StyleSheets

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:



x
Reference: Usage Notes For Creating an RIA

The following apply when creating an RIA in HTML Composer.



Example: Creating an RIA With HTML Composer

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:

  1. Create a graph to be used in the RIA.

    Create the sales graph to be used as a target from a drill-down report in the RIA.

    1. Create a new procedure in Developer Studio:
      • With the Procedures folder highlighted, select New/Procedure from the File menu.

        or

      • Right-click the Procedures folder and select New/Procedure from the context menu.

      The Add Procedure dialog box opens.

    2. Enter graphbyproduct as the name for the new procedure in the File name field and click Open.

      The Procedure Viewer opens.

    3. Click a component connector (yellow diamond) and select Graph.
    4. Select the ggsales.mas Master File and click Open.

      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.

    5. Select Build a Chart from the main menu.

      Select the ggsales.mas Master File and click OK.

    6. Select Format from the menu and click Pie from the Chart Types section.

      InfoAssist refreshes showing a pie chart.

    7. Drag State to the Slices category under the Query and then drag Budget Units to the Measures (Sum) category under the Query section.
    8. Select the Header & Footer button from the Home menu and type By Product:. Drag PRODUCT from the Field Tree in the Heading window to the Header & Footer window. <PRODUCT is inserted into the Header & Footer window. Position it after By Product.

      The heading appears as By Product: <PRODUCT. Click Apply and OK.

    9. Click on Product in the Data window. In the Home menu, click the Filter button. The Filter tool opens. Equal to is set as the default operator. In the Add: box, type Product Name. Click the add filter button. Click Ok and the Filter tool will create the following parameter: WHERE PRODUCT EQUAL To Product Name
    10. In the Format menu, click the Labels button. The Axes and Legend buttons are now shown. Click the Legend button and select Left from the Legend Position drop-down list.
    11. Save and close the graph and Procedure Viewer.
  2. Convert an existing HTML page to an RIA and add objects to the page.
    1. Create a copy of chaining_example.htm, that was created in Applying Conditions to a Chain of this manual, and rename it to ria_example.htm.
    2. Open ria_example.htm in HTML Composer.
    3. Select DOCUMENT from the Properties window drop-down list.

      The available properties for the document object appear.

    4. Select Clean from the RIA Theme drop-down list.

      The RIA theme is applied to all components on the page and the RIA Components toolbar is added to HTML Composer.

    5. Move the report and control down the page, as we will use those components later.
    6. From the Insert menu, select Components, then click Image.

      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.

    7. Select Push button from the Components toolbar and drag it onto the Design canvas, underneath the image.
    8. Rename the button by selecting the Push button on the Design tab and double-click in the field next to Value in the Properties window.

      Tip: The button object appears as button1<DIV> in the Properties window drop-down list.

    9. Type Animate Sales Report in the Value property field and press the Enter key.
    10. Click the Animation Properties ellipsis button from the Properties window.

      The Animation Properties dialog box opens.

    11. Select the Opacity Animator check box to enable the opacity settings.
    12. Select blink as the Type, and leave the Control to activate as <Auto Start>.

      This indicates that the blinking animation for the push button will start automatically in the RIA page.

    13. Click OK to close the Animation Properties dialog box.
  3. Create and animate an RIA window component.
    1. Select the Window button from the RIA Components toolbar.
    2. Drag the window onto the Design canvas.
    3. Release the mouse and resize the object.
    4. Rename the window by typing Sales Report in the Caption properties field of the Properties window.

      Tip: The RIA window component appears as window1<DIV> in the Properties window drop-down list.

    5. Select the Report button from the Components toolbar and drag it into the window object on the Design tab, release the mouse, and resize the report object within the window component.
    6. Double-click the report object and select ggsales.mas to open Report Painter.

      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.

    7. Create the sales report, with a drill down on the Product field, to be used in the RIA window:
      • Insert CATEGORY,PRODUCT, REGION, and ST as the By fields, hiding the ST field.
      • Insert DOLLARS as the Sum field.
      • Add Sales by: <GGSALES.SALES01.ST in the Page Heading.
      • Select the Product field, right-click, and select Options to open the Field Properties dialog box.
      • Select the Drill Down tab to apply a drill down to the Product field column data, that executes a procedure in a frame.

        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.

      • Select Add from the With Parameters section of the Drill Down tab, and select PRODUCT from the Parameter name drop-down list. This is the parameter that we created in the graph. Leave Field as the Parameter value and select GGSALES.SALES01.PRODUCT from the drop-down list.
      • Close and save the report.

        The drill down report appears in the RIA window component.

    8. Select the report component and set the Auto Fit property field to True in the Properties window.
    9. Select the RIA window component on the Design tab and click the Animation Properties ellipsis button from the Properties window.

      Tip: The RIA window component appears as window1<DIV> in the Properties window drop-down list.

      The Animation Properties dialog box opens.

    10. Select the Location Animator check box to enable the location settings.
    11. Select button1 from the Control to activate the drop-down list.

      This indicates that clicking the Push button will activate this window at run time.

    12. Type the From Position Left value as 10.

      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.

    13. Click OK to close the Animation Properties dialog box.
  4. Create an RIA accordion control component.
    1. Select the Accordion Control button from the RIA Components toolbar.
    2. Drag the accordion control onto the Design canvas underneath the RIA window component.
    3. Release the mouse and resize the object.
    4. Rename the selected page of the accordion by typing Sales Graph in the Selected Page Title properties field of the Properties window.

      Tip: The RIA accordion control component appears as accordion1<DIV> in the Properties window drop-down list.

    5. Select the Frame button from the Components toolbar and drag it into the accordion object on the Design tab, release the mouse, and resize the frame object within the accordion page.

      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.

    6. Select the Frame component and set the Auto Fit property field to True in the Properties window.
    7. Right-click the accordion component and choose Select next page from the context menu.

      The next page in the accordion control is selected.

    8. Type Sales by Region in the Selected Page Title properties field of the Properties window.
    9. Scroll down the Design tab and select the existing report and control by using the Shift key on your keyboard.
    10. Press and hold the Alt key, drag the selected components onto the accordion page, and release the mouse.

      The report and control are added within the Sales by Region accordion page. Resize the objects, if necessary.

    11. Remove any unused pages from the accordion control by selecting and removing pages from the right-click context menu.
  5. Save and run the RIA.

The following image shows the RIA at run time.


WebFOCUS