2016/10/05

企業之差旅費用跨平台應用程式開發 (2) 建立專案

在這裡，您已經準備好要來進行開發跨平台 ( Android, iOS, UWP ) 的行動應用程式開發，並且在行動應用程式中，將會呼叫企業後端所提供的 Web API 服務，以便讓使用者可以透過行動裝置，進行差旅費用的申請；這是企業內部很典型的一個應用程式，接下來就是需要開始建立專案與進行相關設定。

在這個階段的練習，您將會學會底下的 Xamarin.Forms 的開發技術：

使用 Visual Studio 2015 增加 Prism 專案樣版
建立 Prism for Xamarin.Forms 的專案
升級與安裝必要的套件(NuGet Package)或者插件(Plug-ins)
建立專案資料夾

這篇章節的練習專案的原始程式碼將會存放在 GitHubhttps://github.com/vulcanlee/XFAppSample/tree/master/XFDoggy/1.BuildProject 內，在這個目錄下，會有兩個目錄：

Starter

這個目錄將會存放當您要進行練習開發這個專案之前，Visual Studio 專案的原始檔案。

Completed

這個目錄將會存放當您要進行練習開發這個專案完成之後，Visual Studio 專案的原始檔案。

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

若您的 Visual Studio 開發環境中，尚未安裝 Prism Template Pack 擴充功能，請參考底下步驟，進行安裝這個擴充功能。

安裝 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)，並且在底下名稱欄位中，輸入 XFDoggy 最後，點選 確定 按鈕。
接著，會出現 Prism for Xamarin.Forms - Project Wizard 這個對話窗，請在這個對話窗中，勾選Android / iOS / UWP 這三個檢查盒，最後點選 Create 按鈕，以便產生這三個類型的專案。
當專案建立到一半，若您的開發環境還沒有建置與設定完成 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)，因此，您需要先在這裡把這些套件安裝到所有的專案內，方便日後開發作業可以更加順利。

滑鼠右擊方案 XFDoggy ，選擇 管理方案的 NuGet 套件，在 NuGet - 解決方案 頁面中，切換到 瀏覽標籤頁次內，請在文字輸入盒中輸入，Behaviors.Forms 並且開始搜尋這個套件，並且安裝到所有的專案內。

使用這個套件，可以讓您在宣告 XAML 定義的時候，使用 XAML 提供的行為特性功能，例如，可以綁定當某個事件發生的時候，將會執行某個指定的 ICommand。這項功能對於有在開發 WPF 或者 Windows UWP 的開發者而言，必定不陌生，因為，在這些環境之下，可以使用 Blend SDK 所提供的各種不同行為(Behaviors)功能，來擴增或者豐富您的 XAML 宣告。
滑鼠右擊方案 XFDoggy ，選擇 管理方案的 NuGet 套件，在 NuGet - 解決方案 頁面中，切換到 瀏覽標籤頁次內，請在文字輸入盒中輸入，Newtonsoft.Json 並且開始搜尋這個套件，並且安裝到所有的專案內。

'Newtonsoft.Json' 這個套件，可以讓您進行 JSON 物件的序列化 (Serialization) 或者反序列化 (Deserialization)) 的操作；這項功能將會提供當從網路取得開發資料的 JSON 定義資料之後，接著，便可以將這些 JSON 定義文字轉換成為 .NET 的物件。
滑鼠右擊核心PCL專案 XFDoggy ，選擇 管理 NuGet 套件，在 NuGet - 解決方案 頁面中，切換到 瀏覽 標籤頁次內，請在文字輸入盒中輸入，Microsoft.Net.Http 並且開始搜尋這個套件，並且安裝到核心PCL專案內；在安裝過程中，若看到 接受授權 對話窗，請點選 我接受 按鈕

由於在撰寫這份文件的時候 (2016.09.19)，本機電腦 Visual Studio 的 Xamarin Toolkit 已經升級到 Xamarin 4.2 版，而透過這個Xamarin版本再產生核心PCL專案的時候，其 PCL TargetFrameworkProfile 已經採用了 Profile259 (前一個 Xamarin 版本，使用的 Profile111)；而在 Profile259 的 PCL專案內，是沒有這個 System.Net.Http 命名空間。

因此，需要額外安裝這個 Microsoft.Net.Http NuGet 套件，以便可以使用 HttpClient 這樣的類別。

想要查看您的 PCL專案的 TargetFrameworkProfile 是哪個版本，可以先使用滑鼠右擊核心PCL XFDoggy 專案，接著選取 卸載專案，再度使用滑鼠右擊核心PCL XFDoggy 專案，選取 編輯 XFDoggy.csproj 這個選項。

在下面截圖中，將會看到紅色框線處標示的，就是這個 PCL 的 Profile 版本

有關更多不同 PCL Profile 資訊，可以參考這個網址http://portablelibraryprofiles.apps.stephencleary.com/

建立專案資料夾

核心 PCL 專案

請在核心 PCL 專案內依序建立底下的資料夾

滑鼠右擊 XFDoggy 核心PCL 專案節點，選擇 加入 > 新增資料夾，在新產生的資料夾內，填入資料夾名稱 Helps
滑鼠右擊 XFDoggy 核心PCL 專案節點，選擇 加入 > 新增資料夾，在新產生的資料夾內，填入資料夾名稱 Infrastructure
滑鼠右擊 XFDoggy 核心PCL 專案節點，選擇 加入 > 新增資料夾，在新產生的資料夾內，填入資料夾名稱 Models
滑鼠右擊 XFDoggy 核心PCL 專案節點，選擇 加入 > 新增資料夾，在新產生的資料夾內，填入資料夾名稱 Services

平台專案

請在每個平台的專案下，依序建立底下資料夾

滑鼠右擊 XFDoggy.Droid 專案節點，選擇 加入 > 新增資料夾，在新產生的資料夾內，填入資料夾名稱 Infrastructure
滑鼠右擊 XFDoggy.iOS 專案節點，選擇 加入 > 新增資料夾，在新產生的資料夾內，填入資料夾名稱Infrastructure
滑鼠右擊 XFDoggy.UWP 專案節點，選擇 加入 > 新增資料夾，在新產生的資料夾內，填入資料夾名稱Infrastructure
滑鼠右擊 XFDoggy.UWP 專案節點內的 Assets 資料夾，選擇 加入 > 新增資料夾，在新產生的資料夾內，填入資料夾名稱 Images

複製圖片檔案

請下載底下連結中的圖片檔案到本機檔案總管內的某個資料夾內

https://github.com/vulcanlee/XFAppSample/tree/master/XFDoggy/Images
請拖拉這些圖片檔案到 XFDoggy.Droid 專案 > Resources > drawable 目錄下
請拖拉這些圖片檔案到 XFDoggy.iOS 專案 > Resources 目錄下
請拖拉這些圖片檔案到 XFDoggy.UWP 專案 > Assets > Images 目錄下

第一次啟動專案測試

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

2016/10/04

企業之差旅費用跨平台應用程式開發 (1) 專案需求說明

這是一個企業內部行動應用程式的開發範例，透過已經開發好的 Web API，開發出一套跨平台的行動裝置應用程式，可以分別在 Android / iOS / UWP 裝置上執行，讓企業內部使用者透過這個應用程式進行差旅費用的申請。

若要瞭解這些 Web API 如何使用，可以下載這個 PostMan 定義檔案，查看相關範例

https://github.com/vulcanlee/XFAppSample/blob/master/XFDoggy/Xamarin.postman_collection.json

2016/10/03

如何啟用 Xamarin.Forms 的 XAML 編輯有 IntelliSense效果

當您在使用 Visual Studio 2105 編輯 .xaml 檔案內的 XAML 標籤宣告語言，Visual Studio 2015 提供了 IntelliSense 的輔助輸入提示功能；不過，若您的 Visual Studio 2015 對於正在編輯的 XAML 檔案，無法正常使用 IntelliSense 的功能，可以參考底下步驟。

關閉 Visual Studio 2015 所有正在編輯的標籤頁次
離開 Visual Studio
重新使用 Visual Studio 開啟這個專案
使用滑鼠右擊 XAML 檔案，選擇 開啟方式 > 原始程式碼(文字)編輯器，接著點選 設定為預設值 按鈕，最後點選 確定 按鈕

在下圖中，您可以看到使用了 原始程式碼(文字)編輯器 方式來開啟 XAML 檔案與沒有的差異，那就是最前面的 <?xml version="1.0" encoding="utf-8" ?> 文字，顯示為藍色的，說明這樣開啟 XAML 檔案的方式，具有 IntelliSense 的效果。

2016/10/02

Xamarin.Forms 使用 Grial UI Kit 在Android可以執行，在iOS卻會閃退

使用 Grial UI Kit 的專案，發現到 Android 專案可以正常執行，可是，在 iOS 專案下執行，卻會發現到有System.IO.FileNotFoundException: Could not load file or assembly 'UXDivers.Artina.Shared' or one of its dependencies 例外異常錯誤訊息。

當您使用 Xamarin.Forms 搭配 XAML 開發方式，執行 iOS 專案的時候，可能會發生某些組件無法正常被載入的情況。

假使您僅僅在 XAML 中參考這些組件，就會發生這樣的例外異常錯誤。

您可以在 AppDelegate.cs 檔案中，加入底下程式碼，強迫要將這個組件讀入到記憶體中

var workaround = typeof(UXDivers.Artina.Shared.CircleImage);

Xamarin.Forms Prism DelegateCommand 的更新狀態為是否可以使用

在建立 DelegateCommand 物件的時候，可以使用兩種建構式。其中，DelegateCommand(Action executeMethod) 只用來定義該命令要執行的內容，而這個 DelegateCommand(Action executeMethod, Func<bool> canExecuteMethod) 則可以定義何時這個命令可以使用。

        //
        // 摘要:
        //     Creates a new instance of Prism.Commands.DelegateCommand with the System.Action
        //     to invoke on execution.
        //
        // 參數:
        //   executeMethod:
        //     The System.Action to invoke when System.Windows.Input.ICommand.Execute(System.Object)
        //     is called.
        public DelegateCommand(Action executeMethod);
        //
        // 摘要:
        //     Creates a new instance of Prism.Commands.DelegateCommand with the System.Action
        //     to invoke on execution and a Func to query for determining if the command can
        //     execute.
        //
        // 參數:
        //   executeMethod:
        //     The System.Action to invoke when System.Windows.Input.ICommand.Execute(System.Object)
        //     is called.
        //
        //   canExecuteMethod:
        //     The System.Func`1 to invoke when System.Windows.Input.ICommand.CanExecute(System.Object)
        //     is called
        public DelegateCommand(Action executeMethod, Func<bool> canExecuteMethod);

在這裡，首先定義一個 DelegateCommand，並且產生兩個委派方法，而在 canExecuteMethod 委派方法，僅回傳 是否啟用。

這個屬性 是否啟用 當有值設定的時候，會去呼叫 切換到新頁面Command.RaiseCanExecuteChanged()，也就是會同步更新按鈕是否可以使用。

        #region 是否啟用
        private bool _是否啟用=true;
        /// <summary>
        /// 是否啟用
        /// </summary>
        public bool 是否啟用
        {
            get { return this._是否啟用; }
            set { this.SetProperty(ref this._是否啟用, value); 切換到新頁面Command.RaiseCanExecuteChanged(); }
        }
        #endregion

        private readonly INavigationService _navigationService;
        public DelegateCommand 切換到新頁面Command { get; private set; } 

        public MainPageViewModel(INavigationService navigationService)
        {

            _navigationService = navigationService;
            切換到新頁面Command = new DelegateCommand(切換到新頁面, Can切換到新頁面);
        }

        private bool Can切換到新頁面()
        {
            return 是否啟用;
        }

        private void 切換到新頁面()
        {
            _navigationService.NavigateAsync("NewPage");
        }

2016/10/01

Xamarin.Android 解決 java.lang.UnsupportedClassVersionError: com/android/dx/command/Main : Unsupported major.minor version 52.0

可以嘗試底下方法來解決:

升級到 Java JDK 8，並且在 工具 > 選項 > Xamarin > Android Setting ，設定 Java JDK 8 的路徑

或者，從 Android SDK Manager 移除所有的 Android SDK Build-tools 24號以上版本套件

訂閱：文章 (Atom)

Xamarin Research

XAML in Xamarin.Forms 基礎篇電子書

Xamarin.Forms 快速入門電子書

2016/10/05

企業之差旅費用跨平台應用程式開發 (2) 建立專案

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

安裝 Prism Template Pack

建立 Prism for Xamarin.Forms 的專案

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

建立專案資料夾

核心 PCL 專案

平台專案

複製圖片檔案

第一次啟動專案測試

2016/10/04

企業之差旅費用跨平台應用程式開發 (1) 專案需求說明

2016/10/03

如何啟用 Xamarin.Forms 的 XAML 編輯有 IntelliSense效果

2016/10/02

Xamarin.Forms 使用 Grial UI Kit 在Android可以執行，在iOS卻會閃退

Xamarin.Forms Prism DelegateCommand 的更新狀態為是否可以使用

2016/10/01

Xamarin.Android 解決 java.lang.UnsupportedClassVersionError: com/android/dx/command/Main : Unsupported major.minor version 52.0

XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

2016/10/05

企業之差旅費用 跨平台應用程式開發 (2) 建立專案

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

安裝 Prism Template Pack

建立 Prism for Xamarin.Forms 的專案

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

建立專案資料夾

核心 PCL 專案

平台專案

複製圖片檔案

第一次啟動專案測試

2016/10/04

企業之差旅費用 跨平台應用程式開發 (1) 專案需求說明

2016/10/03

如何啟用 Xamarin.Forms 的 XAML 編輯有 IntelliSense效果

2016/10/02

Xamarin.Forms 使用 Grial UI Kit 在Android可以執行，在iOS卻會閃退

Xamarin.Forms Prism DelegateCommand 的更新狀態為是否可以使用

2016/10/01

Xamarin.Android 解決 java.lang.UnsupportedClassVersionError: com/android/dx/command/Main : Unsupported major.minor version 52.0

XAML in Xamarin.Forms 基礎篇電子書

Xamarin.Forms 快速入門電子書

企業之差旅費用跨平台應用程式開發 (2) 建立專案

企業之差旅費用跨平台應用程式開發 (1) 專案需求說明