Accessibility

Table of Contents

  1. Introduction
  2. Building the Flex 2 stub application
  3. Creating a basic Ajax application using the Nitobi Grid
  4. Putting all the pieces together

Integrating Flex Charting 2 and Nitobi Grid with FABridge

Creating a basic Ajax application using the Nitobi Grid

With our Flex application stub in hand, we can now look at how to integrate a Flex application into an already existing Ajax application using the FABridge to facilitate the transfer of data between the two. As Flex becomes more popular, the merging of Flex and Ajax applications will likely become increasingly prevalent. In particular, the Flex Charting controls enable one to easily create rich data visualizations in the browser with no need for page refreshes. This fits nicely with the Ajax application paradigm.

The starting point of our web application was a simple interface that used two data grids to display a master-detail relationship of sales data as well as enable editing of the sales details. One of the grids contains information about the months of the year and the total sales for the given month, while the other shows the sales details for that month on a sale-by-sale basis.

When a user clicks any row of data in the master grid, sales data for that month is loaded into the detail grid using an asynchronous request for the XML data—all without a page refresh. To enable this use case, the Nitobi Grid 3.22 for PHP is used (although we could just as easily use the ASP or JSP versions), which allows for bidirectional Ajax binding to databases.

Let's look at the steps required to create an Ajax application using the Nitobi Grid.

Basic page setup for the Nitobi Grid

  1. Add xmlns:ntb on the HTML tag to enable support for custom HTML elements that use the ntb namespace prefix.
  2. Include the grid CSS file, which contains a predefined visual skin for the Nitobi Grid.

  3. Invoke nitobi.initGrids(); to bootstrap the grids. In this example, the initialization is triggered by the body onload event:

    <html xmlns:ntb="http://www.nitobi.com/">
<head>
   <link type="text/css" rel="stylesheet" href="styles/nitobi/nitobi.grid.css"/>
</head>
<body onload="nitobi.initGrids();">
<!-- add the grid declaration here -->
</body>
</html>

Adding the Nitobi Grid declarations to the HTML page

The Nitobi Grid uses a simple declarative XML-based markup to define the user interface. This markup sits inline with the rest of the HTML on the page. The master grid in our samples is specified with the PHP script summary_load_data.php as the gethandler attribute, which will be the source for sales data. The grid will call this page through an Ajax request to obtain the data that is displayed in the grid:

<ntb:grid
   id="overviewGrid"
   gethandler="summary_load_data.php"
   width="350"
   height="240"
   mode="livescrolling"
   oncellclickevent="overviewGrid_controller.oncellclick(eventArgs);"
   rowhighlightenabled="true"
   toolbarenabled="false">
   <ntb:columns>
      <ntb:textcolumn label="Period" width="140" xdatafld="Period" editable="false" ></ntb:textcolumn>
      <ntb:numbercolumn label="Monthly Revenue" xdatafld="MonthlyRevenue" editable="false" mask="$###"></ntb:numbercolumn>
      <ntb:textcolumn label="Sales" width="90" xdatafld="SalesCount" editable="false"></ntb:textcolumn>
   </ntb:columns>
</ntb:grid>

In a fashion similar to traditional DOM Events, the oncellclickevent attribute specifies a JavaScript function that will be called when the user clicks a grid cell. Here the oncellclick function of the overviewGrid_controller object is called and a single argument called eventArgs is passed. The eventArgs argument is a Nitobi Grid–specific keyword, which is used in cases where the event is specified as a string literal and the user needs to have access to event information, such as—in this case—the coordinates of the cell that was clicked in the grid.

The various columns of the Grid are specified using the <ntb:columns> element. The columns collection can contain various data types such as text, number, and date. On each defined column, the xdatafld attribute specifies which field of the database table is to be displayed in the given column. In this example, the first column is a textcolumn and the data to be displayed is the month period for which we have sales data. To achieve that, the xdatafld attribute of the column is set to "Period", which corresponds to the database field. Similarly, we declare two more columns to display the total revenue for the month, and the number of sales for the month.

Add the second grid using the following code:

<ntb:grid
  id="detailGrid"
  gethandler="detail_load_data.php"
  savehandler="detail_save_data.php"
  ondatareadyevent="detailGrid_controller.visualizeData();"
  height="240"
  mode="locallivescrolling"
  width="500"
  rowhighlightenabled="true"
  toolbarenabled="true">
  <ntb:columns>
    <ntb:textcolumn label="Date" width="100" xdatafld="OrderDate"></ntb:textcolumn>
    <ntb:textcolumn label="Product Name" width="255" xdatafld="ProductName"></ntb:textcolumn>
    <ntb:numbercolumn label="Price" width="50" xdatafld="ProductPrice" mask="$###.##"></ntb:numbercolumn>
    <ntb:textcolumn label="Qty" width="30" xdatafld="Quantity"></ntb:textcolumn>
    <ntb:textcolumn label=" " width="30" xdatafld="deleteImgUrl" initial="resources/del.gif">
      <ntb:imageeditor></ntb:imageeditor>
    </ntb:textcolumn>
  </ntb:columns>
</ntb:grid>

The grids are ready now.

Page 3 of 4
Previous Page
Next Page