Wicket:编写自己的组件
问题描述:
我想为我的项目使用wicket框架,并且组件的某些事情对我而言并不清晰。Wicket:编写自己的组件
例如,我想创建一个组件 - javascript网格(jqGrid)。我需要的是:
1. create <table id="#jqGrid1"></table>
2. insert javascript at <head> section:
<script type="text/javascript">
$(document).ready(function() { $('#jqGrid1').jqGrid() });
</script>
所以,我创建了java类JqTable。
package kz.primesource.wicket.component;
import kz.primesource.db.docflow.TableColumn;
import org.apache.wicket.markup.html.IHeaderContributor;
import org.apache.wicket.markup.html.IHeaderResponse;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.protocol.http.WebApplication;
import org.json.simple.JSONObject;
import java.util.ArrayList;
public class JqTable extends Panel implements IHeaderContributor {
private String id;
private String url;
private String editurl;
private String datatype;
private String mtype;
private String autoencode;
private ArrayList<TableColumn> columns;
private int rowNum;
private ArrayList<Integer> rowList;
private String pager;
private String caption;
private boolean isShrinkToFit;
private int width;
private int height;
private boolean isToolbarVisibile;
private String toolbarPosition;
public JqTable(String id) {
super(id);
this.id = id;
}
public void renderHead(IHeaderResponse response) {
JSONObject jsonObject = new JSONObject();
jsonObject.put("width",new Integer(100));
jsonObject.put("height", new Integer(200));
String options = jsonObject.toJSONString();
String contextPath = WebApplication.get().getServletContext().getContextPath();
response.renderJavascriptReference(contextPath + "/js/jquery.jqGrid.min.js");
response.renderJavascript("$(document).ready(function() { options = " + options + ";$('#jqGrid" + id + "').jqGrid(options); });", id);
this.setMarkupId(id);
this.setOutputMarkupId(true);
}
}
,并为该类JqGrid.html相应的HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<wicket:panel>
<table id="jqGrid1" style="width:100%;height:200px">
</table>
</wicket:panel>
</body>
</html>
而且我不明白,我怎么可以改变组件的代码。即为页面上的每个下一个网格生成新的ID。我的意思是,我不明白原则,如何更改组件内的html数据,如果不仅有一个标签,而且标签层次结构在彼此之内。
答
就快,但让检票管理IDS为您提供:
private Component gridComponent;
public JqTable(final String id){
super(id);
gridComponent = new WebMarkupContainer("grid").setOutputMarkupId(true);
add(gridComponent);
}
@Override
public void renderHead(final IHeaderResponse response){
final String options = "{json}"; // code stripped so I don't need to
// include json in my classpath
final String contextPath = "context"; // dito with servlet api
response.renderJavascriptReference(contextPath
+ "/js/jquery.jqGrid.min.js");
response.renderJavascript("$(document).ready(function() { options = "
+ options + ";$('#" + gridComponent.getMarkupId()
+ "').jqGrid(options); });", gridComponent.getMarkupId());
// btw wicket has it's own domready mechanism, so you could also write it like this:
response.renderOnDomReadyJavascript("options = "
+ options + ";$('#" + gridComponent.getMarkupId()
+ "').jqGrid(options);");
}
和HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<wicket:panel>
<table wicket:id="grid" style="width:100%;height:200px">
</table>
</wicket:panel>
</body>
</html>
答
在你的组件中,你不需要改变你自己的wicket:id。 “jqGrid1”ID是内部使用的。当使用你的组件时,你可以使用'external'id将它添加到页面层次结构中。
例如:
add(new JqTable("table1");
和HTML:
<div wicket:id="table1">this gets replaced with the JqTable component</div>
生成的合成输出会是这样的:
<div wicket:id="table1">
<table id="jqGrid1" style="width:100%;height:200px">
</table>
所以,你可以给它添加其他JqTable另一个ID(表2 ...)
希望有所帮助。
不是一个有效的解决方案:还是会有多个jqGrid1 IDS文件 – 2010-08-20 07:30:32
是的。但不在同一水平上。所以是的,这是一个有效的解决方案。我有这个工作很多次.. – bert 2010-08-20 08:09:40
我的意思是有效的'有效的XHTML'。不,在一个页面上使用相同ID的多个dom元素是无效的。如果它有效,那是一个浏览器错误。并非所有在某个地方工作的东西都是有效(如果你在不同的页面上使用它们是完全不同的) – 2010-08-20 11:34:50