Binding a Procedure to the ibiDataGrid Using Custom Components

In this section:

How to:

The ibiDataGrid populates the Flex application with WebFOCUS data. You bind the grid to a WebFOCUS procedure (fex). At run time, when the SWF application is accessed, the procedure is executed and the returned data is loaded into it.

To make the application more visually appealing, you can host the ibiDataGrid in the Flex Builder Panel component.


Top of page

x
Procedure: How to Bind a Procedure to the ibiDataGrid
  1. Select the first tab of the TabNavigator. You will position the ibiDataGrid on the first tab.
  2. From the Layout components, select Panel.
  3. Drag the Panel onto the tab and position it in the top-right corner. Later, you will add filters and charts to Tab 1.
  4. Enter the following title for the Panel:
    Regional Detail Transactions
  5. Set the background color to match that of the application: #c0c0c0.

    Flex Builder canvas Panel Layout component

  6. Drag and drop the ibiDataGrid component onto the panel.
  7. Adjust the size of the grid to fit into the panel. As you drag the sides of the grid, green guidelines appear to indicate the position of the grid relative to the inner wall (side) of the panel. The grid side wall will snap to the green guideline.

    Adjust all four side walls of the ibiDataGrid to fit exactly within the panel. If the grid is wider than the panel, Flex Builder will automatically display scroll bars. See the Flex Builder documentation for instructions on relatively positioning two components.

    Flex Builder canvas ibiDataGrid component

  8. Copy the following URL to the sample test procedure (xmltest) and paste it into the data grid custom property named seturl.
    http://localhost:8080/ibi_apps/WFServlet?IBIF_ex=xmltest

    Note: To access the ibiDataGrid custom properties, the Flex Properties panel must be open. To open the Flex Properties panel, select Window then Flex Properties. To the right of the Flex Properties tab are three icons: Standard View, Category View, and Alphabetical View. Select Category View to access the seturl property, which is listed under IBI Data.

    See your WebFOCUS Developing Reporting Applications manual for information on the required parameters for a URL that runs a procedure.

  9. Set the ibiDataGrid component ID to the value MAIN01. View the additions to the MXML code by switching to Source view.
    <mx:Panel x="308" y="10" width="467" height="195" layout="absolute"
         title="Regional Detail Transactions" backgroundColor="#c0c0c0">
      <ibi:ibiDataGrid x="0" y="0" width="447" height="155" id="MAIN01">
        <ibi:seturl>http://localhost:8080/ibi_apps/WFServlet?IBIF_ex=xmltest
        </ibi:seturl>
      </ibi:ibiDataGrid>
    </mx:Panel>
  10. Save the Flex application and run it. It will be displayed in the browser, as shown in the following image.

    Flex application in web browser


Top of page

x
Advanced Options When Binding Data to ibiDataGrid

In this section:



x
The Default Setting for ibiUseXMLParser

Information Builders XML parser will be used by Information Builders components, instead of the one provided by Adobe. This change will not affect interactions with Adobe components. If you require the Adobe XML parser, change the ibiUseXMLParser property to true.



x
Changing HTTP Method Using ibiDataSendMethod

The property called ibiDataSendMethod is available in ibiDataGrid to support the use of HTTP POST to retrieve data from a long URL in seturl value. If nothing is specified for this property, POST is the default method used for retrieving data from WebFOCUS. There are cases where HTTP GET needs to be used instead, especially when the URL does not require a Servlet call, for example, to simply retrieve the data from a static XML file posted on the web site. Please see HTTP Method Definitions specified by the W3C Organization for more details.

To apply a send method, use the following syntax.

ibiDataSendMethod="send_method"

where:

send_method

Is the send method you are using (POST or GET). POST is the default.



Example: Setting ibiDataSendMethod to GET

If the seturl is specified to simply retrieve the data from the XML file posted on the website you need to set ibiDataSendMethod property to GET, as shown in the following example.

<ibi:ibiDataGrid x="21" y="672" width="593" id="mainGrid" 
  seturl="http://flexdemo.ibi.com/examples/bamsample.xml?"
  ibiAddRandom="true" 
  ibiUseFiltered="true"
  ibiDataSendMethod="GET" />


x
Empty Data Grid

When the seturl property contains a valid URL to a WebFOCUS procedure but there is no data returned because no data exists, an empty data grid will be returned at the run-time without error. The Data Error message will be displayed in the message window if there is a problem locating the procedure or the server.



x
Sorting Data on Multiple Columns in ibiDataGrid

Using the ibiDefaultSort property, you can specify multiple columns to sort and assign each column sort order using the ibiDefaultSortOrder property in ibiDataGrid.

The ibiDefaultSortOrder property takes ASCE or DESC values in both all uppercase or all lowercase. Each sort order for the corresponding column in the ibiDefaultSort property has to be specified in the ibiDefaultSortOrder property. When specifying multiple values, separate each value with comma.

The following properties in the ibiDataGrid component, allow you to change the sort order of the columns.

Property

Description

ibiDefaultSort

Specify the column names, separated by commas, to sort on.

ibiDefaultSortOrder

Specify the corresponding sort order of each column in the ibiDefaultSort property, separated by commas, to be either ascending or descending. The values accepted are: ASCE or DESC (asce or desc, are also acceptable).

Note: If you change the sort order during run time, these values will be overwritten.



Example: Sorting Multiple Columns of Data

In the following example, the grid is sorted in descending order by State column and Category column, then in ascending order by the Sum.COGS column.

<ibi:ibiDataGrid id="maingrid1"
   seturl="http://localhost:8080/ibi_apps/WFServlet?IBIF_ex=xmltest
           &amp;IBIAPP_app=ibiflexdemo"
   ibiUseColumns="REGION,ST,CATEGORY,PRODUCT,Sum.DOLLARS,Sum.COGS"
   ibiGroupBy="REGION,ST,CATEGORY,PRODUCT"
   ibiDefaultSort="ST,CATEGORY,Sum.COGS"
   ibiDefaultSortOrder="DESC,DESC,ASCE"
   x="10" y="34" width="569" height="462" />

The following image shows the resulting output.

Multicolumn data sort



x
Embedding Data Into a SWF

In addition to loading data using a WebFOCUS URL, data can be embedded into a .SWF file that is Adobe Flash Player compatible. Using Flex Builder, you can safely store data in XML directly in your SWF file that is Adobe Flash Player compatible if you wish to avoid loading it at run time.

Flex needs physical access to the XML file, so it needs to be saved into the Flex Builder project \src folder. Typically, the project folder will be located in:

drive:\Documents and Settings\user_id\My Documents\Flex Builder 3\project_name\

You can create an XML representation of data using HOLD FORMAT instead of PCHOLD FORMAT in WebFOCUS and by specifying the XML file saved in the ActionScript section of the source mxml file in your flex application, using the following code:

[EMBED(source="filename.xml")]

where:

filename.xml

Is the source of the data you want to embed directly into the .SWF file that is Adobe Flash Player compatible.

Note: For embedded data, seturl element must be set as internal.



Example: Embedding Data Into a SWF

By using HOLD FORMAT XML instead of PCHOLD FORMAT XML, ggsales.xml is the output of the xmltest procedure.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application creationComplete="init()"
     xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ibi="*">
  <ibi:ibiCanvas x="10" y="10" width="800" height="600">
    <ibi:ibiDataGrid x="20" y="20" height="400" width="600" id="MAIN01">
       <ibi:seturl>internal</ibi:seturl>
    </ibi:ibiDataGrid>
  </ibi:ibiCanvas>
  <mx:Script>
   <![CDATA[
     [Embed(source="ggsales.xml",mimeType="application/octet-stream")]
     public static const XMLFILE:Class;
     public static const embededXML:XML = setConst();
     private static function setConst():XML
     {
       var ba:ByteArray = new XMLFILE() as ByteArray;
       return new XML(ba.readUTFBytes(ba.length));
     }
     private function init():void
     {
       MAIN01.iArray.myXML = embededXML;
     }
   ]]>
  </mx:Script>
</mx:Application>

Note: To embed data in XML files that contain encoding other than UTF-8, you may need to replace the following code from the above sample:

return new XML(ba.readUTFBytes(ba.length));

with:

return new XML(ba.readMultiByte(ba.length,"charSet_Name"));

where

charSet_Name

Is a character set string, with possibilities including "shift-jis" and "big5". For a complete list of supported character sets, please refer to your Adobe documentation.


WebFOCUS