# gui problem



## hhm136 (7. Mai 2014)

hi guys 
i try to make my rograme similar to the following pic and i couldn't 

i use many panel and different Layout but could not be able to make as the photo 
any advice ? ;(


----------



## Gucky (7. Mai 2014)

Hey hhm136,
this is a german speaking forum but I will try to help you.

The two parts on the left are both BorderLayout and the one on the right ist, I think, GroupLayout. But I don't know how to reproduce the one on top.


----------



## kaoZ (8. Mai 2014)

To solve your Problem u can use a JSplitPane as Container, on the left side add a Jpanel with BoxLayout, and two Jpanel with BorderLayout to them.

On the right side use a  GridBagLayout to get this Look.

Instead off a JSplitPane you can use another GridBagLayout.

[EDIT]in 5 hours when im back home,i try to show you an example.[/EDIT]


----------



## kaoZ (8. Mai 2014)

so finally , here is a raw example of this layout, but youre able to see, that you can use different Layoutmanagers, and Container which include another Container to get the layout you want.

edit: there are many other ways to get such a layout !


```
package tests;

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.Insets;

import javax.swing.BorderFactory;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;

public class SimpleExample extends JFrame{
	private static final long serialVersionUID = 1L;
	
	JPanel left;
	JPanel right;
	
	final Dimension frameDim = new Dimension(400,200);
	
	public SimpleExample() {
		setSize(frameDim);
		setLocationRelativeTo(null);
		setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
		
		this.left = createLeftComponent();
		this.right = createRightComponent();
		
		addComponents();
		
	}
	
	private JPanel createLeftComponent(){
		JPanel panel = new JPanel();
		panel.setLayout(new BorderLayout());
		panel.setPreferredSize(new Dimension(150, 0));
		panel.setBorder(BorderFactory.createMatteBorder(0, 0, 0, 1, Color.LIGHT_GRAY));
		
		JPanel upper = new JPanel(new BorderLayout());
		upper.setPreferredSize(new Dimension(0,100));
		upper.setBorder(BorderFactory.createMatteBorder(0, 0, 1, 0, Color.LIGHT_GRAY));
		
		JPanel lower = new JPanel(new BorderLayout());
		lower.setPreferredSize(new Dimension(0,100));
		
		
		 panel.add(BorderLayout.PAGE_START, upper);
		 panel.add(BorderLayout.PAGE_END, lower);
		
		return panel;
	}
	
	private JPanel createRightComponent(){
		JPanel panel = new JPanel(new GridBagLayout());
		
		GridBagConstraints g = new GridBagConstraints();
		
		JLabel l1 = new JLabel("Label 1 :");
		JLabel l2 = new JLabel("Label 2 :");
		
		JTextField f1 = new JTextField();
		JTextField f2 = new JTextField();
		
		f1.setPreferredSize(new Dimension(120,25));
		f2.setPreferredSize(new Dimension(120,25));
		
		g.insets = new Insets(5, 5, 5, 5);
		
		g.gridx = 0;
		g.gridy = 0;
		panel.add(l1, g);
		
		g.gridx = 1;
		g.gridy = 0;
		panel.add(f1, g);
		
		g.gridx = 0;
		g.gridy = 1;
		panel.add(l2, g);
		
		g.gridx = 1;
		g.gridy = 1;
		panel.add(f2, g);
		
		return panel;
	}
	
	private void addComponents(){
		this.add(BorderLayout.LINE_START, left);
		this.add(BorderLayout.CENTER, right);
	}
	
	public static void main(String[] args) {
		new SimpleExample().setVisible(true);
	}
	
}
```

so, here is a screenshot :


----------



## hhm136 (8. Mai 2014)

thank you very match kaoZ and Gucky
i don't know how to thank you kaoZ 
i really appreciate that  :wink:


----------



## kaoZ (8. Mai 2014)

If you want to show a Digital Clock like in the original :

try something like this:


```
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;

public class JTimer extends JPanel{
	private static final long serialVersionUID = 1L;

	final JLabel label;
	final SimpleDateFormat f = new SimpleDateFormat("HH:mm:ss");
	
	public JTimer() {
		setSize(150,300);
		label = new JLabel();
		
		this.add(label);
		
		new Thread(){
			@Override
			public void run(){
				while (true) {
					label.setText(String.valueOf(f.format(new Date())));
					try {
						Thread.sleep(1000);
					} catch (Exception e) {
						// TODO: handle exception
					}
				}
			}
		}.start();
	}

	
	public static void main(String[] args) {
		JFrame f = new JFrame();
		f.add(new JTimer());
		f.pack();
		f.setVisible(true);
	}
}
```


----------



## hhm136 (11. Mai 2014)

when i run my program the analog clock does not work propely there is someting wrong 

run my code 
i see if could help me to fix it 
also the buttom that change the digital clock from 24 to 12 Am\Pm dose not work

the main class

```
import java.awt.event.*;
import java.awt.*;
import javax.swing.*;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.swing.Timer;



public class s201068380 extends JFrame implements ActionListener  {



   JFrame frame = new JFrame("Java Alarm Clock");
        JPanel left;
        JPanel right;
		 JButton b1,b2;
		  JTextField f1, f2, f3;
		  JPanel lower;
		  DigitalclockAM dcla;
		  Digitalclock dcl;
		 int s = 0 ;
		 int os = 0 ;
		 int h;
		int m;



        final Dimension frameDim = new Dimension(700,400);


JMenu Clock = new JMenu("Clock");
	JMenuItem Chdate = new JMenuItem("Change date");
	JMenuItem Chtime= new JMenuItem("Change time ");


JMenu Alarm = new JMenu("Alarm");

	JMenuItem ChAlarmt = new JMenuItem("Change Alarm Time");
	JMenuItem ChAlarms = new JMenuItem("Change Alarm Sound ");


JMenu Help = new JMenu("Help");
	JMenuItem Manual = new JMenuItem("Manual");

JMenuBar bar = new JMenuBar();




	public s201068380()
	{
		super("Java Alarm Clock");
		    setSize(frameDim);
            setLocationRelativeTo(null);
            setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);

            this.left = createLeftComponent();
            this.right = createRightComponent();

            addComponents();

		setJMenuBar(bar);

		Clock.add(Chdate);
		Clock.add(Chtime);
		bar.add(Clock);


		Alarm.add(ChAlarmt);
		Alarm.add(ChAlarms);
		bar.add(Alarm);



		Help.add(Manual);
		bar.add(Help);



		Chdate.addActionListener(this);
		Chtime.addActionListener(this);
		ChAlarmt.addActionListener(this);
		ChAlarms.addActionListener(this);
		Manual.addActionListener(this);
		b1.addActionListener(this);
		b2.addActionListener(this);


            setVisible(true);
	}
	 private JPanel createLeftComponent(){
            JPanel panel = new JPanel();
            panel.setLayout(new BorderLayout());
            panel.setPreferredSize(new Dimension(300, 0));
            panel.setBorder(BorderFactory.createMatteBorder(0, 0, 0, 1, Color.LIGHT_GRAY));

            JPanel upper = new JPanel(new BorderLayout());
            upper.setPreferredSize(new Dimension(0,250));
            upper.setBorder(BorderFactory.createMatteBorder(0, 0, 1, 0, Color.LIGHT_GRAY));
            Analogclock clock = new Analogclock();
           JPanel p1 = new JPanel();
				upper.add(clock);

					clock.start();
	            upper.setVisible(true);


             JPanel lower = new JPanel(new BorderLayout());
            lower.setPreferredSize(new Dimension(0,100));

             		Digitalclock dcl = new Digitalclock();
             		DigitalclockAM dcla = new DigitalclockAM();

            if(s == 0){

				lower.add(dcl, BorderLayout.SOUTH);

            }
	     	 else if(s == 1){

	       		lower.add(dcla, BorderLayout.SOUTH);

	     	 }
	  lower.setVisible(true);

             panel.add(BorderLayout.PAGE_START, upper);
             panel.add(BorderLayout.PAGE_END, lower);

            return panel;
        }


         private JPanel createRightComponent(){
            JPanel panel = new JPanel(new GridBagLayout());

            GridBagConstraints g = new GridBagConstraints();

            JLabel l1 = new JLabel("Date");
            JLabel l2 = new JLabel("Day");
             JLabel l3 = new JLabel("Alarm");



             f1 = new JTextField();
             f2 = new JTextField();
             f3 = new JTextField();

            SimpleDateFormat date = new SimpleDateFormat("MMMMMMMMMMMM:dd:yyyy");
			f1.setText(String.valueOf(date.format(new Date())));

			 SimpleDateFormat day = new SimpleDateFormat("EEEEEEEEEEEE");
			 f2.setText(String.valueOf(day.format(new Date())));

			if (os == 0){

					f3.setText(h + ":" + m + "                    " + " ON");
				  f3.setVisible(true);
			}
			else {

				f3.setText(h + ":" + m + "                    " + " OFF");
				  f3.setVisible(true);
			}



            f1.setPreferredSize(new Dimension(120,25));
            f2.setPreferredSize(new Dimension(120,25));
            f3.setPreferredSize(new Dimension(120,25));


             b1 = new JButton("Turn Alarm Off");
             b2 = new JButton("Change to AM/PM");




            g.insets = new Insets(5, 5, 5, 5);

            g.gridx = 0;
            g.gridy = 0;
            panel.add(l1, g);

            g.gridx = 1;
            g.gridy = 0;
            panel.add(f1, g);

            g.gridx = 0;
            g.gridy = 1;
            panel.add(l2, g);

            g.gridx = 1;
            g.gridy = 1;
            panel.add(f2, g);

             g.gridx = 0;
            g.gridy = 2;
            panel.add(l3, g);

            g.gridx = 1;
            g.gridy = 2;
            panel.add(f3, g);

   			g.gridx = 0;
            g.gridy = 3;
            panel.add(b1, g);

          	g.gridx = 1;
            g.gridy = 3;
            panel.add(b2, g);


            return panel;
        }
         private void addComponents(){
            this.add(BorderLayout.LINE_START, left);
            this.add(BorderLayout.CENTER, right);
        }

	  public void actionPerformed(ActionEvent ae){
	  	if(ae.getSource() == b1){
				s = (s+1)%2;
			if(s == 0)
	 			f3.setText(h + ":" + m + "                    " + " OFF");
	 		else
	 			f3.setText(h + ":" + m + "                    " + " ON");

	  		}

	  		 if(ae.getSource() == b2){
				s = (s+1)%2;
						if(s == 0){
					lower.add(dcla, BorderLayout.SOUTH);
				}
				else
					lower.add(dcl, BorderLayout.SOUTH);
	  		 }


	   if(ae.getSource() == Chtime){
	   		int hours = Integer.parseInt(JOptionPane.showInputDialog(null, "Please enter the hours:"));
			int minutes = Integer.parseInt(JOptionPane.showInputDialog(null, "Please enter the minutes:"));
			int second  = Integer.parseInt(JOptionPane.showInputDialog(null, "Please enter the seconds:"));

	   }

	 if(ae.getSource() == Chdate){
	 	int year = Integer.parseInt(JOptionPane.showInputDialog(null, "Pelase enter the year \nExample: 1992"));
		String month  = JOptionPane.showInputDialog(null, "Enter the month \nExample: April");
		int day = Integer.parseInt(JOptionPane.showInputDialog(null, "Please enter the date \nExample: 26"));
		f1.setText(month + " " + day + "," + " " + year);

	 	}
	 	 if(ae.getSource() == ChAlarmt){
		int h = Integer.parseInt(JOptionPane.showInputDialog(null, "Pelase enter the hour: "));
		int m  = Integer.parseInt(JOptionPane.showInputDialog(null, "Please enter the minutes: "));
		f3.setText(h + ":" + m + "                    " + " ON");

	  }


	  }



	        public static void main(String[] args) {
        new s201068380().setVisible(true);

    }

}
```
 the analog clock class

```
import java.awt.Graphics;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Locale;
import java.awt.event.*;
import java.awt.*;
import javax.swing.*;
public class Analogclock extends JPanel implements Runnable
{
Thread thread = null;
SimpleDateFormat date = new SimpleDateFormat("s", Locale.getDefault());
Date currentDate;
int xcenter = 140, ycenter = 140, lastxm = 0, lastym = 0, lastxh = 0,lastyh = 0;
private void drawCircle(Graphics g){

g.setColor(Color.white);
g.fillOval(60, 55, 170, 170);
g.setColor(Color.BLACK);
g.drawOval(60, 55, 170, 170);


}
public void paint(Graphics g) {
int xhour, yhour, xminute, yminute, minute, hour;
drawCircle(g);
currentDate = new Date();
date.applyPattern("m");
minute = Integer.parseInt(date.format(currentDate));
date.applyPattern("h");
hour = Integer.parseInt(date.format(currentDate));

 xminute =  (int)(Math.cos(minute * 3.14f / 30 - 3.14f / 2) * 80 + xcenter);
 yminute =  (int)(Math.sin(minute * 3.14f / 30 - 3.14f / 2) * 80 + ycenter);
 xhour =  (int)(Math.cos((hour * 30 + minute / 2) * 3.14f / 180 - 3.14f / 2) * 60 + xcenter );
 yhour =  (int)(Math.sin((hour * 30 + minute / 2) * 3.14f / 180 - 3.14f / 2) * 60 + ycenter);



if (xminute != lastxm || yminute != lastym)
{
g.drawLine(xcenter, ycenter - 1, lastxm , lastym);
g.drawLine(xcenter - 1, ycenter, lastxm, lastym);
}
if (xhour != lastxh || yhour != lastyh)
{
g.drawLine(xcenter, ycenter - 1, lastxh, lastyh);
g.drawLine(xcenter - 1, ycenter, lastxh, lastyh);
}

g.setColor(Color.black);
g.drawLine(xcenter, ycenter - 1, xminute  , yminute  );
g.drawLine(xcenter - 1, ycenter, xminute   , yminute  );
g.setColor(Color.black);
g.drawLine(xcenter, ycenter - 1, xhour , yhour  );
g.drawLine(xcenter - 1, ycenter, xhour , yhour);

lastxm = xminute;
lastym = yminute;
lastxh = xhour;
lastyh = yhour;
}


  public void start() {
    if (thread == null) {
      thread = new Thread(this);
      thread.start();
    }
  }
  public void stop()
{


thread = null;
}

  public void run() {
     while (thread != null) {
      try {
        Thread.sleep(100);

      } catch (InterruptedException e) {
      }
      repaint();
    }
    thread = null;

  }

  public void update(Graphics g) {
      paint(g);
  }
      public static void main(String[] args) {
        new Analogclock();

    }
}
```

the other sub classes 

```
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;

public class Digitalclock extends JPanel{


 JLabel label;
 SimpleDateFormat f = new SimpleDateFormat("HH:mm:ss");


public Digitalclock() {
setSize(75,150);
label = new JLabel();

this.add(label);

new Thread(){


public void run(){
while (true) {

label.setText(String.valueOf(f.format(new Date())));

try {
Thread.sleep(1000);
} catch (Exception e) {

}
}
}
}.start();
    }
  }
```


```
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;

public class DigitalclockAM extends JPanel{


 JLabel label;
 SimpleDateFormat fam = new SimpleDateFormat("hh:mm:ss a");


public DigitalclockAM() {
setSize(75,150);
label = new JLabel();

this.add(label);

new Thread(){


public void run(){
while (true) {

label.setText(String.valueOf(fam.format(new Date())));

try {
Thread.sleep(1000);
} catch (Exception e) {

}
}
}
}.start();
    }
  }
```


----------



## kaoZ (11. Mai 2014)

> impleDateFormat date = new SimpleDateFormat("MMMMMMMMMMMM:dd:yyyy")



Thats not an supported fromat btw..

take some screenshots plz , if you have some problems with your layout.



> when i run my program the analog clock does not work propely there is someting wrong



What is the exact Problem ? this isn't a usefull trouble discription ......

please paste some error Code if it exists, or try to discripe which component of your code are dont work well


----------



## hhm136 (11. Mai 2014)

if i put the start method after set the clock to the upper panel 
the clock be come like this



but if i remove the start method it set fine but thr analong does not move


----------



## kaoZ (11. Mai 2014)

Try this, its an example of a StopWatch i found on the Internet, but so you could see how you can realise a Watch, and its functions.


```
import java.awt.BasicStroke;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.FlowLayout;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Shape;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.geom.AffineTransform;
import java.awt.geom.Line2D;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class Stoppuhr extends JFrame implements ActionListener { 
	private static final long serialVersionUID = 1L;
	
	private JButton startButt, stopButt, resetButt; 
    private UhrPanel panel; 

    public Stoppuhr() { 
        panel = new UhrPanel(); 
        panel.setRunning(false); 
        this.add(panel, BorderLayout.CENTER); 

        startButt = new JButton("start"); 
        startButt.addActionListener(this); 
        stopButt = new JButton("stop"); 
        stopButt.addActionListener(this); 
        resetButt = new JButton("reset"); 
        resetButt.addActionListener(this); 
        JPanel buttPanel = new JPanel(new FlowLayout()); 
        buttPanel.add(startButt); 
        buttPanel.add(stopButt); 
        buttPanel.add(resetButt); 
        this.add(buttPanel, BorderLayout.SOUTH); 

        this.setSize(300, 300); 
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 
        this.setVisible(true); 
    } 

    public static void main(String[] args) { 
        new Stoppuhr(); 
    } 

    public void actionPerformed(ActionEvent e) { 
        if (e.getSource() == startButt) { 
            panel.setRunning(true); 
        } 
        if (e.getSource() == stopButt) { 
            panel.setRunning(false); 
        } 
        if (e.getSource() == resetButt) { 
            panel.setIndex(0); 
            panel.setRunning(false); 
            panel.repaint(); 
        } 
    } 
} 

class UhrPanel extends JPanel implements Runnable { 
	private static final long serialVersionUID = 1L;

	public UhrPanel() { 
        start(); 
    } 

    double winkel = Math.PI / -30; 
    int index = 0; 
    boolean running; 
    private Thread thread; 

    public void paintComponent(Graphics g) { 
        Graphics2D g2d = (Graphics2D) g; 
        g2d.setColor(Color.WHITE); 
        g2d.fillRect(0, 0, this.getWidth(), this.getHeight()); 

        AffineTransform at = new AffineTransform(); 
        at.setToScale(1, -1); 
        AffineTransform aff = new AffineTransform(); 
        aff.setToTranslation(this.getWidth() / 2, this.getHeight() / 2); 
        at.preConcatenate(aff); 
        g2d.transform(at); 

        // Zifferzeichen 
        g2d.setColor(Color.RED); 
        Line2D.Double ziffer = new Line2D.Double(0, 60, 0, 70); 
        Shape zShape; 
        for (int i = 0; i < 61; i += 5) { 
            at.setToRotation(winkel * i); 
            zShape = at.createTransformedShape(ziffer); 
            g2d.draw(zShape); 
        } 

        // Zifferzeichen an den Positionen 12/3/6/9 
        g2d.setColor(Color.BLACK); 
        g2d.setStroke(new BasicStroke(3)); 
        Line2D.Double viertel = new Line2D.Double(0, 60, 0, 70); 
        Shape qShape; 
        for (int i = 0; i < 61; i += 15) { 
            at.setToRotation(winkel * i); 
            qShape = at.createTransformedShape(viertel); 
            g2d.draw(qShape); 
        } 

        // Zeiger 
        g2d.setColor(Color.BLACK); 
        Line2D.Double line = new Line2D.Double(0, 0, 0, 50); 
        at.setToRotation(winkel * index, 0, 0); 
        Shape s = at.createTransformedShape(line); 
        g2d.draw(s); 

    } 

    public void start() { 
        if (thread == null) { 
            thread = new Thread(this); 
            thread.start(); 
        } 
    } 

    public void setRunning(boolean running) { 
        this.running = running; 
    } 

    public void setIndex(int i) { 
        this.index = i; 
    } 

    public void run() { 
        while (true) { 
            if (running) { 
                index++; 
                index = index > 60 ? 1 : index; 
                repaint(); 
            } 
            try { 
                Thread.sleep(1000); 
            } catch (InterruptedException e) { 
                e.printStackTrace(); 
            } 
        } 
    } 
}
```



> if i put the start method after set the clock to the upper panel
> the clock be come like this



Which Layoutmanager do you use for the upper Panel ?


----------



## hhm136 (11. Mai 2014)

i used BorderLayout


----------



## kaoZ (11. Mai 2014)

I think its starts to destroy the clock animation when the Clock ticks the first time , right ?


----------



## hhm136 (15. Mai 2014)

Yaeh


----------

