Fluent API for Vaadlets

I added support for Fluent API into https://github.com/ahoehma/vaadlets.

Now you can do this:

VaadletsBuilder.build(
new Vaadlets().withRootComponent(
    new VerticalLayout()
        .withHeight("100px")
        .withWidth("100px")
        .withStyleName("foobar")
        .withComponents(
                new Button().withCaption("hustensaft")
                            .withAlignment(Alignment.MIDDLE_CENTER)
                            .withExpandRatio(1f))));

Use maven profile to recompile vaadin widgetset #2

In a older post I describe my solution to handle VAADIN/GWT widgetset compilation with maven.

Today I  will share some changes to use GWT 2.4 with my solution.

The problem: after GWT compilation a new directory gwt-unitCache exists under the VAADIN directory. I don’t need this 😉

I integrate this workaround in my profile:

<profile>
  <!-- Updates Vaadin widgetset definitions based on project dependencies -->
  <id>update-widgetset</id>
  <activation>
    <file>
      <missing>${basedir}/src/main/webapp/VAADIN/widgetsets/</missing>
    </file>
  </activation>
  <build>
    <plugins>
      <plugin>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-maven-plugin</artifactId>
        <version>1.0.2</version>
        <executions>
          <execution>
            <phase>generate-resources</phase>
            <goals>
              <goal>update-widgetset</goal>
            </goals>
          </execution>
        </executions>
      </plugin>
      <plugin>
        <groupId>org.codehaus.mojo</groupId>
        <artifactId>gwt-maven-plugin</artifactId>
        <version>2.4.0</version>
        <configuration>
          <webappDirectory>${basedir}/src/main/webapp/VAADIN/widgetsets/</webappDirectory>
          <extraJvmArgs>-Xmx512M -Xss1024k </extraJvmArgs>
          <deploy>${project.build.directory}/gwt-tmp/</deploy>
          <soyc>false</soyc>
          <force>true</force>
          <strict>true</strict>
          <style>OBFUSCATED</style>
          <optimizationLevel>9</optimizationLevel>
        </configuration>
        <executions>
          <execution>
            <phase>generate-resources</phase>
            <goals>
              <goal>resources</goal>
              <goal>compile</goal>
            </goals>
          </execution>
        </executions>
      </plugin>
      <plugin>
        <!-- workaround for 
             http://code.google.com/p/google-web-toolkit/issues/detail?id=6397 -->
        <artifactId>maven-clean-plugin</artifactId>
        <version>2.4.1</version>
        <configuration>
          <filesets>
            <fileset>
              <directory>${basedir}/src/main/webapp/VAADIN/</directory>
              <includes>
                <directory>gwt-unitCache/**</directory>
              </includes>
              <followSymlinks>false</followSymlinks>
            </fileset>
          </filesets>
          <excludeDefaultDirectories>true</excludeDefaultDirectories>
        </configuration>
        <executions>
          <execution>
            <id>default</id>
            <phase>generate-resources</phase>
            <goals>
              <goal>clean</goal>
            </goals>
          </execution>
        </executions>
      </plugin>
    </plugins>
  </build>
</profile>

🙂

Use maven profile to recompile vaadin widgetset

Today I will show you my maven profile to configure Vaadin widgetset recompilation.

The Vaadin wiki shows the basics … but I want widgetset update only if its necessary … so I moved the gwt/vaadin plugins in a profile and add a activation per file for this profile:

<profile>
   <!--
     Updates Vaadin widgetset definitions based on project dependencies
     Remove widgetset directory to trigger recompile:
       rm -Rf src/main/webapp/VAADIN/widgetsets/
   -->
   <id>update-widgetset</id>
   <activation>
     <file>
       ${basedir}/src/main/webapp/VAADIN/widgetsets/
     </file>
   </activation>
   <build>
     <plugins>
       <plugin>
         <groupId>com.vaadin</groupId>
         <artifactId>vaadin-maven-plugin</artifactId>
         <version>1.0.2</version>
         <configuration>
           <!-- if you don't specify any modules, the plugin will find them -->
         </configuration>
         <executions>
           <execution>
             <phase>generate-resources</phase>
             <goals>
               <goal>update-widgetset</goal>
             </goals>
           </execution>
         </executions>
       </plugin>
       <plugin>
         <groupId>org.codehaus.mojo</groupId>
         <artifactId>gwt-maven-plugin</artifactId>
         <version>2.3.0-1</version>
         <configuration>
           <!-- if you don't specify any modules, the plugin will find them -->
           ${basedir}/src/main/webapp/VAADIN/widgetsets/
           -Xmx512M -Xss1024k
           ${project.build.directory}/gwt-tmp/
           <soyc>false</soyc>
           <force>true</force>
         </configuration>
         <executions>
           <execution>
             <phase>generate-resources</phase>
             <goals>
               <goal>resources</goal>
               <goal>compile</goal>
             </goals>
           </execution>
         </executions>
       </plugin>
     </plugins>
   </build>
 </profile>

🙂

VAADIN Reverse Label with CSS

Here is a simple example how to use CSS to change the visual representation of Vaadin components.

The com.vaadin.ui.Label component have a caption and a icon, i.e.  „[I] Caption“.

But I need a label like this „Caption [I]“. This could be done with the following CSS:

.v-caption-reverseLabel {
float: left;
}
.v-caption-reverseLabel .v-icon {
float: right;
margin: 0px 2px 0px 2px;
}
.v-caption-reverseLabel .v-captiontext {
float: right;
}

final Label label = new Label();
label.setStyleName("reverseLabel");
label.setCaption("Foobar");
label.setIcon(new ThemeResource("img/info.gif"));