| I"%=<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><img src="navomatic1.png" alt="Figure 1" /></p> |
| |
| <p>When you click on the Page2 link, you get the following screen.</p> |
| |
| <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 class="language-plaintext highlighter-rouge">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> |
| </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 class="language-plaintext highlighter-rouge"><wicket:border></code> tag. The children of the |
| border component instance are then inserted into this markup, replacing the |
| first <code class="language-plaintext highlighter-rouge"><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> |
| |
| <figure 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></figure> |
| |
| <h3 id="border-usage">Border usage</h3> |
| |
| <figure 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="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></figure> |
| |
| <h3 id="rendered-markup">Rendered markup</h3> |
| |
| <figure 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></figure> |
| |
| <p>In other words, the markup around the <code class="language-plaintext highlighter-rouge"><wicket:body/></code> tag in the border |
| component is sort of “wrapped around” the body of the <code class="language-plaintext highlighter-rouge"><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> |
| |
| <figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="kn">package</span> <span class="nn">org.apache.wicket.examples.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="kd">public</span> <span class="kd">class</span> <span class="nc">NavomaticApplication</span> <span class="kd">extends</span> <span class="nc">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="nc">Class</span> <span class="nf">getHomePage</span><span class="o">()</span> <span class="o">{</span> |
| <span class="k">return</span> <span class="nc">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></figure> |
| |
| <h3 id="page1java">Page1.java</h3> |
| |
| <p>The Page1 Java and HTML files look like this:</p> |
| |
| <figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="kn">package</span> <span class="nn">wicket.examples.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="nc">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="nc">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></figure> |
| |
| <h3 id="page1html">Page1.html</h3> |
| |
| <figure 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="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></figure> |
| |
| <p>Notice that the NavomaticBorder component is attached to the <code class="language-plaintext highlighter-rouge"><span></code> tag |
| because the name of the component in the Java code is “navomaticBorder” and |
| the <code class="language-plaintext highlighter-rouge"><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 class="language-plaintext highlighter-rouge"><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> |
| |
| <figure 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="nc">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="nc">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></figure> |
| |
| <h3 id="page2html">Page2.html</h3> |
| |
| <figure 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="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></figure> |
| |
| <h3 id="navomaticborderjava">NavomaticBorder.java</h3> |
| |
| <p>So how does NavomaticBorder work? Glad you asked. The Java code below adds two |
| other components, which are itself borders. Each adds a line around its |
| contents. The rest of the magic is in the NavomaticBorder markup.</p> |
| |
| <figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="kn">package</span> <span class="nn">wicket.examples.navomatic</span><span class="o">;</span> |
| |
| <span class="kn">import</span> <span class="nn">org.apache.wicket.examples.compref.MyBorder</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="kd">public</span> <span class="kd">class</span> <span class="nc">NavomaticBorder</span> <span class="kd">extends</span> <span class="nc">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="nc">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="nc">MyBorder</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="nc">MyBorder</span><span class="o">(</span><span class="s">"bodyBorder"</span><span class="o">));</span> |
| <span class="o">}</span> |
| <span class="o">}</span></code></pre></figure> |
| |
| <h3 id="navomaticborderhtml">NavomaticBorder.html</h3> |
| |
| <figure 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="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="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="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="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="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></figure> |
| |
| <p>Notice that the markup above encloses the entire contents of the markup file’s |
| <code class="language-plaintext highlighter-rouge"><body></code> with a <code class="language-plaintext highlighter-rouge"><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 class="language-plaintext highlighter-rouge"><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 class="language-plaintext highlighter-rouge"><wicket:body/></code> are |
| both enclosed in <code class="language-plaintext highlighter-rouge"><span></code> tags which have wicket:id attributes that associate |
| those tags with the MyBorder 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 class="language-plaintext highlighter-rouge"><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. |
| Since Wicket knows which page is current, it removes the href attribute for |
| any link that points to the current page (since the link would be useless).</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> |
| |
| <figure 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></figure> |
| |
| :ET |