你好,UX 标记语言!

用 Fuse 工作的主要方法是编辑 UX 标记文件,一个基于 XML 的文件格式,这是为了开发应用定制的。界面,交互和动画用清楚、陈述性的语法来描述。用 UX 语言来工作的主要好处是打开了更深更快的开发方式,提供了设计师和工程师一起合作分享代码的方式。

UX 文件在Fuse中用来编译控件,UI 视图,设计,原型以及完整的应用,以及用来编译成C++原生代码。UX 文件是用 Javascript 编写的改进的商业逻辑,在自己的线程中运行,使得你的UI 和动画快速流畅的运行。

更深入地了解UX文件的功能特点,查看UX 文件指南

创建应用:App

当用 Fuse 来创建独立应用的时候,我们用 <App> 标记。

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

你在<App>中你可以防止任何 Node,Behavior或者Theme标签。上面的示例简单地用默认字体来显示字符。

<App> 标签自己载入应用以及应用的生命周期和主题。 背景属性控制整个应用的根视图背景颜色。

UX 标记

UX 文档由 XML 标记组成。每一个已有的 UX 标记与在 Uno 代码中整合的 class 保持一致。每一个标记与一个或者多个运行时的对象保持一致。

已有的标记(类型)来自以下的分类:

  • App 标记是应用的根本,可以包含一个节点。
  • 有很多中节点类型,其中有很多是 UI 控件。
  • 动作可以修改节点。动作来自很多特点:
    • 手势
    • 触发条件
    • 脚本
    • 可以应用在控件上的可视化效果
  • 可以使得控件看起来保持一致而不用重复数据的样式

主题

App 提供了一种设置称为主题,用来规定标准控件在应用中的表现。你可以这么设置:

<App Theme="主题的名称">

主题可以有如下的设置:

  • Basic (推荐),使用基于 OpenGL 图像技术来控制每个单独平台上的渲染效果。
  • Native 默认使用 iOS 或者 Android 的原生样式。注意,这些样式在桌面预览时不起作用。
  • NativeWithFallback 在 iOS 或者 Android 设备上使用原生主题,但是在桌面预览时使用基础主题。
  • 默认,如果什么都没有标明,Fuse 用基于 OpenGL 的图像,但是不提供基本控件的默认样式(比如按钮和滑动条)。

原生主题

当使用 Theme="Native",Fuse 可以使用对象平台的原生控制。使用原生主题需要做:

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

在这个例子中,显示的控件可以在 iOS 和 Android 平台上展示原生的样式,以及在桌面预览时没有样式。

如果你依然希望在桌面预览中使用原生的控件,你可以用 NativeWithFallback 主题。这样就可以给你在 iOS 或 Android 上使用原生的控件,而在桌面上提供基本的主题。

基本主题

基本主题使用 OpenGL 来渲染控件,给出的控件样式受到了 material design 的启发。 比如:

<App Theme="Basic">

使用 Theme="Basic" 将会给你的应用在所有平台上提供一致的外观,除了:

  • 状态栏,状态栏在跨平台上的外观会不一样。
  • TextInput 以及其他高水平的控件将按照平台定义来展示控件。

使用基本主题的好处如下:

  • 你可以在 Mac 和 PC 使用 Fuse 的实时预览窗口,它比 iOS 和 Android 的模拟器提供更加顺滑的体验。
  • 你的设计和动画将在所有平台上展示一致的体验。

自动绑定

自动绑定可以控制一个对象是否自动地连接到父节点。默认的绑定设置为ux:AutoBind="true",所以只有如果你需要做一些特别的设置时使用这点。 比如:

<Panel ux:Name="panel1">
  <Panel ux:AutoBind="false" ux:Name="panel2" />
</Panel>

在这种情况下,panel2将不再是panel1的子节点。也就是说,他将从对象树中解绑出来。这对你如果稍后想添加他有意义,比如稍后导航进入一个HierarchicalNavigation