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元素。
HorizontalRule	hr	横线。	Html	html	原生html。
IconButton	iconbutton	图标按钮。	Input	input	文本输入框。
Integer	int	整数输入。	Label	label	标签。
Modal	modal	模态框。	Number	number	浮点数输入。
Row	row	一行。	Select	select	下拉列表。
Span	span	span元素。	Text	text	文本标签。
TextArea	textarea	文本域。	Texture	texture	选择纹理。
Window	window	窗口。	Image	image	图片。
ImageList	imagelist	图片列表。	MessageBox	msg	消息框。
Table	table	表格。	TableHead	thead	thead元素。
TableBody	tbody	tbody元素。	TableRow	tr	tr元素。
TableData	td	td元素。	Alert	alert	提示框。
Confirm	confirm	询问框。	Prompt	prompt	弹出输入框。
SearchField	searchfield	查询框。	ToolbarFiller	toolbarfiller	工具栏填充。
Canvas	canvas	画布。	Timeline	timeline	时间轴。
LinkButton	linkbutton	链接按钮。

原理

• 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提供练手机会。