美文网首页
Fusetools官方手册(2)Hello, UX Markup

Fusetools官方手册(2)Hello, UX Markup

作者: 衣咸 | 来源:发表于2017-01-05 14:40 被阅读20次

    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会应用目标平台的原生控制,如下所示:
    <pre>
    <App Theme="Native">
    <StackPanel>
    <Button />
    <Switch />
    <Slider />
    </StackPanel>
    </App>
    </pre>
    此例中,所有显示的控制器都采用iOS和安卓的原生样式,而桌面预览中并不会出现。

    如果你既想使用Native原生控制,又想使用桌面预览,那可以用NativeWithFallback主题,这样就会在iOS和安卓上用原生控制,而在桌面预览会退用Basic主题。
    图片主题(GraphicsTheme)
    GraphicsTheme是App的缺省主题,它能让你的App在所有平台上都保持一致的外观,除了这些:

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

    通过Fuse的实时预览窗,你可以在PC或Mac上预览你的App,用户体验会比使用iOS和安卓模拟器要好很多。
    在全平台上,你的设计和动画效果,看起来、用起来均保持一致。
    因为GraphicsTheme是缺省值,所以无需特意写上,但如果实在需要,那就看这儿:

    <App Theme="Graphics">
    或者这样:
    <pre>
    <App>
    <GraphicsTheme />
    </App>
    </pre>
    创建自己的GraphicsTheme
    扩展定制GraphicsTheme也是可行的,比如要给Slider滑动条和Button按钮定义特别的外观。

    自定义GraphicsTheme的方式是,把它当成一个基础类来使用, 象这样:
    <pre>
    <GraphicsTheme ux:Class="MyGraphicsTheme">
    <Button>

    </Button>
    </GraphicsTheme>
    </pre>
    这样的话,在App标签里要这么写:
    <pre>
    <App>
    <MyGraphicsTheme />
    </App>
    </pre>
    也可以给它创建一个全局别名,像这样:

    <MyGraphicsTheme ux:Global="MyGraphics" />
    那样的话,在App标签里要这么写:
    <pre>
    <App Theme="MyGraphics">
    ...
    </App>
    </pre>
    基本主题(BasicTheme)
    这个BasicTheme主题实际上就是以GraphicsTheme为基础,加上一些缺省的Fuse页面,并且在设计上采用了谷歌的material design设计理念。

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

    <App Theme="Basic">

    原文链接:赵赵811http://www.jianshu.com/p/55a6a612a32e

    Tag:Fuse, Fuseapp, Fusetools, Fuse手册, native app
    发布时间:2016年01月02日
    博客被黑,挪窝简书安家……

    相关文章

      网友评论

          本文标题:Fusetools官方手册(2)Hello, UX Markup

          本文链接:https://www.haomeiwen.com/subject/zadzvttx.html