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