You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@wicket.apache.org by mg...@apache.org on 2014/07/19 14:26:15 UTC
svn commit: r1611904 [13/15] - in /wicket/common/site/trunk/_site: ./
2009/07/30/ 2009/08/21/ 2009/10/12/ 2009/10/24/ 2009/12/13/ 2009/12/21/
2010/02/01/ 2010/03/05/ 2010/05/03/ 2010/05/24/ 2010/08/04/ 2010/08/11/
2010/08/24/ 2010/09/09/ 2010/09/17/ 20...
Modified: wicket/common/site/trunk/_site/learn/examples/markupinheritance.html
URL: http://svn.apache.org/viewvc/wicket/common/site/trunk/_site/learn/examples/markupinheritance.html?rev=1611904&r1=1611903&r2=1611904&view=diff
==============================================================================
--- wicket/common/site/trunk/_site/learn/examples/markupinheritance.html (original)
+++ wicket/common/site/trunk/_site/learn/examples/markupinheritance.html Sat Jul 19 12:26:11 2014
@@ -187,173 +187,223 @@
<div id="contentbody">
<h1>Creating layouts using markup inheritance</h1>
- <p>This markup inheritance example show you how to create reusable page layouts and panel layouts.</p>
+ <p>This markup inheritance example show you how to create reusable page layouts
+and panel layouts.</p>
<p><a href="http://wicket.apache.org/screencasts/ApacheWicket_MarkupInheritence.avi">Watch the Screencast</a></p>
-<p>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 obligatory <code>web.xml</code> file which should reside in the <code>WEB-INF/</code> directory of your web application root folder.</p>
+<p>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 obligatory <code>web.xml</code> file which
+should reside in the <code>WEB-INF/</code> directory of your web application root
+folder.</p>
+
+<p>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 <a href="helloworld.html">Hello, World
+example</a>.</p>
-<p>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 <a href="helloworld.html">Hello, World example</a>.</p>
+<h2 id="page-layout">Page layout</h2>
-<h2 id="page_layout">Page layout</h2>
-
-<p>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.</p>
+<p>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.</p>
<p><img src="markupinheritance1.png" alt="Markup inheritance diagram" /></p>
-<p>In Wicket you can achieve this using different strategies. This article focuses on one strategy: markup inheritance.</p>
+<p>In Wicket you can achieve this using different strategies. This article
+focuses on one strategy: markup inheritance.</p>
-<h2 id="what_is_markup_inheritance">What is markup inheritance?</h2>
+<h2 id="what-is-markup-inheritance">What is markup inheritance?</h2>
-<p>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.</p>
+<p>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.</p>
+
+<p>This is done using two special Wicket tags: <code><wicket:child></code> and
+<code><wicket:extend></code>. 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.</p>
+
+<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><html></span>
+ <span class="nt"><head></head></span>
+ <span class="nt"><body></span>
+ This is in the super markup.<span class="nt"><br></span>
+ <span class="nt"><wicket:child</span> <span class="nt">/></span>
+ This is in the super markup.<span class="nt"><br></span>
+ <span class="nt"></body></span>
+<span class="nt"></html></span></code></pre></div>
+
+<p>In this markup you see two sentences that surround the <code><wicket:child></code> tag.
+All markup in this file will remain when a sub class of this page is created,
+only the <code><wicket:child></code> tag will be replaced with the child markup. So if we
+look at the following markup:</p>
+
+<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><html></span>
+<span class="nt"><head></head></span>
+<span class="nt"><body></span>
+ This is in de child markup.<span class="nt"><br></span>
+ <span class="nt"><wicket:extend></span>
+ This is in the child markup.<span class="nt"><br></span>
+ <span class="nt"></wicket:extend></span>
+ This is in the child markup.<span class="nt"><br></span>
+<span class="nt"></body></span>
+<span class="nt"></html></span></code></pre></div>
+
+<p>we can see the markup that should be included in the parent. Only the markup
+between the <code><wicket:extend></code> 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.</p>
+
+<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><html></span>
+<span class="nt"><head></head></span>
+<span class="nt"><body></span>
+ This is in the super markup.<span class="nt"><br></span>
+ <span class="nt"><wicket:child><wicket:extend></span>
+ This is in the child markup.<span class="nt"><br></span>
+ <span class="nt"></wicket:extend></wicket:child></span>
+ This is in the super markup.<span class="nt"><br></span>
+<span class="nt"></body></span>
+<span class="nt"></html></span></code></pre></div>
+
+<p>Here you can see that the <code><wicket:child /></code> tag has been expanded, and its
+contents filled with exactly the markup between the <code><wicket:extend></code> tags.
+If you want to get rid of the special Wicket tags, you can disable that on
+the markup settings
+(<a href="http://wicketframework.org/api/wicket/settings/IMarkupSettings">IMarkupSettings</a>).</p>
+
+<h2 id="implementing-the-basepage">Implementing the BasePage</h2>
+
+<p>Now that we have seen the basics for markup inheritance, we can take a
+look at the example at hand. Letâs first create the base page.</p>
+
+<div class="highlight"><pre><code class="language-java" data-lang="java"><span class="kn">package</span> <span class="n">wicket</span><span class="o">.</span><span class="na">quickstart</span><span class="o">;</span>
+
+<span class="kn">import</span> <span class="nn">wicket.markup.html.WebPage</span><span class="o">;</span>
+<span class="kn">import</span> <span class="nn">wicket.markup.html.basic.Label</span><span class="o">;</span>
+<span class="kn">import</span> <span class="nn">wicket.markup.html.link.BookmarkablePageLink</span><span class="o">;</span>
+
+<span class="kd">public</span> <span class="kd">abstract</span> <span class="kd">class</span> <span class="nc">BasePage</span> <span class="kd">extends</span> <span class="n">WebPage</span> <span class="o">{</span>
+ <span class="kd">public</span> <span class="nf">BasePage</span><span class="o">()</span> <span class="o">{</span>
+ <span class="n">add</span><span class="o">(</span><span class="k">new</span> <span class="nf">BookmarkablePageLink</span><span class="o">(</span><span class="s">"page1"</span><span class="o">,</span> <span class="n">Page1</span><span class="o">.</span><span class="na">class</span><span class="o">));</span>
+ <span class="n">add</span><span class="o">(</span><span class="k">new</span> <span class="nf">BookmarkablePageLink</span><span class="o">(</span><span class="s">"page2"</span><span class="o">,</span> <span class="n">Page2</span><span class="o">.</span><span class="na">class</span><span class="o">));</span>
+ <span class="n">add</span><span class="o">(</span><span class="k">new</span> <span class="nf">Label</span><span class="o">(</span><span class="s">"footer"</span><span class="o">,</span> <span class="s">"This is in the footer"</span><span class="o">));</span>
+ <span class="o">}</span>
+<span class="o">}</span></code></pre></div>
+
+<p>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</p>
+
+<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><html></span>
+<span class="nt"><head></head></span>
+<span class="nt"><body></span>
+<span class="nt"><div</span> <span class="na">id=</span><span class="s">"header"</span><span class="nt">></span>
+ <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">wicket:id=</span><span class="s">"page1"</span><span class="nt">></span>Page1<span class="nt"></a></span>
+ <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">wicket:id=</span><span class="s">"page2"</span><span class="nt">></span>Page2<span class="nt"></a></span>
+<span class="nt"></div></span>
+<span class="nt"><div</span> <span class="na">id=</span><span class="s">"body"</span><span class="nt">></span>
+<span class="nt"><wicket:child</span> <span class="nt">/></span>
+<span class="nt"></div></span>
+<span class="nt"><div</span> <span class="na">id=</span><span class="s">"footer"</span><span class="nt">></span>
+ <span class="nt"><span</span> <span class="na">wicket:id=</span><span class="s">"footer"</span><span class="nt">></span></span>
+<span class="nt"></div></span>
+<span class="nt"></body></span>
+<span class="nt"></html></span></code></pre></div>
-<p>This is done using two special Wicket tags: <code><wicket:child></code> and <code><wicket:extend></code>. 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.</p>
-<div class='highlight'><pre><code class='html'><span class='nt'><html></span>
- <span class='nt'><head></head></span>
- <span class='nt'><body></span>
- This is in the super markup.<span class='nt'><br></span>
- <span class='nt'><wicket:child</span> <span class='nt'>/></span>
- This is in the super markup.<span class='nt'><br></span>
- <span class='nt'></body></span>
-<span class='nt'></html></span>
-</code></pre></div>
-<p>In this markup you see two sentences that surround the <code><wicket:child></code> tag. All markup in this file will remain when a sub class of this page is created, only the <code><wicket:child></code> tag will be replaced with the child markup. So if we look at the following markup:</p>
-<div class='highlight'><pre><code class='html'><span class='nt'><html></span>
-<span class='nt'><head></head></span>
-<span class='nt'><body></span>
- This is in de child markup.<span class='nt'><br></span>
- <span class='nt'><wicket:extend></span>
- This is in the child markup.<span class='nt'><br></span>
- <span class='nt'></wicket:extend></span>
- This is in the child markup.<span class='nt'><br></span>
-<span class='nt'></body></span>
-<span class='nt'></html></span>
-</code></pre></div>
-<p>we can see the markup that should be included in the parent. Only the markup between the <code><wicket:extend></code> 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.</p>
-<div class='highlight'><pre><code class='html'><span class='nt'><html></span>
-<span class='nt'><head></head></span>
-<span class='nt'><body></span>
- This is in the super markup.<span class='nt'><br></span>
- <span class='nt'><wicket:child><wicket:extend></span>
- This is in the child markup.<span class='nt'><br></span>
- <span class='nt'></wicket:extend></wicket:child></span>
- This is in the super markup.<span class='nt'><br></span>
-<span class='nt'></body></span>
-<span class='nt'></html></span>
-</code></pre></div>
-<p>Here you can see that the <code><wicket:child /></code> tag has been expanded, and its contents filled with exactly the markup between the <code><wicket:extend></code> tags. If you want to get rid of the special Wicket tags, you can disable that on the markup settings (<a href="http://wicketframework.org/api/wicket/settings/IMarkupSettings">IMarkupSettings</a>).</p>
-
-<h2 id="implementing_the_basepage">Implementing the BasePage</h2>
-
-<p>Now that we have seen the basics for markup inheritance, we can take a look at the example at hand. Letâs first create the base page.</p>
-<div class='highlight'><pre><code class='java'><span class='kn'>package</span> <span class='n'>wicket</span><span class='o'>.</span><span class='na'>quickstart</span><span class='o'>;</span>
-
-<span class='kn'>import</span> <span class='nn'>wicket.markup.html.WebPage</span><span class='o'>;</span>
-<span class='kn'>import</span> <span class='nn'>wicket.markup.html.basic.Label</span><span class='o'>;</span>
-<span class='kn'>import</span> <span class='nn'>wicket.markup.html.link.BookmarkablePageLink</span><span class='o'>;</span>
-
-<span class='kd'>public</span> <span class='kd'>abstract</span> <span class='kd'>class</span> <span class='nc'>BasePage</span> <span class='kd'>extends</span> <span class='n'>WebPage</span> <span class='o'>{</span>
- <span class='kd'>public</span> <span class='nf'>BasePage</span><span class='o'>()</span> <span class='o'>{</span>
- <span class='n'>add</span><span class='o'>(</span><span class='k'>new</span> <span class='n'>BookmarkablePageLink</span><span class='o'>(</span><span class='s'>"page1"</span><span class='o'>,</span> <span class='n'>Page1</span><span class='o'>.</span><span class='na'>class</span><span class='o'>));</span>
- <span class='n'>add</span><span class='o'>(</span><span class='k'>new</span> <span class='n'>BookmarkablePageLink</span><span class='o'>(</span><span class='s'>"page2"</span><span class='o'>,</span> <span class='n'>Page2</span><span class='o'>.</span><span class='na'>class</span><span class='o'>));</span>
- <span class='n'>add</span><span class='o'>(</span><span class='k'>new</span> <span class='n'>Label</span><span class='o'>(</span><span class='s'>"footer"</span><span class='o'>,</span> <span class='s'>"This is in the footer"</span><span class='o'>));</span>
- <span class='o'>}</span>
-<span class='o'>}</span>
-</code></pre></div>
-<p>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</p>
-<div class='highlight'><pre><code class='html'><span class='nt'><html></span>
-<span class='nt'><head></head></span>
-<span class='nt'><body></span>
-<span class='nt'><div</span> <span class='na'>id=</span><span class='s'>"header"</span><span class='nt'>></span>
- <span class='nt'><a</span> <span class='na'>href=</span><span class='s'>"#"</span> <span class='na'>wicket:id=</span><span class='s'>"page1"</span><span class='nt'>></span>Page1<span class='nt'></a></span>
- <span class='nt'><a</span> <span class='na'>href=</span><span class='s'>"#"</span> <span class='na'>wicket:id=</span><span class='s'>"page2"</span><span class='nt'>></span>Page2<span class='nt'></a></span>
-<span class='nt'></div></span>
-<span class='nt'><div</span> <span class='na'>id=</span><span class='s'>"body"</span><span class='nt'>></span>
-<span class='nt'><wicket:child</span> <span class='nt'>/></span>
-<span class='nt'></div></span>
-<span class='nt'><div</span> <span class='na'>id=</span><span class='s'>"footer"</span><span class='nt'>></span>
- <span class='nt'><span</span> <span class='na'>wicket:id=</span><span class='s'>"footer"</span><span class='nt'>></span></span>
-<span class='nt'></div></span>
-<span class='nt'></body></span>
-<span class='nt'></html></span>
-</code></pre></div>
-<p>In this markup file you see the specific basic layout: we have 3 div elements:</p>
+<p>In this markup file you see the specific basic layout: we have 3 div
+elements:</p>
<ol>
-<li><code><div id="header">...</div></code></li>
-
-<li><code><div id="body">...</div></code></li>
-
-<li><code><div id="footer">...</div></code></li>
+ <li><code><div id="header">...</div></code></li>
+ <li><code><div id="body">...</div></code></li>
+ <li><code><div id="footer">...</div></code></li>
</ol>
-<p>Note that these arenât Wicket components, just plain markup. We could have made them components, such as a <code>Panel</code> but for brevity we keep it this way. Now that we have the <code>BasePage</code> finished, we can implement the two subclasses to finish this example.</p>
-
-<h2 id="implementing_the_sub_pages">Implementing the sub pages</h2>
-
-<p>We need to build two pages: <code>Page1</code> and <code>Page2</code>. Each page needs its own markup file and Java class. Letâs first implement <code>Page1</code>.</p>
-<div class='highlight'><pre><code class='java'><span class='kn'>package</span> <span class='n'>wicket</span><span class='o'>.</span><span class='na'>quickstart</span><span class='o'>;</span>
+<p>Note that these arenât Wicket components, just plain markup. We could have
+made them components, such as a <code>Panel</code> but for brevity we keep it this way.
+Now that we have the <code>BasePage</code> finished, we can implement the two subclasses
+to finish this example.</p>
+
+<h2 id="implementing-the-sub-pages">Implementing the sub pages</h2>
+
+<p>We need to build two pages: <code>Page1</code> and <code>Page2</code>. Each page needs its own
+markup file and Java class. Letâs first implement <code>Page1</code>.</p>
+
+<div class="highlight"><pre><code class="language-java" data-lang="java"><span class="kn">package</span> <span class="n">wicket</span><span class="o">.</span><span class="na">quickstart</span><span class="o">;</span>
+
+<span class="kn">import</span> <span class="nn">wicket.markup.html.basic.Label</span><span class="o">;</span>
+
+<span class="kd">public</span> <span class="kd">class</span> <span class="nc">Page1</span> <span class="kd">extends</span> <span class="n">BasePage</span> <span class="o">{</span>
+ <span class="kd">public</span> <span class="nf">Page1</span><span class="o">()</span> <span class="o">{</span>
+ <span class="n">add</span><span class="o">(</span><span class="k">new</span> <span class="nf">Label</span><span class="o">(</span><span class="s">"label1"</span><span class="o">,</span> <span class="s">"This is in the subclass Page1"</span><span class="o">));</span>
+ <span class="o">}</span>
+<span class="o">}</span></code></pre></div>
+
+<p>In this example you see that we add a new label component to the page:
+<code>label1</code>. This component is only available for <code>Page1</code>, as such <code>Page2</code> can
+define its own component hierarchy. Letâs take a look at the markup for
+<code>Page1</code>:</p>
+
+<div class="highlight"><pre><code class="language-java" data-lang="java"><span class="o"><</span><span class="n">html</span><span class="o">></span>
+<span class="o"><</span><span class="n">head</span><span class="o">></</span><span class="n">head</span><span class="o">></span>
+<span class="o"><</span><span class="n">body</span><span class="o">></span>
+<span class="o"><</span><span class="nl">wicket:</span><span class="n">extend</span><span class="o">></span>
+ <span class="o"><</span><span class="n">h1</span><span class="o">></span><span class="n">Page1</span><span class="o"></</span><span class="n">h1</span><span class="o">></span>
+ <span class="o"><</span><span class="n">span</span> <span class="nl">wicket:</span><span class="n">id</span><span class="o">=</span><span class="s">"label1"</span><span class="o">></</span><span class="n">span</span><span class="o">></span>
+<span class="o"></</span><span class="nl">wicket:</span><span class="n">extend</span><span class="o">></span>
+<span class="o"></</span><span class="n">body</span><span class="o">></span>
+<span class="o"></</span><span class="n">html</span><span class="o">></span></code></pre></div>
+
+<p>Here you see that we added the <code>Label</code> component in the markup between the
+<code><wicket:extend></code> tags. If we were to add the component outside those tags,
+Wicket will not be able to render the component in the final page.</p>
-<span class='kn'>import</span> <span class='nn'>wicket.markup.html.basic.Label</span><span class='o'>;</span>
+<p>Now, letâs do the same for <code>Page2</code>.</p>
-<span class='kd'>public</span> <span class='kd'>class</span> <span class='nc'>Page1</span> <span class='kd'>extends</span> <span class='n'>BasePage</span> <span class='o'>{</span>
- <span class='kd'>public</span> <span class='nf'>Page1</span><span class='o'>()</span> <span class='o'>{</span>
- <span class='n'>add</span><span class='o'>(</span><span class='k'>new</span> <span class='n'>Label</span><span class='o'>(</span><span class='s'>"label1"</span><span class='o'>,</span> <span class='s'>"This is in the subclass Page1"</span><span class='o'>));</span>
- <span class='o'>}</span>
-<span class='o'>}</span>
-</code></pre></div>
-<p>In this example you see that we add a new label component to the page: <code>label1</code>. This component is only available for <code>Page1</code>, as such <code>Page2</code> can define its own component hierarchy. Letâs take a look at the markup for <code>Page1</code>:</p>
-<div class='highlight'><pre><code class='java'><span class='o'><</span><span class='n'>html</span><span class='o'>></span>
-<span class='o'><</span><span class='n'>head</span><span class='o'>></</span><span class='n'>head</span><span class='o'>></span>
-<span class='o'><</span><span class='n'>body</span><span class='o'>></span>
-<span class='o'><</span><span class='nl'>wicket:</span><span class='n'>extend</span><span class='o'>></span>
- <span class='o'><</span><span class='n'>h1</span><span class='o'>></span><span class='n'>Page1</span><span class='o'></</span><span class='n'>h1</span><span class='o'>></span>
- <span class='o'><</span><span class='n'>span</span> <span class='nl'>wicket:</span><span class='n'>id</span><span class='o'>=</span><span class='s'>"label1"</span><span class='o'>></</span><span class='n'>span</span><span class='o'>></span>
-<span class='o'></</span><span class='nl'>wicket:</span><span class='n'>extend</span><span class='o'>></span>
-<span class='o'></</span><span class='n'>body</span><span class='o'>></span>
-<span class='o'></</span><span class='n'>html</span><span class='o'>></span>
-</code></pre></div>
-<p>Here you see that we added the <code>Label</code> component in the markup between the <code><wicket:extend></code> tags. If we were to add the component outside those tags, Wicket will not be able to render the component in the final page.</p>
+<div class="highlight"><pre><code class="language-java" data-lang="java"><span class="kn">package</span> <span class="n">wicket</span><span class="o">.</span><span class="na">quickstart</span><span class="o">;</span>
-<p>Now, letâs do the same for <code>Page2</code>.</p>
-<div class='highlight'><pre><code class='java'><span class='kn'>package</span> <span class='n'>wicket</span><span class='o'>.</span><span class='na'>quickstart</span><span class='o'>;</span>
+<span class="kn">import</span> <span class="nn">wicket.markup.html.basic.Label</span><span class="o">;</span>
-<span class='kn'>import</span> <span class='nn'>wicket.markup.html.basic.Label</span><span class='o'>;</span>
+<span class="kd">public</span> <span class="kd">class</span> <span class="nc">Page2</span> <span class="kd">extends</span> <span class="n">BasePage</span> <span class="o">{</span>
+ <span class="kd">public</span> <span class="nf">Page2</span><span class="o">()</span> <span class="o">{</span>
+ <span class="n">add</span><span class="o">(</span><span class="k">new</span> <span class="nf">Label</span><span class="o">(</span><span class="s">"label2"</span><span class="o">,</span> <span class="s">"This is in the subclass Page2"</span><span class="o">));</span>
+ <span class="o">}</span>
+<span class="o">}</span></code></pre></div>
+
+<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><html></span>
+<span class="nt"><head></head></span>
+<span class="nt"><body></span>
+<span class="nt"><wicket:extend></span>
+ <span class="nt"><h1></span>Page2<span class="nt"></h1></span>
+ <span class="nt"><span</span> <span class="na">wicket:id=</span><span class="s">"label2"</span><span class="nt">></span></span>
+<span class="nt"></wicket:extend></span>
+<span class="nt"></body></span>
+<span class="nt"></html></span></code></pre></div>
-<span class='kd'>public</span> <span class='kd'>class</span> <span class='nc'>Page2</span> <span class='kd'>extends</span> <span class='n'>BasePage</span> <span class='o'>{</span>
- <span class='kd'>public</span> <span class='nf'>Page2</span><span class='o'>()</span> <span class='o'>{</span>
- <span class='n'>add</span><span class='o'>(</span><span class='k'>new</span> <span class='n'>Label</span><span class='o'>(</span><span class='s'>"label2"</span><span class='o'>,</span> <span class='s'>"This is in the subclass Page2"</span><span class='o'>));</span>
- <span class='o'>}</span>
-<span class='o'>}</span>
-</code></pre></div><div class='highlight'><pre><code class='html'><span class='nt'><html></span>
-<span class='nt'><head></head></span>
-<span class='nt'><body></span>
-<span class='nt'><wicket:extend></span>
- <span class='nt'><h1></span>Page2<span class='nt'></h1></span>
- <span class='nt'><span</span> <span class='na'>wicket:id=</span><span class='s'>"label2"</span><span class='nt'>></span></span>
-<span class='nt'></wicket:extend></span>
-<span class='nt'></body></span>
-<span class='nt'></html></span>
-</code></pre></div>
-<p>In <code>Page2</code> you see that we have a different component structure (<code>label2</code> instead of <code>label1</code>), and as such that the pages are quite different.</p>
+<p>In <code>Page2</code> you see that we have a different component structure (<code>label2</code>
+instead of <code>label1</code>), and as such that the pages are quite different.</p>
-<p>If you paste this code into a Wicket quickstart application, you can see it immediately working (donât forget to set the homepage to <code>Page1</code> or <code>Page2</code>).</p>
+<p>If you paste this code into a Wicket quickstart application, you can see it
+immediately working (donât forget to set the homepage to <code>Page1</code> or <code>Page2</code>).</p>
<h2 id="conclusion">Conclusion</h2>
-<p>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.</p>
+<p>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.</p>
-<p>In this example we havenât touched on the other possible features of markup inheritance:</p>
+<p>In this example we havenât touched on the other possible features of markup
+inheritance:</p>
<ul>
-<li>contributing to the <code><head></code> section from your sub pages</li>
-
-<li>multiple layers of inheritance (this just works)</li>
-
-<li>markup inheritance used with <code>Panel</code> components</li>
+ <li>contributing to the <code><head></code> section from your sub pages</li>
+ <li>multiple layers of inheritance (this just works)</li>
+ <li>markup inheritance used with <code>Panel</code> components</li>
</ul>
<p>However, this example should get you up and running.</p>
+
</div>
<div id="clearer"></div>
<div id="footer"><span>
Modified: wicket/common/site/trunk/_site/learn/examples/navomatic.html
URL: http://svn.apache.org/viewvc/wicket/common/site/trunk/_site/learn/examples/navomatic.html?rev=1611904&r1=1611903&r2=1611904&view=diff
==============================================================================
--- wicket/common/site/trunk/_site/learn/examples/navomatic.html (original)
+++ wicket/common/site/trunk/_site/learn/examples/navomatic.html Sat Jul 19 12:26:11 2014
@@ -187,11 +187,18 @@
<div id="contentbody">
<h1>Navomatic</h1>
- <p>The Navomatic application shows the use of border components and links to create a navigation component that can easily be dropped into any web page.</p>
+ <p>The Navomatic application shows the use of border components and links to
+create a navigation component that can easily be dropped into any web page.</p>
-<p>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 obligatory web.xml file which should reside in the WEB-INF/ directory of your web application root folder.</p>
-
-<p>The link in the navigation to the current page is automatically turned into italic text to indicate to the user what page they are on. The first screen capture shows the Page1 page with the Page1 link in italics.</p>
+<p>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 obligatory web.xml file which
+should reside in the WEB-INF/ directory of your web application root folder.</p>
+
+<p>The link in the navigation to the current page is automatically turned into
+italic text to indicate to the user what page they are on. The first screen
+capture shows the Page1 page with the Page1 link in italics.</p>
<p><img src="navomatic1.png" alt="Figure 1" /></p>
@@ -199,176 +206,229 @@
<p><img src="navomatic2.png" alt="Figure 2" /></p>
-<p>As you can see, Page1 has no special style anymore, and Page2 is now displayed in italics. Also the message box shows that we are viewing Page2 instead of Page1.</p>
-
-<h2 id="navigation_component">Navigation component</h2>
-
-<p>To create a reusable navigation component we are going to use a <code>org.apache.wicket.markup.html.border.Border</code> component. From the Border Javadoc:</p>
+<p>As you can see, Page1 has no special style anymore, and Page2 is now displayed
+in italics. Also the message box shows that we are viewing Page2 instead of
+Page1.</p>
+
+<h2 id="navigation-component">Navigation component</h2>
+
+<p>To create a reusable navigation component we are going to use a
+<code>org.apache.wicket.markup.html.border.Border</code> component. From the Border
+Javadoc:</p>
<blockquote>
-<p>A border component has associated markup which is drawn and determines placement of any markup and/or components nested within the border component.</p>
+ <p>A border component has associated markup which is drawn and determines
+placement of any markup and/or components nested within the border
+component.</p>
</blockquote>
-<p>The portion of the borderâs associated markup file which is to be used in rendering the border is denoted by a <code><wicket:border></code> tag. The children of the border component instance are then inserted into this markup, replacing the first <code><wicket:body/></code> tag in the borderâs associated markup.</p>
+<p>The portion of the borderâs associated markup file which is to be used in
+rendering the border is denoted by a <code><wicket:border></code> tag. The children of the
+border component instance are then inserted into this markup, replacing the
+first <code><wicket:body/></code> tag in the borderâs associated markup.</p>
+
+<p>For example, here is markup for a simple Border subclass, a usage of that
+border, and the markup which would be output on rendering:</p>
+
+<h3 id="border-markup">Border markup</h3>
+
+<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><html></span>
+<span class="nt"><body></span>
+ <span class="nt"><wicket:border></span>
+ First <span class="nt"><wicket:body/></span> Last
+ <span class="nt"></wicket:border></span>
+<span class="nt"></body></span>
+<span class="nt"></html></span></code></pre></div>
+
+<h3 id="border-usage">Border usage</h3>
+
+<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><html></span>
+<span class="nt"><body></span>
+ <span class="nt"><span</span> <span class="na">wicket:id =</span><span class="err"> </span><span class="s">"myBorder"</span><span class="nt">></span>
+ Middle
+ <span class="nt"></span></span>
+<span class="nt"></body></span>
+<span class="nt"></html></span></code></pre></div>
-<p>For example, here is markup for a simple Border subclass, a usage of that border, and the markup which would be output on rendering:</p>
+<h3 id="rendered-markup">Rendered markup</h3>
-<h3 id="border_markup">Border markup</h3>
-<div class='highlight'><pre><code class='html'><span class='nt'><html></span>
-<span class='nt'><body></span>
- <span class='nt'><wicket:border></span>
- First <span class='nt'><wicket:body/></span> Last
- <span class='nt'></wicket:border></span>
-<span class='nt'></body></span>
-<span class='nt'></html></span>
-</code></pre></div>
-<h3 id="border_usage">Border usage</h3>
-<div class='highlight'><pre><code class='html'><span class='nt'><html></span>
-<span class='nt'><body></span>
- <span class='nt'><span</span> <span class='na'>wicket:id =</span><span class='err'> </span><span class='s'>"myBorder"</span><span class='nt'>></span>
- Middle
- <span class='nt'></span></span>
-<span class='nt'></body></span>
-<span class='nt'></html></span>
-</code></pre></div>
-<h3 id="rendered_markup">Rendered markup</h3>
-<div class='highlight'><pre><code class='html'><span class='nt'><html></span>
-<span class='nt'><body></span>
+<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><html></span>
+<span class="nt"><body></span>
First Middle Last
-<span class='nt'></body></span>
-<span class='nt'></html></span>
-</code></pre></div>
-<p>In other words, the markup around the <code><wicket:body/></code> tag in the border component is sort of âwrapped aroundâ the body of the <code><span></code> tag where the border is used. This seems simple in this example, but keep in mind that nested components and even nested borders can appear anywhere in either markup file. This can be used to create quite complex effects with relatively little code.</p>
+<span class="nt"></body></span>
+<span class="nt"></html></span></code></pre></div>
+
+<p>In other words, the markup around the <code><wicket:body/></code> tag in the border
+component is sort of âwrapped aroundâ the body of the <code><span></code> tag where the
+border is used. This seems simple in this example, but keep in mind that
+nested components and even nested borders can appear anywhere in either markup
+file. This can be used to create quite complex effects with relatively little
+code.</p>
<h3 id="navomaticapplicationjava">NavomaticApplication.java</h3>
-<p>Just as in the Hello World! example, we need to define our application. In this case, we set Page1 to be our home page.</p>
-<div class='highlight'><pre><code class='java'><span class='kn'>package</span> <span class='n'>org</span><span class='o'>.</span><span class='na'>apache</span><span class='o'>.</span><span class='na'>wicket</span><span class='o'>.</span><span class='na'>examples</span><span class='o'>.</span><span class='na'>navomatic</span><span class='o'>;</span>
+<p>Just as in the Hello World! example, we need to define our application. In
+this case, we set Page1 to be our home page.</p>
+
+<div class="highlight"><pre><code class="language-java" data-lang="java"><span class="kn">package</span> <span class="n">org</span><span class="o">.</span><span class="na">apache</span><span class="o">.</span><span class="na">wicket</span><span class="o">.</span><span class="na">examples</span><span class="o">.</span><span class="na">navomatic</span><span class="o">;</span>
-<span class='kn'>import</span> <span class='nn'>org.apache.wicket.protocol.http.WebApplication</span><span class='o'>;</span>
+<span class="kn">import</span> <span class="nn">org.apache.wicket.protocol.http.WebApplication</span><span class="o">;</span>
-<span class='kd'>public</span> <span class='kd'>class</span> <span class='nc'>NavomaticApplication</span> <span class='kd'>extends</span> <span class='n'>WebApplication</span> <span class='o'>{</span>
- <span class='kd'>public</span> <span class='nf'>NavomaticApplication</span><span class='o'>()</span> <span class='o'>{</span>
- <span class='o'>}</span>
+<span class="kd">public</span> <span class="kd">class</span> <span class="nc">NavomaticApplication</span> <span class="kd">extends</span> <span class="n">WebApplication</span> <span class="o">{</span>
+ <span class="kd">public</span> <span class="nf">NavomaticApplication</span><span class="o">()</span> <span class="o">{</span>
+ <span class="o">}</span>
- <span class='kd'>public</span> <span class='n'>Class</span> <span class='nf'>getHomePage</span><span class='o'>()</span> <span class='o'>{</span>
- <span class='k'>return</span> <span class='n'>Page1</span><span class='o'>.</span><span class='na'>class</span><span class='o'>;</span>
- <span class='o'>}</span>
-<span class='o'>}</span>
-</code></pre></div>
+ <span class="kd">public</span> <span class="n">Class</span> <span class="nf">getHomePage</span><span class="o">()</span> <span class="o">{</span>
+ <span class="k">return</span> <span class="n">Page1</span><span class="o">.</span><span class="na">class</span><span class="o">;</span>
+ <span class="o">}</span>
+<span class="o">}</span></code></pre></div>
+
<h3 id="page1java">Page1.java</h3>
<p>The Page1 Java and HTML files look like this:</p>
-<div class='highlight'><pre><code class='java'><span class='kn'>package</span> <span class='n'>wicket</span><span class='o'>.</span><span class='na'>examples</span><span class='o'>.</span><span class='na'>navomatic</span><span class='o'>;</span>
-<span class='kn'>import</span> <span class='nn'>org.apache.wicket.markup.html.WebPage</span><span class='o'>;</span>
+<div class="highlight"><pre><code class="language-java" data-lang="java"><span class="kn">package</span> <span class="n">wicket</span><span class="o">.</span><span class="na">examples</span><span class="o">.</span><span class="na">navomatic</span><span class="o">;</span>
+
+<span class="kn">import</span> <span class="nn">org.apache.wicket.markup.html.WebPage</span><span class="o">;</span>
+
+<span class="kd">public</span> <span class="kd">class</span> <span class="nc">Page1</span> <span class="kd">extends</span> <span class="n">WebPage</span> <span class="o">{</span>
+ <span class="kd">public</span> <span class="nf">Page1</span><span class="o">()</span> <span class="o">{</span>
+ <span class="n">add</span><span class="o">(</span><span class="k">new</span> <span class="nf">NavomaticBorder</span><span class="o">(</span><span class="s">"navomaticBorder"</span><span class="o">));</span>
+ <span class="o">}</span>
+<span class="o">}</span></code></pre></div>
-<span class='kd'>public</span> <span class='kd'>class</span> <span class='nc'>Page1</span> <span class='kd'>extends</span> <span class='n'>WebPage</span> <span class='o'>{</span>
- <span class='kd'>public</span> <span class='nf'>Page1</span><span class='o'>()</span> <span class='o'>{</span>
- <span class='n'>add</span><span class='o'>(</span><span class='k'>new</span> <span class='n'>NavomaticBorder</span><span class='o'>(</span><span class='s'>"navomaticBorder"</span><span class='o'>));</span>
- <span class='o'>}</span>
-<span class='o'>}</span>
-</code></pre></div>
<h3 id="page1html">Page1.html</h3>
-<div class='highlight'><pre><code class='html'><span class='nt'><html></span>
-<span class='nt'><body></span>
- <span class='nt'><span</span> <span class='na'>wicket:id =</span><span class='err'> </span><span class='s'>"navomaticBorder"</span><span class='nt'>></span>
+
+<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><html></span>
+<span class="nt"><body></span>
+ <span class="nt"><span</span> <span class="na">wicket:id =</span><span class="err"> </span><span class="s">"navomaticBorder"</span><span class="nt">></span>
You are viewing Page1
- <span class='nt'></span></span>
-<span class='nt'></body></span>
-<span class='nt'></html></span>
-</code></pre></div>
-<p>Notice that the NavomaticBorder component is attached to the <code><span></code> tag because the name of the component in the Java code is ânavomaticBorderâ and the <code><span></code> tagâs wicket:id attribute is set to ânavomaticBorderâ. Because the two names match, Wicket associates the NavomaticBorder Java component with the <code><span></code> tag.</p>
+ <span class="nt"></span></span>
+<span class="nt"></body></span>
+<span class="nt"></html></span></code></pre></div>
+
+<p>Notice that the NavomaticBorder component is attached to the <code><span></code> tag
+because the name of the component in the Java code is ânavomaticBorderâ and
+the <code><span></code> tagâs wicket:id attribute is set to ânavomaticBorderâ. Because the
+two names match, Wicket associates the NavomaticBorder Java component with the
+<code><span></code> tag.</p>
<h3 id="page2java">Page2.java</h3>
-<p>The Page2 Java and HTML files look almost identical (and weâll omit the sources for Page3 altogether because it follows the same pattern):</p>
-<div class='highlight'><pre><code class='java'><span class='kd'>public</span> <span class='kd'>class</span> <span class='nc'>Page2</span> <span class='kd'>extends</span> <span class='n'>WebPage</span> <span class='o'>{</span>
- <span class='kd'>public</span> <span class='nf'>Page2</span><span class='o'>()</span> <span class='o'>{</span>
- <span class='n'>add</span><span class='o'>(</span><span class='k'>new</span> <span class='n'>NavomaticBorder</span><span class='o'>(</span><span class='s'>"navomaticBorder"</span><span class='o'>));</span>
- <span class='o'>}</span>
-<span class='o'>}</span>
-</code></pre></div>
+<p>The Page2 Java and HTML files look almost identical (and weâll omit the
+sources for Page3 altogether because it follows the same pattern):</p>
+
+<div class="highlight"><pre><code class="language-java" data-lang="java"><span class="kd">public</span> <span class="kd">class</span> <span class="nc">Page2</span> <span class="kd">extends</span> <span class="n">WebPage</span> <span class="o">{</span>
+ <span class="kd">public</span> <span class="nf">Page2</span><span class="o">()</span> <span class="o">{</span>
+ <span class="n">add</span><span class="o">(</span><span class="k">new</span> <span class="nf">NavomaticBorder</span><span class="o">(</span><span class="s">"navomaticBorder"</span><span class="o">));</span>
+ <span class="o">}</span>
+<span class="o">}</span></code></pre></div>
+
<h3 id="page2html">Page2.html</h3>
-<div class='highlight'><pre><code class='html'><span class='nt'><html></span>
-<span class='nt'><body></span>
- <span class='nt'><span</span> <span class='na'>wicket:id =</span><span class='err'> </span><span class='s'>"navomaticBorder"</span><span class='nt'>></span>
+
+<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><html></span>
+<span class="nt"><body></span>
+ <span class="nt"><span</span> <span class="na">wicket:id =</span><span class="err"> </span><span class="s">"navomaticBorder"</span><span class="nt">></span>
You are viewing Page2
- <span class='nt'></span></span>
-<span class='nt'></body></span>
-<span class='nt'></html></span>
-</code></pre></div>
-<h3 id="navomaticborderjava">NavomaticBorder.java</h3>
+ <span class="nt"></span></span>
+<span class="nt"></body></span>
+<span class="nt"></html></span></code></pre></div>
-<p>So how does NavomaticBorder work? Glad you asked. The Java code below simply adds the two BoxBorder components you see. These components are nested borders which each draw a thin black line around their contents. The rest of the magic is in the NavomaticBorder markup.</p>
-<div class='highlight'><pre><code class='java'><span class='kn'>package</span> <span class='n'>wicket</span><span class='o'>.</span><span class='na'>examples</span><span class='o'>.</span><span class='na'>navomatic</span><span class='o'>;</span>
+<h3 id="navomaticborderjava">NavomaticBorder.java</h3>
-<span class='kn'>import</span> <span class='nn'>org.apache.wicket.markup.html.border.Border</span><span class='o'>;</span>
-<span class='kn'>import</span> <span class='nn'>org.apache.wicket.markup.html.border.BoxBorder</span><span class='o'>;</span>
+<p>So how does NavomaticBorder work? Glad you asked. The Java code below simply
+adds the two BoxBorder components you see. These components are nested borders
+which each draw a thin black line around their contents. The rest of the magic
+is in the NavomaticBorder markup.</p>
+
+<div class="highlight"><pre><code class="language-java" data-lang="java"><span class="kn">package</span> <span class="n">wicket</span><span class="o">.</span><span class="na">examples</span><span class="o">.</span><span class="na">navomatic</span><span class="o">;</span>
+
+<span class="kn">import</span> <span class="nn">org.apache.wicket.markup.html.border.Border</span><span class="o">;</span>
+<span class="kn">import</span> <span class="nn">org.apache.wicket.markup.html.border.BoxBorder</span><span class="o">;</span>
+
+<span class="kd">public</span> <span class="kd">class</span> <span class="nc">NavomaticBorder</span> <span class="kd">extends</span> <span class="n">Border</span> <span class="o">{</span>
+ <span class="kd">public</span> <span class="nf">NavomaticBorder</span><span class="o">(</span><span class="kd">final</span> <span class="n">String</span> <span class="n">componentName</span><span class="o">)</span> <span class="o">{</span>
+ <span class="kd">super</span><span class="o">(</span><span class="n">componentName</span><span class="o">);</span>
+
+ <span class="n">addToBorder</span><span class="o">(</span><span class="k">new</span> <span class="nf">BoxBorder</span><span class="o">(</span><span class="s">"navigationBorder"</span><span class="o">));</span>
+ <span class="n">addToBorder</span><span class="o">(</span><span class="k">new</span> <span class="nf">BoxBorder</span><span class="o">(</span><span class="s">"bodyBorder"</span><span class="o">));</span>
+ <span class="o">}</span>
+<span class="o">}</span></code></pre></div>
-<span class='kd'>public</span> <span class='kd'>class</span> <span class='nc'>NavomaticBorder</span> <span class='kd'>extends</span> <span class='n'>Border</span> <span class='o'>{</span>
- <span class='kd'>public</span> <span class='nf'>NavomaticBorder</span><span class='o'>(</span><span class='kd'>final</span> <span class='n'>String</span> <span class='n'>componentName</span><span class='o'>)</span> <span class='o'>{</span>
- <span class='kd'>super</span><span class='o'>(</span><span class='n'>componentName</span><span class='o'>);</span>
-
- <span class='n'>addToBorder</span><span class='o'>(</span><span class='k'>new</span> <span class='n'>BoxBorder</span><span class='o'>(</span><span class='s'>"navigationBorder"</span><span class='o'>));</span>
- <span class='n'>addToBorder</span><span class='o'>(</span><span class='k'>new</span> <span class='n'>BoxBorder</span><span class='o'>(</span><span class='s'>"bodyBorder"</span><span class='o'>));</span>
- <span class='o'>}</span>
-<span class='o'>}</span>
-</code></pre></div>
<h3 id="navomaticborderhtml">NavomaticBorder.html</h3>
-<div class='highlight'><pre><code class='html'><span class='nt'><html></span>
-<span class='nt'><body></span>
- <span class='nt'><wicket:border></span>
- <span class='nt'><p></span>
- <span class='nt'><table></span>
- <span class='nt'><tr></span>
- <span class='nt'><td></span>
- <span class='nt'><span</span> <span class='na'>wicket:id =</span><span class='err'> </span><span class='s'>"navigationBorder"</span><span class='nt'>></span>
- <span class='nt'><b></span>Navigation Links<span class='nt'></b></span>
- <span class='nt'><p></span>
- <span class='nt'><wicket:link></span>
- <span class='nt'><a</span> <span class='na'>href =</span><span class='err'> </span><span class='s'>"Page1.html"</span><span class='nt'>></span>Page1<span class='nt'></a><br/></span>
- <span class='nt'><a</span> <span class='na'>href =</span><span class='err'> </span><span class='s'>"Page2.html"</span><span class='nt'>></span>Page2<span class='nt'></a><br/></span>
- <span class='nt'><a</span> <span class='na'>href =</span><span class='err'> </span><span class='s'>"Page3.html"</span><span class='nt'>></span>Page3<span class='nt'></a></span>
- <span class='nt'></wicket:link></span>
- <span class='nt'></p></span>
- <span class='nt'></span></span>
- <span class='nt'></td></span>
- <span class='nt'><td></span>
- <span class='nt'><span</span> <span class='na'>wicket:id =</span><span class='err'> </span><span class='s'>"bodyBorder"</span><span class='nt'>></span>
- <span class='nt'><wicket:body/></span>
- <span class='nt'></span></span>
- <span class='nt'></td></span>
- <span class='nt'></tr></span>
- <span class='nt'></table></span>
- <span class='nt'></p></span>
- <span class='nt'></wicket:border></span>
- <span class='nt'></body></span>
-<span class='nt'></html></span>
-</code></pre></div>
-<p>Notice that the markup above encloses the entire contents of the markup fileâs <code><body></code> with a <code><wicket:border></code> tag, as we described earlier. This lets the NavomaticBorder know how much of its markup to use when it wraps itself around the markup it finds in the context where it is used. Notice also the <code><wicket:body/></code> marker which designates where to put whatever is found inside the tag at the use context.</p>
-
-<p>Next, notice that the navigation links and the borderâs <code><wicket:body/></code> are both enclosed in <code><span></code> tags which have wicket:id attributes that associate those tags with the BoxBorder components added in the NavomaticBorder constructor. These nested border components will each draw a thin black line around their contents.</p>
-<p>Finally, the <code><wicket:link></code> tag is used to mark the links in the navigation as automatic links. Ordinarily, you would need to create link components and attach them to your page manually, but anchor links that are marked as automatic are parsed and hooked up to link components for you, as appropriate. The italicizing behavior is also automatic. Since Wicket knows which page is current, it removes the anchor link tag for any link that points to the current page (since the link would be useless) and italicizes the link text.</p>
+<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><html></span>
+<span class="nt"><body></span>
+ <span class="nt"><wicket:border></span>
+ <span class="nt"><p></span>
+ <span class="nt"><table></span>
+ <span class="nt"><tr></span>
+ <span class="nt"><td></span>
+ <span class="nt"><span</span> <span class="na">wicket:id =</span><span class="err"> </span><span class="s">"navigationBorder"</span><span class="nt">></span>
+ <span class="nt"><b></span>Navigation Links<span class="nt"></b></span>
+ <span class="nt"><p></span>
+ <span class="nt"><wicket:link></span>
+ <span class="nt"><a</span> <span class="na">href =</span><span class="err"> </span><span class="s">"Page1.html"</span><span class="nt">></span>Page1<span class="nt"></a><br/></span>
+ <span class="nt"><a</span> <span class="na">href =</span><span class="err"> </span><span class="s">"Page2.html"</span><span class="nt">></span>Page2<span class="nt"></a><br/></span>
+ <span class="nt"><a</span> <span class="na">href =</span><span class="err"> </span><span class="s">"Page3.html"</span><span class="nt">></span>Page3<span class="nt"></a></span>
+ <span class="nt"></wicket:link></span>
+ <span class="nt"></p></span>
+ <span class="nt"></span></span>
+ <span class="nt"></td></span>
+ <span class="nt"><td></span>
+ <span class="nt"><span</span> <span class="na">wicket:id =</span><span class="err"> </span><span class="s">"bodyBorder"</span><span class="nt">></span>
+ <span class="nt"><wicket:body/></span>
+ <span class="nt"></span></span>
+ <span class="nt"></td></span>
+ <span class="nt"></tr></span>
+ <span class="nt"></table></span>
+ <span class="nt"></p></span>
+ <span class="nt"></wicket:border></span>
+ <span class="nt"></body></span>
+<span class="nt"></html></span></code></pre></div>
+
+<p>Notice that the markup above encloses the entire contents of the markup fileâs
+<code><body></code> with a <code><wicket:border></code> tag, as we described earlier. This lets the
+NavomaticBorder know how much of its markup to use when it wraps itself around
+the markup it finds in the context where it is used. Notice also the
+<code><wicket:body/></code> marker which designates where to put whatever is found inside
+the tag at the use context.</p>
+
+<p>Next, notice that the navigation links and the borderâs <code><wicket:body/></code> are
+both enclosed in <code><span></code> tags which have wicket:id attributes that associate
+those tags with the BoxBorder components added in the NavomaticBorder
+constructor. These nested border components will each draw a thin black line
+around their contents.</p>
+
+<p>Finally, the <code><wicket:link></code> tag is used to mark the links in the navigation
+as automatic links. Ordinarily, you would need to create link components and
+attach them to your page manually, but anchor links that are marked as
+automatic are parsed and hooked up to link components for you, as appropriate.
+The italicizing behavior is also automatic. Since Wicket knows which page is
+current, it removes the anchor link tag for any link that points to the
+current page (since the link would be useless) and italicizes the link text.</p>
<h3 id="webxml">web.xml</h3>
-<p>In order to get this application up and running, we need to register the application with the Wicket servlet in the web.xml file. The following sections need to be added to the web.xml in the WEB-INF folder.</p>
-<div class='highlight'><pre><code class='xml'><span class='nt'><servlet></span>
- <span class='nt'><servlet-name></span>NavomaticApplication<span class='nt'></servlet-name></span>
- <span class='nt'><servlet-class></span>org.apache.wicket.protocol.http.WicketServlet<span class='nt'></servlet-class></span>
- <span class='nt'><init-param></span>
- <span class='nt'><param-name></span>applicationClassName<span class='nt'></param-name></span>
- <span class='nt'><param-value></span>wicket.examples.navomatic.NavomaticApplication<span class='nt'></param-value></span>
- <span class='nt'></init-param></span>
- <span class='nt'><load-on-startup></span>1<span class='nt'></load-on-startup></span>
-<span class='nt'></servlet></span>
-<span class='nt'><servlet-mapping></span>
- <span class='nt'><servlet-name></span>NavomaticApplication<span class='nt'></servlet-name></span>
- <span class='nt'><url-pattern></span>/app/*<span class='nt'></url-pattern></span>
-<span class='nt'></servlet-mapping></span>
-</code></pre></div>
+<p>In order to get this application up and running, we need to register the
+application with the Wicket servlet in the web.xml file. The following
+sections need to be added to the web.xml in the WEB-INF folder.</p>
+
+<div class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt"><servlet></span>
+ <span class="nt"><servlet-name></span>NavomaticApplication<span class="nt"></servlet-name></span>
+ <span class="nt"><servlet-class></span>org.apache.wicket.protocol.http.WicketServlet<span class="nt"></servlet-class></span>
+ <span class="nt"><init-param></span>
+ <span class="nt"><param-name></span>applicationClassName<span class="nt"></param-name></span>
+ <span class="nt"><param-value></span>wicket.examples.navomatic.NavomaticApplication<span class="nt"></param-value></span>
+ <span class="nt"></init-param></span>
+ <span class="nt"><load-on-startup></span>1<span class="nt"></load-on-startup></span>
+<span class="nt"></servlet></span>
+<span class="nt"><servlet-mapping></span>
+ <span class="nt"><servlet-name></span>NavomaticApplication<span class="nt"></servlet-name></span>
+ <span class="nt"><url-pattern></span>/app/*<span class="nt"></url-pattern></span>
+<span class="nt"></servlet-mapping></span></code></pre></div>
+
+
</div>
<div id="clearer"></div>
<div id="footer"><span>
Modified: wicket/common/site/trunk/_site/learn/examples/usingfragments.html
URL: http://svn.apache.org/viewvc/wicket/common/site/trunk/_site/learn/examples/usingfragments.html?rev=1611904&r1=1611903&r2=1611904&view=diff
==============================================================================
--- wicket/common/site/trunk/_site/learn/examples/usingfragments.html (original)
+++ wicket/common/site/trunk/_site/learn/examples/usingfragments.html Sat Jul 19 12:26:11 2014
@@ -187,96 +187,130 @@
<div id="contentbody">
<h1>Using Fragments</h1>
- <p>This example shows you how to use fragments (Wicket 1.2 feature) to lessen the burden on extra markup files. Fragments are âinline panelsâ and are a quick way of using panel type components in pages without having to create a <code>Panel</code> markup file and class.</p>
-
-<p>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 obligatory <code>web.xml</code> file which should reside in the <code>WEB-INF/</code> directory of your web application root folder.</p>
-
-<p>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 <a href="helloworld.html">Hello, World example</a>.</p>
-
-<h2 id="creating_a_fragment">Creating a Fragment</h2>
-
-<p>First things first, letâs create a page that we can add our fragments to. We will add a Loop that will repeat markup and choose a different Fragment for each item in the loop.</p>
-<div class='highlight'><pre><code class='html'><span class='nt'><html></span>
-<span class='nt'><head></head></span>
-<span class='nt'><body></span>
- <span class='nt'><ul></span>
- <span class='nt'><li</span> <span class='na'>wicket:id=</span><span class='s'>"list"</span><span class='nt'>><span</span> <span class='na'>wicket:id=</span><span class='s'>"panel"</span><span class='nt'>></span></li></span>
- <span class='nt'></ul></span>
- <span class='nt'><wicket:fragment</span> <span class='na'>wicket:id=</span><span class='s'>"fragment1"</span><span class='nt'>></span>panel 1<span class='nt'></wicket:fragment></span>
- <span class='nt'><wicket:fragment</span> <span class='na'>wicket:id=</span><span class='s'>"fragment2"</span><span class='nt'>></span>panel 2<span class='nt'></wicket:fragment></span>
-<span class='nt'></body></span>
-<span class='nt'></html></span>
-</code></pre></div>
-<p>As you can see in this markup file, we already took care of adding the fragment markup to the page in the <code><wicket:fragment></code> tags. Each fragment can contain its own markup and components. Those components need to be added to the Fragment instance in the Java file, just as you would do with a panel and web markup container.</p>
-<div class='highlight'><pre><code class='java'><span class='kn'>package</span> <span class='n'>wicket</span><span class='o'>.</span><span class='na'>quickstart</span><span class='o'>;</span>
-
-<span class='kn'>import</span> <span class='nn'>wicket.markup.html.list.Loop</span><span class='o'>;</span>
-<span class='kn'>import</span> <span class='nn'>wicket.markup.html.panel.Fragment</span><span class='o'>;</span>
-
-<span class='kd'>public</span> <span class='kd'>class</span> <span class='nc'>Index</span> <span class='kd'>extends</span> <span class='n'>QuickStartPage</span> <span class='o'>{</span>
- <span class='kd'>public</span> <span class='nf'>Index</span><span class='o'>()</span> <span class='o'>{</span>
- <span class='n'>Loop</span> <span class='n'>loop</span> <span class='o'>=</span> <span class='k'>new</span> <span class='n'>Loop</span><span class='o'>(</span><span class='s'>"list"</span><span class='o'>,</span> <span class='mi'>5</span><span class='o'>)</span> <span class='o'>{</span>
- <span class='kd'>protected</span> <span class='kt'>void</span> <span class='nf'>populateItem</span><span class='o'>(</span><span class='n'>LoopItem</span> <span class='n'>item</span><span class='o'>)</span> <span class='o'>{</span>
- <span class='n'>String</span> <span class='n'>fragmentId</span> <span class='o'>=</span> <span class='s'>"fragment"</span> <span class='o'>+</span> <span class='o'>(</span><span class='n'>item</span><span class='o'>.</span><span class='na'>getIteration</span><span class='o'>()</span> <span class='o'>%</span> <span class='mi'>2</span> <span class='o'>+</span> <span class='mi'>1</span><span class='o'>);</span>
- <span class='n'>item</span><span class='o'>.</span><span class='na'>add</span><span class='o'>(</span><span class='k'>new</span> <span class='n'>Fragment</span><span class='o'>(</span><span class='s'>"panel"</span><span class='o'>,</span> <span class='n'>fragmentId</span><span class='o'>,</span> <span class='n'>Index</span><span class='o'>.</span><span class='na'>this</span><span class='o'>));</span>
- <span class='o'>}</span>
- <span class='o'>};</span>
- <span class='n'>add</span><span class='o'>(</span><span class='n'>loop</span><span class='o'>);</span>
- <span class='o'>}</span>
-<span class='o'>}</span>
-</code></pre></div>
-<p>The Loop will render 5 items, and the <code>populateItem</code> method will be called for each item. In each item we construct a fragment identifier that corresponds to the identifier in the <code><wicket:fragment></code>. The <code>Fragment</code> constructor takes the identifier of the markup it needs to attach to, and the fragment identifier telling it where to find the specific markup in the file.</p>
-
-<h2 id="adding_components_to_fragments">Adding components to fragments</h2>
-
-<p>In the previous example we just showed different markup for each fragment, but you can add components to the fragments as well. Letâs add a label to fragment 1.</p>
-<div class='highlight'><pre><code class='html'><span class='nt'><html></span>
-<span class='nt'><head></head></span>
-<span class='nt'><body></span>
- <span class='nt'><ul></span>
- <span class='nt'><li</span> <span class='na'>wicket:id=</span><span class='s'>"list"</span><span class='nt'>><span</span> <span class='na'>wicket:id=</span><span class='s'>"panel"</span><span class='nt'>></span></li></span>
- <span class='nt'></ul></span>
- <span class='nt'><wicket:fragment</span> <span class='na'>wicket:id=</span><span class='s'>"fragment1"</span><span class='nt'>></span>panel 1 <span class='nt'><span</span> <span class='na'>wicket:id=</span><span class='s'>"label"</span><span class='nt'>></span></wicket:fragment></span>
- <span class='nt'><wicket:fragment</span> <span class='na'>wicket:id=</span><span class='s'>"fragment2"</span><span class='nt'>></span>panel 2<span class='nt'></wicket:fragment></span>
-<span class='nt'></body></span>
-<span class='nt'></html></span>
-</code></pre></div>
-<p>In order to add the component to the first fragment weâll introduce a subclass for fragment one to encapsulate the component.</p>
-<div class='highlight'><pre><code class='java'><span class='kn'>package</span> <span class='n'>wicket</span><span class='o'>.</span><span class='na'>quickstart</span><span class='o'>;</span>
-
-<span class='kn'>import</span> <span class='nn'>wicket.markup.html.basic.Label</span><span class='o'>;</span>
-<span class='kn'>import</span> <span class='nn'>wicket.markup.html.list.Loop</span><span class='o'>;</span>
-<span class='kn'>import</span> <span class='nn'>wicket.markup.html.panel.Fragment</span><span class='o'>;</span>
-
-<span class='kd'>public</span> <span class='kd'>class</span> <span class='nc'>Index</span> <span class='kd'>extends</span> <span class='n'>QuickStartPage</span> <span class='o'>{</span>
- <span class='kd'>public</span> <span class='kd'>class</span> <span class='nc'>Fragment1</span> <span class='kd'>extends</span> <span class='n'>Fragment</span> <span class='o'>{</span>
- <span class='kd'>public</span> <span class='nf'>Fragment1</span><span class='o'>(</span><span class='n'>String</span> <span class='n'>id</span><span class='o'>,</span> <span class='n'>String</span> <span class='n'>markupId</span><span class='o'>)</span> <span class='o'>{</span>
- <span class='kd'>super</span><span class='o'>(</span><span class='n'>id</span><span class='o'>,</span> <span class='n'>markupId</span><span class='o'>,</span> <span class='n'>Index</span><span class='o'>.</span><span class='na'>this</span><span class='o'>);</span>
- <span class='n'>add</span><span class='o'>(</span><span class='k'>new</span> <span class='n'>Label</span><span class='o'>(</span><span class='s'>"label"</span><span class='o'>,</span> <span class='s'>"Hello, World!"</span><span class='o'>));</span>
- <span class='o'>}</span>
- <span class='o'>}</span>
-
- <span class='kd'>public</span> <span class='nf'>Index</span><span class='o'>()</span> <span class='o'>{</span>
- <span class='n'>Loop</span> <span class='n'>loop</span> <span class='o'>=</span> <span class='k'>new</span> <span class='n'>Loop</span><span class='o'>(</span><span class='s'>"list"</span><span class='o'>,</span> <span class='mi'>5</span><span class='o'>)</span> <span class='o'>{</span>
- <span class='kd'>protected</span> <span class='kt'>void</span> <span class='nf'>populateItem</span><span class='o'>(</span><span class='n'>LoopItem</span> <span class='n'>item</span><span class='o'>)</span> <span class='o'>{</span>
- <span class='kt'>int</span> <span class='n'>index</span> <span class='o'>=</span> <span class='o'>(</span><span class='n'>item</span><span class='o'>.</span><span class='na'>getIteration</span><span class='o'>()</span> <span class='o'>%</span> <span class='mi'>2</span> <span class='o'>+</span> <span class='mi'>1</span><span class='o'>);</span>
- <span class='n'>String</span> <span class='n'>fragmentId</span> <span class='o'>=</span> <span class='s'>"fragment"</span> <span class='o'>+</span> <span class='n'>index</span><span class='o'>;</span>
- <span class='k'>if</span> <span class='o'>(</span><span class='n'>index</span> <span class='o'>==</span> <span class='mi'>1</span><span class='o'>)</span> <span class='o'>{</span>
- <span class='n'>item</span><span class='o'>.</span><span class='na'>add</span><span class='o'>(</span><span class='k'>new</span> <span class='n'>Fragment1</span><span class='o'>(</span><span class='s'>"panel"</span><span class='o'>,</span> <span class='n'>fragmentId</span><span class='o'>));</span>
- <span class='o'>}</span> <span class='k'>else</span> <span class='o'>{</span>
- <span class='n'>item</span><span class='o'>.</span><span class='na'>add</span><span class='o'>(</span><span class='k'>new</span> <span class='n'>Fragment</span><span class='o'>(</span><span class='s'>"panel"</span><span class='o'>,</span> <span class='n'>fragmentId</span><span class='o'>,</span> <span class='n'>Index</span><span class='o'>.</span><span class='na'>this</span><span class='o'>));</span>
- <span class='o'>}</span>
- <span class='o'>}</span>
- <span class='o'>};</span>
- <span class='n'>add</span><span class='o'>(</span><span class='n'>loop</span><span class='o'>);</span>
- <span class='o'>}</span>
-<span class='o'>}</span>
-</code></pre></div>
-<p>The class <code>Fragment1</code> adds the label to itself. In the loopâs <code>populateItem</code> we alternate the fragments type between <code>Fragment</code> and <code>Fragment1</code>. This means that in the final page on one line youâll see <code>"panel 1 Hello, World!"</code> and on the other line just <code>"panel 2"</code>.</p>
+ <p>This example shows you how to use fragments (Wicket 1.2 feature) to lessen
+the burden on extra markup files. Fragments are âinline panelsâ and are a
+quick way of using panel type components in pages without having to create a
+<code>Panel</code> markup file and class.</p>
+
+<p>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 obligatory <code>web.xml</code> file which
+should reside in the <code>WEB-INF/</code> directory of your web application root
+folder.</p>
+
+<p>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 <a href="helloworld.html">Hello, World
+example</a>.</p>
+
+<h2 id="creating-a-fragment">Creating a Fragment</h2>
+
+<p>First things first, letâs create a page that we can add our fragments to. We
+will add a Loop that will repeat markup and choose a different Fragment for
+each item in the loop.</p>
+
+<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><html></span>
+<span class="nt"><head></head></span>
+<span class="nt"><body></span>
+ <span class="nt"><ul></span>
+ <span class="nt"><li</span> <span class="na">wicket:id=</span><span class="s">"list"</span><span class="nt">><span</span> <span class="na">wicket:id=</span><span class="s">"panel"</span><span class="nt">></span></li></span>
+ <span class="nt"></ul></span>
+ <span class="nt"><wicket:fragment</span> <span class="na">wicket:id=</span><span class="s">"fragment1"</span><span class="nt">></span>panel 1<span class="nt"></wicket:fragment></span>
+ <span class="nt"><wicket:fragment</span> <span class="na">wicket:id=</span><span class="s">"fragment2"</span><span class="nt">></span>panel 2<span class="nt"></wicket:fragment></span>
+<span class="nt"></body></span>
+<span class="nt"></html></span></code></pre></div>
+
+<p>As you can see in this markup file, we already took care of adding the
+fragment markup to the page in the <code><wicket:fragment></code> tags. Each fragment
+can contain its own markup and components. Those components need to be added
+to the Fragment instance in the Java file, just as you would do with a panel
+and web markup container.</p>
+
+<div class="highlight"><pre><code class="language-java" data-lang="java"><span class="kn">package</span> <span class="n">wicket</span><span class="o">.</span><span class="na">quickstart</span><span class="o">;</span>
+
+<span class="kn">import</span> <span class="nn">wicket.markup.html.list.Loop</span><span class="o">;</span>
+<span class="kn">import</span> <span class="nn">wicket.markup.html.panel.Fragment</span><span class="o">;</span>
+
+<span class="kd">public</span> <span class="kd">class</span> <span class="nc">Index</span> <span class="kd">extends</span> <span class="n">QuickStartPage</span> <span class="o">{</span>
+ <span class="kd">public</span> <span class="nf">Index</span><span class="o">()</span> <span class="o">{</span>
+ <span class="n">Loop</span> <span class="n">loop</span> <span class="o">=</span> <span class="k">new</span> <span class="nf">Loop</span><span class="o">(</span><span class="s">"list"</span><span class="o">,</span> <span class="mi">5</span><span class="o">)</span> <span class="o">{</span>
+ <span class="kd">protected</span> <span class="kt">void</span> <span class="nf">populateItem</span><span class="o">(</span><span class="n">LoopItem</span> <span class="n">item</span><span class="o">)</span> <span class="o">{</span>
+ <span class="n">String</span> <span class="n">fragmentId</span> <span class="o">=</span> <span class="s">"fragment"</span> <span class="o">+</span> <span class="o">(</span><span class="n">item</span><span class="o">.</span><span class="na">getIteration</span><span class="o">()</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">+</span> <span class="mi">1</span><span class="o">);</span>
+ <span class="n">item</span><span class="o">.</span><span class="na">add</span><span class="o">(</span><span class="k">new</span> <span class="nf">Fragment</span><span class="o">(</span><span class="s">"panel"</span><span class="o">,</span> <span class="n">fragmentId</span><span class="o">,</span> <span class="n">Index</span><span class="o">.</span><span class="na">this</span><span class="o">));</span>
+ <span class="o">}</span>
+ <span class="o">};</span>
+ <span class="n">add</span><span class="o">(</span><span class="n">loop</span><span class="o">);</span>
+ <span class="o">}</span>
+<span class="o">}</span></code></pre></div>
+
+<p>The Loop will render 5 items, and the <code>populateItem</code> method will be called
+for each item. In each item we construct a fragment identifier that
+corresponds to the identifier in the <code><wicket:fragment></code>. The <code>Fragment</code>
+constructor takes the identifier of the markup it needs to attach to, and the
+fragment identifier telling it where to find the specific markup in the file.</p>
+
+<h2 id="adding-components-to-fragments">Adding components to fragments</h2>
+
+<p>In the previous example we just showed different markup for each fragment,
+but you can add components to the fragments as well. Letâs add a label to
+fragment 1.</p>
+
+<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><html></span>
+<span class="nt"><head></head></span>
+<span class="nt"><body></span>
+ <span class="nt"><ul></span>
+ <span class="nt"><li</span> <span class="na">wicket:id=</span><span class="s">"list"</span><span class="nt">><span</span> <span class="na">wicket:id=</span><span class="s">"panel"</span><span class="nt">></span></li></span>
+ <span class="nt"></ul></span>
+ <span class="nt"><wicket:fragment</span> <span class="na">wicket:id=</span><span class="s">"fragment1"</span><span class="nt">></span>panel 1 <span class="nt"><span</span> <span class="na">wicket:id=</span><span class="s">"label"</span><span class="nt">></span></wicket:fragment></span>
+ <span class="nt"><wicket:fragment</span> <span class="na">wicket:id=</span><span class="s">"fragment2"</span><span class="nt">></span>panel 2<span class="nt"></wicket:fragment></span>
+<span class="nt"></body></span>
+<span class="nt"></html></span></code></pre></div>
+
+<p>In order to add the component to the first fragment weâll introduce a
+subclass for fragment one to encapsulate the component.</p>
+
+<div class="highlight"><pre><code class="language-java" data-lang="java"><span class="kn">package</span> <span class="n">wicket</span><span class="o">.</span><span class="na">quickstart</span><span class="o">;</span>
+
+<span class="kn">import</span> <span class="nn">wicket.markup.html.basic.Label</span><span class="o">;</span>
+<span class="kn">import</span> <span class="nn">wicket.markup.html.list.Loop</span><span class="o">;</span>
+<span class="kn">import</span> <span class="nn">wicket.markup.html.panel.Fragment</span><span class="o">;</span>
+
+<span class="kd">public</span> <span class="kd">class</span> <span class="nc">Index</span> <span class="kd">extends</span> <span class="n">QuickStartPage</span> <span class="o">{</span>
+ <span class="kd">public</span> <span class="kd">class</span> <span class="nc">Fragment1</span> <span class="kd">extends</span> <span class="n">Fragment</span> <span class="o">{</span>
+ <span class="kd">public</span> <span class="nf">Fragment1</span><span class="o">(</span><span class="n">String</span> <span class="n">id</span><span class="o">,</span> <span class="n">String</span> <span class="n">markupId</span><span class="o">)</span> <span class="o">{</span>
+ <span class="kd">super</span><span class="o">(</span><span class="n">id</span><span class="o">,</span> <span class="n">markupId</span><span class="o">,</span> <span class="n">Index</span><span class="o">.</span><span class="na">this</span><span class="o">);</span>
+ <span class="n">add</span><span class="o">(</span><span class="k">new</span> <span class="nf">Label</span><span class="o">(</span><span class="s">"label"</span><span class="o">,</span> <span class="s">"Hello, World!"</span><span class="o">));</span>
+ <span class="o">}</span>
+ <span class="o">}</span>
+
+ <span class="kd">public</span> <span class="nf">Index</span><span class="o">()</span> <span class="o">{</span>
+ <span class="n">Loop</span> <span class="n">loop</span> <span class="o">=</span> <span class="k">new</span> <span class="nf">Loop</span><span class="o">(</span><span class="s">"list"</span><span class="o">,</span> <span class="mi">5</span><span class="o">)</span> <span class="o">{</span>
+ <span class="kd">protected</span> <span class="kt">void</span> <span class="nf">populateItem</span><span class="o">(</span><span class="n">LoopItem</span> <span class="n">item</span><span class="o">)</span> <span class="o">{</span>
+ <span class="kt">int</span> <span class="n">index</span> <span class="o">=</span> <span class="o">(</span><span class="n">item</span><span class="o">.</span><span class="na">getIteration</span><span class="o">()</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">+</span> <span class="mi">1</span><span class="o">);</span>
+ <span class="n">String</span> <span class="n">fragmentId</span> <span class="o">=</span> <span class="s">"fragment"</span> <span class="o">+</span> <span class="n">index</span><span class="o">;</span>
+ <span class="k">if</span> <span class="o">(</span><span class="n">index</span> <span class="o">==</span> <span class="mi">1</span><span class="o">)</span> <span class="o">{</span>
+ <span class="n">item</span><span class="o">.</span><span class="na">add</span><span class="o">(</span><span class="k">new</span> <span class="nf">Fragment1</span><span class="o">(</span><span class="s">"panel"</span><span class="o">,</span> <span class="n">fragmentId</span><span class="o">));</span>
+ <span class="o">}</span> <span class="k">else</span> <span class="o">{</span>
+ <span class="n">item</span><span class="o">.</span><span class="na">add</span><span class="o">(</span><span class="k">new</span> <span class="nf">Fragment</span><span class="o">(</span><span class="s">"panel"</span><span class="o">,</span> <span class="n">fragmentId</span><span class="o">,</span> <span class="n">Index</span><span class="o">.</span><span class="na">this</span><span class="o">));</span>
+ <span class="o">}</span>
+ <span class="o">}</span>
+ <span class="o">};</span>
+ <span class="n">add</span><span class="o">(</span><span class="n">loop</span><span class="o">);</span>
+ <span class="o">}</span>
+<span class="o">}</span></code></pre></div>
+
+<p>The class <code>Fragment1</code> adds the label to itself. In the loopâs <code>populateItem</code>
+we alternate the fragments type between <code>Fragment</code> and <code>Fragment1</code>. This
+means that in the final page on one line youâll see <code>"panel 1 Hello, World!"</code>
+and on the other line just <code>"panel 2"</code>.</p>
<h2 id="summary">Summary</h2>
-<p>Fragments make a quick way to add encapsulated components without having to resort to setting the visibility flag on a markup container. For fragments we introduced a new Wicket tag: <code><wicket:fragment></code>.</p>
+<p>Fragments make a quick way to add encapsulated components without having to
+resort to setting the visibility flag on a markup container. For fragments we
+introduced a new Wicket tag: <code><wicket:fragment></code>.</p>
+
</div>
<div id="clearer"></div>
<div id="footer"><span>