关于Xamarin、Qml、数据绑定、MVC、MVVM 相关的散讲

SURFSKY 2017.02

最近又在学习Xamarin了？为什么是“又”？有几个利好消息，让我重新拾起它：

    （）微软去年收购了Xamarin，而且免费。原先的费用会吓死人，而且按人头+平台来收费。

    （）Xamarin.Forms 的出现，UI层也可以复用了，不像原先只能逻辑层代码复用。

    （）IDE增强：

        Xamarin Forms Previewer，可以直接预览 XAML 的外观。

        XAML 智能感应的增强，现在编写XAML舒服多了。原先编写XAML可不是件轻松的事情，所以之前的教材全部都是用C#写的UI，这很不利于视图和逻辑的分离。

        Visual Studio for mac 发布，可替代原先的 Xamarin Studio for mac。毕竟，在mac下编写ios/Android app无论性能还是便利性都要比在windows上好得多。

        不愧是宇宙最强IDE开发商，一接手Xamarin，编辑器就增强了：）

    （）真正的一个语言可以编写跨平台移动app，包括后台、ios、android、windows uwp 等

        数据接口和后台：用 asp.net 写即可

        移动客户端API：Xamarin 已用C#封装好，如果需要平台专用功能，直接调用即可。

        这很利于节省成本、积累技术、简化员工招招聘和培训。

    （）性能

        对于ios平台，xamarin是将c#编译成原生的代码。android是嵌入了.NET运行时。

        实测试了下，ios下没有任何问题，3秒左右进入主界面，进去后性能就和原生的没有区别了

        android的启动略慢，估计要5秒，进去后性能没有问题。

        加个欢迎屏可以稍微减缓客户等待的焦虑感。

当然还有缺陷和期望

    缺陷

        Xamarin.Forms 的控件是转化为各平台原生控件的，也就是说，这些控件在各平台上外观都有区别！

        IED

            复杂的 XAML previewer展示不出来。

            无法拖拽控件快速设计页面。

            VS MAC 有时候屏幕刷新不过来，一片白。

            经常出现“不是在活动配置中生成的项目”，无法加载项目。

        启动速度还是慢了点，位于可容忍的边缘。

        没有官方的、统一的移动平台功能 API 库。

            类似PhoneGap那样的，访问摄像头、传感器等API，一套代码各平台通用。

            现有的这些功能API是分散在各平台自己的库里的，学习一个统一库与学习多平台类库，工作量当然不一样。

            早些年有Xamarin.Mobile项目，但与Xamarin.Forms不兼容已经废弃了。

            现在这些功能API插件处于散乱琐碎状态，要自己一个个去Xamarin Compoents/GitHub上找。

    期望

        不知什么时候可以直接拖拽 Xamarin Forms 控件，一个平台也行啊。

        加快 Xamarin Form Android app 启动速度。

        需要一套外观一致的 Xamarin Forms UI 库，但短期内不会有，要我们直接写了（*）

        官方推出统一的跨平台移动功能 API 库：Xamarin.Forms.Mobile（*）

    备注

        当然 Visual Studio for mac 还是预览版本，等正式版估计BUG会少一些。

        （*）打算启动这两个项目，欢迎有共同志向的同学参与。

相比较 Qt

    性能还是Qt占优的，毕竟底层是C++写的。但Xamarin的性能也在可容忍范围内，主要是启动时间稍慢了点。

    APP 大小。

        都在20M以上，

        Qt

            V-Play apps 基于Qt的游戏引擎 52.4M

            新发布的 Qt .8据说可以裁剪库的大小，将APP压缩到4、5M内

        Xamarin 我也搞不清楚了。

            Xuni Explorer 只有 5.6 M

            Evlove  有46.1M

            随便编译个debug版本的，估计有60多M，release的还没试验

    虽然说理论上 Qml 可以摆平一切界面问题，但我们不可避免的要涉及到各平台的插件，那么你真正需要学习的语言有：

        QML           :

        Javascript    :

        C++           : Qt类库

        Object-C      :

        Android       :

    ps.真希望Qml能发展成独立的开发语言（参照 swift）

        强类型

        可编译

        简化创建组件语法，直接用new MyItem()，而不是复杂的Qt.CreateComponent.....

        摒弃js、v4引擎，提供工具将js迁移为标准Qml

        独立发展 Qml 类库

        更便利的方式访问c++类库，类似swift那样，只需Import即可使用

绑定的前世今生

    若要监控一个对象的若干属性变化情况，传统写法是为每个要监控的属性加上一个值变更事件，然后让调用者添加这个事件

        public event Event FirstNameChanged;

        public string FirstName {get; set;}

        sample.FirstNameChanged += (o, value)=>txtbox.Text = value;

        这样很可能要写很多的属性变更事件，而且不能自动给订购者赋值

    什么是绑定？它事实上做了两件事

        （）监听对象指定属性，若变化，则通知给订购者

        （）给订购者赋值

    微软给出的官方方案是

        （）绑定系统维护了一个表格（在绑定表达式中指定），字段大致包括：

            object SourceObject         : 监听对象

            string SourcePropertyName   : 监听对象的属性名称

            object TargetObject         : 订购者

            string ValuePath            : 赋值路径

        （）让数据实现INotifyPropertyChanged接口

            public event PropertyChangedEventHandler PropertyChanged;

            若监听对象的属性有变动，则触发这个事件，通知绑定系统

            这个事件的参数中包含了监听对象和变更的属性名称（SourceObject + SourcePropertyName）

        （）绑定系统去查表，给订购者进行赋值

            TargetObject = SourceObject.SourcePropertyName.ValuePath

属性变更通知

    INotifyPropertyChanged接口（属性变更的时候通知下绑定系统，我的哪个属性变更了，快处理啊）

        class Sample : INotifyPropertyChanged

        {

            // INotifyPropertyChanged 接口成员

            public event PropertyChangedEventHandler PropertyChanged;

            // 属性

            private string firstName;

            public string FirstName

            {

                get { return firstName; }

                set

                {

                    firstName = value;

                    if (PropertyChanged != null)

                        PropertyChanged(this, new PropertyChangedEventArgs("FirstName"));

                }

            }

        }

        // 绑定(textBox.Text <= sourceObject.FirstName)

        Sample sourceObject = new Sample();

        textbox.DataBindings.Add("Text", sourceObject, "FirstName");

        sourceObject.FirstName = "Stack";

我们做一下封装，加上值相等判断。

    定义 ViewModelBase

        using System;

        using System.ComponentModel;

        using System.Runtime.CompilerServices;

        namespace Xamarin.FormsBook.Toolkit

        {

            public class ViewModelBase : INotifyPropertyChanged

            {

                public event PropertyChangedEventHandler PropertyChanged;

                protected bool SetProperty<T>(ref T storage, T value, string propertyName = null)

                {

                    if (Object.Equals(storage, value))

                        return false;

                    storage = value;

                    if (PropertyChanged != null)

                        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

                    return true;

                }

            }

        }

    让数据模型类继承自ViewModelBase

        public class InformationViewModel : ViewModelBase

        {

            string name;

            public string Name

            {

                get { return name; }

                set

                {

                    if (SetProperty(ref name, value, "Name"))

                    {

                        ...属性已经更新，该干点啥

                    };

                }

            }

        }

Xamarin 的方案（使用 BindableObject)

    代码

        public RadioButtonGroup : BindableObject

        {

            public static readonly BindableProperty TextProperty = BindableProperty.Create("Text", typeof(string), typeof(Radio), "", propertyChanged: TextChanged);

            private static void TextChanged(BindableObject bindable, object oldValue, object newValue)

            {

                var radio = (Radio)bindable;

                radio.Lbl.Text = (string)newValue;

            }

            public string Text

            {

                get {return (string)this.GetValue(TextProperty);}

                set {this.SetValue(TextProperty, value);}

            }

        }

        this.Icon.SetBinding(Image.IsVisibleProperty, new Binding("ShowRadio", source: this));

    说明

        这里的BindableProperty是用于描述这个属性的元信息，如名称、类型、默认值、绑定方向、属性值变更事件

        BindableObject 是 INotifyPropertyChanged 的封装，增加了绑定上下文、属性变更中、属性变更完毕事件等逻辑

            public abstract class BindableObject : INotifyPropertyChanged, IDynamicResourceHandler

            {

                public static readonly BindableProperty BindingContextProperty;

                public object BindingContext { get; set; }

                protected BindableObject ();

                // Methods

                protected void ApplyBindings (object oldContext = null);

                public void ClearValue (BindableProperty property);

                public void ClearValue (BindablePropertyKey propertyKey);

                public object GetValue (BindableProperty property);

                protected virtual void OnBindingContextChanged ();

                protected virtual void OnPropertyChanged ([CallerMemberName] string propertyName = null);

                protected virtual void OnPropertyChanging ([CallerMemberName] string propertyName = null);

                public void RemoveBinding (BindableProperty property);

                public void SetBinding (BindableProperty targetProperty, BindingBase binding);

                public void SetValue (BindablePropertyKey propertyKey, object value);

                public void SetValue (BindableProperty property, object value);

                protected void UnapplyBindings ();

                // Events

                public event EventHandler BindingContextChanged { add; remove;}

                public event PropertyChangedEventHandler PropertyChanged {add; remove;}

                public event PropertyChangingEventHandler PropertyChanging {add; remove;}

            }

单向数据绑定和双向数据绑定

    单向：model的变更会刷新view，view上做任何操作都不影响model

    双向：model的变更会刷新view，view的变更会刷新model

    个人只喜欢用单向的，理由呢：

        喜欢实打实的代码来控制数据刷新，双向的数据绑定总觉得不放心

        view的交互，常常带了逻辑控制，不仅仅是给model赋值，这不是双向数据绑定能解决的。

其它

    Qt QML的属性、绑定、属性变更事件实现起来非常优美和简单

        A

        {

            property int Property1;

            // 编译器会自动生成类似以下方法

            // bool onProperty1Changing(o, oldValue, newValue){...}

            // void onProperty1Changed(o, oldValue, newValue) {....}

        }

        b.Property2 = a.Property1;  // 绑定这两个对象的属性（单向绑定）

    建议 C# 优化编译器，或者提供语法糖之类的东西（如propety关键字）

        public readonly property string Name;

        编译器自动实现：

            getter、setter

            INotifyPropertyChanged 接口

            PropertyChangingEvent

            PropertyChangedEvent

            绑定逻辑

        事实上，这个功能10来年前的 Delphi 就实现了

什么是 MVC

    这是将界面、逻辑、数据隔离的一种方案，这其实也是绑定的一种实现，不过是页面级别的。

        Model      : 数据

        View       : 视图

        Controller : 控制器

    视图的呈现由控制器控制，视图的数据（模型）也由控制器提供

    TODO: 补一个简单的示例

    ASP.NET MVC

        是一个controller对应多个view

        它的controller主要就是个跳转器，根据客户端请求，组装数据并提供给某个视图，渲染到客户端

        疑问：

            大的页面用controller跳转好理解

            但小的交互，如按钮点击页面上的某个label变个文字，这个也交给controll是不是太琐碎了？

            这个还是交给页面客户端自己处理会更合适，但这要写js了

    其实传统的 Windows Form 也可以看为一种MVC

        View部分可由设计器创建

        View的数据展示、交互（如点击事件）在后台代码中，这个可以看成Controller

        不过这种方式是一个view对应一个controller，这个controller是这个view专用的

    ios-objectc 的MVC

        这货和 Windows Form 差不多，也是一个视图对应一个专用的控制器

        挂MVC的头衔，行Windows Form的行当。

什么是 MVVM

    这是将界面和数据完全隔离的一种方案

        Model      : 模型

        View       : 视图

        ViewModel  : 视图模型

    传统的页面数据展示，可以是混杂的，既有数据绑定，也可以掺杂代码指定。如：

    TODO：来段 MVVM 的示例代码

    可以看出，MVVM是一种更极端的、界面和数据完全隔离的方案：

        它定义了一个叫 ViewModel 的东西，这个也是一种Model，但专用于视图

        视图的赋值只能用 ViewModel，不能用其它方式

        我们必须为每个 View 定制一个 ViewModel。

    评价

        好处：完全隔离视图和数据、只要约定好数据接口（ViewModel）就行

        坏处：必须为每个视图都定制 ViewModel，这会增加代码量

ps

    - 出了个 Xamarin Live Player 的东东，可以在手机上展示程序运行效果

        android版本的可以直接下载，ios版本的还在testflight中

        https://docs.microsoft.com/zh-cn/xamarin/tools/live-player/