More Vaadin2016-03-09T15:01:59+00:00http://morevaadin.comNicolas Frankelmailto:learnvaadin(at)frankel(dot)chSASS pre-compilation2015-08-22T00:00:00+00:00http://morevaadin.com/content/sass-pre-compilation
<p>Vaadin 7 comes complete with theming which in turn uses <abbr title="Cascading Style Sheet">CSS</abbr>. Though a back-end developer, I think I know CSS pretty well. Still, working with CSS, with Vaadin or not, is pretty boring and involves a lot of copy-paste. There are two technologies that aim to improve upon this: <a href="http://lesscss.org/">LESS</a> and <a href="http://sass-lang.com/">SASS</a> and Vaadin integrates the later.</p>
<p>Here’s how it works: when the UI is configured with a theme, Vaadin will look for the <code class="highlighter-rouge">styles.css</code> file in the relevant theme folder. If not found, it will search for an alternate <code class="highlighter-rouge">styles.scss</code>. In this case, it will compile the SCSS using its internal compiler and make it available as a regular CSS. This behavior is exactly the same as with <abbr title="Java Server Pages">JSP</abbr> in application servers. This is extremely valuable during development as it prevents compile/deploy cycles and thus saves a lot of valuable time. However, it comes with two problems:</p>
<ul>
<li>The first hit to the themed UI will incur the compile cost</li>
<li>If there’s an issue with the compilation, it will break the application for all pages using the theme</li>
</ul>
<p>As for JSP, it’s advised to pre-compile SCSS for application packages that will be deployed to production environments. Vaadin provides the compiler class as a sort of public API, so it’s quite easy. Basically, you just set the SCSS input and the CSS output and you’re done.</p>
<p>If you use Maven, this is achieved by inserting the following snippet in your POM:</p>
<figure class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt"><plugin></span>
<span class="nt"><groupId></span>org.codehaus.mojo<span class="nt"></groupId></span>
<span class="nt"><artifactId></span>exec-maven-plugin<span class="nt"></artifactId></span>
<span class="nt"><version></span>1.2.1<span class="nt"></version></span>
<span class="nt"><configuration></span>
<span class="nt"><mainClass></span>com.vaadin.sass.SassCompiler<span class="nt"></mainClass></span>
<span class="nt"><arguments></span>
<span class="nt"><argument></span>
${project.basedir}/src/main/webapp/VAADIN/themes/mytheme/styles.scss
<span class="nt"></argument></span>
<span class="nt"><argument></span>${project.build.directory}/styles.css<span class="nt"></argument></span>
<span class="nt"></arguments></span>
<span class="nt"></configuration></span>
<span class="nt"><executions></span>
<span class="nt"><execution></span>
<span class="nt"><goals></span>
<span class="nt"><goal></span>java<span class="nt"></goal></span>
<span class="nt"></goals></span>
<span class="nt"><phase></span>process-resources<span class="nt"></phase></span>
<span class="nt"></execution></span>
<span class="nt"></executions></span>
<span class="nt"></plugin></span></code></pre></figure>
The Table is dead, long live the Grid2015-03-15T00:00:00+00:00http://morevaadin.com/content/table-dead-long-live-grid
<p>Vaadin 7.4.0 is finally out and with it comes the long awaited successor of the <a href="http://vaadin.com/download/release/7.4/7.4.0/docs/api/com/vaadin/ui/Table.html">Table</a> component, the <a href="http://vaadin.com/download/release/7.4/7.4.0/docs/api/com/vaadin/ui/Grid.html">Grid</a>. As for the rest of Vaadin, it’s quite <a href="https://vaadin.com/book/-/page/components.grid.html">well-documented</a>.</p>
<p>This article aims at showing a simple example of this new component to highlights differences with the previous Table. In order to do so, let’s use an existing sample - namely my <a href="https://github.com/nfrankel/vaadin7-workshop/blob/vaadin7.2/src/main/java/ch/frankel/vaadin/workshop/ui/MessageTable.java">Vaadin workshop</a> that displays a table of messages, with date, author, text and a delete button.</p>
<div class="imagecenter">
<img src="/assets/images/table.png" width="610" height="296" />
</div>
<h2 id="first-steps-with-grid">First steps with Grid</h2>
<p>A first draft implementation would look like this:</p>
<div class="highlighter-rouge"><pre class="highlight"><code><span class="kd">public</span> <span class="kd">class</span> <span class="nc">SampleGrid</span> <span class="kd">extends</span> <span class="n">Grid</span> <span class="o">{</span>
<span class="kd">public</span> <span class="n">SampleGrid</span><span class="o">(</span><span class="n">Container</span><span class="o">.</span><span class="na">Indexed</span> <span class="n">indexed</span><span class="o">)</span> <span class="o">{</span>
<span class="n">setContainerDataSource</span><span class="o">(</span><span class="n">indexed</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">}</span>
</code></pre>
</div>
<h2 id="grids-columns">Grid’s columns</h2>
<p>It’s simple and quite straightforward. At this point, nothing distinguishes the new <code class="highlighter-rouge">Grid</code> from the old <code class="highlighter-rouge">Table</code>, only default sortable columns. As most chat applications don’t allow that - and the one from the workshop neither, let’s disable it:</p>
<div class="highlighter-rouge"><pre class="highlight"><code><span class="kd">public</span> <span class="kd">class</span> <span class="nc">SampleGrid</span> <span class="kd">extends</span> <span class="n">Grid</span> <span class="o">{</span>
<span class="kd">public</span> <span class="n">SampleGrid</span><span class="o">(</span><span class="n">Container</span><span class="o">.</span><span class="na">Indexed</span> <span class="n">indexed</span><span class="o">)</span> <span class="o">{</span>
<span class="n">setContainerDataSource</span><span class="o">(</span><span class="n">indexed</span><span class="o">);</span>
<span class="n">getColumns</span><span class="o">().</span><span class="na">stream</span><span class="o">().</span><span class="na">forEach</span><span class="o">(</span><span class="n">c</span> <span class="o">-></span> <span class="n">c</span><span class="o">.</span><span class="na">setSortable</span><span class="o">(</span><span class="kc">false</span><span class="o">));</span>
<span class="o">}</span>
<span class="o">}</span>
</code></pre>
</div>
<p>So the <code class="highlighter-rouge">Grid</code> component has the concept of columns. One can get a reference on a single column column by passing the <code class="highlighter-rouge">propertyId</code> of the underlying item with <code class="highlighter-rouge">getColumn(propertyId)</code> or the sequence of all columns with <code class="highlighter-rouge">getColumns()</code>. Note that Java 8 helps with the handling of each column with the Stream API and a simple lambda’s usage.</p>
<h2 id="wrapped-container">Wrapped container</h2>
<p>The next step is to hide the message’s id column; with <code class="highlighter-rouge">Table</code>, it was achieved by calling <code class="highlighter-rouge">setVisibleColumns()</code> and omitting the <code class="highlighter-rouge">id</code> property in the parameter array. With Vaadin 7.4, the <code class="highlighter-rouge">Container</code> hierarchy has been enriched with the Delegate pattern: the <code class="highlighter-rouge">GeneratedPropertyContainer</code> is a wrapper around another container but offers additional methods, including <code class="highlighter-rouge">removeContainerProperty(propertyId)</code> that effectively hides a property from the wrapped container. This produces the following code:</p>
<div class="highlighter-rouge"><pre class="highlight"><code><span class="kd">public</span> <span class="kd">class</span> <span class="nc">SampleGrid</span> <span class="kd">extends</span> <span class="n">Grid</span> <span class="o">{</span>
<span class="kd">public</span> <span class="n">SampleGrid</span><span class="o">(</span><span class="n">Container</span><span class="o">.</span><span class="na">Indexed</span> <span class="n">indexed</span><span class="o">)</span> <span class="o">{</span>
<span class="n">GeneratedPropertyContainer</span> <span class="n">wrapperContainer</span> <span class="o">=</span> <span class="k">new</span> <span class="n">GeneratedPropertyContainer</span><span class="o">(</span><span class="n">indexed</span><span class="o">);</span>
<span class="n">wrapperContainer</span><span class="o">.</span><span class="na">removeContainerProperty</span><span class="o">(</span><span class="s">"id"</span><span class="o">);</span>
<span class="n">setContainerDataSource</span><span class="o">(</span><span class="n">wrapperContainer</span><span class="o">);</span>
<span class="n">getColumns</span><span class="o">().</span><span class="na">stream</span><span class="o">().</span><span class="na">forEach</span><span class="o">(</span><span class="n">c</span> <span class="o">-></span> <span class="n">c</span><span class="o">.</span><span class="na">setSortable</span><span class="o">(</span><span class="kc">false</span><span class="o">));</span>
<span class="o">}</span>
<span class="o">}</span>
</code></pre>
</div>
<h2 id="renderers">Renderers</h2>
<p>Now, let’s format the date column. With <code class="highlighter-rouge">Table</code>, it required implementing a dedicated <code class="highlighter-rouge">ColumnGenerator</code>. At first glance, it seems using the <code class="highlighter-rouge">addGeneratedProperty</code> of the wrapped container mentioned in the above section would be the thing to do. However, for simple formatting issues, Vaadin 7.4 provides a <code class="highlighter-rouge">Renderer</code> interface: any column can be set such a renderer. Icing on the cake, a <code class="highlighter-rouge">DateRenderer</code> is provided that accepts a format string as an argument.</p>
<div class="highlighter-rouge"><pre class="highlight"><code><span class="kd">public</span> <span class="kd">class</span> <span class="nc">SampleGrid</span> <span class="kd">extends</span> <span class="n">Grid</span> <span class="o">{</span>
<span class="kd">private</span> <span class="kd">static</span> <span class="kd">final</span> <span class="n">String</span> <span class="n">FORMAT</span> <span class="o">=</span> <span class="s">"%1$td/%1$tm/%1$tY %1$tH:%1$tM:%1$tS"</span><span class="o">;</span>
<span class="kd">public</span> <span class="n">SampleGrid</span><span class="o">(</span><span class="n">Container</span><span class="o">.</span><span class="na">Indexed</span> <span class="n">indexed</span><span class="o">)</span> <span class="o">{</span>
<span class="n">GeneratedPropertyContainer</span> <span class="n">wrapperContainer</span> <span class="o">=</span> <span class="k">new</span> <span class="n">GeneratedPropertyContainer</span><span class="o">(</span><span class="n">indexed</span><span class="o">);</span>
<span class="n">wrapperContainer</span><span class="o">.</span><span class="na">removeContainerProperty</span><span class="o">(</span><span class="s">"id"</span><span class="o">);</span>
<span class="n">setContainerDataSource</span><span class="o">(</span><span class="n">wrapperContainer</span><span class="o">);</span>
<span class="n">getColumn</span><span class="o">(</span><span class="s">"timeStamp"</span><span class="o">).</span><span class="na">setRenderer</span><span class="o">(</span><span class="k">new</span> <span class="n">DateRenderer</span><span class="o">(</span><span class="n">FORMAT</span><span class="o">));</span>
<span class="n">getColumns</span><span class="o">().</span><span class="na">stream</span><span class="o">().</span><span class="na">forEach</span><span class="o">(</span><span class="n">c</span> <span class="o">-></span> <span class="n">c</span><span class="o">.</span><span class="na">setSortable</span><span class="o">(</span><span class="kc">false</span><span class="o">));</span>
<span class="o">}</span>
<span class="o">}</span>
</code></pre>
</div>
<p>Note the format string uses the pattern from <a href="http://docs.oracle.com/javase/7/docs/api/java/util/Formatter.html"><code class="highlighter-rouge">Formatter</code></a>, not from <a href="http://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html"><code class="highlighter-rouge">SimpleDateFormat</code></a>.</p>
<h2 id="multi-selection">Multi-selection</h2>
<p>The last task is to add the delete feature. Out-of-the-box, setting the selection mode to multi create a new column with checkboxes to select multiple lines:</p>
<div class="highlighter-rouge"><pre class="highlight"><code><span class="kd">public</span> <span class="kd">class</span> <span class="nc">SampleGrid</span> <span class="kd">extends</span> <span class="n">Grid</span> <span class="o">{</span>
<span class="kd">private</span> <span class="kd">static</span> <span class="kd">final</span> <span class="n">String</span> <span class="n">FORMAT</span> <span class="o">=</span> <span class="s">"%1$td/%1$tm/%1$tY %1$tH:%1$tM:%1$tS"</span><span class="o">;</span>
<span class="kd">public</span> <span class="n">SampleGrid</span><span class="o">(</span><span class="n">Container</span><span class="o">.</span><span class="na">Indexed</span> <span class="n">indexed</span><span class="o">)</span> <span class="o">{</span>
<span class="n">GeneratedPropertyContainer</span> <span class="n">wrapperContainer</span> <span class="o">=</span> <span class="k">new</span> <span class="n">GeneratedPropertyContainer</span><span class="o">(</span><span class="n">indexed</span><span class="o">);</span>
<span class="n">wrapperContainer</span><span class="o">.</span><span class="na">removeContainerProperty</span><span class="o">(</span><span class="s">"id"</span><span class="o">);</span>
<span class="n">setContainerDataSource</span><span class="o">(</span><span class="n">wrapperContainer</span><span class="o">);</span>
<span class="n">getColumn</span><span class="o">(</span><span class="s">"timeStamp"</span><span class="o">).</span><span class="na">setRenderer</span><span class="o">(</span><span class="k">new</span> <span class="n">DateRenderer</span><span class="o">(</span><span class="n">FORMAT</span><span class="o">));</span>
<span class="n">getColumns</span><span class="o">().</span><span class="na">stream</span><span class="o">().</span><span class="na">forEach</span><span class="o">(</span><span class="n">c</span> <span class="o">-></span> <span class="n">c</span><span class="o">.</span><span class="na">setSortable</span><span class="o">(</span><span class="kc">false</span><span class="o">));</span>
<span class="n">setSelectionMode</span><span class="o">(</span><span class="n">SelectionMode</span><span class="o">.</span><span class="na">MULTI</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">}</span>
</code></pre>
</div>
<p>Then, just create a simple button that will delete all selected lines. This gets the job done. However, this is not the original design: in the above screenshot, each line provides its own dedicated button. Pro, you have to click on the selected line so you prevent most mistakes; con, you cannot batch delete.</p>
<p>Along with the date renderer, Vaadin 7.4 also provides a <code class="highlighter-rouge">ButtonRenderer</code> that accepts a <code class="highlighter-rouge">RenderClickListener</code> to add behavior. This only needs to be set on the <code class="highlighter-rouge">id</code> column.</p>
<div class="highlighter-rouge"><pre class="highlight"><code><span class="kd">public</span> <span class="kd">class</span> <span class="nc">SampleGrid</span> <span class="kd">extends</span> <span class="n">Grid</span> <span class="o">{</span>
<span class="kd">private</span> <span class="kd">static</span> <span class="kd">final</span> <span class="n">String</span> <span class="n">FORMAT</span> <span class="o">=</span> <span class="s">"%1$td/%1$tm/%1$tY %1$tH:%1$tM:%1$tS"</span><span class="o">;</span>
<span class="kd">public</span> <span class="n">SampleGrid</span><span class="o">(</span><span class="n">Container</span><span class="o">.</span><span class="na">Indexed</span> <span class="n">indexed</span><span class="o">)</span> <span class="o">{</span>
<span class="n">GeneratedPropertyContainer</span> <span class="n">wrapperContainer</span> <span class="o">=</span> <span class="k">new</span> <span class="n">GeneratedPropertyContainer</span><span class="o">(</span><span class="n">indexed</span><span class="o">);</span>
<span class="n">setContainerDataSource</span><span class="o">(</span><span class="n">wrapperContainer</span><span class="o">);</span>
<span class="n">getColumn</span><span class="o">(</span><span class="s">"timeStamp"</span><span class="o">).</span><span class="na">setRenderer</span><span class="o">(</span><span class="k">new</span> <span class="n">DateRenderer</span><span class="o">(</span><span class="n">FORMAT</span><span class="o">));</span>
<span class="n">getColumn</span><span class="o">(</span><span class="s">"id"</span><span class="o">).</span><span class="na">setRenderer</span><span class="o">(</span><span class="k">new</span> <span class="n">ButtonRenderer</span><span class="o">(</span><span class="n">event</span> <span class="o">-></span> <span class="o">{</span>
<span class="n">Object</span> <span class="n">itemId</span> <span class="o">=</span> <span class="n">event</span><span class="o">.</span><span class="na">getItemId</span><span class="o">();</span>
<span class="n">indexed</span><span class="o">.</span><span class="na">removeItem</span><span class="o">(</span><span class="n">itemId</span><span class="o">);</span>
<span class="o">}));</span>
<span class="n">getColumns</span><span class="o">().</span><span class="na">stream</span><span class="o">().</span><span class="na">forEach</span><span class="o">(</span><span class="n">c</span> <span class="o">-></span> <span class="n">c</span><span class="o">.</span><span class="na">setSortable</span><span class="o">(</span><span class="kc">false</span><span class="o">));</span>
<span class="n">setSelectionMode</span><span class="o">(</span><span class="n">SelectionMode</span><span class="o">.</span><span class="na">MULTI</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">}</span>
</code></pre>
</div>
<p>The downside of this approach is that you cannot change the button’s label as it is taken from the underlying object with no way of changing it. In this case, the message’s id will be displayed in a button and users might cluelessly delete the message. That’s out of the question.</p>
<p>This makes it only slightly more complex as we need to add a dedicated container property that always returns the wanted button label and assign it the renderer from above. The final code looks like the following:</p>
<div class="highlighter-rouge"><pre class="highlight"><code><span class="kd">public</span> <span class="kd">class</span> <span class="nc">SampleGrid</span> <span class="kd">extends</span> <span class="n">Grid</span> <span class="o">{</span>
<span class="kd">private</span> <span class="kd">static</span> <span class="kd">final</span> <span class="n">String</span> <span class="n">FORMAT</span> <span class="o">=</span> <span class="s">"%1$td/%1$tm/%1$tY %1$tH:%1$tM:%1$tS"</span><span class="o">;</span>
<span class="kd">public</span> <span class="n">SampleGrid</span><span class="o">(</span><span class="n">Container</span><span class="o">.</span><span class="na">Indexed</span> <span class="n">indexed</span><span class="o">)</span> <span class="o">{</span>
<span class="n">GeneratedPropertyContainer</span> <span class="n">wrapperContainer</span> <span class="o">=</span> <span class="k">new</span> <span class="n">GeneratedPropertyContainer</span><span class="o">(</span><span class="n">indexed</span><span class="o">);</span>
<span class="n">wrapperContainer</span><span class="o">.</span><span class="na">removeContainerProperty</span><span class="o">(</span><span class="s">"id"</span><span class="o">);</span>
<span class="n">setContainerDataSource</span><span class="o">(</span><span class="n">wrapperContainer</span><span class="o">);</span>
<span class="n">wrapperContainer</span><span class="o">.</span><span class="na">addGeneratedProperty</span><span class="o">(</span><span class="s">"delete"</span><span class="o">,</span> <span class="k">new</span> <span class="n">PropertyValueGenerator</span><span class="o"><</span><span class="n">String</span><span class="o">>()</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="n">String</span> <span class="n">getValue</span><span class="o">(</span><span class="n">Item</span> <span class="n">item</span><span class="o">,</span> <span class="n">Object</span> <span class="n">itemId</span><span class="o">,</span> <span class="n">Object</span> <span class="n">propertyId</span><span class="o">)</span> <span class="o">{</span>
<span class="k">return</span> <span class="s">"Delete"</span><span class="o">;</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="n">Class</span><span class="o"><</span><span class="n">String</span><span class="o">></span> <span class="n">getType</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="n">String</span><span class="o">.</span><span class="na">class</span><span class="o">;</span>
<span class="o">}</span>
<span class="o">});</span>
<span class="n">getColumn</span><span class="o">(</span><span class="s">"delete"</span><span class="o">).</span><span class="na">setRenderer</span><span class="o">(</span><span class="k">new</span> <span class="n">ButtonRenderer</span><span class="o">(</span><span class="n">event</span> <span class="o">-></span> <span class="o">{</span>
<span class="n">Object</span> <span class="n">itemId</span> <span class="o">=</span> <span class="n">event</span><span class="o">.</span><span class="na">getItemId</span><span class="o">();</span>
<span class="n">indexed</span><span class="o">.</span><span class="na">removeItem</span><span class="o">(</span><span class="n">itemId</span><span class="o">);</span>
<span class="o">}));</span>
<span class="n">getColumn</span><span class="o">(</span><span class="s">"timeStamp"</span><span class="o">).</span><span class="na">setRenderer</span><span class="o">(</span><span class="k">new</span> <span class="n">DateRenderer</span><span class="o">(</span><span class="n">FORMAT</span><span class="o">));</span>
<span class="n">getColumns</span><span class="o">().</span><span class="na">stream</span><span class="o">().</span><span class="na">forEach</span><span class="o">(</span><span class="n">c</span> <span class="o">-></span> <span class="n">c</span><span class="o">.</span><span class="na">setSortable</span><span class="o">(</span><span class="kc">false</span><span class="o">));</span>
<span class="o">}</span>
<span class="o">}</span>
</code></pre>
</div>
<p>A new generated property is added with the <code class="highlighter-rouge">PropertyValueGenerator</code> always returning the string <code class="highlighter-rouge">Delete</code>. More advanced requirements could use a <code class="highlighter-rouge">Locale</code> to have a display depending on the user preferences, but this code is enough for ours. Note the button renderer is kept but assigned to the new <code class="highlighter-rouge">delete</code> generated column instead of the id’s. Finally, the multiselection mode has to be removed.</p>
<h2 id="header">Header</h2>
<p>The final touch is to remove the column headers as befits any chat application. This is simply done with <code class="highlighter-rouge">setHeaderVisible(false)</code>.</p>
<p>The final result looks like the original table, while saving some lines of code.</p>
<div class="imagecenter">
<img src="/assets/images/grid.png" width="643" height="217" />
</div>
<p>The code for this article can be browsed and forked on <a href="https://github.com/nfrankel/More-Vaadin/tree/master/grid-example">Github</a>.</p>
Easy theming with Valo2014-09-07T00:00:00+00:00http://morevaadin.com/content/easy-theming-with-valo
<p>I’m not a front-end designer and that’s the main reason why I love Vaadin. The framework lets you create professionally looking applications with no front-end skills. However, let’s face it: to create your own theme is not really easy (as a reminder, please check <a href="/content/theming-and-custom-layout">this previous post</a> and <a href="/content/vaadin-eases-your-theme-development">this one</a>), and the Vaadin team even recommends to use an existing theme and tweak it..</p>
<p>Contrary to other themes and thanks to the power of <a href="http://sass-lang.com/">Syntactically Awesome Style Sheets</a>, Valo offers plenty of specific hooks in the form of functions and mixins to create new themes in a very easy way.</p>
<p>Those can be categorized into the following settings:</p>
<ul>
<li>General: general settings cover background color and line height</li>
<li>Font: font settings govern… font, including size, weight, color and family</li>
<li>Layout: layout settings configure the spacing and margin. It is finally possible to easily manage those parameters beside <code class="highlighter-rouge">layout.setMargin()</code> and <code class="highlighter-rouge">layout.setSpacing()</code>!</li>
<li>Component: component settings are realted to focus, border, shadow, gradient, etc.</li>
<li>Compilation and optimization: thos settings can tweak the compilation process</li>
</ul>
<p>Valo is really well documented, but here’s a small example of a custom <code class="highlighter-rouge">styles.scss</code> file for a so-called <code class="highlighter-rouge">custom</code> theme located under <code class="highlighter-rouge">${webroot}/VAADIN/themes/custom/styles.scss</code>:</p>
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="o">//</span> <span class="nt">General</span> <span class="nt">Settings</span>
<span class="err">$</span><span class="nt">v-app-loading-text</span><span class="o">:</span> <span class="err">"</span><span class="nt">Loading</span> <span class="nt">app</span><span class="o">,</span> <span class="nt">please</span> <span class="nt">wait</span><span class="o">...</span><span class="err">"</span><span class="o">;</span>
<span class="err">$</span><span class="nt">v-background-color</span><span class="o">:</span> <span class="nf">#0ea5d7</span><span class="o">;</span>
<span class="err">$</span><span class="nt">v-app-background-color</span><span class="o">:</span> <span class="nt">lighten</span><span class="o">(</span><span class="err">$</span><span class="nt">v-background-color</span><span class="o">,</span> <span class="nt">80</span><span class="o">%);</span>
<span class="o">//</span> <span class="nt">Font</span> <span class="nt">Settings</span>
<span class="err">$</span><span class="nt">v-font-color</span><span class="o">:</span> <span class="nf">#464440</span><span class="o">;</span>
<span class="err">$</span><span class="nt">v-font-size</span><span class="o">:</span> <span class="nt">14px</span><span class="o">;</span>
<span class="err">$</span><span class="nt">v-font-family</span><span class="o">:</span> <span class="nt">Helvetica</span><span class="o">,</span> <span class="nt">sans-serif</span><span class="o">;</span>
<span class="o">//</span> <span class="nt">Component</span> <span class="nt">Features</span>
<span class="err">$</span><span class="nt">v-border-radius</span><span class="o">:</span> <span class="nt">0px</span><span class="o">;</span>
<span class="err">$</span><span class="nt">v-border</span><span class="o">:</span> <span class="nt">2px</span> <span class="nt">solid</span> <span class="nt">v-tone</span><span class="o">;</span>
<span class="err">$</span><span class="nt">v-gradient</span><span class="o">:</span> <span class="nt">v-linear</span> <span class="nt">20</span><span class="o">%;</span>
<span class="err">$</span><span class="nt">v-focus-style</span><span class="o">:</span> <span class="nt">0</span> <span class="nt">0</span> <span class="nt">0</span> <span class="nt">1px</span> <span class="nt">v-tint</span><span class="o">;</span>
<span class="k">@import</span> <span class="s1">"../valo/valo"</span><span class="p">;</span></code></pre></figure>
<p>Valo comes with a bunch of documentation and resources, including:</p>
<ul>
<li>The Book of Vaadin has a dedicated chapter dedicated to the <a href="https://vaadin.com/book/vaadin7/-/page/themes.valo.html">Valo theme</a></li>
<li>The <a href="https://vaadin.com/api/valo/">SASS documentation</a> generated by the <code class="highlighter-rouge">.scss</code> file</li>
<li>Finally, this <a href="https://github.com/nfrankel/More-Vaadin/tree/master/valo-theme-example">Github sub-project</a> uses the above snippet to display some components</li>
</ul>
The right usage of lambdas with event listeners2014-04-13T00:00:00+00:00http://morevaadin.com/content/lambdas-java-8
<p>There’s been much advertisement about how Java 8’s lambdas bring a big asset to Vaadin development. The following is a pre-Java 8 usage of a <code class="highlighter-rouge">ClickListener</code>:</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">button</span><span class="o">.</span><span class="na">addClickListener</span><span class="o">(</span><span class="k">new</span> <span class="n">Button</span><span class="o">.</span><span class="na">ClickListener</span><span class="o">()</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">buttonClick</span><span class="o">(</span><span class="n">Button</span><span class="o">.</span><span class="na">ClickEvent</span> <span class="n">event</span><span class="o">)</span> <span class="o">{</span>
<span class="n">container</span><span class="o">.</span><span class="na">addComponent</span><span class="o">(</span><span class="k">new</span> <span class="n">Label</span><span class="o">(</span><span class="s">"Button clicked"</span><span class="o">));</span>
<span class="o">}</span>
<span class="o">});</span></code></pre></figure>
<p>Java 8’s lambda make it much easier, as this snippet shows:</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">button</span><span class="o">.</span><span class="na">addClickListener</span><span class="o">(</span><span class="n">e</span> <span class="o">-></span> <span class="n">container</span><span class="o">.</span><span class="na">addComponent</span><span class="o">(</span><span class="k">new</span> <span class="n">Label</span><span class="o">(</span><span class="s">"Button clicked"</span><span class="o">)));</span></code></pre></figure>
<p>However, it is my opinion, that using lambdas this way leads to bad architecture and unmaintainable design, for it strongly couples GUI components and behavior.</p>
<p>Object-oriented design should follow <a href="http://en.wikipedia.org/wiki/SOLID_%28object-oriented_design%29">SOLID</a> principles, first among them being the <a href="http://en.wikipedia.org/wiki/Single_responsibility_principle">Single Responsibility Principle</a>:</p>
<blockquote>
<p>In object-oriented programming, the single responsibility principle states that every class should have a single responsibility, and that responsibility should be entirely encapsulated by the class. All its services should be narrowly aligned with that responsibility.</p>
</blockquote>
<p>Using lambdas as in the previous snippet just defeats this principle. Enforcing it requires a dedicated class for the behavior:</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">ShowLabelListener</span> <span class="kd">implements</span> <span class="n">Button</span><span class="o">.</span><span class="na">ClickListener</span> <span class="o">{</span>
<span class="kd">private</span> <span class="kd">final</span> <span class="n">Container</span> <span class="n">container</span><span class="o">;</span>
<span class="kd">public</span> <span class="n">ShowLabelListener</span><span class="o">(</span><span class="n">Container</span> <span class="n">container</span><span class="o">)</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="na">container</span> <span class="o">=</span> <span class="n">container</span><span class="o">;</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">buttonClick</span><span class="o">(</span><span class="n">Button</span><span class="o">.</span><span class="na">ClickEvent</span> <span class="n">event</span><span class="o">)</span> <span class="o">{</span>
<span class="n">container</span><span class="o">.</span><span class="na">addComponent</span><span class="o">(</span><span class="k">new</span> <span class="n">Label</span><span class="o">(</span><span class="s">"Button clicked"</span><span class="o">));</span>
<span class="o">}</span>
<span class="o">}</span></code></pre></figure>
<p>Not only is this snippet sound Object-Oriented design, it allows to pass parameters to the constructor and store them as attributes. Usage of this listener would be as the following:</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">button</span><span class="o">.</span><span class="na">addClickListener</span><span class="o">(</span><span class="k">new</span> <span class="n">ShowLabelListener</span><span class="o">(</span><span class="n">container</span><span class="o">));</span></code></pre></figure>
<p>Storing the container as an attribute in the listener is better than using lambdas directly, but introduces strong coupling from the behavior to the GUI in the form of an association. In this regard, I’ve already introduced Guava’s <a href="http://code.google.com/p/guava-libraries/wiki/EventBusExplained">EventBus</a> in a former <a href="../another-way-decouple-your-server-components">post</a>.</p>
<p>This would translate into the following code:</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">ButtonClickedEvent</span> <span class="o">{</span>
<span class="kd">private</span> <span class="n">ComponentContainer</span> <span class="n">container</span><span class="o">;</span>
<span class="kd">public</span> <span class="n">ButtonClickedEvent</span><span class="o">(</span><span class="n">ComponentContainer</span> <span class="n">container</span><span class="o">)</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="na">container</span> <span class="o">=</span> <span class="n">container</span><span class="o">;</span>
<span class="o">}</span>
<span class="kd">public</span> <span class="n">ComponentContainer</span> <span class="n">getContainer</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="n">container</span><span class="o">;</span>
<span class="o">}</span>
<span class="o">}</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">ShowClickMeListener</span> <span class="o">{</span>
<span class="nd">@Subscribe</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">onClick</span><span class="o">(</span><span class="n">ButtonClickedEvent</span> <span class="n">event</span><span class="o">)</span> <span class="o">{</span>
<span class="n">event</span><span class="o">.</span><span class="na">getContainer</span><span class="o">().</span><span class="na">addComponent</span><span class="o">(</span><span class="k">new</span> <span class="n">Label</span><span class="o">(</span><span class="s">"Button clicked"</span><span class="o">));</span>
<span class="o">}</span>
<span class="o">}</span></code></pre></figure>
<p>Usage then becomes:</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">button</span><span class="o">.</span><span class="na">addClickListener</span><span class="o">(</span><span class="k">new</span> <span class="n">Button</span><span class="o">.</span><span class="na">ClickListener</span><span class="o">()</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">buttonClick</span><span class="o">(</span><span class="n">Button</span><span class="o">.</span><span class="na">ClickEvent</span> <span class="n">event</span><span class="o">)</span> <span class="o">{</span>
<span class="n">bus</span><span class="o">.</span><span class="na">post</span><span class="o">(</span><span class="k">new</span> <span class="n">ButtonClickedEvent</span><span class="o">(</span><span class="n">container</span><span class="o">));</span>
<span class="o">}</span>
<span class="o">});</span>
<span class="n">eventBus</span><span class="o">.</span><span class="na">register</span><span class="o">(</span><span class="k">new</span> <span class="n">ShowClickMeListener</span><span class="o">());</span></code></pre></figure>
<p>Of course, this is a little verbose, and that’s when lambdas come in here handy. The previous snippet can be updated with Java 8’s lambdas as:</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">button</span><span class="o">.</span><span class="na">addClickListener</span><span class="o">(</span><span class="n">e</span> <span class="o">-></span> <span class="n">bus</span><span class="o">.</span><span class="na">post</span><span class="o">(</span><span class="k">new</span> <span class="n">ButtonClickedEvent</span><span class="o">(</span><span class="n">container</span><span class="o">)));</span>
<span class="n">eventBus</span><span class="o">.</span><span class="na">register</span><span class="o">(</span><span class="k">new</span> <span class="n">ShowClickMeListener</span><span class="o">());</span></code></pre></figure>
<p>IMHO, this is the right usage of lambdas in regard to Vaadin event listeners.</p>
<p>You can find relevant sources for this article on <a href="https://github.com/nfrankel/More-Vaadin/tree/master/lambda">Github</a>.</p>
Spring Boot and JavaConfig integration2014-03-08T00:00:00+00:00http://morevaadin.com/content/springboot-integration
<p>Java EE in general and Context and Dependency Injection has been part of the Vaadin ecosystem since ages. Recently, <a href="https://github.com/peholmst/vaadin4spring">Spring Vaadin</a> is a joint effort of the Vaadin and the Spring teams to bring the Spring framework into the Vaadin ecosystem, lead by <a href="https://twitter.com/petterholmstrom">Petter Holmström</a> for Vaadin and <a href="https://twitter.com/starbuxman">Josh Long</a> for Pivotal.</p>
<p>Integration is based on the <a href="http://projects.spring.io/spring-boot/">Spring Boot</a> project - and its sub-modules, that aims to ease creating new Spring web projects. This article assumes the reader is familiar enough with Spring Boot. If not the case, please take some time to get to understand basic notions about the library.</p>
<p>Note that at the time of this writing, there’s no release for Spring Vaadin. You’ll need to clone the project and build it yourself.</p>
<p>The first step is to create the UI. In order to display usage of Spring’s Dependency Injection, it should use a service dependency. Let’s injection the UI through Constructor Injection to favor immutability. The only addition to a <em>standard</em> UI is to annotate it with <code class="highlighter-rouge">org.vaadin.spring.@VaadinUI</code>.</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="nd">@VaadinUI</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">VaadinSpringExampleUi</span> <span class="kd">extends</span> <span class="n">UI</span> <span class="o">{</span>
<span class="kd">private</span> <span class="n">HelloService</span> <span class="n">helloService</span><span class="o">;</span>
<span class="kd">public</span> <span class="n">VaadinSpringExampleUi</span><span class="o">(</span><span class="n">HelloService</span> <span class="n">helloService</span><span class="o">)</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="na">helloService</span> <span class="o">=</span> <span class="n">helloService</span><span class="o">;</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">protected</span> <span class="kt">void</span> <span class="n">init</span><span class="o">(</span><span class="n">VaadinRequest</span> <span class="n">vaadinRequest</span><span class="o">)</span> <span class="o">{</span>
<span class="n">String</span> <span class="n">hello</span> <span class="o">=</span> <span class="n">helloService</span><span class="o">.</span><span class="na">sayHello</span><span class="o">();</span>
<span class="n">setContent</span><span class="o">(</span><span class="k">new</span> <span class="n">Label</span><span class="o">(</span><span class="n">hello</span><span class="o">));</span>
<span class="o">}</span>
<span class="o">}</span></code></pre></figure>
<p>The second step is standard Spring Java configuration. Let’s create two configuration classes, one for the main context and the other for the web one. Two thing of note:</p>
<ol>
<li>The method instantiating the previous UI has to be annotated with <code class="highlighter-rouge">org.vaadin.spring.@UIScope</code> <strong>in addition</strong> to standard Spring <code class="highlighter-rouge">org.springframework.context.annotation.@Bean</code> to bind the bean lifecycle to the new scope provided by the Spring Vaadin library.</li>
<li>At the time of this writing, a <code class="highlighter-rouge">RequestContextListener</code> bean must be provided. In order to be compliant with future versions of the library, it’s a good practice to annotate the instantiating method with <code class="highlighter-rouge">@ConditionalOnMissingBean(RequestContextListener.class)</code>.</li>
</ol>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="nd">@Configuration</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">MainConfig</span> <span class="o">{</span>
<span class="nd">@Bean</span>
<span class="kd">public</span> <span class="n">HelloService</span> <span class="n">helloService</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="n">HelloService</span><span class="o">();</span>
<span class="o">}</span>
<span class="o">}</span>
<span class="nd">@Configuration</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">WebConfig</span> <span class="kd">extends</span> <span class="n">MainConfig</span> <span class="o">{</span>
<span class="nd">@Bean</span>
<span class="nd">@ConditionalOnMissingBean</span><span class="o">(</span><span class="n">RequestContextListener</span><span class="o">.</span><span class="na">class</span><span class="o">)</span>
<span class="kd">public</span> <span class="n">RequestContextListener</span> <span class="n">requestContextListener</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="n">RequestContextListener</span><span class="o">();</span>
<span class="o">}</span>
<span class="nd">@Bean</span>
<span class="nd">@UIScope</span>
<span class="kd">public</span> <span class="n">VaadinSpringExampleUi</span> <span class="n">exampleUi</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="n">VaadinSpringExampleUi</span><span class="o">(</span><span class="n">helloService</span><span class="o">());</span>
<span class="o">}</span>
<span class="o">}</span></code></pre></figure>
<p>The final step is to create a dedicated <code class="highlighter-rouge">WebApplicationInitializer</code>. Spring Boot already offers a concrete implementation, we just need to reference our previous configuration classes as well as those provided by Spring Vaadin, namely <code class="highlighter-rouge">VaadinAutoConfiguration</code> and <code class="highlighter-rouge">VaadinConfiguration</code>.</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">ApplicationInitializer</span> <span class="kd">extends</span> <span class="n">SpringBootServletInitializer</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">protected</span> <span class="n">SpringApplicationBuilder</span> <span class="n">configure</span><span class="o">(</span><span class="n">SpringApplicationBuilder</span> <span class="n">application</span><span class="o">)</span> <span class="o">{</span>
<span class="k">return</span> <span class="n">application</span><span class="o">.</span><span class="na">showBanner</span><span class="o">(</span><span class="kc">false</span><span class="o">)</span>
<span class="o">.</span><span class="na">sources</span><span class="o">(</span><span class="n">MainConfig</span><span class="o">.</span><span class="na">class</span><span class="o">)</span>
<span class="o">.</span><span class="na">sources</span><span class="o">(</span><span class="n">VaadinAutoConfiguration</span><span class="o">.</span><span class="na">class</span><span class="o">,</span> <span class="n">VaadinConfiguration</span><span class="o">.</span><span class="na">class</span><span class="o">)</span>
<span class="o">.</span><span class="na">sources</span><span class="o">(</span><span class="n">WebConfig</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>At this point, we demonstrated a working Spring Vaadin sample application.</p>
<p>Code for this article can be browsed and forked on <a href="https://github.com/nfrankel/More-Vaadin/tree/master/springboot-example">Github</a>.</p>
Dynamic Vaadin servlet registration2013-07-06T00:00:00+00:00http://morevaadin.com/content/dynamic-vaadin-servlet-registration
<p>Servlet 3.0 is part of Java EE 6 and offers dynamic servlet registration. This feature let us automatically register servlets without the need of a web deployment descriptor in our webapp. Spring already provides this for its own DispatcherServlet with <a href="http://static.springsource.org/spring/docs/3.2.x/javadoc-api/org/springframework/web/SpringServletContainerInitializer.html"><code class="highlighter-rouge">SpringServletContainerInitializer</code></a>.</p>
<p>This approach has for main advantage to use Java code and thus to compile-time type-checking. It would be nice to have the same one for Vaadin servlet. In order to achieve this, we need two classes, one entry-point and another for registration proper.</p>
<p>The registration class sole responsibility is to dynamically register the Vaadin servlet(s). We can design it however we choose, we need to access the servlet context for registration purpose. We also need to create programmatic setters to handle previously available servlet initialization parameters. Even better, we could choose to put in place sensible defaults. Here’s such an example:</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="kd">public</span> <span class="kd">abstract</span> <span class="kd">class</span> <span class="nc">SingleRootVaadinRegistar</span> <span class="o">{</span>
<span class="kd">private</span> <span class="kd">static</span> <span class="kd">final</span> <span class="n">String</span> <span class="n">UI</span> <span class="o">=</span> <span class="s">"UI"</span><span class="o">;</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">register</span><span class="o">(</span><span class="n">ServletContext</span> <span class="n">context</span><span class="o">)</span> <span class="o">{</span>
<span class="n">ServletRegistration</span><span class="o">.</span><span class="na">Dynamic</span> <span class="n">servlet</span> <span class="o">=</span> <span class="n">context</span><span class="o">.</span><span class="na">addServlet</span><span class="o">(</span><span class="n">getServletName</span><span class="o">(),</span> <span class="k">new</span> <span class="n">VaadinServlet</span><span class="o">());</span>
<span class="k">if</span> <span class="o">(</span><span class="n">getLoadOnStartup</span><span class="o">().</span><span class="na">isPresent</span><span class="o">())</span> <span class="o">{</span>
<span class="n">servlet</span><span class="o">.</span><span class="na">setLoadOnStartup</span><span class="o">(</span><span class="n">getLoadOnStartup</span><span class="o">().</span><span class="na">get</span><span class="o">().</span><span class="na">intValue</span><span class="o">());</span>
<span class="o">}</span>
<span class="k">for</span> <span class="o">(</span><span class="n">String</span> <span class="n">mapping</span> <span class="o">:</span> <span class="n">getMappings</span><span class="o">())</span> <span class="o">{</span>
<span class="n">servlet</span><span class="o">.</span><span class="na">addMapping</span><span class="o">(</span><span class="n">mapping</span><span class="o">);</span>
<span class="o">}</span>
<span class="n">Map</span><span class="o"><</span><span class="n">String</span><span class="o">,</span> <span class="n">String</span><span class="o">></span> <span class="n">initParams</span> <span class="o">=</span> <span class="k">new</span> <span class="n">HashMap</span><span class="o"><</span><span class="n">String</span><span class="o">,</span> <span class="n">String</span><span class="o">>();</span>
<span class="k">if</span> <span class="o">(</span><span class="n">getUi</span><span class="o">().</span><span class="na">isPresent</span><span class="o">())</span> <span class="o">{</span>
<span class="n">initParams</span><span class="o">.</span><span class="na">put</span><span class="o">(</span><span class="n">UI</span><span class="o">,</span> <span class="n">getUi</span><span class="o">().</span><span class="na">get</span><span class="o">().</span><span class="na">toString</span><span class="o">());</span>
<span class="o">}</span>
<span class="k">if</span> <span class="o">(</span><span class="n">getUiProvider</span><span class="o">().</span><span class="na">isPresent</span><span class="o">())</span> <span class="o">{</span>
<span class="n">initParams</span><span class="o">.</span><span class="na">put</span><span class="o">(</span><span class="n">SERVLET_PARAMETER_UI_PROVIDER</span><span class="o">,</span> <span class="n">getUiProvider</span><span class="o">().</span><span class="na">get</span><span class="o">().</span><span class="na">toString</span><span class="o">());</span>
<span class="o">}</span>
<span class="k">if</span> <span class="o">(</span><span class="n">isProductionMode</span><span class="o">().</span><span class="na">isPresent</span><span class="o">())</span> <span class="o">{</span>
<span class="n">initParams</span><span class="o">.</span><span class="na">put</span><span class="o">(</span><span class="n">SERVLET_PARAMETER_PRODUCTION_MODE</span><span class="o">,</span> <span class="n">String</span><span class="o">.</span><span class="na">valueOf</span><span class="o">(</span><span class="n">isProductionMode</span><span class="o">().</span><span class="na">get</span><span class="o">().</span><span class="na">booleanValue</span><span class="o">()));</span>
<span class="o">}</span>
<span class="k">if</span> <span class="o">(</span><span class="n">getWidgetSet</span><span class="o">().</span><span class="na">isPresent</span><span class="o">())</span> <span class="o">{</span>
<span class="n">initParams</span><span class="o">.</span><span class="na">put</span><span class="o">(</span><span class="n">PARAMETER_WIDGETSET</span><span class="o">,</span> <span class="n">getWidgetSet</span><span class="o">().</span><span class="na">get</span><span class="o">());</span>
<span class="o">}</span>
<span class="k">if</span> <span class="o">(</span><span class="n">isXsrfProtectionDisabled</span><span class="o">().</span><span class="na">isPresent</span><span class="o">())</span> <span class="o">{</span>
<span class="n">initParams</span><span class="o">.</span><span class="na">put</span><span class="o">(</span><span class="n">SERVLET_PARAMETER_DISABLE_XSRF_PROTECTION</span><span class="o">,</span> <span class="n">String</span><span class="o">.</span><span class="na">valueOf</span><span class="o">(</span><span class="n">isXsrfProtectionDisabled</span><span class="o">().</span><span class="na">get</span><span class="o">().</span><span class="na">booleanValue</span><span class="o">()));</span>
<span class="o">}</span>
<span class="k">if</span> <span class="o">(</span><span class="n">getCheckHeartBeatInterval</span><span class="o">().</span><span class="na">isPresent</span><span class="o">())</span> <span class="o">{</span>
<span class="n">initParams</span><span class="o">.</span><span class="na">put</span><span class="o">(</span><span class="n">SERVLET_PARAMETER_HEARTBEAT_INTERVAL</span><span class="o">,</span> <span class="n">String</span><span class="o">.</span><span class="na">valueOf</span><span class="o">(</span><span class="n">getCheckHeartBeatInterval</span><span class="o">().</span><span class="na">get</span><span class="o">().</span><span class="na">intValue</span><span class="o">()));</span>
<span class="o">}</span>
<span class="k">if</span> <span class="o">(</span><span class="n">isCloseIdleSessions</span><span class="o">().</span><span class="na">isPresent</span><span class="o">())</span> <span class="o">{</span>
<span class="n">initParams</span><span class="o">.</span><span class="na">put</span><span class="o">(</span><span class="n">SERVLET_PARAMETER_CLOSE_IDLE_SESSIONS</span><span class="o">,</span> <span class="n">String</span><span class="o">.</span><span class="na">valueOf</span><span class="o">(</span><span class="n">isCloseIdleSessions</span><span class="o">().</span><span class="na">get</span><span class="o">().</span><span class="na">booleanValue</span><span class="o">()));</span>
<span class="o">}</span>
<span class="k">if</span> <span class="o">(</span><span class="n">getResourcesCacheTime</span><span class="o">().</span><span class="na">isPresent</span><span class="o">())</span> <span class="o">{</span>
<span class="n">initParams</span><span class="o">.</span><span class="na">put</span><span class="o">(</span><span class="n">SERVLET_PARAMETER_RESOURCE_CACHE_TIME</span><span class="o">,</span> <span class="n">String</span><span class="o">.</span><span class="na">valueOf</span><span class="o">(</span><span class="n">getResourcesCacheTime</span><span class="o">().</span><span class="na">get</span><span class="o">().</span><span class="na">intValue</span><span class="o">()));</span>
<span class="o">}</span>
<span class="n">servlet</span><span class="o">.</span><span class="na">setInitParameters</span><span class="o">(</span><span class="n">initParams</span><span class="o">);</span>
<span class="o">}</span>
<span class="kd">abstract</span> <span class="kd">protected</span> <span class="n">Optional</span><span class="o"><</span><span class="n">Class</span><span class="o"><?</span> <span class="kd">extends</span> <span class="n">UI</span><span class="o">>></span> <span class="n">getUi</span><span class="o">();</span>
<span class="nd">@Override</span>
<span class="kd">protected</span> <span class="n">String</span> <span class="n">getServletName</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="s">"DynamicallyRegisteredVaadinServlet"</span><span class="o">;</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">protected</span> <span class="n">String</span><span class="o">[]</span> <span class="n">getMappings</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="n">String</span><span class="o">[]</span> <span class="o">{</span> <span class="s">"/"</span> <span class="o">};</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">protected</span> <span class="n">Optional</span><span class="o"><</span><span class="n">Boolean</span><span class="o">></span> <span class="n">isProductionMode</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="n">Optional</span><span class="o">.</span><span class="na">of</span><span class="o">(</span><span class="n">TRUE</span><span class="o">);</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">protected</span> <span class="n">Optional</span><span class="o"><</span><span class="n">Integer</span><span class="o">></span> <span class="n">getLoadOnStartup</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="n">absent</span><span class="o">();</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">protected</span> <span class="n">Optional</span><span class="o"><</span><span class="n">Class</span><span class="o"><?</span> <span class="kd">extends</span> <span class="n">UIProvider</span><span class="o">>></span> <span class="n">getUiProvider</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="n">absent</span><span class="o">();</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">protected</span> <span class="n">Optional</span><span class="o"><</span><span class="n">Boolean</span><span class="o">></span> <span class="n">isProductionMode</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="n">absent</span><span class="o">();</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">protected</span> <span class="n">Optional</span><span class="o"><</span><span class="n">Boolean</span><span class="o">></span> <span class="n">isXsrfProtectionDisabled</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="n">absent</span><span class="o">();</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">protected</span> <span class="n">Optional</span><span class="o"><</span><span class="n">String</span><span class="o">></span> <span class="n">getWidgetSet</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="n">absent</span><span class="o">();</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">protected</span> <span class="n">Optional</span><span class="o"><</span><span class="n">Integer</span><span class="o">></span> <span class="n">getCheckHeartBeatInterval</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="n">absent</span><span class="o">();</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">protected</span> <span class="n">Optional</span><span class="o"><</span><span class="n">Boolean</span><span class="o">></span> <span class="n">isCloseIdleSessions</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="n">absent</span><span class="o">();</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">protected</span> <span class="n">Optional</span><span class="o"><</span><span class="n">Integer</span><span class="o">></span> <span class="n">getResourcesCacheTime</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="n">absent</span><span class="o">();</span>
<span class="o">}</span>
<span class="o">}</span></code></pre></figure>
<p>Note the only method to implement is <code class="highlighter-rouge">getUI()</code> since it has to be customized for each web application. All methods provide sensible defaults but can be overriden should it be needed.</p>
<p>On the other hand, the entry-point implementation should do something like this: for each type referenced, instantiate it and calls it <code class="highlighter-rouge">register()</code> method. This leads to two requirements:</p>
<ul>
<li>Implement <a href="http://docs.oracle.com/javaee/6/api/javax/servlet/ServletContainerInitializer.html"><code class="highlighter-rouge">javax.servlet.ServletContainerInitializer</code></a> more specifically the single <code class="highlighter-rouge">onStartup()</code> method</li>
<li>Be annotated with <a href="http://docs.oracle.com/javaee/6/api/javax/servlet/annotation/HandlesTypes.html"><code class="highlighter-rouge">@javax.servlet.annotation.HandlesTypes</code></a> to reference relevant types</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="nd">@HandlesTypes</span><span class="o">(</span><span class="n">SingleRootVaadinRegistar</span><span class="o">.</span><span class="na">class</span><span class="o">)</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">DynaVaadinInitializer</span> <span class="kd">implements</span> <span class="n">ServletContainerInitializer</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">onStartup</span><span class="o">(</span><span class="n">Set</span><span class="o"><</span><span class="n">Class</span><span class="o"><?>></span> <span class="n">classes</span><span class="o">,</span> <span class="n">ServletContext</span> <span class="n">servletContext</span><span class="o">)</span> <span class="kd">throws</span> <span class="n">ServletException</span> <span class="o">{</span>
<span class="k">if</span> <span class="o">(</span><span class="n">classes</span> <span class="o">!=</span> <span class="kc">null</span><span class="o">)</span> <span class="o">{</span>
<span class="k">for</span> <span class="o">(</span><span class="n">Class</span><span class="o"><?></span> <span class="n">clazz</span> <span class="o">:</span> <span class="n">classes</span><span class="o">)</span> <span class="o">{</span>
<span class="k">if</span> <span class="o">(!</span><span class="n">clazz</span><span class="o">.</span><span class="na">isInterface</span><span class="o">()</span> <span class="o">&&</span> <span class="o">!</span><span class="n">Modifier</span><span class="o">.</span><span class="na">isAbstract</span><span class="o">(</span><span class="n">clazz</span><span class="o">.</span><span class="na">getModifiers</span><span class="o">())</span> <span class="o">&&</span>
<span class="n">VaadinServletRegistar</span><span class="o">.</span><span class="na">class</span><span class="o">.</span><span class="na">isAssignableFrom</span><span class="o">(</span><span class="n">clazz</span><span class="o">))</span> <span class="o">{</span>
<span class="k">try</span> <span class="o">{</span>
<span class="n">VaadinServletRegistar</span> <span class="n">initializer</span> <span class="o">=</span> <span class="o">(</span><span class="n">VaadinServletRegistar</span><span class="o">)</span> <span class="n">clazz</span><span class="o">.</span><span class="na">newInstance</span><span class="o">();</span>
<span class="n">initializer</span><span class="o">.</span><span class="na">register</span><span class="o">(</span><span class="n">servletContext</span><span class="o">);</span>
<span class="o">}</span> <span class="k">catch</span> <span class="o">(</span><span class="n">Throwable</span> <span class="n">e</span><span class="o">)</span> <span class="o">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="n">ServletException</span><span class="o">(</span><span class="s">"Failed to instantiate VaadinServletRegistar class"</span><span class="o">,</span> <span class="n">e</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">}</span>
<span class="o">}</span>
<span class="o">}</span>
<span class="o">}</span>
<span class="o">}</span></code></pre></figure>
<p>The final step is to implement a service provider: create a <code class="highlighter-rouge">javax.servlet.ServletContainerInitializer</code> file under <code class="highlighter-rouge">META-INF/services</code> and set its content to the fully-qualified name of <code class="highlighter-rouge">SingleRootVaadinRegistar</code>.</p>
<p>Compiling and packaging the above classes and resources in a JAR put in your <code class="highlighter-rouge">WEB-INF/lib</code> folder and extending <code class="highlighter-rouge">SingleRootVaadinRegistar</code> will achieve our goal. The extended class will register a Vaadin servlet, with the UI we returned.</p>
<p>Of course, coding those for every project is boring: it would be better to have a reusable component. There’s a shot at this on <a href="">Vaadin directory</a>.</p>
Vaadin 7 eases your theme development2012-09-23T00:00:00+00:00http://morevaadin.com/content/vaadin-eases-your-theme-development
<p>Vaadin theming is a nice way to reuse your Cascading Style Sheets across different projects. Vaadin 7 adds even more sugar to the whole theming thing since it allows you to use <a href="http://sass-lang.com/">Syntactically Awesome Stylesheets</a>.</p>
<p>The purpose of this article is not to describe technology since it’s already well documented on the <a href="http://sass-lang.com/">SASS website</a> but to expose how to use SASS within Vaadin.</p>
<p>In order to use the SASS technology, a few steps are necessary:</p>
<ul>
<li>First, the <code class="highlighter-rouge">UI</code> base class has to be annotated with the <code class="highlighter-rouge">@Theme</code> annotation referencing our own new theme.</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4</pre></td><td class="code"><pre><span class="nd">@Theme</span><span class="o">(</span><span class="s">"custom"</span><span class="o">)</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">SassUI</span> <span class="kd">extends</span> <span class="n">UI</span> <span class="o">{</span>
<span class="o">...</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<ul>
<li>Remember to set this UI as the Vaadin servlet parameter in the web deployment descriptor:</li>
</ul>
<figure class="highlight"><pre><code class="language-xml" data-lang="xml"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8</pre></td><td class="code"><pre><span class="nt"><servlet></span>
<span class="nt"><servlet-name></span>VaadinServlet<span class="nt"></servlet-name></span>
<span class="nt"><servlet-class></span>com.vaadin.server.VaadinServlet<span class="nt"></servlet-class></span>
<span class="nt"><init-param></span>
<span class="nt"><param-name></span>UI<span class="nt"></param-name></span>
<span class="nt"><param-value></span>com.morevaadin.vaadin7.sass.SassUI<span class="nt"></param-value></span>
<span class="nt"></init-param></span>
<span class="nt"></servlet></span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<ul>
<li>Finally, instead of a CSS file, provide a styles.scss file under <code class="highlighter-rouge">/VAADIN/themes/<name></code> (in your case, the name is “custom”). The code below is just an example:</li>
</ul>
<figure class="highlight"><pre><code class="language-css" data-lang="css"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28</pre></td><td class="code"><pre><span class="k">@import</span> <span class="s1">"../reindeer/styles.css"</span><span class="p">;</span>
<span class="err">$</span><span class="nt">color</span><span class="o">:</span> <span class="nt">rgb</span><span class="o">(</span><span class="nt">51</span><span class="o">,</span><span class="nt">204</span><span class="o">,</span><span class="nt">255</span><span class="o">);</span>
<span class="err">$</span><span class="nt">dark-color</span><span class="o">:</span> <span class="nt">darken</span><span class="o">(</span><span class="err">$</span><span class="nt">color</span><span class="o">,</span> <span class="nt">20</span><span class="o">%);</span>
<span class="err">$</span><span class="nt">spacing</span><span class="o">:</span> <span class="nt">4px</span><span class="o">;</span>
<span class="nc">.v-button-caption</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="err">$</span><span class="n">color</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">@mixin</span> <span class="n">border-radius</span><span class="p">(</span><span class="err">$</span><span class="n">radius</span><span class="p">)</span> <span class="p">{</span>
<span class="nl">-webkit-border-radius</span><span class="p">:</span> <span class="err">$</span><span class="n">radius</span><span class="p">;</span>
<span class="nl">-moz-border-radius</span><span class="p">:</span> <span class="err">$</span><span class="n">radius</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="err">$</span><span class="n">radius</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.rounded-borders</span> <span class="p">{</span>
<span class="err">@include</span> <span class="err">border-radius(4px);</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="err">$</span><span class="n">color</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.v-label</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="err">$</span><span class="n">dark-color</span><span class="p">;</span>
<span class="nl">padding-left</span><span class="p">:</span> <span class="err">$</span><span class="n">spacing</span><span class="p">;</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="err">$</span><span class="n">spacing</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="err">$</span><span class="n">spacing</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
<span class="p">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>That’s it. Empowering your themes with SASS technology is as simple as that! Sources for this article can be found on <a href="https://github.com/nfrankel/More-Vaadin/tree/master/sass-example">GitHub</a>.</p>
<p>Note that some SASS features are still missing at the time of this writing.</p>
Spring security integration2012-08-25T00:00:00+00:00http://morevaadin.com/content/spring-security-integration<p>Along with <a href="https://shiro.apache.org/">Apache Shiro</a>, <a href="http://static.springsource.org/spring-security/site/">Spring Security</a> is one of the two most used security component used in the Java world. Using Spring Security with Vaadin needs a little work. In this article, I will show you how you can adapt your Vaadin application to play nice with Spring Security.</p>
<p>Credits go to Henri Sara of the Vaadin team who provided <a href="https://vaadin.com/forum/-/message_boards/view_message/569686#_19_message_373038">his valuable insight</a>.
Requirements: this article assumes you know some Spring Security and uses advanced Vaadin navigator concepts</p>
<p>Nominal uses of Spring Security mandate for the use of subcontexts in the webapp, each one then can be configured for different access levels. For example, <code class="highlighter-rouge">/public</code> is accessible with anonymous access, while <code class="highlighter-rouge">/private</code> needs some specific authorizations. Unfortunately, Vaadin doesn’t work that way: <a href="/content/navigation-basics">views</a> are translated into fragments, not subcontexts. From this point on, there are two options: either tweak Vaadin to use subcontexts, or embed Spring Security inside our application. We will use the latter.</p>
<ul>
<li>The first step is to create a Login form view, that send login events.</li>
<li>The root subscribes to login events, and handles authentication attemps through a dedicated authentication handler.</li>
<li>The handler has to be passed the login, the password and the http request. Since Vaadin hides the latter in the API, we have to create a special servlet that stores it in a thread local with the help of an utility class:</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13</pre></td><td class="code"><pre><span class="kd">public</span> <span class="kd">class</span> <span class="nc">RequestHolderApplicationServlet</span> <span class="kd">extends</span> <span class="n">ApplicationServlet</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">protected</span> <span class="kt">void</span> <span class="n">service</span><span class="o">(</span><span class="n">HttpServletRequest</span> <span class="n">request</span><span class="o">,</span> <span class="n">HttpServletResponse</span> <span class="n">response</span><span class="o">)</span> <span class="kd">throws</span> <span class="n">ServletException</span><span class="o">,</span> <span class="n">IOException</span> <span class="o">{</span>
<span class="n">RequestHolder</span><span class="o">.</span><span class="na">setRequest</span><span class="o">(</span><span class="n">request</span><span class="o">);</span>
<span class="kd">super</span><span class="o">.</span><span class="na">service</span><span class="o">(</span><span class="n">request</span><span class="o">,</span> <span class="n">response</span><span class="o">);</span>
<span class="c1">// We remove the request from the thread local, there's no reason to keep it once the work is done</span>
<span class="n">RequestHolder</span><span class="o">.</span><span class="na">clean</span><span class="o">();</span>
<span class="o">}</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<ul>
<li>The login handler uses the Spring Security API to create the username/password token needed by the framework. Then, it gets the authentication manager from the Spring context and calls the relevant method, delegating real authentication to the configured backend. Last but not least, we set authentication data into the Spring Security context for latter uses.</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19</pre></td><td class="code"><pre><span class="kd">public</span> <span class="kd">class</span> <span class="nc">AuthenticationService</span> <span class="o">{</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">handleAuthentication</span><span class="o">(</span><span class="n">String</span> <span class="n">login</span><span class="o">,</span> <span class="n">String</span> <span class="n">password</span><span class="o">,</span> <span class="n">HttpServletRequest</span> <span class="n">httpRequest</span><span class="o">)</span> <span class="o">{</span>
<span class="n">UsernamePasswordAuthenticationToken</span> <span class="n">token</span> <span class="o">=</span> <span class="k">new</span> <span class="n">UsernamePasswordAuthenticationToken</span><span class="o">(</span><span class="n">login</span><span class="o">,</span> <span class="n">password</span><span class="o">);</span>
<span class="n">token</span><span class="o">.</span><span class="na">setDetails</span><span class="o">(</span><span class="k">new</span> <span class="n">WebAuthenticationDetails</span><span class="o">(</span><span class="n">httpRequest</span><span class="o">));</span>
<span class="n">ServletContext</span> <span class="n">servletContext</span> <span class="o">=</span> <span class="n">httpRequest</span><span class="o">.</span><span class="na">getSession</span><span class="o">().</span><span class="na">getServletContext</span><span class="o">();</span>
<span class="n">WebApplicationContext</span> <span class="n">wac</span> <span class="o">=</span> <span class="n">WebApplicationContextUtils</span><span class="o">.</span><span class="na">getRequiredWebApplicationContext</span><span class="o">(</span><span class="n">servletContext</span><span class="o">);</span>
<span class="n">AuthenticationManager</span> <span class="n">authManager</span> <span class="o">=</span> <span class="n">wac</span><span class="o">.</span><span class="na">getBean</span><span class="o">(</span><span class="n">AuthenticationManager</span><span class="o">.</span><span class="na">class</span><span class="o">);</span>
<span class="n">Authentication</span> <span class="n">authentication</span> <span class="o">=</span> <span class="n">authManager</span><span class="o">.</span><span class="na">authenticate</span><span class="o">(</span><span class="n">token</span><span class="o">);</span>
<span class="n">SecurityContextHolder</span><span class="o">.</span><span class="na">getContext</span><span class="o">().</span><span class="na">setAuthentication</span><span class="o">(</span><span class="n">authentication</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<ul>
<li>Don’t forget to also create and clean the Spring Security context. Since we already developed a custom servlet, we’ll update it.</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16</pre></td><td class="code"><pre><span class="kd">public</span> <span class="kd">class</span> <span class="nc">RequestHolderApplicationServlet</span> <span class="kd">extends</span> <span class="n">ApplicationServlet</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">protected</span> <span class="kt">void</span> <span class="n">service</span><span class="o">(</span><span class="n">HttpServletRequest</span> <span class="n">request</span><span class="o">,</span> <span class="n">HttpServletResponse</span> <span class="n">response</span><span class="o">)</span> <span class="kd">throws</span> <span class="n">ServletException</span><span class="o">,</span> <span class="n">IOException</span> <span class="o">{</span>
<span class="n">SecurityContextHolder</span><span class="o">.</span><span class="na">setContext</span><span class="o">(</span><span class="n">SecurityContextHolder</span><span class="o">.</span><span class="na">createEmptyContext</span><span class="o">());</span>
<span class="n">RequestHolder</span><span class="o">.</span><span class="na">setRequest</span><span class="o">(</span><span class="n">request</span><span class="o">);</span>
<span class="kd">super</span><span class="o">.</span><span class="na">service</span><span class="o">(</span><span class="n">request</span><span class="o">,</span> <span class="n">response</span><span class="o">);</span>
<span class="n">RequestHolder</span><span class="o">.</span><span class="na">clean</span><span class="o">();</span>
<span class="n">SecurityContextHolder</span><span class="o">.</span><span class="na">clearContext</span><span class="o">();</span>
<span class="o">}</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>Now, the root just has to try/catch the authentication results and navigate to the desired view if succesfull. Job done!</p>
<p>Wait, what if the user knows about the view’s name and types the fragment directly in his/her browser’s URL bar? No login event, no authentication: he/she will have access directly to the main view, regardless of his/her credentials.</p>
<p>So, there’s one last step to implement: we have to bind all our views into a navigator and let the latter handle navigation. Besides, we register it a <code class="highlighter-rouge">ViewChangeListener</code>l that will check for credentials before changing the view.</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18</pre></td><td class="code"><pre><span class="kd">public</span> <span class="kd">class</span> <span class="nc">ViewChangeSecurityChecker</span> <span class="kd">implements</span> <span class="n">ViewChangeListener</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="kt">boolean</span> <span class="n">isViewChangeAllowed</span><span class="o">(</span><span class="n">ViewChangeEvent</span> <span class="n">event</span><span class="o">)</span> <span class="o">{</span>
<span class="k">if</span> <span class="o">(</span><span class="n">event</span><span class="o">.</span><span class="na">getNewView</span><span class="o">()</span> <span class="k">instanceof</span> <span class="n">LoginView</span><span class="o">)</span> <span class="o">{</span>
<span class="k">return</span> <span class="kc">true</span><span class="o">;</span>
<span class="o">}</span>
<span class="n">Authentication</span> <span class="n">authentication</span> <span class="o">=</span> <span class="n">SecurityContextHolder</span><span class="o">.</span><span class="na">getContext</span><span class="o">().</span><span class="na">getAuthentication</span><span class="o">();</span>
<span class="k">return</span> <span class="n">authentication</span> <span class="o">==</span> <span class="kc">null</span> <span class="o">?</span> <span class="kc">false</span> <span class="o">:</span> <span class="n">authentication</span><span class="o">.</span><span class="na">isAuthenticated</span><span class="o">();</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">navigatorViewChanged</span><span class="o">(</span><span class="n">ViewChangeEvent</span> <span class="n">event</span><span class="o">)</span> <span class="o">{}</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>Now, when an unauthenticated user directly types the view name as a fragment, there won’t be any action. Notice that the login view has to accessible in any case.</p>
<p>Note that the above code only checks for authenticated status, not for credential. You can easily enhance it to do just that by forking the <a href="https://github.com/nfrankel/More-Vaadin/tree/master/springsecurity-integration">GitHub repo</a>.</p>
Integrating HTML and JavaScript - part 22012-08-12T00:00:00+00:00http://morevaadin.com/content/integrating-html-and-javascript-part-2<p>In the <a href="/content/integrating-html-and-javascript-part-1">previous article</a>, we successfully integrated a custom-made tooltip over our hyperlinks. In this article, we’ll integrate an already existing tooltip library.</p>
<p>Since we already played with Twitter Bootstrap library, we’ll try to reuse their code.</p>
<p>If you follow this site regularly, we already used the Bootstrap library, or more exactly the GWT porting of the library in the <a href="/content/using-gwt-widgets-part-1">Using GWT widgets</a> serie. This time, we’ll use the library directly, without any third-party GWT wrapper.</p>
<p>The process mirrors what we already did when creating custom HTML code.</p>
<ul>
<li>The first step is to create the server part, which is the extension. For JavaScript components, note that there exists a specialized class, JavaScriptExtension. Moreover, we have to tell Vaadin which scripts will be used: those scripts can either be local to the webapp or available through an absolute URL. It’s done through a simple annotation.</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33</pre></td><td class="code"><pre><span class="nd">@JavaScript</span><span class="o">({</span> <span class="s">"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"</span><span class="o">,</span> <span class="s">"bootstrap.js"</span><span class="o">,</span> <span class="s">"bootstrap_connector.js"</span> <span class="o">})</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">JavascriptTooltipExtension</span> <span class="kd">extends</span> <span class="n">AbstractJavaScriptExtension</span> <span class="o">{</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">extend</span><span class="o">(</span><span class="n">Link</span> <span class="n">link</span><span class="o">)</span> <span class="o">{</span>
<span class="n">Resource</span> <span class="n">resource</span> <span class="o">=</span> <span class="n">link</span><span class="o">.</span><span class="na">getResource</span><span class="o">();</span>
<span class="n">String</span> <span class="n">display</span> <span class="o">=</span> <span class="n">resource</span> <span class="k">instanceof</span> <span class="n">ExternalResource</span> <span class="o">?</span> <span class="o">((</span><span class="n">ExternalResource</span><span class="o">)</span> <span class="n">resource</span><span class="o">).</span><span class="na">getURL</span><span class="o">().</span><span class="na">toString</span><span class="o">()</span> <span class="o">:</span> <span class="s">"???"</span><span class="o">;</span>
<span class="n">getState</span><span class="o">().</span><span class="na">setDisplay</span><span class="o">(</span><span class="n">display</span><span class="o">);</span>
<span class="kd">super</span><span class="o">.</span><span class="na">extend</span><span class="o">(</span><span class="n">link</span><span class="o">);</span>
<span class="n">attachTooltip</span><span class="o">();</span>
<span class="o">}</span>
<span class="kd">protected</span> <span class="kt">void</span> <span class="n">attachTooltip</span><span class="o">(</span><span class="n">Object</span><span class="o">...</span> <span class="n">commandAndArguments</span><span class="o">)</span> <span class="o">{</span>
<span class="n">invokeCallback</span><span class="o">(</span><span class="s">"attach"</span><span class="o">,</span> <span class="n">commandAndArguments</span><span class="o">);</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">protected</span> <span class="n">Class</span><span class="o"><?</span> <span class="kd">extends</span> <span class="n">ClientConnector</span><span class="o">></span> <span class="n">getSupportedParentType</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="n">Link</span><span class="o">.</span><span class="na">class</span><span class="o">;</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="n">BootstrapTooltipState</span> <span class="n">getState</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="o">(</span><span class="n">BootstrapTooltipState</span><span class="o">)</span> <span class="kd">super</span><span class="o">.</span><span class="na">getState</span><span class="o">();</span>
<span class="o">}</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<ul>
<li>Next, we have to provide the aforementioned local scripts. This is done by packaging them in the WAR as the previous class. So, if the extension was in the <code class="highlighter-rouge">com.morevaadin.vaadin7.html.js</code> package, put the scripts in exactly the same one.</li>
<li>Last but not least, we have to provide the JavaScript glue that bind the components together. You probably noticed the <code class="highlighter-rouge">invokeCallback()</code> in the server code: it’s the connector between server and client code. Vaadin will search for an anonymous JavaScript function under the package name (where dots have been replaced by underscores) that provide a subfunction named as the first argument of the <code class="highlighter-rouge">invokeCallback()</code> function. This is the reason why we parameterized the <code class="highlighter-rouge">bootstrap_connector.js</code> script previously (though you’re free to call it what you want).</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16</pre></td><td class="code"><pre><span class="n">window</span><span class="o">.</span><span class="na">com_morevaadin_vaadin7_html_js_JavascriptTooltipExtension</span> <span class="o">=</span> <span class="n">function</span><span class="o">()</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="na">attach</span> <span class="o">=</span> <span class="n">function</span><span class="o">(</span><span class="n">options</span><span class="o">)</span> <span class="o">{</span>
<span class="n">var</span> <span class="n">connectorId</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="na">getParentId</span><span class="o">();</span>
<span class="n">var</span> <span class="n">element</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="na">getElement</span><span class="o">(</span><span class="n">connectorId</span><span class="o">);</span>
<span class="n">var</span> <span class="n">a</span> <span class="o">=</span> <span class="n">element</span><span class="o">.</span><span class="na">childNodes</span><span class="o">[</span><span class="mi">0</span><span class="o">];</span>
<span class="n">a</span><span class="o">.</span><span class="na">rel</span> <span class="o">=</span> <span class="s">"tooltip"</span><span class="o">;</span>
<span class="n">a</span><span class="o">.</span><span class="na">title</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="na">getState</span><span class="o">().</span><span class="na">display</span><span class="o">;</span>
<span class="err">$</span><span class="o">(</span><span class="n">a</span><span class="o">).</span><span class="na">tooltip</span><span class="o">();</span>
<span class="o">}</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>The code itself depends on the particular library.</p>
<p>There are two important things to note:</p>
<ul>
<li>Nothing prevents you for providing multiple features in your server-side API since you can invoke whichever callback you want on the client side.</li>
<li>In our case, we have access to the jQuery API since it was configured in the extension.</li>
</ul>
<p>Compared to wrapping our own HTML, wrapping already existing JavaScript is a breeze. In conclusion, Vaadin 7 makes it possible to easily integrate JavaScript without the need for GWT wrappers. If (a part of) your team is fluent in JavaScript, it’s a real asset for your applications.</p>
<p>The code of this article can be found on <a href="https://github.com/nfrankel/More-Vaadin/tree/master/html-js-integration">GitHub</a>.</p>
Integrating HTML and JavaScript - part 12012-07-28T00:00:00+00:00http://morevaadin.com/content/integrating-html-and-javascript-part-1<p>In Vaadin 6, extending existing components required creating subclasses and overriding the desired methods when possible. When not, this meant hacking protected methods and/or copying-pasting code. In this two-part serie, we’ll have a look at how Vaadin 7 makes it easier for us to extend components through “composition” rather than inheritance:</p>
<ul>
<li>This article will show us how to create an extension using HTML and the GWT API</li>
<li>In the <a href="/content/integrating-html-and-javascript-part-2">follow-up</a>, we will create an extension using purely JavaScript, without any GWT dependency!</li>
</ul>
<p>Vaadin 7 introduces the concept of extension. Extensions are features that can be attached to existing components (or applications) and may have a GUI part.</p>
<p>In order to illustrate our point, we’ll create hover tooltips on hyperlinks.</p>
<p>Among Vaadin class hierarchy, an extension simply implements <code class="highlighter-rouge">Extension</code> (which is a marker inteface), but Vaadin provides <code class="highlighter-rouge">AbstractExtension</code> to ease our work. We just have to specify which components are extendable by this extension:</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8</pre></td><td class="code"><pre><span class="kd">public</span> <span class="kd">class</span> <span class="nc">TooltipExtension</span> <span class="kd">extends</span> <span class="n">AbstractExtension</span> <span class="o">{</span>
<span class="c1">// Only Link are allowed tooltips</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">extend</span><span class="o">(</span><span class="n">Link</span> <span class="n">link</span><span class="o">)</span> <span class="o">{</span>
<span class="kd">super</span><span class="o">.</span><span class="na">extend</span><span class="o">(</span><span class="n">link</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>Like any Vaadin components, extensions must have an associated client connector, that <strong>has to be under the <code class="highlighter-rouge">client</code> subpackage</strong> for it to be compiled. Connectors do the real work but need some knowledge of native GWT. For this reason, we won’t go into much detail; just extends <code class="highlighter-rouge">AbstractExtensionConnector</code>, the rest is up to you. The next snippet displays HTML code when the mouse hovers over the client widget (and hides it when it moves out).
Note the <code class="highlighter-rouge">@Connect</code> annotation, just like any other connector.</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33</pre></td><td class="code"><pre><span class="nd">@Connect</span><span class="o">(</span><span class="n">TooltipExtension</span><span class="o">.</span><span class="na">class</span><span class="o">)</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">TooltipConnector</span> <span class="kd">extends</span> <span class="n">AbstractExtensionConnector</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">protected</span> <span class="kt">void</span> <span class="n">extend</span><span class="o">(</span><span class="n">ServerConnector</span> <span class="n">target</span><span class="o">)</span> <span class="o">{</span>
<span class="kd">final</span> <span class="n">Widget</span> <span class="n">hyperlink</span> <span class="o">=</span> <span class="o">((</span><span class="n">ComponentConnector</span><span class="o">)</span> <span class="n">target</span><span class="o">).</span><span class="na">getWidget</span><span class="o">();</span>
<span class="kd">final</span> <span class="n">VOverlay</span> <span class="n">tooltip</span> <span class="o">=</span> <span class="k">new</span> <span class="n">VOverlay</span><span class="o">();</span>
<span class="n">tooltip</span><span class="o">.</span><span class="na">add</span><span class="o">(</span><span class="k">new</span> <span class="n">HTML</span><span class="o">(</span><span class="s">"<div class='c-tooltip'>This is a static tooltip</div>"</span><span class="o">));</span>
<span class="n">hyperlink</span><span class="o">.</span><span class="na">addDomHandler</span><span class="o">(</span><span class="k">new</span> <span class="n">MouseOverHandler</span><span class="o">()</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">onMouseOver</span><span class="o">(</span><span class="n">MouseOverEvent</span> <span class="n">event</span><span class="o">)</span> <span class="o">{</span>
<span class="n">tooltip</span><span class="o">.</span><span class="na">showRelativeTo</span><span class="o">(</span><span class="n">hyperlink</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">},</span> <span class="n">MouseOverEvent</span><span class="o">.</span><span class="na">getType</span><span class="o">());</span>
<span class="n">hyperlink</span><span class="o">.</span><span class="na">addDomHandler</span><span class="o">(</span><span class="k">new</span> <span class="n">MouseOutHandler</span><span class="o">()</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">onMouseOut</span><span class="o">(</span><span class="n">MouseOutEvent</span> <span class="n">event</span><span class="o">)</span> <span class="o">{</span>
<span class="n">tooltip</span><span class="o">.</span><span class="na">hide</span><span class="o">();</span>
<span class="o">}</span>
<span class="o">},</span> <span class="n">MouseOutEvent</span><span class="o">.</span><span class="na">getType</span><span class="o">());</span>
<span class="o">}</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>Finally, we have to connect our brand new extension to desired components:</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3</pre></td><td class="code"><pre><span class="n">Link</span> <span class="n">morevaadin</span> <span class="o">=</span> <span class="k">new</span> <span class="n">Link</span><span class="o">(</span><span class="s">"More Vaadin"</span><span class="o">,</span> <span class="k">new</span> <span class="n">ExternalResource</span><span class="o">(</span><span class="s">"http://morevaadin.com/"</span><span class="o">));</span>
<span class="k">new</span> <span class="nf">BasicTooltipExtension</span><span class="p">(</span><span class="o">).</span><span class="na">extend</span><span class="o">(</span><span class="n">morevaadin</span><span class="o">);</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>While the second line may seem reversed, it let us restrict the type of component extends.</p>
<p>Our code has a big drawback: the text displayed in the tooltip is static. In order to provide a customizable tooltip, we just have to create a state, like for components.</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14</pre></td><td class="code"><pre><span class="kd">public</span> <span class="kd">class</span> <span class="nc">TooltipState</span> <span class="kd">extends</span> <span class="n">SharedState</span> <span class="o">{</span>
<span class="kd">private</span> <span class="n">String</span> <span class="n">display</span><span class="o">;</span>
<span class="kd">public</span> <span class="n">String</span> <span class="n">getDisplay</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="n">display</span><span class="o">;</span>
<span class="o">}</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">setDisplay</span><span class="o">(</span><span class="n">String</span> <span class="n">display</span><span class="o">)</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="na">display</span> <span class="o">=</span> <span class="n">display</span><span class="o">;</span>
<span class="o">}</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>We also need to change our extension, to use the newly-created state:</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41</pre></td><td class="code"><pre><span class="nd">@Connect</span><span class="o">(</span><span class="n">TooltipExtension</span><span class="o">.</span><span class="na">class</span><span class="o">)</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">TooltipConnector</span> <span class="kd">extends</span> <span class="n">AbstractExtensionConnector</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">protected</span> <span class="kt">void</span> <span class="n">extend</span><span class="o">(</span><span class="n">ServerConnector</span> <span class="n">target</span><span class="o">)</span> <span class="o">{</span>
<span class="kd">final</span> <span class="n">Widget</span> <span class="n">hyperlink</span> <span class="o">=</span> <span class="o">((</span><span class="n">ComponentConnector</span><span class="o">)</span> <span class="n">target</span><span class="o">).</span><span class="na">getWidget</span><span class="o">();</span>
<span class="kd">final</span> <span class="n">VOverlay</span> <span class="n">tooltip</span> <span class="o">=</span> <span class="k">new</span> <span class="n">VOverlay</span><span class="o">();</span>
<span class="n">String</span> <span class="n">display</span> <span class="o">=</span> <span class="n">getState</span><span class="o">().</span><span class="na">getDisplay</span><span class="o">();</span>
<span class="n">tooltip</span><span class="o">.</span><span class="na">add</span><span class="o">(</span><span class="k">new</span> <span class="n">HTML</span><span class="o">(</span><span class="s">"<div class='c-tooltip'>"</span> <span class="o">+</span> <span class="n">display</span> <span class="o">+</span> <span class="s">"</div>"</span><span class="o">));</span>
<span class="n">hyperlink</span><span class="o">.</span><span class="na">addDomHandler</span><span class="o">(</span><span class="k">new</span> <span class="n">MouseOverHandler</span><span class="o">()</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">onMouseOver</span><span class="o">(</span><span class="n">MouseOverEvent</span> <span class="n">event</span><span class="o">)</span> <span class="o">{</span>
<span class="n">tooltip</span><span class="o">.</span><span class="na">showRelativeTo</span><span class="o">(</span><span class="n">hyperlink</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">},</span> <span class="n">MouseOverEvent</span><span class="o">.</span><span class="na">getType</span><span class="o">());</span>
<span class="n">hyperlink</span><span class="o">.</span><span class="na">addDomHandler</span><span class="o">(</span><span class="k">new</span> <span class="n">MouseOutHandler</span><span class="o">()</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">onMouseOut</span><span class="o">(</span><span class="n">MouseOutEvent</span> <span class="n">event</span><span class="o">)</span> <span class="o">{</span>
<span class="n">tooltip</span><span class="o">.</span><span class="na">hide</span><span class="o">();</span>
<span class="o">}</span>
<span class="o">},</span> <span class="n">MouseOutEvent</span><span class="o">.</span><span class="na">getType</span><span class="o">());</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="n">TooltipState</span> <span class="n">getState</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="o">(</span><span class="n">TooltipState</span><span class="o">)</span> <span class="kd">super</span><span class="o">.</span><span class="na">getState</span><span class="o">();</span>
<span class="o">}</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>Last but not least, we have to devise a way to get the tooltip text. Let’s pretend we want to display the URL as a tooltip:</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19</pre></td><td class="code"><pre><span class="kd">public</span> <span class="kd">class</span> <span class="nc">TooltipExtension</span> <span class="kd">extends</span> <span class="n">AbstractExtension</span> <span class="o">{</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">extend</span><span class="o">(</span><span class="n">Link</span> <span class="n">link</span><span class="o">)</span> <span class="o">{</span>
<span class="n">Resource</span> <span class="n">resource</span> <span class="o">=</span> <span class="n">link</span><span class="o">.</span><span class="na">getResource</span><span class="o">();</span>
<span class="n">String</span> <span class="n">display</span> <span class="o">=</span> <span class="n">resource</span> <span class="k">instanceof</span> <span class="n">ExternalResource</span> <span class="o">?</span> <span class="o">((</span><span class="n">ExternalResource</span><span class="o">)</span> <span class="n">resource</span><span class="o">).</span><span class="na">getURL</span><span class="o">().</span><span class="na">toString</span><span class="o">()</span> <span class="o">:</span> <span class="s">"???"</span><span class="o">;</span>
<span class="n">getState</span><span class="o">().</span><span class="na">setDisplay</span><span class="o">(</span><span class="n">display</span><span class="o">);</span>
<span class="kd">super</span><span class="o">.</span><span class="na">extend</span><span class="o">(</span><span class="n">link</span><span class="o">);</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="n">TooltipState</span> <span class="n">getState</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="o">(</span><span class="n">TooltipState</span><span class="o">)</span> <span class="kd">super</span><span class="o">.</span><span class="na">getState</span><span class="o">();</span>
<span class="o">}</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>You can find sources for this article on <a href="https://github.com/nfrankel/More-Vaadin/tree/master/html-js-integration">Github</a>.</p>
<p>In the <a href="/content/integrating-html-and-javascript-part-2">next part</a> of this serie, we’ll look at how to integrate already existing JavaScript frameworks that provide tootlip features.</p>
Navigation basics2012-07-07T00:00:00+00:00http://morevaadin.com/content/navigation-basics<p>Vaadin implements the Single-Page Interface, meaning screen content can change but URL stays the same, as opposed to standard web application page navigation. Switching screen content is described in <a href="/content/use-view-not-windows">Use views, not windows</a>. Given SPI and before Vaadin 7, however, the only way to link a set of content with an URL was to use the <a href="https://vaadin.com/api/com/vaadin/ui/UriFragmentUtility.html">UriFragmentUtility</a> component. With Vaadin 7, however, there’s no need of such a component: all you need is to use the Navigator API.</p>
<p>The Navigation API is composed of three main classes:</p>
<ul>
<li>The <code>View</code> interface lies at the root of the API. A view is an component (that should generally be a <code>Component</code>) that is managed by a <code>Navigator</code>.
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="kd">public</span> <span class="kd">class</span> <span class="nc">ViewLayout</span> <span class="kd">extends</span> <span class="n">VerticalLayout</span> <span class="kd">implements</span> <span class="n">View</span> <span class="o">{</span>
<span class="o">...</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">navigateTo</span><span class="o">(</span><span class="n">String</span> <span class="n">fragmentParameters</span><span class="o">)</span> <span class="o">{}</span>
<span class="o">}</span></code></pre></figure>
Note that the <code>navigateTo()</code> method is just a hook: if you don't need to do anything, just leave it empty as in the above example. On the contrary, you could use the method to add a specific content on the view, depending on the fragment i.e. using the same view class but setting components based on the fragment.
<li>Next comes the <code>ViewDisplay</code> interface. This type is just a placeholder for a view to be displayed on. Navigator provides two implemetations: <code>SimpleViewDisplay</code> is a component that can be part of any container, while <code>ComponentContainerViewDisplay</code> is used internally and is a wrapper around a component container. In the latter case, just provide the container and the navigator takes care of the plumbing.
<li>Finally, the <code>Navigator</code> component is basically a map with views as values. Keys are strings that are used to both store the view in the navigator and to access it through a URL fragment.
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">Panel</span> <span class="n">panel</span> <span class="o">=</span> <span class="k">new</span> <span class="n">Panel</span><span class="o">();</span>
<span class="n">Navigator</span> <span class="n">navigator</span> <span class="o">=</span> <span class="k">new</span> <span class="n">Navigator</span><span class="o">(</span><span class="n">panel</span><span class="o">);</span>
<span class="n">navigator</span><span class="o">.</span><span class="na">addView</span><span class="o">(</span><span class="s">"aview"</span><span class="o">,</span> <span class="k">new</span> <span class="n">ViewLayout</span><span class="o">());</span></code></pre></figure>
Note that if you provide content for your initial panel but dont make it accessible as a view, users won't be able to access it after the initial display.
From this point on, there are two ways to access a view:
+ Programmatically, through the `navigateTo()` method of the **navigator**
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">navigator</span><span class="o">.</span><span class="na">navigateTo</span><span class="o">(</span><span class="s">"aview"</span><span class="o">);</span></code></pre></figure>
+ By setting the URL to the Vaadin servlet's URL plus the view's name as the fragment. For example, if the Vaadin servlet is mapped to `/*`, just adding `#aview` to the context root will display the view. You can of course provide such an hyperlink for the user to click on.
From this point on, you can manage views. In the next article, we'll handle view events and view providers.
Code for this article can be browsed and forked on [Github](https://github.com/nfrankel/More-Vaadin/tree/master/navigation-example).
</li></li></li></ul>
Using GWT widgets - Part 32012-06-16T00:00:00+00:00http://morevaadin.com/content/using-gwt-widgets-part-3<p>This is the final part in our articles serie regarding using GWT widgets in Vaadin 7. In the <a href="/content/using-gwt-widgets-part-1">first part</a>, we looked at how to wrap GWT widgets in Vaadin components. In the <a href="/content/using-gwt-widgets-part-2">second part</a>, we detailed how to configure widgets from components. In this third and final part, we’ll see how to intercept events coming from the client side in our components.</p>
<p>The central component is client-server communication is an interface extending <code class="highlighter-rouge">ServerRpc</code>. In our context, the widget is a button so the only method of the interface should be something like <code class="highlighter-rouge">click()</code>:</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4</pre></td><td class="code"><pre><span class="kd">public</span> <span class="kd">interface</span> <span class="nc">BootstrapButtonRpc</span> <span class="kd">extends</span> <span class="n">ServerRpc</span> <span class="o">{</span>
<span class="kt">void</span> <span class="n">click</span><span class="o">(</span><span class="n">MouseEventDetails</span> <span class="n">mouseEventDetails</span><span class="o">);</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>Note we have a single MouseEventDetails parameter taken from Vaadin API, that should be enough to convey relevant information.</p>
<p>On the client side, several steps are necessary:</p>
<ul>
<li>In the connector, create a proxy around the RPC interface</li>
<li>Let the connector implement GWT’s <code class="highlighter-rouge">ClickHandler.onClick()</code> and call the RPC method defined in the interface</li>
<li>Add the connector as the button’s click handler</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19</pre></td><td class="code"><pre><span class="kd">public</span> <span class="kd">class</span> <span class="nc">BootstrapButtonConnector</span> <span class="kd">extends</span> <span class="n">AbstractComponentConnector</span> <span class="kd">implements</span> <span class="n">ClickHandler</span> <span class="o">{</span>
<span class="kd">private</span> <span class="n">BootstrapButtonRpc</span> <span class="n">rpc</span> <span class="o">=</span> <span class="n">RpcProxy</span><span class="o">.</span><span class="na">create</span><span class="o">(</span><span class="n">BootstrapButtonRpc</span><span class="o">.</span><span class="na">class</span><span class="o">,</span> <span class="k">this</span><span class="o">);</span>
<span class="kd">public</span> <span class="n">BootstrapButtonConnector</span><span class="o">()</span> <span class="o">{</span>
<span class="n">getWidget</span><span class="o">().</span><span class="na">addClickHandler</span><span class="o">(</span><span class="k">this</span><span class="o">);</span>
<span class="o">}</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">onClick</span><span class="o">(</span><span class="n">ClickEvent</span> <span class="n">event</span><span class="o">)</span> <span class="o">{</span>
<span class="n">MouseEventDetails</span> <span class="n">details</span> <span class="o">=</span> <span class="n">MouseEventDetailsBuilder</span><span class="o">.</span><span class="na">buildMouseEventDetails</span><span class="o">(</span>
<span class="n">event</span><span class="o">.</span><span class="na">getNativeEvent</span><span class="o">(),</span> <span class="n">getWidget</span><span class="o">().</span><span class="na">getElement</span><span class="o">());</span>
<span class="n">rpc</span><span class="o">.</span><span class="na">click</span><span class="o">(</span><span class="n">details</span><span class="o">);</span>
<span class="o">}</span>
<span class="c1">// Code from previous articles goes here</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>On the server side, we have to:</p>
<ul>
<li>create a custom event type that extends <code class="highlighter-rouge">com.vaadin.ui.Component.Event</code></li>
<li>implement the RPC interface so that calling <code class="highlighter-rouge">click()</code> fires a new instance of our custom event type</li>
<li>register a new instance of the RPC implementation</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21</pre></td><td class="code"><pre><span class="kd">public</span> <span class="kd">class</span> <span class="nc">BootstrapButton</span> <span class="kd">extends</span> <span class="n">AbstractComponent</span> <span class="o">{</span>
<span class="kd">private</span> <span class="n">BootstrapButtonRpc</span> <span class="n">rpc</span> <span class="o">=</span> <span class="k">new</span> <span class="n">BootstrapButtonRpc</span><span class="o">()</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">click</span><span class="o">(</span><span class="n">MouseEventDetails</span> <span class="n">details</span><span class="o">)</span> <span class="o">{</span>
<span class="n">fireEvent</span><span class="o">(</span><span class="k">new</span> <span class="n">BootstrapClickEvent</span><span class="o">(</span><span class="n">BootstrapButton</span><span class="o">.</span><span class="na">this</span><span class="o">));</span>
<span class="o">}</span>
<span class="o">};</span>
<span class="kd">public</span> <span class="n">BootstrapButton</span><span class="o">(</span><span class="n">String</span> <span class="n">caption</span><span class="o">)</span> <span class="o">{</span>
<span class="n">setText</span><span class="o">(</span><span class="n">caption</span><span class="o">);</span>
<span class="n">setImmediate</span><span class="o">(</span><span class="kc">true</span><span class="o">);</span>
<span class="n">registerRpc</span><span class="o">(</span><span class="n">rpc</span><span class="o">);</span>
<span class="o">}</span>
<span class="c1">// Code from previous articles goes here</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>Now, when the user clicks on the button widget, the GWT framework calls the <code class="highlighter-rouge">onClick()</code> method. In there, the Vaadin framework bridges the call from the RPC client-side code to the RPC server-side code. On the server-side, the <code class="highlighter-rouge">click()</code> implementation fires a new event: it’s just for us to listen to such events in standard Vaadin API.</p>
<p>In conclusion, I hope this serie convinced you wrapping GWT widgets is not hard if you follow the tips described here. You can find the whole code on <a href="https://github.com/nfrankel/More-Vaadin/tree/master/custom-component-example">Github</a>.</p>
Using GWT widgets - Part 22012-06-09T00:00:00+00:00http://morevaadin.com/content/using-gwt-widgets-part-2<p>In <a href="/content/using-gwt-widgets-part-1">part 1</a> of Using GWT widgets, we’ve seen how to wrap a Vaadin component around a GWT widget so that we’re able to manipulate on server-side components. For the time being, we are unable to configure the widget though. We’re lacking a vital part in Vaadin-GWT teaming: the shared state.</p>
<p>Shared state is exactly what it means, a placeholder for both server component and client widget to share the same information. In our Bootstrap example, it will enable us to set the text shown in our brand-new BootstrapButton instances. Of course, other attributes can be configured by following the same path.</p>
<p>First thing first, we have to create a <code class="highlighter-rouge">BootstrapButtonState</code> class extending <code class="highlighter-rouge">ComponentState</code>. That class has to be located in the <strong>same package as the connector</strong> (see <a href="/content/using-gwt-widgets-part-1">part 1</a> for a quick refresher on the connector if the need be). The next step is to add the relevant property.</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14</pre></td><td class="code"><pre><span class="kd">public</span> <span class="kd">class</span> <span class="nc">BootstrapButtonState</span> <span class="kd">extends</span> <span class="n">ComponentState</span> <span class="o">{</span>
<span class="kd">private</span> <span class="n">String</span> <span class="n">text</span> <span class="o">=</span> <span class="s">""</span><span class="o">;</span>
<span class="kd">public</span> <span class="n">String</span> <span class="n">getText</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="n">text</span><span class="o">;</span>
<span class="o">}</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">setText</span><span class="o">(</span><span class="n">String</span> <span class="n">text</span><span class="o">)</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="na">text</span> <span class="o">=</span> <span class="n">text</span><span class="o">;</span>
<span class="o">}</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>Since connectors are listeners of change state events, we now need to override its <code class="highlighter-rouge">onStateChanged()</code> method.</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8
9
10</pre></td><td class="code"><pre><span class="kd">public</span> <span class="kt">void</span> <span class="nf">onStateChanged</span><span class="p">(</span><span class="n">StateChangeEvent</span> <span class="n">stateChangeEvent</span><span class="o">)</span> <span class="o">{</span>
<span class="kd">super</span><span class="o">.</span><span class="na">onStateChanged</span><span class="o">(</span><span class="n">stateChangeEvent</span><span class="o">);</span>
<span class="n">BootstrapButtonState</span> <span class="n">state</span> <span class="o">=</span> <span class="n">getState</span><span class="o">();</span>
<span class="n">VBootstrapButton</span> <span class="n">button</span> <span class="o">=</span> <span class="n">getWidget</span><span class="o">();</span>
<span class="n">button</span><span class="o">.</span><span class="na">setText</span><span class="o">(</span><span class="n">state</span><span class="o">.</span><span class="na">getText</span><span class="o">());</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>Notice we also have overriden <code class="highlighter-rouge">getWidget()</code> and <code class="highlighter-rouge">getState()</code> to return the adequate type for our Bootstrap button (code not shown).</p>
<p>The final step is to bridge the server component to the shared state.</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26</pre></td><td class="code"><pre><span class="kd">public</span> <span class="kd">class</span> <span class="nc">BootstrapButton</span> <span class="kd">extends</span> <span class="n">AbstractComponent</span> <span class="o">{</span>
<span class="kd">public</span> <span class="n">BootstrapButton</span><span class="o">(</span><span class="n">String</span> <span class="n">caption</span><span class="o">)</span> <span class="o">{</span>
<span class="n">setText</span><span class="o">(</span><span class="n">caption</span><span class="o">);</span>
<span class="n">setImmediate</span><span class="o">(</span><span class="kc">true</span><span class="o">);</span> <span class="c1">// It's a button!</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="n">BootstrapButtonState</span> <span class="n">getState</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="o">(</span><span class="n">BootstrapButtonState</span><span class="o">)</span> <span class="kd">super</span><span class="o">.</span><span class="na">getState</span><span class="o">();</span>
<span class="o">}</span>
<span class="kd">public</span> <span class="n">String</span> <span class="n">getText</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="n">getState</span><span class="o">().</span><span class="na">getText</span><span class="o">();</span>
<span class="o">}</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">setText</span><span class="o">(</span><span class="n">String</span> <span class="n">text</span><span class="o">)</span> <span class="o">{</span>
<span class="n">getState</span><span class="o">().</span><span class="na">setText</span><span class="o">(</span><span class="n">text</span><span class="o">);</span>
<span class="n">requestRepaint</span><span class="o">();</span>
<span class="o">}</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>Note the <code class="highlighter-rouge">requestRepaint()</code> is mandatory to mark the state as changed.</p>
<p>That’s it: we have managed to change the button’s text from the server code! From this point on, we can also configure both style and size to be able to mix and match between all attributes. Sources for this article can be found on [GitHub]((https://github.com/nfrankel/More-Vaadin/tree/master/custom-component-example).</p>
<p>In the <a href="/content/using-gwt-widgets-part-3">final part</a> of this serie, we’ll look at how to send client events to the server.</p>
Using GWT widgets - Part 12012-06-02T00:00:00+00:00http://morevaadin.com/content/using-gwt-widgets-part-1<p>Even if Vaadin provides you with plenty of components out-of-the-box, chances are sooner or later, you’ll want to use that special GWT widget you just saw the last day. In that case, be happy because Vaadin let you do that. Then, you’ll be able to package the component in a simple JAR archive and reuse it in all projects you want, just like Vaadin components themselves. In this 3 parts article serie, we’ll see how to do just that with Vaadin 7:</p>
<ul>
<li>This first part is about just wrapping GWT widgets in Vaadin components</li>
<li>In the second part, we’ll see how to configure the client widget from the server component</li>
<li>The final part will detail how to communicate from client to server</li>
</ul>
<p>The first step it to choose which widget to wrap. As an illustration, we’ll use GWT-Bootstrap, a GWT implementation of Twitter Bootstrap and most specifically the <code class="highlighter-rouge">com.github.gwtbootstrap.client.ui.Button</code>. Of course, lessons learned here can easily be transposed for other GWT widgets.</p>
<p>Wrapping a GWT widget in Vaadin code requires a couple of classes:</p>
<ul>
<li>The first class to create is the Vaadin component itself. Such components should extends <code class="highlighter-rouge">com.vaadin.ui.AbstractComponent</code> (or <code class="highlighter-rouge">com.vaadin.ui.AbstractComponentContainer</code> for components that contains other components, which is not the case for buttons):</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4</pre></td><td class="code"><pre><span class="kd">public</span> <span class="kd">class</span> <span class="nc">BootstrapButton</span> <span class="kd">extends</span> <span class="n">AbstractComponent</span> <span class="o">{</span>
<span class="o">...</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<ul>
<li>The second class to create is the client widget itself. It’s very simple: just extend the wanted GWT widget (the Bootstrap button in our case). Note that <strong>it’s mandatory to locate it in a <code class="highlighter-rouge">client.ui</code> subpackage</strong> relative to the above component:</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7</pre></td><td class="code"><pre><span class="kd">public</span> <span class="kd">class</span> <span class="nc">VBootstrapButton</span> <span class="kd">extends</span> <span class="n">Button</span> <span class="o">{</span>
<span class="kd">public</span> <span class="n">VBootstrapButton</span><span class="o">()</span> <span class="o">{</span>
<span class="n">addStyleName</span><span class="o">(</span><span class="s">"v-button-bootstrap"</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<ul>
<li>The final class will bind the component and the widget. In Vaadin semantics, it’s called a connector. Connectors have to extend <code class="highlighter-rouge">com.vaadin.terminal.gwt.client.ui.AbstractComponentConnector</code> (or <code class="highlighter-rouge">com.vaadin.terminal.gwt.client.ui.AbstractComponentContainerConnector</code> for those widgets that contain other widgets). Connecting is achieved by implement the <code class="highlighter-rouge">createWidget()</code> that should return the previously implemented client class and by annotating the connector with the <code class="highlighter-rouge">@Connect</code> that takes the server class as the value.</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8
9</pre></td><td class="code"><pre><span class="nd">@Connect</span><span class="o">(</span><span class="n">com</span><span class="o">.</span><span class="na">morevaadin</span><span class="o">.</span><span class="na">vaadin7</span><span class="o">.</span><span class="na">custom</span><span class="o">.</span><span class="na">BootstrapButton</span><span class="o">.</span><span class="na">class</span><span class="o">)</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">BootstrapButtonConnector</span> <span class="kd">extends</span> <span class="n">AbstractComponentConnector</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">protected</span> <span class="n">Widget</span> <span class="n">createWidget</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="n">GWT</span><span class="o">.</span><span class="na">create</span><span class="o">(</span><span class="n">VBootstrapButton</span><span class="o">.</span><span class="na">class</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>It also has to be located in the <code class="highlighter-rouge">client.ui</code> subpackage.</p>
<p>GWT reads Java code and renders HTML and JavaScript. When using standard Vaadin components, the code is precompiled and available in the Vaadin JAR, but when adding third-party widgets, we need to compile both Vaadin and the other widgets. In order to achieve this, two things are necessary:</p>
<ul>
<li>First, we have to create a GWT widgetset <code class="highlighter-rouge">gwt.xml</code> file, referencing both the Vaadin and the Bootstrap widgetset:</li>
</ul>
<figure class="highlight"><pre><code class="language-xml" data-lang="xml"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8
9
10</pre></td><td class="code"><pre><span class="cp"><?xml version="1.0" encoding="UTF-8"?></span>
<span class="cp"><!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/gwt-module.dtd"></span>
<span class="nt"><module></span>
<span class="nt"><inherits</span> <span class="na">name=</span><span class="s">"com.vaadin.terminal.gwt.DefaultWidgetSet"</span> <span class="nt">/></span>
<span class="nt"><inherits</span> <span class="na">name=</span><span class="s">"com.github.gwtbootstrap.Bootstrap"</span> <span class="nt">/></span>
<span class="c"><!-- Reduces compilation time in development mode --></span>
<span class="c"><!--
<set-property name="user.agent" value="safari,gecko1_8" />
--></span>
<span class="nt"></module></span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<ul>
<li>Then, we have to handle the compilation itself. Either uses the Eclipse Vaadin plugin compilation feature or insert the following snippet in the Maven POM:</li>
</ul>
<figure class="highlight"><pre><code class="language-xml" data-lang="xml"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35</pre></td><td class="code"><pre><span class="nt"><build></span>
<span class="nt"><plugins></span>
<span class="nt"><plugin></span>
<span class="nt"><groupId></span>org.codehaus.mojo<span class="nt"></groupId></span>
<span class="nt"><artifactId></span>gwt-maven-plugin<span class="nt"></artifactId></span>
<span class="nt"><version></span>2.4.0<span class="nt"></version></span>
<span class="nt"><configuration></span>
<span class="nt"><webappDirectory></span>${project.build.directory}/${project.build.finalName}/VAADIN/widgetsets<span class="nt"></webappDirectory></span>
<span class="nt"><extraJvmArgs></span>-Xmx512M -Xss1024k<span class="nt"></extraJvmArgs></span>
<span class="nt"></configuration></span>
<span class="nt"><executions></span>
<span class="nt"><execution></span>
<span class="nt"><goals></span>
<span class="nt"><goal></span>resources<span class="nt"></goal></span>
<span class="nt"><goal></span>compile<span class="nt"></goal></span>
<span class="nt"></goals></span>
<span class="nt"></execution></span>
<span class="nt"></executions></span>
<span class="nt"></plugin></span>
<span class="nt"><plugin></span>
<span class="nt"><groupId></span>com.vaadin<span class="nt"></groupId></span>
<span class="nt"><artifactId></span>vaadin-maven-plugin<span class="nt"></artifactId></span>
<span class="nt"><version></span>1.0.2<span class="nt"></version></span>
<span class="nt"><executions></span>
<span class="nt"><execution></span>
<span class="nt"><configuration></span>
<span class="nt"></configuration></span>
<span class="nt"><goals></span>
<span class="nt"><goal></span>update-widgetset<span class="nt"></goal></span>
<span class="nt"></goals></span>
<span class="nt"></execution></span>
<span class="nt"></executions></span>
<span class="nt"></plugin></span>
<span class="nt"></plugins></span>
<span class="nt"></build></span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>Sources for this article can be found on <a href="https://github.com/nfrankel/More-Vaadin/tree/master/custom-component-example">GitHub</a>. In the <a href="/content/using-gwt-widgets-part-2">following part</a>, we’ll detail how to let developers customize widgets though components on the server side.</p>
Debugging Vaadin client widgets2012-05-25T00:00:00+00:00http://morevaadin.com/content/debugging-vaadin-client-widgets<p>When working with standard Vaadin components, you can rely on your prefered IDE’s debugger to help you when something unexpected happens. When integrating add-ons with widgets, chances are that something won’t work on the client side sooner or later. In this case, IDE debugging won’t help and we need something else.</p>
<p>This something else is GWT hosted mode. The first step to enable this feature is to create a launch in Eclipse. In order to that, right-click on your Eclipse project and choose Properties. In the opening pop-up, select the Vaadin menu (type “Vaadin” in upper left field if you need to reduce the number of menu entries).</p>
<p><img src="/assets/images/vaadin_gwt_launch.png" width="609" height="493" /></p>
<p>Click on the Create development mode launch button: this creates a .launch file at the root of the project. Right click on it and choose <strong>Debug as</strong> ‘GWT hosted mode’. This launches the GWT development mode window. Subsequent runs can be directly started from the Debug configurations tool item.</p>
<p>The second step is to use <code class="highlighter-rouge">PRETTY</code> style compilation, either through the previous screen or through Maven, depending on your approach.</p>
<p>The third step is optional but recommended. Since there will be a lot of debugging, updating code and compiling to JavaScript cycles, it will speed them up to compile only for the browser you’re currently using. Locate your gwt.xml file and insert the following snippet:</p>
<figure class="highlight"><pre><code class="language-xml" data-lang="xml"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1</pre></td><td class="code"><pre><span class="nt"><set-property</span> <span class="na">name=</span><span class="s">"user.agent"</span> <span class="na">value=</span><span class="s">"safari"</span> <span class="nt">/></span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>This will set the user agent to Chrome (as well as you guessed, Safari).</p>
<p>The fourth step consists of installing the corresponding plugin in your browser.</p>
<p>Launch the application in an embedded server inside Eclipse. Paste the following URL in your browser <a href="http://localhost:8080/custom?gwt.codesvr=127.0.0.1:9997">http://localhost:8080/custom?gwt.codesvr=127.0.0.1:9997</a>.</p>
<p>Either use Google Chrome (or Chromium if you value your privacy). Of course, port and context-root should be customized according to your configuration. Follow the displayed instructions to install the GWT Developer plugin.</p>
<p><em>Note that Internet Explorer download link doesn’t work and that Mozilla Firefox version should be comprised between 3.0 and 10.0 for an available plugin to be found.</em></p>
<p>From this point on, you get two main assets while debugging:</p>
<ul>
<li>The GWT Development console shows you a bunch of log messages that were previously eaten away. That means you can call <code class="highlighter-rouge">GWT.log()</code> in your own code and see the message in the console.
<img src="/assets/images/development_mode_console.png" width="514" height="518" /></li>
<li>You can set breakpoints in Eclipse in <strong>client-side</strong> code, and expects the execution to stop at these, just like in regular server-side code. With this, you have access to the method calls stack as well as variable values.
<img src="/assets/images/client_side_debug.png" width="741" height="134" />
There’s nothing revolutionary with this technique: GWT developers use it since ages but for Vaadin developers , it’s another tool at your disposal to be able to provide top-notch UI components.</li>
</ul>
Another way to decouple your server components2012-05-05T00:00:00+00:00http://morevaadin.com/content/another-way-decouple-your-server-components<p>One of Vaadin strongest points is the way you can reuse components from project to project inside JARs. This can only be achieved if these components are nicely decoupled from one another.</p>
<p>In Learning Vaadin, I showed how to decouple them using DI. However, this way only handles “static” coupling - the way a component depends on another to be displayed, it doesn’t handle “dynamic coupling”, the way a component depends on another to do something. For example, a list box values could depend on the selected value of another list box.</p>
<p>In order to achieve this kind of behavior, it would be nice if components could send and receive events.</p>
<p>Vaadin doesn’t provide this feature out-of-the-box but there are many frameworks that tackle events management: CDI (aka JSR 299), Google’s Guava <code class="highlighter-rouge">EventBus</code> and so many more.</p>
<p>In this article, I chose Guava for the following reasons: it doesn’t depend on a platform, it’s usable with Java 5 and it only draws a single dependency, making it nearly self-contained. As the use-case, let’s have two combo boxes, one for countries, the other for capitals. When the country changes, the capital has to be selected.</p>
<p>It’s of first importance that the combos do not know about each other, so let’s bury them underneath a hierarchy of components.</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">FirstComponent</span> <span class="kd">extends</span> <span class="n">CustomComponent</span> <span class="o">{</span>
<span class="kd">private</span> <span class="n">ComboBox</span> <span class="n">cb</span> <span class="o">=</span> <span class="k">new</span> <span class="n">ComboBox</span><span class="o">(</span><span class="s">"Country"</span><span class="o">);</span>
<span class="o">}</span></code></pre></figure>
<p>Guava event management is based entirely on the <code class="highlighter-rouge">EventBus</code> class. Some steps are necessary:</p>
<ul>
<li>Listener methods should be annotated with Guava’s <code class="highlighter-rouge">@Subscribe</code></li>
<li>Listener method should declare as their only parameter the type of event they’re interested in handling:</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="nd">@Subscribe</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="nf">changeCapitalOnCountryChange</span><span class="p">(</span><span class="n">CountryChangedEvent</span> <span class="n">event</span><span class="o">)</span> <span class="o">{</span>
<span class="o">...</span>
<span class="o">}</span></code></pre></figure>
<p>Note there’s no enforcement on the event type’s hierarchy, you can basically pass whatever strikes your fancy (provided it’s not a simple type).</p>
<ul>
<li>The bus registers listener instances.</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java">
<span class="n">bus</span><span class="o">.</span><span class="na">register</span><span class="o">(</span><span class="k">new</span> <span class="n">SecondComponent</span><span class="o">());</span></code></pre></figure>
<ul>
<li>Producers have to post new events into the bus. In our case, this has to be done when a <code class="highlighter-rouge">ValueChangeEvent</code> is received (from the client-side):</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="kd">public</span> <span class="kt">void</span> <span class="nf">valueChange</span><span class="p">(</span><span class="n">ValueChangeEvent</span> <span class="n">vcEvent</span><span class="o">)</span> <span class="o">{</span>
<span class="n">bus</span><span class="o">.</span><span class="na">post</span><span class="o">(</span><span class="k">new</span> <span class="n">CountryChangedEvent</span><span class="o">());</span>
<span class="o">}</span></code></pre></figure>
<p>Basically the only coupling you’ll ever have is between the producer and the event bus.</p>
<p>In order to reduce the previous coupling, let’s design the producer’s constructor to take the bus as a parameter, so as to be able to inject it:</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">FirstComponent</span> <span class="kd">extends</span> <span class="n">CustomComponent</span> <span class="o">{</span>
<span class="kd">public</span> <span class="n">FirstComponent</span><span class="o">(</span><span class="kd">final</span> <span class="n">EventBus</span> <span class="n">bus</span><span class="o">)</span> <span class="o">{</span>
<span class="o">...</span>
<span class="o">}</span>
<span class="o">}</span></code></pre></figure>
<p>The complete source code is available on <a href="https://github.com/nfrankel/More-Vaadin/tree/master/eventbus-example">GitHub</a>.</p>
Integrating Vaadin into legacy applications2012-04-26T00:00:00+00:00http://morevaadin.com/content/integrating-vaadin-legacy-applications<p>Though embedding Vaadin parts in legacy applications was covered in <a href="http://www.packtpub.com/learning-vaadin-rias/book">Learning Vaadin</a>, you may feel the need to go further toward this goal.</p>
<p>The description I made works, but your user interface has to be neatly separated into different rectangular zones for Vaadin-served <code class="highlighter-rouge">iframe</code>s or <code class="highlighter-rouge">div</code>s to take place. This clearly won’t achieve the best integration results: we can do better with the <a href="http://vaadin.com/directory/-/directory/addon/externallayout"><code class="highlighter-rouge">ExternalLayout</code></a> add-on. It let you compose Vaadin components in your legacy application, irrelevant of where your Vaadin <code class="highlighter-rouge">div</code> is located on it: use-cases include a search box, a shopping cart, a menu bar, you name it!</p>
<p>In this article, we’ll focus on a menu bar, situated at the top of the page while the main Vaadin application consists of a form located just under the title of a page (see below mockup).</p>
<p><img src="/assets/images/mockup.png" width="640" height="480" /></p>
<p>The form creation is easy enough and out of the scope of this article. What we want, however, is to have both the menu bar and the form to be served by the same Vaadin application so as to have possible integration between them.</p>
<p>Here comes the external layout add-on; when embedding a Vaadin application inside a web page, we can put any Vaadin component on any placeholder inside this page, regardless of the position of the embedded application.</p>
<p>Detailed instructions for embedding an application can be found in <a href="http://www.packtpub.com/learning-vaadin-rias/book">Learning Vaadin</a>. In order to use the add-on, here are the necessary steps:</p>
<ol>
<li>Get the library, either as a <a href="https://vaadin.com/directory#downloading/externallayout/1096/1">download</a> or by using the following Maven dependency:</li>
</ol>
<figure class="highlight"><pre><code class="language-xml" data-lang="xml"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5</pre></td><td class="code"><pre><span class="nt"><dependency></span>
<span class="nt"><groupId></span>org.vaadin.addons<span class="nt"></groupId></span>
<span class="nt"><artifactId></span>externallayout<span class="nt"></artifactId></span>
<span class="nt"><version></span>1.0<span class="nt"></version></span>
<span class="nt"></dependency></span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<ol>
<li>Create the external layout by supplying both the placeholder’s <code class="highlighter-rouge">id</code> and the desired component:</li>
</ol>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1</pre></td><td class="code"><pre><span class="n">ExternalLayout</span> <span class="n">elayout</span> <span class="o">=</span> <span class="k">new</span> <span class="n">ExternalLayout</span><span class="o">(</span><span class="s">"menu"</span><span class="o">,</span> <span class="k">new</span> <span class="n">EclipseMenuBar</span><span class="o">());</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<ol>
<li>Finally, add the layout as a component to the window:</li>
</ol>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1</pre></td><td class="code"><pre><span class="n">wnidow</span><span class="o">.</span><span class="na">addComponent</span><span class="o">(</span><span class="n">elayout</span><span class="o">);</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>That’s it! If you provide a simple HTML page with a <code class="highlighter-rouge">div</code> which id matches “menu”, the menu bar will be rendered on it.</p>
<p>Complete sources for this article can be found on <a href="https://github.com/nfrankel/More-Vaadin/tree/master/external-layout-example">GitHub</a>.</p>
Theming and custom layout2012-04-09T00:00:00+00:00http://morevaadin.com/content/theming-and-custom-layout<p>In <a href="http://www.packtpub.com/learning-vaadin-rias/book">Learning Vaadin</a>, I deliberately left out theming, because I wholeheartedly believe a whole book could be written on the topic. This article is an attempt at giving an overview of the available theme and layout features in Vaadin.</p>
<p>At the most basic level, developers can change the look and feel of the application with the simple <code class="highlighter-rouge">setTheme()</code> method.</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7</pre></td><td class="code"><pre><span class="kd">public</span> <span class="kd">class</span> <span class="nc">MyApplication</span> <span class="kd">extends</span> <span class="n">Application</span> <span class="o">{</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">init</span><span class="o">()</span> <span class="o">{</span>
<span class="n">setTheme</span><span class="o">(</span><span class="s">"reindeer"</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>Now, given the <a href="http://vaadin.com/directory#browse/type/2">available themes</a> in Vaadin’s directory, it can get you very far indeed. For example, we just have to put the <a href="http://vaadin.com/directory#addon/reindeermods">ReindeerMods</a> in the <code class="highlighter-rouge">WEB-INF</code> lib directory and programmatically change the theme and presto, we are done.</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7</pre></td><td class="code"><pre><span class="kd">public</span> <span class="kd">class</span> <span class="nc">MyApplication</span> <span class="kd">extends</span> <span class="n">Application</span> <span class="o">{</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">init</span><span class="o">()</span> <span class="o">{</span>
<span class="n">setTheme</span><span class="o">(</span><span class="s">"reindeermods"</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>The next logical step is to be able to create our own theme. At the most basic level, a theme is just a CSS named <code class="highlighter-rouge">styles.css</code> and located under <code class="highlighter-rouge">WEB-INF/VAADIN/themes/<my-theme-name></code>.</p>
<p>For a well rounded theme, we have to redefine all possible Vaadin classes. Since it’s a dauting task to start from scratch, it’s advised to start from an available theme. Just import the wanted CSS into your own and redefine what is needed:</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6</pre></td><td class="code"><pre><span class="nd">@import</span> <span class="s">"../reindeermods/styles.css"</span><span class="o">;</span>
<span class="o">.</span><span class="na">v</span><span class="o">-</span><span class="n">menubar</span> <span class="o">.</span><span class="na">v</span><span class="o">-</span><span class="n">menubar</span><span class="o">-</span><span class="n">menuitem</span> <span class="o">{</span>
<span class="nl">cursor:</span> <span class="n">pointer</span><span class="o">;</span>
<span class="n">font</span><span class="o">-</span><span class="nl">weight:</span> <span class="n">bold</span><span class="o">;</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>Since it shows the height of my graphics skills, we’ll let it at that on the CSS front.</p>
<p>Vaadin themes can also package custom layouts. Custom layouts are useful when one wants to have more versatility than vertical and horizatontal layout. In a custom layout, we define a HTML template with placeholders identified by the location attribute. For example:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5</pre></td><td class="code"><pre><span class="nt"><div</span> <span class="na">location=</span><span class="s">"top"</span> <span class="na">id=</span><span class="s">"top"</span><span class="nt">></div></span>
<span class="nt"><div></span>
<span class="nt"><span</span> <span class="na">location=</span><span class="s">"bottom"</span> <span class="na">id=</span><span class="s">"bottom"</span><span class="nt">></span></span>
<span class="nt"><span</span> <span class="na">location=</span><span class="s">"left"</span> <span class="na">id=</span><span class="s">"left"</span><span class="nt">></span></span>
<span class="nt"></div></span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>This HTML snippet should be located under <code class="highlighter-rouge">WEB-INF/VAADIN/themes/<my-theme-name>/layouts/my-layout.html</code>. In order to use a custom layout, instantiate a <code class="highlighter-rouge">CustomLayout</code> object and pass the layout name as a parameter.</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">CustomLayout</span> <span class="n">layout</span> <span class="o">=</span> <span class="k">new</span> <span class="n">CustomLayout</span><span class="o">(</span><span class="s">"my-layout"</span><span class="o">);</span></code></pre></figure>
<p>Then, when adding components, we use the overloaded <code class="highlighter-rouge">addComponent(Component, String)</code> method. The second parameter references the location and tells Vaadin where it should put the component in the custom layout.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11</pre></td><td class="code"><pre>layout.addComponent(menuBar, "top");
layout.addComponent(new Button("Does nothing"), "bottom");
VerticalLayout vLayout = new VerticalLayout();
vLayout.addComponent(new InlineDateField());
vLayout.addComponent(new TextField("", "Nothing to put in here"));
vLayout.setSpacing(true);
vLayout.setMargin(true);
layout.addComponent(vLayout, "left");<span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>As is seen in the previous snippet, nothing prevents us to add containers instead of mere components. Likewise, custom layouts can be used at any level of granularity, from base components to windows. Using both options in combination, custom layouts can provide a powerful way to configure our GUI.</p>
<p>Astute readers may have noticed that a layout belongs to a theme. This has important consequences:</p>
<ol>
<li>Custom layouts can be shipped in JARs, wrapped in themes</li>
<li>When changing a theme, we can change the layout accordingly. As a corollary, this also means we <strong>need</strong> to provide a layout when in this case</li>
</ol>
<p>Finally, what makes theme so powerful in Vaadin is that they can be changed programmatically or by the user. The <code class="highlighter-rouge">setTheme()</code> method reloads the GUI if a new theme is set.</p>
<p>A full-fledged example illustrating the various points in this article is available on <a href="https://github.com/nfrankel/More-Vaadin/tree/master/theming-example">Github</a>, to play with as you like.</p>
Develop Vaadin apps with Scala2012-04-04T00:00:00+00:00http://morevaadin.com/content/develop-vaadin-apps-scala<p>More than a year ago, I tried to <a href="http://blog.frankel.ch/mixing-vaadin-and-scala">use Scala to develop an example Vaadin application</a>. Even though I’m no Scala guru (far from it), I must admit results were below what I expected them to be. Time has passed and Henri Kerola, a Vaadin team member, has commited to create a Scala add-on that aims to ease Scala Vaadin integration: the Scaladin add-on (formerly known as scala-wrappers) is more than meeting my expectations.</p>
<p>There are four brilliant ideas I want to focus on in this article:</p>
<ul>
<li>The first idea is to provide a simple <code class="highlighter-rouge">Application</code> with a single main window with a content set during the <code class="highlighter-rouge">init()</code> method. As a developer, I just have to override the default content and I have everything I need to quickstart my development:</li>
</ul>
<figure class="highlight"><pre><code class="language-scala" data-lang="scala"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6</pre></td><td class="code"><pre><span class="k">import</span> <span class="nn">vaadin.scala.SimpleApplication</span>
<span class="k">class</span> <span class="nc">VaadinScalaApp</span> <span class="k">extends</span> <span class="nc">SimpleApplication</span> <span class="o">{</span>
<span class="k">override</span> <span class="k">def</span> <span class="n">main</span> <span class="k">=</span> <span class="k">new</span> <span class="nc">CompositeFieldButton</span><span class="o">()</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<ul>
<li>The second idea is to use Scala’s named parameters to ease components configuration. In the Java API, components constructors are few and far between and generally are available in three forms: default, one with the label and the last with both label and value. If you do want no label and a value, you have to pass null as the first parameter.
In Scala, named parameters allow to write the following:</li>
</ul>
<figure class="highlight"><pre><code class="language-scala" data-lang="scala"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1</pre></td><td class="code"><pre><span class="k">new</span> <span class="n">vaadin</span><span class="o">.</span><span class="n">scala</span><span class="o">.</span><span class="nc">TextField</span><span class="o">(</span><span class="n">value</span> <span class="k">=</span> <span class="s">"world!"</span><span class="o">)</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<ul>
<li>The third idea is to use Scala’s functional nature in place of anonymous inner classes for event management. In Java, event management is handled like so:</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7</pre></td><td class="code"><pre><span class="n">Button</span> <span class="n">button</span> <span class="o">=</span> <span class="k">new</span> <span class="n">Button</span><span class="o">(</span><span class="s">"Click"</span><span class="o">);</span>
<span class="n">button</span><span class="o">.</span><span class="na">addListener</span><span class="o">(</span><span class="k">new</span> <span class="n">Button</span><span class="o">.</span><span class="na">ClickListener</span><span class="o">()</span> <span class="o">{</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">buttonClick</span><span class="o">(</span><span class="n">ClickEvent</span> <span class="n">event</span><span class="o">)</span> <span class="o">{</span>
<span class="n">getWindow</span><span class="o">().</span><span class="na">showNotification</span><span class="o">(</span><span class="s">"Click me!"</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">});</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>It’s not very concise and most of the code is only boilerplate. With Scaladin, leveraging Scala’s functional nature and the former point, it can be replaced by:</p>
<figure class="highlight"><pre><code class="language-scala" data-lang="scala"><span class="k">new</span> <span class="n">vaadin</span><span class="o">.</span><span class="n">scala</span><span class="o">.</span><span class="nc">Button</span><span class="o">(</span><span class="n">action</span> <span class="k">=</span> <span class="k">_</span> <span class="k">=></span> <span class="n">getWindow</span><span class="o">().</span><span class="n">showNotification</span><span class="o">(</span><span class="s">"Click me!"</span><span class="o">))</span></code></pre></figure>
<ul>
<li>The final idea is to provide a concise syntax for adding components. With the Java API, we have to instantiate a component in order to reference it, only can we add it to a container:</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5</pre></td><td class="code"><pre><span class="n">HorizontalLayout</span> <span class="n">layout</span> <span class="o">=</span> <span class="k">new</span> <span class="n">HorizontalLayout</span><span class="o">();</span>
<span class="n">Button</span> <span class="n">button</span> <span class="o">=</span> <span class="k">new</span> <span class="n">Button</span><span class="o">(</span><span class="s">"Click me!"</span><span class="o">);</span>
<span class="n">layout</span><span class="o">.</span><span class="na">add</span><span class="o">(</span><span class="n">button</span><span class="o">);</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>With Scala and Scaladin, adding a component to a container gets much easier:</p>
<figure class="highlight"><pre><code class="language-scala" data-lang="scala"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4</pre></td><td class="code"><pre><span class="k">val</span> <span class="n">layout</span> <span class="k">=</span> <span class="k">new</span> <span class="nc">HorizontalLayout</span><span class="o">()</span> <span class="o">{</span>
<span class="k">val</span> <span class="n">button</span> <span class="k">=</span> <span class="n">add</span><span class="o">(</span><span class="k">new</span> <span class="nc">Button</span><span class="o">(</span><span class="n">caption</span> <span class="k">=</span> <span class="s">"Click me!"</span><span class="o">))</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>Note: inner fields can be referenced by using the dotted notation (for example, <code class="highlighter-rouge">layout.button</code>).</p>
<p>With the help of all previous features, I redeveloped my first Scala example with only two classes, the application (which code can be found above) and the custom component:</p>
<figure class="highlight"><pre><code class="language-scala" data-lang="scala"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20</pre></td><td class="code"><pre><span class="k">import</span> <span class="nn">com.vaadin.ui.CustomComponent</span>
<span class="k">import</span> <span class="nn">vaadin.scala.</span><span class="o">{</span> <span class="nc">HorizontalLayout</span><span class="o">,</span> <span class="nc">TextField</span><span class="o">,</span> <span class="nc">Button</span> <span class="o">}</span>
<span class="nd">@SerialVersionUID</span><span class="o">(</span><span class="mi">1L</span><span class="o">)</span>
<span class="k">class</span> <span class="nc">CompositeFieldButton</span><span class="o">()</span> <span class="k">extends</span> <span class="nc">CustomComponent</span> <span class="o">{</span>
<span class="k">val</span> <span class="n">layout</span> <span class="k">=</span> <span class="k">new</span> <span class="nc">HorizontalLayout</span><span class="o">(</span><span class="n">spacing</span> <span class="k">=</span> <span class="kc">true</span><span class="o">,</span> <span class="n">margin</span> <span class="k">=</span> <span class="kc">true</span><span class="o">)</span> <span class="o">{</span>
<span class="k">val</span> <span class="n">button</span> <span class="k">=</span> <span class="n">add</span><span class="o">(</span><span class="k">new</span> <span class="nc">Button</span><span class="o">(</span><span class="n">caption</span> <span class="k">=</span> <span class="s">"Hello"</span><span class="o">,</span> <span class="n">action</span> <span class="k">=</span> <span class="k">_</span> <span class="k">=></span> <span class="n">displayMessage</span><span class="o">()))</span>
<span class="k">val</span> <span class="n">field</span> <span class="k">=</span> <span class="n">add</span><span class="o">(</span><span class="k">new</span> <span class="nc">TextField</span><span class="o">(</span><span class="n">value</span> <span class="k">=</span> <span class="s">"world!"</span><span class="o">))</span>
<span class="o">}</span>
<span class="n">setCompositionRoot</span><span class="o">(</span><span class="n">layout</span><span class="o">)</span>
<span class="k">def</span> <span class="n">displayMessage</span><span class="o">()</span><span class="k">:</span> <span class="kt">Unit</span> <span class="o">=</span> <span class="o">{</span>
<span class="n">getWindow</span><span class="o">().</span><span class="n">showNotification</span><span class="o">(</span><span class="n">layout</span><span class="o">.</span><span class="n">button</span><span class="o">.</span><span class="n">getCaption</span><span class="o">()</span> <span class="o">+</span> <span class="s">" "</span> <span class="o">+</span> <span class="n">layout</span><span class="o">.</span><span class="n">field</span><span class="o">.</span><span class="n">getValue</span><span class="o">().</span><span class="n">asInstanceOf</span><span class="o">[</span><span class="kt">String</span><span class="o">])</span>
<span class="o">}</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>In conclusion, where Scala and Vaadin don’t play nice together, Scaladin let us really leverage Scala’s power to ease our Vaadin development. If you’re fan of Scala and Vaadin, you should probably run to get the Scaladin add-on.</p>
<p>Complete source for this article can be found <a href="https://github.com/nfrankel/More-Vaadin/tree/master/vaadin-scala-example">here</a>.</p>
Testing with Embed for Vaadin2012-03-31T00:00:00+00:00http://morevaadin.com/content/testing-embed-vaadin<p>In order to execute integration tests of a web application, there are not so many tools available. One of such tools is <a href="https://www.jboss.org/arquillian.html">JBoss Arquilian</a>: it let you create an archive of your to-be-tested Java classes. <a href="https://vaadin.com/directory#addon/embed-for-vaadin">Embed Vaadin</a> does the same, but is specifically targeted at Vaadin applications and components!</p>
<p>Just select the component you want to test, and presto, it’s wrapped in a dummy application and launched in an embedded Tomcat:</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">EmbedVaadin</span><span class="o">.</span><span class="na">forComponent</span><span class="o">(</span><span class="k">new</span> <span class="n">FormAdvancedLayoutExample</span><span class="o">()).</span><span class="na">wait</span><span class="o">(</span><span class="kc">false</span><span class="o">).</span><span class="na">start</span><span class="o">();</span></code></pre></figure>
<p>If you need to go beyond that and test the full application, that’s also possible. The library takes care of instantiating the application class and all the underlying gory details.</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">EmbedVaadin</span><span class="o">.</span><span class="na">forApplication</span><span class="o">(</span><span class="n">EmbedApplication</span><span class="o">.</span><span class="na">class</span><span class="o">).</span><span class="na">wait</span><span class="o">(</span><span class="kc">false</span><span class="o">).</span><span class="na">start</span><span class="o">();</span></code></pre></figure>
<p>Of course, there are configuration parameters. For example, you can choose the HTTP port (in order to avoid port conflict) and to launch a browser window. Presto, your integration test is ready to run!</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">EmbedVaadin</span><span class="o">.</span><span class="na">forApplication</span><span class="o">(</span><span class="n">EmbedApplication</span><span class="o">.</span><span class="na">class</span><span class="o">).</span><span class="na">withHttpPort</span><span class="o">(</span><span class="mi">8888</span><span class="o">).</span><span class="na">wait</span><span class="o">(</span><span class="kc">true</span><span class="o">).</span><span class="na">openBrowser</span><span class="o">(</span><span class="kc">true</span><span class="o">).</span><span class="na">start</span><span class="o">();</span></code></pre></figure>
<p>For Maven users, the good news is that the add-on is readily provided as a Maven dependency:</p>
<figure class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt"><dependency></span>
<span class="nt"><groupId></span>com.bsb.common.vaadin<span class="nt"></groupId></span>
<span class="nt"><artifactId></span>com.bsb.common.vaadin.embed<span class="nt"></artifactId></span>
<span class="nt"><version></span>0.5<span class="nt"></version></span>
<span class="nt"><scope></span>test<span class="nt"></scope></span>
<span class="nt"></dependency></span></code></pre></figure>
<p>For Vaadin 7, please use:</p>
<figure class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt"><dependency></span>
<span class="nt"><groupId></span>com.bsb.common.vaadin<span class="nt"></groupId></span>
<span class="nt"><artifactId></span>com.bsb.common.vaadin7.embed<span class="nt"></artifactId></span>
<span class="nt"><version></span>0.5<span class="nt"></version></span>
<span class="nt"><scope></span>test<span class="nt"></scope></span>
<span class="nt"></dependency></span></code></pre></figure>
<p>For those wishing to go further, a full-fledged example is available on <a href="https://github.com/nfrankel/More-Vaadin/tree/master/embed-example">Github</a>.</p>
<p><em>Note that Embed Vaadin is available under the friendly Apache 2.0 license.</em></p>
Bean Validation and Vaadin comprehensive example2012-03-22T00:00:00+00:00http://morevaadin.com/content/bean-validation-and-vaadin-comprehensive-example<p>One of Vaadin 7 key features is its tight JSR 303, also known as Bean Validation, integration. This article will detail on how to achieve such a validation.</p>
<p>For starters, let’s have a simple use-case: the user fills in a form. When there’s an error, the user is informed visually about the error. Submitting the form is only possible when all errors have been corrected. This a common scenario and we’ll implement it with Vaadin.</p>
<h2 id="prerequisites">Prerequisites</h2>
<p>There are a couple of prerequisites to address before going further:</p>
<ol>
<li>First, we’ll need a JSR 303 implementation. In this case, we’ll use Hibernate Validator (which is also JSR-303 Reference Implementation)</li>
<li>The next step is to define the underlying bean. In our case, we’ll keep it simple (and stupid): a Person and its associated attributes. The first name and the last name must not be null while the email, when it exists, has to respect an email pattern.</li>
</ol>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><table style="border-spacing: 0"><tbody><tr><td class="gutter gl" style="text-align: right"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29</pre></td><td class="code"><pre><span class="kn">import</span> <span class="nn">java.util.Date</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">javax.validation.constraints.NotNull</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">javax.validation.constraints.Size</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">org.hibernate.validator.constraints.Email</span><span class="o">;</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">Person</span> <span class="o">{</span>
<span class="kd">private</span> <span class="kt">long</span> <span class="n">id</span><span class="o">;</span>
<span class="kd">private</span> <span class="n">Gender</span> <span class="n">gender</span><span class="o">;</span>
<span class="nd">@Size</span><span class="o">(</span><span class="n">max</span> <span class="o">=</span> <span class="mi">250</span><span class="o">)</span>
<span class="nd">@NotNull</span>
<span class="kd">private</span> <span class="n">String</span> <span class="n">firstName</span><span class="o">;</span>
<span class="nd">@Size</span><span class="o">(</span><span class="n">max</span> <span class="o">=</span> <span class="mi">250</span><span class="o">)</span>
<span class="nd">@NotNull</span>
<span class="kd">private</span> <span class="n">String</span> <span class="n">lastName</span><span class="o">;</span>
<span class="nd">@Size</span><span class="o">(</span><span class="n">max</span> <span class="o">=</span> <span class="mi">250</span><span class="o">)</span>
<span class="nd">@Email</span>
<span class="kd">private</span> <span class="n">String</span> <span class="n">email</span><span class="o">;</span>
<span class="kd">private</span> <span class="n">Date</span> <span class="n">birthdate</span><span class="o">;</span>
<span class="c1">// Getters and setters</span>
<span class="o">}</span><span class="w">
</span></pre></td></tr></tbody></table></code></pre></figure>
<p>Note that <code class="highlighter-rouge">NotNull</code> and <code class="highlighter-rouge">Size</code> constraints come from the JSR itself (<code class="highlighter-rouge">javax.validation.constraints</code> package) while <code class="highlighter-rouge">Email</code> comes from Hibernate Validator (<code class="highlighter-rouge">org.hibernate.validator.constraints</code> package). Despite the coupling, considering the added value, I don’t have any scruples using it.</p>
<h2 id="validating">Validating</h2>
<p>Once the bean is annotated, it’s only a matter of:</p>
<ul>
<li>Creating a new bean: this is pretty self-explanatory</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">BeanItem</span><span class="o"><</span><span class="n">Person</span><span class="o">></span> <span class="n">item</span> <span class="o">=</span> <span class="k">new</span> <span class="n">BeanItem</span><span class="o"><</span><span class="n">Person</span><span class="o">>(</span><span class="k">new</span> <span class="n">Person</span><span class="o">());</span></code></pre></figure>
<ul>
<li>Vaadin 7 having deprecated the <code class="highlighter-rouge">Form</code> class, we need to put the bean into its replacement, <code class="highlighter-rouge">FieldGroup</code>.</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">FieldGroup</span> <span class="n">group</span> <span class="o">=</span> <span class="k">new</span> <span class="n">FieldGroup</span><span class="o">(</span><span class="n">item</span><span class="o">);</span></code></pre></figure>
<ul>
<li>Then, we need to get a reference on each displayable field (as opposed to Form where there was a default and we could customize it). The <code class="highlighter-rouge">FieldGroup</code> has methods to create each field and to bind it to the underlying bean property.</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">Field</span><span class="o"><?></span> <span class="n">gender</span> <span class="o">=</span> <span class="n">group</span><span class="o">.</span><span class="na">buildAndBind</span><span class="o">(</span><span class="s">"Gender"</span><span class="o">,</span> <span class="s">"gender"</span><span class="o">,</span> <span class="n">Select</span><span class="o">.</span><span class="na">class</span><span class="o">);</span>
<span class="n">Field</span><span class="o"><?></span> <span class="n">firstName</span> <span class="o">=</span> <span class="n">group</span><span class="o">.</span><span class="na">buildAndBind</span><span class="o">(</span><span class="s">"First name"</span><span class="o">,</span> <span class="s">"firstName"</span><span class="o">);</span>
<span class="n">Field</span><span class="o"><?></span> <span class="n">lastName</span> <span class="o">=</span> <span class="n">group</span><span class="o">.</span><span class="na">buildAndBind</span><span class="o">(</span><span class="s">"Last name"</span><span class="o">,</span> <span class="s">"lastName"</span><span class="o">);</span>
<span class="n">Field</span><span class="o"><?></span> <span class="n">email</span> <span class="o">=</span> <span class="n">group</span><span class="o">.</span><span class="na">buildAndBind</span><span class="o">(</span><span class="s">"email"</span><span class="o">);</span>
<span class="n">Field</span><span class="o"><?></span> <span class="n">birthdate</span> <span class="o">=</span> <span class="n">group</span><span class="o">.</span><span class="na">buildAndBind</span><span class="o">(</span><span class="s">"Birth date"</span><span class="o">,</span> <span class="s">"birthdate"</span><span class="o">);</span></code></pre></figure>
<ul>
<li>Each field is then set its validator (if needed)</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">firstName</span><span class="o">.</span><span class="na">addValidator</span><span class="o">(</span><span class="k">new</span> <span class="n">BeanValidator</span><span class="o">(</span><span class="n">Person</span><span class="o">.</span><span class="na">class</span><span class="o">,</span> <span class="s">"firstName"</span><span class="o">));</span>
<span class="n">lastName</span><span class="o">.</span><span class="na">addValidator</span><span class="o">(</span><span class="k">new</span> <span class="n">BeanValidator</span><span class="o">(</span><span class="n">Person</span><span class="o">.</span><span class="na">class</span><span class="o">,</span> <span class="s">"lastName"</span><span class="o">));</span>
<span class="n">email</span><span class="o">.</span><span class="na">addValidator</span><span class="o">(</span><span class="k">new</span> <span class="n">BeanValidator</span><span class="o">(</span><span class="n">Person</span><span class="o">.</span><span class="na">class</span><span class="o">,</span> <span class="s">"email"</span><span class="o">));</span></code></pre></figure>
<ul>
<li>Finally, each field has to be set on our layout the way we want</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">layout</span><span class="o">.</span><span class="na">addComponent</span><span class="o">(</span><span class="n">gender</span><span class="o">);</span>
<span class="n">layout</span><span class="o">.</span><span class="na">addComponent</span><span class="o">(</span><span class="n">firstName</span><span class="o">);</span>
<span class="n">layout</span><span class="o">.</span><span class="na">addComponent</span><span class="o">(</span><span class="n">lastName</span><span class="o">);</span>
<span class="n">layout</span><span class="o">.</span><span class="na">addComponent</span><span class="o">(</span><span class="n">email</span><span class="o">);</span>
<span class="n">layout</span><span class="o">.</span><span class="na">addComponent</span><span class="o">(</span><span class="n">birthdate</span><span class="o">);</span></code></pre></figure>
<h2 id="finishing-touches">Finishing touches</h2>
<p>There are a couple of finishing touches necessary to achieve a polished user interface.</p>
<h3 id="no-preliminary-validation">No preliminary validation</h3>
<p>If all previous code snippets take place in the init() method, users will see validation errors on first and last names when the page is displayed, since all bean attributes are initially empty.</p>
<p>Thus, it’s higly desirable to install validators only after the page has been displayed for the first time without errors. This could be done when the field loses focus and yet, it has to be done even if the field never receives focus. Thus, we have to set it in two places:
+ In each validated field blur listener</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">firstName</span><span class="o">.</span><span class="na">addListener</span><span class="o">(</span><span class="k">new</span> <span class="n">InstallPersonValidatorBlurListener</span><span class="o">(</span><span class="n">firstName</span><span class="o">,</span> <span class="s">"firstName"</span><span class="o">));</span>
<span class="n">lastName</span><span class="o">.</span><span class="na">addListener</span><span class="o">(</span><span class="k">new</span> <span class="n">InstallPersonValidatorBlurListener</span><span class="o">(</span><span class="n">lastName</span><span class="o">,</span> <span class="s">"lastName"</span><span class="o">));</span>
<span class="n">email</span><span class="o">.</span><span class="na">addListener</span><span class="o">(</span><span class="k">new</span> <span class="n">InstallPersonValidatorBlurListener</span><span class="o">(</span><span class="n">email</span><span class="o">,</span> <span class="s">"email"</span><span class="o">));</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">InstallPersonValidatorBlurListener</span> <span class="kd">implements</span> <span class="n">BlurListener</span> <span class="o">{</span>
<span class="kd">private</span> <span class="n">Field</span><span class="o"><?></span> <span class="n">field</span><span class="o">;</span>
<span class="kd">private</span> <span class="n">String</span> <span class="n">attribute</span><span class="o">;</span>
<span class="kd">public</span> <span class="n">InstallPersonValidatorBlurListener</span><span class="o">(</span><span class="n">Field</span><span class="o"><?></span> <span class="n">field</span><span class="o">,</span> <span class="n">String</span> <span class="n">attribute</span><span class="o">)</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="na">field</span> <span class="o">=</span> <span class="n">field</span><span class="o">;</span>
<span class="k">this</span><span class="o">.</span><span class="na">attribute</span> <span class="o">=</span> <span class="n">attribute</span><span class="o">;</span>
<span class="o">}</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">blur</span><span class="o">(</span><span class="n">BlurEvent</span> <span class="n">event</span><span class="o">)</span> <span class="o">{</span>
<span class="n">ValidatorUtils</span><span class="o">.</span><span class="na">installSingleValidator</span><span class="o">(</span><span class="n">field</span><span class="o">,</span> <span class="n">attribute</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">}</span></code></pre></figure>
<ul>
<li>Just before the <code class="highlighter-rouge">FieldGroup</code> commit</li>
</ul>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">ValidatorUtils</span><span class="o">.</span><span class="na">installSingleValidator</span><span class="o">(</span><span class="n">firstName</span><span class="o">,</span> <span class="s">"firstName"</span><span class="o">);</span>
<span class="n">ValidatorUtils</span><span class="o">.</span><span class="na">installSingleValidator</span><span class="o">(</span><span class="n">lastName</span><span class="o">,</span> <span class="s">"lastName"</span><span class="o">);</span>
<span class="n">ValidatorUtils</span><span class="o">.</span><span class="na">installSingleValidator</span><span class="o">(</span><span class="n">email</span><span class="o">,</span> <span class="s">"email"</span><span class="o">);</span>
<span class="n">group</span><span class="o">.</span><span class="na">commit</span><span class="o">();</span></code></pre></figure>
<p><em>Note that since we don’t keep a reference to the installed validator, we have to uninstall it before installing it otherwise it leads to twice (or more) the same validation.</em></p>
<p>For clarity’s sake, here’s the <code class="highlighter-rouge">ValidatorUtils</code> code:</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">ValidatorUtils</span> <span class="o">{</span>
<span class="kd">private</span> <span class="n">ValidatorUtils</span><span class="o">()</span> <span class="o">{}</span>
<span class="kd">static</span> <span class="kt">void</span> <span class="n">installSingleValidator</span><span class="o">(</span><span class="n">Field</span><span class="o"><?></span> <span class="n">field</span><span class="o">,</span> <span class="n">String</span> <span class="n">attribute</span><span class="o">)</span> <span class="o">{</span>
<span class="n">Collection</span><span class="o"><</span><span class="n">Validator</span><span class="o">></span> <span class="n">validators</span> <span class="o">=</span> <span class="n">field</span><span class="o">.</span><span class="na">getValidators</span><span class="o">();</span>
<span class="k">if</span> <span class="o">(</span><span class="n">validators</span> <span class="o">==</span> <span class="kc">null</span> <span class="o">||</span> <span class="n">validators</span><span class="o">.</span><span class="na">isEmpty</span><span class="o">())</span> <span class="o">{</span>
<span class="n">field</span><span class="o">.</span><span class="na">addValidator</span><span class="o">(</span><span class="k">new</span> <span class="n">BeanValidator</span><span class="o">(</span><span class="n">Person</span><span class="o">.</span><span class="na">class</span><span class="o">,</span> <span class="n">attribute</span><span class="o">));</span>
<span class="o">}</span>
<span class="o">}</span>
<span class="o">}</span></code></pre></figure>
<h3 id="the-right-widget-for-the-right-data-type">The right widget for the right data type</h3>
<p>This point has nothing to do with validation, but it brings a nice finishing touch to the user interface. Did you notice that when we built the gender field, we passed a <code class="highlighter-rouge">Select</code> parameter and presto, the return field was a select. Wouldn’t it be better if the birthdate field would be displayed as a true <code class="highlighter-rouge">DateField</code>? We can try this:</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">Field</span><span class="o"><?></span> <span class="n">birthdate</span> <span class="o">=</span> <span class="n">group</span><span class="o">.</span><span class="na">buildAndBind</span><span class="o">(</span><span class="s">"Birth date"</span><span class="o">,</span> <span class="s">"birthdate"</span><span class="o">,</span> <span class="n">DateField</span><span class="o">.</span><span class="na">class</span><span class="o">);</span></code></pre></figure>
<p>Unfortunately, this doesn’t work as Vaadin loudly complains with a <code class="highlighter-rouge">com.vaadin.data.fieldgroup.FieldGroup$BindException: Unable to build a field of type com.vaadin.ui.DateField for editing java.util.Date</code>. This means that in contrast to the old <code class="highlighter-rouge">Form</code>, <code class="highlighter-rouge">FieldGroup</code> doesn’t handle date fields. As both use field factories (albeit of a different type), this is easily corrected. We just have to create a field group factory that return <code class="highlighter-rouge">DateField</code> when passed Date attributes and delegates to the default field group factory otherwise.</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">EnhancedFieldGroupFieldFactory</span> <span class="kd">implements</span> <span class="n">FieldGroupFieldFactory</span> <span class="o">{</span>
<span class="kd">private</span> <span class="n">FieldGroupFieldFactory</span> <span class="n">fieldFactory</span> <span class="o">=</span> <span class="k">new</span> <span class="n">DefaultFieldGroupFieldFactory</span><span class="o">();</span>
<span class="nd">@SuppressWarnings</span><span class="o">({</span> <span class="s">"rawtypes"</span><span class="o">,</span> <span class="s">"unchecked"</span> <span class="o">})</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="o"><</span><span class="n">T</span> <span class="kd">extends</span> <span class="n">Field</span><span class="o">></span> <span class="n">T</span> <span class="n">createField</span><span class="o">(</span><span class="n">Class</span><span class="o"><?></span> <span class="n">dataType</span><span class="o">,</span> <span class="n">Class</span><span class="o"><</span><span class="n">T</span><span class="o">></span> <span class="n">fieldType</span><span class="o">)</span> <span class="o">{</span>
<span class="k">if</span> <span class="o">(</span><span class="n">Date</span><span class="o">.</span><span class="na">class</span><span class="o">.</span><span class="na">isAssignableFrom</span><span class="o">(</span><span class="n">dataType</span><span class="o">))</span> <span class="o">{</span>
<span class="k">return</span> <span class="o">(</span><span class="n">T</span><span class="o">)</span> <span class="n">createDateField</span><span class="o">();</span>
<span class="o">}</span>
<span class="k">return</span> <span class="n">fieldFactory</span><span class="o">.</span><span class="na">createField</span><span class="o">(</span><span class="n">dataType</span><span class="o">,</span> <span class="n">fieldType</span><span class="o">);</span>
<span class="o">}</span>
<span class="nd">@SuppressWarnings</span><span class="o">({</span> <span class="s">"rawtypes"</span><span class="o">,</span> <span class="s">"unchecked"</span> <span class="o">})</span>
<span class="kd">protected</span> <span class="o"><</span><span class="n">T</span> <span class="kd">extends</span> <span class="n">Field</span><span class="o">></span> <span class="n">T</span> <span class="n">createDateField</span><span class="o">()</span> <span class="o">{</span>
<span class="n">DateField</span> <span class="n">field</span> <span class="o">=</span> <span class="k">new</span> <span class="n">DateField</span><span class="o">();</span>
<span class="n">field</span><span class="o">.</span><span class="na">setImmediate</span><span class="o">(</span><span class="kc">true</span><span class="o">);</span>
<span class="k">return</span> <span class="o">(</span><span class="n">T</span><span class="o">)</span> <span class="n">field</span><span class="o">;</span>
<span class="o">}</span>
<span class="o">}</span></code></pre></figure>
<p>Then, we set an instance of this factory to the field group, passing the field type we need.</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">Field</span><span class="o"><?></span> <span class="n">birthdate</span> <span class="o">=</span> <span class="n">group</span><span class="o">.</span><span class="na">buildAndBind</span><span class="o">(</span><span class="s">"Birth date"</span><span class="o">,</span> <span class="s">"birthdate"</span><span class="o">,</span> <span class="n">DateField</span><span class="o">.</span><span class="na">class</span><span class="o">);</span></code></pre></figure>
<h3 id="remove-initial-ugly-null-values">Remove initial ugly null values</h3>
<p>Finally, since the <code class="highlighter-rouge">Person</code> bean is initialized with <code class="highlighter-rouge">null</code> values, <code class="highlighter-rouge">null</code> appears in the fileds when the page first loads. For a end-user, this is not particularly desirable. We have to cast the field returned by the field group to a more friendly type and call the <code class="highlighter-rouge">setNullRepresentation()</code> method.</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">AbstractTextField</span> <span class="n">firstName</span> <span class="o">=</span> <span class="o">(</span><span class="n">AbstractTextField</span><span class="o">)</span> <span class="n">group</span><span class="o">.</span><span class="na">buildAndBind</span><span class="o">(</span><span class="s">"First name"</span><span class="o">,</span> <span class="s">"firstName"</span><span class="o">);</span>
<span class="n">firstName</span><span class="o">.</span><span class="na">setNullRepresentation</span><span class="o">(</span><span class="s">""</span><span class="o">);</span></code></pre></figure>
<h2 id="conclusion">Conclusion</h2>
<p>In this article, we used the power of Vaadin 7 to easily create a submit form, complete with validation coming from JSR 303 annotations. The full sources of this article can be found on <a href="https://github.com/nfrankel/More-Vaadin/tree/master/beanvalidation-example">Github</a>.</p>
Preserve state betwen refreshes2012-03-17T00:00:00+00:00http://morevaadin.com/content/preserve-state-betwen-refreshes
<p>Last week, we had a look at the new Vaadin 7 <code class="highlighter-rouge">UI</code> that takes the place of the old version 6 <code class="highlighter-rouge">Window</code>. Though this evolution cleans window management in version 7, it brings a change that can have important consequences for those unaware of it.</p>
<p>In Vaadin 7, state is not kept between refreshes, whereas in v6, it was. Anyway, this is only the default behavior, and the Vaadin team provides us with the mean to do as we please. The only thing to do is to get a handle on the UI instance annotate it with <code class="highlighter-rouge">@PreserveOnRefresh</code>, like so:</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="nd">@PreserveOnRefresh</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">Vaadin7UI</span> <span class="kd">extends</span> <span class="n">UI</span> <span class="o">{</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">init</span><span class="o">(</span><span class="n">VaadinRequest</span> <span class="n">request</span><span class="o">)</span> <span class="o">{</span>
<span class="o">...</span>
<span class="o">}</span>
<span class="o">}</span></code></pre></figure>
<p>You can find <a href="https://github.com/nfrankel/More-Vaadin/tree/master/refresh-example">here</a> the sources of a little example application that let us play with this behavior. Let’s try some things:</p>
<ol>
<li>Call the URL with a named fragment beneath it (like #test). The page displays it right of the URI fragment label.</li>
<li>Change the fragment in the adress bar (like #testchanged) and refresh the page. The page should display the new URI fragment in the page.</li>
<li>Now, check the Preserve root checkbox. Change the fragment for the second time (like #testsecond) and behold, the page still displays the “testchanged” value.</li>
</ol>
<p>Whatever you want the behavior to be, Vaadin provides it :-)</p>
Getting data about requests2012-03-08T00:00:00+00:00http://morevaadin.com/content/getting-data-about-requests
<p>I confess, Vaadin 6 was good, but Vaadin 7 is even better. This article will detail most nastiness that is managed by this new version so that we only have to code a few lines to achieve our goals. One of such goal is the search of information about the request and the client.</p>
<p>In Vaadin 6, it was possible, but cumbersome for we had to force our application to implement the <code class="highlighter-rouge">HttpServletRequestListener</code> interface. The interface let us access the servlet request (as well as the servlet response), and then we were on our own.</p>
<p>In Vaadin 7, the Vaadin team identified recurring needs to some piece of data and provided a Vaadin API to access them easily; for example:</p>
<ol>
<li>The user agent type and its version (major and minor)</li>
<li>The user’s locale to initialize resources bundles</li>
<li>The screen size, as well as the underlying viewpoint size to adapt the layour to the available space</li>
<li>The URL fragment (#) to restore data</li>
</ol>
<p>Vaadin 7 <code class="highlighter-rouge">UI</code>’s <code class="highlighter-rouge">init()</code> method takes a <code class="highlighter-rouge">VaadinRequest</code> as a parameter, that is the entry point into these informations. Behold how we could address the above needs:</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">Vaadin7Root</span> <span class="kd">extends</span> <span class="n">Root</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">init</span><span class="o">(</span><span class="n">WrappedRequest</span> <span class="n">wrapped</span><span class="o">)</span> <span class="o">{</span>
<span class="n">BrowserDetails</span> <span class="n">details</span> <span class="o">=</span> <span class="n">wrapped</span><span class="o">.</span><span class="na">getBrowserDetails</span><span class="o">();</span>
<span class="n">WebBrowser</span> <span class="n">browser</span> <span class="o">=</span> <span class="n">details</span><span class="o">.</span><span class="na">getWebBrowser</span><span class="o">();</span>
<span class="c1">// Need #1</span>
<span class="n">browser</span><span class="o">.</span><span class="na">getBrowserApplication</span><span class="o">();</span> <span class="c1">// User agent</span>
<span class="n">browser</span><span class="o">.</span><span class="na">getBrowserMajorVersion</span><span class="o">();</span> <span class="c1">// Major version</span>
<span class="n">abrowser</span><span class="o">.</span><span class="na">getBrowserMinorVersion</span><span class="o">();</span> <span class="c1">// Minor version</span>
<span class="c1">// Need #2</span>
<span class="n">browser</span><span class="o">.</span><span class="na">getLocale</span><span class="o">();</span> <span class="c1">// User locale</span>
<span class="c1">// Need #3</span>
<span class="n">browser</span><span class="o">.</span><span class="na">getClientHeight</span><span class="o">();</span> <span class="c1">// Browser height</span>
<span class="n">browser</span><span class="o">.</span><span class="na">getClientWidth</span><span class="o">();</span> <span class="c1">// Browser width</span>
<span class="n">browser</span><span class="o">.</span><span class="na">getScreenHeight</span><span class="o">();</span> <span class="c1">// Viewpoint height</span>
<span class="n">browser</span><span class="o">.</span><span class="na">getScreenWidth</span><span class="o">();</span> <span class="c1">// Viewpoint width</span>
<span class="c1">// Need #4</span>
<span class="n">details</span><span class="o">.</span><span class="na">getUriFragment</span><span class="o">());</span> <span class="c1">// URI fragment</span>
<span class="o">}</span>
<span class="o">}</span></code></pre></figure>
<p>No more dirty plumbing into the <code class="highlighter-rouge">ServletRequest</code>, welcome to a world of easy reading!</p>
<p>The ready-to-use WAR file is available <a href="http://morevaadin.com/sites/default/files/articles/getting-data-about-requests-vaadin-7/vaadin7-init.war">here</a>(sources included).</p>
Views content switching2012-03-02T00:00:00+00:00http://morevaadin.com/content/windows-switching
<p>In my <a href="/content/use-view-not-windows">last article</a>, I definitely advised that when needing to radically change components displayed on the screen, you need to switch the main window’s contents - the view - and not the window itself.</p>
<p>Fortunately, this confusion is not possible anymore in Vaadin 7 since the application object and the main window are merged into the [UI] class.</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="kn">package</span> <span class="n">com</span><span class="o">.</span><span class="na">morevaadin</span><span class="o">.</span><span class="na">vaadin7</span><span class="o">.</span><span class="na">example</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">com.vaadin.server.VaadinRequest</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">com.vaadin.ui.Label</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">com.vaadin.ui.UI</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">com.vaadin.ui.VerticalLayout</span><span class="o">;</span>
<span class="nd">@SuppressWarnings</span><span class="o">(</span><span class="s">"serial"</span><span class="o">)</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">Vaadin7UIApplication</span> <span class="kd">extends</span> <span class="n">UI</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">protected</span> <span class="kt">void</span> <span class="n">init</span><span class="o">(</span><span class="n">VaadinRequest</span> <span class="n">request</span><span class="o">)</span> <span class="o">{</span>
<span class="n">VerticalLayout</span> <span class="n">layout</span> <span class="o">=</span> <span class="k">new</span> <span class="n">VerticalLayout</span><span class="o">();</span>
<span class="n">layout</span><span class="o">.</span><span class="na">setMargin</span><span class="o">(</span><span class="kc">true</span><span class="o">);</span>
<span class="n">Label</span> <span class="n">label</span> <span class="o">=</span> <span class="k">new</span> <span class="n">Label</span><span class="o">(</span><span class="s">"Hello Vaadin user"</span><span class="o">);</span>
<span class="n">layout</span><span class="o">.</span><span class="na">addComponent</span><span class="o">(</span><span class="n">label</span><span class="o">);</span>
<span class="n">setContent</span><span class="o">(</span><span class="n">layout</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">}</span></code></pre></figure>
<p>Note that <code class="highlighter-rouge">UI</code> instances have no root content (unlike Vaadin 6’s <code class="highlighter-rouge">Window</code>): this means we have to set it explicitly, like the layout in the previous snippet.</p>
<p>As a corollary, this also means a <code class="highlighter-rouge">UI</code> class has to be configured in the web deployment descriptor for the Vaadin servlet (and not an <code class="highlighter-rouge">Application</code> class anymore). This directly translates into the following snippet:</p>
<figure class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt"><servlet></span>
<span class="nt"><servlet-name></span>Vaadin 7 Root Example<span class="nt"></servlet-name></span>
<span class="nt"><servlet-class></span>com.vaadin.server.VaadinServlet<span class="nt"></servlet-class></span>
<span class="nt"><init-param></span>
<span class="nt"><param-name></span>UI<span class="nt"></param-name></span>
<span class="nt"><param-value></span>com.morevaadin.vaadin7.example.Vaadin7UIApplication<span class="nt"></param-value></span>
<span class="nt"></init-param></span>
<span class="nt"></servlet></span></code></pre></figure>
<p>Conclusion: Vaadin 7 is less confusing than Vaadin 6 for managing full-screen windows. Besides, it achieves the same result in as many lines of code: it’s a definite step toward cleaner windows management.</p>
<p>The archive that highlights the above code can be downloaded <a href="http://morevaadin.com/sites/default/files/articles/windows-switching-vaadin-7/vaadin-7-example.zip">here</a>.</p>
Use view, not windows2012-02-25T00:00:00+00:00http://morevaadin.com/content/use-view-not-windows
<p>In Vaadin 6, the <code class="highlighter-rouge">Window</code> class is used for both main windows - i.e. windows that fill the entire screen, and popup windows aka subwindows.</p>
<p>This has lead some developers (including me) to think main windows could be set and then removed later on: this is not the case and may lead to nasty bugs when the page is refreshed by the user just after having switched main windows.</p>
<p><em>Note: Vaadin 7 tackles the problem by merging the application and the main window into a single class (more in a <a href="/content/windows-switching">later article</a>.</em></p>
<p>In essence, when one has to fundamentally change what is shown to the user, one should use a custom component I call view. A view is just a group of components that are laid out together. Then, when we need to switch windows, we keep the main window and switch its content from one view to another: the main window becomes a just a placeholder. As an added value, since the main window is kept, it has always access to the parent application.</p>
<p>The application becomes something like this:</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">MyApplication</span> <span class="kd">extends</span> <span class="n">Application</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">init</span><span class="o">()</span> <span class="o">{</span>
<span class="n">setMainWindow</span><span class="o">(</span><span class="k">new</span> <span class="n">Window</span><span class="o">());</span>
<span class="o">}</span>
<span class="o">}</span></code></pre></figure>
<p>The view should look something like that:</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">LoginView</span> <span class="kd">extends</span> <span class="n">CustomComponent</span> <span class="o">{</span>
<span class="kd">private</span> <span class="n">TextField</span> <span class="n">login</span> <span class="o">=</span> <span class="k">new</span> <span class="n">TextField</span><span class="o">(</span><span class="s">"Login"</span><span class="o">);</span>
<span class="kd">private</span> <span class="n">TextField</span> <span class="n">password</span> <span class="o">=</span> <span class="k">new</span> <span class="n">TextField</span><span class="o">(</span><span class="s">"Password"</span><span class="o">);</span>
<span class="kd">public</span> <span class="n">LoginView</span><span class="o">()</span> <span class="o">{</span>
<span class="n">FormLayout</span> <span class="n">layout</span> <span class="o">=</span> <span class="k">new</span> <span class="n">FormLayout</span><span class="o">();</span>
<span class="n">setCompositionRoot</span><span class="o">(</span><span class="n">layout</span><span class="o">);</span>
<span class="n">layout</span><span class="o">.</span><span class="na">addComponent</span><span class="o">(</span><span class="n">login</span><span class="o">);</span>
<span class="n">layout</span><span class="o">.</span><span class="na">addComponent</span><span class="o">(</span><span class="n">password</span><span class="o">);</span>
<span class="n">Button</span> <span class="n">button</span> <span class="o">=</span> <span class="k">new</span> <span class="n">Button</span><span class="o">(</span><span class="s">"Login"</span><span class="o">);</span>
<span class="n">layout</span><span class="o">.</span><span class="na">addComponent</span><span class="o">(</span><span class="n">button</span><span class="o">);</span>
<span class="n">button</span><span class="o">.</span><span class="na">addListener</span><span class="o">(</span><span class="k">new</span> <span class="n">ClickListener</span><span class="o">()</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">buttonClick</span><span class="o">(</span><span class="n">ClickEvent</span> <span class="n">event</span><span class="o">)</span> <span class="o">{</span>
<span class="n">getApplication</span><span class="o">().</span><span class="na">getMainWindow</span><span class="o">().</span><span class="na">setContent</span><span class="o">(</span><span class="k">new</span> <span class="n">MainView</span><span class="o">());</span>
<span class="o">}</span>
<span class="o">});</span>
<span class="o">}</span>
<span class="o">}</span></code></pre></figure>
<p>Important notes:</p>
<ol>
<li><code class="highlighter-rouge">MainView</code> is another custom component with the components we want displayed</li>
<li>Don’t forget <a href="/content/separation-of-concerns">separation of concerns</a>, the switching behavior mixed in the GUI code is shown only for readability purposes</li>
<li>Login and logout should perhaps be designed at the application level so we could call <code class="highlighter-rouge">getApplication().login()</code></li>
</ol>
Separation of concerns2012-02-18T00:00:00+00:00http://morevaadin.com/content/separation-of-concerns
<p>Last week, we quickly created a Delete <a href="/content/table-generated-buttons">generated column</a> in a table.</p>
<p>Although this is enough to attain our objective, two nested anonymous classes puts a strain on maintenance costs. Moreover, behavior code (the deletion) is interwoven with GUI code (column).</p>
<p>Correcting these mistakes can be achieved through the creation of two top-level classes, one for the deletion behavior, and the other for the column. We have to find a way to pass the data container and the item id to the behavior class: the most obvious way to do so is to change the latter’s structure to store both like so:</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">DeleteButtonColumnGenerator</span> <span class="kd">implements</span> <span class="n">ColumnGenerator</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="n">Object</span> <span class="n">generateCell</span><span class="o">(</span><span class="n">Table</span> <span class="n">source</span><span class="o">,</span> <span class="n">Object</span> <span class="n">itemId</span><span class="o">,</span> <span class="n">Object</span> <span class="n">columnId</span><span class="o">)</span> <span class="o">{</span>
<span class="n">Button</span> <span class="n">button</span> <span class="o">=</span> <span class="k">new</span> <span class="n">Button</span><span class="o">(</span><span class="s">"Delete"</span><span class="o">);</span>
<span class="n">button</span><span class="o">.</span><span class="na">addListener</span><span class="o">(</span><span class="k">new</span> <span class="n">DeleteClickListener</span><span class="o">(</span><span class="n">itemId</span><span class="o">,</span> <span class="n">source</span><span class="o">.</span><span class="na">getContainerDataSource</span><span class="o">()));</span>
<span class="k">return</span> <span class="n">button</span><span class="o">;</span>
<span class="o">}</span>
<span class="o">}</span></code></pre></figure>
<p>This design is much more decoupled and maintenance friendly than the previous one, but we can do better. The click listener’s structure is at present tightly coupled to the parameters it needs to access. It would be nice to remove this coupling. Fortunately, Vaadin components can store data on their own. Let’s rely on this feature to clean our design.</p>
<p>First, create a placeholder for the container and the item id:</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">ContainerItemId</span> <span class="o">{</span>
<span class="kd">private</span> <span class="kd">final</span> <span class="n">Object</span> <span class="n">itemId</span><span class="o">;</span>
<span class="kd">private</span> <span class="kd">final</span> <span class="n">Container</span> <span class="n">container</span><span class="o">;</span>
<span class="kd">public</span> <span class="n">ContainerItemId</span><span class="o">(</span><span class="n">Container</span> <span class="n">container</span><span class="o">,</span> <span class="n">Object</span> <span class="n">itemId</span><span class="o">)</span> <span class="o">{</span>
<span class="k">this</span><span class="o">.</span><span class="na">itemId</span> <span class="o">=</span> <span class="n">itemId</span><span class="o">;</span>
<span class="k">this</span><span class="o">.</span><span class="na">container</span> <span class="o">=</span> <span class="n">container</span><span class="o">;</span>
<span class="o">}</span>
<span class="kd">public</span> <span class="n">Object</span> <span class="n">getItemId</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="n">itemId</span><span class="o">;</span>
<span class="o">}</span>
<span class="kd">public</span> <span class="n">Container</span> <span class="n">getContainer</span><span class="o">()</span> <span class="o">{</span>
<span class="k">return</span> <span class="n">container</span><span class="o">;</span>
<span class="o">}</span>
<span class="o">}</span></code></pre></figure>
<p>Then, we remove all references to both container and item id from the click listener and use the Vaadin way:</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">DeleteClickListener</span> <span class="kd">implements</span> <span class="n">ClickListener</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="kt">void</span> <span class="n">buttonClick</span><span class="o">(</span><span class="n">ClickEvent</span> <span class="n">event</span><span class="o">)</span> <span class="o">{</span>
<span class="n">Button</span> <span class="n">button</span> <span class="o">=</span> <span class="n">event</span><span class="o">.</span><span class="na">getButton</span><span class="o">();</span>
<span class="n">ContainerItemId</span> <span class="n">cii</span> <span class="o">=</span> <span class="o">(</span><span class="n">ContainerItemId</span><span class="o">)</span> <span class="n">button</span><span class="o">.</span><span class="na">getData</span><span class="o">();</span>
<span class="k">if</span> <span class="o">(</span><span class="n">cii</span> <span class="o">!=</span> <span class="kc">null</span><span class="o">)</span> <span class="o">{</span>
<span class="n">cii</span><span class="o">.</span><span class="na">getContainer</span><span class="o">().</span><span class="na">removeItem</span><span class="o">(</span><span class="n">cii</span><span class="o">.</span><span class="na">getItemId</span><span class="o">());</span>
<span class="o">}</span>
<span class="o">}</span>
<span class="o">}</span></code></pre></figure>
<p>Notice how we get the reference to the button in the event, it’s enough!</p>
<p>Finally, we have to pass the data to the button in the column generator:</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">DeleteButtonColumnGenerator</span> <span class="kd">implements</span> <span class="n">ColumnGenerator</span> <span class="o">{</span>
<span class="nd">@Override</span>
<span class="kd">public</span> <span class="n">Object</span> <span class="n">generateCell</span><span class="o">(</span><span class="n">Table</span> <span class="n">source</span><span class="o">,</span> <span class="n">Object</span> <span class="n">itemId</span><span class="o">,</span> <span class="n">Object</span> <span class="n">columnId</span><span class="o">)</span> <span class="o">{</span>
<span class="n">Button</span> <span class="n">button</span> <span class="o">=</span> <span class="k">new</span> <span class="n">Button</span><span class="o">(</span><span class="s">"Delete"</span><span class="o">);</span>
<span class="n">ContainerItemId</span> <span class="n">cii</span> <span class="o">=</span> <span class="k">new</span> <span class="n">ContainerItemId</span><span class="o">(</span><span class="n">source</span><span class="o">.</span><span class="na">getContainerDataSource</span><span class="o">(),</span> <span class="n">itemId</span><span class="o">);</span>
<span class="n">button</span><span class="o">.</span><span class="na">setData</span><span class="o">(</span><span class="n">cii</span><span class="o">);</span>
<span class="n">button</span><span class="o">.</span><span class="na">addListener</span><span class="o">(</span><span class="k">new</span> <span class="n">DeleteClickListener</span><span class="o">());</span>
<span class="k">return</span> <span class="n">button</span><span class="o">;</span>
<span class="o">}</span>
<span class="o">}</span></code></pre></figure>
<p>This new design is much more modularized: for application that go beyond prototypes, this approach should be favored over the previous one.</p>
Table generated buttons2012-02-12T00:00:00+00:00http://morevaadin.com/content/table-generated-buttons
<p>Before diving in the middle of the subject, let’s have a use-case first. Imagine we have a <abbr title="Create Read Update Delete">CRUD</abbr> application and our current screen lists the datastore entities in a table, a line per entity and a column per property.</p>
<p>Now, in order to implement the Delete functionality, we use the <code class="highlighter-rouge">addGeneratedColumn</code> method of the <code class="highlighter-rouge">Table</code> component to display a “Delete” button, like in the following screenshot:</p>
<p><img src="/assets/images/delete_button.png" width="312" height="158" /></p>
<p>The problem lies in the action that has to take place when the button is pressed. The behavior needs to be determined when the page is generated, so that the event is processed directly on the server-side: in other words, we need a way to pass the entity identifier (or the container’s item or even the container’s item id) to the button somehow.</p>
<p>The solution is very simple to implement, with just the use of the <code class="highlighter-rouge">final</code> keyword, to let nested anonymous class methods access parameters:</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">table</span><span class="o">.</span><span class="na">addGeneratedColumn</span><span class="o">(</span><span class="s">""</span><span class="o">,</span> <span class="k">new</span> <span class="n">ColumnGenerator</span><span class="o">()</span> <span class="o">{</span>
<span class="nd">@Override</span> <span class="kd">public</span> <span class="n">Object</span> <span class="n">generateCell</span><span class="o">(</span><span class="kd">final</span> <span class="n">Table</span> <span class="n">source</span><span class="o">,</span> <span class="kd">final</span> <span class="n">Object</span> <span class="n">itemId</span><span class="o">,</span> <span class="n">Object</span> <span class="n">columnId</span><span class="o">)</span> <span class="o">{</span>
<span class="n">Button</span> <span class="n">button</span> <span class="o">=</span> <span class="k">new</span> <span class="n">Button</span><span class="o">(</span><span class="s">"Delete"</span><span class="o">);</span>
<span class="n">button</span><span class="o">.</span><span class="na">addListener</span><span class="o">(</span><span class="k">new</span> <span class="n">ClickListener</span><span class="o">()</span> <span class="o">{</span>
<span class="nd">@Override</span> <span class="kd">public</span> <span class="kt">void</span> <span class="n">buttonClick</span><span class="o">(</span><span class="n">ClickEvent</span> <span class="n">event</span><span class="o">)</span> <span class="o">{</span>
<span class="n">source</span><span class="o">.</span><span class="na">getContainerDataSource</span><span class="o">().</span><span class="na">removeItem</span><span class="o">(</span><span class="n">itemId</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">});</span>
<span class="k">return</span> <span class="n">button</span><span class="o">;</span>
<span class="o">}</span>
<span class="o">});</span></code></pre></figure>