Creating an Outlook style user interface in Java?

Question

I'm looking to create an Outlook style UI in a Java desktop app, with a list of contexts or nodes in a lefthand pane, and the selected context in a pane on the right. How do I go about this?

I'm looking for a bit more detail than 'use a JFrame'. A tutorial or walk through would be good, or some skeleton code, or a framework/library that provides this kind of thing out of the box.

Thanks.

Edit

My (edited) code so far:

UIPanel

public class UIPanel extends javax.swing.JPanel {

    private final JSplitPane splitPane;

    public UIPanel() {
        super(new BorderLayout());
        initComponents();

        JPanel contextPnl = new ContextPanel();
        JPanel treePnl = new NodePanel(contextPnl);

        this.splitPane = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT,
          true, new JScrollPane(treePnl), new JScrollPane(contextPnl));

        add(splitPane, BorderLayout.CENTER);

        //not sure I need these?
        splitPane.setVisible(true);
        treePnl.setVisible(true);
        contextPnl.setVisible(true);
}

NodePanel

public class NodePanel extends javax.swing.JPanel {

    JPanel _contextPanel;

    public NodePanel(JPanel contextPanel) {
        initComponents();
        _contextPanel = contextPanel;
        initialise();
    }

    private void initialise(){
        nodeTree.addTreeSelectionListener(getTreeListener());
    }

    private TreeSelectionListener getTreeListener(){
        return new TreeSelectionListener() {
            public void valueChanged(TreeSelectionEvent e) {
                DefaultMutableTreeNode node = (DefaultMutableTreeNode)
                               nodeTree.getLastSelectedPathComponent();
            // if nothing is selected
            if (node == null)
                return;

        // get selected node
        Object nodeInfo = node.getUserObject();

        CardLayout layout = (CardLayout) _contextPanel.getLayout();
        //layout.show(_contextPanel, "test"); //show context for selected node

        }
    };
}

ContextPanel

public class ContextPanel extends javax.swing.JPanel {

    JPanel _cards;
    final static String CONTEXT1 = "Context 1";
    final static String CONTEXT2 = "Context 2";
    JPanel _context1;
    JPanel _context2;


    public ContextPanel() {
        initComponents();
        intialiseContexts();
    }

    public void updateContext(String contextName){
        //TODO
    }

    private void intialiseContexts(){
        _context1 = new NodeContext();
        _context2 = new NodeContext();
        _cards = new JPanel(new CardLayout());
        _cards.add(_context1, CONTEXT1);
        _cards.add(_context2, CONTEXT2);
}

Answer 1

The key concept here is to define a JSplitPane as your top-level Component with a horizontal split. The left-hand side of the split pane becomes your "tree" view while the right-side is the context panel.

The trick is to use CardLayout for your context panel and to register a TreeSelectionListener with the tree panel's JTree so that whenever a tree node is selected, the CardLayout's show method is called in order to update what the context panel is currently showing. You will also need to add the various Components to the context panel in order for this approach to work.

public class UIPanel extends JPanel {
  private static final String BLANK_CARD = "blank";
  private final JSplitPane splitPane;

  public UIPanel() {
    super(new BorderLayout());

    JPanel treePnl = createTreePanel();
    JPanel contextPnl = createContextPanel();

    this.splitPane = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT,
      true, new JScrollPane(treePnl), new JScrollPane(contextPnl));

    add(splitPane, BorderLayout.CENTER);
  }
}

EDIT: Example Usage

public class Main {
  public static void main(String[] args) {
    // Kick off code to build and display UI on Event Dispatch Thread.
    SwingUtilities.invokeLater(new Runnable() {
      public void run() {
        JFrame frame = new JFrame("UIPanel Example");
        frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
        frame.setLayout(new BorderLayout());

        // Add UIPanel to JFrame.  Using CENTER layout means it will occupy all
        // available space.
        frame.add(new UIPanel(), BorderLayout.CENTER);

        // Explicitly set frame size.  Could use pack() instead.
        frame.setSize(800, 600);

        // Center frame on the primary display.
        frame.setLocationRelativeTo(null);

        // Finally make frame visible.
        frame.setVisible(true);
      }
    });
  }
}

Additional Advice

• I can see you've created separate classes for your NodePanel and ContextPanel. Given the simplicity of these classes and how tightly coupled they are it probably makes more sense to embed all the UI components directly within UIPanel and have utility methods that build the two sub-panels. If you do keep with NodePanel and ContextPanel try to make them package private rather than public.

• The CardLayout approach works well if you have a small(ish) number of nodes and you know them in advance (and hence can add their corresponding Components to the CardLayout in advance). If not, you should consider your context panel simply using BorderLayout and, whenever you click on a node you simply add the relevant node component to the BorderLayout.CENTER position of the NodePanel and call panel.revalidate() to cause it to perform its layout again. The reason I've used CardLayout in the past is that it means my nodes only need to remember one piece of information: The card name. However, now I think of it I don't see any real disadvantage with this other approach - In fact it's probably more flexible.

Answer 2

You might want to look at using a platform like eclipse as a starting point. It provides a very rich environment for creating these applications so you do not have to start everything from scratch. The online guides and help are very good and there are several books on the subject.