使用 Crosslight 轻松构建跨平台移动应用

Crosslight 简介

在构建跨平台移动应用时，移动开发者面临两个选择：是使用 HTML 还是原生？PhoneGap、Titanium 等 HTML 框架确实让开发者可以一次性支持更多平台，但缺乏原生移动应用应有的出色性能。因此，越来越多的开发者倾向于使用原生而非 HTML 来构建移动应用，因为它们提供了更大的灵活性和更高的可定制性。底层开发者会选择传统方法：使用 Objective-C 构建 iOS 应用，使用 Java 构建 Android 应用，以及使用 C# 构建 Windows Phone 和 Windows 8 应用。

由于创建跨平台移动应用存在诸多障碍和挑战，开发者们正努力寻找能够生产出性能卓越、代码可重用性高、同时保持高度灵活和可定制性，并能以松散耦合的方式构建跨平台应用的最佳跨平台框架。答案就在这里：Crosslight。

Crosslight 基于 Microsoft .NET 和 Xamarin 平台，为您提供最佳的跨平台开发体验：支持 4 个平台（iOS、Android、Windows Phone、Windows 8），拥有 100% 的 UI 逻辑复用，所有代码都用单一的共享代码库编写。凭借所有这些功能，开发者仍然可以利用每个平台上可用的所有原生 API，从而在每个平台上获得 100% 的灵活性和可定制性。

此方案的秘诀在于 Crosslight 开发中强制执行的强大 MVVM 模式。MVVM 模式允许您将 UI 逻辑与业务逻辑完全分离，同时还允许您在 ViewModel 层对属性进行数据绑定。这种模式不仅可以共享 UI 逻辑层，还可以将业务逻辑共享到所有平台。这种模式有许多优点：

• 减少应用中的 Bug：通过共享 UI 和业务逻辑，您可以创建更易于维护的应用。
• 更快的上市时间：共享代码意味着您可以更快地将应用推向市场。
• 更低的成本：更快的上市时间意味着您在构建应用资源上需要花费的成本更少。
• 可测试性：通过真正松散耦合的组件，您可以单独测试应用的各个部分。
• 可扩展性：您可以轻松地将自己的自定义组件和服务插入 Crosslight 并将其用于所有平台。

要了解 Crosslight 如何利用 MVVM 模式进行跨平台应用开发，请参阅 了解数据绑定和 MVVM 设计模式。

Hello World

让我们通过一个简单的“Hello World”示例，看看使用 Xamarin 和 Crosslight 构建时的区别。此示例假定我们有一个按钮，单击它会显示一个“Hello World”警告对话框。

Xamarin.iOS

public class MyViewController : UIViewController
{
    public override void ViewDidLoad()
    {
        base.ViewDidLoad();

        ...

        button.SetTitle("Click me", UIControlState.Normal);

        button.TouchUpInside += (object sender, EventArgs e) =>
            {
                UIAlertView alertView = new UIAlertView();
                alertView.Title = "My MobileApp";
                alertView.Message = "Hello world from my mobile app";
                alertView.AddButton("OK");
                alertView.Show();
            };
    }
}

Xamarin.Android

[Activity(Label = "AndroidApplication1", MainLauncher = true, Icon = "@drawable/icon")]
public class Activity1 : Activity
{
    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);

        ...

        Button button = FindViewById<button>(Resource.Id.MyButton);

        button.Click += delegate
            {
                AlertDialog.Builder dlgAlert = new AlertDialog.Builder(this);

                dlgAlert.SetMessage("Hello world from mobile app");
                dlgAlert.SetTitle("My MobileApp");
                dlgAlert.SetPositiveButton("OK", (o, e) => { });
                dlgAlert.SetCancelable(true);
                dlgAlert.Create().Show();
            };
    }
}

Crosslight.iOS

[ImportBinding(typeof(HelloWorldBindingProvider))]
public class MyViewController : UIViewController
{
}

Crosslight.Android

[Activity(Label = "AndroidApplication1", MainLauncher = true, Icon = "@drawable/icon")]
[ImportBinding(typeof(HelloWorldBindingProvider))]
public class Activity1 : Activity
{
}

Crosslight.WinPhone

[ViewModelType(typeof(HelloWorldViewModel))]
public partial class MainPage : PhoneApplicationPage
{
}

Crosslight.WinRT

[ViewModelType(typeof(HelloWorldViewModel))]
public partial class MainPage : Page
{
}

Crosslight ViewModel

public class HelloWorldViewModel : ViewModelBase
{
    public HelloWorldViewModel()
    {
        this.HelloCommand = new DelegateCommand(this.ExecuteHelloCommand);
    }

    public DelegateCommand HelloCommand { get; set; }

    private void ExecuteHelloCommand(object parameter)
    {
        this.MessagePresenter.Show("Hello world from Crosslight mobile app", "My App");
    }
}

如您所见，UI 代码已完全提取到一个可共享的 ViewModel 类中，并通过 BindingProvider 定义了 View 和 ViewModel 之间的绑定。这样，MVVM 模式得到了优雅的利用，并且视图仍然完全可定制，因为您仍然可以访问每个平台视图上可用的原生 API。

开始使用 Crosslight

如果这一切听起来好得令人难以置信，那就动手尝试一下，亲身体验吧。首先，您需要访问我们的 申请试用 页面，获取适用于 Windows 的 Mobile Studio 副本。请确保您已满足 此页面 上的所有系统要求。虽然安装 Mobile Studio 相对直接，但您也可以观看 此视频 了解如何安装 Mobile Studio。

使用 Crosslight 项目向导构建您的第一个 Crosslight 应用

除了强大的代码共享支持外，Crosslight 还附带 Crosslight 项目向导，可让您立即开始 Crosslight 开发。您刚才看到的“Hello World”示例已包含在 Crosslight 项目向导的可用模板之一中。要使用 Crosslight 项目向导，只需在成功安装 Mobile Studio / Premier Studio with Mobile 后，从 Visual Studio 2012 及更高版本打开“新建项目”对话框。

它位于“模板”、“Visual C#”、“Intersoft Solutions”、“Mobile”下。

Crosslight 项目向导还包含开发移动应用程序时常用的几种模板，例如导航抽屉、多页、本地化业务模板等，未来还将添加更多模板。我们还准备了一个简单的分步指南，介绍如何使用 Crosslight 项目向导创建您的第一个 Crosslight 应用。

创建您的第一个 Crosslight 应用

本视频将演示如何使用 Crosslight 项目向导（使用 Visual Studio 2013）创建您的第一个 Crosslight 应用，并在所有四个平台（iOS、Android、Windows Phone 和 Windows Store）上运行该项目。访问我们的开发者中心 http://developer.intersoftpt.com，获取 Crosslight 的全面文档。

企业应用开发变得真正简单

当使用跨平台框架构建跨平台应用时，开发者通常希望访问原生功能，并希望以最简单的方式实现这一目标。Crosslight 经过深思熟虑的构建，秉承这一理念，允许开发者使用集中式代码库，通过优雅设计的 API 调用在 ViewModel 中访问设备上可用的许多原生功能。以下是一些对开发者有用的功能列表：

简化的导航服务

强大的导航服务允许您只需简单地在 ViewModels 之间导航即可在视图之间导航。这将产生跨多个平台的一致结果。要导航到某个 ViewModel，您只需在 ViewModel 中调用以下代码。

private void ExecuteRegisterCommand(object parameter)
{
    this.NavigationService.Navigate<RegisterViewModel>();
}

除了标准的 ViewModel 导航外，Crosslight 还支持许多其他高级导航类型，例如：带有数据参数导航到 ViewModel、使用不同视图导航到同一 ViewModel、执行模态和嵌套模态（类似向导）导航、主详细导航、两级主详细导航等等。 了解更多。

多功能呈现器

使用 Crosslight 呈现器服务可以轻松显示消息、Toast 通知、操作和加载指示器。开发者只需在 ViewModel 中用一行代码调用呈现器服务即可。 了解更多。

全面的移动服务

Crosslight 移动服务允许您利用许多原生移动功能，这些功能可以从 ViewModel 中跨平台调用。例如，要调用相机服务，只需使用以下代码。

this.MobileService.Camera.Capture(new CameraCaptureSettings()
{
    AllowEditing = true,
    CaptureMode = CameraCaptureMode.Photo,
    DeviceKind = CameraDeviceKind.Rear,
    FlashMode = CameraFlashMode.Auto,
    ImageResultMode = ImageResultMode.Both,
    MediaType = CameraMediaType.Auto,
    ThumbnailHeight = 80,
    ThumbnailWidth = 80
},
result => { }
);

只需使用以下代码。

除了相机服务，您还可以利用许多其他可用功能，例如：电话、浏览器、社交服务、地图、媒体库、位置等，所有这些都可以通过 ViewModel 中的单个调用完成。 了解更多。

丰富的表单生成器

使用 Crosslight 表单生成器，创建带有自定义验证的表单从未如此简单快捷。通过简单的元数据定义，Crosslight 表单生成器允许您快速简单地构建表单，提供众多编辑器类型，例如日期时间选择器、支持数字和密码的文本框、选择编辑器、图像选择器、您自己的自定义编辑器等等。

表单元数据的示例如下。

[FormMetadataType(typeof(Item.FormMetadata))]
partial class Item
{
        [Form(Title = "{FormState} Item")]
        public class FormMetadata
        {
            [Section(Style = SectionLayoutStyle.ImageWithFields)]
            public static GeneralSection General;
            [Section("Item Details")]
            public static ItemDetailSection ItemDetail;
            [Section("Item Status")]
            [VisibilityBinding(Path = "IsNewItem", SourceType = BindingSourceType.ViewModel, ConverterType=typeof(BooleanNegateConverter))]
            public static SoldSection Sold;
            [Section]
            public static NotesSection Notes;
        }

        public class GeneralSection
        {
            [Editor(EditorType.Image)]
            [Image(Height = 83, Width = 80, Placeholder = "item_placeholder.png", Frame = "frame.png", FramePadding = 6, FrameShadowHeight = 3)]
            [ImagePicker(ImageResultMode = ImageResultMode.Both, ActivateCommand = "ActivateImagePickerCommand", PickerResultCommand = "FinishImagePickerCommand")]
            public static byte[] ThumbnailImage;
            [StringInput(Placeholder = "Product name")]
            [Layout(Style = LayoutStyle.DetailOnly)]
            public static string Name;
            [StringInput(Placeholder = "Price")]
            [Layout(Style = LayoutStyle.DetailOnly)]
            public static decimal Price;
        }  
        ...
}

结果如下所示。

要了解有关 Crosslight 表单生成器的更多信息，请查看此 页面。

强大的数据访问服务

Crosslight 数据访问服务允许您轻松执行离线 (SQLite) 和在线（基于 REST）数据操作。以下是通过 Intersoft RestClient 使用 REST 请求插入新客户的代码示例。 了解更多。

Customer existingCustomer = new Customer
{
    CustomerID = "ALFKI",
    CompanyName = "Alfreds Futterkiste",
    ContactName = "Jane Doe",
    ContactTitle = "Sales Representative",
    Address = "Obere Str. 57",
    City = "Berlin",
    PostalCode = "12209",
    Country = "Germany",
    Phone = "030-0074321",
    Fax = "030-0076545"
};
IRestRequest putRequest = new RestRequest("Customers/{id}", HttpMethod.PUT);
putRequest.RequestFormat = RequestDataFormat.Json;
putRequest.AddUrlSegment("id", existingCustomer.CustomerID);
putRequest.AddBody(existingCustomer);
IRestResponse putResponse = await client.ExecuteAsync(putRequest);

这是先前代码的结果。

在此 处 了解更多关于在 Crosslight 中显示数据的信息。

企业应用框架

Crosslight 包含一个开源应用程序框架，提供了许多最佳实践和指南，您可以轻松地将它们整合到您的企业应用程序中，例如用户注册、登录社交网络、身份验证、数据存储库等等。

下图概述了企业应用框架中可用的组件堆栈。

在此 处 了解有关企业应用框架的更多信息。

100+ 扩展和服务

Crosslight 在设计时考虑了高度可扩展的架构，使您能够轻松添加新服务或使用自己的实现扩展现有服务。在最新版本 Crosslight 2.4 中，提供了数百种服务扩展，您只需通过简单的程序集引用即可使用。

企业开发所需的许多服务已可用，例如异步图像加载器、社交网络服务、离线和数据同步服务、本地化服务等等。其结果显而易见：您可以在最短的时间内以最佳体验构建出色的跨平台应用。

在此 处 查看数百种（并且还在不断增加）出色的 Crosslight 功能。

总结

到目前为止，您已经了解了 Crosslight 并学习了一些其功能。了解一个 ViewModel 的外观可能是一个好主意，它结合了上述功能，以便您能更好地理解 Crosslight 的工作原理，以及它如何实现所有应用程序和用户交互逻辑的 100% 代码重用。

以下列表显示了 LoginViewModel 的代码，它执行了几个任务。当点击登录按钮时，它会向服务器验证提供的凭据。如果凭据匹配，它会将用户导航到主屏幕；否则，它会显示登录失败消息。

public class LoginViewModel : ViewModelBase
    {
        private string _username;
        private string _password;

        public LoginViewModel()
        {
            this.LoginCommand = new DelegateCommand(ExecuteLogin);
        }

        public DelegateCommand LoginCommand { get; private set; }

        public string Username
        {
            get
            {
                return _username;
            }
            set
            {
                if (_username != value)
                {
                    _username = value;
                    OnPropertyChanged("Username");
                }
            }
        }

        public string Password
        {
            get
            {
                return _password;
            }
            set
            {
                if (_password != value)
                {
                    _password = value;
                    OnPropertyChanged("Password");
                }
            }
        }

        public IAccountService AccountService
        {
            get
            {
                return this.GetService<IAccountService>();
            }
        }

        public async override void Navigated(NavigatedParameter parameter)
        {
            if (parameter.Sender != null && parameter.Sender is NavigationViewModel)
            {
                // called from main menu, ensure logged out
                if (this.AccountService.IsLoggedIn())
                    await this.AccountService.SignOutAsync();
            }
        }

        private async void ExecuteLogin(object parameter)
        {
            if (string.IsNullOrEmpty(this.Username) || string.IsNullOrEmpty(this.Password))
            {
                this.MessagePresenter.Show("Please enter your username and password.");
                return;
            }

            var account = this.AccountService.CreateEncryptedAccount(this.Username, this.Password);

            this.ActivityPresenter.Show("Logging in...", ActivityStyle.SmallIndicatorWithText);

            try
            {
                await this.AccountService.SignInAsync(account);

                // ensure the account is authenticated and signed in
                if (this.AccountService.IsLoggedIn())
                    this.NavigateToMainViewModel();
            }
            catch (Exception authException)
            {
                this.MessagePresenter.Show(authException.GetExceptionMessage(), "Login Failed");
            }

            this.ActivityPresenter.Hide();
        }

如您在上面的代码中所见，登录实现的实现非常直接。由于 UI 逻辑在 ViewModel 中实现，而 ViewModel 通常位于可移植库项目中，因此它不依赖于任何特定于平台的 API。简而言之，您可以轻松地在 ViewModel 中编程您的用户交互逻辑，例如屏幕导航、显示活动指示器、异步检索数据、显示丰富的数据表单。

您还可能注意到，由于 Crosslight 服务构建于异步 API 之上，因此您可以在 ViewModel 中利用您喜欢的 C# 语言功能，如 async 和 await。有关完整的代码列表，请参阅 Crosslight 示例存储库 此处。

了解更多

加入 Crosslight 产品团队，他们将在为期三天的录制网络研讨会视频中介绍 Crosslight 2 中提供的新功能。

网络研讨会 - 使用 Xamarin 和 Crosslight 以单一代码库构建跨平台原生应用

Crosslight 利用可扩展架构、MVVM 设计模式以及与 Xamarin 平台的集成，让您能够轻松构建强大的 iOS、Android 和 Windows 原生应用，并共享通用的应用程序代码库，包括域模型、数据访问和用户交互逻辑。这意味着您可以共享项目代码库的 96%。

网络研讨会 - 使用 Crosslight 企业框架构建数据感知型应用

本视频是 2014 年 6 月 11 日的网络研讨会录制。观看 Intersoft Solutions 首席技术官 Andry Handoko Soesilo 介绍如何使用 Crosslight 企业框架构建数据感知型应用。您还将学习如何构建简单的移动 CRM 应用，该应用具有下拉刷新、增量加载和同步功能，以及一个利用 Crosslight 企业应用框架内置的 SQLite 服务的简单费用应用。

网络研讨会 - 使用高级 Crosslight UI 和服务构建精美的应用

本视频是 Crosslight 2（2014 年 6 月 10-12 日）为期三天网络研讨会课程的最后一天录制。观看 Nicholas 向您介绍可在 ClientUI 和 Crosslight 之间无缝工作的新的企业报表功能，一次性向多个平台发送推送通知，以及使用 Facebook 登录进行身份验证。访问我们的网站 developer.intersoftpt.com，了解更多关于 Crosslight 的信息。

还想了解更多？在此 处 查看完整的视频教程。

下一步

有了 Crosslight，您肯定会得到很好的支持。如果您是 Crosslight 的新手，强烈建议您查看 Crosslight 入门指南，以全面了解 Crosslight。Crosslight 还提供全面的 文档 和 示例，让您亲自动手，看看 Crosslight 的实际应用。如果您有任何问题，不断壮大的 Crosslight 社区 可能会为您解答。YouTube 频道还提供了更直观的参考，涵盖了 Crosslight 的多个方面。 定期更新 和 全面的发行说明 会让您及时了解可用的新功能和修复。

总之，Crosslight 不仅仅是一个框架，它还是一个全面的工具集，使移动开发者能够快速构建跨平台应用。Crosslight 提供了许多节省时间的特性，例如 Crosslight 项目向导、与 Visual Studio 2012 及更高版本集成的 50 多个现成项目模板、强大的数据访问服务、数据访问和演示等等。 获取 Crosslight 副本，亲身体验吧！