Solved

Layout Question

Posted on 2004-03-27
3
222 Views
Last Modified: 2010-03-31
Hi everyone how would this be done.

I think using colours would help with separating each group of checkboxes but this approach still doesn't satisfy another criteria of good GUI, that is "Focus". Think about the time a user needs to search for a particular group, a new user will need to scan through 10 groups to find out which group he needs and an experienced user has to rely on his memory to locate a group. So whether your users are experienced or not, you're making too much work for them.

I would suggest another approach, assuming each of your checkbox groups contains a specific character then this character would be the _name_ of this group (remember this name has a meaning therefore a user can identify to it). With this approach, you only need to transfer focus twice. Initially, the focus would be on a list of names, perhaps awt.List, a user then chooses a name that is appropiate to his required action then the chosen group will appear dominantly in the center of your program. Because this effect causes a user, subconsciously, to look at it, imagine a pop-up window, hence second focus transition.

It's difficult to draw the layout here, but if you can imagine a rectangle that contains a square and another rectangle inside it.

---------------------------------------
|                              |                |
|                              |                |
|                              |                |
|          square          |   rec         |
|                              |                |
|                              |                |
|                              |                |
----------------------------------------

rec contains a List of names and square contains all the groups.

A detail look at square:

Initially
--------------------------
|  g1         g2      g3   |
|         ----------         |
| g10  |          |  g4   |
|        |          |         |
|   g9  ----------  g5    |
|                              |
|   g8        g7     g6    |
--------------------------

then a user chooses group 10 so:

--------------------------
|  g1         g2      g3   |
|         ----------         |
|        |  g10   |  g4   |
|        |          |         |
|   g9  ----------  g5    |
|                              |
|   g8        g7     g6    |
--------------------------

Note here all the surrounding groups have the same colour, g10 has a different colour. Hence created a pop-out effect.

Now, how would we program this Java? There are many different ways to achieve this, it depends on your imagination.
0
Comment
Question by:Drop_of_Rain
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
3 Comments
 
LVL 15

Expert Comment

by:Javatm
ID: 10696927
You need to learn it on your own though I'm gonna try my best, wait . . .
0
 
LVL 15

Accepted Solution

by:
Javatm earned 500 total points
ID: 10697407
Hi Friend;

You need to implement it yourself but
I have made a simple example to get you started :

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

public class MyFrame3 extends JFrame
{
    public MyFrame3()
    {
        super("Sample . . .");

        Font f1 = new Font("Courier New", Font.BOLD, 15);

        JPanel p1 = new JPanel();
        JPanel p2 = new JPanel();
        JPanel p3 = new JPanel();
        JPanel p4 = new JPanel();
        JPanel p5 = new JPanel();
        JPanel p6 = new JPanel();

        final JButton b1 = new JButton("G1");
        final JButton b2 = new JButton("G2");
        final JButton b3 = new JButton("G3");
        final JButton b4 = new JButton("G4");
        final JButton b5 = new JButton("G5");
        final JButton b6 = new JButton("G6");
        final JButton b7 = new JButton("G7");
        final JButton b8 = new JButton("G8");

        final JButton b9 = new JButton("Restart");
        final JButton b0 = new JButton("   Exit    ");

       b9.setMnemonic('R'); b0.setMnemonic('E');

        final JLabel l1 = new JLabel();
        l1.setBorder(BorderFactory.createLineBorder(Color.gray));

        p1.setBorder(BorderFactory.createLoweredBevelBorder());
        p4.setBorder(BorderFactory.createLoweredBevelBorder());
        p4.setBackground(Color.white);

        p1.setLayout(new GridLayout(1,2));
        p1.add(p2); p1.add(p3);

        p2.setLayout(new GridLayout(1,1));
        p2.add(p4);

        p4.setLayout(new GridLayout(3,3));
        p4.add(b1); p4.add(b2); p4.add(b3);
        p4.add(b4); p4.add(l1); p4.add(b5);
        p4.add(b6); p4.add(b7); p4.add(b8);

        p5.setLayout(new GridLayout(5,1));
        p5.add(new JLabel("Name 1\n"));
        p5.add(new JLabel("Name 2"));
        p5.add(new JLabel("Name 3"));
        p5.add(new JLabel("Name 4"));
        p5.add(new JLabel("Name 5"));
 
        p3.setLayout(new GridLayout(1,3));
        p3.add(new JPanel()); p3.add(p5);
        p3.add(new JPanel());

        p6.add(b9); p6.add(b0);

        this.getRootPane().setDefaultButton(b9);
        this.getContentPane().add(p1, BorderLayout.CENTER);
        this.getContentPane().add(p6, BorderLayout.SOUTH);

        this.setResizable(false);
        this.setSize(400, 300);
        this.setVisible(true);

        // Add your action listener here . . .
        b1.addActionListener(new ActionListener() {
        public void actionPerformed(ActionEvent h)
        {
        l1.setText("       G1       ");
        b1.setText("");
        b1.setEnabled(false);
        }
        });

        b2.addActionListener(new ActionListener() {
        public void actionPerformed(ActionEvent h)
        {
        l1.setText("       G2       ");
        b2.setText("");
        b2.setEnabled(false);
        }
        });

        b3.addActionListener(new ActionListener() {
        public void actionPerformed(ActionEvent h)
        {
        l1.setText("       G3       ");
        b3.setText("");
        b3.setEnabled(false);
        }
        });

        b4.addActionListener(new ActionListener() {
        public void actionPerformed(ActionEvent h)
        {
        l1.setText("       G4       ");
        b4.setText("");
        b4.setEnabled(false);
        }
        });

        b5.addActionListener(new ActionListener() {
        public void actionPerformed(ActionEvent h)
        {
        l1.setText("       G5       ");
        b5.setText("");
        b5.setEnabled(false);
        }
        });

        b6.addActionListener(new ActionListener() {
        public void actionPerformed(ActionEvent h)
        {
        l1.setText("       G6       ");
        b6.setText("");
        b6.setEnabled(false);
        }
        });

        b7.addActionListener(new ActionListener() {
        public void actionPerformed(ActionEvent h)
        {
        l1.setText("       G7       ");
        b7.setText("");
        b7.setEnabled(false);
        }
        });

        b8.addActionListener(new ActionListener() {
        public void actionPerformed(ActionEvent h)
        {
        l1.setText("       G8       ");
        b8.setText("");
        b8.setEnabled(false);
        }
        });

        b9.addActionListener(new ActionListener() {
        public void actionPerformed(ActionEvent h)
        {
        l1.setText("");

        b1.setText("G1");
        b2.setText("G2");
        b3.setText("G3");
        b4.setText("G4");
        b5.setText("G5");
        b6.setText("G6");
        b7.setText("G7");
        b8.setText("G8");

        b1.setEnabled(true);
        b2.setEnabled(true);
        b3.setEnabled(true);
        b4.setEnabled(true);
        b5.setEnabled(true);
        b6.setEnabled(true);
        b7.setEnabled(true);
        b8.setEnabled(true);
        }
        });

        b0.addActionListener(new ActionListener() {
        public void actionPerformed(ActionEvent h)
        {
        System.exit(0);
        }
        });
    }

    public static void main(String[] args)
    {
      MyFrame3 x = new MyFrame3();
      x.setDefaultCloseOperation(EXIT_ON_CLOSE);
    }
}

Hope that helps . . .
Javatm
0
 
LVL 15

Expert Comment

by:Javatm
ID: 10697425
http://www.freewebs.com/cube-j

Always glad to help . . .
Friend : Javatm
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

An old method to applying the Singleton pattern in your Java code is to check if a static instance, defined in the same class that needs to be instantiated once and only once, is null and then create a new instance; otherwise, the pre-existing insta…
Basic understanding on "OO- Object Orientation" is needed for designing a logical solution to solve a problem. Basic OOAD is a prerequisite for a coder to ensure that they follow the basic design of OO. This would help developers to understand the b…
Viewers learn how to read error messages and identify possible mistakes that could cause hours of frustration. Coding is as much about debugging your code as it is about writing it. Define Error Message: Line Numbers: Type of Error: Break Down…
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question