作成日: 2015/01/15 最終更新日: 2015/01/15
文書種別
技術情報
詳細
JavaScriptコントロール（Wijmo 5）とjQuery UIウィジェット（Wijmo 3）のシンタックスの違いについて解説します。両者の相違点はこちらでご確認ください。ここでは両者のシンタックスの違いにフォーカスして具体的なコードを用いて説明します。
●Wijmo 5
ECMAScript 5(ES5)をスタイルのプロパティ（getter/setterを持ち、よりオブジェクト指向に近い）を保持するJavaScriptコントロールです。ES5で追加されたObject.definePropertyを活用していることで、よりシンプルかつ生産性の高い（インテリセンスや列挙体の使用による）コーディングが可能です。
●Wijmo 3
jQuery UIウィジェットの拡張のため、jQuery UIウィジェットの構文に従います。
プロパティ
●Wijmo 5(JavaScriptコントロール)
文字列やファンクションの呼び出しをせずに直接プロパティ値を設定することができます。
また、インテリセンスを利用したり（IDE側のサポートが必須）、列挙体を使用することができます。
列挙体の設定
●Wijmo 3(jQuery UIウィジェット)
プロパティは全てoptionsのサブプロパティに文字列として記述する
メソッド
●Wijmo 5(JavaScriptコントロール)
コントロールのインスタンスから直接呼出し可能
●Wijmo 3(jQuery UIウィジェット)
文字列でメソッド名をコール
イベント
●Wijmo 5(JavaScriptコントロール)
イベントプロパティに対してaddHandlerメソッドを使用
●Wijmo 3(jQuery UIウィジェット)
bindを利用してウィジェット名+イベント名を"文字列”で指定
●Wijmo 5
ECMAScript 5(ES5)をスタイルのプロパティ（getter/setterを持ち、よりオブジェクト指向に近い）を保持するJavaScriptコントロールです。ES5で追加されたObject.definePropertyを活用していることで、よりシンプルかつ生産性の高い（インテリセンスや列挙体の使用による）コーディングが可能です。
●Wijmo 3
jQuery UIウィジェットの拡張のため、jQuery UIウィジェットの構文に従います。
プロパティ
●Wijmo 5(JavaScriptコントロール)
文字列やファンクションの呼び出しをせずに直接プロパティ値を設定することができます。
また、インテリセンスを利用したり（IDE側のサポートが必須）、列挙体を使用することができます。
//FlexGridで編集を許可
var myFlexGrid = new wijmo.grid.FlexGrid('#FlexGrid1');
myFlexGrid.isReadOnly = false;
var myFlexGrid = new wijmo.grid.FlexGrid('#FlexGrid1');
myFlexGrid.isReadOnly = false;
列挙体の設定
// selectionModeプロパティに列挙体を使用して値を設定
myFlexGrid.selectionMode = wijmo.grid.SelectionMode.CellRange;
myFlexGrid.selectionMode = wijmo.grid.SelectionMode.CellRange;
●Wijmo 3(jQuery UIウィジェット)
プロパティは全てoptionsのサブプロパティに文字列として記述する
//グリッドウィジェットで編集を許可
$('#WijmoGrid1').wijgrid('option', 'allowEditing', true);
$('#WijmoGrid1').wijgrid('option', 'allowEditing', true);
メソッド
●Wijmo 5(JavaScriptコントロール)
コントロールのインスタンスから直接呼出し可能
//FlexGridをリフレッシュ
myFlexGrid.refresh();
myFlexGrid.refresh();
●Wijmo 3(jQuery UIウィジェット)
文字列でメソッド名をコール
//グリッドウィジェットをリフレッシュ
$('#WijmoGrid1').wijgrid('doRefresh');
$('#WijmoGrid1').wijgrid('doRefresh');
イベント
●Wijmo 5(JavaScriptコントロール)
イベントプロパティに対してaddHandlerメソッドを使用
//FlexGridでセルの編集完了をハンドル
myFlexGrid.cellEditEnded.addHandler(function (sender, args) {
//処理を書く
});
myFlexGrid.cellEditEnded.addHandler(function (sender, args) {
//処理を書く
});
●Wijmo 3(jQuery UIウィジェット)
bindを利用してウィジェット名+イベント名を"文字列”で指定
//グリッドウィジェットでセルの編集完了をハンドル
$('#WijmoGrid1').bind(‘wijgridaftercelledit', function (e, args) {
//処理を書く
});
$('#WijmoGrid1').bind(‘wijgridaftercelledit', function (e, args) {
//処理を書く
});
旧文書番号
81126