"Share" the right way to open the WeX5 (7)--Data component explanation

This article is the 7th article in the "correct open mode of WeX5" series, which details the additions and deletions of data components in WeX5 and the method of data locating.

Preface


A preliminary study on data components we briefly introduce the introduction of data components and the underlying structure and features, and implement simple data presentation and data churn. As mentioned in the previous article, the data component is a mapping of the background database table in the front end, and the front-end developer can simply implement the separation of the front and back end development as long as the content of the data component is predetermined. Since the data component is a mapping of a database table, its basic structure is a 2-dimensional table, a chestnut, a data component that defines a HTML5 development tool, XID to Devtool:

+-------+--------------------+----------------------------+---------+
| Index | name | URL | Country |
+-------+--------------------+----------------------------+---------+
| 1 | JetBrains Webstorm | https://www.jetbrains.com/| USA |
| 2 | Sencha Architect | https://www.sencha.com/| USA |
| 3 | Justep Wex5 | http://www.wex5.com/| CN |
| 4 | Adobe Dreamweaver | http://www.adobe.com/| USA |
| 5 | Google Web Toolkit | https://www.google.com/| USA |
+-------+--------------------+------------------------- --+---------+
The XID of the data component is the name of the database table, the simple understanding is our identity card, through XID can find this database table. There is also a Idcolumn property in the data component, the index in the table above is Idcolumn, that is, the column is the ID column of the database table, for example, our ID number is an ID column. Looking at the contents of the data component, we must also locate the corresponding rows and columns in order to change the addition and deletion of some data, which involves the positioning method of the data component.

The following respectively describes the positioning mechanism of data components and add and delete methods.

Data positioning

The first is the positioning of the data components, the component instance Query method in Wex5 comp (XID) can certainly find the corresponding data components. In addition, because it is directly under the model component, WEX5 to simplify the reference of the data component, the Model.xid method can also refer to the data component. For example, the HTML5 development tool data sheet above can be used directly using Model.devtool. In terms of performance, it is not recommended to use Comp (XID) to query a component instance because there are many components in an application, which is obviously not a cost-effective way to traverse the query heap component.

After getting to the data component, and then looking at how to navigate to a row, the APIs in WEX5 are:

1 Data.getcurrentrow (); Get when to move forward
2 Data.getfirstrow (); Get first row
3 Data.getlastrow (); Get Last row
4 Data.next (); Cursor moves to the next row
5 Data.pre (); Cursor moves to the previous row
6 Data.first (); Cursor moves to the first row
7 Data.last (); Cursor moves to the last row
8 data.to (row); Cursor moves to the specified row
When you get to a row, the entire row of data is a one-dimensional array, which provides column parameters to read and write directly to the data.

In addition to the direct location of code, the system also captures user interaction such as mouse and touch screen to locate the data. In the interface, if a user clicks or touches a data row, the cursor is automatically moved to that row, and data operations that do not specify a row parameter will default to that row. Note that using the TAB key to move the input focus will not automatically locate the data.

The positioning of the data is these, it is still very simple to use, usually we also locate the data after the increase and deletion check operation.

Change and delete

Any data-related program, can not be separated from the "Add and delete to check", data components must also have to increase the number of changes to check several operations.

Increase:

Data.newdata (option); --– back end added, return one row or more rows of new data
Data.add (defaultvalues,parent);--– add a row of data, the state needs to be set by the developer, defaultvalues,parent parameters, and does not trigger data related events

By deleting:

Data.deletedata (rows); --– Delete the specified row data
Data.deletealldata ()--– Delete all data

Change:

Data.setvalue (Col,value,row);

Row.val (Col,value);

Check:

Data.getvalue (Col,row);

Row.val (COL);

or using a data component to make a demonstration, add a few buttons, the following methods:


1//Increase
2 Model.prototype.myAdd = function (event) {
3 var data = this.data1;
4 Data.add ({
5 name: ' God usopu ',
6 height:180,
7 weight:70
8});
9};
10//Delete
Model.prototype.myDelete = function (event) {
var data = This.comp (' data1 ');
var row = Data.getlastrow ();
Data.deletedata (row);
15};
16//Change
Model.prototype.myModify = function (event) {
var data = This.comp (' data1 ');
var row = Data.getlastrow ();
Data.setvalue ("name", "changed", row);
21};
22//Check
Model.prototype.mySearch = function (event) {
var data = This.comp (' data1 ');
var lrow = Data.getlastrow (), row, results = [];
Data.first ();
do {
row = Data.getcurrentrow ();
if (data.val (' height ') > 180) {
Results.push (Data.val (' name '));
31}
Data.next ();
(Lrow! = row);
alert (results);
35};
36
Effect:



The above case operation is in the last line, if the data in accordance with the above positioning the mobile cursor, you can achieve in any location and delete and change.

back-end data components Baasdata


In the previous article, the case was using the data component rather than the backend data component Baasdata, which must be developed using the Baasdata component if it was necessary to interact with the backend database.

Compared to the data component, Baasdata adds an interface to the background:



TableName, URLs, and queryaction, saveaction are different from the core properties of the data component. TableName is the database table, URL is the service address, and two action is the system comes with the database query operation and save operation. Back-end services can also be called through code in WEX5:

1 Justep. Baas.sendrequest ({
2 "url": "/Address of the service",
3 "Action": "Action required",
4 "Async": false,
5 "params": {parameter list},
6 "Success": function (data) {
7 if (data! = NULL) {
8//Data operation
9}
10}
11});
In essence, the front-end communication is done through XHR, such as the query in the Notepad case:




The XHR request that is essentially sent is this:



You can also use the native XHR to request that the effect is the same:

1 var request = new XMLHttpRequest (); New XMLHttpRequest Object
2 Request.onreadystatechange = function () {//When the state is changed, functions are callback
3 if (request.readystate = = = 4) {//successfully completed
4//Judgment response Result:
5 if (request.status = = = 200) {
6//Success, get the text of the response via ResponseText:
7 Console.log (Request.responsetext);
8} else {
9//failure, based on response code to determine the reason for failure:
Ten Console.log (Request.status);
11}
() Else {
The//HTTP request continues ...
14}
15}
16//Send request:
Request.open (' POST ', '/baas/justep/account/queryaccount ');
Request.send (' {p: ' Just Test '} ');
The implementation of their own XHR request is more cumbersome, the above code has been manifested, the front and back of the small partners to agree on the parameters of the request, in case the back-end students on a whim to change the backend interface, you send the past parameters are scrapped. And WeX5 defines a set of rules, the query for the ordinary database can be called immediately, if you have higher requirements, you can also go to customize the ACTION,WEX5 also provides a front-end integrated solution. Interested students can take a look at the Official document introduction: http://docs.wex5.com/net-develop-4/

Back-end interaction


When interacting with the backend, there are "save" and "refresh" two operations, in addition to adding and deleting changes.

Save:

Data.savedata (option) ——-the business Data retention method, submitting the modified data to the back end, including from the data

Refresh:

Data.refreshdata (option)--Business data refresh, which stimulates refresh from data cascade
Data.open ()--load data behavior is consistent with RefreshData, just perform data load when data.isloaded () ==false
Data.loadnextpagedata (option)--load the next page of data
Data.loadallpagedata (option)--load all data in paging state
Data.loadpagedata (pageindex,option)--load page n data in paging mode, parameters PageIndex specify which pages need to be loaded, limit!=-1 can use
Data.loaddata (Data,append,parent,index)--Loading data

The parameters of the above methods are referenced in the API documentation and will not be mentioned here.

These APIs also encapsulate both front-end interaction and data-binding operations, while updating the database can trigger an automatic refresh of the front-end interface, which is the two-way binding of the data interface in the previous chapters. In the data table show more occasions, two-way binding is the King Ah!

Summary
This article introduces in detail the common operation of data components, including the addition and deletion of data, the back-end interaction of crud, not only WeX5 hands-on teaching, but also a simple analysis of the bottom of the implementation. Small eggplant Caishuxueqian, if there are improper in the article, Wan Wang to correct!

"Share" the right way to open the WeX5 (7)--Data component explanation