Documentation

Trace:

Differences

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

Link to this comparison view

vaadin:customize_login [2018/02/06 13:11] (current)
admin created
Line 1: Line 1:
 +~~NOTRANS~~
 +~~Title: Customize the Login dialog~~
  
 +The standard login dialog looks like this one:
 +
 +{{:​vaadin:​vaadin_login.png?​nolink|}}
 +
 +It's not super fancy but solves the login problem. If you need a styled login dialog simply create your own or extend the existing class. In order to use a custom login dialog, you have to use the corporation style. It's not possible to use a custom login dialog with standard application style.
 +
 +<file java CustomLogin.java>​
 +public class CustomLogin extends WebLogin
 +{
 +        private UIIcon icoLogo;
 +        ​
 +    @Override
 +        protected void createLogin()
 +        {
 +                super.createLogin();​
 +                ​
 +        Label lblTitle = getTitleLabel();​
 +        lblTitle.setText(((ITranslator)getApplication()).translate("​Members Portal"​));​
 +
 +        Label lblInfo = getInfoLabel();​
 +        ​
 +        AbstractLayout layout = (AbstractLayout)lblTitle.getParent();​
 +        layout.removeComponent(lblInfo);​
 +
 +        icoLogo = new UIIcon("/​com/​sibvisions/​apps/​portal/​images/​logo.jpg"​);​
 +
 +        Component logo = (Component)icoLogo.getResource();​
 +
 +            layout.addComponent(logo);​
 +            layout.setComponentAlignment(logo,​ Alignment.MIDDLE_LEFT);​
 +        }
 +}
 +</​file>​
 +
 +This simple code extends the standard WebLogin class. It removes the info label and adds a centered icon.
 +
 +In order to use the custom login dialog, you have to configure the new class as your preferred login class. Add following parameter to the web.xml of your application:​
 +
 +<file xml>
 +<​servlet>​
 +  <​servlet-name>​VaadinUI</​servlet-name>​
 +  <​servlet-class>​com.sibvisions.rad.ui.vaadin.server.VaadinServlet</​servlet-class>​
 +
 +  <​init-param>​
 +    <​param-name>​Application.mode</​param-name>​
 +    <​param-value>​corporation</​param-value>​
 +  </​init-param>​
 +
 +  ...
 +    ​
 +  <​init-param>​
 +    <​param-name>​Application.Login.corporation.classname</​param-name>​
 +    <​param-value>​com.sibvisions.apps.portal.CustomLogin</​param-value>​
 +  </​init-param>​
 +    ​
 +  ...
 +</​servlet>​
 +</​file>​
 +
 +The result will look like this dialog:
 +
 +{{:​vaadin:​vaadin_login_styled.png?​nolink|}}
 +
 +It's very easy to change the layout with source code but it's also possible to use css for customization:​
 +
 +{{:​vaadin:​vaadin_login_css.png?​nolink|}}
 +
 +We changed following styles in an [[vaadin:​external_css|external css]] file:
 +
 +<file css>
 +.jvx .loginwindow .v-label.welcome ​
 +{
 +    font-size: 23px;
 +    color: #888888;
 +    width: 100%;
 +    text-align: center;
 +}
 +
 +.jvx .loginwindow .v-label.info ​
 +{
 +    display: none;
 +    visibility: hidden;
 +}
 +</​file>​
This website uses cookies for visitor traffic analysis. By using the website, you agree with storing the cookies on your computer.More information