WeX5 開發(fā)記一筆

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

1、新建頁面文件detail.w

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

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

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

記一筆頁實現(xiàn)新增、編輯賬目數(shù)據(jù)，因此需要賬目數(shù)據(jù)組件。新增時，需要一條空數(shù)據(jù)；編輯時，數(shù)據(jù)來自賬目列表頁，所以不需要調(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  記一筆頁數(shù)據(jù)組件屬性說明

3、制作賬目明細表單

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

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

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

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

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

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

（1）增加新增賬目功能

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

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

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

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

                     "params" : {

                            "operator": "new"

                     }

              });

       };

在記一筆頁面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)閉記一筆頁面detail.js，將用戶輸入的數(shù)據(jù)返回賬目列表頁。代碼如下：

       Model.prototype.okBtnClick = function(event) {    

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

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

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

              this.close();

       };

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

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

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

       Model.prototype.detailDialogReceived = function(event) {

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

       };

（2）增加編輯賬目功能

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

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

       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()

                            }

                     }

              });

       };

在記一筆頁面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）增加刪除賬目功能

在賬目列表頁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列出了賬目列表頁list.w展現(xiàn)組件屬性的設(shè)置方法。

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