Login Screen

A login screen is typically otherwise empty, but has a header with a title or a logo, a centered login box, and a footer.

We only consider the overall screen layout and leave the layout of the login box for another article.

(Notice that, in the screenshot above, the title is part of the title image and is therefore off-center.)

The screen is split in three parts vertically, each taking 1/3 of the screen height.

• The header is aligned left and centered vertically. It could be aligned top-left or centered in both directions as well.
• The login box is centered in both directions.
• The footer is at the bottom of the screen, aligned left.

With Layout Components

- To Be Done -

With Custom Layout

You will need to have the HTML for the custom layout located in WebContent/ITMILL/themes/<themename>/layouts/loginscreen.html.

<table width="100%" height="100%">
        <!-- Header -->
	<tr height="33%">
		<td><div location="titleimage"/></td>
	</tr>
	<tr height="33%">
		<td align="center"><div location="loginbox"/></td>
	</tr>
        <!-- Footer -->
	<tr height="33%" valign="bottom">
		<td>Powered by <a href="http://www.itmill.com/">IT Mill Toolkit</a></td>
	</tr>
</table>

You set the theme for the application with a the setTheme() method, for example, as follows:

public class MembershipApplication extends Application {
    Window mainWindow = new Window ("Membership Database");

    public void init() {
        setTheme("membership");

        ...

The layout and other components are created as described below.

Solution #1: Custom Layout as the Root Layout

The simplest case is to have the custom layout as the root layout of the (main) window.

// Create the custom layout located in
// WebContent/ITMILL/themes/<themename>/layouts/loginscreen.html.
CustomLayout custom = new CustomLayout("loginscreen");

// Set the custom layout as the root layout of the window.
mainWindow.setLayout(custom);

(...continues...)

Solution #2: Inside a Root Layout

You could have some other layout as the root layout as well. In such a case, you must use setSizeFull() to have the root layout fill the entire window or otherwise it could shrink in either direction.

// A root layout for the window. It could be an OrderedLayout as well,
// but here we use an ExpandLayout.
ExpandLayout rootLayout = new ExpandLayout();

// The root layout must be maximised to allow the custom layout
// to fill the entire window.
rootLayout.setSizeFull();

// Set the root layout as the layout of the window.
mainWindow.setLayout(rootLayout);

// Create the custom layout located in
// WebContent/ITMILL/themes/<themename>/layouts/loginscreen.html.
CustomLayout custom = new CustomLayout("loginscreen");
rootLayout.addComponent(custom);

(...continues...)

Filling the Layout

The HTML template of the custom layout had "titleimage" and "loginbox" placeholders, which you can fill as follows:

(...continues...)

// Get the title image from a theme resource. Other option would be to
// reference it directly from the custom layout.
ThemeResource titleimage = new ThemeResource("layouts/img/membership-title.png");
custom.addComponent(new Embedded("", titleimage), "titleimage");

// Create and place the login box.
Panel panel = new Panel ("Login);
panel.setWidth("400px");
custom.addComponent(panel, "loginbox");