程序笔记   发布时间:2022-05-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Mobile first! Wijmo 5 + Ionic Framework之:费用跟踪 App大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

费用跟踪应用采用了Wijmo5和Ionic Framework创建,目的是构建一个hybird app。

我们基于《Mobile first! Wijmo 5 + Ionic Framework之:Hello World!》的环境,将在本教程中完成费用跟踪App的构建。下面的代码结构是本教程完成要达到的效果,请预先创建好文件和目录。

www/                     --> 工程根目录
  index.HTML         --> app 布局文件 (主HTML文件)
  CSS/                   --> CSS 目录
  Js/                    --> JavaScript 目录
    app.Js               --> 主模块
    app.routes.Js        --> 主路由模块
    controllers/         --> app控制器目录
    models/                 --> app模块目录
    @R_874_9260@ces/        --> app 数据@R_874_9260@ce目录
  templates/             --> angularJs视图代码目录(通过UI-Router调用) 
  lib/           --> 第三方类库,包括Ionic,Wijmo,jquery等

 

数据模型(Data Model)

在费用跟踪App中,我们先要创建Data Model,E-R图如下

Mobile first! Wijmo 5 + Ionic Framework之:费用跟踪 App

 

  • category:开支分类
  • Expense:开支记录
  • Budget: 预算(下面会用到)

在代码中,我们需要在www/Js/@R_874_9260@ces构建AngularJs @R_874_9260@ces来对数据模型进行建模。我们会用到HTML5的localstorage进行数据本地存储,采用的格式为JsON。 需要注意的是,HTML5本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换。目前我们实现的是HTML5 本地存储,有兴趣的读者还可移植为RESTful API、sqlite等数据存储方法。

运行demo后,通过Chrome调试查看的本地存储截图:

Mobile first! Wijmo 5 + Ionic Framework之:费用跟踪 App

浏览开支历史记录

在开支历史页面中,提供了2个功能:浏览开支历史记录、删除开支记录。为了实现这些功能,在www\Js\controllers\history.Js文件中,添加如下代码:

//从localstorage获得开支数据
$scope.expenses = ExpenseSvc.getExpensesWithcategory();

这行代码提供了返回本地存储的开支记录。ExpenseSvc 服务,不仅返回了开支对象,同时也返回了开支分类。基于这些数据,在

www\templates\history.tpl.htm文件中,在ion-context指令内添加Ionic的ion-List指令,代码如下:

<ion-vIEw title="History"> ion-nav-buttons sIDe="right"> a class="button button-icon icon ion-plus" href="#/app/create"></a</ion-nav-buttonsion-content ="has-header"ion-List> ion-item ng-repeat="expense in expenses | orderBy:'date':reverse track by expense.ID" class="item item-icon-left"> i ="icon ion-record {{ expense.category.CSSClass }}"idiv ="row"> ="col-50"> h2>{{ expense.title }}div="col-25"small ="light-grey">{{ expense.date | date: 'shortDate' }}small> {{ expense.amount | currency }} ion-itemion-content> ion-vIEw>

 

ion-list指令,用于生成排序的HTML列表,其子标签ion-item指令用于生成HTML列表项。 在NgRepeat指令中,我们使用了“track by”,目的是在对开支集合修改时提升性能,相关教程可参博客《Using Track-By With ngRepeat In AngularJS 1.2 》。

现在添加删除开支记录按钮,用于向左滑动出现删除按钮、点击删除可删除开支记录。

在ion-item标签关闭前添加ion-option-button标签,代码如下:

ion-option-button ="button button-assertive" on-tap="confirmdelete(expense.ID)">deleteion-option-button>

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),同时这个方法也会返回开支记录集合用于更新页面数据。在真实的场景中,删除记录返回整个集合不是最理想的,但在此处我们用于演示说明。可动手试着删除几行数据试试。

Mobile first! Wijmo 5 + Ionic Framework之:费用跟踪 App

另外,在删除这种比较危险的操作中,应该需要添加对话框再次提醒一下用户。这里我们使用了Ionic提供的$ionicActionSheet @R_874_9260@ce服务来实现。更新www\Js\controllers\history.Js控制器代码的confirmdelete函数如下:

删除开支记录 $scope.confirmdelete = function (expensEID) { ionic的 确认对话框 show()函数返回了一个函数,用于隐藏actionSheet var hIDeSheet = $ionicActionSheet.show({ titleText: 'Are you sure that you\'d like to delete this expense?',cancelText: 'Cancel'delete' () { 如果用户选择cancel,则会隐藏删除按钮 $ionicListDelegate.cloSEOptionbuttons(); },destructivebuttonClicked: 通过ID删除开支记录 $scope.expenses = ExpenseSvc.deleteExpense(expensEID); 隐藏对话框 hIDeSheet(); } }); };

ionicActionSheet服务提供了自定义接口,可实现各种提示对话框。上面代码实现的提示对话框效果截图如下:

 

Mobile first! Wijmo 5 + Ionic Framework之:费用跟踪 App

 

创建开支记录

点击History页面右上角的

Mobile first! Wijmo 5 + Ionic Framework之:费用跟踪 App

可实现手工创建一条新的开支记录。在www\templates\createExpense.tpl.htm文件中,代码如下:

="Create"="has-header padding"form name="frmCreate"="custom-form-List List"> label ="item item-input"> ="icon ion-alert-circled placeholder-icon assertive" ng-show="!frmCreate.title.$prisTine && frmCreate.title.$invalID"input ="title" type="text" placeholder="title" ng-model="expense.title" ng-maxlength="55" requiredlabelwj-input-number value="expense.amount" min="0" step="5" format="c2"wj-input-numberwj-calendar ="expense.date"wj-calendar> wj-combo-Box items-source="categorIEs" display-member-path="HTMLContent" SELEcted-value-path="ID" SELEcted-value="expense.categoryID" is-editable="false" is-content-HTML="true"wj-combo-Boxtextarea placeholder="Description"="expense.description"textarea="button-bar"button type="button"="button button-dark icon-left ion-close"="cancel()">Cancelbutton="button button-balanced icon-left ion-checkmark"="addExpense()" ng-Disabled="frmCreate.title.$invalID">Saveform>

这里使用ion-vIEw 和 ion-content 指令进行内容展现。然后再添加Form,用ng-show指令验证输入内容---Wijmo的指令已经在输入门限做了限制,故不需要验证。同时Wijmo Calendar 和inputnumber应该是自解释,ComboBox中可能不是。

ComboBox关联数据模型中的开支分类,我们通过其itemssource属性进行数据绑定。ComboBox的displaymemberPath 用于设置显示内容,SELEctedItem的SELEctedValue用于选择开支分类的ID属性。

在createExpense 控制器中,可看到如下的代码片段:

初始化Expense object $scope.expense = new Expense('',new Date(),'',1)">null); 获得HTML类型的开支分类 $scope.categorIEs = categorySvc.getCategorIEsWithHTMLContent(); 用localstorage存储开支数据 $scope.addExpense = () { insert expense ExpenseSvc.insertExpense($scope.expensE); $scope.cancel(); }; 取消方法 (如,可回到主页面) $scope.cancel = () { $state.go('app.overvIEw'); };

上面的第一行代码用于初始化一个开支记录,用Expense的构造函数来实现,并赋值给$scope.expense对象。 开支分类,通过调用categorySvc服务的接口,从localstorage获得数组。addExpense 方法用于提交新增的开支记录,同样用到了ExpenseSvc服务。最后一个函数$scope.canel使用了UI Router的 $state 服务,导航到主页面。

运行app,截图如下:

Mobile first! Wijmo 5 + Ionic Framework之:费用跟踪 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 控制器片段:

通过localstorage获得开支记录数据,并初始化CollectionVIEw $scope.data = new wijmo.collections.CollectionVIEw(ExpenseSvc.getExpenses()); CollectionVIEw的变更可跟踪 $scope.data.trackChanges = true; 批量更新开支记录 $scope.update = make sure items have been edited if ($scope.data.itemsEdited.length) { bulk update expenses ExpenseSvc.updateExpenses($scope.data.itemsEdited); return to overvIEw page $scope.cancel(); } }; 取消方法 (如导航到主页面) $scope.cancel = ); }; FlexGrID.rowEditEnding事件处理 $scope.rowEditEnding = (sender,args) { var expense = $scope.data.currentEditItem,1)"> get expense being edited isValID = isExpenseValID(expensE); valIDate expense if the expense isn't valID,cancel the edit operation if (!isValID) { $scope.data.cancelEdit(); return; } }; 验证函数:确保开支记录数据合法有效 isExpenseValID(expensE) { return expense && expense.title !== '' && expense.title.length < 55 && wijmo.isnumber(expense.amount) && wijmo.isDate(expense.datE) && expense.amount >= 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截图如下:

Mobile first! Wijmo 5 + Ionic Framework之:费用跟踪 App

 

概述

修改app.routes.Js 文件,从默认的history页面到overvIEw页面:

$urlRouterProvIDer.otherwise('/app/history');

to:

$urlRouterProvIDer.otherwise('/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">{{ @R_129_10586@lExpenses | currency }}</span> of {{ budget | currency }}
        </h2>
        <h4>{{ budgetmsg }}</h4>
      </hgroup>
      <wj-flex-chart items-source="categorIEs"
                     chart-type="bar" binding-x="name"
                     tooltip-content=""
                     SELEction-mode="Point"
                     footer="Tap the chart's bars to see history by category"
                     SELEction-changed="SELEctionChanged(s)"
                     item-formatter="itemFormatter"
                     style="height: 400px;">
        <wj-flex-chart-serIEs binding="@R_129_10586@l"></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't added any expenses yet!  Click the <i class="icon ion-plus"></i> button to get started!</h4>
    </div>
  </ion-content>
</ion-vIEw>

上面的代码,首先使用hgroup元素呈现了开支记录的总和。下面接着使用了Wijmo 5 FlexChart 渲染了每个开支分类的开支金额,在FlexChart 指令内,我们指定了一些属性,如数据序列、x、y轴,同时当点击bar的时候会触发FlexChart的plot elements 事件,对当前分类详情做列表呈现。

上面这些功能的实现,基于overvIEw.Js文件的逻辑:

通过BudgetSvc服务,获得localstorage数据 $scope.budget = BudgetSvc.getBudget(); 判断是否有开支记录,返回bool $scope.hasExpenses = ExpenseSvc.hasExpenses(); 获得开支的总金额 $scope.@R_129_10586@lExpenses = ExpenseSvc.getExpense@R_129_10586@l(); 获得各个分类的小计金额 $scope.categorIEs = ExpenseSvc.getCategorIEsExpenseSumMary(); 初始化CSS 样式 $scope.expensesCSSClass = 'energized'设置开支金额显示字符串 // NOTE: use $filter @R_874_9260@ce to format the @R_129_10586@l prior to concatenaTing the String $scope.budgetmsg = $scope.@R_129_10586@lExpenses <= $scope.budget ? $filter('currency')($scope.budget - $scope.@R_129_10586@lExpenses).concat(' until you reach your monthly limit') : $filter('currency')($scope.@R_129_10586@lExpenses - $scope.budget).concat(' over your monthly limit'设置开支CSS样式 $scope.expensesCSSClass = 0 === $scope.@R_129_10586@lExpenses ? 'dark' : $scope.@R_129_10586@lExpenses === $scope.budget ? 'energized' : $scope.@R_129_10586@lExpenses > $scope.budget ? 'assertive' : 'balanced'*** FlexChart's SELEctionChanged event handler $scope.SELEctionChanged = (sender) { var category = ; if (sender.SELEction && sender.SELEction.collectionVIEw.currentItem) { get the currently SELEcted category category = sender.SELEction.collectionVIEw.currentItem; navigate to the category history page to display expenses for SELEcted category $state.go('app.category-history'{ category: category.slug }); } }; *** set color of FlexChart's plot elements $scope.itemFormatter = (ENGIne,hitTesTinfo,defaultFormat) { if (hitTesTinfo.chartElement === wijmo.chart.ChartElement.SerIEsSymbol) { set the SVG fill and stroke based on the category's bgcolor property ENGIne.fill = hitTesTinfo.item.bgcolor; ENGIne.stroke = hitTesTinfo.item.bgcolor; defaultFormat(); } };

 

预览截图如下:

Mobile first! Wijmo 5 + Ionic Framework之:费用跟踪 App

 

下载地

 

相关阅读:

开放才能进步!Angular和Wijmo一起走过的日子

Angular vs React 最全面深入对比

Wijmo已率先支持Angular4 & TypeScript 2.2

 

大佬总结

以上是大佬教程为你收集整理的Mobile first! Wijmo 5 + Ionic Framework之:费用跟踪 App全部内容,希望文章能够帮你解决Mobile first! Wijmo 5 + Ionic Framework之:费用跟踪 App所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:+5first!