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数据，如果不仅有一个标签，而且标签层次结构在彼此之内。

来源

2010-08-19 Kerb

就快，但让检票管理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>

来源

2010-08-20 07:46:38

在你的组件中，你不需要改变你自己的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 ...）

希望有所帮助。

来源

2010-08-20 05:57:06 bert

不是一个有效的解决方案：还是会有多个jqGrid1 IDS文件 – 2010-08-20 07:30:32

是的。但不在同一水平上。所以是的，这是一个有效的解决方案。我有这个工作很多次.. – bert 2010-08-20 08:09:40

我的意思是有效的'有效的XHTML'。不，在一个页面上使用相同ID的多个dom元素是无效的。如果它有效，那是一个浏览器错误。并非所有在某个地方工作的东西都是有效（如果你在不同的页面上使用它们是完全不同的） – 2010-08-20 11:34:50

Wicket：编写自己的组件

回答

相关问题