14.1.3 ウィジェットの例

次のソース例は、Visual LANSA で提供される Google 円グラフのサンプル・ウィジェットのコピーです。

function( PROTOTYPE, WIDGET )

{

  //--------------------------------------------------------------------------

  // Google 円グラフが完成した場合のみ、このグラフをロードして Widget 完了

  //--------------------------------------------------------------------------

  google.load( 'visualization', '1', { packages:["corechart"], callback:WIDGET.Finalize } );

 

  //--------------------------------------------------------

  // WIDGET-インターフェース 関数 (VL-ランタイムからの呼び出し)

  //--------------------------------------------------------

 

  //

  // 'onCreateInstance' - LANSA がこのクラスのインスタンスを作成時に呼び出し

  //

  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' - LANSA がこのクラスのインスタンスのビジュアル表現作成時に呼び出し

  //

  // パラメータ:

  //

  // - parentDiv : このコントロールのコンテナとして作成された Divこのサイズとスタイルは RDMLX でコントロール。

  //               コンテンツは以下の JavaScript でコントロール

  //

  PROTOTYPE.onRealizeControl = function( parentDiv )

  {

    // 円グラフ作成

    this.m_Chart = new google.visualization.PieChart( parentDiv );

 

    // イベント・ハンドラーを連結

    this.AttachEvents();

 

    // 描画の準備完了

    this.DrawChart();

  }

 

  //

  // 'onSizeChanged - ウィジェトのサイズ変更時に呼び出し

  //

  PROTOTYPE.onSizeChanged = function()

  {

    this.DrawChart();

  }

 

  ////////////////

  // プロパティ //

  ////////////////

 

  //

  // getTitle

  //

  PROTOTYPE.getTitle = function()

  {

    return this.m_Title;

  }

 

  //

  // setTitle

  //

  PROTOTYPE.setTitle = function( strTitle )

  {

    this.m_Title = strTitle;

 

    this.DrawChart();

  }

 

  /////////////

  // メソッド //

  /////////////

 

  //

  // Insert - データを円グラフに挿入

  //

  // パラメータ:

  // - 値: 整数

  // - キャプション: 文字列

  //

  // 戻りタイプ : 整数

  //

  PROTOTYPE.Insert = function( iValue, strCaption )

  {   

    var index = this.m_DataTable.addRow( [ strCaption, iValue ] );

 

    this.DrawChart();

 

    return index;

  }

 

  //

  // Clear - すべてのデータをクリア

  //

  PROTOTYPE.Clear = function()

  {

    //メンバのデータ初期化

    this.m_DataTable.removeRows( 0, this.m_DataTable.getNumberOfRows() );

 

    this.DrawChart();

  }

 

  //

  // 削除 - 円グラフから指定のインデックスを削除

  //

  // パラメータ:

  // - インデックス: 整数

  //

  PROTOTYPE.Remove = function( index )

  {

    index -= 1;

 

    if ( ( index >= 0 ) && ( index < this.m_DataTable.getNumberOfRows() ) )

    {

      this.m_DataTable.removeRow( index );

 

      this.DrawChart();

    }

  }

 

  //////////////////////

  // ヘルパー機能 //

  //////////////////////

 

  //

  // 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;

 

    // イベント: 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 ) );

      }

    }); 

  }

 

  // ロード中 (コールバック待ち)

  return WIDGET.Loading;

}