Wicketでページテンプレートを利用

Apache WicketでStrutsのTilesのように画面のレイアウトを共通化する方法を調べてみました。
（via Apache Wicket -> Examples -> Markup inheritance）

1. BasePage.html
まずベースとなるHTMLを作成します。ここではBasePage.htmlとします。

view plainprint?

1. <div id="header">  
2. ヘッダーです。  
3. </div>  
4. <div id="body">  
5.   <wicket:child>  
6.   ここに本文が入ります。  
7.   </wicket:child>  
8. </div>  
9. <div id="footer">  
10. フッターです。  
11. </div>  

    

    ヘッダーです。
    
    

      
      ここに本文が入ります。
      
    
    

    フッターです。
    

ポイントとなるのは<wicket:child/>です。
このタグで囲った部分が各コンテンツによって差し替えられますので、上記の場合だとヘッダーとフッターはこのままで、ボディの部分がコンテンツによって変化することになります。

2. BasePage.java
次にBasePage.htmlのページクラスを作成します。

view plainprint?

1. /** 
2.  * 共通テンプレート用のページクラスです。 
3.  * 
4.  * @author namiki 
5.  * 
6.  */  
7. public abstract class BasePage extends WebPage {  
8.     public BasePage() {  
9.     }  
10.     public BasePage(final PageParameters params) {  
11.     }  
12. }  

/**
 * 共通テンプレート用のページクラスです。
 *
 * @author namiki
 *
 */
public abstract class BasePage extends WebPage {
    public BasePage() {
    }
    public BasePage(final PageParameters params) {
    }
}

見ての通り特に何もしていません。今後、ヘッダーやフッターに共通の機能を埋め込む場合は必要となりますが、今のところは何もしないままにしておきます。

3. SubPage.html
次にBasePage.htmlにコンテンツを埋め込む側のSubPage.htmlを作成します。

view plainprint?

1. <div id="header">  
2. サブのヘッダーです。  
3. </div>  
4. <div id="body">  
5.     <wicket:extend>  
6.     テンプレートを利用したページのサンプルです。  
7.   
8.     <span wicket:id="messages"></span>  
9.     </wicket:extend>  
10. </div>  
11. <div id="footer">  
12. サブのフッターです。  
13. </div>  

    

    サブのヘッダーです。
    
    

        
        テンプレートを利用したページのサンプルです。

        
        
    
    

    サブのフッターです。
    

ポイントとなるのは<wicket:extend/>です。
BasePage.htmlの<wicket:child/>で囲まれた部分に、SubPage.htmlの<wicket:extend/>で囲まれた部分が埋め込まれます。ここでは独自のヘッダーやフッターを定義していますが、実際に動作させた場合はBasePage.htmlのヘッダー・フッターが利用されます。

4. SubPage.java
最後にSubPage.htmlのページクラスを作成します。このクラスではBasePage.javaを継承する必要があります。それによってBasePage.htmlとSubPage.htmlの継承関係を表します。

view plainprint?

1. /** 
2.  * SubPage.html用のページクラスです。 
3.  *  
4.  * @author namiki 
5.  *  
6.  */  
7. public class SubPage extends BasePage {  
8.     public HelloWicketPage(final PageParameters params) {  
9.  add(new Label("messages", "Hello, wicket world!!"));  
10.     }  
11. }  

/**
 * SubPage.html用のページクラスです。
 * 
 * @author namiki
 * 
 */
public class SubPage extends BasePage {
    public HelloWicketPage(final PageParameters params) {
 add(new Label("messages", "Hello, wicket world!!"));
    }
}

これで画面レイアウトを共通化することができました。