Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Profile photo of dimitry
Dimitry Karpenko
Java/Eclipse developer in MyEclipse and Webclipse teams.

In a previous article we discussed how to create custom bindings for xml editing with Eclipse Sapphire. Custom bindings are a rather powerful way of xml editing customization, but sometimes we need to customize editing on the UI side. In this case we need to use custom editors. Let’s see how this is accomplished.

An Example Custom Editor

To demonstrate, let’s make a simple Sapphire editor for an Android color resources xml file. This editor will allow you to add a new color and edit the color’s name and value. Let’s make this interesting by creating a custom hyperlink control for selecting the color value. This hyperlink has a hex color string (like #ff0000) as text, and given text has a color matching given hex value. The hyperlink can be clicked to change the color value represented by the editor.

Create a Model

Our Model is quite simple – it contains two classes: root element IAndroidResources containing a list of colors and IColor, describing color itself with properties Name and Value, please see the sample project for details.

Create the Editor

Now let’s see how to create the custom editor. We need to implement Presentation and Presentation Factory for our editor. Presentation is the core part here – it’s responsible for the editor UI, lifecycle, showing changed data and setting data after user modification. Since we are creating a custom editor for value property, we need to extend org.eclipse.sapphire.ui.forms.swt.ValuePropertyEditorPresentation.

In createContents() we create a composite containing hyperlink and assist decorator for it; hyperlink is set as the main editing control. But as you can see, you can create any SWT component hierarchy you want here. For additional details, refer to the sample project.

 Now let’s create Presentation Factory which is responsible for creating editor presentation for some particular property:

As you can see, in this case it’s quite simple – it just returns our newly created Presentation instance if we have ValueProperty, but this can be much more complex (e.g., analyzing rendering hints, property annotations, tuning newly created presentation accordingly, etc.).

After this we need to create an sdef file with a UI description for our editor and register our editor in plugin.xml. The UI description sdef file is plain, except Value property, for which we want to use our custom editor:

<hint> with name=factory tells the Sapphire framework which Presentation Factory class to use for presenting this property editor. As you can see, <value> tag contains our Factory’s class name without package name. To make this work, add the following line in the imports section at the beginning of the sdef file.

Now let’s add our editor to plugin.xml, in the same way as our previous example. Please refer to the sample project for details.

And that’s it, our editor is finished!
CustomEditor1

A custom editor for color selection

More Customization

But what if we need to use our custom editor for representing properties that require a different appearance or behavior? No problem, Sapphire suggests several ways for doing this.

Let’s allow the user to customize the look of our hyperlink and make it bold and/or underlined if needed. To accomplish this, let’s use hints, like we used for specifying Presentation Factory above. So, let’s add one more hint to our <property-editor>:

In our ColorPropertyEditorPresentation, let’s add the following code. Two string constants for bold and underlined styles:

After the line this.chooseLink = new Hyperlink(composite, SWT.NONE); in createContents method, let’s add the following code, which obtains our hint and makes necessary styling:

Next, let’s add helper method checkStyle, which checks whether a given string array contains string constant we want:

But what if we need to make some customization in the model, not in the editor’s sdef? That’s not a problem, we just need to create a simple annotation:

Let’s change how we obtain a string with styles in ColorPropertyEditorPresentation.createContents():

And let’s add Style annotation to Value property in IColor:

Now let’s see what the editor looks like.

CustomEditor2
A custom editor for selecting color and style formatting

Notes on Custom Editors

  • Custom editors should only be used for truly custom UI (e.g., color chooser, image selector, music file selector with ability to play, etc.). If you only need to customize how your property value is being read/written into the xml file, use custom bindings instead. If you need a simple text field, but have a custom dialog to select/modify its value, it can be done with a custom browsing action.
  • Before building your own custom editor, take a closer look at hints provided by Sapphire for customizing the look and behavior of standard Sapphire controls – maybe you’ll find what you need there.
  • Before implementing your own Presentation, take a look at org.eclipse.sapphire.ui.forms.swt.ValuePropertyEditorPresentation subclasses for how standard presentations are implemented. If you create a custom editor placed near another editor, it is good practice to add the same assist/error decorator, indent controls in the same way, etc.

Attachments

Sample Project—sapphire_customeditor_tutorial

Colors.xml (zipped)—colors.xml

Let Us Hear from You!

If you have any comments or questions, we would love to hear from you @MyEclipseIDE on twitter or via the MyEclipse forum. Happy coding!

 

Related Posts

Introducing DevStyle – Rebooting EclipseR... Yesterday we released the first production version of DevStyle, a free add-on for Eclipse. DevStyle seeks to dramatically improve the Eclipse user experience for millions of developers with the introduction of modern developer ergonomics and the beautiful styling you’ve come to expect from products in 2017.Over the years, the Eclipse evolution has ...
Set Up and Use a Fake REST API with Angular Often, when developing Angular applications, you do not have the backing REST APIs ready for testing. To avoid having to digress into developing web services, or being blocked, waiting for your back end team to provide them, you can use JSON server to provide a "fake" API. This article will show you how to use Angular IDE and JSON Server to set up ...
Angular 5 Features Front-end developers, rejoice - after a short delay, the Angular 5 release is scheduled for October 23rd!Update (November 1st): It's finally here! After ten release candidates, Angular version 5.0.0, "pentagonal-donut", has been released.Update (October 31st): Well, we're still waiting for Angular version 5, and we're now at 5.0.0 RC 9 - but, I'm s...
Creating a Bus Fare Comparison App with Angular 4 ... In this Angular tutorial, you will learn how to create an app to compare bus fares. We will be using Angular IDE to create our application, which will fetch bus fare data using goibibo's web services.Creating a New Angular ProjectIn the new Angular project wizard, enter BusFareCompare as the project name. We used Angular CLI version 1.1.0, Node.js ...

Posted on Oct 27th 2015