Customize the Login dialog

Information about development with Vaadin UI.

Customize the Login dialog

Postby Development@SIB » Fri Feb 12, 2016 10:46 am

The standard login dialog looks like this one:

vaadin_login.png
vaadin_login.png (10.92 KiB) Viewed 1385 times


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.

Syntax: [ Download ] [ Hide ]
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);
        }
}
 

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:

Code: Select all
<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>


The result will look like this dialog:

vaadin_login_styled.png
vaadin_login_styled.png (24.78 KiB) Viewed 1385 times


It's very easy to change the layout with source code but it's also possible to use css for customization:

vaadin_login_css.png
vaadin_login_css.png (8.12 KiB) Viewed 1385 times


We changed following styles in an external css file:
Syntax: [ Download ] [ Hide ]
.jvx .loginwindow .v-label.welcome
{
    font-size: 23px;
    color: #888888;
    width: 100%;
    text-align: center;
}

.jvx .loginwindow .v-label.info
{
    display: none;
    visibility: hidden;
}
 
User avatar
Development@SIB
 
Posts: 311
Joined: Mon Sep 28, 2009 1:54 pm

Return to Documentation