Results 1 to 11 of 11
Like Tree2Likes
  • 1 Post By BinaryDigit09
  • 1 Post By jim829

Thread: How to make a flat GUI design with Java Swing

  1. #1
    Zarah is offline Senior Member
    Join Date
    Mar 2014
    Posts
    286
    Rep Power
    6

    Default How to make a flat GUI design with Java Swing

    Here is an example of a GUI. Is it possible to make this kind of a thing using Java Swing?

    1. Is it possible to have a picture on the entire background of the JFrame, and then other Swing components like buttons, labels etc. sitting on it?
    2. Is it possible to have action listeners behind pictures? In other words, they will behave like buttons: the user clicks on them and they do something.


    How to make a flat GUI design with Java Swing-kvivomainui1.jpg

    Thank you in advance.

  2. #2
    BinaryDigit09 is offline Member
    Join Date
    May 2012
    Posts
    18
    Rep Power
    0

    Default Re: How to make a flat GUI design with Java Swing

    Yes, both of these are quite possible. But not trivial for someone who is new to Java and/or Swing.
    Zarah likes this.

  3. #3
    jim829 is offline Senior Member
    Join Date
    Jan 2013
    Location
    Northern Virginia, United States
    Posts
    6,226
    Rep Power
    14

    Default Re: How to make a flat GUI design with Java Swing

    Quote Originally Posted by Zarah View Post
    Here is an example of a GUI. Is it possible to make this kind of a thing using Java Swing?

    1. Is it possible to have a picture on the entire background of the JFrame, and then other Swing components like buttons, labels etc. sitting on it?
    2. Is it possible to have action listeners behind pictures? In other words, they will behave like buttons: the user clicks on them and they do something.
    Regarding 1. Yes, as been already said. And there have been recent threads (last several months) on the subject.
    Regarding 2. ActionListeners aren't behind anything. They are simply pieces of code which respond to events. Buttons and similar objects
    simply use the action listeners to respond to the event and then do something useful.

    Regards,
    Jim
    Zarah likes this.
    The JavaTM Tutorials | SSCCE | Java Naming Conventions
    Poor planning on your part does not constitute an emergency on my part

  4. #4
    javaStooge is offline Senior Member
    Join Date
    Jan 2014
    Posts
    106
    Rep Power
    0

    Default Re: How to make a flat GUI design with Java Swing

    This seems ssoooo far away!!!

  5. #5
    Zarah is offline Senior Member
    Join Date
    Mar 2014
    Posts
    286
    Rep Power
    6

    Default Re: How to make a flat GUI design with Java Swing

    Quote Originally Posted by javaStooge View Post
    This seems ssoooo far away!!!
    What does that mean?

  6. #6
    kneitzel is offline Senior Member
    Join Date
    Feb 2014
    Posts
    447
    Rep Power
    6

    Default Re: How to make a flat GUI design with Java Swing

    Hi,

    I think it can be build in a quite simple way:
    A) you do not work with standard controls. Instead you simply use a JPanel and inside the paint you draw the picture of your GUI.
    B) you add a mouse listener which checks for mouse clicks.

    You only need the coordinates of your "controls" so you have to check the mouse click coordinates with the areas of your "controls".

    This can be enhanced of course. So on mouse down you change part of the picture. That way you get a visual effect. And on mouse up you change the picture again amd you check the coordinates again. That way you can cancel the action if the mouse is outside of the control ... If you want that logic ....

    Konrad

  7. #7
    Zarah is offline Senior Member
    Join Date
    Mar 2014
    Posts
    286
    Rep Power
    6

    Default Re: How to make a flat GUI design with Java Swing

    Quote Originally Posted by kneitzel View Post
    Hi,

    I think it can be build in a quite simple way:
    A) you do not work with standard controls. Instead you simply use a JPanel and inside the paint you draw the picture of your GUI.
    B) you add a mouse listener which checks for mouse clicks.

    You only need the coordinates of your "controls" so you have to check the mouse click coordinates with the areas of your "controls".

    This can be enhanced of course. So on mouse down you change part of the picture. That way you get a visual effect. And on mouse up you change the picture again amd you check the coordinates again. That way you can cancel the action if the mouse is outside of the control ... If you want that logic ....

    Konrad
    Can it be made using NetBeans GUI Builder?

    I need to make a GUI using NetBeans GUI Builder.
    Last edited by Zarah; 04-27-2014 at 11:20 PM.

  8. #8
    kneitzel is offline Senior Member
    Join Date
    Feb 2014
    Posts
    447
    Rep Power
    6

    Default Re: How to make a flat GUI design with Java Swing

    Hi,

    I don't know the designer of netbeans, but it is quite easy to write the code and there is no need for a designer because you can simply draw the GUI in pictures.

    And all steps can be searched in Google:
    - jpanel background picture is one search you might want to look up.
    - load image Java could be another search
    - mouselistener jpanel could be another search
    - mouseevent Java another one - getX/getY/getButton should be the important methods.
    You just need the boxes where you want to have your controls e.g. upper left corner x1,y1 and lower right is x2,y2 - and click was on xm and my:
    If (( xm>x1) && (xm<x2) && (ym>y1) && (ym<y2))

    Was this easier to understand? Core steps are:
    Draw picture of your GUI.
    Display picture of your GUI
    Listen for mouse events and react on them ....

    Konrad

  9. #9
    Zarah is offline Senior Member
    Join Date
    Mar 2014
    Posts
    286
    Rep Power
    6

    Default Re: How to make a flat GUI design with Java Swing

    This is what I understand. Please tell me if I am right:

    1. Design a picture of the background in a third party software (MS Paint, Adobe Photoshop etc.)
    2. Display that picture on a JPanel.
    3. Mark specific square areas where I have drawn buttons as kinda sensors. The user will click on those areas, and I'll mouse click-listeners which will perform the function.

    The function:-
    I want to display another panel kinda thing which has further controls and displays further information.
    How to make a flat GUI design with Java Swing-presentation1.jpg

    Suppose that the user has clicked the top icon, then something like the white translucent component opens, the user selects one option from the left pane, and its details display on the right pane. Possible?
    Last edited by Zarah; 04-28-2014 at 12:47 AM.

  10. #10
    kneitzel is offline Senior Member
    Join Date
    Feb 2014
    Posts
    447
    Rep Power
    6

    Default Re: How to make a flat GUI design with Java Swing

    Hi Zarah,

    it is possible in my eyes. I found this quite interesting and I just started to investigate a little bit. From my current research I had to find out, that the design could be changed to be more flexible.

    You could create a PicturePanel (or whatever you want to name it) which derives from JPanel and implements MouseListener.
    Areas would be other PicturePanels shown on top of it.
    A PicturePanel has a main picture (which is normaly shown as background picture) and optional pictures that should be shown when the mouse is over the panel or when the mouse is pressed.
    And the important events you are interested in are the MouseClicked events which already exist.

    Maybe I find some more time to work on this - in that case I might post my results. But I cannot promise that because I am under quite some load right now.

    With kind regards,

    Konrad

  11. #11
    kneitzel is offline Senior Member
    Join Date
    Feb 2014
    Posts
    447
    Rep Power
    6

    Default Re: How to make a flat GUI design with Java Swing

    Hi Zarah,

    I just finished a small and simple class which could be used for some basic GUI stuff based on pictures. But this is just a quick and dirty solution and I am not a swing expert so there might even be much better ways to do something like your GUI ideas.
    But I doubt that I will find the time to build a better solution so all I can provide is my quick and dirty PicturePanel class.

    It is simply extending JPanel, holds 3 pictures inside. These pictures are drawn completly on the panel (so it is scaled if required).
    - One picture is the normal background image. This is shown if the mouse is not on top of the panel or if the mouse button is not pressed.
    - One picture is printed, when the mouse is on top of the panel. This could be used for additional user feedback.
    - The last picture is shown when the user presses the first button. (So you could build your own kind of click effects
    And it implements an addActionListener as a button.

    So it could be used to create a GUI with simple pictures. To have multiple areas you should simply add multiple PicturePanels.

    Java Code:
    package de.kneitzel.swing;
    
    import java.awt.Dimension;
    import java.awt.Graphics;
    import java.awt.Image;
    import java.awt.MouseInfo;
    import java.awt.event.ActionEvent;
    import java.awt.event.ActionListener;
    import java.awt.event.MouseEvent;
    import java.awt.event.MouseListener;
    import java.util.ArrayList;
    
    import javax.swing.JPanel;
    
    /**
     * PicturePanel shows a picture in the background and listens to mouse events.
     * Areas can be created where a mouse click causes an event to be fired.
     * 
     * @author Konrad Neitzel <konrad@kneitzel.de>
     *
     */
    public class PicturePanel extends JPanel implements MouseListener {
    
    	/**
    	 * Version information for serialization. 
    	 */
    	private static final long serialVersionUID = 1L;
    
    	private Image mainImage = null;
    	private Image mouseOverImage = null;
    	private Image mouseDownImage = null;
    	private Image backgroundImage = null;
    
    	private boolean mouseDown = false;
    	private boolean mouseOverPanel = false;
    
    	private ArrayList<ActionListener> actionListeners;
    
    	int id;
    	String command;
    	
    	public PicturePanel() {
    		super();
    		actionListeners = new ArrayList<ActionListener>();
    		this.addMouseListener(this);
    	}
    
    	/**
    	 * Add an action listener to fire when the Panel is clicked.
    	 *  
    	 * @param actionListener The action listener to add
    	 */
    	public void addActionListener(ActionListener actionListener) {
    		actionListeners.add(actionListener);
    	}
    
    	private void panelClicked() {
    		for (ActionListener listener : actionListeners) {
    			listener.actionPerformed(new ActionEvent(this, id, command));
    		}
    	}
    
    	/**
    	 * Sets the main image to be shown inside the panel.
    	 * 
    	 * @param path
    	 */
    	public void setMainImage(Image image) {
    		mainImage = image;
    		setBackgroundImage();
    	}
    
    	public void setMouseOverImage(Image image) {
    		mouseOverImage = image;
    		setBackgroundImage();
    	}
    
    	public void setMouseDownImage(Image image) {
    		mouseDownImage = image;
    		setBackgroundImage();
    	}
    
    	public void setId(int id) {
    		this.id = id;
    	}
    	
    	public void setCommand(String command) {
    		this.command = command;
    	}
    	
    	@Override
    	public void mouseClicked(MouseEvent e) {
    		if (e.getButton() == MouseEvent.BUTTON1) {
    			panelClicked();
    		}
    	}
    
    	@Override
    	public void mousePressed(MouseEvent e) {
    		if (e.getButton() == MouseEvent.BUTTON1) {
    			mouseDown = true;
    			setBackgroundImage();
    		}
    	}
    
    	@Override
    	public void mouseReleased(MouseEvent e) {
    		if (e.getButton() == MouseEvent.BUTTON1) {
    			mouseDown = false;
    			setBackgroundImage();
    		}
    	}
    
    	@Override
    	public void mouseEntered(MouseEvent e) {
    		System.out.println("Mouse entered ..");
    		mouseOverPanel = true;
    		setBackgroundImage();
    	}
    
    	@Override
    	public void mouseExited(MouseEvent e) {
    		System.out.println("Mouse left ..");
    		mouseOverPanel = false;
    		setBackgroundImage();
    	}
    
    	public void setBackgroundImage() {
    		if (mouseDown && mouseDownImage != null) {
    			backgroundImage =  mouseDownImage;
    		} else if (mouseOverPanel && mouseOverImage != null) {
    			backgroundImage = mouseOverImage;
    		} else {
    			backgroundImage = mainImage;
    		}
    
    		this.repaint();
    	}
    
    	@Override
    	protected void paintComponent(Graphics g) {
    		super.paintComponent(g);
    
    		// When we have nothing to print then return.
    		if (backgroundImage == null) {
    			return;
    		}
    
    		// Get sizes.
    		Dimension panelSize  = this.getSize();
    		Dimension picSize = new Dimension(backgroundImage.getHeight(null), backgroundImage.getHeight(null));
    
    		g.drawImage(backgroundImage, 0, 0, panelSize.width, panelSize.height, 0, 0, picSize.width, picSize.height, null);
    	}
    }
    I hope that this was of some interest for you.

    With kind regards,

    Konrad

Similar Threads

  1. Best way to make this design
    By tcms in forum AWT / Swing
    Replies: 6
    Last Post: 11-03-2013, 04:47 PM
  2. Flat File Database for Java
    By skania in forum New To Java
    Replies: 4
    Last Post: 06-17-2013, 06:13 PM
  3. Replies: 0
    Last Post: 01-29-2013, 09:32 PM
  4. Replies: 11
    Last Post: 05-08-2010, 04:52 AM
  5. Swing design patterns
    By beezerbutt in forum AWT / Swing
    Replies: 1
    Last Post: 02-12-2009, 07:16 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •