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, ...

Get Vaadin 7 UI Design By Example Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial