以下のようなWicket用のページがあったとして、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="css/default.css" type="text/css" /> <script type="text/javascript" src="js/default.js" /> <script type="text/javascript" src="js/xxx.js" /> <title>Title</title> </head> <body> <a wicket:id="topPage">Top</a> <hr/> <h1 wicket:id="titleBody">Title</h1> <div> メインコンテンツ。 </div> <hr/> (c) nigauri 2010 </body> </html> |
- ページ毎に、
<title>タグ、ページ見出し（<h1>）、メインコンテンツの部分を変えたい - 特定のページでのみ
<head>内に別途 JavaScript を追加したい - レイアウトなどそれ以外の部分は全ページで統一したい
などを行いたい場合は、ページの継承で実現する。
元となる、親ページの作成
まずは、継承元となるページを用意する。
HTMLテンプレート
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="css/default.css" type="text/css" /> <script type="text/javascript" src="js/default.js"></script> <title wicket:id="titleHead">Title</title> </head> <body> <a wicket:id="homePage">Home</a></p><br /> <hr/> <h1 wicket:id="titleBody">Title</h1> <div> <wicket:child> <p>メインコンテンツ。 </wicket:child> </div> <hr/> (c) nigauri 2010 </body> </html> |
- ページ見出しに
wicket:idの指定を追加 - メインコンテンツ部分を
<wicket:child>で囲う
まずはタイトル・見出し部分を動的に変更可能なようにする。この部分に関してはレイアウトに変更はなく、表示する文字列だけを変更すればいいので、wicket:id の指定をし、動的に値を設定できるようにする。
次にメインコンテンツの部分。ここはレイアウト自体が変更になるためここでは記述ができない。このようなサブページに丸投げする部分については <wicket:child> で囲う。このタグで囲われた部分が、これからサブページで指定するメインコンテンツ部分とまるまる入れ替わる。
ページクラス
対応するページクラスについては以下の通り。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
public abstract class ParentPage extends WebPage { // コンストラクタ protected ParentPage() { super(); // リンク設定 Link homePageLink = new Link("homePage") { @Override public void onClick() { this.setResponsePage(getApplication().getHomePage()); } }; add(homePageLink); // タイトル・見出し部分 add(new Label("titleHead", getTitle())); add(new Label("titleBody", getTitle())); } // タイトル・見出し文言を取得 abstract protected String getTitle(); } |
wicket:id="titleHead" と wicket:id="titleBody" の部分については、サブページで表示文字列を指定させ、それを取得して設定するようにする。プロパティファイルと getString(String) を使用すればもっとスマートにできるがここでは省略。
サブページの作成
HTMLテンプレート
まずはサブページ用のHTMLテンプレートを用意。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="css/default.css" type="text/css" /> <script type="text/javascript" src="js/default.js"></script> <title wicket:id="titleHead">Title</title> <wicket:head> <script type="text/javascript" src="js/subpage.js"></script> </wicket:head> </head> <body> <a wicket:id="homePage">Home</a> <hr/> <h1 wicket:id="titleBody">Title</h1> <div> <wicket:extend> これは親ページを継承したサブページです。 <p wicket:id="contents">abcde</p> </wicket:extend> </div> <hr/> (c) nigauri 2010 </body> </html> |
<head>内に追加したいタグがある場合、<wicket:head>で囲う。囲われた部分が、親ページの<head>に加えられる。今回の例では、サブページ専用 JavaScript を追加している。- 親ページの
<wicket:child>と置き換えて表示したい部分だけ、<wicket:extend>で囲う。 - 上記以外の部分はアプリケーション実行時には反映されない。
このHTMLテンプレートで本当に必要な部分は12～14行目、23～26行目だけ。それ以外の部分は無くても動作する。つまり、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/"> <head> <wicket:head> <script type="text/javascript" src="js/subpage.js"></script> </wicket:head> </head> <body> <wicket:extend> これは親ページを継承したサブページです。 <p wicket:id="contents">abcde</p> </wicket:extend> </body> </html> |
このように書いても同様に動作するし、極端な話、
|
1 2 3 4 5 6 7 8 |
<wicket:head> <script type="text/javascript" src="subpage.js"></script> </wicket:head> <wicket:extend> これは親ページを継承したサブページです。 <p wicket:id="contents">abcde</p> </wicket:extend> |
テンプレートの中身がこれだけでも動くことは動く。しかしこれではサブページの HTML テンプレートを Web ブラウザで開きレイアウトを確認する…ということができなくなってしまう。感想でも述べたように、テンプレートが正しい HTML であるというところが売りの一つだと思っているので、サブページに記述された共通部分はアプリケーションとしては本来不要だとしても、メンテナンスなどを考え消さずに記述したままにしておくことをオススメする。
ページクラス
クラスのほうは以下の通り。大したことはしていない。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
public class SubPage extends ParentPage { // コンストラクタ public SubPage() { super(); // メインコンテンツ部分 add(new Label("contents", "めいん")); } @Override protected String getTitle() { return "さぶぺーじ"; } } |
実際に表示させてみる
IEで表示させると、以下のようになる。
