Hi,
I am using vaadin flow 24 for my saas product, I want to design a settings page in hilla and use it into my flow layout, I already did manage to create hilla view but I can not secure the end point with @PermitAll or @DenyAll, plus, I could not manage to use that hilla view into my Flow Layout, could someone please help? Thanks
Which specific Vaadin version are you using? Can you share some of the code of how your setup looks to help us figure out what might be going on?
Hi Marcus, Thanks for your reply. its Vaadin flow 24, I am trying to ease my page design and use hilla in one of my pages, I did followed the documentation instructions on how to use hilla in vaadin flow 24, the counter.tsx file is working fine but I have this Vaadin flow 24 layout
package com.example.application.views;
import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.applayout.AppLayout;
import com.vaadin.flow.component.applayout.DrawerToggle;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Footer;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.html.Header;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.orderedlayout.Scroller;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.sidenav.SideNav;
import com.vaadin.flow.component.sidenav.SideNavItem;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.theme.lumo.Lumo;
import com.vaadin.flow.theme.lumo.LumoUtility;
import org.vaadin.lineawesome.LineAwesomeIcon;
/**
* The main view is a top-level placeholder for other views.
*/
public class MainLayout extends AppLayout {
private H1 viewTitle;
Button toggleThemeButton = new Button("", event -> toggleTheme());
public MainLayout() {
setPrimarySection(Section.DRAWER);
addDrawerContent();
addHeaderContent();
}
private void addHeaderContent() {
DrawerToggle toggle = new DrawerToggle();
toggle.setAriaLabel("Menu toggle");
viewTitle = new H1();
viewTitle.addClassNames(LumoUtility.FontSize.LARGE, LumoUtility.Margin.NONE);
addToNavbar(true, toggle, viewTitle);
}
private void addDrawerContent() {
Span appName = new Span("Calendrey");
appName.getStyle().set("color", "var(--lumo-primary-color)");
appName.addClassNames(LumoUtility.FontWeight.SEMIBOLD, LumoUtility.FontSize.LARGE);
Header header = new Header(appName);
Scroller scroller = new Scroller(createNavigation());
addToDrawer(header, scroller, createFooter());
}
private VerticalLayout createNavigation() {
SideNav nav = new SideNav();
nav.setLabel("Main Items");
nav.addItem( new SideNavItem("Dashboard", DashboardView.class, LineAwesomeIcon.HOME_SOLID.create()));
nav.addItem(
new SideNavItem("Requests", RequestsView.class, LineAwesomeIcon.SUITCASE_SOLID.create()));
nav.addItem(new SideNavItem("Categories", CategoriesView.class, LineAwesomeIcon.LAYER_GROUP_SOLID.create()));
nav.addItem(new SideNavItem("Clients", ClientsView.class, LineAwesomeIcon.USERS_SOLID.create()));
SideNav nav2 = new SideNav();
nav2.setLabel("Preferences");
//nav2.addItem(new SideNavItem("Profile", ProfileView.class, LineAwesomeIcon.USER_SOLID.create()));
nav2.addItem(new SideNavItem("Settings", SettingsView.class, LineAwesomeIcon.COG_SOLID.create()));
//nav2.addItem(new SideNavItem("Help", EmptyView.class, LineAwesomeIcon.INFO_SOLID.create()));
SideNav nav3 = new SideNav();
nav3.setLabel("Plan");
//nav2.addItem(new SideNavItem("Profile", ProfileView.class, LineAwesomeIcon.USER_SOLID.create()));
nav3.addItem(new SideNavItem("Billing", BillingView.class, LineAwesomeIcon.MONEY_BILL_SOLID.create()));
//nav2.addItem(new SideNavItem("Help", EmptyView.class, LineAwesomeIcon.INFO_SOLID.create()));
VerticalLayout navWrapper = new VerticalLayout(nav, nav3, nav2);
navWrapper.setSpacing(true);
navWrapper.setSizeUndefined();
nav.setWidthFull();
nav2.setWidthFull();
nav3.setWidthFull();
return navWrapper;
}
private Footer createFooter() {
Footer layout = new Footer();
toggleThemeButton.setIcon(LineAwesomeIcon.MOON.create());
toggleThemeButton.setWidth("20%");
toggleThemeButton.getStyle().set("background-color", "rgb(110, 53, 223)");
toggleThemeButton.getStyle().set("color", "white");
toggleThemeButton.getStyle().set("cursor", "pointer");
toggleThemeButton.getStyle().set("border-radius", "6rem");
layout.add(toggleThemeButton);
return layout;
}
private void toggleTheme() {
UI ui = UI.getCurrent();
if (ui.getElement().getThemeList().contains(Lumo.DARK)) {
ui.getElement().getThemeList().remove(Lumo.DARK);
ui.getElement().getThemeList().add(Lumo.LIGHT);
toggleThemeButton.setIcon(LineAwesomeIcon.MOON.create());
} else {
ui.getElement().getThemeList().remove(Lumo.LIGHT);
ui.getElement().getThemeList().add(Lumo.DARK);
toggleThemeButton.setIcon(LineAwesomeIcon.SUN.create());
}
}
@Override
protected void afterNavigation() {
super.afterNavigation();
viewTitle.setText(getCurrentPageTitle());
}
private String getCurrentPageTitle() {
PageTitle title = getContent().getClass().getAnnotation(PageTitle.class);
return title == null ? "" : title.value();
}
}
I have secured each view with @PermitAll
nav.addItem(new SideNavItem("Categories", CategoriesView.class, LineAwesomeIcon.LAYER_GROUP_SOLID.create()));
How can I inject Counter.tsx hilla view into this layout?
kiitos!
Marcus needs the minor version. The feature you have mentioned is not available for example in 24.0
its
<vaadin.version>24.4.13</vaadin.version>
Are you able to update to the latest 24.6 version? IIRC, the ability to have a Hilla view inside a Flow main layout was added in 24.5.
Hi Marcus, Yes Just upgraded to 24.6.1 successfully, is there a docs on how to have hilla inside flow? Thanks
This may help https://vaadin.com/docs/latest/flow/integrations/hilla
@marcoc_753 thanks for the link, yes I followed the instruction but I still can not involve hilla view into the flow mainLayout code above.
If you annotate the Java class with @Layout, and you have no Hilla layout, it should be applied to the Hilla view
https://vaadin.com/docs/latest/flow/integrations/hilla#hilla-server-side-layout
1 Like