Page 1 of 1

JTabbedPane - Tab Switching using custom JButtons Rate Topic: -----

#1 DaneAU  Icon User is offline

  • Great::Southern::Land
  • member icon

Reputation: 284
  • View blog
  • Posts: 1,617
  • Joined: 15-May 08

Posted 10 March 2011 - 07:49 PM

Introduction

Have you ever wondered about using JTabbedPane in your applications, if you have maybe you wanted to change the tab selected not through clicking on the tab itself, perhaps a keyboard nmeumoic or disignated button to cycle through tabs.

Real Applications
Suppose you have a simple RSS reader and each tab represents some specific topic or category of your feeds, as a user all you want to do is click the same spot 3 or 4 times quickly to scan the headlines for something that may be of interest to you. Well you can, by simply implementing two buttons you can have a quick switch arrangment to move seamlessly between your tabs in either directoin.

It Begins
This will be a rather breif tutorial and will not cover the use of JTabbedPane in detail nor its properties, for the sake of this tutorial we will assume that you the coder have your layout and setup the way you wish and your two buttons ( move-left and move-right ) placed in a way that is suitable for your application.

Firstly the JTabbedPane has 3 member functions that will do all the work required.
  • int getTabCount()
  • int getSelectedIndex()
  • void setSelectedIndex(int)


With these you can navigate your panels using two buttons, you could even just use one. Its worth while noting that these methods are also helpful if you are performing an operation of some kind and wish the UI to change Tabs on the panel to display the results shown on a specific tab. You call the setSelected(int) member function and acheive this in one step.

Firstly lets assume we have two JButton's instantiated and placed somewhere on the UI, and we have populated our JTabbedPane with 5 tabs consiting on each of a JPanel and a JLabel stating the id. We achieve this using a little helper function. Assume that the JTabbedPane object has been instaniated as tabbedPane.

private void addTestPanes() {
  for ( int i = 0; i < 5;++i) {
    JPanel panel = new JPanel(false);
    JLabel lbl = new JLabel("Panel::"+(i+1));
    panel.setLayout(new FlowLayout());
    panel.add(lbl);			
    tabbedPane.addTab("Item::" + i, panel);
  }
}


Next we have our two JButtons with an ActionListener on each of them.
JButton moveLeft = new JButton("<<");
JButton moveRight = new JButton(">>");
moveLeft.addActionListener(this);
moveRight.addActionListener(this);	




Now we move on to the actionPerformed(ActionEvent evt) method.

For the sake of this tutorial the application only has two objects with ActionListeners.

First we need a quick check to ensure that there is a tab on the JTabbedPane and do something if there isn't. So within your actionPeformed a check like so is a good idea.
Implementation of the buttons behaviours.
if (tabbedPane.getTabCount() == 0) {
  System.err.println("No Tabs In Pane");
  return;
}


You could do whatever you like here in terms of managing this outcome.

Now lets think about the two buttons - one invokes movement from left to right accross the tabs the other from right to left. It is here that we must consider the indicies and check where we are with respect to the starting and ending indexes.

Buttons Detailed

The moveLeft JButton ("<<")
We wish to move left and continue to do so, in doing so we will inevitably find ourselves at an index of zero and at this point it is up to you how you wish the program to react, in this case i want to have a circular functionality so that when the index is at zero and the user wishes to go left again it will continue on its way going to the last item denoted by the highest index ( getTabCount() - 1 ), to begin from the end of the tabs.

So to do this we must therefore check whether the index is at zero and if it is we must setSelectIndex( getTabCount() - 1); if we are not at the index zero we need to move the index to the left by getting the current index position and decrementing it by 1. Demonstrated in the code below.


public void actionPerformed(ActionEvent evt) {
  // our first check for zero tabs //

  // The moveLeft JButton //
  if(evt.getSource() == moveLeft) {
     // check if we are at zero //
     if(tabbedPane.getSelectedIndex() == 0) 
       tabbedPane.setSelectedIndex( tabbedPane.getTabCount() - 1);
     else
       tabbedPane.setSelectedIndex(tabbedPane.getSelectedIndex() -1);
  }
}


The moveRightButton JButton
The same principles apply here as they did in the moveLeft button, i also wish this button to behave in a similar way, when it reaches the end i want it to return to the index of zero. This is done in basically the same way. Instead of checking whether the index is zero, we check if its the getTabCount()-1 (end of tabs).

Shown in the code below is the implementation of the moveRight actionListener event.
public void actionPerformed(ActionEvent evt) {
  // ... intitial check for zero tabs

  // .. the moveLeft impementation

  if(evt.getSource() == moveRight) {
    // check if we are at the end of tabs //
    if(tabbedPane.getSelectedIndex() == tabbedPane.getTabCount()-1)
      tabbedPane.setSelectedIndex(0);
    else
      tabbedPane.setSelectedIndex(tabbedPane.getSelectedIndex()+1);
  }
}



Combing it all together you get the following~

public void actionPerformed(ActionEvent evt) {
		
  // check there is more than zero tabs
  if (tabbedPane.getTabCount() == 0) {
    System.err.println("No Tabs In Pane");
    return;
  }
  if (evt.getSource() == moveLeft) {
    if(tabbedPane.getSelectedIndex() == 0)
      tabbedPane.setSelectedIndex(tabbedPane.getTabCount()-1);
    else {
      tabbedPane.setSelectedIndex(tabbedPane.getSelectedIndex()-1);
    }
  }
  if (evt.getSource() == moveRight) {
    if(tabbedPane.getSelectedIndex() == tabbedPane.getTabCount()-1)
      tabbedPane.setSelectedIndex(0);
    else 
      tabbedPane.setSelectedIndex(tabbedPane.getSelectedIndex()+1);
  }
}



So this takes care of everything we need, we can click endlessly and go round and round in circles - constantly checking the RSS feeds or irc channel tabs, whatever your fancy is :)

I have attached to this posts an example class that implements this as an example. Feel free to download it and try it out.

Attached File(s)



Is This A Good Question/Topic? 0
  • +

Replies To: JTabbedPane - Tab Switching using custom JButtons

#2 wingsandsky  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 05-March 11

Posted 17 March 2011 - 05:15 AM

Thanks, it's amazing!

This post has been edited by wingsandsky: 17 March 2011 - 05:15 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1