| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| <meta charset="utf-8"> |
| <title>Using Fragments | Apache Wicket</title> |
| <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.7.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 --> |
| <li class=""><a href="/start/quickstart.html">Quick Start</a></li> |
| <!-- /start/download.html || /learn/examples/usingfragments --> |
| <li class=""><a href="/start/download.html">Download</a></li> |
| <!-- /learn || /learn/examples/usingfragments --> |
| <li class=""><a href="/learn">Documentation</a></li> |
| <!-- /help || /learn/examples/usingfragments --> |
| <li class=""><a href="/help">Support</a></li> |
| <!-- /contribute || /learn/examples/usingfragments --> |
| <li class=""><a href="/contribute">Contribute</a></li> |
| <!-- /community || /learn/examples/usingfragments --> |
| <li class=""><a href="/community">Community</a></li> |
| <!-- /apache || /learn/examples/usingfragments --> |
| <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 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> |
| </section> |
| </div> |
| </main> |
| <footer class="l-container"> |
| <div class="l-full"> |
| <img src="/img/asf_logo_url.svg" style="height:90px; float:left; margin-right:10px;"> |
| <div style="margin-top:12px;">Copyright © 2020 — 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> |
| </div> |
| </footer> |
| </body> |
| |
| </html> |
