コーラ-UIの使用

公式サイト：http://www.cola-ui.com

チュートリアル場所：http://www.cola-ui.com/guide/model

API：http://www.cola-ui.com/api/cola.html、http://legacy.cola-ui.com

コンポーネント住所：http://www.cola-ui.com/docs/button

送信元アドレス：https://github.com/Cola-Org/cola-ui

製品導入

• コーラUIは、ワンストップのフロントエンドのUIフレームワークは、双方向のデータバインディングをサポートしています。MVVMアーキテクチャは、可能な限り、開発者のための技術要件を削減しながら、柔軟性を確保し、合理化を使用しています。
• コーラUIは、特にモバイルデバイスアプリケーション開発のために、モバイルファースト戦略に従っています。
• jQueryとセマンティックUIのコーラUIの統合、より一般的にリスト、表、ツリーおよびその他の高度なコントロールを提供します。

始めます

以上内容都是通过cola-ui官网获得的资料，绝大多数的开发内容可以参考cola-ui官网提供的API进行查阅

この文書は、camsiプロジェクトで使用される機能や特徴とするものであり、整理し、提供してAPIコーラ-UI公式サイトに説明するために存在しないかもしれません

組成構造

通常要基于camsi工程在浏览器渲染出来的页面由三个部分组成，例如：simple01.jade、M.js、simple01Model.js

翡翠

Jade 是一个高性能的模板引擎，它深受 Haml影响，它是用 JavaScript 实现的，并且可以供 [Node](http://nodejs.org/) 使用，你也可以[在此试用](http://naltatis.github.io/jade-syntax-docs/)，这里推荐[Jade入门中文文档](http://www.nooong.com/docs/jade_chinese.htm)

extends /_page
block body
    v-box
        flex-box
            .content(style="overflow: auto")
                c-table(bind="simple01s" dataType="Simple01")
                    column(property="name")
append scripts
    script(src="simple01Model.js")
    script(src="simple01.js")

データ型の値とModel.jsのdataType定義された値は、データ型等しいJsと定義されるべきです

JS

不做描述

cola(function(model) {
    model.dataType($DataType.Simple01);
    model.describe("simple01s", {
        dataType : "Simple01",
        provider : {
            url : "controller/simple01Service/findPagination?from={{$from}}&limit={{$limit}}",
            pageSize : 10,
            sendJson : true,
            loadMode: 'manual'
        }
    });
    model.set("title", "[(#{simple01})]");
    model.action({
        test : function() {
            cola.alert('test')
        }
    });
});

定期的なイベントを含むすべての操作が、中に記述する必要がありますcola(function(model) { })あなたが最初に使用し、dataTypeとはすべての使用データ型を使用して、現在のJsを定義する必要がある場合には、model.describe現在、指定されたモデルにインタラクティブな背景データを使用してmodel.set("", "")相互作用をモデル化するためのデータを、ページには、すべてのイベントの方法で使用する必要がありますそれは内に存在model.action({})真ん中。

Model.js

由cola-ui定义的前端模型

var $DataType = {
        Simple01: {
        name: "Simple01",
        properties : {
            name : {
                caption : "[(#{name})]",
                dataType : "string"
            }
        }
    }
};

captionこれは、使用して、現在表示されているテキストフィールドの遠位端をマークするために使用される[(#{ })]現在の言語に対応した国際翻訳現在のフィールドに取ります。

関連フォーム

国際化のためのフォーム処理

通常の状況下では、データ型が一般的であってもよく、各フィールドはそれぞれテキスト識別子の異なる場所に表示されたときに同じではない、これは使用することができcaption、例えば、操作属性：caption=ll.l("name")使用国際Jsので述べ[(#{ })]

日付形式のフォームハンドリング

一般的にのみ、次のコードをフォーマットされた現在の日付フィールドが必要です。

field(property="birthday")
    label
    c-datepicker(displayFormat="yyyy-MM-dd" inputFormat="yyyy-MM-dd")

誕生日のデータ型Date型フィールドとテキスト表示は、選択した日付の書式を調整する「YYYY-MM-DD」

列挙値のフォームハンドリング

私たちは、多くの場合、データベースに格納されているいくつかの一般的なデータ列挙値を行いますと、テキスト入力ボックスは、ページを変更するには、ドロップダウンになり

ページの要素

field(property="status")
    label
    c-dropdown(c-items="dictionary('10000')")

Jsの導入

script(src=basecodeCP + "controller/basecode/codeDetail/findCodeDetails?baseCodeIds=10000")

若しくは

script(src="controller/basecode/codeDetail/findCodeDetails?baseCodeIds=10000")

そのようなページは、現在のフィールドを表示するために保存されたテキストに対応する対応コードIDのステータス10000、ドロップダウンを提供するために、現在のフィールドをロードする値を列挙しています

フォーム処理のテキストフィールド

通常、表示するテキストボックスに、などの備考

fields.cols-1
    field(property="remark")
        label
        c-textarea(rows="3")

まず、現在のフィールドが排他的1である定義し、使用してc-textarea(rows="3")現在のフィールドのテーブル名は排他的である3

読み取り専用のフォーム処理

全て通常シーンのフィールドは、そのようなIDとして、手動入力の形で提示されていない、及びIを使用することができるreadOnly="true"各フィールドの読み出し専用の制御のために、されてもよいreadOnly="true"C型属性は全体の読み取り専用フォームを制御内側に配置

関連郡レベルでの省や都市の形態の処理

翡翠

field(property="country"
    label
    c-dropdown(c-items="dictionary('CountryCode')" onSelectData="onCountrySelect")
(property="province" caption=ll.l("province") c-readOnly="queryCondition.country != 'CHN'")
    label
    c-dropdown(c-items="provinces" textProperty="name" assignment="province=kind" onSelectData="onProvinceSel")
field(property="city" caption=ll.l("city") c-readOnly="queryCondition.country != 'CHN'")
    label
    c-dropdown(c-items="cities" textProperty="name" assignment="city=kind" beforeOpen="beforeCityOpen" onSelectData="onCitySel")
field(property="county" caption=ll.l("county") c-readOnly="queryCondition.country != 'CHN'")
    label
    c-dropdown(c-items="counties" textProperty="name" assignment="county=kind" beforeOpen="beforeCountyOpen")

データ・ディクショナリの導入

script(src="controller/basecode/codeDetail/findCodeDetails?baseCodeIds=CountryCode")

JS

cola(function(model) {
    model.describe("provinces", {
        provider: {
            url: "controller/basecode/codeDetail/findCachedCodeDetails",
            parameter: {
                baseCodeId: "Address",
                parentId: "NULL"
            }
        }
    });
    model.set("title", "[(#{simple01})]");
    model.set("queryCondition", {"country":"CHN"});
    model.action({
        beforeCityOpen: function () {
            var province = model.get("queryCondition.province");
            $.ajax("controller/basecode/codeDetail/findCachedCodeDetails?baseCodeId=Address&parentId=" + province, {
                type: "get", async: false
            }).done(function (result) {
                if (result) {
                    model.set("cities", result);
                }
            });
        },
        beforeCountyOpen: function () {
            var city = model.get("queryCondition.city");
            $.ajax("controller/basecode/codeDetail/findCachedCodeDetails?baseCodeId=Address&parentId=" + city, {
                type: "get", async: false
            }).done(function (result) {
                if (result) {
                    model.set("counties", result);
                }
            });
        },
        onProvinceSel: function (self, arg) {
            var queryCondition = model.get("queryCondition");
            if(queryCondition.get("province") != arg.data.get("kind")){
                queryCondition.set("city", "");
                queryCondition.set("county", "");
            }
        },
        onCitySel: function (self, arg) {
            var queryCondition = model.get("queryCondition");
            if(queryCondition.get("city") != arg.data.get("kind")){
                queryCondition.set("county", "");
            }
        },
        onCountrySelect: function (self, arg) {
            var selectedItem = arg.data;
            if("CHN" != selectedItem.key) {
                model.get("queryCondition").set("province", "");
                model.get("queryCondition").set("city", "");
                model.get("queryCondition").set("county", "");
            }
        }
    });
});

テーブル関連

列挙値のフォームハンドリング

通常、我々は、データ入力フォームにテーブルで簡易表示されているので、我々は、テーブルのドロップダウン列挙値を使用する必要があるフォームに入力された際に列挙値の翻訳を取得するために使用されなければなりません

column(property="status")
    template
    div(c-bind="translate('10000',$default)")

インライン編集のためのフォーム処理

いくつかの単純なデータ処理に時間のために、私たちは、複雑な編集ボックスを必要としない形で直接インライン編集を行うことができ、現在のラインデータ編集処理にポップアップ表示

c-table(bind="simple01s" dataType="Simple01" readOnly="false")

ドロップダウン項目の編集テーブル行

フォームエディタでは、当然のことながら、テーブルに編集することができ、データ値として、ドロップダウン項目を選択するために行くことができます

column(property="status")
    template(name="edit")
        c-dropdown(bind="$default" c-items="dictionary('10000')")

最後に、コードを仕上げています

column(property="status")
    template(name="edit")
        c-dropdown(bind="$default" c-items="dictionary('10000')")
    template
        div(c-bind="translate('10000',$default)")

手術台支柱の取り扱いを追加

通常、私たちはアクション列に行を追加する必要があり、表の最後の列は、データの現在の行に対処します

c-table(bind="simple in simple01s" dataType="Simple01")
    column(caption=ll.l("operation"))
        template
            div
                a.cell-link(c-onclick="view(simple)")=ll.l("view")

リンケージテーブル処理

こうしたブック対応の本の出版の詳細など多くのシーン、私たちのデータと、データが提携して、で、この時間が異なる発行者情報のための図書の詳細にリンクされています

ここでは2つのテーブルの関連があるので、我々は2つのデータ型を定義する必要があります

cModel.js

var $DataType = {
    A: {
        name: "A",
        properties : {
            name : {
                caption : "[(#{name})]",
                dataType : "string",
            }
        }
    },
    B : {
        name : "B",
        properties : {
            name : {
                caption : "[(#{name})]",
                dataType : "string"
            }
        }
    }
};

c.jade

c-table(bind="as" dataType="a")
    column(property="name")
c-table(bind="as#.bs" dataType="b")
    column(property="name")

c.js

cola(function(model) {
    model.dataType($DataType.B);
    $DataType.A.properties.bs = {
        dataType: "B",
        aggregated: true,
        provider: {
            url: "controller/B/find",
            sendJson: true,
            parameter: {
                "name": "{{@name}}"
            }
        }
    }
    model.dataType($DataType.A);
    model.describe("as", {
        dataType : "A",
        provider : {
            url : "controller/C/findPagination?from={{$from}}&limit={{$limit}}",
            pageSize : 10,
            sendJson : true,
            loadMode: 'manual'
        }
    });
    model.set("title", "[(#{C})]");
    model.action({
    });
});

関連して使用することができparameter:{"name":"{{@name}}"}、現在選択された行の名前を取得するために、親テーブルの値によって

ロードされたフォームデータを処理

私たちは、直接ページにフォームデータを作ることができるいくつかのシーンでは、あなたはまた、負荷データをトリガするイベントを使用することができます

loadMode: 'manual'

あなたはページがloadModeすることにより、ページ内にロードされたときにフォームデータがロードされているかどうかを制御できます。マニュアル手動ロード、loadModeのデフォルトは自動的にデータをロードするコメント

パネルパネル関連

パネルヘッドの位置にボタンを追加します。

c-panel#panelDemo(caption=ll.l("panel"))
    template(name="tools")
       div
          c-button.primary(caption=ll.l("add") click="add")

他の

プリロードプロセス

ページの読み込みが完了したときに、通常我々は、自動的に指定された属性の値に設定されたデータの方法または一部の一部をトリガーします

cola.ready(function() {
    cola.widget("panelDemo").collapse(); // 在加载完页面之后 折叠id为panelDemo的面板
});

コードが配置されるべきですcola(function (model) { })