Embedded Satellite View Redux

This is something I’ve been meaning to write up for a couple of months now …

Praxis LIVE uses the NetBeans visual library to create a patcher-style graph editor.  The first EA release of Praxis LIVE had the satellite view for this graph editor inside a separate (Navigator) component, which proved to be a real usability nightmare in practice.  I then saw Geertjan’s post about an Embedded Satellite Panel (with due thanks to Lukasz Jopek), which inspired me to look at embedding the satellite view within the graph editor itself.  Having the satellite view in the top left still felt awkward in practice though – the bottom right feels more natural for me in use.

This code swaps FlowLayout for GridBagLayout, which gives much greater flexibility in positioning the satellite view.  The weight parameters ensure the grid cell takes up the whole of the available area, and the anchor and inset parameters place our satellite view in the bottom-right corner, with a neat gap from the the edge.

The other change is to make the panel holding the satellite view opaque, which feels a bit neater.

JPanel viewPanel = new JPanel(new BorderLayout());
JScrollPane scroll = new JScrollPane(
  scene.createView(),
  JScrollPane.VERTICAL_SCROLLBAR_ALWAYS,
  JScrollPane.HORIZONTAL_SCROLLBAR_ALWAYS);
viewPanel.add(scroll, BorderLayout.CENTER);

JPanel satellitePanel = new JPanel();
satellitePanel.setLayout(new GridBagLayout());
GridBagConstraints gbc = new GridBagConstraints();
gbc.weightx = 1;
gbc.weighty = 1;
gbc.insets = new Insets(0,0,25,25);
gbc.anchor = GridBagConstraints.SOUTHEAST;
JComponent view = scene.createSatelliteView();
JPanel holder = new JPanel(new BorderLayout());
holder.setBorder(new LineBorder(Color.LIGHT_GRAY, 1));
holder.add(view);
satellitePanel.add(holder, gbc);
satellitePanel.setOpaque(false);

panel = new JLayeredPane();
panel.setLayout(new OverlayLayout(panel));
panel.add(viewPanel, JLayeredPane.DEFAULT_LAYER);
panel.add(satellitePanel, JLayeredPane.PALETTE_LAYER);

The result …

Source code in context.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s