| I"²0<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 class="language-plaintext highlighter-rouge">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 class="language-plaintext highlighter-rouge">web.xml</code> file which |
| should reside in the <code class="language-plaintext highlighter-rouge">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> |
| |
| <figure 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></figure> |
| |
| <p>As you can see in this markup file, we already took care of adding the |
| fragment markup to the page in the <code class="language-plaintext highlighter-rouge"><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> |
| |
| <figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="kn">package</span> <span class="nn">wicket.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="nc">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="nc">Loop</span> <span class="n">loop</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">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="nc">LoopItem</span> <span class="n">item</span><span class="o">)</span> <span class="o">{</span> |
| <span class="nc">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="nc">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="nc">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></figure> |
| |
| <p>The Loop will render 5 items, and the <code class="language-plaintext highlighter-rouge">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 class="language-plaintext highlighter-rouge"><wicket:fragment></code>. The <code class="language-plaintext highlighter-rouge">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> |
| |
| <figure 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></figure> |
| |
| <p>In order to add the component to the first fragment weâll introduce a |
| subclass for fragment one to encapsulate the component.</p> |
| |
| <figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="kn">package</span> <span class="nn">wicket.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="nc">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="nc">Fragment</span> <span class="o">{</span> |
| <span class="kd">public</span> <span class="nf">Fragment1</span><span class="o">(</span><span class="nc">String</span> <span class="n">id</span><span class="o">,</span> <span class="nc">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="nc">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="nc">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="nc">Loop</span> <span class="n">loop</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">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="nc">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="nc">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="nc">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="nc">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="nc">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></figure> |
| |
| <p>The class <code class="language-plaintext highlighter-rouge">Fragment1</code> adds the label to itself. In the loopâs <code class="language-plaintext highlighter-rouge">populateItem</code> |
| we alternate the fragments type between <code class="language-plaintext highlighter-rouge">Fragment</code> and <code class="language-plaintext highlighter-rouge">Fragment1</code>. This |
| means that in the final page on one line youâll see <code class="language-plaintext highlighter-rouge">"panel 1 Hello, World!"</code> |
| and on the other line just <code class="language-plaintext highlighter-rouge">"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 class="language-plaintext highlighter-rouge"><wicket:fragment></code>.</p> |
| :ET |