将 MXML 与 QNX UI 组件用于 PlayBook

我在这里想做什么？

我正在尝试使用 ActionScript 3 UI 库，并使用 MXML 来描述其布局。更具体地说，我想使用 BlackBerry Tablet OS SDK 中的 PlayBook 原生操作系统 UI 组件库，称为 QNX UI 组件。让我们来看一些代码，向您展示我所说的内容。

这是一个基于 MXML 的应用程序，使用了一个名为 QApplication 的新类，该类扩展了 QNX 的 Container，其中包含一个 QNX UI Button。

<?xml version="1.0" encoding="utf-8"?>
<r:QApplication xmlns:r="http://ns.renaun.com/mxml/2010" 
                xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:buttons="qnx.ui.buttons.*">
    <buttons:Button />
</r:QApplication>

在 ActionScript 中这样做看起来是这样的：

package
{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;

import qnx.ui.buttons.Button;
import qnx.ui.core.Container;

public class DisplayButtonAS3 extends Sprite
{
  public function DisplayButtonAS3()
  {
    stage.scaleMode = StageScaleMode.NO_SCALE;
    stage.align = StageAlign.TOP_LEFT;
    var container:Container = new Container();
    var but:Button = new Button();
    container.addChild(but);
    addChild(container);
    container.setSize(stage.stageWidth, stage.stageHeight);
  }
}
}

所有这些都是为了创建此处看到的同一个应用程序。

这是什么意思？

这意味着您可以使用 MXML 完全创建 PlayBook 应用程序，而无需 Flex。这也意味着您可以使用 Flex 4（包括支持移动开发的最新 SDK Flex Hero）并混合使用一些 QNX UI 组件。您所需要做的就是添加 QMXML.swc（已针对 Tablet OS SDK 0.9.2 编译），并将命名空间 xmlns:r="http://ns.renaun.com/mxml/2010" 添加到您的项目/应用程序中。

这听起来真是太棒了！嗯，它仍然是另一个 UI 库。所以，QNX UI 组件库并不会突然间就像 Flex Spark 架构那样工作。不，QNX UI 库有自己的方式，在使用它时您必须牢记这一点。这并不意味着它不好，只是要意识到它与 Flex 不同。

如果您想继续尝试示例，请务必从 BlackBerry 开发者网站下载 BlackBerry Tablet OS SDK：http://us.blackberry.com/developers/tablet/devresources.jsp

注意：截至撰写本文时，我使用的是 BlackBerry Tablet OS SDK 0.9.1。

好的，我明白了，让我看看代码！

首先！所有代码都可以在 github 上找到，快去获取吧。该存储库中包含几个 Flash Builder 项目。主要的库项目名为 QMXML。您创建自己的项目所需要的就是在 _bin 文件夹中找到的 QMXML.swc（已针对 Tablet OS SDK 0.9.2 编译），或者您可以从 这里 下载。

其他项目是示例项目，名为：NonFlexMXMLUsingQNX 和 FlexAndQNX。NonFlexMXMLUsingQNX 项目包含上面显示的 DisplayButton 应用程序，以及另一个使用 QNX 流/容器属性嵌套在容器中的其他 QNX UI 类的项目。

FlexAndQNX 应用程序是一个标准的 Flex 4 spark（非移动）应用程序，它使用 QNX Button 和 List 以及 Flex LineSeries 数据图表。这在某种程度上是有意义的，因为 QNX UI 库目前缺乏图表功能。这是在模拟器中运行的应用程序视图：

这是 FlexAndQNX 应用程序的源代码，它允许您直接在 Flex 中混合使用 QNX UI 组件。

<?xml version="1.0" encoding="utf-8"?>
			<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:r="http://ns.renaun.com/mxml/2010"
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx"
       xmlns:buttons="qnx.ui.buttons.*" xmlns:listClasses="qnx.ui.listClasses.*"
       width="1024" height="600"
       backgroundColor="0xcccccc" 
      >
  <s:layout>
    <s:HorizontalLayout />
  </s:layout>
  <fx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      
      import qnx.ui.core.ContainerFlow;
      import qnx.ui.core.SizeUnit;
      import qnx.ui.data.DataProvider;
      import qnx.ui.events.ListEvent;
      private var data:Array = [];
      [Bindable]
      private var chartData:ArrayCollection;
      private function createData():void
      {
        data = [];
        for (var i:int = 0; i <50; i++)
          data.push({label: "Point " + i, data: i+(Math.random()*30),
            data2: i+60+(Math.random()*60),
            data3: i+80+(Math.random()*120)});
        lstData.dataProvider = new DataProvider(data);
        chartData = new ArrayCollection(data);
      }
      protected function lstData_listItemClickedHandler(event:ListEvent):void
      {
        trace(event.data.data + " - " + event.row);
      }
    ]]>
  </fx:Script>
  <fx:Declarations>  
    <!-- Define custom colors for use as fills in the AreaChart control. -->
    <mx:SolidColor id="sc1" color="0x336699" alpha=".3"/>
    <mx:SolidColor id="sc2" color="0x993333" alpha=".3"/>
    <mx:SolidColor id="sc3" color="0x339933" alpha=".3"/>
    <!-- Define custom Strokes. -->
    <mx:SolidColorStroke id = "s1" color="0x336699" weight="2"/>
    <mx:SolidColorStroke id = "s2" color="0x993333" weight="2"/>
    <mx:SolidColorStroke id = "s3" color="0x339933" weight="2"/>
    
    <mx:SeriesInterpolate id="seriesInterpolate" duration="500" />
  </fx:Declarations>
  <s:Group height="100%" width="20%">
    <r:QContainer id="c" align="near">
      <buttons:LabelButton label="Create Data" click="createData()" />
      <listClasses:List id="lstData" size="100" sizeUnit="percent"
              listItemClicked="lstData_listItemClickedHandler(event)" />
    </r:QContainer>
  </s:Group>
  <s:HGroup width="80%" height="100%">
    <mx:AreaChart id="Areachart" height="100%" width="80%"
          paddingLeft="5" paddingRight="5"
          showDataTips="true" dataProvider="{chartData}">
      
      <mx:horizontalAxis>
        <mx:CategoryAxis categoryField="label"/>
      </mx:horizontalAxis>
      
      <mx:series>
        <mx:AreaSeries yField="data" form="curve" 
               displayName="Plot 1" showDataEffect="{seriesInterpolate}"
               areaStroke="{s1}" areaFill="{sc1}"/>
        <mx:AreaSeries yField="data2" form="curve" displayName="Plot 2" 
               showDataEffect="{seriesInterpolate}"
               areaStroke="{s2}" areaFill="{sc2}"/>
        <mx:AreaSeries yField="data3" form="curve" displayName="Plot 3" 
               showDataEffect="{seriesInterpolate}"
               areaStroke="{s3}" areaFill="{sc3}"/>
      </mx:series>
    </mx:AreaChart>
    
    <mx:Legend dataProvider="{Areachart}"/>
  </s:HGroup>
</s:Application>

我在 QContainer 类上可能还可以做更多集成工作，以便更好地与 Flex 配合使用，但目前请遵循这些宽松的规则。在 Flex 应用程序中混合使用 QNX UI 组件时，请始终以 QContainer 开始，将其视为您自己的小型 QNX 应用程序空间。您需要将其包装在 Flex Spark Group 或 SkinnableContainer 中，并让 QContainer 填满其父级的全部宽度和高度。QContainer 会监听其父级的 RESIZE 事件，然后使布局失效。然后，根据父级的新的 width 和 height，它会重新测量自身及其子项。在设置不同的 QNX 属性（如 size 和 sizeUnit）方面存在一些灵活性，但为求稳妥，请从以下开始：

<s:Group height="100%" width="20%">
  <r:QContainer />
				</s:Group>

对 Group 尺寸的任何更改都将由 QContainer 自动检测，并且它将填满其父级的整个空间。

注意：BlackBerry Tablet OS SDK 不为其类提供清单文件和命名空间，这意味着您的应用程序将有很多看起来像 qnx.ui.buttons.* 的命名空间。此外，某些 QNX 类可能会导致 Flex 的 SystemManager 控制舞台时出现问题，如果您遇到任何问题，请告知我。

项目类型、SDK 和插件

Flash Builder 4 和 Flash Builder Burrito 中存在各种项目类型。此外，BlackBerry Tablet OS SDK 会为两个 Flash Builder 版本安装插件。通常，您只需要创建一个 AIR 项目并修改您的应用程序描述文件以用于移动设备（这意味着通常是非 WindowedApplication 并设置 visible=true）。QMXML 类可以与 Flex 4 spark 桌面应用程序以及更新的 Flex Hero 移动应用程序和主题一起使用。这假设您的项目已创建并指向 BlackBerry Tablet OS SDK 0.9.1。

请注意，这些类经过了有限的测试，我希望您能尝试使用它们。玩得开心！

我旅程中的技术细节

使用 MXML，您可以获得绑定。这是 MXML 的一大优势。但这同样意味着我必须采用一个没有考虑这一点的 UI 框架，并对其进行调整才能正常工作。QNX UI 框架的一些选择使得这并不那么直接。我不得不为可能改变布局的属性添加一些钩子，并创建我自己的布局失效/刷新机制。幸运的是，Container 类是 QNX UI 库中唯一的 Container，它只有半打与布局相关的属性。这使得将其变成一个可行的解决方案变得容易。

在使用 width/height 而非 QNX 的 size、sizeUnit 和 sizeMode 进行流式布局时，可能仍然存在一些问题。但如果您使用的是显式 width/height，您可能不会频繁地使布局失效。

此外，有几个属性没有实现 getter/setter，所以我不得不以不同的方式来监视它们的更改，以便在更改时使布局失效。总的来说，这并不太复杂，但可以改进。尽管如此，我必须声明 BlackBerry Tablet OS SDK 仍处于 Beta 阶段，并且会不断改进，我对它的理解也会随着时间的推移而改变。

历史

• 2011 年 4 月 15 日：初始版本