XAML in Xamarin.Forms 基礎篇 電子書

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

Xamarin.Forms 快速入門 電子書

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

2016/10/07

企業之差旅費用 跨平台應用程式開發 (4) 系統初始化與使用者登入

現在已經完成該應用程式所需要的基礎應用服務類別，因此，可以開始進行開發整個應用程式的運作流程頁面。
在這個階段的練習，您將會需要完成學會底下需求：
  1. 建立系統初始化頁面檢視 (View)
  2. 建立系統初始化頁面檢視模型 (ViewModel)
  3. 註冊系統初始化頁面檢視
  4. 建立使用者登入頁面檢視 (View)
  5. 建立使用者登入頁面檢視模型 (ViewModel)
  6. 註冊使用者登入頁面檢視
  7. 修正 Xamarin.Forms 的頁面進入點
這篇章節的練習專案的原始程式碼將會存放在 GitHubhttps://github.com/vulcanlee/XFAppSample/tree/master/XFDoggy/3.InitLogin 內

建立系統初始化頁面檢視 (View)

  1. 在核心PCL XFDoggy 專案內，使用滑鼠右鍵點選 ViewModels 資料夾，接著，選擇 加入 > 新增項目
  2. 在 加入新項目 - XFDoggy 對話窗中，點選 Prism > Prism ContentPage (Forms)
  3. 在底下名稱欄位內，輸入 LoadingPage，接著，點選 新增 按鈕
  4. 使用底下程式碼替換掉剛剛產生的檔案內容

LoadingPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="XFDoggy.Views.LoadingPage">

  <ContentPage.BackgroundImage>
    <OnPlatform x:TypeArguments="x:String"
              iOS="Loading.png"
              Android="Loading.png"
              WinPhone="Assets/Images/Loading.png" />
  </ContentPage.BackgroundImage>

</ContentPage>

建立系統初始化頁面檢視模型 (ViewModel)

  1. 在核心PCL XFDoggy 專案內，使用滑鼠右鍵點選 ViewModels 資料夾，接著，選擇 加入 > 新增項目
  2. 在 加入新項目 - XFDoggy 對話窗中，點選 Prism > Prism ViewModel
  3. 在底下名稱欄位內，輸入 LoadingPageViewModel，接著，點選 新增 按鈕
  4. 使用底下程式碼替換掉剛剛產生的檔案內容

LoadingPageViewModel.cs

using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using XFDoggy.Helps;

namespace XFDoggy.ViewModels
{
    public class LoadingPageViewModel : BindableBase, INavigationAware
    {

        private readonly INavigationService _navigationService;
        public LoadingPageViewModel(INavigationService navigationService)
        {
            _navigationService = navigationService;
        }

        public void OnNavigatedFrom(NavigationParameters parameters)
        {
        }

        public async void OnNavigatedTo(NavigationParameters parameters)
        {
            await Task.Delay(500);
            var fooI = (await AppData.DataService.GetTravelExpensesCategoryAsync()).ToList();
            AppData.AllTravelExpensesCategory = fooI;
            await Task.Delay(500);

            await _navigationService.NavigateAsync("xf:///LoginPage");
        }
    }
}

註冊系統初始化頁面檢視

  1. 在核心PCL XFDoggy 專案內，開啟 App.xaml.cs 檔案
  2. 使用底下C#程式碼替換掉剛剛開啟的檔案內容

App.xaml.cs

using Prism.Unity;
using XFDoggy.Views;

namespace XFDoggy
{
    public partial class App : PrismApplication
    {
        public App(IPlatformInitializer initializer = null) : base(initializer) { }

        protected override void OnInitialized()
        {
            InitializeComponent();

            NavigationService.NavigateAsync("MainPage?title=Hello%20from%20Xamarin.Forms");
        }

        protected override void RegisterTypes()
        {
            Container.RegisterTypeForNavigation<MainPage>();
            Container.RegisterTypeForNavigation<LoadingPage>();
        }
    }
}

# 建立使用者登入頁面檢視 (View)

1. 在核心PCL `XFDoggy` 專案內，使用滑鼠右鍵點選 `ViewModels` 資料夾，接著，選擇 `加入` > `新增項目`

2. 在 `加入新項目 - XFDoggy` 對話窗中，點選 `Prism` > `Prism ContentPage (Forms)`

3. 在底下名稱欄位內，輸入 `LoginPage`，接著，點選 `新增` 按鈕

4. 使用底下程式碼替換掉剛剛產生的檔案內容

### LoginPage.xaml

```XML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             BackgroundColor="{StaticResource PageBackgroundColor}"
             x:Class="XFDoggy.Views.LoginPage">

  <Grid>
    <StackLayout
      VerticalOptions="Center" HorizontalOptions="Center"
      Margin="70,0"
      >
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition />
          <RowDefinition/>
          <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="35"/>
          <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Label Text="帳號" Grid.Row="0" Grid.Column="0"
               HorizontalOptions="Start" VerticalOptions="Center"/>
        <Entry Placeholder="請輸入登入帳號" Grid.Row="0" Grid.Column="1"
               Text="{Binding Account, Mode=TwoWay}"
               TextColor="Black" />
        <Label Text="密碼" Grid.Row="1" Grid.Column="0"
               HorizontalOptions="Start" VerticalOptions="Center"/>
        <Entry Placeholder="請輸入登入密碼" IsPassword="True" Grid.Row="1" Grid.Column="1"
               Text="{Binding Password, Mode=TwoWay}"
               TextColor="Black" />

      </Grid>
      <Button Text="登入"
             Margin="0,40,0,0"
             HorizontalOptions="Center"
             BackgroundColor="{StaticResource ToolbarBackgroundColor}"
             TextColor="{StaticResource ButtonTextColor}"
             Command="{Binding 登入Command}"
             WidthRequest="200"
                />
    </StackLayout>
  </Grid>

</ContentPage>

建立使用者登入頁面檢視模型 (ViewModel)

  1. 在核心PCL XFDoggy 專案內，使用滑鼠右鍵點選 ViewModels 資料夾，接著，選擇 加入 > 新增項目
  2. 在 加入新項目 - XFDoggy 對話窗中，點選 Prism > Prism ViewModel
  3. 在底下名稱欄位內，輸入 LoginPageViewModel，接著，點選 新增 按鈕
  4. 使用底下程式碼替換掉剛剛產生的檔案內容

LoginPageViewModel.cs

using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using Prism.Services;
using System;
using System.Collections.Generic;
using System.Linq;
using XFDoggy.Helps;
using XFDoggy.Infrastructure;

namespace XFDoggy.ViewModels
{
    public class LoginPageViewModel : BindableBase
    {
        private readonly INavigationService _navigationService;
        private IDebugMode _debugMode;
        public readonly IPageDialogService _dialogService;

        #region Account
        private string account;
        /// <summary>
        /// Account
        /// </summary>
        public string Account
        {
            get { return this.account; }
            set { this.SetProperty(ref this.account, value); }
        }
        #endregion


        #region Password
        private string password;
        /// <summary>
        /// Password
        /// </summary>
        public string Password
        {
            get { return this.password; }
            set { this.SetProperty(ref this.password, value); }
        }
        #endregion

        public DelegateCommand 登入Command { get; private set; }

        public LoginPageViewModel(INavigationService navigationService, IPageDialogService dialogService,
            IDebugMode debugMode)
        {
            _navigationService = navigationService;
            _debugMode = debugMode;
            _dialogService = dialogService;

            登入Command = new DelegateCommand(登入);
            if (_debugMode.IsDebugMode() == true)
            {
                Account = "001";
                Password = "901";
            }
        }

        private async void 登入()
        {
            var fooResult = await AppData.DataService.AuthUserAsync(new Models.AuthUser
            {
                Account = Account,
                Password = Password,
            });

            if (fooResult.Status == true)
            {
                AppData.Account = Account;
                var fooItems = (await AppData.DataService.GetTravelExpensesAsync(AppData.Account)).ToList();
                AppData.AllTravelExpense = fooItems;
                AppData.正在執行功能 = 執行功能列舉.差旅費用申請;
                await _navigationService.NavigateAsync("xf:///MainMDPage/NaviPage/TravelExpensesListPage");
            }
            else
            {
                await _dialogService.DisplayAlertAsync("錯誤", "帳號或者密碼錯誤", "確定");
            }
        }
    }
}

註冊使用者登入頁面檢視

  1. 在核心PCL XFDoggy 專案內，開啟 App.xaml.cs 檔案
  2. 使用底下C#程式碼替換掉剛剛開啟的檔案內容

App.xaml.cs

using Prism.Unity;
using XFDoggy.Views;

namespace XFDoggy
{
    public partial class App : PrismApplication
    {
        public App(IPlatformInitializer initializer = null) : base(initializer) { }

        protected override void OnInitialized()
        {
            InitializeComponent();

            NavigationService.NavigateAsync("MainPage?title=Hello%20from%20Xamarin.Forms");
        }

        protected override void RegisterTypes()
        {
            Container.RegisterTypeForNavigation<MainPage>();
            Container.RegisterTypeForNavigation<LoadingPage>();
            Container.RegisterTypeForNavigation<LoginPage>();
        }
    }
}

修正 Xamarin.Forms 的頁面進入點

  1. 在核心PCL XFDoggy 專案內，開啟 App.xaml.cs 檔案
  2. 使用底下C#程式碼替換掉剛剛開啟的檔案內容

App.xaml.cs

using Prism.Unity;
using XFDoggy.Views;

namespace XFDoggy
{
    public partial class App : PrismApplication
    {
        public App(IPlatformInitializer initializer = null) : base(initializer) { }

        protected override void OnInitialized()
        {
            InitializeComponent();

            NavigationService.NavigateAsync("LoadingPage");
        }

        protected override void RegisterTypes()
        {
            Container.RegisterTypeForNavigation<MainPage>();
            Container.RegisterTypeForNavigation<LoadingPage>();
            Container.RegisterTypeForNavigation<LoginPage>();
        }
    }
}
張貼者：
於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)