Mobile first! Wijmo 5 + Ionic framework: Fee tracking APP

The cost tracking application was created using the Wijmo5 and Ionic framework to build a Hybird app.

We are based on the Mobile first! Wijmo 5 + Ionic framework: Hello world! "Environment, you will complete the cost tracking app build in this tutorial. The following code structure is the result of this tutorial, please create the files and directories beforehand.

www/-->-->/-->/-->-->-->/-->/ -->/-->/--Angularjs View Code catalog (via ui-/-to-third-party class library, including Ionic, Wijmo, Jqu ery, etc.

Data model

In the cost tracking app, we'll start by creating the data Model,e-r chart as follows

• Category: Category of expenditure

• Expense: Expense Records

• Budget: Budget (will be used below)

In the code, we need to build ANGULARJS services in Www/js/services to model the data models. We use HTML5 's localstorage for local data storage, in the form of JSON. It is important to note that HTML5 local storage can only store strings, and any format stored will be automatically converted to strings, so when reading, you need to do a type of conversion. We are currently implementing HTML5 local storage, and interested readers can also be ported to restful APIs, SQLite and other data storage methods.

After running demo, view the local storage via Chrome debugging:

View expense History

In the Expense history page, 2 features are available: Browse expense history, delete expense records. In order to implement these functions, in the Www\js\controllers\history.js file, add the following code:

$scope. Expenses = Expensesvc.getexpenseswithcategory ();

This line of code provides an expense record that returns local storage. The EXPENSESVC service not only returned the object of expenditure, but also returned the expense classification. Based on this data, the

In the www\templates\history.tpl.htm file, add the Ionic ion-list directive within the Ion-context directive, as shown in the following code:

{{Expense.title}} {{expense.date | date: ' ShortDate '}}

The ion-list directive, used to generate a sorted HTML list, whose sub-label Ion-item directives are used to generate HTML list items. In the ngrepeat directive, we used "track by" to improve performance when the expense set was modified, and the tutorials refer to the blog using track-by with Ngrepeat in AngularJS 1.2.

Now add the Delete expense record button to swipe left to the Delete button, click Delete to delete the expense record.

Add the Ion-option-button tag before the ion-item tag is closed, with the following code:

Delete

Ion-option-button is another instruction provided by Ionic for trial use within the Ion-item directive. By default, Ion-option-button is hidden, and when you swipe left in Ion-item, the button is visible. This feature is especially important for small-screen devices. It is also possible to manage this permission through the Can-swipe built into the directive-if some users do not allow permission to delete operations.

In the Delete function (Controller), you can see the following code snippet:

function Confirmdelete (Expenseid) {//delete expense by it ID property $scope. expenses = Expensesvc.deleteexpense (ex Penseid);}

With this code, we call the deleteexpense of the Expensesvc service to delete the specified expense record (Expenseid), and this method also returns a collection of expense records for updating the page data. In a real-world scenario, it is not ideal to delete records that return the entire collection, but here we use the demo instructions. Try to delete a few rows of data in a hands-on attempt.

In addition, in removing this dangerous operation, you should add a dialog box to remind the user again. Here we use the $ionicactionsheet service services provided by Ionic to achieve this. The Confirmdelete function to update the Www\js\controllers\history.js controller code is as follows:

$scope. confirmdelete = Hidesheet = ' Is you sure the you\ ' d like to delete this expense? ' Cancel ' Delete ' $scope. Expenses =

The Ionicactionsheet service provides a custom interface to implement a variety of prompt dialog boxes. The above code implements the prompt dialog box effect as follows:

Create Expense records

You can manually create a new expense record by clicking on the upper right corner of the history page. In the www\templates\createexpense.tpl.htm file, the code is as follows:

                                                                                                                                                                                                                                                                         Cancel                 save

The content is presented here using the Ion-view and ion-content instructions. Then add the form, use the ng-show instruction to verify the input---the WIJMO instruction has been limited in the input threshold, so there is no need to verify. At the same time Wijmo Calendar and inputnumber should be self-explanatory, the ComboBox may not be.

In the ComboBox Association data Model, we use the ItemsSource attribute for data binding. The DisplayMemberPath of the ComboBox is used to set the display content, and the SelectedItem SelectedValue is used to select the id attribute of the expense category.

In the Createexpense controller, you can see the following code snippet:

$scope. Expense = Expense (", 0, Date ()," ", $scope. Categories = $scope. Addexpense = $scope. Cancel = ' App.overview '

The first line of code above is used to initialize an expense record, implemented with the expense constructor, and assigned to the $scope.expense object. The expense classification, obtained from the Localstorage array by invoking the interface of the CATEGORYSVC service. The Addexpense method is used to submit additional expense records, and the Expensesvc service is also used. The last function, $scope.canel, uses the $state service of the UI router to navigate to the main page.

Run the app as follows:

Details Grid

In the previous sections, we learned how to view, create, and delete expense records, respectively. In this section, we will render the expense records in bulk through Wijmo5 's FlexGrid and CollectionView, open the Detailsgrid template file and add the following code snippet:

<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="   Min-width= " header=" "title"  binding= "title" ></wj-flex-grid-column>       <wj-flex-grid-column width= "*"  min-width= " header=" "Amount"   binding= "Amount"  format= "C2" ></wj-flex-grid-column>      < Wj-flex-grid-column width= "*"  min-width= " header=" "Date"  binding= "date" ></ wj-flex-grid-column>   &nbsp  <wj-flex-grid-column width= " min-width="  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>

Below the FlexGrid directive, we have added 2 buttons, cancel and save, respectively, to cancel and store operations when clicked, and data to be stored in localstorage. Where the Save button is not available by default and is controlled by an ngdisabled expression.

The FlexGrid directive, which is used to generate Wijmo5 FlexGrid controls within a template. We use ItemsSource for data source binding, and we turn off the automatic generation of data columns by autogeneratecolumns= "false", and the SelectMode type is row row. The FlexGrid roweditending event is also set to validate the data entry. Inside the FlexGrid, the columns is defined, and the header, binding, width are specified respectively.

The following code is the Detailsgrid controller fragment:

$scope. Data = $scope. Data.trackchanges = $scope. Update = $scope. Cancel = ' App.overview ' $scope. roweditending = Expense =               $scope. Data.currentedititem, isValid = isexpensevalid (expense); (! Expense &&!== ' &&< &&&&&&>= 0

The first line of the above code, by loading the data from Localstorage, then initializing the CollectionView object, and assigning it to the $scope.data object, is used to data-source the binding data source to the front-end HTML.

Next look at the Cancel, update method, the Cancel method is the same as above, using the UI router $state service to go back to the first page. Update method, the data is judged first, by verifying whether the $scope.data.itemsedited.length is valid (whether there is a change in expenditure records), and then call EXPENSESVC for data modification, the Localstorage data storage processing.

Finally, the FlexGrid roweditending event triggers the roweditending function, which is triggered after the row modification has not been cancel or before the update. In this case, the validity of the judgment, if invalid, cancel and return. Here, we use the tool functions provided by WIJMO 5: Isnumber and isdate to make judgments.

Run the details grid as follows:

Overview

Modify the App.routes.js file from the default history page to the overview page:

$urlRouterProvider. Otherwise ('/app/history '/app/overview ');

This small change makes the UI Router to the overview page without explicit redirection.

The overview page code looks like this:

<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" >       
The above code first uses the Hgroup element to present the sum of the expense records. The following then uses WIJMO 5 Flexchart to render the expense amount for each expense category, within the Flexchart directive, we specify properties such as data series, x, y axes, and trigger the Flexchart plot elements event when the bar is clicked To present a list of the current classification details.
 
The above implementation of these features, based on the logic of the Overview.js file:
 
$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 (' A Pp.category-history ' $scope. Itemformatter = (Hittestinfo.chartelement = = = Engine.fill = =
 
 
The preview is as follows:
 
  
 
 

  
  
 
   
Online Demo Address
 
   
Source
 
  
 
 
 
Mobile first! Wijmo 5 + Ionic framework: Fee tracking APP