Wicket : 자체 구성 요소 작성

프로젝트에 wicket 프레임 워크를 사용하고 있으며 구성 요소가있는 일부 항목이 분명하지 않습니다.Wicket : 자체 구성 요소 작성

예를 들어, 구성 요소 - 자바 스크립트 그리드 (jqGrid)를 만들고 싶습니다. 필요한 것은 다음과 같습니다.

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

그래서 자바 클래스 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

당신은 거의 다,하지만 당신을 위해 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>

출처

2010-08-20 07:46:38

구성 요소에서 자신의 개찰표를 변경할 필요가 없습니다. id. "jqGrid1"id는 내부적으로 사용됩니다. 구성 요소를 사용할 때 일부 '외부'ID를 사용하여 페이지 계층 구조에 추가합니다.

예 :

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

생성 된 결합 된 출력이 될 것 같은 뭔가 :

add(new JqTable("table1");

및 HTML에

그래서

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

, 당신이 그것을 제공하여 다른 JqTable을 추가 할 수 있습니다 다른 ID (표 2 ...)

희망을 도왔습니다.

출처

2010-08-20 05:57:06 bert

하지 유효한 솔루션 : 아직 여러 jqGrid1 식별자가있을 것입니다 문서 –

예. 그러나 동일한 수준에 아닙니다. 그래서 네, 그것은 유효한 해결책입니다. 나는이 일을 여러 번 해왔다. – bert

나는 '유효한 XHTML'에서처럼 유효하다는 뜻이다. 그리고 아니요, 한 페이지에 동일한 id를 가진 dom 요소가 여러 개있는 것은 유효하지 않습니다. 작동하면 브라우저 버그입니다. 어딘가에서 작동하는 모든 것이 유효한 것은 아닙니다. (완전히 다른 무언가 인 별도의 페이지에서 사용하는 경우) –

답변

관련 문제