This markup inheritance example show you how to create reusable page layouts and panel layouts.
このマークアップ継承のサンプルでは、再利用可能なページレイアウトおよびパネルレイアウトの作り方を紹介します。
In all the Wicket examples, you have to put all files in the same package directory. This means putting the markup files and the java files next to one another. It is possible to alter this behavior, but that is beyond the scope of this example. The only exception is the oblibatory web.xml file which should reside in the WEB-INF/ directory of your web application root folder.
すべてのWicketサンプルは、すべてのファイルを同じパッケージディレクトリにおいてください。
つまり、マークアップ（HTML）ファイルとJavaファイルを隣合うようにおきます。
(HTMLの配置は)他にも方法はありますが、それを説明するのはこのサンプルの範囲外です。
例外として、web.xmlファイルはアプリケーションのルートフォルダ以下にあるWEB-INF/ディレクトリにおくべきだと義務づけられています。
In this example we assume you already have read and understood the other examples which give you information on the structure and nature of Wicket applications.
Specifically read and understand the Hello, World example.
このサンプルでは読者は既に、Wicketアプリケーションの構造や性質について語られている他のサンプルを読んでおり、理解しているものと仮定します。
特に、HelloWorldサンプルについては読解しておいてください。
Page layout
In the next figure we show a standard strategy for laying out a page. A standard header, the main content body and a standard footer.
ページレイアウト
次に示す図では、ページのレイアウトについての基本的な設計を表しています。標準ヘッダ、メインコンテンツそして標準ヘッダです。
In Wicket you can achieve this using different strategies. This article focuses on one strategy: markup inheritance.
Wicketでは、異なる設計を使うってこれを実現することができます。この記事では一つの方法に着目します。それは「マークアップの継承」です。
What is markup inheritance?
In Java you can extend classes. This same concept has been fitted into the markup parsing of Java.
Markup containers that have files associated (page and panels) can inherit the markup of their super containers.
マークアップの継承とは？
Javaでは、クラスを継承することができます。これと同じコンセプトが、Javaのマークアップ解析にも当てはまります。
（ページとパネルを）関連づけたファイルをもつマークアップコンテナは、その親となるマークアップを継承することができます。
This is done using two special Wicket tags: <wicket:child> and <wicket:extend>.
In the super markup you define where the child markup should be put, and in the sub markup you delineate where the child markup starts and ends.
これは、2つの特殊なWicketタグを使って行われます。「 <wicket:child>」と「<wicket:extend>」です。
親とあなるマークアップでは、子となるマークアップを配置するべき部分を定義します。そしてサブマークアップでは、子マークアップの初めと終わりを線引きします。
Listing 1 the super markup file
リスト1 親マークアップファイル
In this markup you see two sentences that surround the wicket:child tag.
<html>
<head></head>
<body>
This is in the super markup.<br>
<wicket:child />
This is in the super markup.<br>
</body>
</html>
All markup in this file will remain when a sub class of this page is created, only the wicket:child tag will be replaced with the child markup. So if we look at the following markup:
このマークアップには、wicket:childタグで囲まれた2つのセンテンスがあります。
このファイルのすべてのマークアップは、ページのサブクラスが作られても残ります。wicket:childタグは、子マークアップによって置き換えられるだけです。
では、次のマークアップをみてください。
Listing 2 the child markup file
リスト2 子マークアップファイル
<html>
<head></head>
<body>
This is in de child markup.<br>
<wicket:extend>
This is in the child markup.<br>
</wicket:extend>
This is in the child markup.<br>
</body>
</html>
we can see the markup that should be included in the parent. Only the markup between the wicket:extend tags is included in the final page.
Take a look at the following markup which is the final markup when you would use this in a Wicket application.
親に含まれるべきマークアップを確認することができます。wicket:extendタグの間のマークアップだけが、最終的なページに含まれます。
次のマークアップを見てみましょう。このマークアップがこのWicketアプリケーションで使う最後のマークアップです。
Listing 3 the final markup
リスト3 最後のマークアップ
<html>
<head></head>
<body>
This is in the super markup.<br>
<wicket:child><wicket:extend>
This is in the child markup.<br>
</wicket:extend></wicket:child>
This is in the super markup.<br>
</body>
</html>
Here you can see that the <wicket:child /> tag has been expanded, and its contents filled with exactly the markup between the <wicket:extend> tags.
If you want to get rid of the special Wicket tags, you can disable that on the markup settings (IMarkupSettings).
ここでは、<wicket:child />タグが、継承されていることを確認できます。また、その内容は確かに<wicket:extend> タグの間の内容で埋められています。
もし特別なWicketのタグを取り除きたいなら、マークアップのセッティング（IMarkupSettings）で見せなくすることができます。
Implementing the BasePage
Now that we have seen the basics for markup inheritance, we can now take a look at the example at hand. Let's first create the base page.
ベースのページを実装する
さて、マークアップの継承について基礎部分を見てきました、さて、もうすぐサンプルができあがります。さぁ、まずはベースとなるページを作りましょう。
Listing 4 The base page's Java class
リスト4 ベースページのJavaクラス
package wicket.quickstart;import wicket.markup.html.WebPage;
import wicket.markup.html.basic.Label;
import wicket.markup.html.link.BookmarkablePageLink;public abstract class BasePage extends WebPage {
public BasePage() {
add(new BookmarkablePageLink("page1", Page1.class));
add(new BookmarkablePageLink("page2", Page2.class));
add(new Label("footer", "This is in the footer"));
}
}
The two links should go into the header, and the footer in the footer of the page.
Note that the abstract keyword isn't required, but considered a good practise. Now let's take a look at the markup for the BasePage
2つのリンクは、ヘッダとページフッターの中のフッターの中に表示されます。
「abstract」のキーワードは必須ではないことに注意してください。しかし、良い習慣だと思います。さて、ベースページのためのマークアップを見ていきましょう。
Listing 5 The base page's markup file
リスト5 ベースページのマークアップファイル
<html>
<head></head>
<body>
<div id="header">
<a href="#" wicket:id="page1">Page1</a>
<a href="#" wicket:id="page2">Page2</a>
</div>
<div id="body">
<wicket:child />
</div>
<div id="footer">
<span wicket:id="footer"></span>
</div>
</body>
</html>
In this markup file you see the specific basic layout: we have 3 div elements:
このマークアップファイルのなかでは、特有の基本レイアウトを確認できます。 3つのdivエレメントがあります。
・div id="header"
・div id="body"
・div id="footer"
Note that these aren't Wicket components, just plain markup.
We could have made them components, such as a Panel but for brevity we keep it this way.
Now that we have the BasePage finished, we can implement the two subclasses to finish this example.
これらがWicketコンポーネントではなく、ただの普通のマークアップであることに注意してください。
例えば、パネルのようなコンポーネントを作ることができます。しかも、この方法でなら簡潔さを保つことができます。
基本ページの作成はおわりました。あと2つのサブクラスサブクラスを実装すれば、このサンプルは終わりです。
Implementing the sub pages
We need to build two pages: Page1 and Page2. Each page needs its own markup file and Java class. Let's first implement Page1.
サブページの実装
Page1とPage2の2つのページを実装します。それぞれのページで、各々のマークアップファイルとJavaクラスが必要です。さあ、まずはPage1を実装しましょう。
Listing 6 Page1's Java class
リスト6 Page1のJavaクラス
In this example you see that we add a new label component to the page: label1.
package wicket.quickstart;import wicket.markup.html.basic.Label;
public class Page1 extends BasePage {
public Page1() {
add(new Label("label1", "This is in the subclass Page1"));
}
}
This component is only available for Page1, as such Page2 can define its own component hierarchy. Let's take a look at the markup for Page1:
このサンプルでは、ページのための新しいラベルコンポーネント「label1」を追加するところが確認できます。
このコンポーネントはPage1でのみ有効です。例えばPage2は独自のコンポーネント階層を定義することができます。さぁ、Page1のマークアップを見ていきましょう。
Listing 7 Page1's Markup file
リスト7 Page1のマークアップファイル
Here you see that we added the Label component in the markup between the wicket:extend tags.
<html>
<head></head>
<body>
<wicket:extend>
<h1>Page1</h1>
<span wicket:id="label1"></span>
</wicket:extend>
</body>
</html>
If we were to add the component outside those tags, Wicket will not be able to render the component in the final page.
ここでは、、マークアップのwicket:extendタグの中にラベルコンポーネントを追加するところを確認できます。
もし、それらのタグの外側にコンポーネントを追加するのであれば、Wicketは最終的なページには、コンポーネントを描画することができません。
Now, let's do the same for Page2.
さて、同じくPage2も見ていきましょう。
Listing 8 Page2's Java class
リスト8 Page2のJavaクラス
Listing 9 Page2's Markup file
package wicket.quickstart;import wicket.markup.html.basic.Label;
public class Page2 extends BasePage {
public Page2() {
add(new Label("label2", "This is in the subclass Page2"));
}
}
リスト9 Page2のマークアップファイル
In Page2 you see that we have a different component structure (label2 instead of label1), and as such that the pages are quite different.
<html>
<head></head>
<body>
<wicket:extend>
<h1>Page2</h1>
<span wicket:id="label2"></span>
</wicket:extend>
</body>
</html>
Page2では、異なるコンポーネントの構造(label1の代わりにlabel2）を確認することができます。また、したがってページは全く異なります
If you paste this code into a Wicket quickstart application, you can see it immediately working (don't forget to set the homepage to Page1 or Page2).
このコードをWicketのクイックスタートアプリケーションに貼り付けたら、すぐに動作します。（Page1 またはPage2 をホームページにセットするのを忘れないでください）
Conclusion
With markup inheritance you can get a standard layout for your application without too much hassle.
It follows the natural inheritance strategy for Java code and makes encapsulation of your component hierarchy possible.
結論
マークアップの継承で、まったく問題なくアプリケーションの基本レイアウトを得ることができます。
自然なJavaコードのための継承の設計ということになります。そしてコンポーネント階層のカプセル化を実現することもできます。
In this example we haven't touched on the other possible features of markup inheritance:
このサンプルでは、マークアップの継承の利用可能な他の機能については触れませんでした。
・contributing to the <head> section from your sub pages
・multiple layers of inheritance (this just works)
・markup inheritance used with Panel components
However, this example should get you up and running.
・サブページの<head>セクションを助ける
・複数のレイヤーの継承（これは当然動作します）
・パネルコンポーネントを使ったマークアップの継承
しかしながらこのサンプルは、あなたが立ち上げて実行してみてください。
