Styling Flow Application

Styling Views and Custom Components

The traditional way of styling the user interface is by including a CSS file in the code. Similarly, styling flow application is also done by adding a CSS file. The CSS classes are added to the view members, and these classes are targeted in the CSS style sheet.

The following example explains how to add a CSS style sheet - 

Implementation

Java Code

@CssImport("./styles/my-styles.css")

// This is the Java code for setting the elements 
public class MyView extends VerticalLayout {
  public MyView() {
   	
   	// setting a CSS class
    addClassName(“my-styles”);

	// creating a ‘title’ object for the H1 class
    // adding a ‘heading’ CSS class property to the ‘title’ object
    H1 title = new H1(“Coding Ninjas”);
   title.addClassName(“heading”);

	// creating a ‘text’ object for the Paragraph class
    Paragraph text = new Paragraph(“Don’t just be a coder, become a Ninja Coder!”);

	// creating a back button
    // adding a ‘back-button’ CSS class property to the ‘button’ object 
    Button button= new Button(“Back”);
    button.addClassName(“back-button”);

	add(heading, text, backButton);
  }
}

You can also try this code with Online Java Compiler

Run Code

CSS code 

// This is the ‘my-style.css’ file 
.heading {
  margin-top: 0;
}
p {
    font-size: var(--lumo-font-size-l, 1.2em);
}
.back-button {
  background-color: var(--lumo-shade-90pct);
}

To import the style sheets, use @CssImport, at the beginning of the code. Another way of adding style sheets is by using @StyleSheet.

Importing Style Sheets

Style sheets can be of any one style, bundled or external. Bundling refers to adding multiple style sheets to the application resource folder. Style sheets can be imported from an external URL or from a URL from within the application.

🍁 Bundled Style Sheets

Bundled style sheets are included in the application bundle and other client-side resources,  during a production build. Use the @CssImport annotation to import style sheets from the application source folder.

The @CssImport can be used to import style sheets in the global scope.

Global Scope

// Import a style sheet into the global scope
@CssImport("./styles/cn-shared-styles.css")
public class MyNinjaApplication extends Div {
}

You can also try this code with Online Java Compiler

Run Code

The @CssImport can be used to import style sheets that are component-specific. 

Local Scope

// Import a style sheet into the local scope of the Horizontal-layout component
@CssImport(value = "./styles/Horizontal-layout .css",
           themeFor = "vaadin-Horizontal-layout")

You can also try this code with Online Java Compiler

Run Code

The style sheet should be stored in the path - 

{project directory}/frontend/styles/my-styles.css

Bundling is advised for styles that change concurrently with application logic or component implementations since the browser can cache them as a single entity of linked resources.

🍁External Style Sheets

Import style sheets from the external URL or from a URL within your application using the @StyleSheet annotations. 

Java Code

//import the style sheet from a URL within the application
@StyleSheet("context://custom-font.css")

You can also try this code with Online Java Compiler

Run Code

Java Code

//import the style sheet from an external URL
@StyleSheet("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css")
public class MyApplication extends Div {
}

You can also try this code with Online Java Compiler

Run Code

Without including the contents in the application bundle, styles can be imported using external/linked style sheets. By doing so, the style sheet may be loaded and cached by the browser without affecting other parts of the program. 

The URLs from within the application are prefixed with context://, which points to the root of the public resources folder of the application. The URLs should be placed in the public resources folder in the web application.

Frequently Asked Questions

Is vaadin frontend or backend?

Vaadin Flow is an open source framework that enables both server-side and client-side development using Java as the programming language.

Can we add custom CSS and JavaScript?

Yes. We can add our own CSS files and CSS class names to any component to set custom CSS properties. We can also use Theme Editor to create custom themes. We can also execute and include custom JavaScript when needed. These are the ways of styling flow applications. 

Is Vaadin free to use?

Yes. The Vaadin framework and its components are free to use for any purpose. We can develop fully-functional, complete web applications. 

Conclusion

Congratulations on finishing the blog! In this blog, we have discussed the concept of styling flow applications. We learned about using bundled and external style sheets. 

After reading about styling flow application, if you are more curious about other concepts related to Vaadin, please check our other blogs on Vaadin - 

🔥 Vaadin Environmental-Setup

🔥 Vaadin Architecture

🔥 Vaadin User Interface Components

🔥 Vaadin Board 

🔥 GWT vs Vaadin

If you liked our article, do upvote our article and help other ninjas grow💪. You can refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Data Structures and Algorithms, Competitive Programming, System Design, and many more!

Head over to our practice platform Coding Ninjas Studio to practice top problems, attempt mock tests, read interview experiences, interview bundle, follow guided paths for placement preparations, and much more!!

We wish you Good Luck!🎈 Please upvote our blog 🏆 and help other ninjas grow.