Property Finder – 跨平台 Xamarin MonoTouch 移动应用

public void FindProperties(string location, int pageNumber, Action<string> callback, Action<Exception> error)
{
  var parameters = new Dictionary<string,object>(_commonParams);
  parameters.Add("place_name", location);
  parameters.Add("page", pageNumber);
  string url = "http://api.nestoria.co.uk/api?" + ToQueryString(parameters);
  ExecuteWebRequest(url, callback, error);
}

对于应用程序的 Windows Phone 版本，相应的 PropertyFinderView 实现为一个常规页面，XAML 如下所示：

<Grid Margin="10">
  <Grid.RowDefinitions>
    ...
  </Grid.RowDefinitions>
 
  <TextBlock Text="UK Property Finder"
              FontSize="{StaticResource PhoneFontSizeLarge}"
              Margin="0,30,0,0"/>
 
  <TextBlock Text="Use the form below to search for houses ..."
              Grid.Row="1"
              TextWrapping="Wrap"
              Margin="0,30,0,0"/>
    
  <StackPanel Orientation="Horizontal"
              Grid.Row="2"
              Margin="0,10,0,0">
    <TextBox x:Name="searchText"
              Width="200"
              TextChanged="SearchText_TextChanged"/>
    <Button x:Name="buttonSearchGo"
            Content="Go"
            Click="ButtonSearchGo_Click"/>
    <Button x:Name="buttonMyLocation"
            Content="My location"
            Click="ButtonMyLocation_Click"/>
  </StackPanel>
      
  <ProgressBar x:Name="loadingIndicator"
                Grid.Row="3"
                IsIndeterminate="True"
                Visibility="Collapsed"/>
      
  <TextBlock x:Name="userMessage"
              Grid.Row="4"
              Margin="0,20,0,20"/>
</Grid> 

请注意，没有 XAML 绑定，并且元素都有一个 x:Name 属性以及各种事件处理程序。

此页面的代码隐藏实现了 PropertyFinderPresenter.View 接口，设置 UI 元素的状态并在事件发生时执行所需逻辑。Presenter 也在 OnNavigatedTo 方法中构建，视图设置为“this”。

public partial class PropertyFinderView : PhoneApplicationPage, PropertyFinderPresenter.View
{
  // Constructor
  public PropertyFnderView()
  {
    InitializeComponent();
  }
 
  protected override void OnNavigatedTo(NavigationEventArgs e)
  {
    base.OnNavigatedTo(e);
 
    if (e.NavigationMode != NavigationMode.Back)
    {
      var source = new PropertyDataSource(new JsonWebPropertySearch());
 
      var presenter = new PropertyFinderPresenter(source,
        new NavigationService(NavigationService));
      presenter.SetView(this);
    }
  }
 
#region PropertyFinderPresenter.View implementation
 

  public string SearchText
  {
    set
    {
      searchText.Text = value;
    }
  }
 
  public event EventHandler SearchButtonClicked = delegate { };
 
  public event EventHandler<SearchTextChangedEventArgs> SearchTextChanged = delegate { };
 
  public void SetMessage(string message)
  {
    userMessage.Text = message;
  }
 
  public bool IsLoading
  {
    set
    {
      loadingIndicator.Visibility = value ? Visibility.Visible : Visibility.Collapsed;
      searchText.IsEnabled = !value;
      buttonMyLocation.IsEnabled = !value;
      buttonSearchGo.IsEnabled = !value;
    }
  }
 
#endregion
 
#region UI event handlers
 
  private void ButtonSearchGo_Click(object sender, RoutedEventArgs e)
  {
    SearchButtonClicked(this, EventArgs.Empty);
  }
 
  private void ButtonMyLocation_Click(object sender, RoutedEventArgs e)
  {
    MyLocationButtonClicked(this, EventArgs.Empty);
  }
 
  private void SearchText_TextChanged(object sender, TextChangedEventArgs e)
  {
    SearchTextChanged(this, new SearchTextChangedEventArgs(searchText.Text));
  }
 
#endregion
 
} 

我能听到 MVVM 纯粹主义者因代码隐藏的存在而愤怒地跳起来！

MVVM 模式的主要原则是 (1) 提高可测试性，(2) 促进开发人员/设计人员工作流程（即支持 Blend）。我个人对使此应用程序可 Blend 并不太感兴趣，但我关心编写可测试的代码。测试上面的 Presenter 只需要单元测试为 View 接口提供一个 mock。除此之外，它的工作方式与视图模型的单元测试相同，换句话说，您可以使用 MVP 设计模式完全测试应用程序，而无需提供“真实”视图（纯粹主义者可以停止跳了！）。

iOS

对于 iOS 开发，您大部分时间都在 MonoDevelop 中编写 C# 代码，这是一个感觉非常像 Visual Studio 的环境。但是，对于 UI 开发，您必须进入 Xcode 的世界，甚至必须创建一个 Objective-C 头文件！

主页的 iOS 视图是使用 Xcode Interface Builder 构建的，如下所示：

在 Windows Phone 开发中，会为希望在代码隐藏中生成字段的元素添加 x:Name 属性。通过 Interface Builder，您可以在相应的头文件中通过拖放方式创建“outlets”。

MonoDevelop 会自动生成一个 C# 部分类，其中包含对您在 Objective-C 头文件中创建了 outlets 的控件的引用。这听起来像是 Xcode 和 MonoDevelop 之间有些混乱的集成，但我确实发现它很可靠。然而，这确实突显了 Xamarin iOS 开发人员需要对 iOS 开发有相当的了解。

主页的视图控制器执行的任务与相应的 Windows Phone 页面相似，实现了 Presenter 所需的“视图”接口。

public partial class PropertyFinderViewController : UIViewController, PropertyFinderPresenter.View
{
  private PropertyFinderPresenter _presenter;
 
  public PropertyFinderViewController (PropertyFinderPresenter presenter)
    : base ("PropertyFinderViewController", null)
  {
    Title = "PropertyCross";
 
    _presenter = presenter;
  }
 
  public override void ViewDidLoad ()
  {
    base.ViewDidLoad ();
 
    // initial UI state
    searchActivityIndicator.Hidden = true;
    tableView.Hidden = true;
    tableView.SeparatorColor = UIColor.Clear;
 
    // handle the enter key, hiding the keyboard and initiating a search
    var enterDelegate = new CatchEnterDelegate();
    enterDelegate.EnterClicked += (s, e) => SearchButtonClicked(this, e);
    searchLocationText.Delegate = enterDelegate;
 
    // set the back button text
    NavigationItem.BackBarButtonItem = new UIBarButtonItem("Search",
                          UIBarButtonItemStyle.Bordered, BackButtonEventHandler);
 

    // associate with the presenter
    _presenter.SetView (this);
  }
 
  private void FavouriteButtonEventHandler (object sender, EventArgs args)
  {
    FavouritesClicked(this, EventArgs.Empty);
  }
 
  private void BackButtonEventHandler (object sender, EventArgs args)
  {
    NavigationController.PopViewControllerAnimated(true);
  }
    
  public override void ViewDidUnload ()
  {
    base.ViewDidUnload ();
 
    ReleaseDesignerOutlets ();
  }
    
 
  #region PropertyFinderPresenter.View implementation 
 
  public string SearchText
  {
    set
    {
      searchLocationText.Text = value;
    }
  }
 
  public event EventHandler SearchButtonClicked = delegate { };
 
  public event EventHandler<SearchTextChangedEventArgs> SearchTextChanged = delegate { };
 

  public void SetMessage (string message)
  {
    userMessageLabel.Text = message;
  }
 
  public bool IsLoading
  {
    set
    {
      searchActivityIndicator.Hidden = !value;
      if (value)
      {
        searchActivityIndicator.StartAnimating();
      }
      else
      {
        searchActivityIndicator.StopAnimating();
      }
      goButton.Enabled = !value;
      myLocationButton.Enabled = !value;
      searchLocationText.Enabled = !value;
    }
  }
 
  #endregion
 
  partial void myLocationButtonTouched (NSObject sender)
  {
    MyLocationButtonClicked(this, EventArgs.Empty);
  }
 
  partial void goButtonTouched (NSObject sender)
  {
    // hide the keyboard
    searchLocationText.ResignFirstResponder();
 
    SearchButtonClicked(this, EventArgs.Empty);
  }
 
  partial void searchLocationTextChanged (NSObject sender)
  {
    SearchTextChanged(this, new SearchTextChangedEventArgs(searchLocationText.Text));
  }
 
  public class CatchEnterDelegate : UITextFieldDelegate
  {
    public override bool ShouldReturn (UITextField textField)
    {
      textField.ResignFirstResponder ();
      EnterClicked(this, EventArgs.Empty);
      return true;
    }
 
    public event EventHandler EnterClicked = delegate {};
  }
 
  // ...
}

服务

PropertyFinderPresenter 以 PropertyDataSource（模型层暴露的“接口”）以及它所需的各种其他“服务”作为构造函数参数。例如导航服务

/// <summary>
/// A service which provides navigation from page to page.
/// </summary>
public interface INavigationService
{
  /// <summary>
  /// Navigates to a view for the given presenter.
  /// </summary>
  void PushPresenter(object presenter);
}

Presenter 需要执行许多功能，例如导航、访问地理位置和状态持久化，而这些功能无法由核心 .NET API 提供。例如，iOS 的导航 API（由 MonoTouch API 公开）与 Windows Phone 的导航 API 有很大不同。

为了让 Presenter 执行导航（或使用地理位置、或状态持久化），我们需要一个抽象层。所需的服务可以通过接口提供给 Presenter，并为 Windows Phone 和 iOS 提供特定于平台的实现。

这导致了应用程序的整体架构如下

模型和 Presenter 层在所有平台之间共享，任何特定于平台的特性或功能都作为服务提供给 Presenter 层。视图层是每个平台独有的。

上面显示的 INavigationService 接口利用了 Windows Phone 和 iOS 都采用“堆栈”式导航方法的事实。Windows Phone 实现使用了特定于平台的 System.Windows.Navigation.NavigationService，将 Presenter 映射到页面。

using WPNavigationService = System.Windows.Navigation.NavigationService;
 
public class NavigationService : INavigationService
{
  private WPNavigationService _navigationService;
 
  public NavigationService(WPNavigationService navigationService)
  {
    _navigationService = navigationService;
  }
 
  public void PushPresenter(object presenter)
  {
    App.Instance.CurrentPresenter = presenter;
 
    if (presenter is SearchResultsPresenter)
    {
      _navigationService.Navigate(new Uri("/SearchResultsView.xaml", UriKind.Relative));
    }
    else if (presenter is PropertyPresenter)
    {
      _navigationService.Navigate(new Uri("/PropertyView.xaml", UriKind.Relative));
    }
    else if (presenter is FavouritesPresenter)
    {
      _navigationService.Navigate(new Uri("/FavouritesView.xaml", UriKind.Relative));
    }
  }
}<span style="font-size: 14px; white-space: normal; ">
</span>

而 iOS 版本创建了所需的视图控制器实例，这些实例被“推”到提供的 UINavigationController 实例。

public class NavigationService : INavigationService
{
 
  private UINavigationController _navigationController;
 
    public NavigationService (UINavigationController navigationController)
    {
    _navigationController = navigationController;
    }
 
    #region INavigationService implementation
 
    public void PushPresenter (object presenter)
  {
    if (presenter is SearchResultsPresenter)
    {
      var viewController = new SearchResultsViewController(presenter as SearchResultsPresenter);
      _navigationController.PushViewController(viewController, true);
    }
 
    if (presenter is PropertyPresenter)
    {
      var viewController = new PropertyViewController(presenter as PropertyPresenter);
      _navigationController.PushViewController(viewController, true);
    }
 
    if (presenter is FavouritesPresenter)
    {
      var viewController = new FavouritesViewController(presenter as FavouritesPresenter);
      _navigationController.PushViewController(viewController, true);
    }
  }
 
  #endregion
 
} 

状态持久化和地理位置也采用相同的方法。

该应用程序有许多 Presenter 和 View 来渲染不同的应用程序屏幕。我不会一一详细介绍，它们几乎都遵循相同的模式。完整的源代码包含在本文章中——所以为什么不看一看呢？

结论

我写的那篇关于此应用程序的 HTML5 等效版本的文章有一个大篇幅介绍了用户体验，详细说明了由于选择此实现技术而做出的妥协。

对于这篇文章，没有这样的部分！使用 Xamarin，应用程序界面完全是原生的，提供了与等效原生应用程序相同的体验。

关于代码共享，使用 HTML5 或 Xamarin 等技术进行移动应用程序开发的主要驱动力之一是它允许代码共享。对于此应用程序的 HTML5 版本，大约 71% 的应用程序代码（即 JavaScript）在 Windows Phone 和 iOS 版本之间共享。

剩余的 29% 是特定于操作系统的，例如为 Windows Phone 版本添加后退按钮和应用程序栏支持。HTML5 具有增加共享代码量的潜力，如果您愿意创建一个在所有平台上看起来几乎相同的应用程序，忽略平台差异（即 Metro、Roboto、Apple 风格）。

使用 Xamarin，共享代码量有所下降

这是可以预期的，Windows Phone 和 iOS 的 UI 框架差异很大，这意味着视图层代码无法共享。有趣的是，大约三分之二的特定于操作系统的代码位于 iOS 版本中。这是因为 Windows Phone 的 UI 框架更加“高级”和强大，而 iOS 感觉更低级——您基本上需要编写更多代码。这并不一定意味着 Windows Phone 是一个更好的平台，我发现 iOS 开发的低级特性比我在 Windows Phone 上遇到过的问题更少。

HTML5 和 Xamarin 提供的开发体验截然不同。使用 HTML5，开发几乎是标准的 Web 开发，使用浏览器进行测试，以及您喜欢的编辑器或工具集。使用 Xamarin，事情会更复杂，需要一台 Mac 和一台 PC，以及对每个原生平台的了解。因此，尽管使用 C#，但我认为 Xamarin 在学习开发过程方面需要更大的前期投入。然而，这种投资小于学习原生 iOS 开发（涉及 Objective-C）所需的投资。

我在上一篇文章的结尾提供了一些要点，总结了我对跨平台开发的看法。我将在这里重复其中一些要点，并提供一些关于 Xamarin 在何处是合适技术的更详细信息。

• HTML5 是一种可行的跨平台移动应用程序开发技术。不要被技术媒体上的一些文章所迷惑，它们声称“HMTL5 将在两年内准备就绪”。它现在就可以使用了！您可以编写共享大量代码的跨平台移动应用程序。
• HTML5 是一条妥协之路。我之前的文章清楚地表明，HTML5 用户界面无法与原生应用程序相媲美。如果您选择 HTML5，请确保您了解并愿意接受这些妥协。
• 避免使用 HTML5 来匹配原生外观和感觉。在我看来，如果您不尝试匹配每个平台的原生外观和感觉，您将最大限度地利用 HTML5。相反，创建一个具有自身视觉识别度的应用程序，并在所有平台上使用它。这将最大限度地提高每个平台之间的代码共享。
• HTML5 不是唯一的跨平台技术，要实现无妥协的方法，请尝试 Xamarin！我个人觉得技术行业对 HTML5 的执着有点令人厌倦。对于跨平台移动应用程序开发，还有其他成熟的替代方案，在我看来，Xamarin 显然是一个可行的替代方案。

您可以在此处下载此应用程序的源代码： PropertyFinder.zip - 或者访问 github 项目以获取最新代码。 

为了扩展我上面最后一点，如果您想探索更多替代方案，包括 jQuery Mobile、Sencha Touch、Xamarin、Adobe AIR、Titanium 和原生开发——请查看 PropertyCross。