Doppelte Head-Eintr├Ąge auskommentiert
[website] / dist / thymeleaf / blog / article.html
1 <!DOCTYPE html>
2 <html
3     xmlns=""
4     xmlns:layout=""
5     layout:decorator="templates/layout"
6     >
7   <head>
8     <title>juplo - blog - Combining jetty-maven-plugin and wro4j-maven-plugin for Dynamic Reloading of LESS-Resources</title>
9     <!--/*-->
10     <link rel="stylesheet" type="text/css" href="../../css/base.min.css"/>
11     <style type="text/css">
12       @import '../../css/screen.min.css' screen;
13       @import '../../css/print.min.css' print;
14     </style>
15     <!--*/-->
16   </head>
17   <body>
18     <ol layout:fragment="breadcrumb">
19       <li class="b"><a class="b" href="../index.html" th:href="@{/index.html}">Home</a></li>
20       <li class="b"><strong class="b">Blog</strong></li>
21     </ol>
22     <nav layout:fragment="navigation">
23       <hr class="n"/>
24       <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
25       <h1 class="nav">Navigation</h1>
26       <h2 class="nav menu">Section-Menu</h2>
27       <ul id="menu" class="cf">
28         <li class="m blog"><strong class="m">Blog</strong></li>
29         <li class="m projects"><a href="../projects.html" th:href="@{/projects.html}" class="m">Projects</a></li>
30         <li class="m about"><a href="../about.html" th:href="@{/about.html}" class="m">About</a></li>
31       </ul>
32     </nav>
33     <article class="main" layout:fragment="maincontent">
34       <article id="post-140" class="post-140 post type-post status-publish format-standard hentry category-jetty category-less category-maven category-wro4j">
35         <div class="entry-header">
36           <h1 class="entry-title">Combining jetty-maven-plugin and wro4j-maven-plugin for Dynamic Reloading of LESS-Resources</h1>
37           <div class="entry-meta">
38             Posted on <a href="" title="12:58" rel="bookmark"><time class="entry-date" datetime="2013-12-06T12:58:17+00:00">December 6, 2013</time></a><span class="byline"> by <span class="author vcard"><a class="url fn n" href="" title="View all posts by Kai Moritz" rel="author">Kai Moritz</a></span></span>
39           </div><!-- .entry-meta -->
40         </div><!-- .entry-header -->
41         <div class="entry-content">
42           <p>Ever searched for a simple configuration, that lets you use your <a href="" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','']);" title="See the documentation for mor information">jetty-maven-plugin</a> as you are used to, while working with <a href="" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','']);" title="See LESS CSS documentation for mor informations">LESS</a> to simplify your stylesheets?</p>
43           <p>You cannot do both, use the <a href="" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','']);" title="More about the client-side usage of LESS">Client-side mode</a> of LESS to ease development and use the <a href="" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','']);" title="Homepage of the official LESS CSS maven plugin">lesscss-maven-plugin</a> to automatically compile the LESS-sources into CSS for production. That does not work, because your stylesheets must be linked in different ways if you are switching between the client-side mode &#8211; which is best for development &#8211; and the pre-compiled mode &#8211; which is best for production. For the client-side mode you need something like:</p>
44           <pre class="prettyprint linenums">
45   <code class="html">
46   &lt;link rel="stylesheet" type="text/css" href="styles.less" /&gt;
47   &lt;script src="less.js" type="text/javascript"&gt;&lt;/script&gt;
48   </code>
49           </pre>
50           <p>While, for the pre-compiled mode, you want to link to your stylesheets as usual, with:</p>
51           <pre class="prettyprint linenums">
52   <code class="html">
53   &lt;link rel="stylesheet" type="text/css" href="styles.css" /&gt;
54   </code>
55           </pre>
56           <p>While looking for a solution to this dilemma, I stumbled accross <a href="" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','']);" title="See the documentation of ths wounderfull tool">wro4j</a>. Originally intended, to speed up page-delivery by combining and minimizing multiple resources into one through the use of a servlet-filter, this tool also comes with a maven-plugin, that let you do the same offline, while compiling your webapp.</p>
57           <p>The idea is, to use the <a href="" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','']);" title="See the documentation of hte wro4j-maven-plugin">wro4j-maven-plugin</a> to compile and combine your LESS-sources into CSS for production and to use the <a href="" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','']);" title="See how to configure the filter">wro4j filter</a>, to dynamically deliver the compiled CSS while developing. This way, you do not have to alter your HTML-code, when switching between development and production, because you always link to the CSS-files.</p>
58           <p>So, lets get dirty!</p>
59           <h2>Step 1: Configure wro4j</h2>
60           <p>First, we configure <strong>wro4j</strong>, like as we want to use it to speed up our page. The details are explained and linked on wro4j&#8217;s <a href="" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','']);" title="Visit the Getting-Started-Page">Getting-Started-Page</a>. In short, we just need two files: <strong>wro.xml</strong> and <strong></strong>.</p>
61           <h3>wro.xml</h3>
62           <p>wro.xml tells wro4j, which resources should be combined and how the result should be named. I am using the following configuration to generate all LESS-Sources beneath <code>base/</code> into one CSS-file called <code>base.css</code>:</p>
63           <pre class="prettyprint linenums">
64   <code class="xml">
65   &lt;groups xmlns=""&gt;
66     &lt;group name="base"&gt;
67       &lt;css&gt;/less/base/*.less&lt;/css&gt;
68     &lt;/group&gt;
69   </code>
70           </pre>
71           <p>wro4j looks for <code>/less/base/*.less</code> inside the root of the web-context, which is equal to <code>src/main/webapp</code> in a normal maven-project. There are <a href="" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','']);" title="See the resource locator documentation of wro4j for more details">other ways to specifie the resources</a>, which enable you to store them elswhere. But this approach works best for our goal, because the path is understandable for both: the wro4j servlet-filter, we are configuring now for our development-environment, and the wro4j-maven-plugin, that we will configure later for build-time compilation.</p>
72           <h3></h3>
73           <p> in short tells wro4j, how or if it should convert the combined sources and how it should behave. I am using the following configuration to tell wro4j, that it should convert <code>*.less</code>-sources into CSS and do that on <em>every request</em>:</p>
74           <pre class="prettyprint linenums">
75   <code class="properties">
76   preProcessors=less4j
77   disableCache=true
78   </code>
79           </pre>
80           <p>You can do a lot more here. There are countless <a href="" onclick="javascript:_gaq.push(['_trackEvent', 'outbound-article', '']);" title="See all configuration options">configuration options</a> to fine-tune the behaviour of wro4j. The <code>disableCache=true</code> is crucial, because we would not see the changes take effect when developing with <strong>jetty-maven-plugin</strong> later on. You can also do much more with your resources here, for example <a href="" onclick="javascript:_gaq.push(['_trackEvent', 'outbound-article', '']);" title="See all available processors">minimizing</a>. But for our goal, we are now only intrested in the compilation of our LESS-sources.</p>
81           <h2>Step 2: Configure the wro4j servlet-filter</h2>
82           <p>Configuring the filter in the <strong>web.xml</strong> is easy. It is explained in wro4j&#8217;s <a href="" onclick="javascript:_gaq.push(['_trackEvent', 'outbound-article', '']);" title="See the installation instructions for the wro4j servlet-filter">installation-insctuctions</a>. But the trick is, that we do not want to configure that filter for the production-version of our webapp, because we want to compile the resources offline, when the webapp is build. To acchieve this, we can use the <code>&lt;overrideDescriptor&gt;</code>-Parameter of the <a href="" onclick="javascript:_gaq.push(['_trackEvent', 'outbound-article', '']);" title="Read more about the configuration of the jetty-maven-plugin">jetty-maven-plugin</a>.</p>
83           <h2>&lt;overrideDescriptor&gt;</h2>
84           <p>This parameter lets you specify additional configuration options for the web.xml of your webapp. I am using the following configuration for my jetty-maven-plugin:</p>
85           <pre class="prettyprint linenums">
86   <code class="xml">
87   &lt;plugin&gt;
88     &lt;groupId&gt;org.eclipse.jetty&lt;/groupId&gt;
89     &lt;artifactId&gt;jetty-maven-plugin&lt;/artifactId&gt;
90     &lt;configuration&gt;
91       &lt;webApp&gt;
92         &lt;overrideDescriptor&gt;${project.basedir}/src/test/resources/jetty-web.xml&lt;/overrideDescriptor&gt;
93       &lt;/webApp&gt;
94     &lt;/configuration&gt;
95     &lt;dependencies&gt;
96       &lt;dependency&gt;
97         &lt;groupId&gt;ro.isdc.wro4j&lt;/groupId&gt;
98         &lt;artifactId&gt;wro4j-core&lt;/artifactId&gt;
99         &lt;version&gt;${wro4j.version}&lt;/version&gt;
100       &lt;/dependency&gt;
101       &lt;dependency&gt;
102         &lt;groupId&gt;ro.isdc.wro4j&lt;/groupId&gt;
103         &lt;artifactId&gt;wro4j-extensions&lt;/artifactId&gt;
104         &lt;version&gt;${wro4j.version}&lt;/version&gt;
105         &lt;exclusions&gt;
106           &lt;exclusion&gt;
107               &lt;groupId&gt;javax.servlet&lt;/groupId&gt;
108               &lt;artifactId&gt;servlet-api&lt;/artifactId&gt;
109           &lt;/exclusion&gt;
110           &lt;exclusion&gt;
111               &lt;groupId&gt;org.apache.commons&lt;/groupId&gt;
112               &lt;artifactId&gt;commons-lang3&lt;/artifactId&gt;
113           &lt;/exclusion&gt;
114           &lt;exclusion&gt;
115               &lt;groupId&gt;commons-io&lt;/groupId&gt;
116               &lt;artifactId&gt;commons-io&lt;/artifactId&gt;
117           &lt;/exclusion&gt;
118           &lt;exclusion&gt;
119               &lt;groupId&gt;commons-pool&lt;/groupId&gt;
120               &lt;artifactId&gt;commons-pool&lt;/artifactId&gt;
121           &lt;/exclusion&gt;
122           &lt;exclusion&gt;
123               &lt;groupId&gt;org.springframework&lt;/groupId&gt;
124               &lt;artifactId&gt;spring-web&lt;/artifactId&gt;
125           &lt;/exclusion&gt;
126           &lt;exclusion&gt;
127               &lt;groupId&gt;;/groupId&gt;
128               &lt;artifactId&gt;gson&lt;/artifactId&gt;
129           &lt;/exclusion&gt;
130           &lt;exclusion&gt;
131               &lt;groupId&gt;;/groupId&gt;
132               &lt;artifactId&gt;closure-compiler&lt;/artifactId&gt;
133           &lt;/exclusion&gt;
134           &lt;exclusion&gt;
135               &lt;groupId&gt;com.github.lltyk&lt;/groupId&gt;
136               &lt;artifactId&gt;dojo-shrinksafe&lt;/artifactId&gt;
137           &lt;/exclusion&gt;
138           &lt;exclusion&gt;
139               &lt;groupId&gt;org.jruby&lt;/groupId&gt;
140               &lt;artifactId&gt;jruby-core&lt;/artifactId&gt;
141           &lt;/exclusion&gt;
142           &lt;exclusion&gt;
143             &lt;groupId&gt;org.jruby&lt;/groupId&gt;
144             &lt;artifactId&gt;jruby-stdlib&lt;/artifactId&gt;
145           &lt;/exclusion&gt;
146           &lt;exclusion&gt;
147               &lt;groupId&gt;org.jruby&lt;/groupId&gt;
148               &lt;artifactId&gt;jruby-stdlib&lt;/artifactId&gt;
149           &lt;/exclusion&gt;
150           &lt;exclusion&gt;
151               &lt;groupId&gt;me.n4u.sass&lt;/groupId&gt;
152               &lt;artifactId&gt;sass-gems&lt;/artifactId&gt;
153           &lt;/exclusion&gt;
154           &lt;exclusion&gt;
155               &lt;groupId&gt;;/groupId&gt;
156               &lt;artifactId&gt;bourbon-gem-jar&lt;/artifactId&gt;
157           &lt;/exclusion&gt;
158           &lt;exclusion&gt;
159               &lt;groupId&gt;org.codehaus.gmaven.runtime&lt;/groupId&gt;
160               &lt;artifactId&gt;gmaven-runtime-1.7&lt;/artifactId&gt;
161           &lt;/exclusion&gt;
162           &lt;exclusion&gt;
163               &lt;groupId&gt;org.webjars&lt;/groupId&gt;
164               &lt;artifactId&gt;jshint&lt;/artifactId&gt;
165           &lt;/exclusion&gt;
166           &lt;exclusion&gt;
167               &lt;groupId&gt;org.webjars&lt;/groupId&gt;
168               &lt;artifactId&gt;less&lt;/artifactId&gt;
169           &lt;/exclusion&gt;
170           &lt;exclusion&gt;
171               &lt;groupId&gt;org.webjars&lt;/groupId&gt;
172               &lt;artifactId&gt;emberjs&lt;/artifactId&gt;
173           &lt;/exclusion&gt;
174           &lt;exclusion&gt;
175               &lt;groupId&gt;org.webjars&lt;/groupId&gt;
176               &lt;artifactId&gt;handlebars&lt;/artifactId&gt;
177           &lt;/exclusion&gt;
178           &lt;exclusion&gt;
179               &lt;groupId&gt;org.webjars&lt;/groupId&gt;
180               &lt;artifactId&gt;coffee-script&lt;/artifactId&gt;
181           &lt;/exclusion&gt;
182           &lt;exclusion&gt;
183               &lt;groupId&gt;org.webjars&lt;/groupId&gt;
184               &lt;artifactId&gt;jslint&lt;/artifactId&gt;
185           &lt;/exclusion&gt;
186           &lt;exclusion&gt;
187               &lt;groupId&gt;org.webjars&lt;/groupId&gt;
188               &lt;artifactId&gt;json2&lt;/artifactId&gt;
189           &lt;/exclusion&gt;
190           &lt;exclusion&gt;
191               &lt;groupId&gt;org.webjars&lt;/groupId&gt;
192               &lt;artifactId&gt;jquery&lt;/artifactId&gt;
193           &lt;/exclusion&gt;
194         &lt;/exclusions&gt;
195       &lt;/dependency&gt;
196     &lt;/dependencies&gt;
197   &lt;/plugin&gt;
198   </code>
199           </pre>
200           <p>The dependencies to <strong>wro4j-core</strong> and <strong>wro4j-extensions</strong> are needed by jetty, to be able to enable the filter defined below. Unfortunatly, one of the transitive dependencies of <code>wro4j-extensions</code> triggers an uggly error when running the jetty-maven-plugin. Therefore, all unneeded dependencies of <code>wro4j-extensions</code> are excluded, as a workaround for this error/bug.</p>
201           <h2>jetty-web.xml</h2>
202           <p>And my jetty-web.xml looks like this:</p>
203           <pre class="prettyprint linenums">
204   <code class="xml">
205   &lt;?xml version="1.0" encoding="UTF-8"?&gt;
206   &lt;web-app xmlns=""
207     xmlns:xsi=""
208     xsi:schemaLocation=""
209     version="2.5"&gt;
210     &lt;filter&gt;
211       &lt;filter-name&gt;wro&lt;/filter-name&gt;
212       &lt;filter-class&gt;ro.isdc.wro.http.WroFilter&lt;/filter-class&gt;
213     &lt;/filter&gt;
214     &lt;filter-mapping&gt;
215       &lt;filter-name&gt;wro&lt;/filter-name&gt;
216       &lt;url-pattern&gt;*.css&lt;/url-pattern&gt;
217     &lt;/filter-mapping&gt;
218   &lt;/web-app&gt;
219   </code>
220           </pre>
221           <p>The filter processes any URI&#8217;s that end with <code>.css</code>. This way, the wro4j servlet-filter makes <code>base.css</code> available under any path, because for exampl <code>/base.css</code>, <code>/css/base.css</code> and <code>/foo/bar/base.css</code> all end with <code>.css</code>.</p>
222           <p>This is all, that is needed to develop with dynamically reloadable compiled LESS-resources. Just fire up your browser and browse to <code>/what/you/like/base.css</code>. (But do not forget to put some LESS-files in <code>src/main/webapp/less/base/</code> first!)</p>
223           <h2>Step 3: Install wro4j-maven-plugin</h2>
224           <p>All that is left over to configure now, is the build-process. If you would build and deploy your webapp now, the CSS-file <code>base.css</code> would not be generated and the link to your stylesheet, that already works in our jetty-maven-plugin environment would point to a 404. Hence, we need to set up the <strong>wro4j-maven-plugin</strong>. I am using this configuration:</p>
225           <pre class="prettyprint linenums">
226   <code class="xml">
227   &lt;plugin&gt;
228     &lt;groupId&gt;ro.isdc.wro4j&lt;/groupId&gt;
229     &lt;artifactId&gt;wro4j-maven-plugin&lt;/artifactId&gt;
230     &lt;version&gt;${wro4j.version}&lt;/version&gt;
231     &lt;configuration&gt;
232       &lt;wroManagerFactory&gt;ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory&lt;/wroManagerFactory&gt;
233       &lt;cssDestinationFolder&gt;${}/${}/css/&lt;/cssDestinationFolder&gt;
234     &lt;/configuration&gt;
235     &lt;executions&gt;
236       &lt;execution&gt;
237         &lt;phase&gt;package&lt;/phase&gt;
238         &lt;goals&gt;
239           &lt;goal&gt;run&lt;/goal&gt;
240         &lt;/goals&gt;
241       &lt;/execution&gt;
242     &lt;/executions&gt;
243   &lt;/plugin&gt;
244   </code>
245           </pre>
246           <p>I connected the <code>run</code>-goal with the <code>package</code>-phase, because the statically compiled CSS-file is needed only in the final war. The <code>ConfigurableWroManagerFactory</code> tells wro4j, that it should look up further configuration options in our <code></code>-file, where we tell wro4j, that it should compile our LESS-resources. The <code>&lt;cssDestinationFolder&gt;</code>-tag tells wro4j, where it should put the generated CSS-file. You can adjust that to suite your needs.</p>
247           <p>That&#8217;s it: now the same CSS-file, which is created on the fly by the wro4j servlet-filter when using <code>mvn jetty:run</code> and, thus, enables dynamic reloading of our LESS-resources, is generated during the build-process by the wro4j-maven-plugin.</p>
248           <h2>Cleanup and further considerations</h2>
249           <h3>lesscss-maven-plugin</h3>
250           <p>If you already compile your LESS-resources with the lesscss-maven-plugin, you can stick with it and skip step 3. But I strongly recommend giving wro4j-maven-plugin a try, because it is a much more powerfull tool, that can speed up your final webapp even more.</p>
251           <h3>Clean up your mess </h3>
252           <p>With a configuration like the above one, your LESS-resources and wro4j-configuration-files will be packed into your production-war. That might be confusing later, because neither wro4j nor LESS is used in the final war. You can add the following to your <code>pom.xml</code> to exclude these files from your war for the sake of clarity:</p>
253           <pre class="prettyprint linenums">
254   <code class="xml">
255   &lt;plugin&gt;
256     &lt;artifactId&gt;maven-war-plugin&lt;/artifactId&gt;
257     &lt;configuration&gt;
258       &lt;warSourceExcludes&gt;
259         WEB-INF/wro.*,
260         less/**
261       &lt;/warSourceExcludes&gt;
262     &lt;/configuration&gt;
263   &lt;/plugin&gt;
264   </code>
265           </pre>
266           <h3>What&#8217;s next?</h3>
267           <p>We only scrached the surface, of what can be done with wro4j. Based on this configuration, you can easily enable additional features to fine-tune your final build for maximum speed. You really should take a look at the <a href="" onclick="javascript:_gaq.push(['_trackEvent', 'outbound-article', '']);" title="Available Processors">list of available Processors</a>!</p>
268         </div><!-- .entry-content -->
269         <footer class="entry-meta">
270           This entry was posted in <a href="" title="View all posts in Jetty" rel="category tag">Jetty</a>, <a href="" title="View all posts in less" rel="category tag">less</a>, <a href="" title="View all posts in Maven" rel="category tag">Maven</a>, <a href="" title="View all posts in wro4j" rel="category tag">wro4j</a>. Bookmark the <a href="" title="Permalink to Combining jetty-maven-plugin and wro4j-maven-plugin for Dynamic Reloading of LESS-Resources" rel="bookmark">permalink</a>. 
271         </footer><!-- .entry-meta -->
272       </article><!-- #post-140 -->
273       <!-- You can start editing here. -->
274       <!-- If comments are open, but there are no comments. -->
275       <div id="respond">
276         <h3>Leave a Reply</h3>
277         <div id="cancel-comment-reply">
278           <small><a rel="nofollow" id="cancel-comment-reply-link" href="/combining-jetty-maven-plugin-and-wro4j-maven-plugin-for-dynamic-reloading-of-less-resources/#respond" style="display:none;">Click here to cancel reply.</a></small>
279         </div>
280         <form action="" method="post" id="commentform">
281           <p>Logged in as <a href="">Kai Moritz</a>. <a href=";;_wpnonce=09e5cb501d" title="Log out of this account">Log out &raquo;</a></p>
282           <!--<p><small><strong>XHTML:</strong> You can use these tags: <code>&lt;a href=&quot;&quot; title=&quot;&quot;&gt; &lt;abbr title=&quot;&quot;&gt; &lt;acronym title=&quot;&quot;&gt; &lt;b&gt; &lt;blockquote cite=&quot;&quot;&gt; &lt;cite&gt; &lt;code&gt; &lt;del datetime=&quot;&quot;&gt; &lt;em&gt; &lt;i&gt; &lt;q cite=&quot;&quot;&gt; &lt;strike&gt; &lt;strong&gt; </code></small></p>-->
283           <p><textarea name="comment" id="comment" cols="58" rows="10" tabindex="4"></textarea></p>
284           <p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
285             <input type='hidden' name='comment_post_ID' value='140' id='comment_post_ID' />
286             <input type='hidden' name='comment_parent' id='comment_parent' value='0' />
287           </p>
288           <input type="hidden" id="_wp_unfiltered_html_comment_disabled" name="_wp_unfiltered_html_comment_disabled" value="2096655c89" /><script>(function() {
289       if (window === window.parent) {
290         document.getElementById('_wp_unfiltered_html_comment_disabled').name = '_wp_unfiltered_html_comment';
291       }
292     })();</script>
293           <p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="f31e001227" /></p>
294         </form>
295       </div>
296     </article>
297     <aside layout:fragment="marginalcontent">
298       <div id="secondary" class="widget-area" role="complementary">
299         <aside id="archives" class="widget">
300           <h1 class="widget-title">Archives</h1>
301           <ul>
302             <li><a href='' title='October 2013'>October 2013</a></li>
303             <li><a href='' title='August 2013'>August 2013</a></li>
304             <li><a href='' title='January 2013'>January 2013</a></li>
305             <li><a href='' title='November 2012'>November 2012</a></li>
306           </ul>
307         </aside>
308         <aside id="categories" class="widget">
309           <h1 class="widget-title">Most Used Categories</h1>
310           <ul>
311             <li class="cat-item cat-item-4"><a href="" title="View all posts filed under Java">Java</a> (6)</li>
312             <li class="cat-item cat-item-6"><a href="" title="View all posts filed under Hibernate">Hibernate</a> (5)</li>
313             <li class="cat-item cat-item-8"><a href="" title="View all posts filed under Maven">Maven</a> (5)</li>
314             <li class="cat-item cat-item-9"><a href="" title="View all posts filed under JPA">JPA</a> (1)</li>
315             <li class="cat-item cat-item-10"><a href="" title="View all posts filed under appengine">appengine</a> (1)</li>
316             <li class="cat-item cat-item-11"><a href="" title="View all posts filed under oauth2">oauth2</a> (1)</li>
317           </ul>
318         </aside>
319         <aside id="search" class="widget widget_search">
320           <h1 class="widget-title">Search</h1>
321           <form role="search" method="get" id="searchform" class="searchform" action="">
322             <div>
323               <label class="screen-reader-text" for="s">Search for:</label>
324               <input type="text" value="" name="s" id="s" />
325               <input type="submit" id="searchsubmit" value="Search" />
326             </div>
327           </form>
328         </aside>
329       </div><!-- #secondary .widget-area -->
330       <div id="tertiary" class="widget-area" role="supplementary">
331       </div><!-- #tertiary .widget-area -->
332     </aside>
333   </body>
334 </html>