如何让你的Android项目更容易移植到的Windows / MacOS的（反之亦

时间：2016-05-24 09:10 来源：互联网作者：源码搜藏收藏

使用ThinkAlike，正在进行的Java框架MVVM（采用的Android和JavaFX作为视图层），来实现跨平台的炉石游戏卡的参考和更多。下载安装程序和源文件（Android和桌面）目录介绍背景环境包装事业部功能设计建筑分析与设计实施（功能＃2）分配结论介绍

使用ThinkAlike，正在进行的Java框架MVVM（采用的Android和JavaFX作为视图层），来实现跨平台的炉石游戏卡的参考和更多。

ThinkAlike的Android ThinkAlike的JavaFX

介绍

本文讨论了使用Java和MVVM模式实现Android的桌面跨平台应用程序的实用性。

我想向大家介绍ThinkAlike代码库首先，我已经实现了我的跨平台战略。

这是一个持续的Java框架MVVM（采用的Android和JavaFX的（或SWT，Swing的）作为视图层），旨在更容易跨平台开发。

特别是，如果你想继续服用Android原生SDK的充分利用，同时保持跨平台的可能性，这个Java解决方案的工作。

这是不是单声道/ Xamarin - .NET解决方案是很好的。但在某些情况下，Java解决方案是Android的母语将更预期。

这是不是 PhoneGap的/科尔多瓦 -混合解决方案仍具有UI / UX的缺陷在一定程度上。

这是不是一个生产性的框架，但（进行中）。许多有用的功能，可以添加，如组件级属性绑定（是否可编辑，可关闭，验证规则，热键等）。但是，它已经通过小规模的项目支付，一个跨平台的搭载EPUB阅读器（适用于Android和Windows）来验证其可行性和可扩展性。

一些香料添加到MVVM框架，一些游戏的因素（图像）已经被引入了。炉边，由暴雪娱乐公司新发布的免费任玩策略卡牌游戏，将用作我的主题。就像本场比赛针对跨平台的市场，我们的目标将是一个卡参考库 Android和桌面平台（屏幕截图如上图所示）。

我将举例说明了跨平台的交易流程通过实施如何“ 选择的节点显示详细信息（卡）一步一步”。与MVVM经验的读者可直接进入核心内容。

必要的介绍相关概念（MVVM，Android的， JavaFX的）包含在背景部分。对于如何建立开发环境，看到环境一节。特别是，对于读者谁怀疑JavaFX应用程序可以被分配到没有安装JRE的平台，请参阅分配部分。

背景

跨平台解决方案MVVM引用，经验丰富

在设计阶段，我曾提到的iOS WebKit的，ZK，Xamarin，Android的结合，的PhoneGap和JavaFX。在此之前，我已经有在WPF项目经验（MVVM的“母亲”，而MVP是系谱“父亲”）和Android UI的生态系统。这种跨平台的代码库最初开发，以满足客户实际需求 - 而不是大规模的，但快速发展的Android的桌面项目。

知识要求：MVVM，Android的，JavaFX的

MVVM在WPF MVVM在ThinkAlike

“MV-VM”从MVP模式（Martin Fowler的）起源，是后者为实现WPF / Silverlight的微软的专业化。WPF的MVVM的眼光建议，并在上面第一个图所示。也有比其他WPF MVVM框架：Java的框架ZK，并为HTML5 AngularJS和KnockoutJS。其实不同层的职责划分是正在进行的讨论和探索的课题。

你可能注意到在“视图模型”波浪红色下划线（好吧，我承认那是因为已经忘了关闭拼写检查的〜）。这就是所谓“VM”代表。该视图模型层提取“逻辑”的一部分（用例为导向，与平台无关）从视图层，除了“非逻辑”UI / UX代码（大小，颜色等）。UI / UX开发者可以实现不同的视图模块通信一个视图模型，甚至使用不同的GUI技术（WPF，WinForm的等）。

上述第二个数字描述了ThinkAlike的MVVM实现。通过对比，WPF，ThinkAlike使用的iProperty / ICommand的事件处理接口视图层和视图模型层之间的粘合剂。用户命令（而不是中间的UI操作）将被解释为，这将在视图中，并派出由视图模型处理ICommand的事件。同时，UI更新反馈将被解释为将从视图模型由视图被解雇和消费的iProperty（更改）事件。

注：数据绑定，约翰Gossman（MVVM创建者）说，“有利也有弊。” 最重要的是，我们的跨平台解决方案不具有“跨平台”UI标记文件还没有，这也减少了数据绑定的好处。如何制定出妥协Android的XML UI标记，JavaFX的的FXML UI标记和其他标记语言之间？甲骨文推出开源JavaFX的iOS和Android，可能导致一些突破。

“组件模型”在图的右边是指布局/控制（图像/文本/组合框等）。独立于平台的完整的组件库，如果有更多的资源和鼓励，并已完成，将使开发人员能够实例化和通用（独立于平台的）模块控制特定于平台的布局/控制实例（如Xamarin在.NET做）。但是，由于“跨平台”标记文件的困境，宣告布局受益/ UI中的标记文件控件无法享用。

有关MVVM的更多详细信息，

Android和JavaFX的平台专用视图层的实现仅仅使用。这些谁在这两个领域有经验，可以知道他们在许多方面的不同之处（如细节喜欢如何自动调整图像到其容器）。但是，即使你不与Android / JavaFX的熟悉，你仍然可以通过这篇文章阅读并掌握MVVM跨平台的流程。

Android的主题：

JavaFX的主题：

MVVM

概述：模型视图视图模型，@Wikipedia

WPF框架：莲花V2，@code项目

划界讨论：那么到底是什么视图模型？@InfoQ

Android和JavaFX的

概述：培训Android开发：入门

API：Android版的API

样本：API演示（与Android SDK发布）

意图：意图和意图过滤器

查看：活动

意向查看映射：应用清单

GUI ::布局（Java的+ XML标记）：布局

GUI ::布局::片段：构建动态UI与片段

JavaFX的合奏

概述：JavaFX的文档

API：JavaDoc的JavaFX的2

样本：JavaFX的合奏（演示选项卡+源选项卡）

GUI ::布局（JAVA）：正在与布局中的JavaFX

GUI ::布局（标记）：介绍FXML

GUI ::风格：JavaFX的CSS参考指南

环境

以下是我的开发工具盘点：

基地：月食/ E（FX）clipse 4.2朱诺+ JDK 1.7

我强烈推荐E（FX）clipse提供的JavaFX工具Eclipse集成开发环境，并保持与其他发展稳定的兼容性。

JDK 1.7采用JavaFX的。Android项目将默认降解为JDK 1.6编译器遵从性水平。

Android SDK中+ ADT插件

的JavaFX SDK（包含在JDK 1.7）+ JavaFX的场景生成器

包装事业部

ThinkAlike是由3个项目中，有后缀_Generic（独立于平台），_jfx（JavaFX的），和_android（为Android）分别

资产文件，而相比之下，特定于平台的资源文件，将在通用包进行管理。

（对于Eclipse用户）某些设置应适用于特定于平台的项目：

Android项目

源文件夹：项目属性>构建路径>链接源...，链接ThinkAlike_generic的\ src到ThinkAlike_android \ src_generic。

资产文件夹：使用链接的源文件夹为好。链接ThinkAlike_generic \资产为ThinkAlike_android \资产。

JavaFX项目

源文件夹：项目属性> Java构建路径>项目>添加...，增加了ThinkAlike_generic。如果使用链接的文件夹，电子（FX）clipse会产生一些问题。

资产文件夹：发现com.thinkalike.jfx.assets的Eclipse中，新建>文件夹>高级包文件夹，创建一个链接文件夹ThinkAlike_generic \资产\ ThinkAlike。构建路径>包括将其纳入到构建罐子。

功能设计

完整版本的卡参考图书馆可能有这样的特点：

节点（卡）选择器（基本）

节点（卡）的详细信息（基本）

显示所选卡在中心区的详细信息（在卡选择器）。

节点（卡）选择过滤器（基本，TODO）

一叠卡片生成器（TODO）

基于魔法门计算卡组成提示（高级）

卡甲板之间的竞争自动（高级）

No.1-3是通用的功能和将在ThinkAlike项目来实施。甲板生成器可以派生作为未来一个独立的项目。功能2，显示卡的细节，将在本文中加以说明。

建筑分析与设计

序列图

ThinkAlike MVVM序列图（点击放大）

（点击放大）

详细情况将在以纯文本来说明实施部分。

词汇表

为了避免歧义，以下术语的使用将予以澄清：

特定于平台的：也被称为“平台相关”。指的是链接到一个特定的技术平台，如Android，JavaFX的功能/模式。

平台无关：而不是特定于平台。

通用：是指独立于平台的。独立于平台的代码/资产组装在一个普通的项目。

查看：指窗口 -level视图。Android使用术语活动，而JavaFX的名字，叫作场景。

组件：是指布局或控制，如的LinearLayout / TextView的/的ImageView在Android或HBox中/垂直框/标签/ ImageView的 JavaFX中。

节点：为了避免使用中的框架特定领域的术语（egCard），通用的术语节点将被使用。

实施（功能＃2）

现在，让我们走过来实现功能2所需的步骤- 一个节点（卡）的显示细节。

序列图和术语的定义可以被发现在上一节。

[JavaFX的]

我宁愿先建JavaFX项目以便采取在调试利用其迅捷的。当您需要确认Android功能，可以如你所愿交换机的优先级。

0.Fix在序列图中示出的类/实例，尤其是平台特定的：

L0：平台特有的 “自适应”应用类：。com.thinkalike.jfx ThinkAlikeApp

应用程序的入口。它继承原生应用类（javafx.application），并实现独立于平台的平台接口（以便提供特定于平台的数据/方法将通用模块）

L1：特定于平台的原生景观类：如javafx.scene.layout。AnchorPane

底图机类的主窗口。

L2：平台特有的 “自适应”视图类：如。com.thinkalike.jfx.view MainScene

继承了L1的原生UI的功能，并与L7（ViewModel类，如下所述）通过的iProperty / ICommand的事件处理接口交互。

L3：特定于平台的本机组件类：如。javafx.scene.image 的ImageView

底图机类的布局/控制，包括显示节点（卡）图像视图。

L4：平台特有的 “自适应”组件类：如com.thinkalike.jfx.control。ImageNodeView

继承L3重用天然功能，同时满足L5（Component接口，如下所述）的要求，以便更新基于ComponentModel实例的数据（根类是基础组件视图UINode）。

L5：独立于平台的组件接口：如com.thinkalike.generic.viewmodel.control。IImageNodeView

声明要求“自适应”组件类必须满足，一般更新（UINode）接口。

L6：独立于平台的 ComponentModel类：如com.thinkalike.generic.viewmodel.control。UIImageNode

包括UI相关的数据/方法。有些UINode可持有只读“门面”（基本接口是INodeRO）后台数据的对象。

L7：独立于平台的视图模型类：如com.thinkalike.generic.viewmodel。WorkareaViewModel

通常单，并通过相关的L2（“适应性”视图类）实例化。它包括实施IPropery（包括事件注册/ unregist /提交），以及交易的ICommand（检索数据对象，封装视图对象，并提交的iProperty更改事件的所有监听活着）。

L8：独立于平台的数据类：例如。com.thinkalike.generic.domain ImageNode

包括域名相关的数据/方法，通常限制了它的可视图模型层内，以上限制地，（域）模型层。

L9：独立于平台的 DAO类：如com.thinkalike.generic.viewmodel。NodeLoader

持续的数据和数据对象之间进行转换。其可也仅限于视图模型层（域）模型层。

1.首先（和最直观的）步骤，是乱涂的使用故事的非逻辑的UI（功能＃2）

UI标记文件 - 的JavaFX

FX：ID =“inv_nodeContent”标识图像元件，它示出了由用户选择的节点（卡）的细节。请注意，ImageNodeView不是JavaFX的本地类，但“自适应组件类”（L4）。JavaFX的允许直接受雇于UI标记文件的自定义布局/ Control类（如Android的做），使非逻辑UI / UX和逻辑开发者之间彻底的分工。

UI布局：\ SRC \ COM \ thinkalike \ JFX \水库\布局\ scene_main.fxml

以上是关于功能＃2（命名为UI区号段“工作区”）。应该放置在声明视图（整个布局的FXML文件L2）。FXML的标记语言，简单易学为那些谁拥有经验，HTML / XAML / Android的XML标记。在JavaFX的UI编程（Java或标记）快速启动，你可以参考知识要求分条。

UI风格：\ SRC \ COM \ thinkalike \ JFX \水库\ style_dark.css（黑暗风格）

JavaFX的大量采用层叠样式表（CSS）的优势。有W3C CSS知识就可以轻松掌握与供应商的装饰“-fx-”为前缀的JavaFX的等值Web开发人员。（是的，它比Android的更容易给我。）

2.Associate特定于平台的*自适应View类（L2），其对应的独立于平台的 ViewModel类（L7），用于处理的iProperty更改事件。

SD_ThinkAlike_MVVM_IProperty

// com.thinkalike.jfx.ThinkAlikeApp

com.thinkalike.jfx.view.MainScene =

（MainScene）replacePrimarySceneContent（Res.getLayoutUrl（ “ scene_main.fxml” ））;

MainScene是主机自适应视图（场景指活动在JavaFX中）。该FXML文件的URL是采取实例化。

com.thinkalike.jfx.res.Res是特定于平台的实用工具类。资源/资产管理代码已经超出了本文的主线程但是，您可以检查源代码包的详细信息。

// com.thinkalike.jfx.view.MainScene

@FXML

com.thinkalike.jfx.control.ImageNodeView inv_nodeContent;

在JavaFX中，视图类申报组件（场），这些相关FXML标记，以这种方式实例变量。该inv_nodeContent然后将被分配到具有相同名称的组件（FX：ID =“inv_nodeContent” ）时自动被解析FXML。

// com.thinkalike.jfx.view.MainScene

_vm_workarea = com.thinkalike.generic.viewmodel.WorkareaViewModel.getInstance（）;

跨平台MVVM项目的真实核心视图模型类，通常是实例化为单由其响应查看实例中的一个，并具有较长的生命周期。

要处理的iProperty事件：节点（卡）在工作区的中间已被更改。

平台特定的*自适应View类的实例：@（发生在）特定于平台的*自适应应用类（L0）

平台特定的*自适应组件类的实例化：// @特定于平台的*自适应View类（L2）

（参考）的实例化与平台无关的 ViewModel类：@特定于平台的*自适应View类（L2）

物业维修事件：@ 与平台无关的 ViewModel类（L7）

//com.thinkalike.jfx.view.MainScene

_listenToVM_workarea = new PropertyChangeListener(){

@Override

public void onPropertyChanged(PropertyChangeEvent event) {...}

};

_vm_workarea.addPropertyChangeListener(Constant.PropertyName.Node,

_listenToVM_workarea);

_listenToVM_workarea被实例化来处理一个简单的onPropertyChanged（）回调接口。然后，它赞同有关视图模型（_vm_workarea），听取有关特定财产的事件。Constant.PropertyName.Node标识的财产，并在视图模型的基础没有重复。对于重量级应用，EventBus图案将是有用的。

//com.thinkalike.generic.viewmodel.WorkareaViewModel

this.firePropertyChange(Constant.PropertyName.Node, oldValue, _uiNode);

当视图模型已经准备了一个新的视图对象或ComponentModel（egUIImageNode），其提交属性更改事件与对象作为参数。

事件注册（由特定于平台的*自适应View类（称为L2））：

注销事件：尚未使用。

欲了解更多实施细节，有一个PropertyChangeListenerAdapter管理WeakReference的地图，以避免被淘汰通知事件侦听器。您可以致电removePropertyChangeListener（）有意取消事件订阅为好。

事件提交：

物业事件处理：@特定于平台的*自适应View类（L2）和自适应组件类（L4）

隐藏复制代码

//com.thinkalike.jfx.view.MainScene

@Override

public void onPropertyChanged(PropertyChangeEvent event) {

if (event.getPropertyName().equals(Constant.PropertyName.Node)){

updateWorkarea((UINode)event.getNewValue());

}

当被通知节点发生了变化，自适应View类将事件参数转换成内部方法的参数。

有两种方法来通用ComponentModel对象供给到代表层：

在这两种情况下，自适应Component类（的实例L4）将调用更新（UINode）来更新自身。最后，底层的本地组件类（L3）将接受翻译信息从ComponentModel做实际的渲染。在这点上，ComponentModel（属于一般的模块）应当被设计为能够容纳特定平台的视图类的不同需求。例如，在ImageView的的情况下，机器人和JavaFX对相对尺寸测量不同的程序（JavaFX的不具有onPreDraw（）回调）和异步图像加载（JavaFX的支持它默认，而Android没有）。因此，开发商必须研究每个平台的策略，以找到合适的出路。很高兴，这样的工作需要一次只完成（每种成分的，不同的非功能性需求）。JavaFX的：

//com.thinkalike.jfx.control.ImageNodeView

protected static void update(UINode uiData, ImageView rawView) {

if(uiData instanceof UIImageNode){

//0.initialize according to context.

int width_limit, height_limit;

width_limit = (int)rawView.getFitWidth();

height_limit = (int)rawView.getFitHeight();

//1.set the default image:

rawView.setImage(new Image(Res.getImageUrl("default_image.gif")));

//2.Async load Image:

final String imageUrl = Util.getAbsoluteUrl(((UIImageNode)uiData).getRelativePath());

Image image = Util.decodeThumbFromFile(imageUrl, width_limit, height_limit);

rawView.setImage(image);

}

事件处理：

UI更新：

UINode.attachView（INodeView）

如果自适应元器件实例已经存在（如在的情况下NodeContent），ComponentModel可以连接到它。

UINode.createView（）

否则，如果没有一个自适应组件，ComponentModel可以要求相关类型Component类的动态实例化（如在细胞中的情况下NodeSelector）。厂类将实例上要求适当平台特定* Component类。

3.Make平台特有的自适应* View类（L2）翻译用户的命令操作ICommand的事件这是可以理解到相应的平台无关的ViewModel类（L7）

SD_ThinkAlike_MVVM_ICommand（点击放大）

//com.thinkalike.jfx.view.MainScene

this.lv_nodeList.getSelectionModel().selectedItemProperty().addListener(

new ChangeListener<UINode>() {

public void changed(ObservableValue< extends UINode> ov,

UINode old_val, UINode new_val) {

if(_vm_nodeSelector!=null){

_vm_nodeSelector.onNodeSelected(new_val);

}

});

当用户交互发生在NodeSelector，上面的ChangeListener将收到通知从本地ListView控件（lv_nodeList），然后激活的ICommand（onNodeSelected（）相关的视图模型（中）_vm_nodeSelector：NodeSelectorViewModel）。如上所述，一个EventBus图案都可以在这里使用的两种的iProperty和ICommand的事件。在简化的情况下，但是，一个同步的方法调用工作为好。

//com.thinkalike.generic.viewmodel.NodeSelectorViewModel

public void onNodeSelected(UINode uiNode){

INodeRO oldValue = _nodeSelected_RO;

_nodeSelected_RO = uiNode.getDataRO();

this.firePropertyChange(Constant.PropertyName.Node, oldValue, _nodeSelected_RO);

}

在接受ICommand的事件，NodeSelectorViewModel检索“只读数据接口”（INodeRO从）UINode。这是因为UINode，作为查看对象，具有不能由其他UI被简单地再利用它自己的UI上下文（例如，在这种情况下，在列表中小区节点将具有比在工作区域中的较小的默认大小），和因此具有暴露底层数据对象传输。的INodeRO，或只是节点，如果访问权限不考虑，将用于在这种情况下提出IPropery变化事件。

//com.thinkalike.generic.viewmodel.WorkareaViewModel

_listenToVM_nodeSelector = new PropertyChangeListener(){

@Override

public void onPropertyChanged(PropertyChangeEvent event) {

thisInstance.setNodeRO((INodeRO)event.getNewValue());

}

};

...

private void setNodeRO(INodeRO nodeRO){

Object uiContext = Loader.getInstance().getPlatform().getUIContext();

if(nodeRO instanceof ImageNode.RO){

ImageNode node = new ImageNode(((ImageNode.RO)nodeRO).getRelativePath());

UIImageNode uiNode = new UIImageNode(uiContext, node, false);

setUINode(uiNode);

}

else if(nodeRO == null){

setUINode(null);

}

WorkareaViewModel监听NodeSelectorViewModel，接收实际数据对象的只读接口，创建临时数据对象和表示上焦点的节点（卡）查看对象，并回收旧的。

被激活的ICommand事件：选定的节点（卡）中NodeSelector已经改变。

用户的命令的操作：在NodeSelector区域选定节点（卡）（窗口的左侧）已被更改。

ICommand的事件激活：@特定于平台的*自适应View类（L2）

ICommand的事件处理：@ 与平台无关的 ViewModel类（L7）

4.调试，原生API，调研究细节，并达到目标。

ThinkAlike的JavaFX

直到现在，功能2在JavaFX项目已经完成。不论这个建筑站起来平台迁移可以在Android项目的开发进行测试。

[Android版]

开发步骤类似于以前的（JavaFX的的），以一个大的程度上，这证明跨平台解决方案的好处。因此，我只需要更换，并指定更改的一部分。

0.Fix在序列图中所示的类/实例

L0：平台特有的 “自适应”应用类：。com.thinkalike.android ThinkAlikeApp

L1：特定于平台的原生景观类：如。android.support.v4.app 片段

片段中的Android能够为不同的移动设备自适应布局。

L2：平台特有的 “自适应”视图类：如com.thinkalike.android.view。WorkareaFragment

L3：特定于平台的本机组件类：如。android.widget 的ImageView

L4：平台特有的 “自适应”组件类：如com.thinkalike.android.control。ImageNodeView

L5：独立于平台的组件接口：如com.thinkalike.generic.viewmodel.control。IImageNodeView

L6：独立于平台的组件类：如com.thinkalike.generic.viewmodel.control。UIImageNode

L7：独立于平台的视图模型类：如com.thinkalike.generic.viewmodel。WorkareaViewModel

L8：独立于平台的数据类：例如。com.thinkalike.generic.domain ImageNode

L9：独立于平台的 DAO类：如com.thinkalike.generic.viewmodel。NodeLoader

毫无疑问，L5-L9，这5个级别将耗资ZERO在平台迁移。

1.Implement使用故事的非逻辑的UI（功能＃2）

<LinearLayout

android:id="@+id/ll_work_overlay"

android:gravity="center_horizontal"

android:orientation="vertical">

...

<com.thinkalike.android.control.ImageNodeView

android:id="@+id/iv_nodecontent"

... />

...

</LinearLayout>

Android使用的UI标记文件的XML。机器人：ID =“@ + ID / iv_nodecontent”标识对应节点（卡）的细节图像控制。

ImageNodeView是一种自适应组件类（L4）平行于JavaFX中。

UI布局：\水库\布局\ workarea.xml

UI风格：N / A。相比之下，JavaFX的缩短了在这个领域的学习曲线。

2.Associate特定于平台的*自适应View类（L2），其对应的独立于平台的 ViewModel类（L7），用于处理的iProperty更改事件。

//AndroidManifest.xml

< application

android:name =" .android.ThinkAlikeApp" >

< activity

android:name =" .android.view.MainActivity"

android:screenOrientation =" landscape" >

< intent-filter >

< action android:name =" android.intent.action.MAIN" / >

< category android:name =" android.intent.category.LAUNCHER" / >

< /intent-filter >

< /activity >

< /application >

Android开发者都知道，活动课（关联的实例意图）和Application类是基于的清单信息的AndroidManifest.xml，这是JavaFX应用程序不同。

//\res\layout\activity_main_twopane.xml

< LinearLayout

android:id =" @+id/ll_twopane" >

< fragment

android:id =" @+id/nodeselector"

android:name =" com.thinkalike.android.view.NodeSelectorFragment"

... / >

< fragment

android:id =" @+id/workarea"

android:name =" com.thinkalike.android.view.WorkareaFragment"

... / >

< /LinearLayout >

在功能＃2中的直接父窗口，但是，是WorkareFragment，如设计在UI标记文件。

// com.thinkalike.android.view.WorkareaFragment

com.thinkalike.android.control.ImageNodeView _inv_nodecontent =

（ImageNodeView）rootView.findViewById（R.id.iv_nodecontent）;

// com.thinkalike.android.view.WorkareaFragment

com.thinkalike.generic.viewmodel.WorkareaViewModel _viewModel =

WorkareaViewModel.getInstance（）;

要处理的iProperty事件：节点（卡）在工作区的中间已被更改。

平台特定的*自适应View类的实例：@（在发生）特定于平台的*自适应应用类（L0）

平台特定的*自适应组件类的实例化：// @特定于平台的*自适应View类（L2）

（参考）的实例化与平台无关的 ViewModel类：@特定于平台的*自适应View类（L2）

物业维修事件：@ 与平台无关的 ViewModel类（L7）

//com.thinkalike.android.view.WorkareaFragment

_listenToVM = new PropertyChangeListener(){

@Override

public void onPropertyChanged(PropertyChangeEvent event) {...}

};

_viewModel.addPropertyChangeListener(Constant.PropertyName.Node,

_listenToVM);

//com.thinkalike.generic.viewmodel.WorkareaViewModel

this.firePropertyChange(Constant.PropertyName.Node, oldValue, _uiNode);

事件注册（由特定于平台的*自适应View类（称为L2））：

注销事件：未使用。

事件提交：

物业事件处理：@特定于平台的*自适应View类（L2）和自适应组件类（L4）

//com.thinkalike.android.view.WorkareaFragment

@Override

public void onPropertyChanged(PropertyChangeEvent event) {

if (event.getPropertyName().equals(Constant.PropertyName.Node)){

updateWorkarea((UINode)event.getNewValue());

}

作为JavaFX的实现，自适应组件类（讨论如何L4，如ImageNodeView）转换的ComponentModel（UIImageNode），将其提供给本机组件类（L3，比如ImageView的）取决于特定于平台的GUI * API接口。Android有OnPreDrawListener.onPreDraw（）可用于实际渲染的ImageView之前检索父视图的尺寸。本次交易被封装到自适应组件类（ImageNodeView）：

隐藏复制代码

//com.thinkalike.android.control.ImageNodeView

final ImageNodeView thisInstance = this;

...

@Override

public boolean onPreDraw() {

thisInstance.getViewTreeObserver().removeOnPreDrawListener(this);

int width_image = Util.getActualLayoutWidth(thisInstance);

int height_image = Util.getActualLayoutHeight(thisInstance);

MediaAsyncLoader.asyncLoadImageFile(imagePath, width_image, height_image, _onMediaLoadListener);

return true;

}

事件处理：

UI更新：

3.Make平台特有的自适应* View类（L2）翻译用户的命令操作ICommand的事件这是可以理解到相应的平台无关的ViewModel类（L7）

//com.thinkalike.android.view.NodeSelectorFragment

...

_lv_nodeList.setOnItemClickListener(this);

...

@Override

public void onItemClick(AdapterView<> parent, View view, int position, long id) {

assert(parent.getAdapter() instanceof NodeAdapter);

NodeAdapter adapter = (NodeAdapter)parent.getAdapter();

UINode uiNode = (UINode)adapter.getItem(position);

if(_viewModel!=null)

_viewModel.onNodeSelected(uiNode);

}

到JavaFX项目类似，用户的命令操作将发生在本机ListView控件（_lv_nodeList），然后激活的ICommand（onNodeSelected（）相关的视图模型）（_viewModel：NodeSelectorViewModel）。

被激活的ICommand事件：选定的节点（卡）中NodeSelector已经改变。

用户的命令的操作：在NodeSelector区域选定节点（卡）（窗口的左侧）已被更改。

ICommand的事件激活：@特定于平台的*自适应View类（L2）

ICommand的事件处理：@ 与平台无关的 ViewModel类（L7）

怎样的故事NodeSelectorViewModel接受ICommand的要求，变换参数，并将其指派到它的听众WorkareaViewModel只是相同的JavaFX项目。独立于平台的代码，不需要只要UI逻辑保持真正的更新。

4.Debug，原生API，调研究细节，并达到目标。ThinkAlike的Android

分配

具体来说，分发JavaFX应用程序无辜JRE / JDK的平台被证实是可行的。

这是一个不可不看的上的JavaFX项目的跨平台分发Eclipse用户（适用于Windows和MacOS）： JavaFX的2教程第七部分-部署有了E（FX）clipse 在ThinkAlike项目，因为“联源文件夹”的使用和不能被蚂蚁（默认库在Eclipse）来解决，一些手动修改应当在作出build.xml文件：

project.loc是你应该添加到Eclipse的首选项（首选项>蚂蚁>运行>属性选项卡）同值的Ant属性$ {} project_loc（预定义的Eclipse变量）。

在Mac OS部署（炉边支持MacOS X的为好）只被通过安装官方的JavaFX合奏示例应用程序进行测试。对MacOS的测试ThinkAlike的任何努力将非常感激。

结论

因此，在这篇文章中，我讨论了落实使用MVVM，Android SDK和了解JavaFX SDK的Android的桌面跨平台应用的可能性。一卡参考库已经建立起来，它希望可以在你喜欢的炉石的网络游戏中使用。

ThinkAlike来源，请访问：https://github.com/tiancheng2000/ThinkAlike

炉边纸牌游戏的官方网站：http://us.battle.net/hearthstone/en/

对于未来的改进：1.improving框架接口2.more独立于平台的组件类，以及从通用代码3.EventBus被实例化。

该卡的游戏是免费的，该框架是免费的，而创造和解决问题的乐趣将是无价的

确认

这是我的第一篇到CodeProject。感谢社区编辑“好心帮两个技术和语言的观点！还要感谢给予我的妻子，谁没有IT的语言知识，但支持我，“调试”我的英语语法。无论我们说何种语言，“本土”与否，我希望在有趣的东西，我们“略同”。