Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
* * * * * 1 votes

Java Login Dialog [Part 1]

setpreferredsize login

  • Please log in to reply
9 replies to this topic

#1 lethalwire

lethalwire

    while(false){ ... }

  • Senior Member
  • PipPipPipPipPipPip
  • 766 posts
  • Programming Language:C, Java, PHP, JavaScript
  • Learning:PHP

Posted 31 December 2011 - 01:45 PM

Objectives:
This tutorial focuses on creating a customized login dialog.

Prerequisites:
A fair amount of knowledge of Java is expected before beginning this tutorial.
Some intermediate level concepts that you'll see are:
  • Extending other JComponents (JPanel, JDialog)
  • Overriding methods
  • The final keyword
  • The static keyword
  • Use of Image and ImageIcon
  • Use of primitive arrays[]
  • ActionListeners
  • JComponents
Step 1 - Sketch Out the Idea
sketchOfLoginDialog.png

Step 2 - Decide What Classes Are Relevant For Your Idea
  • JPanel - Used for the custom background image
  • JDialog - Used to create the Dialog Window & will hold the UI components
  • JButton - Login/Cancel buttons
  • JLabel - Used to Label the text fields
  • JTextField - A text area to show the username
  • JPasswordField - A special text field used to mask a password

Step 3 - Programming the JPanel - BackgroundJPanel.java

Extending JPanel and overriding JPanel's paintComponent(Graphics g) should give us the effect we need to fulfill our custom background.
public class BackgroundJPanel extends JPanel {

In the constructor, we'll take a String parameter that gives us a url pointing to the background image.
We use an Image object to store the image data and use this data to draw the image onto the JPanel.
	private final Image backgroundImage;
	
	public BackgroundJPanel(String imagePath) {
		super();
		backgroundImage = new ImageIcon(imagePath).getImage();
		if(getBackgroundImage() != null)
			setPreferredSize(new Dimension(backgroundImage.getWidth(null), backgroundImage.getHeight(null)));
	}

getbackgroundImage(...) is a simple getter method that is defined as follows:
    private Image getBackgroundImage() {
	return backgroundImage;
    }


Now, we'll override paintComponent(Graphics g) method and draw the background image
	public void paintComponent(Graphics g) {
		super.paintComponent(g);
		
		Image img = getBackgroundImage();
		if(img != null){
			g.drawImage(img, 0, 0, null);
		}
	}

Step 4 - Programming the Dialog - PasswordJDialog.java

Extending JDialog will give us the capabilities of existing JDialogs. On top of this, we'll add our own implementation to the dialog to create the custom login look.
public final class PasswordJDialog extends JDialog {

The only class variable we have is a
private final JPanel backgroundPanel;
We'll add the textfields, labels, and buttons to this panel.

In the constructor, we initialize the backgroundPanel and tell the panel where to find the background image.
Next, we initialize the components needed to fulfill the idea. (JTextAreas, JButtons, JLabels, etc.)
Next, we add the backgroundPanel to the dialog then display the dialog.
	private PasswordJDialog() {
		backgroundPanel = new BackgroundJPanel("http://forum.codecall.net/images/backgrounds/login.png");
		initComponents();
		this.setContentPane(backgroundPanel);
		this.setUndecorated(true);
		this.pack();
		this.setLocationRelativeTo(null);
		this.setVisible(true);
	}

The only undefined portion of code thus far is the initComponents() method.
In the body of this method is where the construction of the UI takes place.

The code is pretty straight forward. We declare the components that we stated in step 2 and initialize them.
The componentPanel JPanel is used to hold the components in a tighter area. Note that this panel is also uses a GridLayout to place the components into a 3x3 grid.

componentPanel.setOpaque(false) is called to make the background of this JPanel completely transparent.
After all components have been added to the componentPanel; the componentPanel is added to the backgroundPanel.

	private void initComponents() {
		JButton[] buttons = new JButton[2];
		JTextField usernameField = new JTextField(10);
		JPasswordField passwordField = new JPasswordField(10);
		passwordField.setEchoChar('*');
		JLabel[] labels =new JLabel[2];
		
		buttons[0] = new JButton("Login");
		buttons[1] = new JButton("Cancel");
		labels[0] = new JLabel("Username: ");
		labels[0].setHorizontalAlignment(JLabel.CENTER);
		labels[1] = new JLabel("Password: ");
		labels[1].setHorizontalAlignment(JLabel.CENTER);
		
		buttons[0].addActionListener( new ActionListener() {
			public void actionPerformed(ActionEvent e) {
				// your turn
			}
		});

		buttons[1].addActionListener( new ActionListener() {
			public void actionPerformed(ActionEvent e) {
				close();
			}
		});
		
		JPanel componentPanel = new JPanel();
		componentPanel.setPreferredSize(new Dimension(250,100));
		componentPanel.setOpaque(false);
		componentPanel.setLayout(new GridLayout(3, 3, 5, 5));
		componentPanel.add(labels[0]);
		componentPanel.add(usernameField);
		componentPanel.add(labels[1]);
		componentPanel.add(passwordField);
		componentPanel.add(buttons[0]);
		componentPanel.add(buttons[1]);
		
		backgroundPanel.add(componentPanel);
	}

The undefined method close() is simple to understand and is as follows:
protected void close() {
		this.dispose();
	}

In order to show this dialog, we create the following static method:
public static void showPasswordDialog() {
		new PasswordJDialog();
	}
To see your dialog, you'll simply make a call that looks like:
PasswordJDialog.showPasswordDialog();

Result:
result.png

Backgrounds:
login3.png

Part 2: http://forum.codecal...g-part-2-a.html

Attached Thumbnails

  • login2.png
  • login.png

Edited by lethalwire, 22 April 2012 - 08:22 AM.

  • 2

#2 Shiina

Shiina

    CC Newcomer

  • Member
  • PipPip
  • 19 posts
  • Programming Language:Java
  • Learning:C#, Others

Posted 17 April 2012 - 12:06 AM

this.dispose() is similar to this.close() ?

  • 0

#3 papabear

papabear

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 472 posts
  • Location:DarkSide

Posted 17 April 2012 - 05:29 AM

this.dispose() is similar to this.close() ?


Yes they actually do the same thing :) they simply releases all of the native resources and close a form but sometimes most users are having some problem regarding this dispose() function.


A very well written tutorial lethalwire +rep :)
  • 0
Life has no CTRL+Z
Never Forget To HIT "LIKE" If I Helped

#4 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 17 April 2012 - 05:32 AM

The close() method is a method he wrote himself,
protected void close() {
	    this.dispose();
}
I think it's pretty clear it's the same whether you use close() or dispose()
  • 1

#5 lethalwire

lethalwire

    while(false){ ... }

  • Senior Member
  • PipPipPipPipPipPip
  • 766 posts
  • Programming Language:C, Java, PHP, JavaScript
  • Learning:PHP

Posted 17 April 2012 - 06:23 PM

JDialog doesn't have a method called close().

The close() method is one I created that just disposes the Dialog window.
  • 0

#6 An Alien

An Alien

    CC Addict

  • Senior Member
  • PipPipPipPipPip
  • 323 posts
  • Programming Language:Java
  • Learning:C, Java, PHP, Python, JavaScript, Lisp, Transact-SQL, Others

Posted 17 April 2012 - 06:44 PM

Looks like a very nice tutorial. Once I get a little more used to the API, I will start following this tutorial unless you think I should start of with a simpler one. You already know the level I'm at in Java.
  • 0

#7 lethalwire

lethalwire

    while(false){ ... }

  • Senior Member
  • PipPipPipPipPipPip
  • 766 posts
  • Programming Language:C, Java, PHP, JavaScript
  • Learning:PHP

Posted 17 April 2012 - 07:24 PM

Long time no see Alien. Try the tutorial. It should be easy to follow. If you have any questions, you know where to ask your questions. ;)
  • 1

#8 An Alien

An Alien

    CC Addict

  • Senior Member
  • PipPipPipPipPip
  • 323 posts
  • Programming Language:Java
  • Learning:C, Java, PHP, Python, JavaScript, Lisp, Transact-SQL, Others

Posted 17 April 2012 - 07:26 PM

Will do, thanks.

Edit: I think there's a mistake in step 3 in the constructor for BackgroundJPanel(). See the if statement:
				if(getBackgroundImage() != null)
						setPreferredSize(new Dimension(backgroundImage.getWidth(null), backgroundImage.getHeight(null)));
Eclipse says it's undefined. I'm thinking this is supposed to be "backgroundImage != null" instead?
  • 0

#9 lethalwire

lethalwire

    while(false){ ... }

  • Senior Member
  • PipPipPipPipPipPip
  • 766 posts
  • Programming Language:C, Java, PHP, JavaScript
  • Learning:PHP

Posted 22 April 2012 - 08:20 AM

I forgot to include the method in the tutorial. I'll add it.

You can view the full source of all files by following the Part 2 link.

Thanks for the note.
  • 0

#10 An Alien

An Alien

    CC Addict

  • Senior Member
  • PipPipPipPipPip
  • 323 posts
  • Programming Language:Java
  • Learning:C, Java, PHP, Python, JavaScript, Lisp, Transact-SQL, Others

Posted 22 April 2012 - 09:30 AM

oh okay. Thanks for updating it.
  • 0





Also tagged with one or more of these keywords: setpreferredsize, login