Windows Phone 項目實戰之賬戶助手

前言

 一直想做一個windows phone 應用，一個完完整整的應用，包括設計、編碼到測試。以前的部落格中大都是一些小例子，小技巧，所以本文以一個具體的項目來分享我在開發windows phone 應用程式的心得，希望對大家以後的WP7征程會有一點協助。

一、資料庫準備

賬戶助手，也可以成為賬戶（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 .  
二、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必備良器。

三、Expression Blend 知識準備

Blend是介面處理的利器，方便的產生XAML代碼，我整理了一份 Expression Blend 知識錦分享  大家可以參考一下。這裡由於篇幅原因就略去對Expression Blend的使用介紹了。另外國外的牛人整理的Blend系列也是很好 大家可以去看看 http://www.kirupa.com/blend_wpf/index.htm

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

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

4.2 邏輯設計

大部分程式員的主要任務其實就是將軟體在邏輯上實現，很多時候我們程式員處理的就是邏輯問題。所以我們在寫代碼前需要將邏輯弄清楚，不然寫的代碼也是做無用功！ 以下是AccountHelper的大致流程圖：

流程圖有了，那麼在項目中，我們選擇哪些控制項來呈現我們的資料呢，或者說我們的頁面大概有哪些呢，具體見： 

五、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~~~~~ 

六、Room for Improvement

由於是做Demo，加上時間精力有限，所以很多使用的功能都沒有做，給出的原始碼也僅僅是將大致的架構，裡面可能會有許多問題。當然，你如果想要繼續完善這個Demo，可以從以下方便進行：

6.1. 多賬戶支援
本來就想實現多賬戶的功能的，但是也算是給大家的一個小作業吧，其實就是分別儲存即可。還有就是在啟動程式時，判斷當前是否存在賬戶，如果沒有，需要彈出介面讓使用者建立賬戶；如果有多個賬戶存在，取當前setting中的賬戶。 

6.2. 多幣種支援
6.3. 多分類（現在只有收入、支出）
在現實生活中，肯定不是僅僅收入和支出的，還又可以細分出很多類別，如專註、借貸等等。大家可以將收入、支出更加細化為購物支出、飲食支出、工資收入、獎金收入等等類別。當然實現的話需要加不少東西哦，有興趣的童鞋可以自己嘗試實現。 
6.4. 墓碑化處理
現在的項目中都沒有做墓碑化處理，這肯定不對的，在實際項目中，我們必須做墓碑化處理：我們採用現成的類庫去處理，也可以自己寫代碼去實現。 
6.5 異常處理

後記

寫這麼長的文章還是頭一回（所以特別佩服園子裡那位專門寫長文章的gay）....奈何昨晚看了《建黨偉業》，激動了...所以今天早上抽時間把文章和demo做好了，當然裡面有很多問題，因為需要你的完善... 

Updated:   Windows Phone 項目實戰之賬戶助手升級 、快樂技術沙龍技術分享之賬戶助手

原始碼下載: