Wicket：编写自己的组件

发布于 2024-09-15 06:42:59 字数 2448 浏览 1 评论 0原文

我正在尝试在我的项目中使用 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 数据。

原文

I'm trying to use wicket framework for my project, and some things with components are not clear for me.

For example, I want to create a component — javascript grid (jqGrid). All I need is:

1. create <table id="#jqGrid1"></table>
2. insert javascript at <head> section: 
<script type="text/javascript">
$(document).ready(function () { $('#jqGrid1').jqGrid()  }); 
</script>

So, i created java class 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);
}

}

and the corresponding html for this class JqGrid.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>

And I can't understand, how I can change the components code. I.e. generate new id for every next grid on a page. I mean, I can't understand principles, how to change html data inside component, if there are not only one tag, but hierarchy of tags inside each other.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我偏爱纯白色 2024-09-22 06:43:00

在您的组件中，您不需要更改自己的 wicket:id。 “jqGrid1”id 是内部使用的。使用组件时，您可以使用一些“外部”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>

因此，您可以通过给它另一个 id (table2 ...) 来添加另一个 JqTable

希望有所帮助。

In your Component, you don't need to change your own wicket:id. The "jqGrid1" id is internal to use. when using your Component, you add it to the page hierarchy using some 'external' id.

example:

add(new JqTable("table1");

and in html:

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

the generated combined output would be something like:

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

So, you can add another JqTable by giving it another id (table2 ...)

hope that helped.

回复收藏 0 原文

漫雪独思 2024-09-22 06:42:59

你已经快完成了，但是让 wicket 为你管理 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>

You're almost there, but let wicket manage the ids for you:

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);");
}

and the 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>

回复收藏 0 原文

~没有更多了~