Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Simple Everyday Tips for Vaadin Developers — Part 3: Styling Components

DZone's Guide to

Simple Everyday Tips for Vaadin Developers — Part 3: Styling Components

Are you a Vaadin developer? In this series Amahdy Abdeiaziz share tools and best practices that will help you get the most out of this popular framework.

· Java Zone
Free Resource

Make it happen: rapid app development on Kubernetes as a managed service.

This is the third part of a five parts series about tips for Vaadin developers. Here are all the series parts:

  1. Migrating From Vaadin 6 to Vaadin 7
  2. UI abstraction and using Vaadin CDI Add-on
  3. Styling Vaadin components and using Add-ons
  4. Data modeling in Vaadin
  5. Simple use case for Vaadin Grid

3. Styling Vaadin Components and Using Add-Ons

Vaadin has a good set of styles that help boosting the UX with few lines of code, this includes the built in Saas based Valo theme engine, icons, and styles. Since I want to avoid any non-java code, let’s explore how we can style some components without any line of CSS.

I’ll start by installing Vaadin Icons as a maven dependency. After following those steps, you can start using them right away in your Java code from the VaadinIcons enumaration.

Related commit: Add dependency for VaadinIcons and Vaadin WSCDN server


    Following are few ideas on how to style the components.

Make splitter large:

hsp.addStyleName(ValoTheme.SPLITPANEL_LARGE);

Add icons to buttons, for example:

addToCartButton.setIcon(VaadinIcons.CART_O);

Specify button importance to and get style accordingly:

addToCartButton.addStyleName(ValoTheme.BUTTON_FRIENDLY);
checkoutButton.addStyleName(ValoTheme.BUTTON_PRIMARY);

Style checkboxes:

options.addStyleName(ValoTheme.OPTIONGROUP_LARGE);

Make horizontal layout wraps:

hl.addStyleName(ValoTheme.LAYOUT_HORIZONTAL_WRAPPING);

Change all references from Reindeer theme to Valo theme, for example this:

inventoryLabel.setStyleName(Reindeer.LABEL_H1);

Replaced by:

inventoryLabel.addStyleName(ValoTheme.LABEL_H1);
Related commit: Style buttons and add icons and Adjust and cleanup layout


And here is the result after some styling and polishing:

The result after some styling and polishing

 We can still enhance it a bit more by providing a confirmation dialog once the user clicks on “Clear” button. No need to reinvent the wheel, the Vaadin directory is full of nice components that can help achieving simple tasks like those, and here I will use the ConfirmDialog add-on. Go ahead and check the add-on demo online and sample source code to learn how to integrate it into your application.

Related commit: Add confirmation dialog before clearing shopping cart


Confirmation Dialog

And one more thing. It’s always good to clean the layout from unneeded functionalities. In this simple demo I did that by simply disabling buttons when they don’t make sense. “Add To Cart” does not make sense if nothing is selected. Same goes to “Uncheck All”, and vice versa when all items are selected then “Check All” should be disabled. It’s bit controversy if we should keep two buttons for checking and unchecking all items, or make it one switch. For the scope of this demo I decided to keep it two buttons. Later on in the 5th part of this article, we will see that we can also apply similar disable and enable logic for the “Checkout” button.

Related commit: Disable buttons in ProductsView when useless


I noticed that there is quite of code repetition in the ShoppingCartView for each line of its contents, a Label with a word like ‘Subtotal’ and next to it a Label with the price amount. It may sound trivial but it’s good practice and important for future maintenance to avoid repetition in the code. There are many solutions including creation of a method to create it with different parameters, or even better, create a server-side component.

The component has few highlights:

  • Extends HorizontalLayout directly, it could have extended CustomComponent. Depends on how much generic you want to make your component, in this case I did not handle how the inner components would behave if not placed in a HorizontalLayout so I kept it simple.

  • When you need to apply a style on the whole Label, Instead of explicitly use HTML tags like <b>, you can let the theme handle it for you as following:

  label.addStyleName(ValoTheme.LABEL_BOLD);
Related commit: Add ShoppingCartLine component


It’s a good idea to publish your custom components in the directory to get community feedback and contributions. And to get the good exposure when you have a solid component with reputation in the directory. But in the next part of this article we will explore an important part for the front-end, the ease of binding backend data to the UI components.

Tutorial: WordPress as distributed microservices on Kubernetes.

Topics:
vaadin ,java ,cdi ,ui ,ux ,brms ,jboss

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}