[Webix]Formコンポーネント入門

web formコンポーネント

Webix Advent Calendar 2014 ８日目の記事です。

間が少し空きましたが、今回はFormコンポーネントを使ってみます。
Webixのフォーム昨日は、他のコンポーネントにデータを束縛して連動させたり、変更内容から差分だけを取り出すなど様々な機能があるのですが、とりあえず基本的なところだけを。
いづれまた詳しい内容を掲載するつもりです。

基本

ログインフォームを作ります。
基本的には、Webixのレイアウトシステムに合わせた形でFormパーツを設置していくだけです。
formビューのelemetsの中にパーツを設置していくことで、入力された値の取得などが簡単に行えます。

webix.ui({
    view:"form", 
    id:"log_form",
    width:300,
    elements:[
        { view:"text", label:"メール"},    // input text 
        { view:"text", type:"password", label:"パスワード"}, // input password
        { margin:5,
            cols:[
                //ボタン
                { view:"button", value:"ログイン" , type:"form" },
                { view:"button", value:"キャンセル" }
            ]
        }
    ]
});

webix.ui({

view:"form",

id:"log_form",

width:300,

elements:[

{ view:"text", label:"メール"}, // input text

{ view:"text", type:"password", label:"パスワード"}, // input password

{ margin:5,

cols:[

//ボタン

{ view:"button", value:"ログイン" , type:"form" },

{ view:"button", value:"キャンセル" }

]

}

]

});

example

パーツ

Webixにはデータピッカーやカラーピッカーなどのコンポーネントが用意されていて、簡単に扱うことができます。

webix.ui({ view:"form",width:300,
    elements:[
        {rows:[
            {
                rows:[
                    {view:"text", label:"テキスト"},
                    {view:"checkbox", label:"チェックボックス" ,labelWidth:110},
                    { view:"radio", name:"gender", label:"ラジオボタン", labelWidth:110,
                        value:"man", //初期選択値
                        options:[   //選択肢
                            { value:"男", id:"man" },
                            { value:"女", id:"woman" }
                        ]
                    },              
                    { view:"select", name: "country", label:"セレクトボックス",
                        options:[
                            { value:"日本", id: "JP" },
                            { value:"アメリカ", id: "US" },
                            { value:"イタリア", id: "IT"},
                            { value:"ドイツ", id: "DE"},
                        ]
                    },
                    {view:"datepicker", label:"日時"},
                    { view:"colorpicker", label:"カラー", name:"color", value:"#ffaadd" },
                    { view:"counter", label:"スピンボックス", align:"center",  labelWidth:110},
                    { view:"textarea" , height:100, label:"テキストエリア", labelPosition:"top" }
                ]
            },
            {view:"button", value:"ボタン"}
        ]},
    ]
});

webix.ui({ view:"form",width:300,

elements:[

{rows:[

{

rows:[

{view:"text", label:"テキスト"},

{view:"checkbox", label:"チェックボックス" ,labelWidth:110},

{ view:"radio", name:"gender", label:"ラジオボタン", labelWidth:110,

value:"man", //初期選択値

options:[ //選択肢

{ value:"男", id:"man" },

{ value:"女", id:"woman" }

]

{ view:"select", name: "country", label:"セレクトボックス",

options:[

{ value:"日本", id: "JP" },

{ value:"アメリカ", id: "US" },

{ value:"イタリア", id: "IT"},

{ value:"ドイツ", id: "DE"},

]

{view:"datepicker", label:"日時"},

{ view:"colorpicker", label:"カラー", name:"color", value:"#ffaadd" },

{ view:"counter", label:"スピンボックス", align:"center", labelWidth:110},

{ view:"textarea" , height:100, label:"テキストエリア", labelPosition:"top" }

]

{view:"button", value:"ボタン"}

]},

]

});

example

入力値を取得

webixのセレクション($$)にてフォーム要素を指定し、getValuesメソッドを実行することで、フォームに入力されたデータを取得することができます。

//ボタンクリック時のコールバック
var preview = { 
    "onItemClick":function(e, id, trg){
        var formData = $$("my_form").getValues();//フォームの値を取得
        alert(JSON.stringify(formData)); 
    }
}

//入力フォームレイアウト   
webix.ui({
    view:"form", 
    id:"my_form",
    width:300,
    elements:[
        { view:"text", name:"name", label:"名前"},     
        { view:"text", name:"mail", label:"メール"},
        { view:"radio", name:"gender", label:"性別",
            value:"man", //初期選択値
            options:[   //選択肢
                { value:"男", id:"man" },
                { value:"女", id:"woman" }
            ]
        },
        { view:"select", name: "country", label:"国",
            options:[
                { value:"選択してください", id: ""},
                { value:"日本", id: "JP" },
                { value:"アメリカ", id: "US" },
                { value:"イタリア", id: "IT"},
                { value:"ドイツ", id: "DE"}
            ]
        },
        { margin:5,
            cols:[
                //ボタン
                { view:"button", value:"入力値を表示", on:preview }
            ]
        }
        ]
});

//ボタンクリック時のコールバック

var preview = {

"onItemClick":function(e, id, trg){

var formData = $$("my_form").getValues();//フォームの値を取得

alert(JSON.stringify(formData));

}

//入力フォームレイアウト

webix.ui({

view:"form",

id:"my_form",

width:300,

elements:[

{ view:"text", name:"name", label:"名前"},

{ view:"text", name:"mail", label:"メール"},

{ view:"radio", name:"gender", label:"性別",

value:"man", //初期選択値

options:[ //選択肢

{ value:"男", id:"man" },

{ value:"女", id:"woman" }

]

{ view:"select", name: "country", label:"国",

options:[

{ value:"選択してください", id: ""},

{ value:"日本", id: "JP" },

{ value:"アメリカ", id: "US" },

{ value:"イタリア", id: "IT"},

{ value:"ドイツ", id: "DE"}

]

{ margin:5,

cols:[

//ボタン

{ view:"button", value:"入力値を表示", on:preview }

]

}

]

});

example

値を反映する

編集画面などでは、すでに設定されている値を入力フォームに反映する必要がありますが、WebixではsetValuesメソッドを実行するだけで簡単に値を入力フォームに反映できます。
セレクトボックスやラジオボタンの選択なども自動的に反映してくれます。

//フォームに反映するデータ   
var data = {
        "name": "GUNMA GIS GEEK",
        "mail": "hoge@hoge.me",
        "gender": "woman",
        "country": "IT"
    }   


//ボタンクリック時のコールバック   
var setData = { 
    "onItemClick":function(e, id, trg){
        $$("log_form").setValues(data); //フォームに値を反映する
    }
}

//入力フォームレイアウト   
webix.ui({
    view:"form", 
    id:"log_form",
    width:300,
    elements:[
        { view:"text", name:"name", label:"名前"},     
        { view:"text", name:"mail", label:"メール"},
        { view:"radio", name:"gender", label:"性別",
            value:"man", //初期選択値
            options:[   //選択肢
                { value:"男", id:"man" },
                { value:"女", id:"woman" }
            ]
        },
        { view:"select", name: "country", label:"国",
            options:[
                { value:"日本", id: "JP" },
                { value:"アメリカ", id: "US" },
                { value:"イタリア", id: "IT"},
                { value:"ドイツ", id: "DE"},
            ]
        },
        { margin:5,
            cols:[
                //ボタン
                { view:"button", value:"データを反映", on:setData }
            ]
        }
        ]
});

//フォームに反映するデータ

var data = {

"name": "GUNMA GIS GEEK",

"mail": "[email protected]",

"gender": "woman",

"country": "IT"

}

//ボタンクリック時のコールバック

var setData = {

"onItemClick":function(e, id, trg){

$$("log_form").setValues(data); //フォームに値を反映する

}

//入力フォームレイアウト

webix.ui({

view:"form",

id:"log_form",

width:300,

elements:[

{ view:"text", name:"name", label:"名前"},

{ view:"text", name:"mail", label:"メール"},

{ view:"radio", name:"gender", label:"性別",

value:"man", //初期選択値

options:[ //選択肢

{ value:"男", id:"man" },

{ value:"女", id:"woman" }

]

{ view:"select", name: "country", label:"国",

options:[

{ value:"日本", id: "JP" },

{ value:"アメリカ", id: "US" },

{ value:"イタリア", id: "IT"},

{ value:"ドイツ", id: "DE"},

]

{ margin:5,

cols:[

//ボタン

{ view:"button", value:"データを反映", on:setData }

]

}

]

});

example

備考

公式のドキュメントは以下より。

document
sample

基本

パーツ

入力値を取得

値を反映する

備考

投稿者: shimizu