SUI-标记声明约定

一、形如<ui:tagname></ui:tagname>或<div sui="panel"></div><input sui="colorpicker" />的标记将会被视为需要渲染的节点，<ui:tagname>形式的渲染前会被移除，而普通形式的则会保留

二、属性转换约定：

• _attribute 以下划线开头的属性声明为SUI专用，不会被传递给渲染适配器
• auto_expand_column 以下线线连接的属性名将会转换成驮峰式名称，autoExpandColumn
• onclick 以on开头的属性名会被放到listner的map中，而其它的属性放到properties map中，listener和properties会被传递给渲染适配器
• 值为空字符串或者null的属性将不会被传递给渲染适配器

三、属性值转换约定：ui:tagname的属性值转换成对象，约定见以下代码中的注释

四、ui:configure转换约定：此节点地声明将会被作为其父节点的声明，这种形式适合声明多层次结构的组件，比如grid。在下面的grid示例中,header和columns转换后将会同ui:grid的其他属性一起被转换和传递，其中columns会被转换成数组对象，因为columns这个单词是复数的，而其子节点column将会成为这个数组的一个子元素。而header则会被换成object

	/**
	*将tag属性转换成object
	*<h3>按如下规则转换</h3>
	*<ol>
	* <li>以~开头的字符串将去除掉~,其余部分当作String</li>
	* <li>字符串格式为整数的转化成Number</li>
	* <li>字符串格式为浮点数的转化成Float</li>
	* <li>字符串为小写true和false的转化成Boolean</li>
	* <li>以[]括住的格式转化Array,Array成员再按以convertString转换</li>		
	* <li>以{}括住的将会被eval执行返回一个Object(这意味着也可以是基于Object的其他类)<li>
	* <li>以//括住的将会被转换成RegExp<li>	
	* <li>以%%括住的将会被eval执行以期返回一个对象
	*</ol>
	*@param <String> value
	*@public
	*/	
	convertString: function(value){
		if(typeof(value)!="string")throw("参数类型错误,必须为String类型");			
		var stringReg = /^~/; //优先级别最高
		if(value.match(stringReg)) return ""+ value.substr(1);
		
		var integerReg = /^[-\+]?\d+$/;
		if(value.match(integerReg))return parseInt(value);
		
		var floatReg = /^[-\+]?\d+(\.\d+)?$/;
		if(value.match(floatReg))return parseFloat(value);

		var boolReg = /^true|false$/;
		if(value.match(boolReg)) return value == "true";

		if(!isNaN(Date.parse(value)))return new Date(Date.parse(value));
		
		var arrayReg = /^\[.*\]$/;
		if(value.match(arrayReg)){
			try{
				return (function(v){return eval("var obj;obj=" + v )})(value);
			}
			catch(e){
				throw("错误的Array声明：" + e);
			}			
		}
		
		var objectReg = /^\{.*\}$/;
		if(value.match(objectReg)){			
			try{
				return (function(v){return eval("var obj;obj=" + v )})(value);
			}catch(error){
				throw ("错误的Object声明：" + error);
			} 
		}

		var bfhReg = /^%.*%$/;
		if(value.match(bfhReg)){
			try{
				return eval(value.slice(1,value.length-1));
			}catch(error){
				throw ("错误的对象引用:" + error);
			}
		}
		
		var regExtReg = /^\/.*\/$/;
		if(value.match(regExtReg)){
			var v = eval(value);
			if(v instanceof RegExp){
				return v;
			}else{
				throw ("错误的RegExp格式");
			}
		}
		
		//otherwise		
		return value;
	},

/**
	 *对tag的所有属性进行转换
	 *@public
	 *@param <Element> el
	 *@return <Object>
	 */
	 wrapAttributes: function(el){
	 	var config = {
			properties:
				{},
			listeners:
				{},
			suiListeners:
				{}
		}
		
		var EVENT_PREFIX = "on"
		var SUI_EVENT_PREFIX = "sui_on"
		
		for (var i = 0, l = el.attributes.length; i < l; i++) {			
			var attribute = el.attributes[i];			
			if(attribute.name.indexOf("_") == 0)continue; //_下划线开头的为SUI引擎专用属性
			if(attribute.value == 'null' || attribute.value == ''){				
				continue
			}
			
			var isEventAttribute = attribute.name.toLowerCase().indexOf(EVENT_PREFIX) == 0			
			var isSUIEventAttribute = attribute.name.toLowerCase().indexOf(SUI_EVENT_PREFIX) == 0
			
			if (isEventAttribute){ 				
				config.listeners[attribute.name.substr(2).toLowerCase()] = attribute.value;			    
				continue;
			}
			
			if(isSUIEventAttribute){
				config.suiListeners[attribute.name.substr(6).toLowerCase()] = attribute.value;			
				continue;
			}
			
			var name = attribute.name;
			//因为属性名会全部转变成小写，故如果属性名中出现_，那么_后面的首字母将变成大写。
			name = name.replace(/_[a-zA-Z]/g,function(word){return word[1].toUpperCase();}) 
			config.properties[name] = this.convertString(attribute.value);					
		}
		return  config;	
	}

Ext grid声明示例：

	<ui:grid id="egrid" stripe_rows="true" auto_expand_column="company" height="150" width="600"  title="array grid" >
		<ui:configure>
                        <ui:header title="ext grid" backgroundcolor="red"  ></ui:header>
			<ui:columns>
				<ui:column id="company" header="Company" width="160" sortable="true" data_index="company" ></ui:column>	
			</ui:columns>
		</ui:configure>
	</ui:grid>

转换后传递给渲染适配器的对象如下所示：