| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| <meta charset="utf-8"> |
| <title>Hello World! | 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/helloworld --> |
| <li class=""><a href="/start/quickstart.html">Quick Start</a></li> |
| <!-- /start/download.html || /learn/examples/helloworld --> |
| <li class=""><a href="/start/download.html">Download</a></li> |
| <!-- /learn || /learn/examples/helloworld --> |
| <li class=""><a href="/learn">Documentation</a></li> |
| <!-- /help || /learn/examples/helloworld --> |
| <li class=""><a href="/help">Support</a></li> |
| <!-- /contribute || /learn/examples/helloworld --> |
| <li class=""><a href="/contribute">Contribute</a></li> |
| <!-- /community || /learn/examples/helloworld --> |
| <li class=""><a href="/community">Community</a></li> |
| <!-- /apache || /learn/examples/helloworld --> |
| <li class=""><a href="/apache">Apache</a></li> |
| </ul> |
| </nav> |
| <div class="logo"> |
| <a href="/"><img src="/img/logo-apachewicket.svg" alt="Apache Wicket"></a> |
| </div> |
| </div> |
| </div> |
| <main> |
| <div class="l-container"> |
| <header class="l-full preamble"> |
| <h1>Hello World!</h1> |
| </header> |
| <section class="toc left"> |
| <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="#ready-to-deploy"><span class="toc-number">1</span> <span class="toc-text">Ready to deploy</span></a></li></ul></div> |
| </section> |
| <section> |
| <p>HelloWorld demonstrates the basic structure of a web application in Wicket. A |
| Label component is used to display a message on the home page for the |
| application.</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>If you wish to start building this example, you may want to take a look at the |
| Wicket Quickstart project, which provides a quick way of getting up and |
| running without having to figure things out yourself. The Quickstart project |
| contains the necessary build files (Ant and Maven), libraries, minimal set of |
| Java and markup files and an embedded Jetty server to run your application |
| without having to go through the whole build-deploy cycle.</p> |
| <h3 id="helloworldapplicationjava">HelloWorldApplication.java</h3> |
| <p>Each Wicket application is defined by an Application object. This object |
| defines what the home page is, and allows for some configuration.</p> |
| <figure class="highlight"><pre><code class="language-java" data-lang="java"><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">HelloWorldApplication</span> <span class="kd">extends</span> <span class="nc">WebApplication</span> <span class="o">{</span> |
| <span class="kd">public</span> <span class="nf">HelloWorldApplication</span><span class="o">()</span> <span class="o">{</span> |
| <span class="o">}</span> |
| <span class="cm">/** |
| * @see org.apache.wicket.Application#getHomePage() |
| */</span> |
| <span class="nd">@Override</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">HelloWorld</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> |
| <p>Here you can see that we define <code class="language-plaintext highlighter-rouge">wicket.examples.helloworld.HelloWorld</code> to be |
| our home page. When the base URL of our application is requested, the markup |
| rendered by the HelloWorld page is returned.</p> |
| <h3 id="helloworldjava">HelloWorld.java</h3> |
| <figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="kn">import</span> <span class="nn">org.apache.wicket.markup.html.WebPage</span><span class="o">;</span> |
| <span class="kn">import</span> <span class="nn">org.apache.wicket.markup.html.basic.Label</span><span class="o">;</span> |
| <span class="kd">public</span> <span class="kd">class</span> <span class="nc">HelloWorld</span> <span class="kd">extends</span> <span class="nc">WebPage</span> <span class="o">{</span> |
| <span class="kd">public</span> <span class="nf">HelloWorld</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">Label</span><span class="o">(</span><span class="s">"message"</span><span class="o">,</span> <span class="s">"Hello World!"</span><span class="o">));</span> |
| <span class="o">}</span> |
| <span class="o">}</span></code></pre></figure> |
| <p>The Label is constructed using two parameters:</p> |
| <ol> |
| <li> |
| <p>“message”</p> |
| </li> |
| <li> |
| <p>“Hello World!”</p> |
| </li> |
| </ol> |
| <p>The first parameter is the component identifier, which Wicket uses to identify |
| the <code class="language-plaintext highlighter-rouge">Label</code> component in your HTML markup. The second parameter is the message |
| which the <code class="language-plaintext highlighter-rouge">Label</code> should render.</p> |
| <h3 id="helloworldhtml">HelloWorld.html</h3> |
| <p>The HTML file that defines our Hello World functionality is as follows:</p> |
| <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">"message"</span><span class="nt">></span>Message goes here<span class="nt"></span></span> |
| <span class="nt"></body></span> |
| <span class="nt"></html></span></code></pre></figure> |
| <p>In this file, you see two elements that need some attention:</p> |
| <ul> |
| <li> |
| <p>the component declaration <code class="language-plaintext highlighter-rouge"><span wicket:id="message"></code></p> |
| </li> |
| <li> |
| <p>the text <code class="language-plaintext highlighter-rouge">Message goes here</code></p> |
| </li> |
| </ul> |
| <p>The component declaration consists of the Wicket identifier <code class="language-plaintext highlighter-rouge">wicket:id</code> and the |
| component identifier <code class="language-plaintext highlighter-rouge">message</code>. The component identifier should be the same as |
| the name of the component you defined in your <code class="language-plaintext highlighter-rouge">WebPage</code>. The text between |
| the <code class="language-plaintext highlighter-rouge"><span></code> tags is removed when the component renders its message. The final |
| content of the component is determined by your Java code.</p> |
| <h3 id="webxml">web.xml</h3> |
| <p>In order to deploy our HelloWorld program, we need to make our application |
| known to the application server by means of the web.xml file.</p> |
| <figure class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="cp"><?xml version="1.0" encoding="UTF-8"?></span> |
| <span class="cp"><!DOCTYPE web-app |
| PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" |
| "http://java.sun.com/dtd/web-app_2_3.dtd"></span> |
| <span class="nt"><web-app></span> |
| <span class="nt"><display-name></span>Wicket Examples<span class="nt"></display-name></span> |
| <span class="nt"><filter></span> |
| <span class="nt"><filter-name></span>HelloWorldApplication<span class="nt"></filter-name></span> |
| <span class="nt"><filter-class></span>org.apache.wicket.protocol.http.WicketFilter<span class="nt"></filter-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>org.apache.wicket.examples.helloworld.HelloWorldApplication<span class="nt"></param-value></span> |
| <span class="nt"></init-param></span> |
| <span class="nt"></filter></span> |
| <span class="nt"><filter-mapping></span> |
| <span class="nt"><filter-name></span>HelloWorldApplication<span class="nt"></filter-name></span> |
| <span class="nt"><url-pattern></span>/*<span class="nt"></url-pattern></span> |
| <span class="nt"></filter-mapping></span> |
| <span class="nt"></web-app></span></code></pre></figure> |
| <p>In this definition you see the Wicket filter defined, which handles all |
| requests. In order to let Wicket know which application is available, only the |
| applicationClassName filter parameter is needed.</p> |
| <p>Also, notice the url-mapping to /*. The Wicket filter will only process |
| requests that are Wicket requests. If a request is not Wicket related, the |
| filter will pass the request on to the chain. This ensures that (static) |
| resources outside the realm of the Wicket application, such as style sheets, |
| JavaScript files, images and so forth will be served by the container.</p> |
| <h2 id="ready-to-deploy">Ready to deploy</h2> |
| <p>That’s it. No more configuration necessary! All you need to do now is to |
| deploy the web application into your favorite application server. Point your |
| browser to the url: <code class="language-plaintext highlighter-rouge">http://<servername>/<warfilename>/</code>, substituting |
| servername and warfilename to the appropriate values, such as |
| http://localhost:8080/helloworld/.</p> |
| <p>As you can see: no superfluous XML configuration files are needed to enable a |
| Wicket application. Only the markup (HTML) files, the Java class files and the |
| required web.xml were needed to create this application.</p> |
| </section> |
| </div> |
| </main> |
| <footer> |
| <div class="l-container"> |
| <div class="left"> |
| <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> |
| </div> |
| </footer> |
| </body> |
| |
| </html> |
