Business App Starter

Business App Starter is a commercial Vaadin starter for building responsive business web apps. It contains a collection of components, view templates, theming utilities and best practises that can help teams save more than a week of development time at the start of a new project. It makes use of Vaadin’s free and open source framework and components, as well as commercial components and tools like Charts and TestBench.

Features

• Application header with avatar & tab support

• Customisable styles

• Installable on desktop & mobile

• Responsive navigation sidebar

• Templates for CRUD, dashboard & drilldown views

• 100% Java-based templates

Structure

The Business App Starter’s structure is comprised of several slots designed to help implement any layout.

Header & Footer Slots

These slots are intended for application-wide navigation, actions and branding. When using both the outer and inner elements, ensure the content hierarchy is clear and that they don’t take up too much vertical space.

Navigation Slot

The navigation slot is reserved for the NaviDrawer: a responsive and collapsible navigation sidebar that houses searchable and hierarchical navigation items. It consists of a header intended for branding & account switching, a list of navigation items, and a footer which by default houses the collapse button.

Navigation Modes

The application supports two different navigation modes:

• Traditional: clicking a link changes the current view.

• Tabbed: a browser-esque experience where users can open and close tabs. Clicking a link changes the content of the current tab.

View Slot

The intended slot for views. Place views in this slot by setting the @Route annotation’s layout parameter to MainLayout.class.

@Route(value = "my-view", layout = MainLayout.class)
@PageTitle("My View")
public class MyView extends ViewFrame {

ViewFrame & SplitViewFrame

All of the Business App Starter’s views extend either ViewFrame or SplitViewFrame. They simplify the process of creating views that contain a header, (scrollable) content and footer. SplitViewFrame houses an additional details slot for creating master-detail views.

Layout Examples

Here are a few examples of common layouts used in business applications.

An often-used composition where the outer header is the most prominent element. The view itself sports a header for showing the title.

Used slots:

• Header (outer)

• Navigation drawer

• View with header

This layout puts more focus on the navigation drawer. Suitable for complex hierarchical navigation structures. The view footer houses view-specific actions.

Used slots:

• Navigation drawer

• Header (inner)

• View with footer

The navigation is placed in the outer header. The view area is maximised but the navigation has to be simple. The view’s sidebar is used to display additional details.

Used slots:

• Header (outer)

• View with sidebar

Custom Components

The Business App Starter comes with the following custom components:

• AppBar & TabBar

• Badge

• DetailsDrawer

• FlexBoxLayout

• ListItem

• NaviDrawer

• NaviTabs (closable)

AppBar & TabBar

AppBar consists of a main menu icon, contextual navigation icon, title, tabs, action items and avatar. All building blocks are optional.

AppBar with a main menu icon, title, tabs and avatar.

TabBar is a simpler version of AppBar that discards the contextual navigation icon and title.

Badge

Server-side component for Lumo badges.

DetailsDrawer

Mainly intended for usage in master-detail views. Composed of a header, (scrollable) content and footer.

Master-detail view with a DetailsDrawer shown on the far right.

FlexBoxLayout

FlexBoxLayout is a server-side implementation of CSS Flexible Box Layout. It extends FlexLayout and contains convenience methods for setting flex, flex-basis, flex-direction, flex-shrink and flex-wrap. It also supports setting background-color, margin, overflow, padding, shadow, spacing and theme.

ListItem

A list item comprised of a prefix, text (primary & secondary) and suffix. Only the primary text is mandatory. Any component can be placed in the prefix and suffix slots.

ListItem with a prefix icon, primary and secondary texts, as well as a suffix button.

NaviTabs

Tabs that when clicked navigate to a specific target (view) and that can be closed.

Updated 2021-03-08  Edit this article