Slider-style property editors

I’ve just been working on a new feature to integrate a slider-style editor for numbers within the property dialogs (and tab) in Praxis. This is much quicker to use than the current system of opening a dialog with a slider, so it’s great to finally get it done.  It will be in the next release.  More info and source below.

This is a feature I’ve wanted to integrate for a while, but was a little more awkward than just plonking a slider on screen, for a variety of reasons.

  • The editor has to be integrated with the NetBeans platform Property API.
  • The editor should show the textual value and a graphical representation of the position (ie. the line above) at all times.
  • The whole surface area should be drag-able.  I generally hate the thumbs on most sliders – or at least the fun of trying to hit one with the mouse in a hurry! :-)
  • The value should still be editable as text if the user clicks on the field, or focuses the field using the keyboard.

The finished (for now) result

Here you can see the result of dragging within the editor. There’s a subtle swap of the colours of the text and slider (line) to let you know you’ve focused the slider element and can drag to alter.  Mind you, I do wonder if it looks a little too much like a cursor at the moment?

And, you can still click or use the keyboard (space key) to focus and edit the value directly.

The editor currently only works for properties that are always numeric, and have a defined minimum and maximum.  This does cover the majority of cases, and I have a plan for an unbounded editor (something akin to a jog wheel) which can work elsewhere.  I’m also going to investigate ways of increasing precision, possibly using the shift-key or vertical position.

The Code

If you’re interested in the code for this feature, you can find the source here – it’s a bit big to post as a whole!  I’ve linked the specific revision as well, as this code is likely to develop over time.  This could easily be tweaked to work in any NetBeans platform application – though the following pointers might help.

  • The code extends JComponent and implements InplaceEditor.
  • The editor currently works with PNumber, which is Praxis’ numeric type, and almost the same as Double.  Changing to work with any other numeric type should be easy.
  • The editor has one child, a JTextField, which is hidden by default.  This is made visible and focused as required to allow text editing.  See the code in addNotify() which focuses the text field immediately if the current event isn’t a mouse event.  The mouse listener inner class deals with mouse clicks and dragging.
  • Note the paintValue() method, which is package private.  This is used from paintComponent() when the text field is invisible, and also from the NumberEditor‘s paintValue() to ensure that the component looks the same whether editing or not.
  • The code in updateValue() currently directly updates the property.  This is generally seen as a big no no within an InplaceEditor, however I also don’t see the point of a slider controlling an audio or video effect if you can’t get audible or visual feedback as you alter the value!  This currently works fine within the Property tab or a PropertySheet, but it might break elsewhere.

The code is part of Praxis which is GPL’d.  However, you can always ask if you want to use it elsewhere! :-)

About these ads

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