[SWT/RCP] To create a login screen that looks similar to the splash

* UPDATED with snippet to integrate with swt app.
This article is an extension of the script I found at eclipsezone. I don’t remember the author of the original script. The original script’s output was to create a keyhole model dialog with transparency. I had modified it a bit to suite my purpose. I am posting it here in one piece so, that people can use them easily.

The first step involved in this is to create a splash screen. For the splash screen, take into consideration the standard screen resolution used your target users. This is to make sure that your splash screen looks sexy and compact. In this example I am using the size – 388×187.

Once we are done with that, we need to create a background image for the login dialog. Here, we need to make sure that both the splash screen and the login image are similar to look at. But not identical. If we login screen is too identical to the splash, the user will not even realize the login prompt has appeared. Its likely to confuse the user and we don’t want to do that.

Now, that we have the graphics part of it ready. Lets get into the coding part. So, we create a login screen that looks as if it’s loaded on the splash screen itself. Let call this – LoginDialog.java; To put it in the simplest words we draw a rectangle and put some controls on it. I have commented the code wherever possible.

LoginDialog.java

[CODE]

import org.eclipse.swt.SWT;
import org.eclipse.swt.custom.CLabel;
import org.eclipse.swt.graphics.*;
import org.eclipse.swt.layout.FillLayout;
import org.eclipse.swt.layout.FormAttachment;
import org.eclipse.swt.layout.FormData;
import org.eclipse.swt.layout.FormLayout;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.layout.RowData;
import org.eclipse.swt.layout.RowLayout;
import org.eclipse.swt.widgets.*;

import com.swtdesigner.SWTResourceManager;

public class LoginDialog {

private static Text txt_Password;
private static Text txt_Username;
private Display display;

public LoginDialog(Display display) {
this.display = display;
}

public void createContents() {
//Shell must be created with style SWT.NO_TRIM
final Shell shell = new Shell(display, SWT.NO_TRIM | SWT.ON_TOP);
final FillLayout fillLayout = new FillLayout();
fillLayout.marginHeight = 1;
shell.setLayout(fillLayout);

//Create a composite with grid layout.
final Composite composite = new Composite(shell, SWT.NONE);
final GridLayout gridLayout = new GridLayout();
gridLayout.numColumns = 2;
gridLayout.marginHeight = 0;
gridLayout.verticalSpacing = 0;
gridLayout.marginWidth = 0;
gridLayout.horizontalSpacing = 0;
composite.setLayout(gridLayout);

//Setting the background of the composite
//with the image background for login dialog
final Label img_Label = new Label(composite, SWT.NONE);
img_Label.setLayoutData(new GridData(195, 181));
final Image img = new Image(display, “img_login.png”);
img_Label.setImage(img);

//Creating the composite which will contain
//the login related widgets
final Composite cmp_Login = new Composite(composite, SWT.NONE);
final RowLayout rowLayout = new RowLayout();
rowLayout.fill = true;
cmp_Login.setLayout(rowLayout);
final GridData gridData = new GridData(GridData.FILL, GridData.FILL, false, false);
gridData.widthHint = 196;
cmp_Login.setLayoutData(gridData);

//Label for the heading
final CLabel clbl_UserLogin = new CLabel(cmp_Login, SWT.NONE);
final RowData rowData = new RowData();
rowData.width = 180;
clbl_UserLogin.setLayoutData(rowData);
clbl_UserLogin.setText(“User Login”);

//Label for the username
final CLabel clbl_Username = new CLabel(cmp_Login, SWT.NONE);
final RowData rowData_1 = new RowData();
rowData_1.width = 180;
clbl_Username.setLayoutData(rowData_1);
clbl_Username.setText(“Username”);

//Textfield for the username
txt_Username = new Text(cmp_Login, SWT.BORDER);
final RowData rowData_2 = new RowData();
rowData_2.width = 170;
txt_Username.setLayoutData(rowData_2);

//Label for the password
final CLabel clbl_Password = new CLabel(cmp_Login, SWT.NONE);
final RowData rowData_3 = new RowData();
rowData_3.width = 180;
clbl_Password.setLayoutData(rowData_3);
clbl_Password.setText(“Password”);

//Textfield for the password
txt_Password = new Text(cmp_Login, SWT.BORDER);
final RowData rowData_4 = new RowData();
rowData_4.width = 170;
txt_Password.setLayoutData(rowData_4);
txt_Password.setEchoChar(‘*’);

//Composite to hold button as I want the
//button to be positioned to my choice.
final Composite cmp_ButtonBar = new Composite(cmp_Login, SWT.NONE);
final RowData rowData_5 = new RowData();
rowData_5.height = 38;
rowData_5.width = 185;
cmp_ButtonBar.setLayoutData(rowData_5);
cmp_ButtonBar.setLayout(new FormLayout());

//Button for login
final Button btn_login = new Button(cmp_ButtonBar, SWT.FLAT);
final FormData formData = new FormData();
formData.bottom = new FormAttachment(0, 28);
formData.top = new FormAttachment(0, 5);
formData.right = new FormAttachment(100, -3);
formData.left = new FormAttachment(100, -40);
btn_login.setLayoutData(formData);
btn_login.setText(“Login”);

//Adding CLOSE action to this button.
btn_login.addListener(SWT.Selection, new Listener() {

public void handleEvent(Event e) {
shell.close();
//In your case, you might wish
//to call the authentication method.
}
});

//Label for copyright info
final CLabel clbl_Message = new CLabel(cmp_Login, SWT.NONE);
clbl_Message.setAlignment(SWT.RIGHT);
final RowData rowData_6 = new RowData();
rowData_6.width = 188;
clbl_Message.setLayoutData(rowData_6);
clbl_Message.setText(“My Custom Login Screen”);

//Drawing a region which will
//form the base of the login
Region region = new Region();
Rectangle pixel = new Rectangle(1, 1, 388, 180);
region.add(pixel);
shell.setRegion(region);

//Adding ability to move shell around
Listener l = new Listener() {
Point origin;
public void handleEvent(Event e) {
switch (e.type) {
case SWT.MouseDown:
origin = new Point(e.x, e.y);
break;
case SWT.MouseUp:
origin = null;
break;
case SWT.MouseMove:
if (origin != null) {
Point p = display.map(shell, null, e.x, e.y);
shell.setLocation(p.x – origin.x, p.y – origin.y);
}
break;
}
}
};

//Adding the listeners
//to all visible components
composite.addListener(SWT.MouseDown, l);
composite.addListener(SWT.MouseUp, l);
composite.addListener(SWT.MouseMove, l);

img_Label.addListener(SWT.MouseDown, l);
img_Label.addListener(SWT.MouseUp, l);
img_Label.addListener(SWT.MouseMove, l);

//Positioning in the center of the screen.
//This for the 1024 resolution only. Later,
//I plan to make generic so, that it takes
//the resolution and finds the center of
//the screen.
shell.setLocation(320,290);
shell.open();

while (!shell.isDisposed()) {
if (!display.readAndDispatch())
display.sleep();
}
region.dispose();
}

}

[/CODE]

That’s it for the login screen. Now, we have to call it during the startup of our application right after the splash screen. For this, we edit the Application.java file.

Application.java

[CODE]

import java.util.Hashtable;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.naming.NamingException;
import org.eclipse.core.runtime.IPlatformRunnable;
import org.eclipse.core.runtime.Platform;
import org.eclipse.jface.preference.IPreferenceStore;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;
import org.eclipse.ui.PlatformUI;

import com.compname.prodname.modulename.dialogs.LoginDialog;

public class Application implements IPlatformRunnable {

public Object run(Object args) throws Exception {
Display display = PlatformUI.createDisplay();

try {
if (authenticate(display)) {
int returnCode = PlatformUI.createAndRunWorkbench(display, new ApplicationWorkbenchAdvisor());
return (returnCode == PlatformUI.RETURN_RESTART)
? IPlatformRunnable.EXIT_RESTART
: IPlatformRunnable.EXIT_OK;
}

Platform.endSplash();
return IPlatformRunnable.EXIT_OK;

} finally {
display.dispose();
}
}

private boolean authenticate(Display display) {
LoginDialog loginDialog = new LoginDialog(display);
loginDialog.createContents();
return true;
}

}

[/CODE]