XAML in Xamarin.Forms 基礎篇 電子書

XAML in Xamarin.Forms 基礎篇 電子書
XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

Xamarin.Forms 快速入門 電子書
Xamarin.Forms 快速入門 電子書

2016/10/23

Xamarin.Forms 開放資料跨平台應用程式開發 建立專案

在這裡,您已經準備好要顯示資料的後端來源(這裡使用的是政府開放資料),接下來就是需要開始建立專案與進行相關設定。
在這個階段的練習,您將會學會底下的 Xamarin.Forms 的開發技術:
  1. 使用 Visual Studio 2015 增加 Prism 專案樣版
  2. 建立 Prism for Xamarin.Forms 的專案
  3. 升級與安裝必要的套件(NuGet Package)或者插件(Plug-ins)
  4. 建立專案資料夾
這篇章節的練習專案的原始程式碼將會存放在 GitHubhttps://github.com/vulcanlee/XFAppSample/tree/master/XFCreative/1.BuildProject 內,在這個目錄下,會有兩個目錄:
  • Starter
    這個目錄將會存放當您要進行練習開發這個專案之前,Visual Studio 專案的原始檔案。
  • Completed
    這個目錄將會存放當您要進行練習開發這個專案完成之後,Visual Studio 專案的原始檔案。

使用 Visual Studio 2015 增加 Prism 專案樣版

安裝 Prism Template Pack

  1. 首先,開啟 Visual Studio 2015
  2. 點選功能表 工具 > 擴充功能與更新 選項
  3. 在 擴充功能與更新 對話窗內,點選 線上 > Visual Studio 組件庫
  4. 在右上方文字輸入盒內,輸入 Prism Template Pack ,並且按下 Enter 按鍵
  5. 點選搜尋出來的 Prism Template Pack 項目,點選 下載 按鈕,安裝 Prism Template Pack 組件到您的Visual Studio 2015 內;安裝完成後,您需要點選 立即重新啟動 按鈕,讓您的 Visual Studio 2915 重新啟動之後,這次的安裝才會生效。
    PrismTemplatePack
    PrismTemplatePack下載與安裝

建立 Prism for Xamarin.Forms 的專案

  1. 當 Visual Studio 重新啟動之後,點選功能表 檔案 > 新增 > 專案
  2. 在 新增專案 對話窗內,點選 範本 > Visual C# > Prism > Prism Unity App (Forms),並且在底下名稱欄位中,輸入 XFCreative 最後,點選 確定 按鈕。
    Prism新增專案
  3. 當專案建立到一半,若您的開發環境還沒有建置與設定完成 Mac 電腦與 Xamarin Studio for Mac 系統,此時會看到 Xamarin Mac Agent Instructions 對話窗出現,這個對話窗是要提醒您進行與 Mac 電腦連線設定,這是因為,您無法在 Windows 作業系統進行 iOS 相關應用程式的建立與設計工作,而是需要透過 Mac 電腦安裝的 XCode 來協助您完成這些 iOS 應用程式的建立工作。不過,這不影響您繼續開發 Xamarin.Forms 的應用程式,只不過此時,您無法編譯與執行 iOS 的應用程式。
  4. 接著會看到 新的通用Windows專案 對話視窗,此時,您只需要按下 確定 按鈕即可,此時,專案精靈會繼續完成相關平台的專案建立工作。
  5. 最後,整個新的 Xamarin.Forms 專案就建立完成了。

升級與安裝必要的套件(NuGet Package)或者插件(Plug-ins)

在這個專案內,將會使用到許多不同的 NuGet 套件 (Package),因此,您需要先在這裡把這些套件安裝到所有的專案內,方便日後開發作業可以更加順利。
  1. 滑鼠右擊方案 XFCreative ,選擇 管理方案的 NuGet 套件,在 NuGet - 解決方案 頁面中,切換到 瀏覽 標籤頁次內,請在文字輸入盒中輸入,Behaviors.Forms 並且開始搜尋這個套件,並且安裝到所有的專案內。
    使用這個套件,可以讓您在宣告 XAML 定義的時候,使用 XAML 提供的行為特性功能,例如,可以綁定當某個事件發生的時候,將會執行某個指定的 ICommand。這項功能對於有在開發 WPF 或者 Windows UWP 的開發者而言,必定不陌生,因為,在這些環境之下,可以使用 Blend SDK 所提供的各種不同行為(Behaviors)功能,來擴增或者豐富您的 XAML 宣告。
    NuGetBehaviors.Forms
    若在安裝完成這個套件之後,出現了底下訊息
    Xamarin.Forms 2.2.0.4-pre1 的套件無法解除安裝,請重新啟動 Visual Studio 已完成此程序
    此時,請點選 Restart 按鈕,以重新啟動 Visual Studio 2015
    NeedRestartVisualStudio
  2. 滑鼠右擊方案 XFCreative ,選擇 管理方案的 NuGet 套件,在 NuGet - 解決方案 頁面中,切換到 瀏覽 標籤頁次內,請在文字輸入盒中輸入,Newtonsoft.Json 並且開始搜尋這個套件,並且安裝到所有的專案內。
    'Newtonsoft.Json' 這個套件,可以讓您進行 JSON 物件的 序列化 (Serialization) 或者 反序列化 (Deserialization)) 的操作;這項功能將會提供當從網路取得開發資料的 JSON 定義資料之後,接著,便可以將這些 JSON 定義文字轉換成為 .NET 的物件。
    NuGetNewtonsoft.Json
  3. 滑鼠右擊方案 XFCreative ,選擇 管理方案的 NuGet 套件,在 NuGet - 解決方案 頁面中,切換到 瀏覽 標籤頁次內,請在文字輸入盒中輸入,Plugin.Share 並且開始搜尋這個套件,並且安裝到所有的專案內。
    您可以在核心 PCL 專案內,使用這個套件,可以讓您進行文字、連結的分享作業,或者指定一個URL,並且使用瀏覽器開啟這個URL。這些功能將會自動針對當時執行行動裝置的作業系統,執行相對應的工作。
    NuGetPlugin.Share
  4. 滑鼠右擊方案 XFCreative ,選擇 管理方案的 NuGet 套件,在 NuGet - 解決方案 頁面中,切換到 瀏覽 標籤頁次內,請在文字輸入盒中輸入,sqlite-net-pcl 並且開始搜尋這個套件,並且安裝到所有的專案內。
    當您在進行安裝這個套件之前,請確認您搜尋到的這個 NuGet 套件是由 Frank A. Krueger 這名作者所提供的套件,並且也要確認安裝套件的名稱與大小寫是否一致。透過這個套件,可以任您在核心PCL專案內,進行 SQLite 資料庫的存取動作。器開啟這個URL。這些功能將會自動針對當時執行行動裝置的作業系統,執行相對應的工作。
    NuGetsqlite-net-pcl
  5. 滑鼠右擊方案 XFCreative ,選擇 管理方案的 NuGet 套件,在 NuGet - 解決方案 頁面中,切換到 瀏覽 標籤頁次內,請在文字輸入盒中輸入,Xam.Plugin.ExternalMaps 並且開始搜尋這個套件,並且安裝到所有的專案內。
    這個套件將會開啟外部地圖應用程式,並且導航到您指定的座標點。
    NuGetExternalMaps
  6. 滑鼠右擊方案 XFCreative ,選擇 管理方案的 NuGet 套件,在 NuGet - 解決方案 頁面中,切換到 瀏覽 標籤頁次內,請在文字輸入盒中輸入,Xam.Plugins.Messaging 並且開始搜尋這個套件,並且安裝到所有的專案內。
    這個套件將會進行撥打電話、傳送簡訊(SMS)或者使用預設訊息應用程式傳送電子郵件。
    NuGetMessaging
  7. 滑鼠右擊方案 XFCreative ,選擇 管理方案的 NuGet 套件,在 NuGet - 解決方案 頁面中,切換到 已安裝 標籤頁次內,請在文字輸入盒中輸入,Xamarin.Forms 並且開始搜尋這個套件,並且準備將所有專案內有用到這個套件,全部都升級到最新版本。
    從右半部可以觀察到,在不同的專案內,這個套件使用到不同的版本;一旦升級到最新的版本,最新 Xamarin.Forms 所提供的 XAML 宣告標記語言與相關新功能,就可以在這次專案中用到。
    若在安裝完成這個套件之後,出現了底下訊息
    Xamarin.Forms 2.2.0.31 的套件無法解除安裝,請重新啟動 Visual Studio 已完成此程序
    此時,請點選 Restart 按鈕,以重新啟動 Visual Studio 2015
    NuGetXamarinForms

建立專案資料夾

  1. 滑鼠右擊 XFCreative.Droid 專案節點,選擇 加入 > 新增資料夾,在新產生的資料夾內,填入資料夾名稱 Services
  2. 滑鼠右擊 XFCreative.iOS 專案節點,選擇 加入 > 新增資料夾,在新產生的資料夾內,填入資料夾名稱 Services
  3. 滑鼠右擊 XFCreative.UWP 專案節點,選擇 加入 > 新增資料夾,在新產生的資料夾內,填入資料夾名稱 Services
  4. 滑鼠右擊 XFCreative 核心PCL 專案節點,選擇 加入 > 新增資料夾,在新產生的資料夾內,填入資料夾名稱 Converters
  5. 滑鼠右擊 XFCreative 核心PCL 專案節點,選擇 加入 > 新增資料夾,在新產生的資料夾內,填入資料夾名稱 Models
  6. 滑鼠右擊 XFCreative 核心PCL 專案節點,選擇 加入 > 新增資料夾,在新產生的資料夾內,填入資料夾名稱 Repositories
  7. 滑鼠右擊 XFCreative 核心PCL 專案節點,選擇 加入 > 新增資料夾,在新產生的資料夾內,填入資料夾名稱 Services

第一次啟動專案測試

  1. 滑鼠右擊 XFCreative.Droid 專案節點,選擇 設定為起始專案
  2. 按下 F5 按鍵,該使執行這個 Android 專案,看看是否可以正常執行。
  3. 若可以正常編譯,但是執行的時候出現了錯誤訊息:java.lang.OutOfMemoryError
    • 此時請滑鼠雙擊 XFCreative.Droid 專案 Properties 節點
    • 在 XFCreative.Droid 頁面,點選 Android Options > Advanced
    • 在 Java Max Heap Size 欄位內輸入 1G
    • 重新執行一次
    AndroidMaxHeap

沒有留言:

張貼留言