Wijmo

Input入門

このページでは、WijmoのInputコントロールを使い始める方法を示します。

はじめに

InputコントロールをKnockoutJSアプリケーションで使用する手順は以下のとおりです。

  1. KnockoutJS、Wijmo、およびWijmoのKnockoutJSバインディングへの参照を追加します。
  2. データとロジックを提供するビューモデルを追加します。
  3. Wijmo Inputコントロールをページに追加してデータにバインドします。
  4. (オプション)入力コントロールの外観をカスタマイズするCSSを追加します。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <link rel="stylesheet" type="text/css" href="css/wijmo.css" /> <link rel="stylesheet" href="styles/app.css" /> <script src="scripts/knockout.js" type="text/javascript"></script> <script src="scripts/wijmo.js" type="text/javascript"></script> <script src="scripts/wijmo.input.js" type="text/javascript"></script> <script src="scripts/wijmo.knockout.js" type="text/javascript"></script> <script src="scripts/bindings/appBindings.js"></script> <script src="scripts/app.js"></script> <script src="scripts/viewmodels/appVM.js"></script> </head> <body> <!-- this is the InputNumber binding --> <div data-bind="wjInputNumber: { value: price, format: 'n', step: .5 }"></div></body> </html>
// create and apply application view model function viewModel1() { // value to bind to this.price = ko.observable(3.5); ............. }; (function () { ko.applyBindings(new viewModel1()); })();

結果(ライブ):

AutoComplete

AutoCompleteコントロールは、入力テキストに従った項目リストの絞り込みとドロップダウンリストからの値の直接選択が可能なオートコンプリートコントロールです。

AutoCompleteコントロールを使用するには、少なくともitemsSourceプロパティにデータの配列を設定して項目リストに内容を格納する必要があります。AutoCompleteコントロールにはその他にも、コントロールの動作を変更するためにいくつかのプロパティがあります(cssMatchプロパティなど)。cssMatchプロパティでは、検索語に一致する部分のハイライトに使用するCSSクラスを指定できます。

以下の例では、itemsSourceプロパティで文字列の配列を使用してAutoCompleteコントロールの項目リストにデータを読み込んでいます。候補のリストを表示するには、下のAutoCompleteコントロールに「ab」または「za」と入力してください。

<div class="app-input-group"> <label>itemsSourceのみ</label> <div data-bind="wjAutoComplete: {itemsSource: countries}"></div> </div> <div class="app-input-group"> <label></label> <div data-bind="wjAutoComplete: { itemsSource: countries, cssMatch: 'highlight'}"></div> </div>
.highlight { background-color: #ff0; color: #000; }

結果(ライブ):

ComboBox

ComboBoxコントロールはAutoCompleteコントロールによく似ていますが、入力テキストに従って候補リストを提示するのではなく、入力テキストを自動的に補完してその項目を選択します。

AutoCompleteコントロールと同様に、少なくともComboBoxのitemsSourceプロパティにデータの配列を設定して項目リストに内容を格納する必要があります。また、isEditableプロパティによってComboBoxを編集可能にするかどうかを指定することもできます。isEditableプロパティは、ユーザーがComboBoxの項目リストに存在しない値を入力できるかどうかを決定します。

以下の2つのComboBoxは、上のAutoCompleteコントロールと同じデータソースにバインドされています。最初のComboBoxのisEditableプロパティはfalseに設定されており、2つ目のComboBoxのisEditableプロパティはtrueに設定されています。

<div class="app-input-group"> <label>編集不可</label> <div data-bind="wjComboBox: { itemsSource: countries, isEditable: false}"> </div> </div> <div class="app-input-group"> <label>Editable</label> <div data-bind="wjComboBox: { itemsSource: countries, isEditable: true }"> </div> </div>

結果(ライブ):

InputDateとCalendar

InputDateコントロールはドロップダウンカレンダーによって日付を編集および選択できるコントロールで、ユーザーが間違った値を入力することを防ぎます。InputDateのドロップダウンカレンダーは別個のコントロールとして開発されており、InputDateコントロールとは無関係に単独で使用することもできます。

InputDateとCalendarはどちらも、コントロールの動作を変更するためにいくつかのプロパティを指定します。最もよく使用されるプロパティを以下に示します。

以下の例は、これらのプロパティの使用方法を示します。

<div class="app-input-group"> <label>連結されたInputDate(min、max)</label> <div data-bind="wjInputDate: { value: today, min: minDate, max: maxDate }"> </div> </div> <div class="app-input-group"> <label>連結されたCalendar(min、max)</label> <div data-bind="wjCalendar: { value: today, min: minDate, max: maxDate }" style="width:300px;"> </div> </div> <p> <b>選択された日付: <span data-bind="text: format(today, 'd')"></span></b> </p> <p> <b>有効な範囲: <span data-bind="text: format(minDate, 'd')"></span> to <span data-bind="text: format(maxDate, 'd')"></span></b> </p>
var today = new Date(); this.today = ko.observable(today); this.minDate = ko.observable(new Date(today.getFullYear(), 0, 1)); this.maxDate = ko.observable(new Date(today.getFullYear(), 11, 31));

結果(ライブ):

選択された日付:

有効な範囲: to

InputDate、InputTime、InputDateTimeコントロール

InputTimeコントロールはInputDateコントロールに似ており、JavaScript日付の時刻部分を変更できます。InputTimeコントロールは、InputDateコントロールと多くの同じプロパティを共有しています(formatminmaxvalueなど)。InputTimeコントロールにはその他にstepプロパティがあり、ドロップダウンリストの項目の時間間隔(分単位)を指定できます。

InputDateTimeコントロールはInputDateとInputTimeコントロールを組み合わせて、日付と時刻を設定できます。 InputDateTimeコントロールは2つのドロップダウンを持ち、日付をカレンダーで、時刻をリストで選択します。

以下の例は、InputTimeコントロールをInputDateコントロールと組み合わせて使用する方法を示します。 これらのコントロールは連携して同じJavaScriptのDateオブジェクトを編集し、それぞれが担当するDateTimeの部分のみを更新します。

また、以下の例は、InputDateTimeコントロールがJavaScriptのDateオブジェクトの日付と時刻の両方を編集することを示します。

<div class="app-input-group"> <label>連結されたInputDate(min、max、format)</label> <div data-bind="wjInputDate: { value: today, min: minDate, max: maxDate, format: 'yyyy/MM/dd' }"> </div> </div> <div class="app-input-group"> <label>連結されたInputTime(min、max、step)</label> <div data-bind="wjInputTime: { value: today, step: 15, min: '07:00', max: '19:00' }"> </div> </div> <div class="app-input-group"> <label>連結されたInputDateTime(min、max、format、step)</label> <div data-bind="wjInputDateTime: { value: today, format: 'yyyy/MM/dd HH:mm', min: minDate, max: maxDate, timeStep: 15, timeMin: '09:00', timeMax: '17:00' }"> </div> </div> <p> <b>選択された日付と時刻: <span data-bind="text: format(today, 'G')"></span></b> </p>
var today = new Date(); this.today = ko.observable(today); this.minDate = ko.observable(new Date(today.getFullYear(), 0, 1)); this.maxDate = ko.observable(new Date(today.getFullYear(), 11, 31));

結果(ライブ):

選択された日付と時刻:

ListBox

ListBoxコントロールには項目のリストが表示されます。ユーザーはマウスとキーボードを使用してこのリストから項目を選択できます。AutoCompleteおよびComboBoxコントロールと同様に、このコントロールを使用するためにはListBoxのitemsSourceプロパティを指定する必要があります。

以下の例では、ListBoxコントロール内の項目を選択できます。コントロールのselectedIndexプロパティとselectedValueプロパティがその下に表示されます。

<div class="app-input-group"> <div data-bind="wjListBox: { itemsSource: cities, control: listBox, selectedIndex: listBoxIndex, selectedValue: listBoxValue }" style="height:150px;width:250px;"> </div> </div> <p> <b>selectedIndex: <span data-bind="text: listBoxIndex"></span></b> </p> <p> <b>selectedValue: <span data-bind="text: listBoxValue"></span></b> </p>
this.listBox = ko.observable(undefined); this.listBoxIndex = ko.observable(undefined); this.listBoxValue = ko.observable(undefined);

結果(ライブ):

選択されたインデックス:

選択された値:

InputNumber

InputNumberコントロールでは、数値を編集できます。ユーザーが無効なデータを入力することを防ぎ、オプションで編集時に数値を書式設定します。InputNumberはプロパティを指定せずに使用できますが、通常はvalueプロパティを使用して何らかのデータにバインドします。

valueプロパティに加えて、InputNumberコントロールにはコントロールの動作を変更するために以下のようなプロパティがあります。

以下の例は、これらのプロパティの使用方法を示します。

<div class="app-input-group"> <label>非連結("n0"書式を設定)</label> <div data-bind="wjInputNumber: { format: 'n0' }"></div> </div> <div class="app-input-group"> <label>連結("n"書式を設定)</label> <div data-bind="wjInputNumber: { value: pi, format: 'n' }"> </div> </div> <div class="app-input-group"> <label>連結(min = 0、max = 10、step、"c2"書式を設定)</label> <div data-bind="wjInputNumber: { value: price, format: 'c2', step: .5, min: 0, max: 10 }"> </div> </div> <div class="app-input-group"> <label>非連結(プレースホルダ、isRequired="false"を設定)</label> <div data-bind="wjInputNumber: { placeholder: 'enter a number...', isRequired: false, value: null }"> </div> </div>
this.pi = ko.observable(Math.PI); this.price = ko.observable(3.5);

結果(ライブ):

Menu

Menuコントロールを使用すると、クリック可能な項目を含むシンプルなドロップダウンリストを作成できます。Menuの項目は直接定義するか、ComboBoxと同様にitemsSourceプロパティを使用して定義できます。Menuに表示するテキストを指定するには、headerプロパティを設定します。

Menuコントロールでユーザー選択を処理する方法は2通りあります。各メニュー項目にコマンドを指定する方法と、itemClickedイベントを処理する方法です。itemClickedイベントとは異なり、コマンドは以下の2つのメソッドを実装するオブジェクトです。

以下の例は、この両方の使用方法を示します。

<div class="app-input-group"> <label>itemClickedイベント</label> <div data-bind="wjMenu: { header: 'File', itemClicked: menuItemClicked}"> <span data-bind="wjMenuItem: {}"><i class="fa fa-file-o"></i>  <b>New</b><br><small><i>新しいファイルを作成します</i></small></span> <span data-bind="wjMenuItem: {}"><i class="fa fa-folder-open-o"></i>  <b>Open</b><br><small><i>既存のファイルまたはフォルダーを開きます</i></small></span> <span data-bind="wjMenuItem: {}"><i class="fa fa-save"></i>  <b>Save</b><br><small><i>現在のファイルを保存します</i></small></span> <span data-bind="wjMenuSeparator: {}"></span> <span data-bind="wjMenuItem: {}"><i class="fa fa-times"></i>  <b>Exit</b><br><small><i>アプリケーションを終了します</i></small></span> </div> <div data-bind="wjMenu: { header: 'Edit', itemClicked: menuItemClicked}"> <span data-bind="wjMenuItem: {}"><i class="fa fa-cut"></i>  <b>Cut</b><br><small><i>現在の選択をクリップボードに移動します</i></small></span> <span data-bind="wjMenuItem: {}"><i class="fa fa-copy"></i>  <b>Copy</b><br><small><i>現在の選択をクリップボードにコピーします</i></small></span> <span data-bind="wjMenuItem: {}"><i class="fa fa-paste"></i>  <b>Paste</b><br><small><i>クリップボードの内容をカーソル位置に挿入します</i></small></span> </div> </div> <div class="app-input-group"> <label>Commands</label> <div data-bind="wjMenu: { header: '税率の変更' }"> <span data-bind="wjMenuItem: { cmd: menuCommand, cmdParam: .25 }">+ 25%</span> <span data-bind="wjMenuItem: { cmd: menuCommand, cmdParam: .10 }">+ 10%</span> <span data-bind="wjMenuItem: { cmd: menuCommand, cmdParam: .05 }">+ 5%</span> <span data-bind="wjMenuItem: { cmd: menuCommand, cmdParam: .01 }">+ 1%</span> <span data-bind="wjMenuSeparator: {}"></span> <span data-bind="wjMenuItem: { cmd: menuCommand, cmdParam: -.01 }">- 1%</span> <span data-bind="wjMenuItem: { cmd: menuCommand, cmdParam: -.05 }">- 5%</span> <span data-bind="wjMenuItem: { cmd: menuCommand, cmdParam: -.10 }">- 10%</span> <span data-bind="wjMenuItem: { cmd: menuCommand, cmdParam: -.25 }">- 25%</span> </div> <div data-bind="wjInputNumber: { value: tax, format: 'p0', min: 0, max: 1, step: .05 }"></div> </div>
this.tax = ko.observable(.07); this.menuItemClicked = function (data, sender, args) { alert('You\'ve selected option ' + sender.selectedIndex + ' from the ' + sender.header + ' menu!'); }; this.menuCommand = { executeCommand: function (arg) { self.tax(self.tax() + arg); }, canExecuteCommand: function (arg) { if (wijmo.isNumber(arg)) { var val = self.tax() + arg; return val >= 0 && val <= 1; } return false; } };

結果(ライブ):

  新規作成
新しいファイルを作成します
  開く
既存のファイルまたはフォルダーを開きます
  保存
現在のファイルを保存します
  終了
アプリケーションを終了します
  切り取り
現在の選択をクリップボードに移動します
  コピー
現在の選択をクリップボードにコピーします
  貼り付け
クリップボードの内容をカーソル位置に挿入します
+ 25% + 10% + 5% + 1% - 1% - 5% - 10% - 25%