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.
Join the DZone community and get the full member experience.Join For Free
This is the third part of a five parts series about tips for Vaadin developers. Here are all the series parts:
- Migrating From Vaadin 6 to Vaadin 7
- UI abstraction and using Vaadin CDI Add-on
- Styling Vaadin components and using Add-ons
- Data modeling in Vaadin
- 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.
Related commit: Add dependency for VaadinIcons and Vaadin WSCDN server
Following are few ideas on how to style the components.
Make splitter large:
Add icons to buttons, for example:
Specify button importance to and get style accordingly:
Make horizontal layout wraps:
Change all references from Reindeer theme to Valo theme, for example this:
Related commit: Style buttons and add icons and Adjust and cleanup layout
And here is 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
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:
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.
Opinions expressed by DZone contributors are their own.