Как загрузить представление на той же странице в приложении меню? - PullRequest
Новая
       33

Как загрузить представление на той же странице в приложении меню?

0 голосов
/ 03 августа 2020

Я хочу загрузить представление при щелчке по пункту меню на той же странице, где меню не исчезало вот так.

enter image description here

But, In my case It disappears, Like this. введите описание изображения здесь

Код в MainLayout. java это: 

package com.packagename.myapp;

import com.vaadin.flow.component.AttachEvent;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.KeyModifier;
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.button.ButtonVariant;
import com.vaadin.flow.component.charts.model.Navigator;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouteConfiguration;
import com.vaadin.flow.router.RouterLayout;
import com.vaadin.flow.router.RouterLink;
import com.vaadin.flow.server.PWA;
import com.vaadin.flow.theme.Theme;
import com.vaadin.flow.theme.lumo.Lumo;
import sun.jvm.hotspot.debugger.cdbg.AccessControl;

/**
 * The main layout. Contains the navigation menu.
 */
@Theme(value = Lumo.class)
@Route("")
@PWA(name = "Project Base for Vaadin", shortName = "Project Base", enableInstallPrompt = false)
@CssImport("./styles/shared-styles.css")
@CssImport(value = "./styles/menu-buttons.css", themeFor = "vaadin-button")
public class MainLayout extends AppLayout implements RouterLayout {

    public MainLayout() {
        final DrawerToggle drawerToggle = new DrawerToggle();
        drawerToggle.addClassName("menu-toggle");
        addToNavbar(drawerToggle);

        VerticalLayout layout = new VerticalLayout();
        layout.setDefaultHorizontalComponentAlignment(Alignment.CENTER);
        layout.setClassName("Menu-header");

        final HorizontalLayout top = new HorizontalLayout();
        top.setDefaultVerticalComponentAlignment(Alignment.CENTER);

        top.setClassName("menu-header");

        final Label title = new Label("Menu Application");
        top.add(title);
        addToNavbar(top);
        addToDrawer(createMenuLink(HomeView.class, HomeView.VIEW_NAME,
                VaadinIcon.EDIT.create()));

        addToDrawer(createMenuLink(MainView.class, MainView.VIEW_NAME,
                VaadinIcon.INFO_CIRCLE.create()));

    }

    private RouterLink createMenuLink(Class<? extends Component> viewClass, String caption, Icon icon) {
        final RouterLink routerLink = new RouterLink(null, viewClass);
        routerLink.setClassName("menu-button");
        routerLink.add(icon);
        routerLink.add(new Span(caption));
        icon.setSize("24px");
        return routerLink;
    }

    private Button createMenuButton(String caption, Icon icon) {
        final Button routerButton = new Button(caption);
        routerButton.setClassName("menu-button");
        routerButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY_INLINE);
        routerButton.setIcon(icon);
        icon.setSize("24px");
        return routerButton;
    }
}

Код int MainView. java это: 

package com.packagename.myapp;

import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;

@Route("main-view")
public class MainView extends VerticalLayout {

    public static final String VIEW_NAME = "Main";

    public MainView() {
        TextField textField = new TextField("Your name");
        textField.addThemeName("bordered");

        GreetService greetService = new GreetService();
        Button button = new Button("Say hello",
                e -> Notification.show(greetService.greet(textField.getValue())));
        button.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        button.addClickShortcut(Key.ENTER);
        addClassName("centered-content");
        add(textField, button);
    }
}

Код в HomeView. java это: 

package com.packagename.myapp;

import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;
import com.vaadin.flow.server.Version;

@Route("home-view")
public class HomeView extends VerticalLayout {

    public static final String VIEW_NAME = "Home";
    public HomeView() {
            add(VaadinIcon.INFO_CIRCLE.create());
            add(new Span(" This application is using Vaadin version "
                    + Version.getFullVersion() + "."));
            setSizeFull();
            setJustifyContentMode(JustifyContentMode.CENTER);
            setAlignItems(Alignment.CENTER);
    }
}

Я хочу загрузить GUI пункта меню на той же странице. Как я могу это сделать? Помогите мне, пожалуйста, как я могу исправить эту проблему.

Ответы [ 2 ]

1 голос
/ 03 августа 2020

Необходимо указать, в каком RouterLayout он должен отображаться. Для HomeView аннотация маршрута будет 

@Route(value = "home-view", layout = MainLayout.class)
0 голосов
/ 03 августа 2020

Вы можете загрузить пример проекта из https://start.vaadin.com/ и взять оттуда пример того, как это сделать.

В вашем случае ваши представления настроены на маршруты, но нет связи между ним и основным макетом. Аннотация @Route должна определять параметр layout, чтобы сообщить системе, что он должен отображаться в другом макете, например:

HomeView. java

@Route(value = "home-view", layout = MainLayout.class)

MainLayout не должен иметь маршрут сам по себе, поскольку он не должен быть доступен без содержимого в качестве представления. Родительский макет всегда должен реализовывать RouterLayout, но, поскольку вы уже расширяете AppLayout, об этом уже позаботились.

Дополнительную документацию по нему можно найти по адресу https://vaadin.com/docs/v14/flow/routing/tutorial-router-layout.html.

...