--Customize the Application frame

[Development@SIB]

This article is outdated - please use our new system at

https://doc.sibvisions.com




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_corporation.png (120.55 KiB) Viewed 3247 times

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_corporation_buttons.png (116.3 KiB) Viewed 3247 times

We removed the standard buttons and added a custom logout button. To customize the defaults, simply create your own application class:

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

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());
        }
    }
}

The custom application has to be set as main class for your launcher. Simply set the main parameter in your web.xml:

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

<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>

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_corporation_nohelp.png (114.42 KiB) Viewed 3247 times

Simply add

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

menu.removeItem(Menu.HELP);

to the existing code in our custom application.

Now we're removing the whole menubar:

vaadin_corporation_nomenu.png (117.48 KiB) Viewed 3247 times

Only admin users will be able to use the menubar.

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

@Override
public void afterLogin()
{
    super.afterLogin();
   
    if (getLauncher().isWebEnvironment())
    {
        if (isConnected())
        {
            getMenu().setMenuBarVisible(hasRole("admin"));
        }
    }
}  
 

And finally, it's also possible to hide the toolbar:

vaadin_corporation_notoolbar.png (115.66 KiB) Viewed 3247 times

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

@Override
public void afterLogin()
{
    super.afterLogin();
   
    if (getLauncher().isWebEnvironment())
    {
        if (isConnected())
        {
            Menu menu = getMenu();

            menu.setMenuBarVisible(hasRole("admin"));
            menu.setToolBarVisible(!hasRole("intern"));
        }
    }
}  
 

Only external users will be able to use the toolbar.