The components, their behavior, and layout of the Application User Interface is defined by the LspsUI class: Hence to change these, you need to modify the implementation or implement your own LspsUI class. In the LSPS Application, the resources are located in the vaadin.core package of the <YOUR_APP>-vaadin project.

Note: The content of the Documents and To-Dos is defined in Modules using forms: to modify these, you need to change the design of their forms or related Module resources.

The underlying default component tree of the Application User Interface is as follows:

LspsUI represents the root component and holds the user info and connector to the LSPS server. Its init() method creates the content root layout and a connector between LSPS forms and your application, called the AppConnector, and calls the initLayout() method which assembles the screen content.
applayout extends CustomComponent and implements ViewDisplay

It holds the following layout components of the default Application User Interface:
- navigation: NavigationMenu that holds the standard LSPS menu items
- userMenu: NavigationMenu that holds custom menu items

To change the components of the application, you will be mostly editing the initLayout() method of the AppConnector class.

If you decide to implement the LspsUI class, make sure it meets the following requirements:

It must declare the LSPS widget set for the Vaadin servlet.

@Widgetset("com.whitestein.lsps.vaadin.widgets.WidgetSet")
public class LspsUI extends UI implements ErrorHandler { ...

It must provide an implementation of LspsAppConnector, interface that defines the binding contract between the LSPS vaadin renderer and the rest of the application.
It must provide an implementation of LspsFormConnector, interface for a connector of forms and views.
It must use JAAS for user authentication: The setting is available in the login.jsp and in the WEB-INF/web.xml of the webapp project.

Adding an Item to the Navigation Menu

To add a custom item to the navigation menu or remove existing items, do the following:

Open your AppLayout.java file.
Locate the //Examples: comment in the buildMenu() method.

The examples demonstrate how to add custom items to the Navigation menu: to preview them, set the if condition to true, compile and run the application.
- To remove items from the menu, either comment out the if statement with the respective navigation menu item above the example or add an if statement which will be check if the user has the required permissions.
- To add your items to the menu, call the addDocumentItem() or addRunModelItem() method calls as appropriate.
  
  When adding custom items, consider whether the user permissions need to be taken into account: if this is required, use the respective methods, such as:
  - User's hasRight()
  - Document's hasRightToOpenDocument() (false if user has no right to access given document as defined by the document access expression)

Adding a Header and Footer

To add a footer or header to the content area of the application by modifying the Vaadin component tree, do the following:

Create a Vaadin component with the header or footer.

//example header defined as member variable of the AppLayout class:
Component header = new Label("header");
//example footer defined as member variable of the AppLayout class:
Component footer = new Label("footer");

Create a layout component that will hold the contentArea and the header or footer. The layout must have height set to 100% and expand ratio 1.

        VerticalLayout contentAreaWithHeaderAndFooter = new VerticalLayout(header, contentArea, footer);
        contentAreaWithHeaderAndFooter.setHeight("100%");
        contentAreaWithHeaderAndFooter.setExpandRatio(contentArea, 1);

Modify the mainLayout to hold the contentAreaWithHeaderAndFooter instead of the contentArea.

mainLayout.addComponents(menuArea, contentAreaWithHeaderAndFooter);
mainLayout.setExpandRatio(contentAreaWithHeaderAndFooter, 1);

Customizing the Login and Logout Page

To modify the login page, logout page, and the page displayed when login action failed, modify the login.jsp, login_failed.jsp, and logout.jsp in the <app>-vaadin-war project of your application.

To change the logo of the area where you enter your credentials, proceed as follows:

If you have not done so yet, create a custom theme.

In the login.jsp file, set your theme as the default theme.

...
    var storage = window.localStorage;
    var theme = "my-theme";

Create the rules for the login header:
1. Create a file for the rule in the sass directory of your theme, for example *_login.scss*.
2. In the file, define a mixin with the rules.
  - The upper part of the login has the loginHeader id.
  - The lower part with credential input has the selector &.login-page form table.
Run Sass compiler and check the login page.

Example login customization

@mixin _login {
  &.login-page #loginHeader{
     background: white url(../img/splashscreen.png) !important;
     background-position: center !important;
     background-size: 400px auto !important;
     background-repeat: no-repeat !important;
  }
  &.login-page form table {
    background-color: white !important;
    background-image: none !important;
  }
  &.login-page input {
    border: 1px solid #c9c9c9 !important;
  }
  &.login-page .v-button .v-button-caption {
    color: #c9c9c9 !important;
  }
}

Customizing Content of the About Dialog

The information for the dialog is pulled from the app-version.properties file which is bound to the maven build properties.

Note: On SDK Embedded Server the properties are not resolved since the application is not deployed as an EAR.

Adding a Locale

To provide a new localization setting and sources, do the following:

Create a properties file with the name localization_<LANGUAGE_CODE>.properties with the translations. Use one of the <YOUR_APP>-vaadin/src/main/resources/com/whitestein/lsps/vaadin/webapp/localization.properties file as a template for your properties file.
Add the translation properties file to the <YOUR_APP>-vaadin/src/main/resources/com/whitestein/lsps/vaadin/webapp/ directory.

Add the option to the language picker on the Settings screen: open the <YOUR_APP>-vaadin/src/main/java/org/<YOUR_APP>/<>/vaadin/page/AppSettingsView.java and add the definition to the createSettingsSection() method. The language code is based on the java.util.Locale class.

private VerticalLayout createSettingsSection(LspsUI ui) {
  VerticalLayout settings = new VerticalLayout();
  settings.setSpacing(true);
 
  Label settingsHeader = new Label("<h2>" + ui.getMessage("settings.applicationSection") + "</h2>", ContentMode.HTML);
  settings.addComponent(settingsHeader);
 
  this.languages = new OptionGroup(ui.getMessage("settings.language"));
  languages.addStyleName("ui-spacing");
  languages.addItem("en_US");
  languages.setItemCaption("en_US", English);
  languages.addItem("de_DE");
  languages.setItemCaption("de_DE", Deutsch);
  languages.addItem("sk_SK");
  languages.setItemCaption("sk_SK", Slovensky);
  //Italian localization setting:
  languages.addItem("it_IT");
  languages.setItemCaption("it_IT", Italiano);
 
  languages.setValue(ui.getLocale().toString());
  settings.addComponent(languages);
  return settings;
}

Creating a Custom Page

Important: We instruct you to use the forms Module to implement the GUI of your page in the examples. However, this feature is experimental and the resulting form is not compatible with the ui Modules, which is the previous and supported forms implementation.

To create a page that will be always available to front-end users, do the following:

Switch to the Modeling perspective.
Create a GO-BPMN Project with an executable Module.
Create a document definition in the Module (right-click the Module and go to New -> Document Definition).
In the editor with the docs file, click Add and define the document details on the right.

Definition of the document with order page
Information on documents is available in the Process Design Suite Guide.
In the UI definition field define the page content. Information on forms is available in the Process Design Suite Guide.
Upload the Module to your server:
1. Make sure the server is running.
2. Right-click the Module and go to Upload As -> Model
3. Go to your application (for the Embedded Server http://localhost:8080/lsps-application).
4. Click Documents in the menu on the left.
5. Click the document name.

Order page