JavaFX移动应用程序最佳实践，第1部分

到现在为止，所有对JavaFX感兴趣的人都会知道，JavaFX Mobile发行了不久
前。 可以肯定的是，这真是令人难以置信。 我感到筋疲力尽，在发行期间我什至没有精力去写博客……

但是到目前为止，我感到很恢复，并且希望开始一些有关在准备发行版时所学到的经验的系列文章，并提供一些如何提高JavaFX Mobile应用程序性能的提示。

警告 ：我在这里给出的提示适用于JavaFX Mobile的当前版本，该版本是JavaFX 1.1 SDK的一部分。 在以后的版本中，行为会改变，
当前提到的工件的不良性能将被优化或至少得到显着改善。 我在这里写的所有内容都是快照，不应理解为 最后！

项目1：避免不必要的绑定
绑定非常方便，毫无疑问是JavaFX Script中最有价值的创新之一。 不幸的是，它们带有代价。 生成的样板代码通常不那么小，并且 就像手动执行一样快。 尤其是复杂的依存关系结构往往会严重影响性能和占用空间。

因此，建议尽可能避免绑定。 通常，可以使用触发器来实现相同的功能。 人们不应该使用绑定来避免处理初始化顺序的麻烦。 绑定一个常数当然没有任何意义。
如果绑定变量的更新次数更多，然后读取，则懒惰的绑定在大多数情况下（但并非总是如此！）会更快（但并非总是如此！），但它们仍不如手动实现的速度快。

例
一个常见的用例是位置和大小取决于阶段大小的多个节点。 一个典型的实现使用绑定来实现这一点。 在这里，我们将看一个类似于这种情况的简单示例。 场景由三个矩形组成，这些矩形从左上角到右下角倾斜排列。 矩形的大小是屏幕大小的四分之一。 代码示例1显示了具有绑定的实现。

def rectangleWidth: Number = bind stage.width * 0.25;
 def rectangleHeight: Number = bind stage.height * 0.25;

 def stage: Stage = Stage {
     scene: Scene {
         content: for (i in [0..2])
             Rectangle {
                 x: bind stage.width * (0.125 + 0.25*i)
                 y: bind stage.height * (0.125 + 0.25*i)
                 width: bind rectangleWidth
                 height: bind rectangleHeight
             }
     }
 }

代码示例1：使用绑定计算的布局
人们应该考虑的第一个问题是绑定是否真的必要。 在实际的设备上，仅当切换屏幕方向时（前提是设备支持此功能），屏幕大小才会更改。 如果我们的应用程序不支持屏幕旋转，则可以将布局定义为常量。 代码示例2中显示了一种减少绑定数量的可能解决方案。引入了两个变量width和height，分别绑定到stage.width和stage.height。 它们的唯一目的是为stage.width和stage.height提供触发器，因为我们不想覆盖原始触发器。 矩形的位置和大小是在触发器中手动计算的。

def r = for (i in [0..2]) Rectangle {}

 def stage = Stage {
     scene: Scene {content: r}
 }

 def height = bind stage.height on replace {
     def rectangleHeight = height * 0.25;
     for (i in [0..2]) {
         r[i].height = rectangleHeight;
         r[i].y = height * (0.125 + 0.25*i)
     }
 }

 def width = bind stage.width on replace {
     def rectangleWidth = width * 0.25;
     for (i in [0..2]) {
         r[i].width = rectangleWidth;
         r[i].x = width * (0.125 + 0.25*i)
     }
 }

代码示例2：在触发器中计算的布局
毫无疑问，代码示例1中的代码更加优雅。 但是测量模拟器中两个代码片段的性能后，结果发现代码示例2中的代码几乎快了一倍。

在下面的内容中，我们将介绍提高JavaFX Mobile应用程序性能的第二个技巧。 我认为这和上一个是最重要的。

警告 ：我在这里给出的提示适用于JavaFX Mobile的当前版本，该版本是JavaFX 1.1 SDK的一部分。 在以后的版本中，行为会改变，
当前提到的工件的不良性能将被优化或至少得到显着改善。 我在这里写的所有内容都是快照，不应理解为 最后！

第2项：使场景图尽可能小
在运行时的幕后，进行了大量通信以更新场景图中节点的变量。 场景图包含的元素越多，需要的交流越多。 因此，使场景图尽可能小至关重要。 尤其是动画往往会遭受大型场景图的困扰。 不好的做法是始终将节点保留在场景图中，并通过可见标志或不透明度控制其可见性。 场景图中的不可见节点仍然是背景通讯马戏的一部分。 相反，应该从场景图中删除节点并仅在需要时添加它们。 但是这种方法有一个缺点。 添加或删除节点比设置可见性花费的时间更长。 因此，在紧急响应至关重要的情况下，这可能不合适。

例子1
通常一个人有一组节点，其中只有一个可见。 例如，这些可以是不同的页面，也可以是可视化元素不同状态的节点。 可能会尝试将所有节点添加到场景图中，并仅将当前节点设置为可见。

代码示例1显示了此方法的简化版本。 创建三个彩色圆圈以可视化某种状态（红色，黄色，绿色）。 随时仅可见一个节点。 （让我们忽略一秒钟，这可以简单地通过更改单个圆圈的填充颜色来实现。在现实应用中，可能会有图像或更复杂的形状用于可视化，而仅仅改变颜色是行不通的。）

def colors = [Color.GREEN, Color.YELLOW, Color.RED];

 var state: Integer;

 Stage {
     scene: Scene {
         content: for (i in [0..2])
             Circle {
                 centerX: 10
                 centerY: 10
                 radius: 10
                 fill: colors[i]
                 visible: bind state == i
             }
     }
 }

代码示例1：使用可见性在节点之间切换
尽管只显示了一个节点，但这会在场景图中产生三个节点。 应该对其进行重构，以确保场景图中只有可见节点。 代码示例2显示了一种可能的实现。

def colors = [Color.GREEN, Color.YELLOW, Color.RED];

 var state: Integer on replace oldValue {
     insert nodes[state] into stage.scene.content;
     delete nodes[oldValue] from stage.scene.content;
 }


 def nodes = for (i in [0..2])
     Circle {
         centerX: 10
         centerY: 10
         radius: 10
         fill: colors[i]
     }

 def stage = Stage {scene: Scene{}}

代码示例2：在需要时添加和删除节点
代码示例1中的代码更加紧凑，但是代码示例2将场景图中的节点数从3个减少到1个。 在调整JavaFX Mobile版本的一些演示时，我们仅通过确保仅可见节点参与其中就可以将场景图中的节点数量减少50％或更多。

例子2
如果使用某种动画显示和隐藏节点，则在场景图中添加和删除节点将变得非常简单。 一个人只需要在fadeIn-animation的开头和fadeOut-animation的结尾执行一个动作即可添加或删除该节点。 代码示例3显示了这种用法，其中通过更改不透明度来显示和隐藏一个简单的消息框。

def msgBox = Group {
     opacity: 0.0
     content: [
         Rectangle {width: 150, height: 40, fill: Color.GREY},
         Text {x: 20, y: 20, content: "Hello World!"}
     ]
 }

 def fadeIn = Timeline {
     keyFrames: [
         KeyFrame {
             action: function() {insert msgBox into stage.scene.content}
         },
         at (1s) {msgBox.opacity => 1.0 tween Interpolator.LINEAR}
     ]
 }

 def fadeOut = Timeline {
     keyFrames: KeyFrame {
         time: 1s
         values: msgBox.opacity => 0.0 tween Interpolator.LINEAR
         action: function() {delete msgBox from stage.scene.content}
     }
 }

 def stage = Stage {scene: Scene{}}

代码示例3：使用fadeIn-和fadeOut-animations添加和删除节点。

参考：来自JCG合作伙伴的 JavaFX Mobile应用程序最佳实践和JavaFX Mobile应用程序 最佳实践2   迈克博客（Mike's Blog）上的迈克尔·海因里希（Michael Heinrichs）。

翻译自: https://www.javacodegeeks.com/2012/03/best-practices-for-javafx-mobile.html