Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use CardLayout with Netbeans GUI Builder

Preface (this is a self-answer post)

I've gotten my feet wet with Netbeans GUI Builder but I am just not starting to dive in to it to learn the more intricate details. I really didn't even know hot to change layout manager from the design view, I would just hand code it. So I tried asking the Google help desk by asking "How to use different layout managers in Netbeans GUI Builder" and surprisingly found zilch in the first couple pages of the results. In Eclipse Window Builder, from the palette you can drag an drop different layout managers so why not in GUI Builder. Lo and behold, after hours of searching, I found the magical Set Layout from the context menu of a container component. Now I'm ready to rule the world!

I figured I throw in some tutorials on how to use different layout managers from GUI Builder, here on SO so others won't go bald tearing their hair out trying to figure out what I what I've been figuring out for myself. After completing the first tutorial on CardLayout (below) I get ready to post my efforts and type in to the title of the Ask Question page, "How to use CardLayout with Netbeans GUI Builder" . What the ...!!. There were already some question asked on this topic!!. I guess I should've made my Google query more precise. DOHH!

Anyway, I have this tutorial now, which is still more informative than the ones provided in other answers, so my efforts will not have been wasted (so I tell myself :D ). Maybe I'll make a series of these tuts. We'll see. For now, enjoy How to use CardLayout :P

like image 1000
Paul Samsotha Avatar asked Feb 20 '14 04:02

Paul Samsotha


People also ask

Does NetBeans have a GUI builder?

This tutorial guides you through the process of creating the graphical user interface (GUI) for an application called ContactEditor using the NetBeans IDE GUI Builder. In the process you will layout a GUI front-end that enables you to view and edit contact information of individuals included in an employee database.

How do I import icons into NetBeans?

In the icon property dialog box, click Import to Project. In the file chooser navigate to any image that is on your system that you want to use. Then click Next. In the Select target folder page of the wizard, select the newpackage folder and click Finish.


1 Answers

How to Use CardLayout

  1. With a new JFrame form, add a JPanel, a few JButtons to the form so it looks like this

    enter image description here

    Your navigator pane should look like this. Notice I changed the variable names. You can do that by right clicking on the component from the navigator and selecting change variable name.

    enter image description here

  2. Now we se the layout of mainPanel to CardLayout. Double click the mainPanel in the navigator, so it's visible by itself in the design view. Then right click it in the navigator and select Set Layout -> CardLayout. Your navigator should now look like this

    enter image description here

  3. Now we're going to add different JPanels to the mainPanel. Just right click on the mainPanel from the navigator and select Add from Palette -> Swing Containers -> JPanel. Do that three times so you have three different JPanels. I also changed their variable names. Your navigator should not look like this.

    enter image description here

  4. The layout part is set but lets add some labels so we can differentiate between the JPanels and also change their card name. So double click panelOne from the navigator. You will see the panel in the design view. Just drag and drop a JLabel to it and edit the text of the label to Panel One. Do that for the other two also, naming their labels accordingly. When you're done, your navigator should look like this.

    enter image description here

    We also want to change the name of the panels that were given as CardLayout references. We can do that by double clicking on one of the panel (panelOne) and going to the properties pane. There towards the bottom, you will see a property Card Name. Just change it to whatever you want, I used panelOne. Do that for the other two JPanel

    enter image description here

    Note: At any time, you can change the layout position, say you want panelTwo initially shown, instead of panelOne. Just right click on mainPanel and select Change Order. You can move the panels up or down on the order.

  5. We're almost done. We just need add the listeners to the buttons to switch between panels in the CardLayout. So double click on the frame from the navigator. You should see the buttons now. Right click on the Panel One button. and select Events -> Action -> actionPerformed. You should see auto-generated code in the source code view. Add this piece of code

    private void jbtPanelOneActionPerformed(ActionEvent evt) {                                            
        CardLayout card = (CardLayout)mainPanel.getLayout();
        card.show(mainPanel, "panelOne");
    } 
    

    Do this for the other two buttons, making sure to pass the correct name of the corresponding panel to the show method.

If you've followed the 5 steps above, your program should run as follows.

enter image description here


It's also possible to drag and drop other class JPanel form classes onto your mainPanel, if you have others you'd like to use. This may be a preferred approach for bigger non-trivial cases, to avoid humungous classes.

enter image description here

like image 116
Paul Samsotha Avatar answered Oct 12 '22 11:10

Paul Samsotha