Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use cola-ui in java, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Product introduction

Cola UI is an one-stop front-end UI framework that supports two-way data binding. A simplified MVVM architecture is adopted to ensure flexibility while minimizing technical requirements for developers.

Cola UI follows the strategy of Mobile First and is especially suitable for mobile device application development.

Cola UI integrates jQuery and Semantic UI, while providing more commonly used List, Table, Tree and other advanced controls.

Start

The above contents are all obtained through the official website of cola-ui. Most of the development content can be consulted by referring to the API provided by the official website of cola-ui.

This document is mainly aimed at the functions or features used in the camsi project, and may not exist in the API provided by the official website of cola-ui.

Composition and structure

Usually the page to be rendered in the browser based on the camsi project consists of three parts, such as simple01.jade, M.js, and simple01Model.js

Jade

Jade is a high-performance template engine. It is deeply influenced by Haml. It is implemented in JavaScript and can be used by [Node] (http://nodejs.org/)). You can also [try it here] (http://naltatis.github.io/jade-syntax-docs/). [getting started with Jade] (http://www.nooong.com/docs/jade_chinese.htm)) is recommended here.

Extends / _ pageblock body v-box flex-box .content () c-table (bind= "simple01s" dataType= "Simple01") column (property= "name") append scripts script (src= "simple01Model.js") script (src= "simple01.js")

The value of dataType should be equal to the value of dataType defined in Js and the value of dataType defined in Model.js.

Js

No description.

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')}});})

All formal operations, including events, should be written in cola (function (model) {}), where you first need to use dataType to define all the DataType used in the current Js, use model.describe to interact background data to the currently specified model, use model.set (",") to exchange data to model, and all event methods used on the page should exist in model.action ({}).

Model.js

Front-end model defined by cola-ui

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

Caption is used to mark the front end of the current field to display text, and use [(# {})] to get the international translation of the current language corresponding to the current field.

The handling of internationalization by form-related forms

Under normal circumstances, dataType may be common, and then each field displays a different text identity in each different place, so you can use the caption attribute. For example, caption=ll.l ("name") mentioned earlier that [(# {})] is used in the internationalization of Js.

The form's handling of the date format

You usually need to format the current date field with only the following code:

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

Adjust the text display and selected date format of the birthday field whose datatype type is Date to "yyyy-MM-dd"

The form's handling of enumerated values

We often make some conventional data into enumerated values and store them in the database, and change the text input box of the page into a drop-down item.

Page element

Field (property= "status") label c-dropdown (Cmuritems = "dictionary ('10000')")

Introduction of Js

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

Or

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

In this way, the page will load the text corresponding to the id stored in the corresponding status with the enumerated value code 10000 to the current field, and provide a drop-down item for the current field.

The treatment of text field by form

Similar to notes, they are usually displayed in text boxes

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

First define one column for the current field, and use the c-textarea (rows= "3") table name to monopolize three columns for the current field.

The treatment of read-only by the form

In normal scenarios, not all the fields listed in the form are entered manually, such as ID. We can use readOnly= "true" to control each field read-only, or we can put readOnly= "true" in the c-form property to control the entire form read-only.

The treatment of provincial, municipal and county level couplings by the form

Jade

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

Introduction of data dictionary

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", ");});}); processing of enumerated values in table-related tables

Usually we enter data in the form and simply display it in the table, so the drop-down enumeration values entered in the form must be translated using the enumerated values obtained when we need to use them in the table.

Column (property= "status") template div (Cmurbind = "translate") processing of in-row edits in the table

When dealing with some simple data, we can edit the data of the current row directly in the table without popping up a complex edit box.

C-table (bind= "simple01s" dataType= "Simple01" readOnly= "false") Table Row Editor's handling of drop-down items

In form editing, we can select a drop-down item as the data value, or we can edit it in the table row.

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

Finally, the code is sorted out as

Column (property= "status") template (name= "edit") c-dropdown (bind= "$default" cmuritems = "dictionary ('10000')") template div (CML bind = "translate (' 10000)") the processing of adding operation columns in the table

Usually we need to add a row of action columns to the last column of the table to process the data of the current row

C-table (bind= "simple in simple01s" dataType= "Simple01") column (caption=ll.l ("operation")) template div a.cell-link (CmuronClick = "view (simple)") = ll.l ("view") Table Linkage processing

In many scenarios, our data and data are related to the relationship, such as the details of the publisher of a book corresponding to the book, which is then linked to the details of the publisher for different book information.

Because there is an association between two tables, you need to define two dataType

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 ({});)

You can use parameter: {"name": "{{@ name}"} to get the value of the name of the currently selected row in the parent table.

Processing of table data loading

In some scenarios, we can load tabular data directly into the page, or we can use events to trigger loading data.

LoadMode: 'manual'

You can use loadMode to control whether the form loads data into the page when the page is loaded: manual loads manually, comments out loadMode automatically loads data by default

Panel Panel related to adding buttons in the panel header position c-panel#panelDemo (caption=ll.l ("panel")) template (name= "tools") div c-button.primary (caption=ll.l ("add") click= "add") other preload processing

Usually, we automatically trigger part of the method or part of the data value of set to the specified property when the page is loaded.

Cola.ready (function () {cola.widget ("panelDemo") .collapse (); / / collapse the panel whose id is panelDemo after loading the page)

The code should be placed in cola (function (model) {})

Thank you for reading this article carefully. I hope the article "how to use cola-ui in java" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.