10 Replies - 384 Views - Last Post: 17 May 2014 - 07:32 AM Rate Topic: -----

#1 jacobTheMechanic  Icon User is offline

  • D.I.C Head

Reputation: 14
  • View blog
  • Posts: 89
  • Joined: 18-September 12

How do I make my GUI look...less crappy.

Posted 16 May 2014 - 10:00 PM

I am building my first GUI to run a production flowline. I have all the components I want in the order and location I want them. The problem is, it looks bad...real bad. How do I style it to look like a somewhat professional looking application?

import java.awt.*;

import javax.swing.*;

import java.awt.event.*;

public class StationOneGUI extends JFrame{
		private static final int WIDTH = 500;
		private static final int HEIGHT = 500;
		static JFrame frmMain;
		static JPanel frmPanel;
		static Container pane;
		static JButton stopStart;
		static JLabel windowID;
		static JLabel engSN;
		static JLabel buildProgBarLabel;
		static JLabel taktProgBarLabel;
		static JLabel currentOPNLabel;
		static JLabel stationStatus;
		static JProgressBar buildProgress;
		static JProgressBar taktProgress;
		static JTextField currentOPN;
		static JTextArea engStatus;
		
		public static void addComponentsToPane(Container pane){
			try{UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());}
			catch(Exception e){}
			
		    GridBagLayout gridbag = new GridBagLayout();
		    pane.setLayout(gridbag);
		    
			GridBagConstraints a = new GridBagConstraints();
			//frmPanel = new JPanel(new GridBagLayout());//INVESTIGATING GRIDBAGLAYOUT MANAGER HERE: http://docs.oracle.com/javase/tutorial/uiswing/layout/gridbag.html
	
			windowID = new JLabel("Station 1"); //to be changed to a method to get station id
			a.fill = GridBagConstraints.HORIZONTAL;
			a.anchor = GridBagConstraints.WEST;
			a.weightx = 1.0;
			a.weighty = 0.0;
			a.gridx = 0;
			a.gridy = 0;
			pane.add(windowID, a);
			
			GridBagConstraints b = new GridBagConstraints();
			engSN = new JLabel("Engine SN: " + "P123456", SwingConstants.RIGHT); //to be changed to a method to get engine sn
			b.fill = GridBagConstraints.HORIZONTAL;
			b.anchor = GridBagConstraints.EAST;
			b.weightx = 1.0;
			b.weighty = 0.0;
			b.gridx = 3;
			b.gridy = 0;
			pane.add(engSN, B)/>;
			
			GridBagConstraints c = new GridBagConstraints();
			buildProgress = new JProgressBar(0, 100);
			c.fill = GridBagConstraints.BOTH;
			c.weightx = 1.0;
			c.weighty = 0.5;
			c.gridwidth = 3;
			c.gridx = 0;
			c.gridy = 1;
			pane.add(buildProgress, c);
			
			GridBagConstraints d = new GridBagConstraints();
			buildProgBarLabel = new JLabel("Station Progress", SwingConstants.CENTER);
			d.fill = GridBagConstraints.HORIZONTAL;
			d.weightx = 1.0;
			d.weighty = 0.5;
			d.gridx = 3;
			d.gridy = 1;
			pane.add(buildProgBarLabel, d);
			
			GridBagConstraints e = new GridBagConstraints();
			taktProgress = new JProgressBar(0, 16);
			//taktProgress.
			e.fill = GridBagConstraints.BOTH;
			e.weightx = 1.0;
			e.weighty = 0.5;
			e.gridwidth = 3;
			e.gridx = 0;
			e.gridy = 2;
			pane.add(taktProgress, e);
			
			GridBagConstraints f = new GridBagConstraints();
			taktProgBarLabel = new JLabel("Station TAKT Progress", SwingConstants.CENTER);
			f.fill = GridBagConstraints.HORIZONTAL;
			f.weightx = 1.0;
			f.weighty = 0.5;
			f.gridx = 3;
			f.gridy = 2;
			pane.add(taktProgBarLabel, f);
			
			GridBagConstraints g = new GridBagConstraints();
			currentOPN = new JTextField("LPT Turbine Mod", SwingConstants.CENTER); //to be changed to a method to get current operation
			g.fill = GridBagConstraints.HORIZONTAL;
			g.weightx = 1.0;
			g.weighty = 0.5;
			g.gridwidth = 3;
			g.gridx = 0;
			g.gridy = 3;
			pane.add(currentOPN, g);
			
			GridBagConstraints h = new GridBagConstraints();
			currentOPNLabel = new JLabel("Current Operation", SwingConstants.CENTER);
			h.fill = GridBagConstraints.HORIZONTAL;
			h.weightx = 1.0;
			h.weighty = 0.5;
			h.gridx = 3;
			h.gridy = 3;
			pane.add(currentOPNLabel, h);
			
			GridBagConstraints i = new GridBagConstraints();
			engStatus = new JTextArea("-CLEAR-"); //to be changed to a method to get station build status
			engStatus.setLineWrap(true);
			engStatus.setWrapStyleWord(true);
			i.gridwidth = 3;
			i.fill = GridBagConstraints.HORIZONTAL;
			i.weightx = 1.0;
			i.gridx = 0;
			i.gridy = 4;
			pane.add(engStatus, i);
			
			GridBagConstraints j = new GridBagConstraints();
			stationStatus = new JLabel("Station Status", SwingConstants.CENTER);
			j.fill = GridBagConstraints.HORIZONTAL;
			j.weightx = 1.0;
			j.weighty = 0.5;
			j.gridx = 3;
			j.gridy = 4;
			pane.add(stationStatus, j);
			
			GridBagConstraints k = new GridBagConstraints();
			stopStart = new JButton("STOP/START");
			k.fill = GridBagConstraints.HORIZONTAL;
			k.weightx = 1.0;
			k.weighty = 0.5;
			k.gridwidth = 2;
			k.gridx = 1;
			k.gridy = 5;
			pane.add(stopStart, k);
			
		}
	    private static void createAndShowGUI() {

	        //Create and set up the window.
	    	frmMain = new JFrame("Station One -BETA-");
	    	frmMain.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

	        //Set up the content pane.
	    	addComponentsToPane(frmMain.getContentPane());
	        
	        //Display the window.
	    	frmMain.pack();
	    	frmMain.setSize(WIDTH, HEIGHT);
	    	frmMain.setVisible(true);
	    }
	    
	    public static void main(String[] args) {
	        //Schedule a job for the event-dispatching thread:
	        //creating and showing this application's GUI.
	        javax.swing.SwingUtilities.invokeLater(new Runnable() {
	            public void run() {
	                createAndShowGUI();
	            }
	        });
	    }
	}
								



It compiles and runs fine (I haven't added any functionality to it just yet, wanted to get the UI right first).

Any help is appreciated.

Is This A Good Question/Topic? 0
  • +

Replies To: How do I make my GUI look...less crappy.

#2 farrell2k  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 838
  • Posts: 2,573
  • Joined: 29-July 11

Re: How do I make my GUI look...less crappy.

Posted 16 May 2014 - 10:20 PM

Won't compile for me. If you want something that you can be fancy with and style with css, try JavaFX.

By the way, what does a professional application look like?
Was This Post Helpful? 0
  • +
  • -

#3 jacobTheMechanic  Icon User is offline

  • D.I.C Head

Reputation: 14
  • View blog
  • Posts: 89
  • Joined: 18-September 12

Re: How do I make my GUI look...less crappy.

Posted 16 May 2014 - 10:24 PM

I running it on eclipse and it works fine. By "professional" I mean that it looks well put together. Mine does not. I'll check out JavaFX. Thanks.
Was This Post Helpful? 0
  • +
  • -

#4 farrell2k  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 838
  • Posts: 2,573
  • Joined: 29-July 11

Re: How do I make my GUI look...less crappy.

Posted 16 May 2014 - 10:37 PM

Doesn't compile. I know what the problem is. Do you? Oh, and yeah, the UI does look like a normal Swing UI - not very pleasing. :)

Exception in thread "AWT-EventQueue-0" java.lang.Error: Unresolved compilation problem:
B cannot be resolved to a variable

at StationOneGUI.addComponentsToPane(StationOneGUI.java:60)
at StationOneGUI.createAndShowGUI(StationOneGUI.java:158)
at StationOneGUI.access$0(StationOneGUI.java:151)
at StationOneGUI$1.run(StationOneGUI.java:171)
at java.awt.event.InvocationEvent.dispatch(Unknown Source)
at java.awt.EventQueue.dispatchEventImpl(Unknown Source)
at java.awt.EventQueue.access$400(Unknown Source)
at java.awt.EventQueue$3.run(Unknown Source)
at java.awt.EventQueue$3.run(Unknown Source)
at java.security.AccessController.doPrivileged(Native Method)
at java.security.ProtectionDomain$1.doIntersectionPrivilege(Unknown Source)
at java.awt.EventQueue.dispatchEvent(Unknown Source)
at java.awt.EventDispatchThread.pumpOneEventForFilters(Unknown Source)
at java.awt.EventDispatchThread.pumpEventsForFilter(Unknown Source)
at java.awt.EventDispatchThread.pumpEventsForHierarchy(Unknown Source)
at java.awt.EventDispatchThread.pumpEvents(Unknown Source)
at java.awt.EventDispatchThread.pumpEvents(Unknown Source)
at java.awt.EventDispatchThread.run(Unknown Source)
Was This Post Helpful? 1
  • +
  • -

#5 jacobTheMechanic  Icon User is offline

  • D.I.C Head

Reputation: 14
  • View blog
  • Posts: 89
  • Joined: 18-September 12

Re: How do I make my GUI look...less crappy.

Posted 16 May 2014 - 11:22 PM

Upper case b instead of lower...got it, thanks. How difficult is javafx to use?
Was This Post Helpful? 1
  • +
  • -

#6 farrell2k  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 838
  • Posts: 2,573
  • Joined: 29-July 11

Re: How do I make my GUI look...less crappy.

Posted 16 May 2014 - 11:39 PM

It's pretty easy, actually. There are a few good starter tutorials in the Java tutorials section here.
Was This Post Helpful? 1
  • +
  • -

#7 astonecipher  Icon User is offline

  • Major DIC Head
  • member icon

Reputation: 667
  • View blog
  • Posts: 2,935
  • Joined: 03-December 12

Re: How do I make my GUI look...less crappy.

Posted 17 May 2014 - 12:03 AM

You would need to investigate user interfaces to get what makes a form more intuitive and pleasing. An artistic approach if you just want "pretty"
Was This Post Helpful? 1
  • +
  • -

#8 jacobTheMechanic  Icon User is offline

  • D.I.C Head

Reputation: 14
  • View blog
  • Posts: 89
  • Joined: 18-September 12

Re: How do I make my GUI look...less crappy.

Posted 17 May 2014 - 12:50 AM

Thanks a lot guys. I'll definitely be using the tutorials.
Was This Post Helpful? 0
  • +
  • -

#9 CasiOo  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1398
  • View blog
  • Posts: 3,094
  • Joined: 05-April 11

Re: How do I make my GUI look...less crappy.

Posted 17 May 2014 - 05:30 AM

JavaFX is more modern, but of course you can still make swing applications look pretty
Not even WPF applications look pretty without putting work into it ;)

It helps having an idea of what it should look like
Do you have an image of what it is supposed to look like?

In most professional applications you see a theme being applied to the whole application
They make use of icons for buttons, the standard components do not look pretty without some custom styling
Apply colors/background colors to your components as well. These colors should be repeated throughout your theme

The main problem is definitely that you have no idea what it is supposed to look like in the first place
Was This Post Helpful? 0
  • +
  • -

#10 jacobTheMechanic  Icon User is offline

  • D.I.C Head

Reputation: 14
  • View blog
  • Posts: 89
  • Joined: 18-September 12

Re: How do I make my GUI look...less crappy.

Posted 17 May 2014 - 06:23 AM

I sketched out what I want it to look like by hand. The first, and most apparent discrepancy is that there's a lot of space between components. I wanted everything but the top two JLabels to be in close proximity. Next, how do I customize the height of the progress bars? How do I shade behind the top two JLabels?

I have the sketch at work. I'll be going in around noon if you are interested in following this thread until then.
Was This Post Helpful? 0
  • +
  • -

#11 farrell2k  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 838
  • Posts: 2,573
  • Joined: 29-July 11

Re: How do I make my GUI look...less crappy.

Posted 17 May 2014 - 07:32 AM

Eh, you could use third party solutions llike java css for styling swing with css, or you could even design your own look and feel for things, but it seems like a giant waste of time to me, especially when you can just do it with javafx in 1/10th the time.

Everyone interested in writing applications that look modern and beautiful should be using javafx.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1