8.嵌入Freeform

8.1 普通嵌入

　　Supcan Treelist允许嵌入一个Freeform XML，来代替行的显示，相当于每行都是一个Freeform.
　　嵌入了Freeform后，数据行的外观就不再被限制在类似"表格"的范围了，数据展现可以相当地自由，演示页请参见“自由表头”中的“10.多记录Freeform(1)”、“12.多记录Freeform(2)”.
　　嵌入Freeform有一个最基本的要求：Treelist中的<col name="?">需要和Freeform中的<text/input/img id="?">相匹配.
　　满足了这一点后，Treelist就可以通过定义<Properties freeform="?" rowHeight="?" >引用该Freeform了.
　　嵌入的Freeform将代替Treelist各行的显示，也能代替Treelist的输入，是否能输入取决于Treelist的<Properties>中的 "Editable" 属性，且和Freeform中的<Properties> 的"Editable" 无关.

　　如果Treelist嵌入了Freeform，如下属性的默认值将和平常的不一样：
　　　　1.<Properties> \ headerHeight: 默认值将不是24，而是0，也就是说默认将没有表头;
　　　　2.<Properties> \ isShowRuler: 默认值将是true，也就是说默认显示左侧标尺;
　　　　3.<col> \ width: 默认值将不是0.1，而是0;

嵌入 Freeform 的 Treelist 不支持以树展现、不支持合计/小计行.

被嵌入的 Freeform 不支持 Menus、Upload、Pager、ImageFlow 类型的 Object.

8.2 Freeform对话框

　　有一种常见的应用场景是，数据平常以Treelist列表展现，如果要修改数据，只要按回车键(或鼠标双击)，就能弹出一个对话框，在对话框中输入数据。
　　您可以在“自由表头”中的 “15.辅助Treelist输入(2)” 演示页中实际操作一下，您会发现这种内置Freeform的非模式对话框输入方式，也是一种很不错的输入方案，尤其是在列多的情况下，输入一条记录变得直观简单，不必再来回拖拽底部的滚动条了。
　　<Properties>有一个属性 "editFreeformId"，就是用来指定这个输入的freeform对话框的，就如下面例子中的：

<Properties editFreeformId="FR1"/>
<cols>
 <col ...>
 ...
</cols>
<FreeformRes>
 <freeform id="FR1" url="freeform71.xml" IdOk="ok" IdCancel="cancel" extWidth="0"/>
 <freeform id="FR2" url="freeform72.xml" IdOk="ok" IdCancel="cancel" extWidth="0"/>
</FreeformRes>
...

　　这种对话框有2种形式的freeform:
　　　　1.固定、写死的freeform;
　　　　2.动态生成、模版型的freeform
　　固定、写死的freeform就是普通的freeform，里面的所有元素都需要您亲手定义，在此就不再介绍。
　　动态freeform，是参照一个freeform模版生成的，该freeform中包含了<repeat>元素和<copy>元素，其含义分别为“动态替换” 和 “从Treelist复制”，典型例子如:

<?xml version="1.0" encoding="utf-8"?>
<!--Supcan Freeform -->
<freeform>
<Properties bgColor="#ffffff">
 <Expresses>
  〈Copy/〉　　//注：Expresses(表达式)将从 Treelist 复制
 </Expresses>
 <Validations>
  〈Copy/〉　　//注：Validations(验证)将从 Treelist 复制
 </Validations>
</Properties>
<Fonts>
 <Font height="-13"/>
</Fonts>
 
<Objects>
 <TableLayout x="5" y="42" width="95%">
  <Col width=".1"/>
  <Col width="90"/>
  <Col width="6"/>
  <Col width="190"/>
  <Col width="30"/>
  <Col width="90"/>
  <Col width="6"/>
  <Col width="190"/>
  <Col width=".1"/>
  〈repeat〉　　//注：本段内容将动态生成，里面有2个input, 表示垂直是双排的
   <tr height="24">
    <td/>
    <td><input width="3" leftTextAlign="left"/></td>
    <td/>
    <td/>
    <td/>
    <td><input width="3" leftTextAlign="left"/></td>
   </tr>
   <tr height="6"/>
  〈/repeat〉
 </TableLayout>
 <groupEx x1="5" y1="5" width="99%" y2=".bottom+8" text=" 请输入 "/>
 <input id="ok"  Text="确认" x="36%"  y=".bottom+10" width="80" type="button" />
 <input id="cancel"  Text="取消" x=".right+10"  y=".top" width="80" type="button" />
</Objects>
 
<DropLists>
 〈Copy/〉　　//注：Droplists(下拉资源)将从 Treelist 复制
</DropLists>
</freeform>

　　里面核心的部分就是<TableLayout>中的那段<repeat> ... </repeat>，其中的<input>只能含有width、leftTextAlign属性，不能书写其它的属性.
　　实际动态生成过程，只是替换其中的<repeat>和<copy>元素. 模版的最大好处是：复用.