Windows Phone 項目實戰之帳戶助手

 前言

 一直想作一個windows phone 應用，一個完完整整的應用，包括設計、編碼到測試。之前的博客中大都是一些小例子，小技巧，因此本文以一個具體的項目來分享我在開發windows phone 應用程序的心得，但願對你們之後的WP7征程會有一點幫助。

1、數據庫準備

帳戶助手，也能夠成爲帳戶（Money）管理系統。你們看到管理系統，第一個想到的詞彙是什麼？ 是否是諸如「信息管理系統」、「數據庫」之類的詞語，是的，咱們帳戶助手中須要使用數據庫。因爲目前的Windows Phone 中沒有內置數據庫的支持（Mango更新會提供SQL-CE的支持） ，咱們只能使用第三方提供的類庫了。博客園的 chenkai 對Windows Phone 7 平臺上數據庫的使用作了一個很好的介紹。這兒我採用 winphone7db .
 下圖是winphone7db項目的截圖
   它實現的方法是使用xml進行存儲，不知道你們對.Net 2.0中的DataTable和DataSet有沒有什麼印象，我之前常常接觸這兩個東東，其實他們也是基於XML的。下面咱們來寫一個簡單的輔助類去操做winphone7db並利用Windows Phone 7 隔離存儲空間資源管理器去查看咱們存進去的數據長什麼樣的。
  
 而後咱們在界面中放置一個按鈕，按鈕的點擊事件就是往數據庫中插入數據，大體代碼以下
 
運行後，咱們來看看應用程序隔離存儲空間中多了些什麼（關於Windows Phone 7 隔離存儲空間資源管理器能夠 參考個人博客 ）
 
右擊AccountHelper.wp7Db.Model.Money 選擇下載，使用UltraEdit或者其餘文本編輯器打開後會發現裏面的內容實際上是一個xml，以下 
 
note: NULL is auto generated by  isolatedstorage explorer...
winphone7db測試項目源代碼下載   
數據庫有了，接下來須要準備什麼呢？對了，是程序框架！那麼windows phone 應用程序使用神馬框架最好呢？個人回答是MVVM Light....maybe it is different for you .  

2、MVVM知識準備

2.1 MVVM簡介
 MVVM的簡介網上有不少資源，我就不重複了。我把本身的一點理解拿出來跟你們分享。MVVM，字母的全稱想必你們都知道（Model-View-ViewModel）。我這裏想要說明的一點就是MVVM通常是使用一個類去綁定整個頁面的DataContext，這個類將在頁面構造函數調用前被實例化（因此咱們能夠作一些初始化的事情...）。
2.2 MvvmLight簡介
MVVM的框架不少，好比WPF最經常使用的Prism以及咱們項目中用到的 MvvmLight  .

The MVVM Light Toolkit is a set of components helping people to get started in the Model - View - ViewModel pattern in Silverlight and WPF. It is a light and pragmatic framework that contains only the essential components needed. 

MvvmLight是開源的項目，咱們能夠查看其源代碼，並且MvvmLight是基於MIT協議的，咱們能夠任意修改。而且MvvmLight提供了Visual Studio和Expression Blend的模板，簡化咱們的開發。 
PS：MvvmLight的源代碼在其目錄GalaSoft.MvvmLight (NET35)下

2.3 MvvmLight之Command

Command是WPF和Silverlight中的重要特性之一， 可是在silverlight for windows phone 中對Command的支持並不友好，因此咱們須要藉助現有的框架去實現Command。熟悉WPF和Silverlight的朋友應該都知道ICommand的重要用處，MvvmLight中的Command也實現了這個接口。

上圖是MvvmLight中Command的初步實現方法，能夠看到有兩個類，一個普通Command，一個泛型的Command。分別有CanExecute（可否執行該命令，一般用於限制命令執行的條件），Execute（執行該命令）。RaiseCanExecuteChanged（是否能執行命令的條件發生改變）、RelayCommand（構造函數）。
第三個類圖是擴展的Button，即往Button中附加Command及CommandParameter。（附件屬性是一門「可怕」的技術，至關的神奇）.

這個類的用處是將事件轉換爲命令，若是後面項目中用到再說。

2.4 MvvmLight之Messenger

 你們用過MSN麼，MSN的全稱其實就是Messenger。你們用MSN來作神馬，不是有QQ麼。一位國外的朋友說道，外國人通常都用MSN。 Messenger在MvvmLight中的做用就是用於View和ViewModel中的通訊的。 有童鞋會問，View和ViewModel不是經過數據綁定去溝通的麼？綁定不是萬能的，在某些時候綁定甚至會影響程序的性能，由於直接的賦值確定比經過綁定引擎去賦值更快捷。Messenger能夠在View或者ViewModel中註冊（Register）一個"帳號（token）"以及對於的處理委託（一般是對View或者ViewModel中的對象進行的操做）,而後再ViewModel或者View中對其發送消息（Send），收到消息後，委託中相應的代碼就會執行。你們能夠聯想CS遊戲中的×××，我在你家裏埋了個×××，而後我可使用遙控器控制×××是否爆炸....來看下其實現方法，下圖是Messenger的類結構圖
 
 Messenger還有一個用處就是能夠在ViewModel中使用MessageBox...

PS：我一開始真沒理解爲何要用Messenger，接觸過幾個用法以及看了下源代碼中的註釋後稍微有所瞭解。你們有興趣能夠看看源代碼，想一想其中的道理。

2.5 小結 

 MvvmLight是一款輕量級的MvvmLight框架，使用簡單，功能強大，是居家旅行，開發WP7必備良器。

3、Expression Blend 知識準備

Blend是界面處理的利器，方便的生成XAML代碼，我整理了一份 Expression Blend 知識錦分享  你們能夠參考一下。這裏因爲篇幅緣由就略去對Expression Blend的使用介紹了。另外國外的牛人整理的Blend系列也是很好 你們能夠去看看 http://www.kirupa.com/blend_wpf/index.htm
 

4、需求分析與邏輯設計

4.1需求分析
在詳細介紹如何去實現這個程序以前，有必要介紹下爲何要實現帳戶助手（即軟件工程中的需求分析，很重要的一點）。我之前有記帳本的習慣，即本身花了多少錢，花在那些地方。有個不錯的軟件，記帳本（JZben），作的很是不錯。可是因爲記性不是很好，晚上可能就想不起來今天哪些地方花錢了，或者前幾天花了多少錢…由於程序是安裝在電腦上的，你可能只有某個時間才能操做它，這就是爲何要在Windows Phone 上實現相似軟件的緣由了，讓你隨時隨地記錄你資金（資金貌似有點誇大了…）的流向。因爲是簡單的記錄，因此我這裏儘量的簡單化，好比收支類型就只有收入和成本兩種，其實還有不少的狀況，如轉帳、借貸等等。
ok，需求分析簡單肯定了，咱們有必要作這個軟件，並且需求也不是不少，稍微整理下：
1. 記錄花在什麼地方
2. 隨時隨地記錄（這個已經Over，windows phone is always with you）
3. 能出個月總收入、月總支出、月合計的數字
4. 若是能出個圖表就更好了
5. 簡單易用，漂亮大方（這個多是因此軟件都要求這樣的）

Okay，我作的AccountHelper基本上就是按照上述需求來實現的。 

4.2 邏輯設計

大部分程序員的主要任務其實就是將軟件在邏輯上實現，不少時候咱們程序員處理的就是邏輯問題。因此咱們在寫代碼前須要將邏輯弄清楚，否則寫的代碼也是作無用功！ 如下是AccountHelper的大體流程圖：

流程圖有了，那麼在項目中，咱們選擇哪些控件來呈現咱們的數據呢，或者說咱們的頁面大概有哪些呢，具體見下圖： 

5、Coding

在軟件工程中，Coding佔的比例不大。可是在實際開發中，不少人每每花70%-80%的時間在Coding上。大部分人認爲本身能夠一邊設計一邊編碼，而每每這種思想會讓你事半功倍！我記得我之前有說過一句話「 勞力者下，勞智者中，勞人者上 」。不少程序員雖然號稱作的是腦力活動，其實他們作的是勞力的工做。他們每每不肯意花時間在思考上，而是花在動手上：整個項目這兒看看，那兒瞧瞧。看了一點後就認爲懂了，就想着照葫蘆畫瓢…哦，Dear….我之前也有相似的想法，我沒吃過豬肉，還沒見過豬跑麼…「給我一個Demo，我能給你造10個相似的Demo」…..難怪山寨在國內這麼流行….

額，扯遠了。以上那段話的意思是讓你們多多注重需求分析和邏輯設計的重要性，若是你的邏輯錯了，軟件還能夠改正回來，若是你的需求錯了，那軟件大都只能推倒重來…okay，下面進行Coding階段，我儘可能以最簡潔的語言將大體的編碼過程講明白，若是不明白的，能夠微博上找我私聊，哈哈.

右上圖看，咱們總共須要這些頁面：MainView（首頁），SettingView（設置頁），NewChargeView（新建頁）以及ChartView（圖表頁）。下面我們逐個攻克之.（Note：我只會介紹大體思路，而不是詳細的過程）

5.1  項目搭建

 
如上圖，是主項目的大體框架，咱們將不一樣做用的類放在不一樣的命名空間下，方便之後管理。主要的View同上的設計圖。固然，這裏須要引入一些命名空間。以下圖所示：
 

5.2  首頁實現 

首頁是一個全景視圖控件，有四個項：菜單項、支出列表、收入列表和我的資料頁。大體的效果以下圖：
 
收入以及成本列表其實就是兩個ListBox，沒什麼難度，只要你們數據綁定正確，數據就可以正常顯示，惟一的區別就是你的ListBox漂亮程度（P.S 美工很差，列表不怎麼漂亮，嘿嘿）。
下面來看一下菜單項是如何實現的，咱們看到菜單項有6個菜單，我這裏採用綁定來實現，即在ViewModel中初始化這些菜單，而且這些菜單的Command都綁定的同一個，那麼咱們若是區分用戶點擊的是哪一個菜單呢?咱們知道Command是能夠傳遞參數的，是的，就是經過CommandParameter來實現的。下圖是Panorama項目的XAML代碼：
 
能夠看到是利用一個現有的turnstile實現，而這個turnstile是繼承自ItemsControl的，因此這些菜單其實就是一個個ItemsControl。他又一個模板TuenstileItemTemplate，咱們的綁定、Command都是寫在模板中的：

 

前臺XAML代碼準備好了，咱們須要在相應的ViewModel中準備相應的屬性，從XAML中能夠看到Menu的數據源是一個名爲MenuList的東東。那這個東東是神馬呢？咱們這裏採用的是在MVVM中採用的集合 ObservableCollection

咱們在ViewModel中實例化屬性，並給屬性初始化，下面的代碼便是初始化菜單：

 
相應的Command處理代碼，咱們根據傳遞過來的Type分別去執行相應的菜單命令
 
細心的朋友能夠發現，在上面的代碼中咱們使用了Messenger，那麼咱們發消息給誰呢？上面的意思貌似是我想要在ViewModel中實現頁面的跳轉。那咱們來看一下Messenger在哪註冊的。咱們須要在MainView的後置代碼中註冊這個Messenger，用以實現頁面的跳轉。
 
上面有詳細的註釋，相信你們可以看懂，下面來看一下個人資料頁的實現。額，上圖的收入支出都是亂寫的...咱們在App的後置代碼中定義了一個全局變量，記錄當前用戶的資料，如用戶名、當月收入、當月支出等等信息，申明一個屬性
public static UserInfo CurrentUser { get; set; }  
而後在構造函數中去實例化，去加載。
 
至於收入、支出列表很簡單，就是兩個ListBox，就不介紹了，下面再給出MainViewModel的構造函數：
 

5.3  新建頁實現

新建頁面是一個標準的PhoneApplicationPage，裏面有一些能夠輸入的文本框，讓用戶輸入信息，還有一個ApplicationBar，可讓用戶保存數據。
 

5.4  設置頁實現

設置界面未實現~~~i am sorry~~~~~ 

6、Room for Improvement

因爲是作Demo，加上時間精力有限，因此不少使用的功能都沒有作，給出的源代碼也僅僅是將大體的框架，裏面可能會有許多問題。固然，你若是想要繼續完善這個Demo，能夠從如下方便進行：

6.1. 多帳戶支持 原本就想實現多帳戶的功能的，可是也算是給你們的一個小做業吧，其實就是分別存儲便可。還有就是在啓動程序時，判斷當前是否存在帳戶，若是沒有，須要彈出界面讓用戶建立帳戶；若是有多個帳戶存在，取當前setting中的帳戶。 
6.2. 多幣種支持
6.3. 多分類（如今只有收入、支出）
在現實生活中，確定不是僅僅收入和支出的，還又能夠細分出不少類別，如專一、借貸等等。你們能夠將收入、支出更加細化爲購物支出、飲食支出、工資收入、獎金收入等等類別。固然實現的話須要加很多東西哦，有興趣的童鞋能夠本身嘗試實現。 
6.4. 墓碑化處理
如今的項目中都沒有作墓碑化處理，這確定不對的，在實際項目中，咱們必須作墓碑化處理：咱們採用現成的類庫去處理，也能夠本身寫代碼去實現。 
6.5 異常處理

後記

寫這麼長的文章仍是頭一回（因此特別佩服園子裏那位專門寫長文章的gay）....奈何昨晚看了《建黨偉業》，激動了...因此今天早上抽時間把文章和demo作好了，固然裏面有不少問題，由於須要你的完善... 

源代碼下載: