Swing page-by-page transition (MultiPages Widget)

Question

I am looking for a strategy which will allow me to create a Java Swing application and use buttons to change the displayed components on my JFrame.

I am trying to do this using JButtons and ActionListeners but not having much luck.

I can't use a JDialog or CardLayout as I can only have one page visible at a time for the user to interact with in sequence.

"I am trying to do this using buttons and actionlisteners but not having much luck." why? what is the matter? — Nikolay Kuznetsov, Jan 01 '13 at 15:05
[JTabbedPane](http://docs.oracle.com/javase/tutorial/uiswing/components/tabbedpane.html) might be useful? — Nikolay Kuznetsov, Jan 01 '13 at 15:06
Null layout manager + absolute positionning + Z order manipulation of several JPanel: you may add some animation to scroll the page from right to left — Aubin, Jan 01 '13 at 15:10
Please explain in a bit more detail why you can't use CardLayout? This problem seems well suited for a CardLayout solution. Why discard it out of hand? — Hovercraft Full Of Eels, Jan 01 '13 at 15:10
*"Swing page-by-page transition"* What do you mean by 'transition'? Flip, fade, scroll, slide, zoom out/in..? — Andrew Thompson, Jan 01 '13 at 15:21
+1 mKorbel, HFOE and Andrew. I would say `CardLayout` (as to why you cant use it: *I can't use a dialog or card layout as I can only have one page visible at a time for the user to interact with in sequence.* i dont get it as this is what the CardLayout does best) or `JFrame#getContentPane().removeAll()` technique. See [here](http://stackoverflow.com/a/14012757/1133011) for an example of CardLayout and some theory on `removeAll()`. And [here](https://sites.google.com/site/drjohnbmatthews/buttons) for `removeAll()` full example — David Kroukamp, Jan 01 '13 at 16:44

Aubin · Accepted Answer · 2013-01-02T08:49:47.937

Here is a class which do the job:

enter image description here

public class MultiPages extends JPanel implements ActionListener {

    MultiPages() {
        super(new BorderLayout());
        add(leftButton, BorderLayout.WEST);
        add(pages, BorderLayout.CENTER);
        add(rightButton, BorderLayout.EAST);
        leftButton.addActionListener(this);
        rightButton.addActionListener(this);
        animation.setInitialDelay(10);
        animation.setRepeats(false);
    }

    public void addPage(JComponent page) {
        page.setLocation(0, 0);
        pages.add(page);
        pages.setComponentZOrder(page, pages.getComponentCount() - 1);
        SwingUtilities.invokeLater(new Runnable() {
            @Override public void run() { doLayout(); }});
    }

    @Override
    public void doLayout() {
        Dimension size = getParent().getSize();
        size.width -= leftButton.getWidth() + rightButton.getWidth();
        pages.setSize(size);
        for (Component page : pages.getComponents()) {
            page.setSize(size);
        }
        super.doLayout();
    }

    private void scrollLeft() {
        direction = true;
        Component next = pages.getComponents()[pages.getComponentCount() - 1];
        pages.setComponentZOrder(next, 1);
        animation.start();
        leftButton.setEnabled(false);
        rightButton.setEnabled(false);
    }

    private void scrollRight() {
        direction = false;
        animation.start();
        leftButton.setEnabled(false);
        rightButton.setEnabled(false);
    }

    @Override
    public void actionPerformed(ActionEvent e) {
        Object src = e.getSource();
        if (src == leftButton) {
            scrollLeft();
        } else if (src == rightButton) {
            scrollRight();
        } else if (src == animation) {
            Component onTop = pages.getComponents()[0];
            onTop.setLocation(onTop.getX() + (direction ? +4 : -4), 0);
            if (Math.abs(onTop.getX()) < onTop.getWidth()) {
                animation.start();
            } else {
                if (direction) {
                    pages.setComponentZOrder(onTop, 1);
                } else {
                    pages.setComponentZOrder(onTop, pages.getComponentCount() - 1);
                }
                onTop.setLocation(0, 0);
                leftButton.setEnabled(true);
                rightButton.setEnabled(true);
            }
        }
    }
    private final JPanel pages = new JPanel(null);
    private final JButton leftButton = new JButton("<<");
    private final JButton rightButton = new JButton(">>");
    private final Timer animation = new Timer(0, this);
    private boolean direction;

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                JFrame frame = new JFrame("Multi pages demo App");

                frame.setLayout(new BorderLayout());
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

                MultiPages multiPage = new MultiPages();
                multiPage.setPreferredSize(new Dimension(250, 100));

                JPanel page;
                page = new JPanel();
                page.setBackground(Color.CYAN);
                page.setLayout(new BorderLayout());
                page.add(new JLabel("First page", SwingConstants.CENTER), BorderLayout.CENTER);
                multiPage.addPage(page);
                page = new JPanel();
                page.setBackground(Color.YELLOW);
                page.setLayout(new BorderLayout());
                page.add(new JLabel("Second page", SwingConstants.CENTER), BorderLayout.CENTER);
                multiPage.addPage(page);
                page = new JPanel();
                page.setBackground(Color.GREEN);
                page.setLayout(new BorderLayout());
                page.add(new JLabel("Third page", SwingConstants.CENTER), BorderLayout.CENTER);
                multiPage.addPage(page);
                page = new JPanel();
                page.setBackground(Color.RED);
                page.setLayout(new BorderLayout());
                page.add(new JLabel("Fourth page", SwingConstants.CENTER), BorderLayout.CENTER);
                multiPage.addPage(page);

                frame.add(multiPage, BorderLayout.CENTER);

                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }
}

For the pros of CardLayout here is the implementation of the same thing without animation because CardLayout doesn't expose it's internal map.

A you can see it's more simple, less code, less bugs...

public class MultiPagesCardLayout extends JPanel implements ActionListener {

   MultiPagesCardLayout() {
      super( new BorderLayout());
      add( _leftBtn , BorderLayout.WEST   );
      add( _pages   , BorderLayout.CENTER );
      add( _rightBtn, BorderLayout.EAST   );
      _leftBtn .addActionListener( this );
      _rightBtn.addActionListener( this );
      _animation.setInitialDelay( 10 );
      _animation.setRepeats( false );
   }

   public void addPage( Component page ) {
      _pages.add( page, "" + ( _pages.getComponentCount() - 1 ));
   }

   @Override
   public void actionPerformed( ActionEvent e ) {
      Object src = e.getSource();
      if( src == _leftBtn ) {
         ((CardLayout)_pages.getLayout()).previous( _pages );
      }
      else if( src == _rightBtn ) {
         ((CardLayout)_pages.getLayout()).next( _pages );
      }
   }

   private final JPanel  _pages     = new JPanel( new CardLayout());
   private final JButton _leftBtn   = new JButton( "<<" );
   private final JButton _rightBtn  = new JButton( ">>" );
   private final Timer   _animation = new Timer( 0, this );

   public static void main( String[] args ) {
      SwingUtilities.invokeLater( new Runnable() {
         @Override public void run() {
            JFrame frame = new JFrame( "Multi pages demo App" );
            frame.setLayout( new BorderLayout());
            frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
            MultiPagesCardLayout multiPage = new MultiPagesCardLayout();
            multiPage.setPreferredSize( new Dimension( 250, 100 ));
            JPanel page;
            page = new JPanel();
            page.setBackground( Color.CYAN );
            page.setLayout( new BorderLayout());
            page.add( new JLabel( "First page", SwingConstants.CENTER ), BorderLayout.CENTER );
            multiPage.addPage( page );
            page = new JPanel();
            page.setBackground( Color.YELLOW );
            page.setLayout( new BorderLayout());
            page.add( new JLabel( "Second page", SwingConstants.CENTER ), BorderLayout.CENTER );
            multiPage.addPage( page );
            page = new JPanel();
            page.setBackground( Color.GREEN );
            page.setLayout( new BorderLayout());
            page.add( new JLabel( "Third page", SwingConstants.CENTER ), BorderLayout.CENTER );
            multiPage.addPage( page );
            page = new JPanel();
            page.setBackground( Color.RED );
            page.setLayout( new BorderLayout());
            page.add( new JLabel( "Fourth page", SwingConstants.CENTER ), BorderLayout.CENTER );
            multiPage.addPage( page );
            frame.add( multiPage, BorderLayout.CENTER );
            frame.pack();
            frame.setLocationRelativeTo( null );
            frame.setVisible( true );
         }});
   }
}

+1 very nice (not sure if this is what OP wants though), however, please watch variable naming, dont prepend `_` before variable names. Edited code accordingly, feel free to change it. — David Kroukamp, Jan 01 '13 at 16:55
Thanks for the compliment. I hate writing "this.", I prefer the "_" prefix. — Aubin, Jan 01 '13 at 17:04
Thank you very much for this detailed answer. Reviewing it now — sisko, Jan 01 '13 at 17:48
Thanks again. It's a lot more detailed if not complicated than I required but it's certainly a great example to study. Appreciated! — sisko, Jan 01 '13 at 17:56
@Aubin no need for `this.` either, simply the variable name? — David Kroukamp, Jan 01 '13 at 18:09
In a function setXXX( T xxx ) where XXX is a property of a class, without prefix the argument and the attribute share the same name, using this is mandatory. The "_" is prefix avoid naming conflict without using "this." Eclipse support this practice very well. — Aubin, Jan 01 '13 at 18:14

score 1 · Answer 2 · answered Jan 01 '13 at 15:45

Here's one way to approach it:

The key is Jpanels. Think of them as mini jframes inside your main jframe. Here's some info on these panels:

http://docs.oracle.com/javase/6/docs/api/javax/swing/JPanel.html

Each button will basically switch the panel displayed, when the button is clicked. Put coding in the action listener.

This method is better than using multiple JFrames.

Swing page-by-page transition (MultiPages Widget)

2 Answers2