步驟一.建置一個表頭功能,HeaderPanelExamples.html & HeaderPanelExamples.java
<html>
<body>
<wicket:panel>
<form wicket:id="form">
<div wicket:id="hello">這裡顯示header</div>
</form>
</wicket:panel>
</body>
</html>
package wicket.examples.html.body.form.panel;
import wicket.markup.html.basic.Label;
import wicket.markup.html.form.Form;
import wicket.markup.html.panel.Panel;
public class HeaderPanelExamples extends Panel {
public HeaderPanelExamples(String id){
super(id);
Form cForm = new Form("form");
cForm.add(new Label("hello","這是Header"));
this.add(cForm);
}
}
步驟二.建置一個表身功能,FooterPanelExamples.html & FooterPanelExamples.java
<html>
<body>
<wicket:panel>
<form wicket:id="form">
<div wicket:id="hello">這裡顯示 Footer</div>
</form>
</wicket:panel>
</body>
</html>
package wicket.examples.html.body.form.panel;
import wicket.markup.html.basic.Label;
import wicket.markup.html.form.Form;
import wicket.markup.html.panel.Panel;
public class FooterPanelExamples extends Panel {
public FooterPanelExamples(String id){
super(id);
Form cForm = new Form("form");
cForm.add(new Label("hello","這裡顯示Footer"));
this.add(cForm);
}
}
步驟三.建置一主要的組合功能,PanelExamples.html & PanelExamples.java
<html>
<body>
<form wicket:id="form">
<div id="header" wicket:id="header">id "header" 的內容放在這裡</div>
<div id="footer" wicket:id="footer">id "footer" 的內容放在這裡</div>
</form>
</body>
</html>
package wicket.examples.html.body.form.panel;
import wicket.markup.html.WebPage;
import wicket.markup.html.form.Form;
public class PanelExamples extends WebPage {
public PanelExamples(){
super();
Form cForm = new Form("form");
cForm.add(new HeaderPanelExamples("header"));
cForm.add(new FooterPanelExamples("footer"));
this.add(cForm);
}
}
步驟四.修改Examples.html & Examples.java
...
<tr>
<td><a wicket:id="Examples11">show PanelExamplesPage</a></td>
</tr>
...
...
add(new PageLink("Examples11",PanelExamples.class));
...
沒有留言:
張貼留言