ShadowEditor/ShadowEditor.UI

ShadowEditor.UI

ShadowEditor.UI将常用的UI控件封装为类，可以像ExtJs那样通过javascript动态生成页面。这对于功能特别多、逻辑特别复杂的页面特别有用， 非常适合做编辑器开发，用于为ShadowEditor提供完善的UI框架支持。

ShadowEditor.UI不保证兼容除最新版Chrome以外的其他浏览器。

使用方法：

var hello = Shadow.UI.create({
    xtype: 'html',
    html: 'Hello, world!'
});

hello.render();

其中，类型html是框架提供的Html控件的xtype，属性html是Html控件的一个属性，它的值会被原生输出到页面上。

也可以使用UI代替Shadow.UI，这是因为框架中默认把UI绑定到window对象上，方便使用。

依赖项

无。

类库

类名	xtype	说明	类名	xtype	说明
UI	无	框架核心。	Control	control	所有控件基类。
Boolean	boolean	复选框带说明。	Break	br	换行。
Button	button	按钮。	Checkbox	checkbox	复选框。
CloseButton	closebutton	关闭按钮。	Color	color	颜色选择。
Container	container	容器。	Div	div	div元素。

原理

• ShadowEditor.UI并不是通过拼接字符串的方式生成页面，而是通过两个函数document.createElement和[HTMLElement].appendChild来动态渲染页面。
• 当调用[Control].render函数时，它首先渲染最外层元素，然后最外层元素根据children属性列表中的xtype，创建相对应的类，来一层一层向内渲染。

核心函数

UI：用于xtype注册、控件的创建和管理，并提供所有控件类型引用和一些便捷函数。

UI.addXType(name, cls)：将控件类型注册为xtype，例如UI.addXType('html', Html)。

UI.removeXType(name)：移除控件xtype。

UI.getXType(name)：通过xtype获取控件类型

UI.add(id, obj, scope = "global");：将控件实例交给ShadowEditor.UI管理，global是命名空间。

UI.remove(id, scope = 'global');：移除一个控件实例。

UI.get(id, scope = 'global')：通过id和命名空间获取一个控件实例。

UI.create(config)：通过json对象创建页面，json中的元素可以是带xtype的对象或控件实例。xtype必须事先注册。

请阅读UI.js的源码来了解每个函数使用方法，非常简单。

示例

以下代码节选自TransformComponent.js，有改动。

var control = UI.create({
    xtype: 'div',
    id: 'transformPanel',
    parent: document.body,
    cls: 'Panel',
    children: [{
        xtype: 'row',
        children: [{
            xtype: 'row',
            children: [{
                xtype: 'label',
                style: {
                    color: '#555',
                    fontWeight: 'bold'
                },
                text: '位移组件'
            }]
        }, {
            xtype: 'row',
            children: [{
                xtype: 'label',
                text: '平移'
            }, {
                xtype: 'number',
                id: 'objectPositionX',
                style: {
                    width: '40px'
                }
            }, {
                xtype: 'number',
                id: 'objectPositionY',
                style: {
                    width: '40px'
                }
            }, {
                xtype: 'number',
                id: 'objectPositionZ',
                style: {
                    width: '40px'
                }
            }]
        }, {
            xtype: 'row',
            children: [{
                xtype: 'label',
                text: '旋转'
            }, {
                xtype: 'number',
                id: 'objectRotationX',
                step: 10,
                unit: '°',
                style: {
                    width: '40px'
                }
            }, {
                xtype: 'number',
                id: 'objectRotationY',
                step: 10,
                unit: '°',
                style: {
                    width: '40px'
                }
            }, {
                xtype: 'number',
                id: 'objectRotationZ',
                step: 10,
                unit: '°',
                style: {
                    width: '40px'
                }
            }]
        }, {
            xtype: 'row',
            children: [{
                xtype: 'label',
                text: '缩放'
            }, {
                xtype: 'number',
                id: 'objectScaleX',
                value: 1,
                range: [0.01, Infinity],
                style: {
                    width: '40px'
                },
            }, {
                xtype: 'number',
                id: 'objectScaleY',
                value: 1,
                range: [0.01, Infinity],
                style: {
                    width: '40px'
                }
            }, {
                xtype: 'number',
                id: 'objectScaleZ',
                value: 1,
                range: [0.01, Infinity],
                style: {
                    width: '40px'
                }
            }]
        }]
    }]
});

control.render();

效果图：

注意事项

• 目前，ShadowEditor.UI提供控件类型太少，每个控件的属性和方法太少，远远无法满足需要。建议直接使用源码，遇到缺少的控件、属性、方法自行添加。
• ShadowEditor.UI采用ECMAScript6的一些语法，不兼容不支持ECMAScript6的浏览器，推荐使用最新版谷歌浏览器开发使用。

特别感谢

• ExtJs提供UI框架架构思路。
• three.js编辑器提供的UI样式。
• bootstrap-es6提供练手机会。