從賬目列表頁中打開記一筆頁是一種頁面跳轉方式，再介紹一種方式，用來打開賬目分類設置頁。這種方式就是使用WeX5提供的Shell。Shell可以在任何時候打開任意一個W文件，實現頁面跳轉；Shell可以給App增加左（右）邊欄；Shell可以響應安卓手機的物理返回鍵，實現按兩次返回鍵退出App的能力。使用Shell需要增加一個W文件，進行Shell的實例化。

1. 新建首頁index.w

在新建W向導中選擇模板“移動→標準→首頁”，“文件名”輸入index，在“首頁生成選項”中選擇“生成左側邊欄”，不選擇“左側邊欄為獨立頁”，不選擇“同時生成主頁”，建出index.w文件。

在使用首頁向導建出的頁面文件中，用wing組件實現App的左（右）邊欄；用多內容頁組件contents實現Shell的頁面跳轉。在同時建出的頁面代碼文件index.js中首先引用Shell JS類，再在Model的構造方法中，新建Shell實例。應用首頁構成，如圖1-34。

圖1-34  記賬本首頁構成

3. 在左邊欄中增加菜單

在wing組件的left部分放按鈕組件，形成左邊欄中的菜單，通過按鈕組件的單擊事件調用Shell的showPage方法打開指定的W文件。界面設計如圖1-35

圖1-35  記賬本首頁設計界面

表1-14列出了展現組件屬性的設置方法。

表1-14  首頁展現組件屬性說明

Index.js完整代碼如下

define(function(require) {

       var$ = require("jquery");

       varjustep = require("$UI/system/lib/justep");

       varShellImpl = require('$UI/system/lib/portal/shellImpl');

       varModel = function() {

              this.callParent();

              this.shellImpl = newShellImpl(this, {

                     contentsXid :"pages",

                     wingXid : "wing",

                     pageMappings : {

                            "main" : {

                                   url :require.toUrl('./list.w')

                            }

                     }

              });

       };

       Model.prototype.modelLoad = function(event) {

              justep.Shell.showPage("main");

       };

       Model.prototype.classSettingBtnClick = function(event){

              justep.Shell.showPage(require.toUrl("./classSetting.w"));

       };

       returnModel;

});