Webixクイックスタート

8757 ワード

XBソフトウェアは最近、パソコンだけでなくiOS、Android、Blackberryデバイスでも実行できるJavaScript UIライブラリWebixを発表しました.オフラインのウェブストレージ、地理的位置(geolocation)APIにアクセスし、キャンバスに絵を描くことができ、jQueryとBackboneを統合しています.js. Webixは簡単なサービス側統合コントロールを提供し、PHP、ASP.NET、Java、Rubyなど様々な技術がクライアントのWebix部品と直接通信できる.さらに、これらのコンポーネントは、RoR、ASPなどのMVCフレームワークにおいても使用することができる.NET MVC、Spring、Struts、Grails.Webixライブラリに含まれるコンポーネントは、Accordion、Calendar、Carousel、Chart、Colorboard、Context、ContextMenu、DataTable、Dataview、Form、Formコントロール、Grouplist、HTML form、Iframe、Layout、Resizer、List、Menu、Multiview、Popup、Property Sheet、Scrollview、Tabview、Template、Toolbar、Tree、Treetable、Unitlist、UploaderとWindow.
本稿では,クイックエントリー例について詳細に説明する.
例1:行と列
レイアウトは行と列によって決定され、行と列の間のborderがtypeによって設定されるtypeの可能な値は「line」(default)、「head」、「space」、「wide」and「clean」(borderless)である.

webix.ui({
    type:"line",
    rows: [
        { template:"Row 1"},
        { template:"Row2"}
    ]
});

例2:widthとheightレイアウトサイズの設定
レイアウトのサイズはwidthとheightで構成できます

webix.ui({
    width:400,
    height:200,
    type:"line",
    rows: [
        { template:"Row 1"},
        { template:"Row2"}
    ]
});

例3:カスタムhtml実装レイアウト
レイアウトは、containerプロパティを構成することによって、カスタムhtmlで実現することもできる.

webix.ui({
    type: "line",
    container: "testA",
    // ...
});

例4:欄と列

列と欄は互いにネストすることができて、列の中に欄を含むことができて、欄の中に列

を含むことができます

{},//!Emptyには空の列やバーも含まれますが、属性やコンポーネント

は含まれていません.

view:[resizer]1つのスケールラインでは、間の任意の行と列のサイズを設定できますが、リフレッシュすると元の

に戻ります.

widthおよびheightは、表示バーまたは列の幅の高さを制御します.

webix.ui({
    type:"line",
    rows: [
        { template:"Row 1",height:50},
        {view:"resizer"}, //!resizer line
        { cols:[ //2nd row
            { template:"Column 1"},
            {},//!empty
            { template:"Column 2"}
        ]}
    ]
});

例5:ツールバーとリスト

ツールバーToolbarを構成する一般的な最初の(上)行にはツールバーボタンが配置され、ユーザーがappと対話するために使用されるすべてのwebixコンポーネントとコントロールにはview属性があり、この属性はあなたが作成したボタン、チェックボックス、リスト、表などを区別するために使用されます.このとき、行の高さはツールバーのコントロールの高さが変化するにつれて変化する

です.

view:「form」はフォームコントロールであり、ユーザーデータを得るためにフォームコントロールにはows/elementsおよびcols

に配置された他の多くのコントロールが含まれている.

alignは、コントロール内のテキストの相対的な位置を示し、可能な値は「left」(default)、「right」および「center.」である.

listコントロール

リストコントロールは、データを含むコントロールであり、主に以下の属性

がある.

data:インラインデータを解析するための

url:1つのファイルまたはデータベースからデータをロードする

template:データの値を定義しますが、hashタイプ

でなければなりません.

datatype:ソースデータのタイプを識別する

webixはJSON(default)、JSArray、XML、CSV and HTML tableデータをサポートし、指定がなければjson

を使用する

var filmset = [
    { id:1, title:"The Shawshank Redemption", year:1994},
    { id:2, title:"The Godfather", year:1972},
    { id:3, title:"The Godfather: Part II", year:1974},
    { id:4, title:"The Good, the Bad and the Ugly", year:1966},
    { id:5, title:"My Fair Lady", year:1964},
    { id:6, title:"12 Angry Men", year:1957}
];
webix.ui({
    type:"line",
    rows: [
        { view:"toolbar", id:"mybar", elements:[
            { view:"button", value:"Add", width: 70},
            { view:"button", value:"Delete", width: 70 },
            { view:"button", value:"Update", width: 70 },
            { view:"button", value:"Clear Form", width: 85 }]
        },
        { cols:[
            {view:"form", id:"myform", width:200, elements:[
                { view:"text", name:"title", placeholder:"Title", width:180, align:"center"},
                { view:"text", name:"year", placeholder:"Year", width:180, align:"center"} ]
            },
            {
                view:"list",
                id:"mylist",
                template:"#id# - #title# - #year#",
                select:false, //enables selection
                height:400,
                data: filmset
            }
        ]}
    ]
});

例6:イベント,リストへの追加削除を実現する.
操作関数をコントロールに添付してAppの交差イベントを実現

使用ID

は、1つのコンポーネントビューにおけるイベント

を指定する必要があります.

は、コントロール

に関数を追加する.
リストに行データを追加する方法

リストに1行のデータを追加するには、まずフォームからテキスト値を取得します.

フォームの値を取得するには、$(「myform」)などのフォームのIDを使用します.getValues()

指定値を得るためには、フォーム内のコントロールのnameを$(「myform」)と指定する必要がある.getValues().title

リストによるデータの更新

は、リストで選択するデータ項目をformに対応するドメイン

に送信する.

formで自分が変更したデータを元のリストのデータ

に置き換える.
リストからデータを削除

リストで選択するID

を取得する.

選択テーブル列のデータをリストから削除する

.
削除フォームを改善し、削除する前にプロンプト確認ボックスを提供し、webixを通過する.confirm()実装

title、ウィンドウタイトル

text,ウィンドウのヒント情報

callback、ボタン(yesまたはno)をクリックしたトリガ関数

    webix.ui.fullScreen();
    var filmset = [
        {id: 1, title: "The Shawshank Redemption", year: 1994},
        {id: 2, title: "The Godfather", year: 1972},
        {id: 3, title: "The Godfather: Part II", year: 1974},
        {id: 4, title: "The Good, the Bad and the Ugly", year: 1966},
        {id: 5, title: "My Fair Lady", year: 1964},
        {id: 6, title: "12 Angry Men", year: 1957}
    ];

    //function add_row() {
    //    webix.message("Add")
    //}
    //function update_row() {
    //    webix.message("Update")
    //}
    //function delete_row() {
    //    webix.message("Delete")
    //}


    webix.ui({
        rows: [
            {
                view: "toolbar", id: "mybar", elements: [
                {view: "button", value: "Add", width: 70, click: add_row},
                {view: "button", value: "Delete", width: 70, click: delete_row},
                {view: "button", value: "Update", width: 70, click: update_row},
                {view: "button", value: "Clear Form", width: 85, click: "$$('myform').clear()"}]
            },
            {
                cols: [
                    {
                        view: "form", id: "myform", width: 200, elements: [
                        {view: "text", name: "title", placeholder: "Title", width: 180, align: "center"},
                        {view: "text", name: "year", placeholder: "Year", width: 180, align: "center"}]
                    },
                    {
                        view: "list",
                        id: "mylist",
                        template: "#title# - #year#",
                        select: true, //enables selection
                        height: 400,
                        data: filmset
                    }
                ]
            }
        ]
    });
    //adding form data to a list while creating a new row for it
    function add_row() {
        $$("mylist").add({
            title: $$("myform").getValues().title,
            year: $$("myform").getValues().year,
        })
    }
    //      ，         form   
    $$("mylist").attachEvent("onAfterSelect", function (id) {
        $$("myform").setValues({
            title: $$("mylist").getItem(id).title,
            year: $$("mylist").getItem(id).year
        });
    });
    function update_row() {
        //         ID
        var sel = $$("mylist").getSelectedId();
        if (!sel) return;
        //  form       
        var value1 = $$("myform").getValues().title;
        var value2 = $$("myform").getValues().year;

        //                  
        var item = $$("mylist").getItem(sel); //selected item object
        item.title = value1;
        item.year = value2;
        //           
        $$("mylist").updateItem(sel, item);
    }

    function delete_row()
    {
        //         ID
        var sel = $$("mylist").getSelectedId();
        if (!sel) return;
        var item = $$("mylist").getItem(sel); //selected item object
        var title=item.title;
        var year=item.year;
        webix.confirm({
            title: "Delete",
            text: "Are you sure you want to delete ["+title+" - "+year+"] from the list?",
            callback: function(result) {
                if (result) {
                    //               
                    $$("mylist").remove(sel);
                }
            }
        });

    }

参照ソース:
https://github.com/tomlxq/best-practice/tree/master/gs-webix

Vueでグローバル関数を定義するいくつかの方法

drupal 7 Pixture Reloadedトピックのアップグレードプロセス