Webix を使ってみた

# はじめに

HTML＋JavaScript でアプリ開発するにあたって、UI ライブラリをどうするか悩みました。独自に CSS＋JavaScript で書ければいいのですが、無理なので既存のライブラリを使うことにします。jQuery UI や jQuery Mobile に始まり、Twitter Bootstrap 、Adobe Topcoat 、Intel App Framework など試しました。モバイルアプリは Onsen UI がよさそうです。デスクトップアプリは Titanium 、Sencha Ext JS 、Kendo UI など見てみました。その上で Webix が気に入りました。

参考 [サクサク書けて柔軟なカスタマイズが可能な、UIフレームワーク「Webix」 | #GUNMAGISGEEK](http://shimz.me/blog/webix/3698)

# Webix とは

Webix は、クロスブラウザの（主要ウェブブラウザで動作する）JavaScript による UI ウィジェット（UI パーツ）のライブラリです。モバイルおよびデスクトップのウェブアプリケーションを HTML5 のフレームワークを用いて高速に構築します。

公式 [JavaScript Framework & HTML5 UI Library for Web App Development-Webix](http://webix.com/)

# Webix を使ってみた

・Webix 3.1

## インストールする

以下のページからダウンロードします。
[Download a JavaScript UI Widgets Library Webix Based on HTML5 and CSS3 Standards](http://webix.com/download/)

以下のファイルをワークスペースにコピーします。

```
lib
    webix.css
    webix.js
```

使用します。

```html:
    <link rel="stylesheet" href="lib/webix.css" type="text/css"> 
    <script src="lib/webix.js" type="text/javascript"></script>  
```

## コンポーネントを生成する

Webix の UI コンポーネントは JavaScript コードだけで生成できます。

```html:
<script>
    webix.ui({
        // 設定を書く
    });
</script>
```

通常は以下の初期化ブロックに記述します。

```js:
webix.ready(function(){
    webix.ui({
        ...
    });
});
```

初期化ブロックはこんなものがありますが

```js:
① $(document).ready(function(){ ....
② $(window).load(function(){ ....
③ webix.ready(function(){ ....
```

①②③の順番で呼出されます。

## 生成したコンポーネントを操作する

生成したコンポーネントを操作するためにオブジェクト変数にセットします。

```js:
var ○○ = webix.ui({
...
```

あるいは

```js:
webix.ui({
    id:'○○',
...
var ○○ = $$('○○');
```

ここまで
[Start Coding with Webix - Webix Docs](http://docs.webix.com/tutorials__start_coding.html)
[Introduction to Webix - Webix Docs](http://docs.webix.com/tutorials__quick_start_details.html)

## コンポーネントの種類

Webix は多くの UI コンポーネントを用意しています。
[JavaScript Feature-rich UI Widgets - Webix](http://webix.com/widgets/)
[UI Components - Webix Docs](http://docs.webix.com/desktop__components.html)

```view``` プロパティでコンポーネントの種類を指定します。

```js:
webix.ui({
    view:'○○',
```

## コンポーネントのサイズと位置

Webix のコンポーネントは基本的に親要素の領域一杯に表示されます。

```js:
<script>
    webix.ui({
    ....
```
これはブラウザのウィンドウ一杯に表示されます。

```container``` プロパティに HTML タグを指定して、その領域一杯に表示させることもできます。

```html:
<div id='○○'></div>
....
<script>
    webix.ui({
        container:'○○',
```

コンポーネントのサイズを指定することもできます。

```js:
webix.ui({
    width:○○px, height:○○px,
```

参照 [Sizing components - Webix Docs](http://docs.webix.com/desktop__dimensions.html)

## コンポーネントの配置

コンポーネントを配置するには、以下のコンポーネントをコンテナにします。

* Layout
* Form
* Multiview
* Accordion
* Scrollview
* Carousel

参照 [Building App Architecture - Webix Docs](http://docs.webix.com/desktop__building_app_architecture.html)

### コンポーネントを配置する

縦に並べる

```js:
webix.ui({
    rows:[
        {
            ...
        },
        {
            ...
        },
```
![](http://docs.webix.com/media/desktop/hor_layout.png)

横に並べる     

```js:       
webix.ui({
    cols:[
        {
            ...
        },
        {
            ...
        },
```
![](http://docs.webix.com/media/desktop/vert_layout.png)

配置をネストする

```js:
webix.ui({
    rows:[
        {
            ...
        },
        {
            cols:[
                {
                    ...
                },
```

![](http://docs.webix.com/media/desktop/layout-resizer.png)

参照 [Layout and Resizer - Webix Docs](http://docs.webix.com/desktop__layout.html)

### いろいろなコンポーネントの配置

コンテナになるコンポーネントによって、子を指定するプロパティが違います。

```js:
webix.ui({
    view:'form',
    elements:[
        { .... },
```

```js:
webix.ui({
    view:'scrollview',
    scroll:'y',
    body:{
        rows:[
            { .... },
```

```js:
webix.ui({
    view:'carousel',
    cols:[
        { .... },
```

```js:
webix.ui({
    view:'multiview',
    cells:[
        { .... },
``` 

```js:       
webix.ui({
    view:'tabview',
    cells:[
        { .... },
```

## ヘッダをつける

アプリにはヘッダをつけますね。

```js:
webix.ui({
    rows:[
        {
            type:'header', view:'template', template:'○○', 
        },
```

![](http://docs.webix.com/media/desktop/header_tpl.png)

参照 [Adding Headers to Components | Webix Docs](http://docs.webix.com/desktop__setting_headers.html)

## ツールバーを作る

ツールバーを作ります。ツールバーにはボタンを配置します。

```js:
        { 
            view:'toolbar', 
            elements:[
                { view:'button', value:"○○", width:○○ },
                ....
            ],
        }
```

![](http://docs.webix.com/media/tutorials/toolbar.png)

## 入力フォームを作る

入力フォームを作ります。入力フォームには入力コンポーネントを配置します。

```js:
        {
            view:'form', 
            elements:[
                { view:'text', placeholder:"...."},  
                ....
            ]
        },
```

![](http://docs.webix.com/media/tutorials/form.png)

## リストを作る

リストを作ります。リストにはデータを表示します。

```js:
        {
            view:'list',
            template:"#◆◆# - #●●#)",
            data:[
                { id:○, ◆◆:"◇◇◇◇◇◇◇◇◇◇", ●●:○○ },
                ....
            ]
        }
```

![](http://docs.webix.com/media/tutorials/list.png)

表示するデータは ```data``` プロパティに指定します。オブジェクトの配列です。
表示書式を ```template``` プロパティに指定します。

ここまで [Setting Components - Webix Docs](http://docs.webix.com/tutorials__basic_app_1.html)

## コンポーネントのプロパティを変更する

コンポーネントの設計時にプロパティを指定できます。

```js:
{
    view:'○○', id:'◇◇',
    ○○: ●●,
```

コンポーネントのプロパティは実行時に設定することもできます。

```js:
$$('◇◇').define(○○, ●●);
```
```js:
$$('◇◇').define({
    ○○, ●●
});
```

実行時にコンポーネントのプロパティを取得したり変更したいことがあります。

```js:
var ◆◆ = $$('◇◇').config.○○;
```
```js:
$$('◇◇').config.○○ = ●●;
```

参照 [Changing Properties of Components - Webix Docs](http://docs.webix.com/desktop__redefinition.html)

コンポーネントを実行時に表示したり非表示したりしたいことがあります。

```js:
$$('◇◇').show();
```
```js:
$$('◇◇').hide();
```

参照 [Managing Visibility of Components - Webix Docs](http://docs.webix.com/desktop__visibility.html)

コンポーネントを実行時に使用可にしたり不可にしたりしたいことがあります。

```js:
$$('◇◇').enable();
```
```js:
$$('◇◇').disable();
```

参照 [Disabling/Enabling Components - Webix Docs](http://docs.webix.com/desktop__disabling.html)

## イベントハンドラ

コンポーネントにイベントハンドラをセットするには ```attachEvent()``` メソッドを使います。

```js:
$('○○').attachEvent('on◇◇', function(){
    ....
});
```

コンストラクタでイベントハンドラをセットすることもできます。

```js:
webix.ui({
    on:{
        on◇◇, function(){
            ....
        },
    },
```

参照 [Event Handling - Webix Docs](http://docs.webix.com/desktop__event_handling.html)

セットできるマウスイベントはこんなものがあります。
[MouseEvents - Webix Docs](http://docs.webix.com/api__refs__mouseevents.html)

よく使うのはクリックイベントですね。

```js:
webix.ui({
    on:{
        onItemClick(id, e, node){
```
```js:
webix.ui({
    click:function(id, e, node){
    ....
```

コンポーネントが生成された時点で実行されるイベントハンドラです。

```js:
webix.ui({
    ready:function(){
    ....
```

保持しているデータのイベントにハンドラをセットすることもできます。

```js:
webix.ui({
    scheme:{
        $init:function(obj){
        ....
        $update:function(obj){
        ....
```

## データのロード

Webix のコンポーネントはデータを保持して、そのデータを表示することができます。

保持するデータはコンポーネントの定義に記述することができます。

```js:
webix.ui({
    data:[
        { id:○, ◇◇:○○○○ },
        { id:○, ◇◇:○○○○ },
        ...
    ],
```
```js:
var ○○ = [
    { id:○, ◇◇:○○○○ },
    { id:○, ◇◇:○○○○ },
    ...
];
webix.ui({
    data:○○,
```

データを外部リソースから読込することもできます。

```json:○○.json
[
    { id:○, ◇◇:○○○○ },
    { id:○, ◇◇:○○○○ },
    ....
]
```
```js:○○.js
webix.ui({
    url:"○○.json",
    datatype:'json',
```

参照 [Data Loading - Webix Docs](http://docs.webix.com/desktop__data_loading.html)

## データのバインドと同期

２つのコンポーネント（例えばフォームとリスト）のデータをバインドします。

```js:
{
    view:'form', id:'○○',
    elements:[
    ....
},
{
    view:'list', id:'◇◇', select:true,
    data:[
    ....
}
....
$$('○○').bind($$('◇◇'));
```
リストで行を選択すると、その内容がフォームに表示されるようになります。

```js:
{
    view:'button',
    click:function(){
        $$('○○').save();
    }
}
```
フォームの ```save()``` メソッドを実行するとフォームの内容がリストに反映されます。

２つのコンポーネント（例えばリストとテーブル）のデータを同期します。

```js:
{
    view:'list', id:'○○',
    ....
},
{
    view:'datatable', id:'◇◇',
    editable:true,
    ....
}
....
$$('○○').sync($$('◇◇'));
```
テーブルで変更した内容がリストに自動的に反映されるようになります。

参照 [Data Binding and Syncing - Webix Docs](http://docs.webix.com/desktop__data_binding.html)

## チュートリアル

ここまで基本が分かると、以下のチュートリアルは容易に理解できると思います。
[Quick Start](http://webix.com/quick_start/)
↓
[Views and Layouts](http://webix.com/quick-start/introduction.html#!/1)
[Forms and Controls](http://webix.com/quick-start/controlsguide.html#!/1)
[DataTable (Grid)](http://webix.com/quick-start/datatable.html#!/1)