java - 在 Java 中创建 Outlook 风格的用户界面？

Question

我正在寻找在 Java 桌面应用程序中创建 Outlook 样式的 UI，在左侧 Pane 中具有上下文或节点列表，在右侧 Pane 中具有选定上下文。我该怎么做？

我正在寻找比“使用 JFrame”更多的细节。一个教程或演练会很好，或者一些框架代码，或者一个提供这种开箱即用的东西的框架/库。

谢谢。

编辑

到目前为止我的(编辑的)代码:

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);
}

节点面板

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

        }
    };
}

上下文面板

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

这里的关键概念是定义一个 JSplitPane作为您的顶级Component水平分割。拆分 Pane 的左侧成为您的“树” View ，而右侧是上下文面板。

诀窍是使用 CardLayout用于您的上下文面板并注册 TreeSelectionListener与树面板的 JTree so that whenever a tree node is selected, the CardLayout的show调用方法以更新上下文面板当前显示的内容。您还需要将各种组件添加到上下文面板中才能使这种方法起作用。

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);
  }
}

编辑:示例用法

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);
      }
    });
  }
}

附加建议

我可以看到你已经为你的 NodePanel 创建了单独的类。和 ContextPanel .鉴于这些类的简单性以及它们的紧密耦合程度，将所有 UI 组件直接嵌入到 UIPanel 中可能更有意义。并具有构建两个子面板的实用方法。如果您确实保留了 NodePanel 和 ContextPanel，请尝试将它们设为私有(private)而不是公开。

CardLayout如果您有少量(ish)节点并且您事先知道它们(因此可以提前将它们相应的组件添加到 CardLayout 中)，则该方法效果很好。如果没有，您应该考虑只使用 BorderLayout 的上下文面板。并且，每当您单击一个节点时，您只需将相关节点组件添加到 BorderLayout.CENTER NodePanel 的位置和调用面板。 revalidate()使其再次执行布局。我过去使用 CardLayout 的原因是它意味着我的节点只需要记住一条信息:卡片名称。但是，现在我想起来了，我认为这种其他方法没有任何真正的缺点——实际上它可能更灵活。