web開発ほとんど初心者の僕が、アホなりにw2uiについていろいろ書いてみるね
（ちなみにQiitaの投稿も初めてだよ）。間違っていてもいじめないで、優しく指摘してあげようね。
自分用に備忘録がてら作ってるから、時間見つけてちょいちょい更新していくつもりなんだ。
- 19.02.27 追記
- formの説明を追加。
- 19.01.22 追記
- gridちょっとだけ追記。データベースとの連携とか。
- 18.11.27 追記
- 見てくれる人増えてきたので、導入方法にCDNだけでも書いておく
- 18.09.22 追記
- tabの設定詳細追加。
- 18.09.12 追記
- sidebarの設定詳細追加。
- キャッツアイの後にアイコンが設定されていない箇所があったので追加
- 18.09.03 追記
- toolbarの設定詳細追加。
- 18.08.22 追記
- ちょっと使い方が適当すぎたので、テーブル形式でもう少し詳しく書くか。しんどいからとりあえずlayoutとgridだけにするか。
#w2uiとは？
海外の頭の良い人が作ったJavaScriptのライブラリだよ。
w2ui home
導入方法
w2uiの本体とCSSはここからダウンロードできるよ。jQuery1.9以上も必要だよ。
w2ui download
手っ取り早く試したい人はＣＤＮ（ネット上にあるやつを読み込ませていただく感じのやつ）で。
CDNで読み込み
<head>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.rc1.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.rc1.min.js"></script>
</head>
UNIX系で開発している人はgithubを参照するか、他サイトの説明の方が分かり易いと思うのでキャッツ・アイ
するね。
概要
いろいろ便利な部品が揃ってるんだね。主に、こんな感じのやつがあるよ。他にもFormやPopupなんかもあるけど追って更新していくね。
| 部品 | 説明 |
|---|---|
| Layout | エリアを区切って管理するやつだね。 大きくは、ヘッダ・本文・フッタで本文が更に左右上下に区切れるよ。 スライダーも標準装備されてるよ。 |
| Grid | スプレッドだね。エクセルみたいなやつ。 自前のデータを表示することも出来るしwebAPIからの取得もできるよ。 検索機能とか列の設定（幅や表示／非表示など）も細かくできるよ。 |
| Toolbar | メニューバーだよ。ボタンを乗せたり、チェックボックス（複数選択）や ラジオボタン／リスト（単一選択）とかも乗せられるよ。アイコンで装飾もできるし、 自前のhtmlも乗せられるね |
| Sidebar | 画面の横に表示するメニューだよ。見出しって捉えてもらってもいいよ。 階層化も簡単だよ。アコーディオンもできてるし、ハンバーガーメニューとしても使えるよ。 |
| Tabs | いわゆるタブだね。これはw2uiのツールの中で唯一使ってないから、 詳しいことはもし使う機会があれば追記するね。 デモを見た感じだと追加・削除とかも簡単にできそうだし、 増やしすぎてもスクロールしてくれるから便利そうだよね。 |
| Forms | 入力フォームだよ。自分でHTML書いたり、編集されたデータの管理しようとすると地味面倒だよね。そんなときはこれを使って楽しちゃおうね。 |
どのツールも w2ui っていうグローバルオブジェクトの中で管理されるよ。 |
|
w2ui.gridUserList みたいな感じで参照するんだなぁ。 |
|
| あ、言い忘れたけどキャッツ・アイっていうのは割愛をもじったんだ。説明するくらいなら、やめとけばいいのにね。 |
ツール別の所見
Layout
こういうやつのことだよ。
使い方
<div id="testLayout"></div>
$('#testLayout').w2layout({
name: 'testLayout',
panels: [
{ type: 'top', size: 50, content: 'top', resizable: false },
{ type: 'left', size: 200, content: 'left', hidden: true },
{ type: 'main', content: 'main' }
]
});
【layout本体の設定】
| プロパティ | 説明 |
|---|---|
| name | 後からこのレイアウトの設定を変えたり、操作をしたりする時に識別するための名前だよ。 上の例だとw2ui.testLayoutってことだね。 デベロッパーツールのコンソールとかで確認してみると楽しいよ。 |
| panels | 使うパネルの分だけオブジェクト配列を定義するんだ。詳細は後述するよ。 |
【panelsの設定】
| プロパティ | 説明 |
|---|---|
| type | 設定したパネルが表示されるよ。topとかleftとかmainとかだね。 |
| content | パネルに表示する中身だね。ここに直接htmlとかも書けそうだけど、 僕は後から外部ファイルを読み込む方法で使ったよ。 |
| hidden | trueにすると最初は非表示（たたまれた状態）になるよ。 ハンバーガーメニューみたいな使い方ができそうだね。 |
| resizable | falseにすると境界線がドラッグ移動できなくなるよ。 trueがデフォルトだけど、iOSは対応してないよ。 |
- 入れ子（上図の黄色いエリア）もできるから、より複雑なレイアウトを組みたいときも大丈夫だね。
Grid
こういうやつのことだよ。
使い方
$('#testGrid').w2grid({
name: 'grid',
columns: [
{ field: 'fname', caption: 'Full Name', size: '200px',
render: function (record, index, column_index) {
var html = '<div>'+ record.fname + ' ' + record.lname + '</div>';
return html;
}
},
{ field: 'email', caption: 'Email', size: '100%' }
],
records: [
{ recid: 1, fname: 'John', lname: 'Doe', email: 'john@gmail.com' },
{ recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'stuart@gmail.com' },
{ recid: 3, fname: 'Jin', lname: 'Franson', email: 'jin@gmail.com' },
...
]
});
【grid本体の設定】
※す～～ごく多いので、経験上良く使ったものだけ
| プロパティ | 説明 |
|---|---|
| name | layoutと同じだからキャッツアイするよ。 |
| columns | 列数分の定義（オブジェクト）を配列で設定するよ。これは直感的だよね。詳細は後述するね。 |
| records | データ（行）をオブジェクト配列で設定するよ。オブジェクトの中身は単純で 「フィールド名:値」の繰り返しだね。通常は外部ファイルやデータベースの値を 表示すると思うから、ここに直接書いていくことは少ないはずだね。 |
| recid | w2uiは通常、「recid」っていう名前の列でレコードを特定しているらしいんだけど、 データベースと繋いだ時とかはこれだと都合悪いこともあるよね。 だから代わりにキーになるフィールド名を指定できるみたい。 ちょっと難しいけどがんばって理解してね。 |
| limit | 大量のデータを扱う場合に、一気に表示すると「おっせんだけど！」ってなるよね。 だから１回に読み込む行数を決めるんだよ。 ページの下までいくとここで設定された数の行数を追加で読み込むよ。 autoLoadってやつをfalseにすると手動で読み込むこともできるよ。 |
| show | いろいろなものを表示するかどうか決めるよ。詳細は後述。 |
| sortData | 既定でソートしたい場合に設定するよ。 |
| searchData | 既定で表示データのフィルターをかけたい場合に設定するよ。 |
| url | サーバからデータを取得する場合に、APIのアドレスを設定するよ。例えば付属しているサンプルのPHPを指定する場合だと'server/php/users.php'って感じ。 |
| postData | API渡したいパラメータがある場合は、ここに指定できるよ。オブジェクトで設定してね。 |
【columnsの設定】
こっちも良く使うものだけ
| プロパティ | 説明 |
|---|---|
| field | 列を特定するためのキーになるよ。 |
| caption | 列名だよ。別に難しくないよね。 |
| size | 列幅だよ。これも簡単。 |
| hidden | trueにすると非表示になるよ。 |
| sortable | trueにすると、列タイトルクリックでソートできるようになるよ。 |
| searchable | trueにするとw2ui標準の検索機能で、検索対象列になるよ。 |
| render | 表示内容をHTMLで指定できるよ。正確にはHTML文字を返す関数を指定するんだけど、function(record)みたいに引数を指定できて、ここから現在レコードの値が拾えるよ。上の例でも使ってるから見てくりしょり。使うタグとかに特に制限は無さそうだから、 可能性は無限大だね。 |
| editable | 一覧から直接データ編集させる時に使うらしいけど、僕は使ったこと無いんだ。 なぜかって？iOSの動作が微妙だったからだよ（結局renderで実装したんだ）。 |
| frozen | trueにすると、固定表示列になるよ。要は横にスクロールしても 常に表示されるようになるってことだね。ちなみにこれもiOSだと、 いっこく堂みたいになるんだよなぁ～。遅れてくるってことだね。 |
【showの設定】
気になったやつだけ
| プロパティ | デフォルト | 説明 |
|---|---|---|
| header | false | trueでgrid自体のタイトルが表示されるよ。 |
| toolbar | false | trueでw2ui標準のgrid用ツールバーが表示されるよ。 |
| footer | false | trueでgridの下にフッタが表示されるよ。 フッタには現在行や合計行数とかが表示されるよ。 |
| columnHeaders | true | falseにすると列名が非表示になるよ。使うことは少ないだろうね。 |
| lineNumbers | false | trueで行番号列が左端に表示されるようになるよ。 |
- 列の設定は、既定値からの変更も当選可能だよ。設定した内容はLocalStrageに保存されるみたい。データベースとかに保存して、どのマシンからアクセスしても復元したい場合は、工夫が必要だよ。ちなみに僕は以下のような感じで対応したよ（onStateSaveで保存、onRenderで復元）。もっと良い方法があったら教えてね。
$('#elementId').w2grid({
onStateSave: function(event) {
//設定をデータベースに保存する処理
//event.stateに設定が入ってるから、stringifyで文字列にして保存しておくといいよ。
},
onRender: function(event) {
//設定をデータベースから取得して復元する処理
//↑で保存しておいたデータをparseして、gridのstateRestore()っていうメソッドに渡すと復元できるよ。
}
ちなみに列の幅とか並び順の変更は、iOSではできないから必要ならそれも自前で作る必要があるよ。僕も作ったけどしんどかったなー。
- 表示するデータは、
json形式で設定するんだよ。もちろんPHPとかで、データベースの情報を受け取ることだってできるよ。gitからダウンロードすると言語別にサンプルが入っているから、参考にしてみて。
$('#elementId').w2grid({
// urlプロパティにAPIのパスを設定
url: 'server/php/users.php'
- 検索機能は２種類標準搭載されてるよ。１つ目はツールバー上のテキストに直接入力して、全ての列を対象に検索する方法、２つ目は「search」メニューから対象列や検索方法を指定する方法だよ。前者は一見便利っぽいけど検索方法は前方一致固定なんだ。これを無理やり部分一致にする方法も考えたよ。サンプル載せておくね。
$('#elementId').w2grid({
// 検索時はここに飛んでくる
onSearch: function(event) {
// 'all'だと全列対象検索
if(event.searchField === 'all'){
// 検索方法を全部'contains'(部分一致)に変更
for(var i = 0; i < event.searchData.length; i++){
event.searchData[i].operator = 'contains';
}
}
}
- 残念な点として、１つの列に対する複数の条件が指定できないよ（「好物」が
りんごまたはスイカまたは`八朔"みたいな検索）。がんばれば何とかできるけど、結構な苦労を強いられるよ。あとは空の検索やnot検索もできないけど、これもがんばれば何とかなるよ。
イベント
イベントもオプションに登録するよ。例えばクリックした時のイベント登録はこうだよ。
$('#elementId').w2grid({
onClick: function (event) {
// ここにクリック時にさせたい処理を書いてね
console.log(event);
}
後からイベントだけ登録もできるよ。そんときはこう。
w2ui.gridName.on('click', function(event) {
// ここにクリック時にさせたい処理を書いてね
console.log(event);
});
他にもいろいろなイベントが定義できるよ。詳細は公式ドキュメント見てね。
【公式ドキュメント】
データベースとの連携
オプションの説明でも書いたけど、APIのurlを設定する必要があるよ。
$('#elementId').w2grid({
url: 'server/php/users.php'
}
サーバ側のプログラムは、幾つかサンプルがあるからベースにするといいよ。PHPのサンプルを抜粋するよ。
users.php
<?php
// この２ファイルは、データベース操作用のphpだよ。付属しているからそのまま使うよ。
require("w2db.php");
require("w2lib.php");
// データベースソフトを指定するよ。postgresqlとmysqlだけサポートされているから、それ以外のDBを使うなら自分で↑の２ファイルを改造してね。
$db = new dbConnection("mysql");
// データベースの接続情報だよ。パラメータは、「IP,ユーザ,パスワード,db名,ポート」だね。
$db->connect("127.0.0.1", "root", "", "test", "3306");
// パラメータの'cmd'はw2uiが勝手にセットするよ。
switch ($_REQUEST['cmd']) {
// 'get'の他に'delete'と'save'も用意されているけど割愛するね。
case 'get':
// パラメータに'recid'が指定されていたら、id指定で取得するよ。多分編集フォームとかで対象レコードを拾うのに使うのかな。
if (array_key_exists('recid', $_REQUEST)){ // if true , then is a 'get-record' only one record with recid
$sql = "SELECT userid, fname, lname, email, login, password
FROM users
WHERE userid = ".$_REQUEST['recid'];
$res = $w2grid->getRecord($sql);
}
// 通常はこちらの分岐で処理されるはずだよ。gridの検索機能を使うと、~search~っていう識別子に条件が入るよ。
// 列タイトルをクリックするとソートされるんだけど、その場合は~sort~っていう識別子に列名と並べ方(asc or desc)が入るよ。
else{
$sql = "SELECT * FROM users
WHERE ~search~ ORDER BY ~sort~";
$res = $w2grid->getRecords($sql, null, $_REQUEST);
}
// 呼び出し元に検索結果を返すよ。形式は{status: 処理結果('success' or 'error'), message: エラーだった場合のメッセージ, total: 取得件数, records: 取得したレコードの連想配列} だよ。
$w2grid->outputJSON($res);
break;
呼び出すパラメータと、返すデータの形式さえ合わせれば自分で作ることもできるよ。用意されているサンプルだけだとできることが限られるので、知識がある人はいろいろ試してみてね。
Toolbar
こういうやつのことだよ。
使い方
$('#elementId').w2toolbar({
name: 'toolbar',
items: [
{ type: 'button', id: 'item2', text: 'Button', icon: 'fa-wrench' },
{ type: 'break' },
{ type: 'check', id: 'item3', text: 'Check 1', icon: 'fa-star', checked: true },
{ type: 'check', id: 'item4', text: 'Check 2', icon: 'fa-heart' },
{ type: 'break' },
{ type: 'radio', id: 'item5', group: '1', text: 'Radio 1', icon: 'fa-star' },
{ type: 'radio', id: 'item6', group: '1', text: 'Radio 2', icon: 'fa-heart', checked: true },
{ type: 'spacer' },
{ type: 'button', id: 'item7', text: 'Button', icon: 'fa-star' }
],
onClick: function (event) {
console.log('Target: '+ event.target, event);
}
});
【toolbar本体の設定】
ルートの設定は基本的に２つだけだね。itemsの設定がメインだよ。
| プロパティ | 説明 |
|---|---|
| name | layoutと同じだからキャッツアイするよ。 |
| items | ツールバーに乗せるコントロールの定義（オブジェクト）を配列で設定するよ。 |
【itemsの設定】
| プロパティ | 説明 |
|---|---|
| type | コントロールタイプの設定だよ。設定できる候補は後述しておくね。 |
| id | 使ったことないけど、多分どのコントロールが操作されたのかとかを、 識別するために使うのかな？ |
| text | ツールバー上に表示される名称だよ。 |
| group | ラジオボタンを複数グループ使いたい場合に、識別するためのグループ名を設定してね。 |
| img | 画像を設定したい時に使うよ。使ったこと無いけど、cssのクラス名を設定するらしいよ。 |
| icon | アイコンだよ。アイコンフォント名を指定するよ。 |
| checked | typeにcheckやradioとかを設定した時に、既定でチェックできるよ。 |
| count | 項目の右側に設定した数が表示されるよ。typeをmenu-checkとかにした時に、 幾つ選択されているか表示したりするんだね。やり方は公式のデモにサンプルがあるよ。 |
| items | メニューの入れ子をする場合に、ここに子供の設定をするよ。 |
| html | typeをhtmlにした時に、実際のhtmlを設定するよ。 |
| disabled | 表示するけど選択できないようになるよ。利用権制御とかに使えそうだね。 |
| selected | typeをmenu-checkにした時に、idを配列(例：[1,2])で 指定すると既定で選択されるよ。 |
【typeの設定】
| type | 説明 |
|---|---|
| button | これは説明要らないよね。ボタンだよ。 |
| check | チェックボックスだよ。複数選択させたい時に使うよ。 |
| radio | ラジオボタンだよ。単一選択させたい時に使うよ。 |
| drop | クリックすると吹き出しが出てきて、ここにhtmlを表示できるみたい。 ヘルプとかで使うイメージかな。 |
| menu | メニューを入れ子にできるよ。メニューの設定は別プロパティのitemsに設定してね。 |
| menu-check | チェックボックスをメニュー形式にするよ。チェックされた項目はレ点が付くよ。 レ点が付いている項目をもう一度選ぶと…そうだね。選択解除されるね。 メニューの設定は別プロパティのitemsに設定してね。 |
| menu-radio | ラジオボタンをメニュー形式にするよ。こちらもチェックされた項目にレ点が付くよ。 メニューの設定は別プロパティのitemsに設定してね。 |
| break | この設定の前後の間に縦線が入るよ。項目の間に仕切りを入れたいときに使おうね。 |
| spacer | この設定の前後の間に、スペースがあくよ。 |
| html | 自分でhtml書きたいな～って時に使うよ。htmlは別プロパティの「html」に記載してね |
| color | カラーピッカーが表示されるよ。アイコンは背景色のイメージ（□）だよ。 |
| text-color | こっちもカラーピッカーが表示されるよ。アイコンは文字のイメージ（Aa）だよ。 colorとの違いはアイコンだけだよ。 |
- 僕はそんなにややこしい使い方しなかったから、特に難しいところは無かったよ。チェックボックスとかの状態（ＯＮ／ＯＦＦ）を拾う時は
w2ui.toolbar_name.get(id).checkedって感じで。
Sidebar
こういうやつのことだよ。
使い方
$('#elementId').w2sidebar({
name: 'sidebar',
nodes: [
{ id: 'level-1', text: 'Level 1', img: 'icon-folder', expanded: true, group: true,
nodes: [ { id: 'level-1-1', text: 'Level 1.1', icon: 'fa-home' },
{ id: 'level-1-2', text: 'Level 1.2', icon: 'fa-star' },
{ id: 'level-1-3', text: 'Level 1.3', icon: 'fa-star-empty' }
]
},
{ id: 'level-2', text: 'Level 2', img: 'icon-folder', expanded: true, group: true,
nodes: [ { id: 'level-2-1', text: 'Level 2.1', img: 'icon-folder', count: 3,
nodes: [
{ id: 'level-2-1-1', text: 'Level 2.1.1', icon: 'fa-star-empty' },
{ id: 'level-2-1-2', text: 'Level 2.1.2', icon: 'fa-star-empty', count: 67 },
{ id: 'level-2-1-3', text: 'Level 2.1.3', icon: 'fa-star-empty' }
]},
{ id: 'level-2-2', text: 'Level 2.2', icon: 'fa-star-empty' },
{ id: 'level-2-3', text: 'Level 2.3', icon: 'fa-star-empty' }
]
}
]
});
【sidebar本体の設定】
大体toolbarと同じだね。こっちもnodesの設定がメインだよ。
| プロパティ | 説明 |
|---|---|
| name | layoutと同じだからキャッツアイするよ。 |
| flatButton | trueにすると「<<」こういうアイコンが右上に出てきて、メニューを 折りたためるようになるよ。非表示になるんじゃなくて、ほっそくなって残るイメージだね。 しかもアイコンが設定されていれば、アイコンだけ表示されるよ。俗に言うハンバーガーメニューってやつだな。 |
| nodes | 表示したいメニューをオブジェクト配列で設定してね。 階層がある場合は更にnodesプロパティをぶら下げていく感じさ。 |
【nodesの設定】
| プロパティ | 説明 |
|---|---|
| id | 例えばクリックイベントとかで、どのノードがクリックされたのか識別するキーだよ。 ユニークじゃないとイヤよ。 |
| text | 表示されるメニュー名だよ。 |
| img | アイコンだよ。アイコンフォント名を指定するよ。iconっていうプロパティもあるんだけど、 違いが良くわかんない。 |
| nodes | 子供のメニューを定義するよ。指定方法はこの階層と同じだよ（オブジェクト配列）。 |
| group | trueにすると、メニューを束ねるノードになるよ。良く分からないよね。 要は選択するためのメニューじゃなくて、それらを束ねるためのノードになる。ってことだよ。 ん？これでも良く分からないね。公式サイトにサンプルあるから見てね。てへっ。 |
| selected | trueにしたら、そのメニューがデフォルトで選択状態になるよ。 |
| expanded | trueにしたら…。そうだね。子供のメニューがあると、デフォルトで展開されるってことだね。 |
| count | 項目の右側に設定した数が表示されるよ。用途は自由だけど子供のメニューがあるときに その数を出したりするのかな。 |
| collapsible | falseにしたら、子供メニューがある場合に開け閉めできなくなるよ。使い道なさそうだね。 |
| disabled | 表示するけど選択できないようになるよ。利用権制御とかに使えそうだね。 |
- これはすごく使い易かったな。設定は
nodesの階層がそのままメニューの階層になるから、直感的に使えるよね。JavaScriptから動的に作るのも楽チンだったよ。
Tabs
こういうやつのことだよ。
使い方
$('#elementId').w2tabs({
name: 'tabs',
active: 'tab1',
tabs: [
{ id: 'tab1', text: 'Tab 1' },
{ id: 'tab2', text: 'Tab 2' },
{ id: 'tab3', text: 'Tab 3' },
....
]
});
【tab本体の設定】
| プロパティ | 説明 |
|---|---|
| name | layoutと同じだからキャッツアイするよ。 |
| active | デフォルトで選択しておくタブのidを設定してね。未設定だと多分一番左だろうね。 |
| tabs | 必要なタブの数だけオブジェクト配列で設定してね。 |
【tabs本体の設定】
大体toolbarと同じだね。こっちもnodesの設定がメインだよ。
| プロパティ | 説明 |
|---|---|
| id | tabを識別するキーだよ。idなんだからユニークにしないとね。 |
| text | 表示されるタブ名だよ。 |
| hidden | trueにすると表示されないよ。利用権制御とかに使えそうだね。 |
| disabled | 表示するけど選択できないようになるよ。こっちも利用権制御とかに使えそうだね。 |
| closable | trueにすると×が表示されて、タブを消せるんだね。 |
- タブの中身を特定の要素とリンクするような機能は無さそう。公式サイトのサンプルでも、
①自前でdivを作ってidをタブのidと合わせておく
②タブクリックのタイミングで元々アクティブなやつを隠す
③クリックされたidのdivを表示
みたいにやってるね。 - タブの増減も簡単だね。こんな感じだよ。
// 追加
w2ui.tabs.add({ id: '新しいタブのid', text: '表示テキスト' });
// 削除
w2ui.tabs.animateClose('消したいタブのid');
Forms
こういうやつのことだよ。
使い方
$('#form').w2form({
name : 'form',
header : 'Auto-Generated Form',
url : 'server/post',
fields : [
{ field: 'first_name', type: 'text', required: true, html: { caption: 'First Name', attr: 'style="width: 300px"' } },
{ field: 'last_name', type: 'text', required: true, html: { caption: 'Last Name', attr: 'style="width: 300px"' } },
{ field: 'comments', type: 'textarea', html: { caption: 'Comments', attr: 'style="width: 300px; height: 90px"' } }
],
actions: {
'Save': function (event) {
console.log('save', event);
this.save();
},
'Clear': function (event) {
console.log('clear', event);
this.clear();
}
}
});
【form本体の設定】
| プロパティ | 説明 |
|---|---|
| name | layoutと同じだからキャッツアイするよ。 |
| header | タイトルバーに表示する文言だね。〇〇入力画面とか。 |
| url | フォームを送信する際のapiパスを設定らしいよ。this.save()を実行する時の送信先だよ。僕は自前でAjax使ってapi呼び出ししたから、使わなかったな。 |
| formHTML | フォーム用のＨＴＭＬを自分で書く場合に、直接記述するよ。 |
| formURL | フォーム用のＨＴＭＬを別ファイルで作っておいて、ここにパスを指定できるよ。自分でHTMLを書く場合は、formHTMLかこちらから選んでね。 |
| fields | 必要な入力コントロールの数だけオブジェクト配列で設定してね。 |
【fields本体の設定】
| プロパティ | 説明 |
|---|---|
| name | フィールドの名前だよ。入力コントロールと合わせる必要があるよ。 |
| type | 入力コントロールの種類を設定するよ。 |
| options | typeがlistとかの時に、選択候補を設定するよ。{items: ['inu', 'saru', 'kiji']}こういう感じだよ。 |
| required | 必須入力にしたい場合はTrueにしてね。 |
| html | 僕は使ったことないんだけど、HTMLを自動生成してほしいときは、ここにいろいろ指定するらしいよ。 |
- 単純な画面レイアウトであれば、HTMLを自分で書かなくても設定だけで自動生成してくれるよ。編集データも内部変数と自動で同期してくれるから便利だよ。その代わりある程度のルールがあって、それに則る必要があるから少し学習が必要になるからね。変更した内容はw2ui.form名.getChanges()で取得できるよ。
苦しかったこと
作ったものがシングルページアプリケーションだったから、Gridとかは一旦裏に隠しておいたものを再表示した時にheightが0になったりしてパニックを起こしたんだ。LayoutにonResizeイベントがあるから、そことかをうまく使って再描画（resizeメソッド）を走らせる必要があったよ。他にもっとスマートなやり方がありそうだな～。
ドキュメントが英語だから、苦手な人は最初は翻訳して片言の日本語を解読することになるよ。日本語化してくれてるサイトもあるみたいだよ（世の中には良い人がいるんだね）。リンク貼るときのルールとか良く分からないから、自分で探してみてね。でも英語のヘルプも、ずーっと見てると使われている単語もそんなに種類ないし、慣れてくるんだね。今後のためにがんばって読めるようになると良いよ。
まとめ
最初はGridだけ使うつもりだったんだけど、他のツールもデモを見てたら使えそうだな～ってなって、結局ほとんどのツールを使うことになったよ。
とても便利で使い易いライブラリだけど、カスタマイズして使う場合はそれなりに苦労するよ。どのライブラリも同じだと思うけど、標準提供されている機能から外れたことをしようとしたら、トリッキーなロジックを入れないといけないよ。可能な限り標準提供されている機能で代替するのがおススメの使い方だと思うけどな。
まぁ偉そうなこと言ってるけど、他のライブラリは使ってないから了見は狭いよ。
