WeX5 開發(fā)記一筆

    記一筆頁(yè)實(shí)現(xiàn)新增賬目、修改賬目的功能。編輯時(shí)下拉選擇賬目類型、賬目分類和日期；輸入金額和備注。用一個(gè)W文件實(shí)現(xiàn)。

1、新建頁(yè)面文件detail.w

在“新建W向?qū)А敝羞x擇模板“移動(dòng)→標(biāo)準(zhǔn)→標(biāo)準(zhǔn)頁(yè)面”，文件名輸入detail。在頁(yè)面中將放入數(shù)據(jù)組件和展現(xiàn)組件，如圖1-29。

圖1-29  記一筆頁(yè)面構(gòu)成

2、增加賬目數(shù)據(jù)、賬目類型、賬目分類數(shù)據(jù)

記一筆頁(yè)實(shí)現(xiàn)新增、編輯賬目數(shù)據(jù)，因此需要賬目數(shù)據(jù)組件。新增時(shí)，需要一條空數(shù)據(jù)；編輯時(shí)，數(shù)據(jù)來(lái)自賬目列表頁(yè)，所以不需要調(diào)用后端服務(wù)獲取數(shù)據(jù)。

賬目類型和賬目分類都是下拉選擇的數(shù)據(jù)，所以需要提供賬目類型數(shù)據(jù)和賬目分類數(shù)據(jù)，用于下拉選擇。賬目類型分為收入和支出，是靜態(tài)數(shù)據(jù)，因此使用data組件；賬目分類則需要使用數(shù)據(jù)組件baasData，通過調(diào)用后端服務(wù)，獲取賬目分類表中的數(shù)據(jù)。表1-9列出了數(shù)據(jù)組件屬性的設(shè)置方法。

表1-9  記一筆頁(yè)數(shù)據(jù)組件屬性說(shuō)明

3、制作賬目明細(xì)表單

使用控件組組件controlGroup，作為輸入組件的容器，提供邊距，使組件不會(huì)緊貼著屏幕邊緣。使用帶標(biāo)簽的下拉組件labelSelect，作為賬目類型和賬目分類的選擇組件。使用帶標(biāo)簽的輸入組件labelInput，作為日期、金額和備注的輸入組件。界面設(shè)計(jì)如圖1-30.

圖1-30  記一筆頁(yè)設(shè)計(jì)界面

表1-10列出了展現(xiàn)組件屬性的設(shè)置方法。

表1-10  記一筆頁(yè)展現(xiàn)組件屬性說(shuō)明

4、賬目列表頁(yè)增加新增、修改、刪除賬目功能

在賬目列表頁(yè)中新增或修改賬目，需要跳轉(zhuǎn)到記一筆頁(yè)，這個(gè)頁(yè)面跳轉(zhuǎn)可以使用對(duì)話框組件windowDialog實(shí)現(xiàn)。windowDialog組件可以跳轉(zhuǎn)到指定的W文件。

（1）增加新增賬目功能

在賬目列表頁(yè)的“新增”按鈕的單擊事件中，調(diào)用windowDialog組件的open方法，打開記一筆頁(yè)的同時(shí)傳新增參數(shù)，在記一筆頁(yè)中接收新增參數(shù)，給賬目數(shù)據(jù)組件增加一條新記錄。在新記錄中輸入相關(guān)數(shù)據(jù)后，關(guān)閉記一筆頁(yè)面，返回賬目列表頁(yè)面。輸入的數(shù)據(jù)通過windowDialog組件返回到賬目列表數(shù)據(jù)中，再保存數(shù)據(jù)到數(shù)據(jù)庫(kù)。

在賬目列表頁(yè)面list.js中，打開記一筆頁(yè)面，代碼如下：

       Model.prototype.newBtnClick = function(event) {    // 打開記一筆新增

              this.comp("detailDialog").open({

                     "params" : {

                            "operator": "new"

                     }

              });

       };

在記一筆頁(yè)面detail.js中接收參數(shù)，發(fā)現(xiàn)如果是新增數(shù)據(jù)就增加新記錄，代碼如下：

       Model.prototype.modelParamsReceive = function(event){   // 記一筆接收參數(shù)

              var accountData = this.comp("accountData");

              accountData.clear();

              this.operator = event.params.operator;

              if (this.operator== "new") {                      // 新增賬目數(shù)據(jù)

                     accountData.newData({

                            "defaultValues": [ {

                                   "fID": justep.UUID.createUUID(),

                                   "fCreateTime": new Date(),

                                   "fDate": new Date(),

                                   "fType": "支出"

                            } ]

                     });

              }

       };

用戶輸入數(shù)據(jù)后，關(guān)閉記一筆頁(yè)面detail.js，將用戶輸入的數(shù)據(jù)返回賬目列表頁(yè)。代碼如下：

       Model.prototype.okBtnClick = function(event) {    

              // 確定后返回當(dāng)前行，用于windowDialog的mapping映射

              var accountData = this.comp("accountData");

              this.owner.send(accountData.getCurrentRow());

              this.close();

       };

在賬目列表頁(yè)面list.w中，設(shè)置記一筆頁(yè)面中要返回的數(shù)據(jù)和賬目列表頁(yè)面中的賬目數(shù)據(jù)字段的對(duì)應(yīng)關(guān)系，如圖1-31?！皬棾龃翱诟拍睢敝傅氖怯浺还P頁(yè)面中的賬目數(shù)據(jù)，“目標(biāo)概念”指的是賬目列表頁(yè)面中的賬目數(shù)據(jù)。

圖1-31  賬目列表頁(yè)中windowDialog組件的mapping屬性設(shè)置

在賬目列表頁(yè)面list.js中，接收記一筆頁(yè)面返回的數(shù)據(jù)后，將數(shù)據(jù)保存到數(shù)據(jù)庫(kù)。代碼如下：

       Model.prototype.detailDialogReceived = function(event) {

              this.comp("accountData").saveData();   // 從記一筆返回后保存數(shù)據(jù)

       };

（2）增加編輯賬目功能

在賬目列表頁(yè)的list組件的第一列的單擊事件中，調(diào)用windowDialog組件的open方法，打開記一筆頁(yè)的同時(shí)傳編輯參數(shù)和賬目當(dāng)前行數(shù)據(jù)，在記一筆頁(yè)中接收修改參數(shù)，將賬目當(dāng)前行數(shù)據(jù)放入賬目數(shù)據(jù)組件中。數(shù)據(jù)的返回和保存同新增賬目功能。

在賬目列表頁(yè)面list.js中，打開記一筆頁(yè)面，同時(shí)將選擇的行數(shù)據(jù)傳入記一筆頁(yè)面。代碼如下：

       Model.prototype.listLineClick = function(event) { // 打開記一筆編輯，傳入data當(dāng)前行數(shù)據(jù)

              var row = event.bindingContext.$object;

              this.comp("detailDialog").open({

                     "params" : {

                            "operator": "edit",

                            "data" : {

                                   "rowData": row.toJson()

                            }

                     }

              });

       };

在記一筆頁(yè)面detail.js中接收參數(shù)，發(fā)現(xiàn)如果是修改數(shù)據(jù)就將傳入的數(shù)據(jù)加載到賬目數(shù)據(jù)中，以便用戶修改，代碼如下：

       Model.prototype.modelParamsReceive = function(event){       // 記一筆接收參數(shù)

              var accountData = this.comp("accountData");

              accountData.clear();

              this.operator = event.params.operator;

              if (this.operator== "edit") {                            // 修改賬目數(shù)據(jù)

                     accountData.loadData([event.params.data.rowData ]);

                     accountData.first();

              }

       };

（3）增加刪除賬目功能

在賬目列表頁(yè)list.js的list組件每一行上增加刪除按鈕，刪除list當(dāng)前行數(shù)據(jù)。代碼如下：

       Model.prototype.deleteBtnClick = function(event) {  // 刪除list當(dāng)前行

              var data = this.comp("accountData");

              var row = event.bindingContext.$object;

              data.deleteData(row);

       };

表1-11列出了賬目列表頁(yè)list.w展現(xiàn)組件屬性的設(shè)置方法。

表1-11  賬目列表頁(yè)展現(xiàn)組件屬性說(shuō)明