O'Reilly logo

Vaadin 7 UI Design By Example Beginner's Guide by Alejandro Duarte

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – inspecting HTML

Follow these steps to inspect the HTML generated by Vaadin:

  1. Run the themes example application.
  2. Browse to the application using Firefox or Chrome (make sure you have installed Firebug if using Firefox).
  3. Right click on the Dashboard button and select Inspect Element with Firebug if you are in Firefox, or Inspect element if you are in Chrome.
  4. Take a look at the actual HTML code Vaadin is generating for the button.

What just happened?

You just learned how to inspect HTML. If you look carefully, you can see several class values:

<div tabindex="0" role="button" class="v-button v-widget v-has-width"
    style="width: 100%;">

  <span class="v-button-wrap">
    <span class="v-button-caption">Dashboard</span>
  </span>

</div>

For example, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required