14.1.3 Example Widget

This example source is a copy of the Google Pie Chart example widget which is shipped with Visual LANSA.

function( PROTOTYPE, WIDGET )
{
  //--------------------------------------------------------------------------
  // LOAD GOOGLE PIECHART ONLY WHEN THAT IS COMPLETED CAN WE FINALIZE THE WIDGET
  //--------------------------------------------------------------------------
  google.load( 'visualization', '1', { packages:["corechart"], callback: WIDGET.Finalize } );
 
  //--------------------------------------------------------
  // WIDGET-INTERFACE FUNCTIONS (CALLED FROM THE VL-RUNTIME)
  //--------------------------------------------------------
 
  //
  // 'onCreateInstance' - gets called when LANSA creates an instance of this class.
  //
  PROTOTYPE.onCreateInstance = function()
  {
    // Create the datatable
    this.m_DataTable = new google.visualization.DataTable();
 
    this.m_DataTable.addColumn( 'string', 'Caption' );
    this.m_DataTable.addColumn( 'number', 'Value' );
  }
  
  //
  // 'onRealizeControl' - gets called when LANSA creates a visual representation of an instance of this class.
  //
  // Parameters:
  //
  // - parentDiv : the div that's been created as a container for this control. Its size and style are controlled by
  //               RDMLX, its content by the JavaScript below.
  //
  PROTOTYPE.onRealizeControl = function( parentDiv )
  {
    // Create the piechart
    this.m_Chart = new google.visualization.PieChart( parentDiv );
 
    // Hook up event handlers
    this.AttachEvents();
 
    // We're ready to draw it
    this.DrawChart();
  }
 
  //
  // 'onSizeChanged - gets called when the widget changes size.
  //
  PROTOTYPE.onSizeChanged = function()
  {
    this.DrawChart();
  }
 
  ////////////////
  // Properties //
  ////////////////
 
  //
  // getTitle
  //
  PROTOTYPE.getTitle = function()
  {
    return this.m_Title;
  }
 
  //
  // setTitle
  //
  PROTOTYPE.setTitle = function( strTitle )
  {
    this.m_Title = strTitle;
 
    this.DrawChart();
  }
 
  /////////////
  // Methods //
  /////////////
 
  //
  // Insert - Insert data into the piechart
  //
  // Parameters:
  // - Value: Integer
  // - Caption: String
  //
  // Return Type: Integer
  //
  PROTOTYPE.Insert = function( iValue, strCaption )
  {   
    var index = this.m_DataTable.addRow( [ strCaption, iValue ] );
 
    this.DrawChart();
 
    return index;
  }
 
  //
  // Clear - Clears all data
  //
  PROTOTYPE.Clear = function()
  {
    // Initialize member data
    this.m_DataTable.removeRows( 0, this.m_DataTable.getNumberOfRows() );
 
    this.DrawChart();
  }
 
  //
  // Remove - Removes the given index from the piechart
  //
  // Parameters:
  // - Index: Integer
  //
  PROTOTYPE.Remove = function( index )
  {
    index -= 1;
 
    if ( ( index >= 0 ) && ( index < this.m_DataTable.getNumberOfRows() ) )
    {
      this.m_DataTable.removeRow( index );
 
      this.DrawChart();
    }
  }
 
  //////////////////////
  // Helper functions //
  //////////////////////
 
  //
  // DrawChart
  //
  PROTOTYPE.DrawChart = function()
  {
    if ( this.m_Chart )
    {
      // Draw it using our data.
      this.m_Chart.draw( this.m_DataTable,
      {
        title          : this.m_Title,
        legend         : 'none',
        pieSliceText   : 'label',
        backgroundColor: 'transparent'
      });
    }
  }
 
  //
  // AttachEvents
  //
  PROTOTYPE.AttachEvents = function()
  {
    var pThis = this;
 
    // EVENT: select
    google.visualization.events.addListener( this.m_Chart, 'select', function()
    {
      var
        selectedItem = pThis.m_Chart.getSelection()[0];
 
      if ( selectedItem )
      {
        pThis.fireItemSelected( ( selectedItem.row + 1 ), pThis.m_DataTable.getValue( selectedItem.row, 1 ), pThis.m_DataTable.getValue( selectedItem.row, 0 ) );
      }
    }); 
  }
 
  // We're still loading (waiting for a callback)
  return WIDGET.Loading;
}