Control是一个最基本的控件，在Dorado中几乎所有的控件都是继承自Control。

Control控件自身不包含任何元素，在客户端渲染的时候就是一个DIV对象，如下图：

基本特性

可在相关的布局管理器中布局控件

Control可以参与各种布局管理器的布局设定：

支持id设定，注意命名规则

在一个View中Control的id必须唯一，且id的命名规则参考Java变量名的命名规则，避免用中文或数字命名，避免特殊符号等。

如下的一些命名规则都是不推荐的：

支持监听器处理机制

Control提供了listener属性，这样便于你利用Listener处理机制，在服务器端利用Java代码动态设置Control的属性，listener属性值编写范例：

有关监听器的详细说明请参考：基础教程中的 10. 对象监听器(SEFC)

支持自定义className

Dorado所有的控件在系统默认皮肤下都会有默认的className(查找和确定className的办法参考：本书中的控件皮肤修改-DIY(DCUG))

如果你想创建一个新的className，并使控件采用这个新的className作为自己的皮肤，则可以利用这个属性设定，以Button为例，默认的className为button,如果你自定义了新的css文件，并且对于的className名称为blueButton,则你可以修改Button控件的className属性为：

不过一般情况下我们不建议你自定义className属性，对于BS开发基础和CSS不太了解的人来说，这个难度有些大。

大部分情况下我们更建议你根据这篇文档提供的方法和技巧实现控件皮肤的修改：控件皮肤修改-DIY(DCUG

支持拖拽操作

所有的控件都支持dragable,dropable等拖拽相关的属性以及onDraggingSourceDrop等拖拽事件。

Control与拖拽有关的属性有:

• dragable
• dropable
• dragTags
• dropableTags

与拖拽有关的事件有：

• onDraggingSourceOver
• onDraggingSourceOut
• onDraggingSourceMove
• onDraggingSourceDrop
• onDraggingSourceIndicator
• onDraggingSourceDrop

有关控件拖拽相关的详细说明请参考：

拖拽(DCUG)

支持exClassName属性设定

为简化通过className属性定义皮肤的复杂性，每个控件都提供了exClassName属性，便于你更方便的自定义控件的皮肤，详细使用技巧请参考控件皮肤修改-DIY(DCUG

支持width和height设置

Control控件以及所有继承这个控件的Control控件(如Button, Grid, Tree)等都提供了width和height属性，你可以通过这个属性定义控件的宽度和高度。

在默认不对这几个属性做设定的情况下，控件会依据默认约定的宽度和高度展示，或者根据布局管理器的布局特性决定其大小。

支持动态隐藏特性

所有的控件都提供了visible属性，你可以动态的显示或隐藏控件，参考范例：

// @Bind #button1.onClick
!function(button2) {
	button2.set("visible", button2.get("visible")?false:true);
}

支持hideMode属性设定

前面我们说过Control就是一个Div对象，继承Control的其他控件在客户端都最终会对应为一个DIV对象，只是他们之间的复杂度不一样而已，复杂的DIV内部可能会包含更多的其他DOM对象。

在浏览器中我们隐藏一个DOM对象有两种方式：

方法一:
dom.style.visibility="hidden"
方法二:
dom.style.display="none"

对web编程熟悉的人知道这两者的区别，参考文章:

http://www.cnblogs.com/baoyue9/archive/2009/02/12/1388823.html

http://www.w3schools.com/css/css_display_visibility.asp

根据这个区别，我们可以根据页面展现的需要确定是采用Visibility还是display处理机制隐藏控件对象。

支持ignored属性设定

ignored也可以实现控件的隐藏，但是与visible有最明显的区别：

区别1：ignored决定了服务器端是否将这个控件输出到客户端，而visible不影响控件输出

区别2：visible设置为false之后，由于这个控件还会被输出到客户端，因此你还可以通过设置visible设置为true，是控件显示出来，但是如果设置ignored为true，使服务器端不输出这个控件，则在客户端你再也没有机会将这个控件显示出来。因为这个控件在浏览器端根本不存在。

我们以一个最简单的Control范例查看浏览器的输出，从而进一步加深这两个属性的差别的了解，XML范例：

<?xml version="1.0" encoding="UTF-8"?>
<ViewConfig>
  <Arguments/>
  <Context/>
  <Model/>
  <View>
    <Control id="control1" layoutConstraint="padding:50">
      <Property name="style">
        <Property name="border">1px solid gray</Property>
      </Property>
      <Property name="visible">false</Property>
    </Control>
  </View>
</ViewConfig>

访问这个View的responseText为：

在网页上渲染后的HTML代码为：

分析上面的ResponseText和HTML代码我们知道这个控件还是输出到浏览器中的。而如果我们将ignored设置为true后效果是什么呢：

<?xml version="1.0" encoding="UTF-8"?>
<ViewConfig>
  <Arguments/>
  <Context/>
  <Model/>
  <View>
    <Control id="control1" layoutConstraint="padding:50">
      <Property name="style">
        <Property name="border">1px solid gray</Property>
      </Property>
      <Property name="ignored">true</Property>
    </Control>
  </View>
</ViewConfig>

访问这个View的时候，ResponseText的内容为：

在网页上渲染后的HTML代码为：

析上面的ResponseText和HTML代码我们知道这个控件没有被输出到浏览器中。

支持metaData属性设定

metaData是控件本身提供的一个集合属性，便于开发人员或用户自定义一些额外的信息，并且这些信息只是用于定义，不需要输出到客户端。这样可以起到一个保护作用。

一般情况下只有控件开发人员或系统架构设计才有可能使用到这个属性，业务页面开发的时候一帮都不会涉及到这个属性的设定，设定格式参考范例：

    <Control id="control1" layoutConstraint="padding:50">
      <Property name="style">
        <Property name="border">1px solid gray</Property>
      </Property>
      <Property name="metaData">
        <Property name="securityKey">employee.saveButton</Property>
        <Property name="flowTag">start</Property>
      </Property>
    </Control>

支持renderOn和renderTo特性

renderOn和renderTo用于HTML页面模板技术中，详细使用场景和说明请参考：

• 基础教程的：09. HTML模板(SEFC)
• Sample-Center示例说明中的：Velocity页面模板(sample-center) 和 JSP页面模板(sample-center)

支持style设置

所有控件都支持style设定，但是需要说明的是大部分的控件都是一个符合型的复杂DOM对象，此处的style修改只能调整复杂DOM对象最外层的DOM对象的style特性，如果想详细定制控件CSS，则还是建议通过控件皮肤修改相关的方式解决-控件皮肤修改-DIY(DCUG

如本例Style属性设定：

<?xml version="1.0" encoding="UTF-8"?>
<ViewConfig>
  <Arguments/>
  <Context/>
  <Model/>
  <View>
    <Control id="control1" layoutConstraint="padding:50">
      <Property name="style">
        <Property name="border">1px solid gray</Property>
        <Property name="background-color">antiquewhite</Property>
      </Property>
    </Control>
  </View>
</ViewConfig>

IDE设计效果：

页面渲染效果：

支持控件标签设定

详细说明参考：Sample-Center范例说明：控件标签(sample-center)

支持系统提示信息

所有的控件都支持系统提示信息设置，就是当鼠标移到相关控件上方的时候出现一个系统提示信息，如下：

实现这种效果很简单，你只要在相关控件的tip属性上配置好提示信息就可以，如本例：

对应的XML声明代码为：

<?xml version="1.0" encoding="UTF-8"?>
<ViewConfig>
  <Arguments/>
  <Context/>
  <Model/>
  <View>
    <Control id="control1" layoutConstraint="padding:50">
      <Property name="style">
        <Property name="border">1px solid gray</Property>
        <Property name="background-color">antiquewhite</Property>
      </Property>
      <Property name="tip">我配置了系统提示信息</Property>
    </Control>
  </View>
</ViewConfig>

支持userData特性

userData也是一个集合，与metaData不同的是，userData中的信息在客户端浏览器中是可以访问的，例如我们可以在服务器端利用Java设置：

control.setUserData(employee);

之后在客户端我们就可以直接访问这个数据：

var employee = control.get("userData");

如果服务器端存入的是一个Java对象或Map对象，就可以按照JSON的客户端处理机制访问内部数据，如：

var employee=control.get("userData");
var deptId = employee.dept.id;
dorado.MessageBox.alert(deptId);

另外我们也可以在IDE中设定userData集合，当我们激活控件的userData属性的时候，可以看到对应编辑框中有一个图标：

单击这个图标，就可以打开userData的编辑向导窗口：

在IDE中完成userData的编辑，就生成如下的XML:

<?xml version="1.0" encoding="UTF-8"?>
<ViewConfig>
  <Arguments/>
  <Context/>
  <Model/>
  <View>
    <Control id="control1" layoutConstraint="padding:50">
      <Property name="style">
        <Property name="border">1px solid gray</Property>
        <Property name="background-color">antiquewhite</Property>
      </Property>
      <Property name="userData">
        <Entity>
          <Property name="id">ANLIN</Property>
          <Property name="name">安林</Property>
          <Property name="degree">大学</Property>
        </Entity>
      </Property>
    </Control>
  </View>
</ViewConfig>

这样我们在客户端访问这个属性的时候的范例JS代码：

var name = control1.get("userData").name;

也可以直接在客户端用JS设置userData属性：

control1.set("userData", "临时信息");

或设置JSON对象：

control1.set("userData", {
  id:"ANLIN",
  name:"安林",
  degree:"大学"
});

支持标签设定(tags)

Control控件支持标签设定，你可以根据需要为某一个Control设置tags属性，标签可以有多个，如果需要多个标签用逗号隔开，如(范例分为三类:输入，审批和归档)：

对于设置了tags属性的控件，我们可以通过View的tag()方法获取：

var objects = view.tag("approve");

View的tag()方法放回的是一个dorado.ObjectGroup类型的数组，这样当页面上有很多控件的时候，每个控件都有不同的标签。这样我们就可以通过标签一次性的获取tags中包含这个标签的所有控件，并迭代访问它：

var objects = view.tag("approve");
objects.each(function(control){
	var id = control.get("id");
	control.set("visible", false);
});

关于View的tag()方法更详细的请参考：View(DCUG)--待补充

tags使用参考范例：http://bsdn.org/projects/dorado7/deploy/sample-center/com.bstek.dorado.sample.Main.d#80450

参考范例配套文档：控件标签(sample-center)