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 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:
Backgrounds:
Part 2: http://forum.codecal...g-part-2-a.html
Attached Thumbnails
Edited by lethalwire, 22 April 2012 - 08:22 AM.
Answered
