1. 功能

    根据动态的 HTML 片段(支持带 jwcid)生成内容,该组件需要定制扩展后才能使用,默认不输出任何内容。

    注:

    1. 定制的组件必须重载 Dynamic.java 里的 public String getTemplate() 方法,返回标准的 HTML 串,支持带 jwcid 属性;
    2. 在 getTemplate() 里可以通过 getContext() 取请求里的数据,实现根据请求内容动态生成 HTML;
    3. 在 getTemplate() 里不能使用组件自身定义的属性,取出来的内容都是 null。
      public abstract class Dynamic extends DynamicComponent {
      	public abstract String getBizCode();
      	@Override
      	protected String getTemplate() {
      		//错误,这样获取的属性值是 null,组件自身属性无法获取
      		String bizCode = getBizCode();
      		
      		return "";
      	}
      }
      
  2. 定制扩展

    动态表格和动态表单组件:由*.java,*.jwc,*.html 三个文件组成,同时还要添加到组件命名空间后才能使用。

    1. 动态表格 Java 文件:DynamicTable.java

      package com.ailk.demo.view.components;
      
      import com.ailk.web.view.component.dynamic.Dynamic;
      
      public abstract class DynamicTable extends Dynamic {
      	
      	//重载,获取定制模板
      	protected String getTemplate() {
      		//获取请求数据
      		//String param = getContext().getParameter("paramName");
      		//IDataBus cond = getContext().createData("uiid");
      		try {
      			//输出表格数据,数据格式为 JSON 串
      			//{table:{},thead:[{},{}],tbody[{},{}]}
      			String table = "{\"table\":{\"name\":\"tablename\",\"source\":\"ognl:custs\",\"value\":\"ognl:cust\",\"index\":\"ognl:rowIndex\",\"rowClick\":\"rowClick\",\"rowDBClick\":\"rowDBClick\",\"contextMenu\":\"新增:tableAddRow,删除:tableDeleteRow,清空:tableCleanRow,group1:清空所有:tableCleanRows\"}," +
      					"\"thead\":[" +
      					"{\"name\":\"index\",\"desc\":\"序号\",\"style\":\"display:none\",\"type\":\"0\"}," +
      					"{\"name\":\"custId\",\"desc\":\"客户标识\",\"type\":\"0\"}," +
      					"{\"name\":\"custName\",\"desc\":\"客户姓名\",\"type\":\"0\"}," +
      					"{\"name\":\"age\",\"desc\":\"年龄\",\"style\":\"display:none\",\"type\":\"0\"}," +
      					"{\"name\":\"ageDesc\",\"desc\":\"年龄\",\"type\":\"0\"}," +
      					"{\"name\":\"birthDate\",\"desc\":\"出生年月\",\"type\":\"0\"}," +
      					"{\"name\":\"mobileId\",\"desc\":\"手机号码\",\"type\":\"0\"}," +
      					"{\"name\":\"email\",\"desc\":\"邮箱地址\",\"type\":\"0\"}," +
      					"{\"name\":\"createTime\",\"desc\":\"创建时间\",\"type\":\"0\"}" +
      					"]," +
      					"\"tbody\":[" +
      					"{\"style\":\"display:none\",\"type\":\"0\",\"value\":\"ognl:rowIndex\"}," +				
      					"{\"type\":\"0\",\"value\":\"ognl:cust.custId\"}," +	
      					"{\"type\":\"3\",\"value\":\"ognl:cust.custName\",\"custId\":\"ognl:cust.custId\",\"onclick\":\"queryCust($(this).attr('custId'));\"}," +	
      					"{\"type\":\"0\",\"value\":\"ognl:cust.age\",\"style\":\"display:none\"}," +
      					"{\"type\":\"0\",\"value\":\"ognl:cust.age\"}," +	
      					"{\"type\":\"0\",\"value\":\"ognl:cust.birthDate\"}," +	
      					"{\"type\":\"0\",\"value\":\"ognl:cust.mobileId\"}," +	
      					"{\"type\":\"0\",\"value\":\"ognl:cust.email\"}," +	
      					"{\"type\":\"0\",\"value\":\"ognl:cust.createTime\"}" +	
      					"]}";
      
      			//DynamicHtml.java 提供了该 JSON 格式串转 Table 和 Form 的 HTML 方法
      
      			return DynamicHtml.createTable(table);
      		} catch (Exception e) {
      			e.printStackTrace();
      		}
      		return "error";
      	}
      
      }
      
    2. 动态表单 Java 文件:DynamicForm.java

      package com.ailk.demo.view.components;
      
      import com.ailk.web.view.component.dynamic.Dynamic;
      
      public abstract class DynamicForm extends Dynamic {
      	//重载,获取定制模板
      	protected String getTemplate() {
      		try {
      			//输出表格数据,数据格式为 JSON 串
      			//[{label:{},element{}},{label:{},element{}}]
      			String form = "[{\"label\":{\"desc\":\"客户标识\",\"class\":\"e_required\",\"type\":\"0\",\"hidden\":\"true\"}," +
      					"\"element\":{\"type\":\"0\",\"name\":\"custId\",\"value\":\"ognl:edit.custId\"}}," +
      					"{\"label\":{\"desc\":\"客户姓名\",\"type\":\"0\"}," +
      					"\"element\":{\"type\":\"0\",\"name\":\"custName\",\"value\":\"ognl:edit.custName\"}}," +
      					"{\"label\":{\"desc\":\"年龄\",\"type\":\"0\"}," +
      					"\"element\":{\"type\":\"1\",\"name\":\"age\",\"text\":\"codeName\",\"value\":\"codeValue\",\"selected\":\"ognl:edit.age\",\"source\":\"ognl:getStaticSelection('DEMO_CUST_AGE')\"}}," +
      					"{\"label\":{\"desc\":\"出生年月\",\"type\":\"0\"}," +
      					"\"element\":{\"type\":\"2\",\"name\":\"birthDate\",\"value\":\"ognl:edit.birthDate\"}}," +
      					"{\"label\":{\"desc\":\"附件\",\"type\":\"0\"}," +
      					"\"element\":{\"type\":\"3\",\"name\":\"custFile\",\"value\":\"ognl:edit.custFile\"}}," +
      					"{\"label\":{\"desc\":\"手机号码\",\"type\":\"0\"}," +
      					"\"element\":{\"type\":\"0\",\"name\":\"mobileId\",\"value\":\"ognl:edit.mobileId\"}}," +
      					"{\"label\":{\"desc\":\"邮箱地址\",\"type\":\"0\"}," +
      					"\"element\":{\"type\":\"0\",\"name\":\"email\",\"value\":\"ognl:edit.email\"}}" +
      					"]";
      			return DynamicHtml.createForm(form);
      		} catch (Exception e) {
      			e.printStackTrace();
      		}
      		return "error";
      	}
      
      }
      
    3. 动态表格 Jwc 文件:DynamicTable.jwc

      <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE component-specification PUBLIC 
        "-//Apache Software Foundation//Tapestry Specification 3.0//EN" 
        "http://jakarta.apache.org/tapestry/dtd/Tapestry_3_0.dtd">
      
      <!-- 指定正确的 class,无任何组件参数 -->
      <component-specification class="com.ailk.demo.view.components.DynamicTable" allow-body="no">
      </component-specification>
      
    4. 动态表单 Jwc 文件:DynamicForm.jwc

      <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE component-specification PUBLIC 
        "-//Apache Software Foundation//Tapestry Specification 3.0//EN" 
        "http://jakarta.apache.org/tapestry/dtd/Tapestry_3_0.dtd">
      
      <!-- 指定正确的 class,无任何组件参数 -->
      <component-specification class="com.ailk.demo.view.components.DynamicForm" allow-body="no">
      </component-specification>
      
    5. 动态组合组件

      动态组件另一种实现方式,组合标题、表单、表格,根据组件所在位置,可使用其中一个或多个。此处与上面不同,继承自 com.ailk.web.view.component.dynamic.DynamicModel 类,实现 ModelItem getModelRoot() 方法。

      动态组合 java 文件:DynaModel.java

      Java 示例代码:

      package com.ailk.demo.view.components;
      
      import java.util.ArrayList;
      import java.util.List;
      
      import com.ailk.common.data.IData;
      import com.ailk.common.data.impl.DataMap;
      import com.ailk.web.view.component.dynamic.DynamicModel;
      import com.ailk.web.view.component.dynamic.ModelItem;
      import com.ailk.web.view.component.dynamic.ecl.Button;
      import com.ailk.web.view.component.dynamic.ecl.CBox;
      import com.ailk.web.view.component.dynamic.ecl.Input;
      import com.ailk.web.view.component.dynamic.ecl.Span;
      import com.ailk.web.view.component.dynamic.ecl.form.Form;
      import com.ailk.web.view.component.dynamic.ecl.form.FormItem;
      import com.ailk.web.view.component.dynamic.ecl.form.FormSubmit;
      import com.ailk.web.view.component.dynamic.ecl.table.Table;
      import com.ailk.web.view.component.dynamic.ecl.table.TableBody;
      import com.ailk.web.view.component.dynamic.ecl.table.TableBodyTd;
      import com.ailk.web.view.component.dynamic.ecl.table.TableHead;
      import com.ailk.web.view.component.dynamic.ecl.table.TableHeadTh;
      import com.ailk.web.view.component.dynamic.ecl.title.Title;
      
      public class DynaModel extends DynamicModel{
      
      	protected ModelItem getModelRoot() {
      		CBox box=new CBox();
      		
      		IData data=new DataMap();   
      		
      		data.put("Table.rowclass", "c_table-row-10");
      		data.put("Table.name", "CustTable");
      		data.put("Table.rowClick", "queryDetail(XXX)");
      		data.put("Table.rowDBClick", "queryDetail(XXX)");
      		data.put("Table.contextMenu", "新增:tableAddRow,删除:tableDeleteRow,清空:tableCleanRow,group1:清空所有:tableCleanRows");
      
      		data.put("Title.name", "测试标题");
      		
      		data.put("Form.colclass", "c_form-col-2");
      		data.put("Form.id", "testformid");
      		data.put("Form.uuid", "testformuuid");
      		
      		Title title=new Title(data);
      		Form form=new Form(data); 
      		Table table=new Table(data);
      		
      		box.addTitle(title);
      		box.addForm(form);
      		box.addTable(table);
      		
      		
      		FormItem item1=new FormItem(); 
      		FormItem item2=new FormItem(); 
      		FormItem item3=new FormItem(); 
      		FormItem item4=new FormItem(); 
      		FormSubmit item5=new FormSubmit(); 
      		
      
      		data.put("Span.class", "label");
      		data.put("Span.text", "客户标识:");
      		Span span1=new Span(data);
      		data.put("Span.text", "客户姓名:");
      		Span span2=new Span(data);
      		data.put("Span.text", "客户年龄:");
      		Span span3=new Span(data);
      		data.put("Span.text", "手机号码:");
      		Span span4=new Span(data);
      		
      		data.put("Span.class", "e_input");
      		data.put("Span.text", "");
      		Span span5=new Span(data);
      		Span span6=new Span(data);
      		Span span7=new Span(data);
      		Span span8=new Span(data);
      		
      		data.put("Input.type", "text");
      		data.put("Input.id", "inputcustid");
      		Input input1=new Input(data);
      		data.put("Input.id", "inputcustname");
      		Input input2=new Input(data);
      		data.put("Input.id", "inputcustage");
      		Input input3=new Input(data);
      		data.put("Input.id", "inputcustmobile");
      		Input input4=new Input(data);
      		span5.addInput(input1);span6.addInput(input2);span7.addInput(input3);span8.addInput(input4);
      		
      		data.put("Button.class", "e_button-form");
      		data.put("Button.onclick","searchCust()");
      		Button btn=new Button(data);
      		data.put("Span.class", "");
      		data.put("Span.text","开始查询");
      		Span span=new Span(data);
      		data.put("Span.text","");
      		btn.addSpan(span);
      		
      		item1.addSpan(span1);
      		item2.addSpan(span2);
      		item3.addSpan(span3);
      		item4.addSpan(span4);
      		item1.addSpan(span5);
      		item2.addSpan(span6);
      		item3.addSpan(span7);
      		item4.addSpan(span8);
      		item5.addButton(btn);
      		List<FormItem> itemList=new ArrayList<FormItem>();
      		itemList.add(item1);
      		itemList.add(item2);
      		itemList.add(item3);
      		itemList.add(item4);
      		form.addFormItemList(itemList);
      		form.addFormSubmit(item5);
      		
      		
      		TableHead head=new TableHead();
      		data.put("TableHeadTh.col", "index");
      		data.put("TableHeadTh.style", "display:none");
      		data.put("TableHeadTh.text", "序号");
      		TableHeadTh th1=new TableHeadTh(data);
      		data.put("TableHeadTh.col", "custId"); 
      		data.put("TableHeadTh.style", ""); 
      		data.put("TableHeadTh.text", "客户标识");
      		TableHeadTh th2=new TableHeadTh(data);
      		data.put("TableHeadTh.col", "custName");
      		data.put("TableHeadTh.text", "客户姓名");
      		TableHeadTh th3=new TableHeadTh(data);
      		data.put("TableHeadTh.col", "ageDesc");
      		data.put("TableHeadTh.text", "年龄");
      		TableHeadTh th4=new TableHeadTh(data);
      		data.put("TableHeadTh.col", "birthDate");
      		data.put("TableHeadTh.text", "出生年月");
      		TableHeadTh th5=new TableHeadTh(data);
      		data.put("TableHeadTh.col", "mobileId");
      		data.put("TableHeadTh.text", "手机号码");
      		TableHeadTh th6=new TableHeadTh(data);
      		data.put("TableHeadTh.col", "email");
      		data.put("TableHeadTh.text", "邮箱地址");
      		TableHeadTh th7=new TableHeadTh(data);
      		data.put("TableHeadTh.col", "createTime");
      		data.put("TableHeadTh.text", "创建时间");
      		TableHeadTh th8=new TableHeadTh(data);
      		List<TableHeadTh> thList=new ArrayList<TableHeadTh>();
      		thList.add(th1);thList.add(th2);thList.add(th3);thList.add(th4);
      		thList.add(th5);thList.add(th6);thList.add(th7);thList.add(th8);
      		head.addTableHeadThList(thList);
      		table.addTableHead(head);
      		
      		data.put("TableBody.source", "ognl:custs");
      		data.put("TableBody.value", "ognl:cust");
      		data.put("TableBody.index", "ognl:rowIndex");
      		TableBody tb=new TableBody(data);
      		table.addTableBody(tb);
      		data.put("TableBodyTd.style", "display:none");
      		TableBodyTd td1=new TableBodyTd(data);
      		data.put("TableBodyTd.style", "");
      
      		TableBodyTd td2=new TableBodyTd(data);
      		TableBodyTd td3=new TableBodyTd(data);
      		TableBodyTd td4=new TableBodyTd(data);
      		TableBodyTd td5=new TableBodyTd(data);
      		TableBodyTd td6=new TableBodyTd(data);
      		TableBodyTd td7=new TableBodyTd(data);
      		TableBodyTd td8=new TableBodyTd(data);
      		List<TableBodyTd> tdList=new ArrayList<TableBodyTd>();
      		tdList.add(td1);tdList.add(td2);tdList.add(td3);tdList.add(td4);
      		tdList.add(td5);tdList.add(td6);tdList.add(td7);tdList.add(td8);
      		
      		data.put("Span.value", "ognl:rowIndex");
      		data.put("Span.jwcid", "@Insert");
      		td1.addSpan(new Span(data));
      		data.put("Span.value", "ognl:cust.custId");
      		td2.addSpan(new Span(data));
      		data.put("Span.value", "ognl:cust.name");
      		td3.addSpan(new Span(data));
      		data.put("Span.value", "ognl:cust.age");
      		td4.addSpan(new Span(data));
      		data.put("Span.value", "ognl:cust.birth");
      		td5.addSpan(new Span(data));
      		data.put("Span.value", "ognl:cust.mobileId");
      		td6.addSpan(new Span(data));
      		data.put("Span.value", "ognl:cust.email");
      		td7.addSpan(new Span(data));
      		data.put("Span.value", "ognl:cust.creattime");
      		td8.addSpan(new Span(data));
      		return box;
      	}
      	//测试用,查看自定义模板拼接效果
      	protected String getTemplate() {
      		String tmp = super.getTemplate();
      		System.out.println(tmp);
      		return tmp;
      	}
      }
      
    6. 动态组合 Jwc 文件:DynaModel.jwc

      <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE component-specification PUBLIC 
        "-//Apache Software Foundation//Tapestry Specification 3.0//EN" 
        "http://jakarta.apache.org/tapestry/dtd/Tapestry_3_0.dtd">
      
      <!-- 指定正确的 class,无任何组件参数 -->
      <component-specification class="com.ailk.demo.view.components.DynaModel" allow-body="no">
      </component-specification>
      

      HTML 示例代码

      <body jwcid="@Body">
      <div class="m_wrapper"><div class="m_wrapper2">
      	<!-- @demo:DynaModel 这里的 demo 是指定包名,意思是要到这个包里找 DynaModel组件,包名是在 demo.application 里定义的 library id="demo" -->
      	<div jwcid="@demo:DynaModel" />
      </div></div>
      </body>
      
    7. HTML 文件

      在同目录下创建同名的 .html 即可,html 里内容为空。

    8. 添加到命名空间

      创建 demo.library 文件,该文件里可以放多个定制开发的组件,多为[工程名.library],并将组件添加到文件里,内容如下:

      <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE library-specification PUBLIC
        "-//Apache Software Foundation//Tapestry Specification 3.0//EN"
        "http://jakarta.apache.org/tapestry/dtd/Tapestry_3_0.dtd">
      
      <library-specification>
      	<!-- 添加组件 DynamicTable -->
      	<component-type type="DynamicTable" specification-path="DynamicTable.jwc"/>
      	<!-- 添加组件DynamicForm -->
      	<component-type type="DynamicTable" specification-path="DynamicForm.jwc"/>
      </library-specification>
      
    9. 添加组件包

      将 demo.library 文件添加到 *.application 文件里,否则页面上无法找到对应的组件。

      在demo.application里添加如下内容:

      <library id="demo" specification-path="/com/ailk/demo/view/components/demo.library"/>
      
  3. 示例

    HTML 代码

    <!-- 刷新的 Part 开始 -->
    <div jwcid="QueryPart@Part" id="QueryPart" element="div" uiid="custTable">
    	<div class="c_scroll" style="height:242px">
<div class="c_table c_table-row-10">
    			<!-- @demo:DynamicTable 这里的 demo 是指定包名,意思是要到这个包里找 DynamicTable 组件,包名是在 demo.application 里定义的 library id="demo" -->
    			<span jwcid="@demo:DynamicTable"></span>
    		</div>
    	</div>
    	<!-- 分页 开始 -->
    	<div jwcid="@NavBar" name="custnav" cond="QueryCond" part="QueryPart" listener="queryCusts" count="ognl:custsCount"></div>
    	<!-- 分页 结束 -->
    </div>
    <!-- 刷新的 Part 结束 -->
    <div jwcid="EditPart@Part" element="div" uiid="cust">
    	<div class="c_title">
    		<div class="text">客户详情</div>
    	</div>
    	<div class="c_form c_form-col-2 c_form-label-5" id="createarea">
    		<!-- @demo:DynamicTable 这里的 demo 是指定包名,意思是要到这个包里找 DynamicTable 组件,包名是在 demo.application 里定义的 library id="demo" -->
    		<span jwcid="@demo:DynamicForm"></span>
    	</div>
    </div>