Creating a Main View

🔥 Creating the Header 

For this article, the navigation bar is a horizontal element that will have any component, like The tagline and the logo. It can also contain a menu toggle, title, user image, and stuff like this. 

The following example makes a header with the viewTitle member in the main view class:

Main_View.java

private Component creatingHeaderComponent() 
{
    horizontalLayout layout = new horizontalLayout();


    // Configuring style for the header
    layout.settId("Header");
    layout.getThemeList().set("dark", false);
    layout.setWidthFull();
    layout.setSpacing(true);
    layout.setAlignItems(FlexComponent.Alignment.CENTER);


    // Putting the toggle button
    layout.add(new DrawerToggle());


   //Header placeholder 
    viewTitle = new H2();
    layout.add(viewTitle);


    //An icon
    layout.add(new Image("user.png", "Example"));


    return layout;
} 

🔥 Creating the Menu

Similarly, as above, the menu bar can be developed utilizing similar functions. 

Let us now move to the section where we handle the navigation.  

🔥 Managing the Navigation

Whenever the user navigates to a view, the view tab should be highlighted as it is selected by setting. The view can also be set in the header.

Both these things can be done by overriding afterNavigation() in AppLayout, as done following:

Main_View.java

@Override
protected void afterNavigation() 
{
    super.afterNavigation();


    // Selecting the tab corresponding to currently shown view
    getTabForComponent(getContent()).ifPresent(menu::setSelectedTab);


    // Setting the view title in the header
    viewTitle.setText(getCurrentPageTitle());
}

 

The selected tab should correspond to the view, that is, the displayed content.

Main_View.java

private Optional<Tab> getTabForComponent(Component component) 
{
    return menu.getChildren().filter(tab -> ComponentUtil.getData(tab, Class.class).equals(component.getClass()))
            .findFirst().map(Tab.class::cast);
}

The view title can be retrieved from the PageTitle annotation given to the view as follows:

Main_View.java

private String getCurrentPageTitle() 
{
    return getContent().getClass().getAnnotation(PageTitle.class).value();
}

The exact title is automatically set as the page title in the browser, so it gets handled automatically.

🔥 Creating a View

A view displayed in an AppLayout requires a route defined with the @Route annotation, similar to any other view. The route should be linked to the main view via the layout parameter to pass the class object of the main view.

Welcome_View.java

@Route(value = "Welcome", layout = Main_View.class)

 

The main view does not have a route itself. For an entry point to the main view, and usually to the entire application, a default view needs to be defined. This is done using a route alias. 

⚡ Page Title

The page title in the browser tab or window can be set using the @PageTitle annotation as follows:

Welcome_View.java

@PageTitle("Welcome")

The page title can be used in a view header or breadcrumbs

⚡ Styling a View

You can define custom styling for the view with the @CssImport annotation.

Welcome_View.java

@CssImport("./styles/views/welcome/welcome-view.css")

⚡ Default View

An entry point is required in most applications. A view can be defined as a default view via the route of the main view with @RouteAlias. The value that defines the route has to be empty for the root route.

The enclosing main view also needs to be defined with the layout parameter, similar to what was done for the earlier route.

Welcome_ View.java

@RouteAlias(value = " ", layout = Main_View.class)

/main is for the main view, and then /main/Welcome is for the sub-view.

⚡ Finishing the View

A view displayed in AppLayout is similar to any other view or a composite component.

Welcome_View.java

public class WelcomeView extends HorizontalLayout 
{
    private TextField first_name;
    private Button Welcome;


    public WelcomeView() 
    {
        setId("welcome-view");
        first_name=new TextField("Enter name");
        Welcome=new Button("Welcome");
        add(first_name,Welcome);
        setVerticalComponentAlignment(Alignment.END,first_name,Welcome);


        // Handling click trigger
        Welcome.addClickListener(e -> {
            Notification.show("welcome " + name.getValue());
        });
    }
}

🔥 Frequently Asked Questions

What is web development?

Web development is creating, building, and maintaining websites. It contains aspects such as web publishing, web design, web programming, and database management. 

What are the two classifications of web development?

It can be classified as:

👉  Frontend Development 

👉  Backend Development

Name a few Web Development frameworks. 

Some Web Development frameworks include Express, Django, Rails, Laravel, etc. 

🔥 Conclusion

This article extensively discusses Creating a Main View. It goes on to explain its components and the code involved for each component. 

To tighten the grip on this topic, we recommend reading more articles on the topic like Vaadin-Menu Bar, Vaadin-Text Area, and Vaadin-Map.

We hope that this blog has helped you enhance your knowledge regarding Creating a Main View, and if you would like to learn more, check out our articles on Coding Ninjas Blogs. 

You can refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Data Structures and Algorithms, Competitive Programming, JavaScript, SQL, System Design, and many more!

If you want to test your competency in coding, you may check out the Mock Test Series and participate in the Contests organized on Coding Ninjas Studio! But if you have just started your learning process and are looking for questions asked by tech giants like Amazon, Microsoft, Uber, etc.; you must look at the Problems, Interview Experiences, and Interview Bundle for placement preparations.

Nevertheless, you may consider our Courses to give your career an edge over others!

Do upvote our blog to help other ninjas grow. 

Happy Coding!