Page History
次のソース例は、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
...
{
// 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 )
{
// 円グラフ作成
...
}
//
// '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()
{
...
}
//
// 'onSizeChanged - ウィジェトのサイズ変更時に呼び出し
//
PROTOTYPE.onSizeChanged = function()
{
this.DrawChart();
}
...
}
////////////////
...
//
...
プロパティ
...
//
...
////////////////
...
//
...
// getTitle
...
//
...
PROTOTYPE.getTitle = function()
...
{
...
{
return this.m_Title;
}
//
// setTitle
//
PROTOTYPE.setTitle = function( strTitle )
{
...
}
//
// 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()
{
//メンバのデータ初期化
...
return index;
}
//
// Clear - すべてのデータをクリア
//
PROTOTYPE.Clear = function()
{
// メンバのデータ初期化
this.m_DataTable.removeRows( 0, this.m_DataTable.getNumberOfRows() );
this.DrawChart();
}
//
// 削除 - 円グラフから指定のインデックスを削除
//
// パラメータ:
// - インデックス: 整数
//
PROTOTYPE.Remove = function( index )
{
index -= 1;
...
}
//
// 削除 - 円グラフから指定のインデックスを削除
//
// パラメータ:
// - インデックス: 整数
//
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.
...
{
// 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
...
}
}
//
// AttachEvents
//
PROTOTYPE.AttachEvents = function()
{
var pThis = this;
// イベント: select
google.visualization.events.addListener( this.m_Chart, 'select', function()
...
{
var
...
{
var
selectedItem = pThis.m_Chart.getSelection()[0];
...
if ( selectedItem )
{
...
if ( selectedItem )
{
pThis.fireItemSelected( ( selectedItem.row + 1 ), pThis.m_DataTable.getValue( selectedItem.row, 1 ), pThis.m_DataTable.getValue( selectedItem.row, 0 ) );
...
}
...
}
});
}
...
}
// ロード中 (コールバック待ち)
...
return WIDGET.Loading;
}
...