在這裡,您已經準備好要顯示資料的後端來源(這裡使用的是政府開放資料),接下來就是需要開始建立專案與進行相關設定。
在這個階段的練習,您將會學會底下的 Xamarin.Forms 的開發技術:
- 使用 Visual Studio 2015 增加 Prism 專案樣版
- 建立 Prism for Xamarin.Forms 的專案
- 升級與安裝必要的套件(NuGet Package)或者插件(Plug-ins)
- 建立專案資料夾
這篇章節的練習專案的原始程式碼將會存放在 GitHubhttps://github.com/vulcanlee/XFAppSample/tree/master/XFCreative/1.BuildProject 內,在這個目錄下,會有兩個目錄:
Starter這個目錄將會存放當您要進行練習開發這個專案之前,Visual Studio 專案的原始檔案。 Completed這個目錄將會存放當您要進行練習開發這個專案完成之後,Visual Studio 專案的原始檔案。
使用 Visual Studio 2015 增加 Prism 專案樣版
安裝 Prism Template Pack
- 首先,開啟 Visual Studio 2015
- 點選功能表
工具
>擴充功能與更新
選項 - 在
擴充功能與更新
對話窗內,點選線上
>Visual Studio 組件庫
- 在右上方文字輸入盒內,輸入
Prism Template Pack
,並且按下Enter
按鍵 - 點選搜尋出來的
Prism Template Pack
項目,點選下載
按鈕,安裝Prism Template Pack
組件到您的Visual Studio 2015 內;安裝完成後,您需要點選立即重新啟動
按鈕,讓您的 Visual Studio 2915 重新啟動之後,這次的安裝才會生效。
建立 Prism for Xamarin.Forms 的專案
- 當 Visual Studio 重新啟動之後,點選功能表
檔案
>新增
>專案
- 在
新增專案
對話窗內,點選範本
>Visual C#
>Prism
>Prism Unity App (Forms)
,並且在底下名稱欄位中,輸入XFCreative
最後,點選確定
按鈕。 - 當專案建立到一半,若您的開發環境還沒有建置與設定完成 Mac 電腦與 Xamarin Studio for Mac 系統,此時會看到
Xamarin Mac Agent Instructions
對話窗出現,這個對話窗是要提醒您進行與 Mac 電腦連線設定,這是因為,您無法在 Windows 作業系統進行 iOS 相關應用程式的建立與設計工作,而是需要透過 Mac 電腦安裝的 XCode 來協助您完成這些 iOS 應用程式的建立工作。不過,這不影響您繼續開發 Xamarin.Forms 的應用程式,只不過此時,您無法編譯與執行 iOS 的應用程式。 - 接著會看到
新的通用Windows專案
對話視窗,此時,您只需要按下確定
按鈕即可,此時,專案精靈會繼續完成相關平台的專案建立工作。 - 最後,整個新的 Xamarin.Forms 專案就建立完成了。
升級與安裝必要的套件(NuGet Package)或者插件(Plug-ins)
在這個專案內,將會使用到許多不同的 NuGet 套件 (Package),因此,您需要先在這裡把這些套件安裝到所有的專案內,方便日後開發作業可以更加順利。
- 滑鼠右擊方案
XFCreative
,選擇管理方案的 NuGet 套件
,在NuGet - 解決方案
頁面中,切換到瀏覽
標籤頁次內,請在文字輸入盒中輸入,Behaviors.Forms
並且開始搜尋這個套件,並且安裝到所有的專案內。使用這個套件,可以讓您在宣告 XAML 定義的時候,使用 XAML 提供的行為特性功能,例如,可以綁定當某個事件發生的時候,將會執行某個指定的 ICommand。這項功能對於有在開發 WPF 或者 Windows UWP 的開發者而言,必定不陌生,因為,在這些環境之下,可以使用 Blend SDK 所提供的各種不同行為(Behaviors)功能,來擴增或者豐富您的 XAML 宣告。若在安裝完成這個套件之後,出現了底下訊息Xamarin.Forms 2.2.0.4-pre1 的套件無法解除安裝,請重新啟動 Visual Studio 已完成此程序
此時,請點選Restart
按鈕,以重新啟動 Visual Studio 2015 - 滑鼠右擊方案
XFCreative
,選擇管理方案的 NuGet 套件
,在NuGet - 解決方案
頁面中,切換到瀏覽
標籤頁次內,請在文字輸入盒中輸入,Newtonsoft.Json
並且開始搜尋這個套件,並且安裝到所有的專案內。'Newtonsoft.Json' 這個套件,可以讓您進行 JSON 物件的 序列化 (Serialization) 或者 反序列化 (Deserialization)) 的操作;這項功能將會提供當從網路取得開發資料的 JSON 定義資料之後,接著,便可以將這些 JSON 定義文字轉換成為 .NET 的物件。 - 滑鼠右擊方案
XFCreative
,選擇管理方案的 NuGet 套件
,在NuGet - 解決方案
頁面中,切換到瀏覽
標籤頁次內,請在文字輸入盒中輸入,Plugin.Share
並且開始搜尋這個套件,並且安裝到所有的專案內。您可以在核心 PCL 專案內,使用這個套件,可以讓您進行文字、連結的分享作業,或者指定一個URL,並且使用瀏覽器開啟這個URL。這些功能將會自動針對當時執行行動裝置的作業系統,執行相對應的工作。 - 滑鼠右擊方案
XFCreative
,選擇管理方案的 NuGet 套件
,在NuGet - 解決方案
頁面中,切換到瀏覽
標籤頁次內,請在文字輸入盒中輸入,sqlite-net-pcl
並且開始搜尋這個套件,並且安裝到所有的專案內。當您在進行安裝這個套件之前,請確認您搜尋到的這個 NuGet 套件是由Frank A. Krueger
這名作者所提供的套件,並且也要確認安裝套件的名稱與大小寫是否一致。透過這個套件,可以任您在核心PCL專案內,進行 SQLite 資料庫的存取動作。器開啟這個URL。這些功能將會自動針對當時執行行動裝置的作業系統,執行相對應的工作。 - 滑鼠右擊方案
XFCreative
,選擇管理方案的 NuGet 套件
,在NuGet - 解決方案
頁面中,切換到瀏覽
標籤頁次內,請在文字輸入盒中輸入,Xam.Plugin.ExternalMaps
並且開始搜尋這個套件,並且安裝到所有的專案內。這個套件將會開啟外部地圖應用程式,並且導航到您指定的座標點。 - 滑鼠右擊方案
XFCreative
,選擇管理方案的 NuGet 套件
,在NuGet - 解決方案
頁面中,切換到瀏覽
標籤頁次內,請在文字輸入盒中輸入,Xam.Plugins.Messaging
並且開始搜尋這個套件,並且安裝到所有的專案內。這個套件將會進行撥打電話、傳送簡訊(SMS)或者使用預設訊息應用程式傳送電子郵件。 - 滑鼠右擊方案
XFCreative
,選擇管理方案的 NuGet 套件
,在NuGet - 解決方案
頁面中,切換到已安裝
標籤頁次內,請在文字輸入盒中輸入,Xamarin.Forms
並且開始搜尋這個套件,並且準備將所有專案內有用到這個套件,全部都升級到最新版本。從右半部可以觀察到,在不同的專案內,這個套件使用到不同的版本;一旦升級到最新的版本,最新 Xamarin.Forms 所提供的 XAML 宣告標記語言與相關新功能,就可以在這次專案中用到。若在安裝完成這個套件之後,出現了底下訊息Xamarin.Forms 2.2.0.31 的套件無法解除安裝,請重新啟動 Visual Studio 已完成此程序
此時,請點選Restart
按鈕,以重新啟動 Visual Studio 2015
建立專案資料夾
- 滑鼠右擊
XFCreative.Droid
專案節點,選擇加入
>新增資料夾
,在新產生的資料夾內,填入資料夾名稱Services
- 滑鼠右擊
XFCreative.iOS
專案節點,選擇加入
>新增資料夾
,在新產生的資料夾內,填入資料夾名稱Services
- 滑鼠右擊
XFCreative.UWP
專案節點,選擇加入
>新增資料夾
,在新產生的資料夾內,填入資料夾名稱Services
- 滑鼠右擊
XFCreative
核心PCL 專案節點,選擇加入
>新增資料夾
,在新產生的資料夾內,填入資料夾名稱Converters
- 滑鼠右擊
XFCreative
核心PCL 專案節點,選擇加入
>新增資料夾
,在新產生的資料夾內,填入資料夾名稱Models
- 滑鼠右擊
XFCreative
核心PCL 專案節點,選擇加入
>新增資料夾
,在新產生的資料夾內,填入資料夾名稱Repositories
- 滑鼠右擊
XFCreative
核心PCL 專案節點,選擇加入
>新增資料夾
,在新產生的資料夾內,填入資料夾名稱Services
第一次啟動專案測試
- 滑鼠右擊
XFCreative.Droid
專案節點,選擇設定為起始專案
- 按下
F5
按鍵,該使執行這個 Android 專案,看看是否可以正常執行。 - 若可以正常編譯,但是執行的時候出現了錯誤訊息:
java.lang.OutOfMemoryError
- 此時請滑鼠雙擊
XFCreative.Droid
專案Properties
節點 - 在
XFCreative.Droid
頁面,點選Android Options
>Advanced
- 在
Java Max Heap Size
欄位內輸入1G
- 重新執行一次
沒有留言:
張貼留言