Firefox选项窗格Java Swing中的UX设计？

Question

I need to design a window similar to Firefox > tools > options (shown below) using Java Swing. I have to create two top headers. On click of each I have to open tabbedpanes (Same as Firefox > tools > options > advanced . I am pretty much new to Swing.

Thanks for the quick reply.I have tried implementing the same. The base window is JDialog. Whithin which I ahve created the top panel.The toolbar(at the BorderLayout-North of topPanel) and the content panel (at the BorderLayout-Center of topPanel) are added into this top panel. Two toolbar buttons-"general" and "advanced" are created which are the headers i was talking to in my last post."contentPanel" is the placeholder panel. where I want to dynamically add the tabbed panels whenever the toolbar butons gets clicked.And default is general.

Whenevr the advanced toolbar button is clicked ,I want to remove the _generalTabbedPane and show the _advanceTabbedPane and vice versa.

But it is not happening properly.Adding and removing/hiding the panels when toolbar button is clicked is what I need to fix.I have attached the code below.

Kindly help.

 @Override
   public JComponent createContentPanel()
  {        
   topPanel  = new JPanel();
   topPanel.setLayout(new BorderLayout());     
   JToolBar toolBar = new JToolBar();
   toolBar.add(new tabButton("general",GENERAL));
   toolBar.add(new tabButton("advanced",ADVANCED));

   contentPanel = new JPanel();       
   contentPanel.add(getGeneralTabs());

   topPanel.add(toolBar, BorderLayout.NORTH);
   topPanel.add(contentPanel, BorderLayout.CENTER);        
   return topPanel;


}  
private  final class JCenterLabel extends JLabel
{       
    public JCenterLabel(final String s)
    {
        super(s);
        setAlignmentX(Component.CENTER_ALIGNMENT);
    }

    public JCenterLabel(final Icon i)
    {
        super(i);
        setAlignmentX(Component.CENTER_ALIGNMENT);
    }
}

private  class tabButton extends JButton
{   
    public tabButton (  String tabId,String actionCommand)
    {
        super();
        setLayout(new BoxLayout(this, BoxLayout.Y_AXIS));      
        add(new JCenterLabel(UIManager.getIcon("OptionPane.informationIcon"))); 
        add(new JCenterLabel(tabId)); 
        this.setActionCommand(actionCommand);
        this.setName(tabId);
        this.addActionListener(new ActionListener() {
        public void actionPerformed(ActionEvent e) { 
            String cmd = e.getActionCommand();
            if (GENERAL.equals(cmd)) { 
                if(contentPanel != null){
                contentPanel.remove(_advanceTabbedPane);     
                contentPanel.add(getGeneralTabs());
                contentPanel.revalidate();
                contentPanel.repaint();


                }

            } else if (ADVANCED.equals(cmd)) { 
                if(contentPanel != null){
                contentPanel.remove(_generalTabbedPane);               
                contentPanel.add(getAdvancedTabs());
                contentPanel.revalidate();
                contentPanel.repaint();


                }
            } 

        }
        });
}
}

  private JideTabbedPane  getGeneralTabs(){
    _generalTabbedPane = new JideTabbedPane();
    _generalTabbedPane.setModel(new TabbedPaneWithValidationModel());
    //adding the tabs to the _generalTabbedPane
    //-----
    //---

    return _generalTabbedPane;


}
  private   JideTabbedPane getAdvancedTabs(){
      _advanceTabbedPane = new JideTabbedPane();
      _advanceTabbedPane.setModel(new TabbedPaneWithValidationModel());
      //adding the tabs to the _advanceTabbedPane
    //-----
    //---
      return _advanceTabbedPane;

  }

Answer 1

I see a JToolBar in BorderLayout.NORTH , a JTabbedPane in BorderLayout.CENTER and a JPanel using FlowLayout.RIGHT in BorderLayout.SOUTH . BorderFactory can supply the titled border.

Addendum: I have to create two top headers.

If you need two top headers, you can add two instances of JToolBar to a JPanel having GridLayout(0, 1) , then add that panel to BorderLayout.NORTH . See also this nested panel example . Use Action to encapsulate your toolbar behaviors, for example .

Addendum: Whenever the advanced toolbar button is clicked, I want to remove the generalTabbedPane and show the advanceTabbedPane and vice versa.

You could use CardLayout , shown here , to accomplish this. A better approach might be to let each tab's abstract parent implement a suitable interface method , eg setAdvanced() . The default would do nothing, but some concrete implementations could respond accordingly.