【译】Fuse入门（二）

官网原文：Fuse

输出

预览时，Fuse会在手持设备上创建一个壳（shell）程序，与在运行在桌面系统的Fuse后台程序相连，从而快速显示你对项目做的所有更改。但是，如果你去参加一个会议，或者给客户去秀秀，手持设备要断开与开发环境的连接时，你就需要将项目输出到你要运行的设备上。

输出到iOS

首先，你需要有一台运行OS X系统并安装了Xcode的Mac，其次，你还要有一个苹果开发者账号，都齐了，就在项目目录里键入下面的命令：

fuse build --target=ios --run

该命令会在Xcode中打开建成的项目，在可用输出目标的下拉菜单里选择你的设备型号，然后点击“运行”按钮，App就会部署并运行在你的设备上了。

输出到安卓

首先确定Android SDK/NDK都安装好了（在安卓上预览也需要安装这些，如没有，在命令行输入：fuse install android)，然后在命令行的项目目录中键入：

fuse build --target=Andoid --run

你的项目就已部署在与系统相连的安卓设备上了。

UX标记

Fuse主要被用来做这么两类事儿：

• 一类是用来创建App或者原型，主要是编写跨平台的JavaScript逻辑，
• 另外就是为原生App创建组件、UI视图和设计

这两类事儿都是通过UX标记来进行主体表述的。

UX标记实际上是基于XML的文件格式，有点XML经验的用户都能轻松上手。详细的功能、深度的解读，请参考UX标记文档。

用App标签新建应用

单独创建应用或原型，使用<app>标签：

<App Background="#436EEE">
    <Text>Hello, world!</Text>
</App>

在<App>标签内，可以嵌入任何Node、Behavior或Theme这些类型的标签。上面的例子简单的用默认的字体显示了一段文字。

App标签自身负责引导整个App，并处理应用程序的生命周期和主题事务。

使用Background属性设置App根视图的背景色。

UX 标签

UX文档都是由若干XML标签组成，每个可用的UX标签都相当于一个用Uno编码的类，每个标签还对应一个或多个runtime对象。

这些可用的标签（类）可分为如下类别：

• App类代表一个应用的根（the root），有也只能有一个节点（Node）
• 相当多的Node类型，主要都是些UI元素
• Behavior类的标签用来修改节点，主要有如下分类：
  • 手势
  • 触发器
  • 脚本
  • 视觉特效，应用于各元素
• 样式（Styling）使各组件保持统一的视觉表现，避免大量重复的数据

主题

App提供一个主题设置，Theme定义了各标准组件的外观，如下列所示：

<App Theme="..name of theme..">

如不指定，App会默认一个缺省设定叫做GraphicsTheme。

原生主题（NativeTheme）

当使用NativeTheme时， Fuse会应用目标平台的原生控制，如下所示：

<App Theme="Native">
    <StackPanel>
        <Button />
        <Switch />
        <Slider />
    </StackPanel>
</App>

此例中，所有显示的控制器都采用iOS和安卓的原生样式，而桌面预览中并不会出现。

如果你既想使用Native原生控制，又想使用桌面预览，那可以用NativeWithFallback主题，这样就会在iOS和安卓上用原生控制，而在桌面预览会退用Basic主题。

图片主题（GraphicsTheme）

GraphicsTheme是App的缺省主题，它能让你的App在所有平台上都保持一致的外观，除了这些：

• 状态栏在不同平台上会表现不同
• TextInput- 这是个高层级控件，由于依赖原生平台的控制，这里缺省是不会被渲染的。所以要么你自定义它的样式或者换用BasicTheme。

使用GrapicsTheme主题的好处是：

• 通过Fuse的实时预览窗，你可以在PC或Mac上预览你的App，用户体验会比使用iOS和安卓模拟器要好很多。
• 在全平台上，你的设计和动画效果，看起来、用起来均保持一致。

因为GraphicsTheme是缺省值，所以无需特意写上，但如果实在需要，那就看这儿：

<App Theme="Graphics">

或者这样：

<App>
    <GraphicsTheme />
</App>

创建自己的GraphicsTheme

扩展定制GraphicsTheme也是可行的，比如要给Slider滑动条和Button按钮定义特别的外观。

自定义GraphicsTheme的方式是，把它当成一个基础类来使用, 象这样:

<GraphicsTheme ux:Class="MyGraphicsTheme">
    <Button>
        <!-- how a button looks goes here -->
    </Button>
</GraphicsTheme>

这样的话，在App标签里要这么写：

<App>
    <MyGraphicsTheme />
</App>

也可以给它创建一个全局别名，像这样：

<MyGraphicsTheme ux:Global="MyGraphics" />

那样的话，在App标签里要这么写：

<App Theme="MyGraphics">
    ...
</App>

基本主题（BasicTheme）

这个BasicTheme主题实际上就是以GraphicsTheme为基础，加上一些缺省的Fuse页面，并且在设计上采用了谷歌的material design设计理念。

如果你设计UI时需要一个起点，该主题会帮到你并在全平台上保持一致的外观。

<App Theme="Basic">