Documentation

Trace:

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

vaadin:customize_application [2018/02/06 13:19] (current)
admin created
Line 1: Line 1:
 +~~NOTRANS~~
 +~~Title: Customize the Application frame~~
  
 +The standard corporation application style has a button area, a menubar and a toolbar. The button and the menubar are always visible and the toolbar will be visible if a sidebar icon was set for a specific screen.
 +
 +A simple example:
 +
 +{{:​vaadin:​vaadin_corporation.png?​nolink|}}
 +
 +The orange rectangle contains the button area, the yellow area is the menubar and the green area is the toolbar (= sidebar). You have different options to customize the areas. It's possible to remove button from or add buttons to the button area. It's possible to hide the menubar and/or toolbar. You can hide the menubar and/or toolbar always or on-demand.
 +
 +Let's start with the button area:
 +
 +{{:​vaadin:​vaadin_corporation_buttons.png?​nolink|}}
 +
 +We removed the standard buttons and added a custom logout button. To customize the defaults, simply create your own application class:
 +
 +<file java CustomApplication.java>​
 +public class CustomApplication extends ProjX
 +{
 +    /** the additional button. */
 +    private UIButton butExit;
 +    ​
 +    public CustomApplication(UILauncher pLauncher) throws Throwable
 +    {
 +        super(pLauncher);​
 +        ​
 +        if (pLauncher.isWebEnvironment())
 +        {
 +            Menu menu = getMenu();
 +
 +            menu.removeItem(Menu.EDIT_RELOAD);​
 +            menu.removeItem(Menu.EDIT_SAVE);​
 +            menu.removeItem(Menu.EDIT_ROLLBACK);​
 +            menu.removeItem(Menu.EDIT_UNDO);​
 +            menu.removeItem(Menu.EDIT_REDO);​
 +
 +            menu.removeItem(WebMenu.OPTION_HOME);​
 +            menu.removeItem(WebMenu.OPTION_EXPAND);​
 +            menu.removeItem(WebMenuCorporation.OPTION_LOGOUT);​
 +            menu.removeItem(WebMenuCorporation.OPTION_USER);​
 +                ​
 +            if (menu instanceof WebMenu)
 +            {
 +                butExit = new UIButton();
 +                butExit.setImage(UIImage.getImage(IFontAwesome.SIGN_OUT_LARGE));​
 +                butExit.eventAction().addListener(this,​ "​doLogout"​);​
 +                Style.addStyleNames(butExit,​ "​topbutton"​);​
 +                    ​
 +                ((WebMenu)menu).addOption(butExit);​
 +            }
 +        }        ​
 +    }
 +
 +    @Override
 +    public void updateMenu(Menu pMenu)
 +    {
 +        super.updateMenu(pMenu);​
 +            ​
 +        if (butExit != null)
 +        {
 +            butExit.setVisible(isConnected());​
 +        }
 +    }
 +}
 +</​file>​
 +
 +The custom application has to be set as main class for your launcher. Simply set the main parameter in your web.xml:
 +
 +<file xml>
 +<​servlet>​
 +  <​servlet-name>​VaadinUI</​servlet-name>​
 +  <​servlet-class>​com.sibvisions.rad.ui.vaadin.server.VaadinServlet</​servlet-class>​
 +
 +  ...
 +
 +  <​init-param>​
 +    <​param-name>​main</​param-name>​
 +    <​param-value>​com.sibvisions.apps.CustomApplication</​param-value>​
 +  </​init-param>​
 +
 +  ...
 +</​servlet>​
 +</​file>​
 +
 +Our CustomApplication does nothing if the runtime environment is not web because it should work in other environments as well. We remove existing buttons and add a new custom button to the button area.
 +
 +Now we're customizing the menubar. First, let's remove the help menu:
 +
 +{{:​vaadin:​vaadin_corporation_nohelp.png?​nolink|}}
 +
 +Simply add
 +
 +<file java>
 +menu.removeItem(Menu.HELP);​
 +</​file>​
 +
 +to the existing code in our custom application.
 +
 +Now we're removing the whole menubar:
 +
 +{{:​vaadin:​vaadin_corporation_nomenu.png?​nolink|}}
 +
 +Only **admin** users will be able to use the menubar.
 +
 +<file java>
 +@Override
 +public void afterLogin()
 +{
 +    super.afterLogin();​
 +    ​
 +    if (getLauncher().isWebEnvironment())
 +    {
 +        if (isConnected())
 +        {
 +            getMenu().setMenuBarVisible(hasRole("​admin"​));​
 +        }
 +    }
 +}  ​
 +</​file>​
 +
 +And finally, it's also possible to hide the toolbar:
 +
 +{{:​vaadin:​vaadin_corporation_notoolbar.png?​nolink|}}
 +
 +<file java>
 +@Override
 +public void afterLogin()
 +{
 +    super.afterLogin();​
 +    ​
 +    if (getLauncher().isWebEnvironment())
 +    {
 +        if (isConnected())
 +        {
 +            Menu menu = getMenu();
 +
 +            menu.setMenuBarVisible(hasRole("​admin"​));​
 +            menu.setToolBarVisible(!hasRole("​intern"​));​
 +        }
 +    }
 +}  ​
 +</​file>​
 +
 +Only external users will be able to use the toolbar.
This website uses cookies for visitor traffic analysis. By using the website, you agree with storing the cookies on your computer.More information