How to use CardLayout with Netbeans GUI Builder

Question

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

Wyckoff

I think the duplicate flag should be swapped - the accepted answer on the other question is just a link to an off-site tutorial (which is not an acceptable answer for SO, anyways). – Davey

Answer 1

How to Use CardLayout

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

   
   
   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.

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

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.

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.

   
   
   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

   
   
   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.

---

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.

Wyckoff

@peeskillet How you do the events if other separate panel outside the frame? For example, going back to the main panel. – Bicephalous

not bad though I guess its the same as a Tabbed Pane. What I am interested in netbeans gui builder is like going back and forth through JPanels with buttons on said Panels. If you have any commnet about. – Litchi