Creating Flex Functions

Flex developers can use ActionScript to extend the functionality of their Flex applications. ActionScript provides flow control and object manipulation features that are not available in MXML to implement custom behavior within their Flex applications.

You first use MXML tags to declare things like the containers, controls, effects, and formatters that your application requires, and to lay out its user interface. An MXML tag corresponds to an ActionScript class and its properties correspond to the properties and events of that class. The functions are defined in mxml files using the <mx:Script> Tag tree or you can create ActionScript files (*.as) separately that will be called into the MXML.

Once the functions are created, assign an ID that will be used to call the function from the Flex components within the MXML tag that calls corresponding classes from mx.* packages. These are declared outside of ibiCanvas. For details on classes, please refer to the Adobe Flex and ActionScript documentation.

Formatting Data with Currency

How to:

Add a Currency Sign

To format numbers with the currency symbol, you need to declare and call a CurrencyFormatter class in MXML so that we can use it in a function. Once defined, you can call CurrencyFormatter in a function that accepts data and sends back the formatted value. Refer to your Adobe Flex documentation for more details on the CurrencyFormatter class. <mx:CurrencyFormatter> needs to be defined outside of the <ibi:ibiCanvas> Tag tree.

Note: You can also alter the format of numbers through the master file. For example, the COGS field is formatted with a dollar sign so you do not need to use the CurrencyFormatter class with it.

Top of page

Procedure: How to Add a Currency Sign

With SalesDashboard.mxml in plain text view, place your cursor after the opening <mx:Application> tag and before the <ibi:ibiCanvas> tag, as shown in the following image.

Add the following code in that section.

<mx:Script>
  <![CDATA[
      import mx.charts.HitData;
      // Data Grid dollar sign format
      private function gridDol(item:Object, column:DataGridColumn):String
      {
       return cf.format(item[column.dataField]);
      }
      // Column Chart DataTip dollar sign format
      public function barTip(h:HitData):String
      {
       var retdols:String;
       retdols = "<B>" + h.item.ST + "\n</B>" +
         "Total Sales: "+ cf.format(h.item["Sum.DOLLARS"]) + "\n" +
         "Total Units: "+ h.item["Sum.UNITS"] + "\n" +
         "Total COGS: "+ cf.format(h.item["Sum.COGS"]);
       return retdols;
      }
      // Pie Chart DataTip dollar sign format
      public function pieTip(h:HitData):String
      {
       var retdols:String;
       retdols = h.item.CATEGORY + "\n<B>" + 
         "Total Sales: "+ cf.format(h.item["Sum.DOLLARS"]) + "</B>";
       return retdols;
      }
  ]]>
</mx:Script>
<mx:CurrencyFormatter id="cf"/>

Currently, the DataGridColumn class is not yet supported in ibiDataGrid. To style the columns of the ibiDataGrid, you will use DataGrid to define the column formats but use ibiDataGrid as a dataProvider. Select the Design tab to switch to layout view.
With the ibiDataGrid inside the Regional Detail Transactions selected, expand the Common tree in the Flex properties pane and set the visible property to false.
Make sure the Components pane is visible by selecting Window then Components.
Expand the Controls folder in the Components pane.
Drag and drop a DataGrid onto the Regional Detail Transactions panel.
Resize the DataGrid so that it fits within the panel.
With the DataGrid component selected, expand the Data tree in the Flex Properties pane and set dataProvider property to {detail.dataProvider}.
Select the Source tab to switch to the plain text view and find the DataGrid you just inserted. Highlight the <mx:DataGridColumn> tags, as shown in the following image.

Delete the highlighted columns and add the following code in their place.

<mx:DataGridColumn headerText="Region" dataField="REGION"/>
<mx:DataGridColumn headerText="State" dataField="ST"/>
<mx:DataGridColumn headerText="Product" dataField="PRODUCT"/>
<mx:DataGridColumn headerText="Dollar Sales" dataField="DOLLARS"
    labelFunction="gridDol"/>
<mx:DataGridColumn headerText="Unit Sales" dataField="UNITS"/>
<mx:DataGridColumn headerText="COGS" dataField="COGS"
    labelFunction="gridDol"/>

The code that will be called to format the ibiPieChart and ibiColumnChart has already been added in the steps above. To call the code that was added, dataTipFunction="pieTip" and dataTipFunction="barTip" must be added to the <ibi:ibiPieChart> and <ibi:ibiColumnChart> tags, respectively.

<ibi:ibiPieChart x="10" y="10" width="350" height="240"
     ibiGroupBy="PRODUCT" ibiParent="detail" ibiUseFiltered="true"
     ibiField="Sum.DOLLARS" ibiNameField="PRODUCT" showDataTips="true">

must be changed to:

<ibi:ibiPieChart x="10" y="10" width="350" height="240"
      ibiGroupBy="PRODUCT" ibiParent="detail" ibiUseFiltered="true"
      ibiField="Sum.DOLLARS" ibiNameField="PRODUCT" showDataTips="true" 
      dataTipFunction="pieTip">

and

<ibi:ibiColumnChart x="10" y="10" width="350" height="240"
     ibiGroupBy="ST" ibiParent="detail" ibiXField="ST"
     ibiYField="Sum.DOLLARS,Sum.UNITS,Sum.COGS" showDataTips="true"
     ibiUseFiltered="true">

must be changed to:

<ibi:ibiColumnChart x="10" y="10" width="350" height="240"
     ibiGroupBy="ST" ibiParent="detail" ibiXField="ST"
     ibiYField="Sum.DOLLARS,Sum.UNITS,Sum.COGS" showDataTips="true"
     ibiUseFiltered="true" dataTipFunction="barTip">

Click the Run button. If prompted, select OK to save and run the project.