Dorado 9 : 编辑框和下拉框(sample-center)

在Dorado中我们可以看到更多形态的Editor编辑框，以及更多样化的下拉框使用方法

本范例对应的View：com.bstek.dorado.sample.widget包下的EditorAndTrigger.view.xml.

在Dorado开发中，Editor对象可以关联一到多个Trigger,在IDE属性配置中可以用','逗号隔开，如:

 <TextEditor id="editor1">
   <Property name="trigger">triggerClear,dropDownPoker</Property>
 </TextEditor>

本例采用了FormElement代替TextEditor,进行定义，FormElement是Dorado特别提供的表单元素:表单元素是一种组合式的控件，提供此组件的目的是为了使表单的定义变得更加简单。一般而言，一个表单元素包含文本标签、编辑器、提示信息三个部分。我们在实际应用中所见的大部分输入域都是由这三个部分组成的。

通过FormElement我们也可以方便的定义其trigger:

<FormElement>
   <Property name="label">自定义的Trigger1</Property>
   <Property name="trigger">trigger1</Property>
   <Editor/>
</FormElement>

自定义Trigger

第一个编辑框:自定义的Trigger1

trigger1的onExecute()代码方法

参考: onExecute声明(建议直接参考Client-API):

在该方法中，我么定义：

arg.editor.set("text", "Trigger设置的值");

第二个编辑框：自定义的Trigger2

基于第一个编辑框的使用机制，我们知道可以在Trigger的onExecute自定义自己的逻辑，则我们在trigger2的onExecute()中写入如下代码:

var dialog = view.get("#dialog2");
dialog.set("userData", arg.editor);
dialog.show();

这一次我们取到系统中的一个Dialog对话框，并显示出来

第三个编辑框：自定义的Trigger3

Trigger除了自定义逻辑之外，我们还可以自由的定义它的图标，它提供了icon属性，如本例:

    <Trigger id="trigger3">
      ...省略
      <Property name="icon">>dorado/res/com/bstek/dorado/sample/widget/m2.gif</Property>
    </Trigger>

下拉框

普通的列表下拉框

在Dorado中下拉框也是一种Trigger,我们可以先在View中定义DropDown对象，再通过trigger属性进行关联，如本例：

<ListDropDown id="dropDownList">
  <Property name="items">${dorado.getDataProvider("categoryInterceptor#getAll").getResult()}</Property>
  <Property name="property">categoryName</Property>
</ListDropDown>
<FormElement>
  <Property name="label">普通的列表下拉框</Property>
  <Property name="trigger">dropDownList</Property>
  <Editor/>
</FormElement>

其中items属性是Dorado的一个内置EL表达式，用于激活DataProvider机制，根据之前我们对DataProvider的了解，这段服务定位表达式"catagoryInterceptor#getAll"最终表示定位到一个服务类的getAll方法，我们看看在sample-center中CatagoryInterceptor.java的getAll方法:

@DataProvider
public Collection<Category> getAll() {
	return categoryDao.getAll();
}

这个方法被注册为DataProvider,并返回一个Category的列表。最终这个编辑框的下拉效果如下:

包含Grid的下拉框

在了解上例的基本原理后，我们就很容易的可以将一个Grid也放在下拉框中进行trigger绑定:

<ListDropDown id="dropDownGrid">
  <Property name="items">${dorado.getDataProvider(&quot;categoryInterceptor#getAll&quot;).getResult()}</Property>
  <Property name="property">categoryName</Property>
  <Property name="width">260</Property>
  <DataColumn>
    <Property name="property">categoryName</Property>
    <Property name="width">100</Property>
  </DataColumn>
  <DataColumn>
    <Property name="property">description</Property>
    <Property name="width">*</Property>
  </DataColumn>
</ListDropDown>
<FormElement>
  <Property name="label">包含Grid的下拉框</Property>
  <Property name="labelPosition">left</Property>
  <Property name="trigger">dropDownGrid</Property>
  <Editor/>
</FormElement>

效果如下:

格式化输入编辑框

IP地址编辑框

在应用中还存在很多有格式化输入的编辑框，我们希望这种编辑框在我们输入的时候就进行格式限定，如IP地址，日期时间，邮件，网址等。
在Dorado中提供了这种机制，如本例的IP地址处理，实现方法如下:

<FormElement>
  <Property name="label">IP地址编辑框</Property>
  <Editor>
    <CustomSpinner>
      <Property name="pattern">IP: [0,255].[0,255].[0,255].[0,255]</Property>
      <Property name="text">192,168,0,101</Property>
    </CustomSpinner>
  </Editor>
</FormElement>

本例我们是通过Spinner控件完成格式化的控制，Spinner的详细说明请参考相关的Client-API.
值得一提的是Spinner也是Trigger的一种实现，只是做成现成可复用的控件而已。

日期时间编辑框

与上例相同，代码如下：

<FormElement>
  <Property name="trigger">defaultDateDropDown</Property>
  <Property name="label">较复杂的时间编辑框</Property>
  <Editor>
    <DateTimeSpinner>
      <Property name="type">dateTime</Property>
    </DateTimeSpinner>
  </Editor>
</FormElement>