エミュレータ画面上に指定されたスタイルの部品を配置するためのオブジェクトです。エミュレータ画面上に部品を配置するには、viewオブジェクトのaddWidgetメソッドに指定する必要があります。
注意
本オブジェクトは、エミュレータと同一ウィンドウで利用してください。
フィールドに配置する部品の設定をするオブジェクトを生成します。
●オブジェクト生成方法
new WsmgrWidget(id, style[, value]) new WsmgrWidget(style[, value])
●パラメータ
パラメータ | 説明 | 省略時の初期値 | |
---|---|---|---|
id | 部品のidを指定 | - | |
style | 部品のスタイルを指定 | 省略できません | |
value | スタイルに従った初期値を指定 | ||
check | true:チェックする | false | |
radio | true:選択する | false | |
image | イメージファイルパスを文字列で指定 | 空文字('') | |
他のスタイルで指定した場合は無効 |
参考
指定されたidは、部品を構成するHTML要素のid属性になります。idを省略した場合は、viewオブジェクトのaddWidgetメソッドで部品を配置した際に自動で割り振られます。
●部品のスタイル
スタイル | 説明 |
---|---|
'button' | ボタンを配置します |
'link' | リンクを配置します |
'calendar' | カレンダーボタンを配置します |
'check' | フィールドにチェックボックスを配置します |
'radio' | フィールドにラジオボタンを配置します |
'select' | リストボックスを配置します |
'assist' | アシスト部品を配置します |
'div' | エミュレータ画面上に任意編集が可能な領域(ブロック要素)を配置します |
'edit' | 入力ボックスを配置します |
'image' | 画像を配置します |
'label' | ラベルを配置します |
'table' | テーブルを配置します |
●リターン値
オブジェクトの生成に成功するとWsmgrWidgetオブジェクトを返します。エラーの場合は、例外をスローします。
●JavaScriptを用いて記述した例
// id指定形式 var button1 = null; try { button1 = new WsmgrWidget("button1", "button"); } catch(e) { // エラー発生時の処理 } // id省略形式 try { button1 = new WsmgrWidget("button"); } catch(e) { // エラー発生時の処理 } // エミュレータ上に部品を配置します dspemu.view.addWidget(button1);
●メソッド一覧
メソッド名 | 機能 |
---|---|
addValue | テーブルデータの追加 |
bind | 部品のイベントを登録 |
getGroup | ラジオボタンのグループ名を取得 |
getId | 部品のidを取得 |
getOption | カレンダーのオプションの取得 |
getPosition | 部品の表示位置、幅を取得 |
getState | チェックボックス、ラジオボタンの状態取得 |
getValue | 部品の表示文字列を取得 |
insertItem | リストボックスの表示データを設定 |
setAlign | 文字列の表示位置を設定 |
setColumnStyle | テーブルの列単位に表示スタイルを設定 |
setGroup | ラジオボタンのグループを設定 |
setOption | カレンダーのオプションを設定 |
setPosition | フィールド先頭からの表示位置、幅を指定 |
setState | チェックボックス、ラジオボタンの状態変更 |
setStyle | 部品の表示スタイルを指定 |
setValue | 部品に設定する文字列を指定 |
テーブル部品にテーブルデータを追加します。
●呼び出し形式
addValue(value)
●パラメータ
パラメータ | 説明 | 省略時の初期値 |
---|---|---|
value | 追加するテーブルデータ(配列/2次元配列)を指定 | 省略できません |
●リターン値
関数の呼び出しに成功するとtrueを返します。エラーが発生した場合はfalseを返します。
●JavaScriptを用いて記述した例
var table = new WsmgrWidget("table"); var data = [['data1', 'data2', 'data3'],[ '123', '456', '789']]; table.addValue(data);
Web部品にイベントを登録
●呼び出し形式
bind(type, func)
●パラメータ
パラメータ | 説明 | 省略時の初期値 |
---|---|---|
type | コールバック関数を登録するイベント名を示す文字列 | 省略できません |
func | コールバック関数を指定 | null |
参考
Web部品で発生するイベントの一覧を記載します。
スタイル | イベントの発生タイミング |
---|---|
'select' | load:リストボックスのロード時 |
'button' | load:ボタンのロード時 |
'link' | load:リンクのロード時 |
'calendar' | load:カレンダーのロード時 |
'check' | load:チェックボックスのロード時 |
'radio' | load:ラジオボタンのロード時 |
'assist' | load:アシスト部品ロード時 |
'div' | load:ブロック要素のロード時 |
'edit' | load:入力ボックスのロード時 |
'image' | load:イメージのロード時 |
'label' | load:ラベルのロード時 |
'table' | load:テーブルのロード時 |
●リターン値
関数の呼び出しに成功するとtrueを返します。エラーが発生した場合はfalseを返します。
●JavaScriptを用いて記述した例
var calendar = new WsmgrWidget("calendar1", "calendar"); calendar.bind("click", onCalendarClick);
ラジオボタンのグループ名を取得
●呼び出し形式
getGroup([column])
●パラメータ
パラメータ | 説明 | 省略時の初期値 |
---|---|---|
column | テーブルの列位置を指定(1~) | テーブル部品の場合は省略できません |
●リターン値
関数の呼び出しに成功するとグループ名を返します。エラーが発生した場合は空文字("")を返します。
●JavaScriptを用いて記述した例
// ラジオボタン var radio1 = new WsmgrWidget("radio1", "radio"); radio1.getGroup(); // テーブルのラジオボタン var table = new WsmgrWidget('table'); table.addValue([['data1', 'data2', 'data3'],[ '123', '456', '789']]); table.setColumnStyle(1, 'radio'); // 1列目をラジオボタンに設定 table.bind('load', function (e) { table.getGroup(1); // 1列目に設定されているグループ名を取得 });
部品のidを取得
●呼び出し形式
getId()
●パラメータ
ありません
●リターン値
関数呼び出しが成功すると設定されているidを返します。設定されていない場合は空文字を返します。
●JavaScriptを用いて記述した例
var button1 = new WsmgrWidget("button1", "button"); var id = button1.getId();
カレンダーオプションを取得します。
●呼び出し形式
getOption()
●パラメータ
ありません
●リターン値
関数の呼び出しに成功すると設定されているカレンダーオプション(オブジェクト)を返します。エラーの場合はnullを返します。
●カレンダーオプション
オプション | 設定値 |
---|---|
disabled | true:カレンダー無効 |
changeMonth | true:月をプルダウンで選択可能とする |
changeYear | true:年をプルダウンで選択可能とする |
showOtherMonths | true:各月の空いているスペースに前月、次月の日を表示 |
selectOtherMonths | true:空いているスペースに表示した日を選択可能とする |
firstDay | 週の始まりの曜日を数値(0~6)で指定 |
numberOfMonths | カレンダーを表示する数を数値で指定 |
minDate | 表示するカレンダーを文字列で指定(初期値:null) |
maxDate | 表示するカレンダーを文字列で指定(初期値はnull) |
dateFormat | カレンダー選択時に取得されるフォーマットを文字列で指定 |
showMonthAfterYear | true:年表示の後に月を表示(初期値) |
dayNamesMin | 曜日の表示名を文字列の配列で指定 |
monthNames | 月の表示名を文字列の配列で指定 |
nextText | 翌月への移動ボタン名を文字列で指定 |
prevText | 前月への移動ボタン名を文字列で指定 |
buttonImage | カレンダーボタンの画像イメージパスを文字列で指定 パス指定が無い場合はサーバのuserconfig配下を参照 |
autoOpen | true:カレンダーを指定された位置に固定表示 |
●JavaScriptを用いて記述した例
var calendar = new WsmgrWidget("calendar1", "calendar"); var option = calendar.getOption(); option.autoOpen = true; // 固定表示
注意
表示中のカレンダー部品には適用されません。
部品の表示位置、幅を取得
●呼び出し形式
getPosition()
●パラメータ
ありません
●リターン値
関数呼び出しが成功すると表示位置、幅のオブジェクトを返します。setPositionで表示位置、幅の指定がない場合、または、エラーの場合はnullを返します。
●JavaScriptを用いて記述した例
var button1 = new WsmgrWidget("button1", "button"); button1.setPosition(10, 15, 5, 1); var position = button1.getPosition(); var row = position.row; // 行位置の取得 var col = position.col; // 桁位置の取得 var width = position.width; // 幅の取得 var height = position.height; // 高さの取得
チェックボックス、ラジオボタンの状態を取得
●呼び出し形式
getState([row, column])
●パラメータ
パラメータ | 説明 | 省略時の初期値 |
---|---|---|
row | テーブルの行位置を指定(1~) | テーブル部品の場合は省略できません |
column | テーブルの列位置を指定(1~) | テーブル部品の場合は省略できません |
●リターン値
チェックされている状態の場合はtrueを返します。チェックしていない場合はfalseが返ります。
●JavaScriptを用いて記述した例
// チェックボックス var check1= new WsmgrWidget("check1", "check"); check1.setPosition(10, 15); check1.getState(); // テーブルのチェックボックス var table= new WsmgrWidget('table'); table.setPosition(10, 15); table.addValue([['data1', 'data2', 'data3'],[ '123', '456', '789']]); table.setColumnStyle(1, 'check'); // 1列目をチェックボックスに設定 table.bind('click', function (e) { var row = e.position.row; var column = e. position.column; if{e.style == 'check' && table.getState(row, column)) { // チェック状態の処理 } });
部品の表示文字列を取得
●呼び出し形式
getValue([row, column])
●パラメータ
パラメータ | 説明 | 省略時の初期値 |
---|---|---|
row | テーブルの行位置を指定(1~) | テーブル部品のセルデータを取得する場合は省略できません |
column | テーブルの列位置を指定(1~) | テーブル部品のセルデータを取得する場合は省略できません |
●リターン値
関数呼び出しが成功すると設定されている文字列を返します。設定されていない場合は空文字を返します。
参考
テーブル部品の場合にパラメータをすべて省略した場合は、テーブルデータを返します。
●JavaScriptを用いて記述した例
// ボタン var button1 = new WsmgrWidget("button1", "button"); var text = button1.getValue(); // テーブルのセルに指定 var table = new WsmgrWidget('table'); table.addValue([['data1', 'data2', 'data3'],[ '123', '456', '789']]); table.setColumnStyle(1, 'calendar'); // 1列目をカレンダースタイルに設定 table.bind('click', function (e) { if(e.style == 'calendar') { var date = table.getValue(e.position.row, e.position.column); } });
リストボックスの表示データを設定します。
●呼び出し形式
insertItem(select, value, checked)
●パラメータ
パラメータ | 説明 | 省略時の初期値 |
---|---|---|
select | リストボックスに表示される値を指定 | 省略できません |
value | リストボックス選択時に取得される値を指定 selectパラメータと同じ値を設定する場合はnullを指定 | selectと同じ値 |
checked | true:選択状態 | false |
参考
複数データにcheckedパラメータ trueを指定した場合は、最後に指定したデータが選択状態になります。
●リターン値
関数呼び出しが成功するとtrueを返します。エラーの場合はfalseを返します。
●JavaScriptを用いて記述した例
var select1= new WsmgrWidget("selsect1", "select"); select1.insertItem("項目1", "1"); select1.insertItem("項目2", "2", true); select1.insertItem("項目3", "3");
文字列の表示位置を設定
●呼び出し形式
setAlign(align[, column, header])
●パラメータ
パラメータ | 説明 | 省略時の初期値 |
---|---|---|
align | 文字列の表示位置を指定 テーブル部品の場合は、nullを指定することで初期値が設定されます | 'auto' |
column | テーブルの列位置を指定(1~) | テーブル部品の場合は省略できません |
header | 表示位置を設定する部分を指定 true:ヘッダー部に指定 | false |
●自動調整一覧
スタイル | 説明 |
---|---|
button | 中央寄せ表示 |
link | 左寄せ表示 |
calendar | 中央寄せ表示(カレンダーボタン表示時) |
check | 左寄せ表示 |
radio | 左寄せ表示 |
assist | 左寄せ表示 |
edit | 左寄せ表示 |
label | 左寄せ表示 |
table | ヘッダー部:中央寄せ表示 |
●リターン値
関数の呼び出しに成功するとtrueを返します。エラーが発生した場合はfalseを返します。
●JavaScriptを用いて記述した例
// ボタン var button1 = new WsmgrWidget('button'); button1.setAlign('left'); // 表示文字列を左寄せ表示 // テーブル var table = new WsmgrWidget('table'); table.addValue([['data1', 'data2', 'data3'],[ '123', '456', '789']]); table.setAlign('left', 1, true); // ヘッダー部の1列目を左寄せ表示 table.setAlign('left', 1, false); // データ部の1列目を左寄せ表示
テーブルの列単位にセルの表示スタイルを設定
テーブルの列(データ部)単位にセルの表示スタイルを設定します。
●呼び出し形式
setColumnStyle(column, style[, option])
●パラメータ
パラメータ | 説明 | 省略時の初期値 |
---|---|---|
column | テーブルの列を指定(1~) ※データ部の範囲で指定してください | 省略できません |
style | 表示スタイルを指定 'link':リンクボタン表示 | スタイル設定の解除 |
option | カレンダーオプションを指定 スタイルがcalendarの場合のみ有効 | 初期値 |
参考
optionパラメータにはgetOptionメソッドで取得したカレンダーオプションが指定できます。
テーブルのcalendarスタイルではbuttonImage、autoOpenオプションの設定は無効です。
radioスタイルを指定したテーブルの列は、グループ名が自動で設定されます。
自動で設定されるグループ名:WsmgrWidgetオブジェクトのid + 列番号
例) idがtable1、radioスタイルを2列目に設定した場合、グループ名は'table12'となります。
●リターン値
関数の呼び出しに成功するとtrueを返します。エラーが発生した場合はfalseを返します。
●JavaScriptを用いて記述した例
var table = new WsmgrWidget('table'); table.addValue([['data1', 'data2', 'data3'],[ '123', '456', '789']]); // linkスタイル table.setColumnStyle(1, 'link'); table.bind('click', function (e) { if(e.style == 'link') { // リンクボタンクリック時の処理 var row = e.position.row; // テーブルの表示行位置 var column = e.position.column; //テーブルの表示列位置 var value = e.value; // イベントが発生したテーブルセルの表示文字列 } }; // edit、calendarスタイル table.setColumnStyle(2, 'edit'); table.setColumnStyle(3, 'calendar'); table.bind('change', function (e) { if(e.style == 'edit') { // 入力内容変更時の処理 } else if(e.style == 'calendar') { // カレンダー選択時または入力内容変更時の処理 var value = e.value; // イベントが発生したcalendarスタイルの選択した日付文字列 // 選択された日付の区切りを yyyy/mm/dd から yyyy-mm-dd に変換する value = value.replace(/[\/]/g, '-'); } });
ラジオボタンのグループ名を設定します。
●呼び出し形式
setGroup(name[, column])
●パラメータ
パラメータ | 説明 | 省略時の初期値 |
---|---|---|
name | 任意のグループ名 | 設定した値をクリア テーブル部品の場合はnullを指定することでクリアされます |
column | グループ名を設定するテーブルの列位置を指定(1~) | テーブル部品の場合は省略できません |
●リターン値
関数の呼び出しに成功するとtrueを返します。エラーが発生した場合はfalseを返します。
●JavaScriptを用いて記述した例
// ラジオボタン var radio1 = new WsmgrWidget("radio1", "radio"); radio1.setGroup("グループ1"); // テーブルのラジオボタン var table = new WsmgrWidget('table'); table.addValue([['data1', 'data2', 'data3'],[ '123', '456', '789']]); table.setColumnStyle(1, 'radio'); // 1列目をラジオボタンに設定 table.setGroup('テーブルグループ1', 1);
カレンダーオプションを設定
●呼び出し形式
setOption(calendar)
●パラメータ
パラメータ | 説明 | 省略時の初期値 |
---|---|---|
calendar | カレンダーの表示オプションをオブジェクトで指定 | 初期設定で表示 |
●リターン値
関数の呼び出しに成功した場合はtrueを返します。エラーの場合はfalseを返します。
●JavaScriptを用いて記述した例
var calendar1 = new WsmgrWidget("calendar1", "calendar"); calendar1.setOption({ showOtherMonths: true, // 各月の空いているスペースに前月、次月の日を表示 selectOtherMonths: true, // 空いているスペースに表示した日を選択可能とする minDate: "-7d", // 7日前まで選択可能とする maxDate: "+7d" // 7日後まで選択可能とする });
エミュレータ画面上の表示位置、幅を指定
●呼び出し形式
setPosition(row, col, width, height)
●パラメータ
パラメータ | 説明 | 省略時の初期値 |
---|---|---|
row | 部品の左上位置のエミュレータの「行」を指定(1~) | 省略できません |
col | 部品の左上位置のエミュレータの「桁」を指定(1~) | 省略できません |
width | 部品の表示幅を「文字」単位で指定(1~) | 省略できません |
height | 部品の表示する高さを「文字」単位で指定(1~) | 省略できません |
参考
スタイルがCalendarでオプションのautoOpenフラグがtrueの場合は、カレンダーの表示領域サイズになります。falseの場合は、ボタンの大きさを指定します。
●リターン値
関数呼び出しが成功するとtrueを返します。エラーの場合はfalseを返します。
●JavaScriptを用いて記述した例
// ボタン var button1 = new WsmgrWidget("button1", "button"); button1.setPosition(10, 15, 5, 1); // テーブル var table = new WsmgrWidget('table'); table.addValue([['data1', 'data2', 'data3'],[ '123', '456', '789']]); table.setPosition(12, 1, -1, -1);
チェックボックス、ラジオボタンの状態を設定
●呼び出し形式
setState(checked[, row, column])
●パラメータ
パラメータ | 説明 | 省略時の初期値 |
---|---|---|
checked | true:選択状態 | false |
row | テーブルの行位置を指定(1~) | テーブル部品の場合は省略できません |
column | テーブルの列位置を指定(1~) | テーブル部品の場合は省略できません |
●リターン値
関数呼び出しが成功するとtrueを返します。エラーの場合はfalseを返します。
●JavaScriptを用いて記述した例
// チェックボックス var check1= new WsmgrWidget("check1", "check"); check1.setPosition(10, 15); check1.setState(true); // テーブルのチェックボックス var table = new WsmgrWidget('table'); table.addValue([['data1', 'data2', 'data3'],[ '123', '456', '789']]); table.setColumnStyle(1, 'check'); // 1列目をチェックボックスに設定 table.setState(true, 1, 2); // 1行2列目をチェック状態に設定
部品の表示スタイルを指定
部品の表示スタイルを指定します。
●呼び出し形式
setStyle(styleOption)
●パラメータ
パラメータ | 説明 | 省略時の初期値 |
---|---|---|
styleOption | 部品の表示オプションをオブジェクトで指定 | 初期値で表示 |
●スタイルオプション
スタイル | 設定値 |
---|---|
'sticky' | 部品を常に表示するかどうかを指定 |
'visible' | 部品の初期表示状態を指定 |
'font-color' | 部品の表示フォントカラーを指定 |
'font-size' | 部品の表示フォントサイズを指定 |
'hasHeader' | テーブル部品のヘッダー表示を指定 |
'multiline' | エディット部品を複数行表示するかを指定 |
'disabled' | 部品の有効化/無効化を指定 |
●リターン値
関数呼び出しが成功するとtrueを返します。エラーの場合はfalseを返します。
●JavaScriptを用いて記述した例
// チェックボックス var button = new WsmgrWidget("button"); var option = { 'sticky' : true, // 部品を常に表示 'font-color' : 'blue', // 文字列に青を指定 'font-size' : 80, // フォントサイズを80%で表示 'disabled' : true // 部品を無効化 } button.setStyle(option);
部品に設定する文字列を指定
●呼び出し形式
setValue(value[, row, column])
●パラメータ
パラメータ | 説明 | 省略時の初期値 |
---|---|---|
value | 部品に文字列を設定 | 空文字("") テーブル部品の場合はテーブルデータを消去 |
row | テーブルの行位置を指定(1~) | テーブル部品のセルに指定する場合は省略できません |
column | テーブルの列位置を指定(1~) | テーブル部品のセルに指定する場合は省略できません |
●リターン値
関数呼び出しが成功するとtrueを返します。エラーの場合はfalseを返します。
●JavaScriptを用いて記述した例
// ボタン var button1 = new WsmgrWidget("button1", "button"); button1.setValue("[ENTER]"); // テーブルのセルに指定 var table = new WsmgrWidget('table'); table.addValue([['data1', 'data2', 'data3'],[ '123', '456', '789']]); table.setColumnStyle(1, 'edit'); // 1列目を入力ボックスに設定 table.setValue('000', 1, 2); // 1行2列目の内容を変更
参考
テーブル部品の表示中に本メソッドを使用して新しいテーブルデータを設定した場合、テーブルセルに設定した値は初期値に戻ります。