If you haven't read Part1 of this post series, Please read first and proceed this post. Today, i am going to explain the view pages that i created using the sencha view components (Tab Pabel, FormPanel, List etc) for my Expense Tracker App.
Home Page:
This is the homepage for my Expense Tracker App. This page contains 3 tabs: Category, Expenses and Settings.
Category Page:
This category tab page will display the list the categories applicable for tracking expenses. Following are the some of those Tea & Coffee, Drinks, Mobile Recharge and Movies etc. Categories List page will display category name with the allocated price and balance price for each one. By Clicking the 'Add' button at the top of the title bar, you will be redirected to the 'Add New Categories' Form. Please refer the below snapshot.
Add/Edit Category Form contains two text fields,
name: Enter the name for the Category
Price: The price in (Rs.) allocated for this category for a month.
Expenses Page:
This Expenses tab page will display all the expenses with filter by Month. By default, it will display all the expenses for the current month. Please refer the below snapshot.
By clicking search icon, date picker field will be displayed at the bottom of the screen for date selection.
Under Expenses Header title, display the expenses summary with total and balance amount for all expenses in a month.
Total Amount: It is the sum of all the categories price for an month
Balance Amount: It is the difference from the total expenses in a month with the above total amount.
By Clicking the 'Add' button at the top of the title bar, you will be redirected to the 'Add New Expenses' Form. Please refer the below snapshot.
Add/Edit Expense Form contains the following fields
name: the name of the person
Notes: short desc about the expenses (Eg: had coffee with my friends near my office tea shop)
Category: select the category name under which this expenses applicable for.
Price: The expense price in (Rs.)
Date: enter the date of the expense.
Settings Page:
This Settings tab page is used to remove all the categories and expenses data stored locally on your mobile.
Hope, you enjoyed this Post. In Part3 of this post series, i will be explaining the code for each view pages in my Expense Tracker App. Hope, see you soon..
Home Page:
This is the homepage for my Expense Tracker App. This page contains 3 tabs: Category, Expenses and Settings.
Category Page:
This category tab page will display the list the categories applicable for tracking expenses. Following are the some of those Tea & Coffee, Drinks, Mobile Recharge and Movies etc. Categories List page will display category name with the allocated price and balance price for each one. By Clicking the 'Add' button at the top of the title bar, you will be redirected to the 'Add New Categories' Form. Please refer the below snapshot.
Add/Edit Category Form contains two text fields,
name: Enter the name for the Category
Price: The price in (Rs.) allocated for this category for a month.
Expenses Page:
This Expenses tab page will display all the expenses with filter by Month. By default, it will display all the expenses for the current month. Please refer the below snapshot.
By clicking search icon, date picker field will be displayed at the bottom of the screen for date selection.
Under Expenses Header title, display the expenses summary with total and balance amount for all expenses in a month.
Total Amount: It is the sum of all the categories price for an month
Balance Amount: It is the difference from the total expenses in a month with the above total amount.
By Clicking the 'Add' button at the top of the title bar, you will be redirected to the 'Add New Expenses' Form. Please refer the below snapshot.
Add/Edit Expense Form contains the following fields
name: the name of the person
Notes: short desc about the expenses (Eg: had coffee with my friends near my office tea shop)
Category: select the category name under which this expenses applicable for.
Price: The expense price in (Rs.)
Date: enter the date of the expense.
Settings Page:
This Settings tab page is used to remove all the categories and expenses data stored locally on your mobile.
Hope, you enjoyed this Post. In Part3 of this post series, i will be explaining the code for each view pages in my Expense Tracker App. Hope, see you soon..
No comments:
Post a Comment