Java Wicket：编写自己的组件_Java_Wicket

Java Wicket：编写自己的组件

java wicket

Java Wicket：编写自己的组件,java,wicket,Java,Wicket,我正试图在我的项目中使用wicket框架，但有些组件方面的内容我并不清楚例如，我想创建一个组件——javascript网格（jqGrid）。我只需要： 1. create <table id="#jqGrid1"></table> 2. insert javascript at <head> section: <script type="text/javascript"> $(document).ready(function () { $('#

我正试图在我的项目中使用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>

1。创造
2.在第节插入javascript：
$（document）.ready（函数（）{$（'#jqGrid1'）.jqGrid（）}）；

因此，我创建了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);
}

包kz.primesource.wicket.component；
导入kz.primesource.db.docflow.TableColumn；
导入org.apache.wicket.markup.html.IHeaderContributor；
导入org.apache.wicket.markup.html.IHeaderResponse；
导入org.apache.wicket.markup.html.panel.panel；
导入org.apache.wicket.protocol.http.WebApplication；
导入org.json.simple.JSONObject；
导入java.util.ArrayList；
公共类JqTable扩展面板实现IHeaderContributor{
私有字符串id；
私有字符串url；
私有字符串editurl；
私有字符串数据类型；
私有字符串mtype；
私有字符串自动编码；
私有ArrayList列；
私有int rowNum；
私有数组列表行列表；
专用字符串寻呼机；
私有字符串标题；
私有布尔是收缩的；
私有整数宽度；
私人内部高度；
私有布尔isToolbarVisibile；
私有字符串位置；
公共JqTable（字符串id）{
超级（id）；
this.id=id；
}
公共无效renderHead（IHeaderResponse响应）{
JSONObject JSONObject=新的JSONObject（）；
放置（“宽度”，新整数（100））；
放置（“高度”，新整数（200））；
字符串选项=jsonObject.toJSONString（）；
字符串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）；
这个.setMarkupId（id）；
此.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数据的原则，如果组件内不仅有一个标记，而且还有标记的层次结构。

在组件中，您不需要更改自己的wicket:id。“jqGrid1”id是内部使用的。使用组件时，可以使用一些“外部”id将其添加到页面层次结构中

例如：

add(new JqTable("table1");

和html格式：

<div wicket:id="table1">this gets replaced with the JqTable component</div>

这将替换为JqTable组件

生成的组合输出类似于：

<div wicket:id="table1"> 
   <table id="jqGrid1" style="width:100%;height:200px">
</table>

因此，您可以通过给另一个id添加另一个JqTable（表2…）

希望这有帮助。

您就快到了，但让wicket为您管理ID：

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>

不是有效的解决方案：文档中仍然会有多个jqGrid1 ID是。但不在同一水平上。因此，是的，这是一个有效的解决方案。我已经做过很多次了..我的意思是“valid XHTML”中的valid。不，在一个页面上有多个具有相同id的dom元素是无效的。如果它能工作，那就是一个浏览器错误。并非所有在某处有效的东西都是有效的。（如果你在单独的页面上使用它们，那就完全不同了）啊，好的。我说的是边门：id，不是id。最后一个当然必须是唯一的。到目前为止，我让wicket处理id的创建（通过使用setOutMarkupId（））Grus nach Berlin aus Dresden