Trace:
Differences
This shows you the differences between two versions of the page.
— |
vaadin:customize_application [2018/02/06 12: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. |