3.5.1.6. Корневые экраны

Корневой экран - это экран Generic UI, который отображается непосредственно во вкладке веб-браузера. Существует два типа таких экранов: экран логина и главный экран. Помимо обычных компонентов, любой корневой экран может содержать компонент WorkArea, который позволяет открывать другие экраны приложения во внутренних вкладках. Если корневой экран не содержит WorkArea, то экраны приложения могут быть открыты только в режиме DIALOG.

Экран логина

Экран логина отображается до регистрации пользователя в системе. Данный экран можно кастомизировать с помощью расширения существующего экрана, предоставляемого фреймворком, либо создать новый экран с нуля.

Для расширения существующего экрана используйте шаблон Login screen в мастере создания экранов Studio. В результате Studio создаст экран, расширяющий стандартный. Этот экран будет использоваться вместо стандартного, так как он будет имеет такой же идентификатор: см. значение login в аннотации @UiController.

Для создания нового экрана используйте шаблон Blank screen. Пример кода минималистичного экрана логина:

my-login-screen.xml 
<window xmlns="http://schemas.haulmont.com/cuba/screen/window.xsd"
        caption="Login"
        messagesPack="com.company.sample.web">
    <layout>
        <label value="Hello World"/>
        <button id="loginBtn" caption="Login"/>
    </layout>
</window>
MyLoginScreen.java 
package com.company.sample.web;

import com.haulmont.cuba.gui.Route;
import com.haulmont.cuba.gui.components.Button;
import com.haulmont.cuba.gui.screen.*;
import com.haulmont.cuba.security.auth.LoginPasswordCredentials;
import com.haulmont.cuba.web.App;

@UiController("myLogin")
@UiDescriptor("my-login-screen.xml")
@Route(path = "login", root = true)
public class MyLoginScreen extends Screen {

    @Subscribe("loginBtn")
    private void onLoginBtnClick(Button.ClickEvent event) {
        App.getInstance().getConnection().login(
                new LoginPasswordCredentials("admin", "admin"));
    }
}

Для использования данного экрана вместо дефолтного, установите его id в свойстве приложения cuba.web.loginScreenId в файле web-app.properties:

cuba.web.loginScreenId = myLogin

Вместо регистрации нового экрана в свойстве приложения, можно просто дать новому экрану дефолтный идентификатор login.

Главный экран

Главный экран – это корневой экран, отображаемый после регистрации пользователя в системе. По умолчанию фреймворком предоставляется главный экран с боковым меню.

Studio содержит несколько шаблонов для создания кастомного главного экрана. Все они используют класс MainScreen в качестве базового класса контроллеров.

  • Main screen with side menu создает расширение стандартного главного экрана с идентификатором main. Главный экран с боковым меню по умолчанию предоставляет возможность разворачивать и сворачивать боковое меню с помощью кнопки Collapse, находящейся в нижнем левом углу меню.

    Поведение бокового меню можно настроить с помощью переменных SCSS (эти переменные можно изменить в визуальном редакторе после расширения темы или создания новой темы):

    • $cuba-sidemenu-layout-collapse-enabled включает или выключает режим сворачивания бокового меню. По умолчанию имеет значение true.

    • $cuba-sidemenu-layout-collapsed-width определяет ширину свёрнутого бокового меню.

    • $cuba-sidemenu-layout-expanded-width определяет ширину развёрнутого бокового меню.

    • $cuba-sidemenu-layout-collapse-animation-time определяет время анимации сворачивания и разворачивания бокового меню в секундах.

      Если переменная $cuba-sidemenu-layout-collapse-enabled имеет значение false, кнопка Collapse скрыта, а боковое меню развёрнуто.

  • Main screen with responsive side menu создает похожий экран, но боковое меню является responsive и сворачивается на узких экранах. Экран будет иметь собственный id, который необходимо зарегистрировать в web-app.properties:

    cuba.web.mainScreenId = respSideMenuMainScreen

  • Main screen with top menu создает экран с верхним меню и возможностью использования панели папок слева. Экран будет иметь собственный id, который необходимо зарегистрировать в web-app.properties:

    cuba.web.mainScreenId = topMenuMainScreen

Следующие специальные компоненты могут быть использованы в главном экране в дополнение к стандартным UI-компонентам:

  • SideMenu – боковое меню приложения в виде вертикального дерева.

  • AppMenu – главное меню.

  • FoldersPane – панель папок поиска и папок приложения.

  • AppWorkArea – рабочая область, обязательный компонент для работы с экранами в режимах THIS_TAB, NEW_TAB и NEW_WINDOW.

  • UserIndicator – поле, отображающее имя текущего пользователя, а при наличии замещаемых пользователей позволяет переключаться между ними.

    Метод setUserNameFormatter() используется для отображения имени пользователя в виде, отличном от стандартного имени экземпляра сущности User:

    userIndicator.setUserNameFormatter(value -> value.getName() + " - [" + value.getEmail() + "]");
    userIndicator

  • NewWindowButton – кнопка открытия нового окна приложения.

  • UserActionsButton – если сессия не аутентифицирована, отображает ссылку на экран логина. В противном случае, отображает меню со ссылкой на экран настроек пользователя и возможностью выйти из системы.

    Вы можете использовать обработчики событий LoginHandler или LogoutHandler в контроллере главного экрана для реализации кастомной логики:

    @Install(to = "userActionsButton", subject = "loginHandler")
private void loginHandler(UserActionsButton.LoginHandlerContext ctx) {
    // do custom logic
}

@Install(to = "userActionsButton", subject = "logoutHandler")
private void logoutHandler(UserActionsButton.LogoutHandlerContext ctx) {
    // do custom logic
}

  • LogoutButton – кнопка выхода из приложения.

  • TimeZoneIndicator – надпись, которая отображает часовой пояс пользователя.

  • FtsField – поле полнотекстового поиска.

Следующие свойства приложения могут влиять на главный экран:

  • cuba.web.appWindowMode - задает начальный режим главного окна: с вкладками или одноэкранный (TABBED или SINGLE). Пользователь впоследствии может задать желаемый режим через экран Settings, доступный через UserActionsButton.

  • cuba.web.maxTabCount - в режиме представления главного окна с вкладками задает максимальное количество вкладок, которое может открыть пользователь. По умолчанию 20.

  • cuba.web.foldersPaneEnabled - включает отображение панели папок для экрана, созданного по шаблону Main screen with top menu.

  • cuba.web.defaultScreenId - задает экран по умолчанию, который должен быть открыт в главном экране автоматически.

  • cuba.web.defaultScreenCanBeClosed - указывает, может ли пользователь закрыть экран по умолчанию.

  • cuba.web.useDeviceWidthForViewport - определяет ширину области просмотра (viewport). Если установлено значение true, за ширину области просмотра будет принята ширина устройства. Также может быть полезно свойство cuba.web.pageInitialScale.