Wijmo 5

Input入門

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

はじめに

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

  1. AngularJS、Wijmo、およびWijmoのAngularJSディレクティブへの参照を追加します。
  2. appモジュールにWijmo 5ディレクティブを含めます。
    var app = angular.module('app', ['wj']);
  3. データとロジックを提供するコントローラーを追加します。
  4. Wijmo Inputコントロールをページに追加してデータにバインドします。
  5. (オプション)入力コントロールの外観をカスタマイズするCSSを追加します。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/bootstrap.css"/> <link rel="stylesheet" href="css/wijmo.css"/> <link href="css/app.css" rel="stylesheet"/> <script src="scripts/angular.js"></script> <script src="scripts/wijmo.js"></script> <script src="scripts/wijmo.input.js"></script> <script src="scripts/wijmo.angular.js"></script> <script src="scripts/app.js"></script> </head> <body ng-app="app" ng-controller="appCtrl"> <!-- this is the InputNumber directive --> <wj-input-number value="someValue" format="n" step=".5"> </wj-input-number> </body> </html>
// declare app module var app = angular.module('app', ['wj']); // app controller provides data app.controller('appCtrl', function appCtrl($scope) { // value to bind to $scope.someValue = 3.5; });

結果(ライブ):

AutoComplete

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

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

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

<div> <label>itemsSourceのみ</label> <wj-auto-complete items-source="countries"> </wj-auto-complete> </div> <div> <label>itemsSource &amp; cssMatch</label> <wj-auto-complete items-source="countries" css-match="highlight"> </wj-auto-complete> </div>
.highlight { background-color: #ff0; color: #000; }

結果(ライブ):

MultiAutoComplete

MultiAutoCompleteコントロールを使用すると、ユーザーはカスタムオブジェクトまたは単純な文字列を含むリストからアイテムを選択できます。

MultiAutoCompleteコントロールを使用するには、itemsSourceプロパティを、アイテムリストデータを含む配列に設定する必要があります。

maxSelectedItemsプロパティを設定して、ユーザーが選択可能なアイテムの最大数を制限できます。

<div> <label>maxSelectedItems setting is 4</label> <wj-multi-auto-complete control="mac1" items-source="countries" max-selected-items="4" selected-items="selectedCountries" placeholder="国を入力してください"> </wj-multi-auto-complete> <ol> <li ng-repeat="item in selectedCountries"> {​{item}} </li> </ol> </div>
$scope.selectedCountries = ['Belgium', 'Vietnam'];

結果(ライブ):

  1. {{item}}

ComboBox

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

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

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

<div> <label>編集不可</label> <wj-combo-box items-source="countries" is-editable="false"> </wj-combo-box> </div> <div> <label>Editable</label> <wj-combo-box items-source="countries" is-editable="true"> </wj-combo-box> </div>

結果(ライブ):

InputDateとCalendar

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

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

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

これらの基本的なプロパティに加えて、CalendarコントロールではformatItemイベントを使用してカレンダーの特定の日の表示をカスタマイズすることができます。サンプルでは、このイベントを使用して週末と休日の外観をカスタマイズしています。

<div> <label>Bound InputDate with min &amp; max</label> <wj-input-date value="today" min="{​{ minDate | date:'yyyy-MM-dd' }}" max="{​{ maxDate | date:'yyyy-MM-dd' }}"> </wj-input-date> </div> <div> <label>Bound Calendar with min &amp; max</label> <wj-calendar style="width:300px;" value="today" min="{​{ minDate | date:'yyyy-MM-dd' }}" max="{​{ maxDate | date:'yyyy-MM-dd' }}" format-item="formatItem(s,e)"> </wj-calendar> </div> <p> <b>選択された日付: {​{ today | date: 'yyyy/MM/dd' }}</b> </p> <p> <b>有効な範囲: {​{ minDate | date: 'yyyy/MM/dd' }} to {​{ maxDate | date: 'yyyy/MM/dd' }}</b> </p>
// apply special styles to weekends and holidays var today = new Date(); $scope.today = today; $scope.minDate = new Date(today.getFullYear(), 0, 1); $scope.maxDate = new Date(today.getFullYear(), 11, 31); // apply special styles to weekends and holidays $scope.formatItem = function (s, e) { var weekday = e.data.getDay(), holiday = getHoliday(e.data); wijmo.toggleClass(e.item, 'date-weekend', weekday == 0 || weekday == 6); wijmo.toggleClass(e.item, 'date-holiday', holiday); e.item.title = holiday; } // gets the holiday for a given date function getHoliday(date) { var day = date.getDate(), month = date.getMonth() + 1; switch (month + '/' + day) { // simple holidays (fixed dates) case '1/1': return 'New Year\'s Day'; case '6/14': return 'Flag Day'; case '7/4': return 'Independence Day'; case '11/11': return 'Veteran\'s Day'; case '12/25': return 'Christmas Day'; } var weekDay = date.getDay(), weekNum = Math.floor((day - 1) / 7) + 1; switch (month + '/' + weekNum + '/' + weekDay) { case '1/3/1': return 'Martin Luther King\'s Birthday'; // third Monday in January case '2/3/1': return 'Washington\'s Birthday'; // third Monday in February case '5/3/6': return 'Armed Forces Day'; // third Saturday in May case '9/1/1': return 'Labor Day'; // first Monday in September case '10/2/1': return 'Columbus Day'; // second Monday in October case '11/4/4': return 'Thanksgiving Day'; // fourth Thursday in November } return ''; // no holiday today }
.wj-calendar .date-holiday { /* holidays in calendar */ color: #008f22; outline: 2px solid #008f22; } .wj-calendar .date-weekend:not(.wj-state-selected) { /* weekends in calendar */ background-color: #d8ffa6; }

結果(ライブ):

選択された日付: {{ today | date: 'yyyy/MM/dd' }}

有効な範囲: {{ minDate | date: 'yyyy/MM/dd' }} ~ {{ maxDate | date: 'yyyy/MM/dd' }}

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> <label>Bound InputDate with min, max, &amp; format</label> <wj-input-date value="today" min="{​{ minDate | date:'yyyy-MM-dd' }}" max="{​{ maxDate | date:'yyyy-MM-dd' }}" format="yyyy/MM/dd"> </wj-input-date> </div> <div> <label>Bound InputTime with min, max, &amp; step</label> <wj-input-time value="today" step="15" min="09:00" max="17:00"> </wj-input-time> </div> <p> <b>選択された日付と時刻: {​{ today | date: 'yyyy/MM/dd H:mm' }}</b> </p> <div> <label>連結されたInputDateTime(min、max、format、step)</label> <wj-input-date-time value="today" format="yyyy/MM/dd HH:mm" min="{​{ minDate | date:'yyyy-MM-dd' }}" max="{​{ maxDate | date:'yyyy-MM-dd' }}" time-step="15" time-min="09:00" time-max="17:00"> </wj-input-date-time> </div>
var today = new Date(); $scope.today = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 13, 30); $scope.minDate = new Date(today.getFullYear(), 0, 1); $scope.maxDate = new Date(today.getFullYear(), 11, 31);

結果(ライブ):

選択された日付と時刻: {{ today | date: 'yyyy/MM/dd H:mm' }}

InputDateの検証

InputDateコントロールは、formatプロパティで指定された書式を使用して、ユーザーが入力した日付を自動的に解析します。無効な日付は無視され、元の値が保持されます。また、InputDateコントロールは範囲チェックを行い、日付値がminmaxプロパティで指定された値の間にあることを保証します。

しかし多くのケースでは、minmaxプロパティの間のすべての日付が有効であるとは限りません。例えば、予定表アプリケーションで予定を作成するとき、週末、休日、既に多くの予定がある日に予定を作成させない、という動作が考えられます。

これらの場面に対応するために、InputDateとCalendarはitemValidatorプロパティを持っています。このプロパティには、引数として日付が渡され、日付を選択できる場合はtrueを、そうでない場合はfalseを返す関数を設定します。無効な日付は自動的に無効化されて、ユーザーがカレンダーで日付を選択できなく、日付を入力できなくします。

下記の例では、週末とアメリカの祝日に対してfalseを返す関数をitemValidatorに設定しています。また、itemFormatter関数を使用して、祝日を特別なスタイルでツールチップ付きで表示します。

<div class="app-input-group"> <label>週末と休日以外の日付を選択:</label> <wj-input-date value="theDate" item-formatter="itemFormatter" item-validator="itemValidator"> </wj-input-date> </div> <p> <b>選択された日付: {{ theDate | date: 'yyyy/MM/dd' }}</b> </p>
$scope.itemFormatter = function (date, element) { var weekday = date.getDay(), holiday = getHoliday(date); wijmo.toggleClass(element, 'date-weekend', weekday == 0 || weekday == 6); wijmo.toggleClass(element, 'date-holiday', holiday); element.title = holiday; } $scope.itemValidator = function (date, element) { switch (date.getDay()) { case 0: case 6: return false; // no appointments on weekends } if (getHoliday(date)) { return false; // no appointments on holidays } return true; // not a weekend or a holiday, this date is OK } // gets the holiday for a given date function getHoliday(date) { var day = date.getDate(), month = date.getMonth() + 1; switch (month + '/' + day) { // simple holidays (fixed dates) case '1/1': return 'New Year\'s Day'; case '6/14': return 'Flag Day'; case '7/4': return 'Independence Day'; case '11/11': return 'Veteran\'s Day'; case '12/25': return 'Christmas Day'; } var weekDay = date.getDay(), weekNum = Math.floor((day - 1) / 7) + 1; switch (month + '/' + weekNum + '/' + weekDay) { case '1/3/1': return 'Martin Luther King\'s Birthday'; // 3rd Mon/Jan case '2/3/1': return 'Washington\'s Birthday'; // 3rd Mon/Feb case '5/3/6': return 'Armed Forces Day'; // 3rd Sat/May case '9/1/1': return 'Labor Day'; // 1st Mon/Sep case '10/2/1': return 'Columbus Day'; // 2nd Mon/Oct case '11/4/4': return 'Thanksgiving Day'; // 4th Thu/Nov } return ''; // no holiday today }
.wj-calendar .date-holiday { color: #008f22; outline: 2px solid #008f22; }

結果(ライブ):

選択された日付: {{ theDate | date: 'yyyy/MM/dd' }}

ListBox

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

wj-item-templateディレクティブを使用して任意の項目コンテンツを表示することができます。Angularバインディングでは、データ項目とインデックスを表す$item$itemIndex変数を使用することができます。

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

<wj-list-box style="height:150px;width:250px;" items-source="cities" control="listBox"> </wj-list-box> <p> <b>selectedIndex: {​{listBox.selectedIndex}}</b> </p> <p> <b>selectedValue: {​{listBox.selectedValue}}</b> </p>

結果(ライブ):

選択されたインデックス: {{listBox.selectedIndex}}

選択された値: {{listBox.selectedValue}}

2つめの例では、テンプレートを使用してListBoxコントロールを作成する方法を紹介します。項目テンプレートを使用して、画像を含む複雑なレイアウトで項目を表示します。

<wj-list-box style="max-height:300px;width:250px;" items-source="musicians"> <wj-item-template> {​{$itemIndex + 1}}. <b>{​{$item.name}}</b> <div ng-if="$item.photo"> <img ng-src="{​{$item.photo}}" height="100" /> <br /> <a href="https://www.google.ru/#newwindow=1&q=The+Beatles+{​{$item.name}}" target="_blank" style="color:red">go there!</a> </div> </wj-item-template> </wj-list-box>

結果(ライブ):

{{$itemIndex + 1}}. {{$item.name}}

InputNumber

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

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

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

<div> <label>非連結("n0"書式を設定)</label> <wj-input-number format="n0"> </wj-input-number> </div> <div> <label>連結("n"書式を設定)</label> <wj-input-number value="pi" format="n"> </wj-input-number> </div> <div> <label>連結(min = 0、max = 10、step、"c2"書式を設定)</label> <wj-input-number value="price" format="c2" step=".5" min="0" max="10"> </wj-input-number> </div> <div> <label>非連結(プレースホルダ、isRequired="false"を設定)</label> <wj-input-number placeholder="数値を入力..." is-required="false" value="nullVal"> </wj-input-number> </div>
$scope.pi = Math.PI; $scope.price = 3.5; $scope.nullVal = null;

結果(ライブ):

InputMask

InputMaskコントロールは検証と書式設定を可能にします。valuemaskのプロパティを設定することで特定の入力制御を実現します。以下の文字を組み合わせてmaskのプロパティを使用することができます。

0
数字。
9
数字またはスペース。
#
数字、符号、またはスペース。
L
英字。
l
英字またはスペース。
A
英数字。
a
英数字またはスペース。
.
ローカライズされた小数点。
,
ローカライズされた桁区切り。
:
ローカライズされた時刻区切り。
/
ローカライズされた日付の区切り文字。
$
ローカライズされた通貨記号。
<
後続の文字を小文字に変換します。
>
後続の文字を大文字に変換します。
|
大文字小文字の変換を無効にします。
\
任意の文字をエスケープしてリテラルに変えます。
DBCS数字。
DBCSひらがな。
DBCS大文字ひらがな。
DBCSカタカナ。
DBCS大文字カタカナ。
K
SBCSカタカナ。
N
SBCS大文字カタカナ。
任意のDBCS文字。
H
任意のSBCS文字。
その他すべて
リテラル。

以下の例は、InputMask、InputDate、およびInputTimeコントロールでvalueプロパティとmaskプロパティを使用する方法を示します。

<div> <label>社会保障番号</label> <wj-input-mask mask="000-00-0000" title="Mask: 000-00-0000"> </wj-input-mask> </div> <div> <label>電話番号</label> <wj-input-mask mask="(999) 000-0000" title="Mask: (999) 000-0000"> </wj-input-mask> </div> <div> <label>独自のマスクを作成</label> <wj-input-mask value="customMask" is-required="false" placeholder="マスク文字を入力"> </wj-input-mask> <wj-input-mask mask="{​{ customMask }}" title="Mask: {​{ customMask || 'N/A' }}"> </wj-input-mask> </div> <div> <label>マスクが設定されたInputDate</label> <wj-input-date value="maskToday" format="yyyy/MM/dd" mask="9999/99/99" title="Mask: 9999/99/99"> </wj-input-date> </div> <div> <label>マスクが設定されたInputTime</label> <wj-input-time value="maskToday" format="HH:mm" is-editable="true" step="15" mask="00:00 >LL" title="Mask: 00:00 >LL"> </wj-input-time> </div>
$scope.customMask = null; $scope.maskToday = today;

結果(ライブ):

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

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

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

<div> <label>itemClickedイベント</label> <wj-menu header="ファイル" item-clicked="menuItemClicked(s)"> <wj-menu-item><i class="fa fa-file-o"></i>&nbsp;&nbsp;<b>New</b><br><small><i>新しいファイルを作成します</i></small></wj-menu-item> <wj-menu-item><i class="fa fa-folder-open-o"></i>&nbsp;&nbsp;<b>Open</b><br><small><i>既存のファイルまたはフォルダーを開きます</i></small></wj-menu-item> <wj-menu-item><i class="fa fa-save"></i>&nbsp;&nbsp;<b>Save</b><br><small><i>現在のファイルを保存します</i></small></wj-menu-item> <wj-menu-separator></wj-menu-separator> <wj-menu-item><i class="fa fa-times"></i>&nbsp;&nbsp;<b>Exit</b><br><small><i>アプリケーションを終了します</i></small></wj-menu-item> </wj-menu> <wj-menu header="編集" item-clicked="menuItemClicked(s)"> <wj-menu-item><i class="fa fa-cut"></i>&nbsp;&nbsp;<b>Cut</b><br><small><i>現在の選択をクリップボードに移動します</i></small></wj-menu-item> <wj-menu-item><i class="fa fa-copy"></i>&nbsp;&nbsp;<b>Copy</b><br><small><i>現在の選択をクリップボードにコピーします</i></small></wj-menu-item> <wj-menu-item><i class="fa fa-paste"></i>&nbsp;&nbsp;<b>Paste</b><br><small><i>クリップボードの内容をカーソル位置に挿入します</i></small></wj-menu-item> </wj-menu> </div> <div> <label>Commands</label> <wj-menu header="税率の変更"> <wj-menu-item cmd="menuCommand" cmd-param=".25">+ 25%</wj-menu-item> <wj-menu-item cmd="menuCommand" cmd-param=".10">+ 10%</wj-menu-item> <wj-menu-item cmd="menuCommand" cmd-param=".05">+ 5%</wj-menu-item> <wj-menu-item cmd="menuCommand" cmd-param=".01">+ 1%</wj-menu-item> <wj-menu-separator></wj-menu-separator> <wj-menu-item cmd="menuCommand" cmd-param="-.01">- 1%</wj-menu-item> <wj-menu-item cmd="menuCommand" cmd-param="-.05">- 5%</wj-menu-item> <wj-menu-item cmd="menuCommand" cmd-param="-.10">- 10%</wj-menu-item> <wj-menu-item cmd="menuCommand" cmd-param="-.25">- 25%</wj-menu-item> </wj-menu> <wj-input-number value="tax" format="p0" min="0" max="1" step=".05"></wj-input-number> </div>
$scope.tax = .07; $scope.menuItemClicked = function(menu) { alert(menu.header + 'メニューのオプション' + menu.selectedIndex + 'が選択されました。'); }; $scope.menuCommand = { executeCommand: function (arg) { $scope.tax += arg; }, canExecuteCommand: function (arg) { if (wijmo.isNumber(arg)) { var val = $scope.tax + arg; return val >= 0 && val <= 1; } return false; } };

結果(ライブ):

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

Popupコントロールを使用すると、任意のコンテンツをダイアログ(画面の中央に配置される。オーナー要素なし)または「ポップオーバー」(オーナー要素を基準として配置される)として表示できます。

ダイアログ

下のボタンをクリックするとダイアログを表示します。

<p> クリックしてモーダルダイアログを表示: <button type="button" class="btn" ng-click="modalDialog.show()"> クリック </button> </p> <wj-popup control="modalDialog" modal="true" hide-trigger="None"> <ng-include src="'includes/dialog.htm'"></ng-include> </wj-popup> <p> クリックしてモードレスダイアログを表示: <button type="button" class="btn" ng-click="modelessDialog.show()"> クリック </button> </p> <wj-popup control="modelessDialog" modal="false"> <ng-include src="'includes/dialog.htm'"></ng-include> </wj-popup>
// no code required

クリックしてモーダルダイアログを表示:

クリックしてモードレスダイアログを表示:

ポップアップ/ポップオーバー

下のボタンをクリックするとポップオーバーを表示します。

<p> クリックすると開き、マウスが離れると閉じます: <button id="btn1" type="button" class="btn"> クリック </button> </p> <wj-popup class="popover" owner="#btn1" show-trigger="Click" hide-trigger="Blur"> <ng-include src="'includes/popup.htm'"></ng-include> </wj-popup> <p> クリックすると開き、再度クリックすると閉じます: <button id="btn2" type="button" class="btn"> クリック </button> </p> <wj-popup class="popover" owner="#btn2" show-trigger="Click" hide-trigger="Click"> <ng-include src="'includes/popup.htm'"></ng-include> </wj-popup> <p> クリックすると開き、閉じるボタンをクリックすると閉じます: <button id="btn3" type="button" class="btn"> クリック </button> </p> <wj-popup class="popover" owner="#btn3" show-trigger="Click" hide-trigger="None"> <ng-include src="'includes/popup.htm'"></ng-include> </wj-popup>
// no code required

クリックすると開き、マウスが離れると閉じます:

クリックすると開き、再度クリックすると閉じます:

クリックすると開き、閉じるボタンをクリックすると閉じます: