How to add flashy transition arrows?

I've a JPanel with content and would like to surround it with arrows such that when you click on one the jpanel changes (to another). I've been accustomed to this UI pattern开发者_如何学JAVA/idiom I suppose in flash but coudln't find it anymore. Usually clicking around the arrows also has the effect of clicking on the arrow, which flashes when selected.

Questions: 1. Any exmaple to refer to what I'm talking about even in flash? 2. Know of a library that does that in Java? Perhaps with JavaFX? 3. Sample app/code?

This can be done with ordinary Swing.

Suggestion:

1. Use CardLayout for easy container switching
2. Use BasicArrowButton for directional buttons

I'll provide an SSCCE shortly. In the meantime, see also:

• How to Use CardLayout
• Swing Arrow Buttons

Here's quite a lengthy SSCCE:

public final class SwingTransitionDemo {
    public static void main(String[] args){
        SwingUtilities.invokeLater(new Runnable(){
            @Override
            public void run() {
                createAndShowGUI();             
            }
        });
    }

    private static void createAndShowGUI(){
        final JFrame frame = new JFrame("Swing Transition Demo");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.getContentPane().add(JMainPane.newInstance());
        frame.pack();
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }

    private static final class JMainPane extends JPanel{
        private static final int PAD = 5;

        private JMainPane(){
            super(new GridBagLayout());
            setBackground(Color.PINK);
            GridBagConstraints c = new GridBagConstraints();

            // Create north button
            c.gridx = 1;
            c.gridy = 0;
            c.insets = new Insets(PAD, 0, PAD, 0);
            c.fill = GridBagConstraints.HORIZONTAL;
            final BasicArrowButton north = new BasicArrowButton(BasicArrowButton.NORTH);
            north.addActionListener(BasicArrowButtonActionListener.getInstance());
            add(north, c);

            // Create west button
            c.gridx = 0;
            c.gridy = 1;
            c.insets = new Insets(0, PAD, 0, PAD);
            c.fill = GridBagConstraints.VERTICAL;
            final BasicArrowButton west = new BasicArrowButton(BasicArrowButton.WEST);
            west.addActionListener(BasicArrowButtonActionListener.getInstance());
            add(west, c);

            c.gridx = 1;
            c.gridy = 1;
            c.fill = GridBagConstraints.VERTICAL;
            add(JCardPane.getInstance(), c);

            // Create east button
            c.gridx = 2;
            c.gridy = 1;
            c.insets = new Insets(0, PAD, 0, PAD);
            c.fill = GridBagConstraints.VERTICAL;
            final BasicArrowButton east = new BasicArrowButton(BasicArrowButton.EAST);
            east.addActionListener(BasicArrowButtonActionListener.getInstance());
            add(east, c);

            // Create south button
            c.gridx = 1;
            c.gridy = 2;
            c.insets = new Insets(PAD, 0, PAD, 0);
            c.fill = GridBagConstraints.HORIZONTAL;
            final BasicArrowButton south = new BasicArrowButton(BasicArrowButton.SOUTH);
            south.addActionListener(BasicArrowButtonActionListener.getInstance());
            add(south, c);
        }

        public static final JMainPane newInstance(){
            return new JMainPane();
        }

        private static final class JCardPane extends JPanel{
            private static JCardPane INSTANCE;

            private JCardPane(){
                super(new CardLayout());
                setBorder(BorderFactory.createLineBorder(Color.BLACK));
                add(Box.createRigidArea(new Dimension(200, 200)), "");
                add(Card.newInstance(Color.RED, "North"), String.valueOf(BasicArrowButton.NORTH));
                add(Card.newInstance(Color.ORANGE, "WEST"), String.valueOf(BasicArrowButton.WEST));
                add(Card.newInstance(Color.CYAN, "SOUTH"), String.valueOf(BasicArrowButton.SOUTH));
                add(Card.newInstance(Color.GREEN, "EAST"), String.valueOf(BasicArrowButton.EAST));
            }

            public static final JCardPane getInstance(){
                if(INSTANCE == null){
                    INSTANCE = new JCardPane();
                }

                return INSTANCE;
            }

            @Override
            public Dimension getPreferredSize(){
                return new Dimension(200, 200); // for demonstration purposes only
            }

            private static final class Card extends JPanel{
                private Card(final Color c, final String s){
                    super();
                    setLayout(new BoxLayout(this, BoxLayout.Y_AXIS));
                    setBackground(c);

                    // Create components
                    add(Box.createVerticalGlue());
                    final JLabel label = new JLabel(s);
                    label.setAlignmentX(CENTER_ALIGNMENT);
                    add(label);
                    add(Box.createVerticalGlue());
                }

                public static final Card newInstance(final Color c, final String s){
                    return new Card(c, s);
                }
            }
        }

        private static final class BasicArrowButtonActionListener implements ActionListener{
            private static BasicArrowButtonActionListener INSTANCE;

            private BasicArrowButtonActionListener(){} // prevent external instantiation

            public static final BasicArrowButtonActionListener getInstance(){
                if(INSTANCE == null){
                    INSTANCE = new BasicArrowButtonActionListener();
                }

                return INSTANCE;
            }

            @Override
            public void actionPerformed(ActionEvent e) {                
                CardLayout cl = (CardLayout)JCardPane.getInstance().getLayout();
                cl.show(JCardPane.getInstance(), String.valueOf((((BasicArrowButton)e.getSource()).getDirection())));
            }
        }
    }
}

Initial display

And if you click, let's say, the "south" directional arrow...

This uses various layouts, including GridBagLayout, BoxLayout, and CardLayout. Keep in mind that a majority of this code is just filler. Play around with it and let me know if that's in the ballpark!

See also:

• Laying Out Components Within a Container