Mobile first! Wijmo 5 + Ionic Framework之：費用跟蹤 App

標籤：des   style   blog   http   io   color   os   ar   使用   

費用跟蹤應用採用了Wijmo5和Ionic Framework建立，目的是構建一個hybird app。

我們基於《Mobile first! Wijmo 5 + Ionic Framework之：Hello World！》的環境，將在本教程中完成費用跟蹤App的構建。下面的代碼結構是本教程完成要達到的效果，請預先建立好檔案和目錄。

www/                     -->-->/                   -->/                    -->-->-->/         -->/                 -->/        -->/             --> angularJs視圖代碼目錄(通過UI-/           --> 第三方類庫, 包括Ionic, Wijmo, jQuery等

  資料模型（Data Model）

在費用跟蹤App中，我們先要建立Data Model，E-R圖如下

 

• Category：開支分類

• Expense：開支記錄

• Budget： 預算（下面會用到）

在代碼中，我們需要在www/js/services構建AngularJs Services來對資料模型進行建模。我們會用到HTML5的localStorage進行資料本機存放區, 採用的格式為JSON。 需要注意的是，HTML5本機存放區只能存字串，任何格式儲存的時候都會被自動轉為字串，所以讀取的時候，需要自己進行類型的轉換。目前我們實現的是HTML5 本機存放區，有興趣的讀者還可移植為RESTful API、SQLite等資料存放區方法。

運行demo後，通過Chrome調試查看的本機存放區：

瀏覽開支記錄

在開支曆史頁面中，提供了2個功能：瀏覽開支記錄、刪除開支記錄。為了實現這些功能，在www\js\controllers\history.js檔案中，添加如下代碼：

$scope.expenses = ExpenseSvc.getExpensesWithCategory();

這行代碼提供了返回本機存放區的開支記錄。ExpenseSvc 服務，不僅返回了開支對象，同時也返回了開支分類。基於這些資料，在

www\templates\history.tpl.htm檔案中，在ion-context指令內添加Ionic的ion-list指令，代碼如下：

                                                          {{ expense.title }}                                {{ expense.date | date: ‘shortDate‘ }}

 

ion-list指令，用於產生排序的HTML列表，其子標籤ion-item指令用於產生HTML清單項目。 在ngRepeat指令中，我們使用了“track by”，目的是在對開支集合修改時提升效能，相關教程可參考部落格《Using Track-By With ngRepeat In AngularJS 1.2 》。

現在添加刪除開支記錄按鈕，用於向左滑動出現刪除按鈕、點擊刪除可刪除開支記錄。

在ion-item標籤關閉前添加ion-option-button標籤，代碼如下：

Delete

ion-option-button 是Ionic提供的另一個指令，用於在ion-item指令內試用。預設的，ion-option-button 是隱藏的，當在ion-item內向左滑動，則按鈕會可見。這個功能尤其對小螢幕裝置非常重要。另外，還可通過該指令內建的can-swipe來實現對這個許可權的管理--如有的使用者不允許刪除操作許可權。

在刪除函數中（控制器），可看到程式碼片段如下：

function confirmDelete(expenseId) {   // delete expense by its id property   $scope.expenses = ExpenseSvc.deleteExpense(expenseId);}

通過這個代碼，我們調用ExpenseSvc服務的deleteExpense進行刪除指定的開支記錄(expenseId)，同時這個方法也會返回開支記錄集合用於更新頁面資料。在真實的情境中，刪除記錄返回整個集合不是最理想的，但在此處我們用於示範說明。可動手試著刪除幾行資料試試。

另外，在刪除這種比較危險的操作中，應該需要添加對話方塊再次提醒一下使用者。這裡我們使用了Ionic提供的$ionicActionSheet service服務來實現。更新www\js\controllers\history.js控制器代碼的confirmDelete函數如下：

$scope.confirmDelete =      hideSheet =‘Are you sure that you\‘d like to delete this expense?‘‘Cancel‘‘Delete‘      $scope.expenses =

ionicActionSheet服務提供了自訂介面，可實現各種提示對話方塊。上面代碼實現的提示對話方塊效果如下：

 

 

建立開支記錄

點擊History頁面右上方的可實現手工建立一條新的開支記錄。在www\templates\createExpense.tpl.htm檔案中，代碼如下：

                                                                                                                                                                                                                                                            Cancel                Save

這裡使用ion-view 和 ion-content 指令進行內容展現。然後再添加Form，用ng-show指令驗證輸入內容---Wijmo的指令已經在輸入門限做了限制，故不需要驗證。同時Wijmo Calendar 和InputNumber應該是自解釋，ComboBox中可能不是。

ComboBox關聯資料模型中的開支分類，我們通過其itemsSource屬性進行資料繫結。ComboBox的displayMemberPath 用於設定顯示內容，selectedItem的selectedValue用於選擇開支分類的id屬性。

在createExpense 控制器中，可看到如下的程式碼片段：

$scope.expense =  Expense(‘‘, 0,  Date(), ‘‘, $scope.categories =$scope.addExpense = $scope.cancel = ‘app.overview‘

上面的第一行代碼用於初始化一個開支記錄，用Expense的建構函式來實現，並賦值給$scope.expense對象。 開支分類，通過調用CategorySvc服務的介面，從localStorage獲得數組。addExpense 方法用於提交新增的開支記錄，同樣用到了ExpenseSvc服務。最後一個函數$scope.canel使用了UI Router的 $state 服務，導航到首頁面。

運行app，如下：

Details Grid

在前面幾節中，我們分別學習了如何查看、建立、刪除開支記錄。在本節，我們將通過Wijmo5的FlexGrid和CollectionView批量對開支記錄進行呈現，開啟detailsGrid 模板檔案，添加如下程式碼片段：

<ion-view title="Details Grid">  <!-- set overflow-scroll="true" and hand scrolling to native -->  <ion-content class="has-header" overflow-scroll="true">    <wj-flex-grid auto-generate-columns="false" items-source="data" selection-mode="Row" row-edit-ending="rowEditEnding(s,e)" style="position:relative">      <wj-flex-grid-column width="2*" min-width="250" header="Title" binding="title"></wj-flex-grid-column>      <wj-flex-grid-column width="*" min-width="100" header="Amount" binding="amount" format="c2"></wj-flex-grid-column>      <wj-flex-grid-column width="*" min-width="100" header="Date" binding="date"></wj-flex-grid-column>      <wj-flex-grid-column width="2*" min-width="250" header="Description" binding="description"></wj-flex-grid-column>    </wj-flex-grid>  </ion-content>  <ion-footer-bar class="bar button-bar-footer">    <div class="button-bar">      <button type="button" class="button button-dark icon-left ion-close" on-tap="cancel()">Cancel</button>      <button type="button" class="button button-balanced icon-left ion-checkmark" ng-disabled="!data.itemsEdited.length" on-tap="update()">Save</button>    </div>  </ion-footer-bar></ion-view>

在FlexGrid指令下面，我們添加了2個按鈕，Cancel和Save，分別用於當點擊的時候進行取消和儲存操作，資料存放區於localStorage。其中，Save按鈕的預設不可用，通過ngDisabled的運算式進行控制。

FlexGrid 指令，用於在模板內產生Wijmo5的FlexGrid 控制項。我們使用itemsSource 進行資料來源綁定，同時通過autoGenerateColumns=”false”關閉自動產生資料列，以及SelectMode類型為整行Row。同時也設定了FlexGrid的rowEditEnding事件，用於驗證資料輸入。在FlexGrid內部，定義了Columns，分別指定了header、binding、width。

如下代碼是detailsGrid 控制器片段：

$scope.data = $scope.data.trackChanges = $scope.update =   $scope.cancel = ‘app.overview‘$scope.rowEditEnding =  expense = $scope.data.currentEditItem,            isValid = isExpenseValid(expense);               (! expense &&!== ‘‘ &&< 55 &&&&&&>= 0

上面代碼的第一行，通過從localStorage 載入資料，然後初始化CollectionView的對象，繼而賦值給$scope.data對象，用於給前端HTML進行Data-Source綁定資料來源。

接下來看cancel、update方法，cancel方法和上面的一樣，使用了UI Router的$state服務進行回到首頁。update方法，先進行資料判斷，通過核查$scope.data.itemsEdited.length是否有效(是否有開支記錄變更)，然後再調用ExpenseSvc 進行資料修改，對localStorage資料進行儲存處理。

最後，FlexGrid的rowEditEnding事件觸發了rowEditEnding函數，即當row修改完成後尚未cancel、update前觸發。在這裡進行有效性判斷，若無效則cancel並返回。這裡，我們使用了Wijmo 5提供的工具函數：isNumber和isDate來進行判斷。

運行Details Grid如下：

  概述

修改app.routes.js 檔案，從預設的history頁面到overview頁面：

$urlRouterProvider.otherwise(‘/app/history‘‘/app/overview‘);

這個細小的改變使得UI Router 會對沒有明確重新導向的，均會導向overview頁面。

overview頁面代碼如下所示：

<ion-view title="Overview">  <ion-nav-buttons side="right">    <a class="button button-icon icon ion-plus" href="#/app/create"></a>  </ion-nav-buttons>  <ion-content class="has-header padding">    <div ng-show="hasExpenses">      <hgroup class="text-center padding-vertical">        <h2 class="title">          <span ng-class="expensesCssClass">{{ totalExpenses | currency }}</span> of {{ budget | currency }}        </h2>        <h4>{{ budgetMsg }}</h4>      </hgroup>      <wj-flex-chart items-source="categories"-type="Bar" binding-x="name"-content=""-mode="Point"="Tap the chart‘s bars to see history by category"-changed="selectionChanged(s)"-formatter="itemFormatter"="height: 400px;">        <wj-flex-chart-series binding="total"></wj-flex-chart-series>        <wj-flex-chart-axis wj-property="axisX" format="c0"></wj-flex-chart-axis>        <wj-flex-chart-axis wj-property="axisY" reversed="true" major-grid="false" axis-line="true"></wj-flex-chart-axis>      </wj-flex-chart>    </div>    <div ng-hide="hasExpenses">      <h4 class="padding text-center">You haven‘

上面的代碼，首先使用hgroup元素呈現了開支記錄的總和。下面接著使用了Wijmo 5 FlexChart 渲染了每個開支分類的開支金額，在FlexChart 指令內，我們指定了一些屬性，如資料序列、x、y軸，同時當點擊Bar的時候會觸發FlexChart的plot elements 事件，對當前分類詳情做列表呈現。

上面這些功能的實現，基於overview.js檔案的邏輯：

$scope.budget =$scope.hasExpenses =$scope.totalExpenses =$scope.categories =$scope.expensesCssClass = ‘energized‘$scope.budgetMsg = $scope.totalExpenses <=? $filter(‘currency‘)($scope.budget - $scope.totalExpenses).concat(‘ until you reach your monthly limit‘‘currency‘)($scope.totalExpenses - $scope.budget).concat(‘ over your monthly limit‘$scope.expensesCssClass = 0 ===? ‘dark‘===? ‘energized‘>? ‘assertive‘‘balanced‘$scope.selectionChanged =  category =  (sender.selection &&      category =      $state.go(‘app.category-history‘$scope.itemFormatter =  (hitTestInfo.chartElement ===      engine.fill ==

 

預覽如下：

 

• 線上示範地址

• 源碼

Mobile first! Wijmo 5 + Ionic Framework之：費用跟蹤 App