| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| <title>Using Fragments | Apache Wicket</title> |
| <meta charset="utf8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| |
| <link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon" /> |
| <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" /> |
| <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> |
| |
| <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
| |
| </head> |
| |
| <body class=""> |
| <div class="header default"> |
| <div class="l-container"> |
| <nav class="mainmenu"> |
| <ul> |
| <!-- /start/quickstart.html || /learn/examples/usingfragments.html --> |
| <li class=""><a href="/start/quickstart.html">Quick Start</a></li> |
| <!-- /start/download.html || /learn/examples/usingfragments.html --> |
| <li class=""><a href="/start/download.html">Download</a></li> |
| <!-- /learn || /learn/examples/usingfragments.html --> |
| <li class=""><a href="/learn">Documentation</a></li> |
| <!-- /help || /learn/examples/usingfragments.html --> |
| <li class=""><a href="/help">Support</a></li> |
| <!-- /contribute || /learn/examples/usingfragments.html --> |
| <li class=""><a href="/contribute">Contribute</a></li> |
| <!-- /apache || /learn/examples/usingfragments.html --> |
| <li class=""><a href="/apache">Apache</a></li> |
| </ul> |
| </nav> |
| <div class="logo"> |
| <a href="/"><img src="/img/logo-apachewicket-white.svg" alt="Apache Wicket"></a> |
| </div> |
| </div> |
| </div> |
| <main> |
| <div class="l-container"> |
| <header class="l-full preamble"> |
| <h1>Using Fragments</h1> |
| </header> |
| <section class="l-one-third right"> |
| <div id="toc" class="toc"><div id="toc-title"><h2>Table of Contents</h2></div><ul><li class="toc--level-1 toc--section-1"><a href="#creating-a-fragment"><span class="toc-number">1</span> <span class="toc-text">Creating a Fragment</span></a></li><li class="toc--level-1 toc--section-2"><a href="#adding-components-to-fragments"><span class="toc-number">2</span> <span class="toc-text">Adding components to fragments</span></a></li><li class="toc--level-1 toc--section-3"><a href="#summary"><span class="toc-number">3</span> <span class="toc-text">Summary</span></a></li></ul></div> |
| </section> |
| <section class="l-two-third left"> |
| <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> |
| </section> |
| </div> |
| </main> |
| <footer class="l-container"> |
| <div class="l-full"> |
| <img height="60px" src="/img/asf_logo.gif" style="float:left"> |
| Copyright © 2014 — The Apache Software Foundation. Apache Wicket, |
| Wicket, Apache, the Apache feather logo, and the Apache Wicket |
| project logo are trademarks of The Apache Software Foundation. All |
| other marks mentioned may be trademarks or registered trademarks of |
| their respective owners. |
| </div> |
| </footer> |
| </body> |
| |
| </html> |