Geertjan is a DZone Zone Leader and has posted 466 posts at DZone. You can read more from them at their website. View Full User Profile

How to "Create" an Editor for Java Applications

11.13.2008
| 25545 views |
  • submit to reddit
Rather than creating your own editor whenever you're working on a Java application that needs one, why not use the JSyntaxPane? By means of one single JAR file, your application has access to all of the following editor kits:

How to use it? Nothing simpler than... (1) create a JFrame, (2) add a JEditorPane, and then...

jsyntaxpane.DefaultSyntaxKit.initKit();
jEditorPane.setContentType("text/java");

Note: That's all you need to do. No need to declare "jsyntaxpane" and then initialize it. Simply use it, exactly as above, i.e., use its "initKit" call and then you're done. That one line of code is literally all that's needed, after which you can set the MIME type of your choice. For "text/java", you'll get all of this when you run your JFrame:

From the first screenshot above, you can see which editor kits are available. Then look in the 'jsyntaxpane.kitsfortypes.properties' file, within the META-INF/services folder, and you will see the mappings between MIME types and editor kits:

text/c=jsyntaxpane.syntaxkits.CSyntaxKit
text/cpp=jsyntaxpane.syntaxkits.CppSyntaxKit
text/java=jsyntaxpane.syntaxkits.JavaSyntaxKit
text/groovy=jsyntaxpane.syntaxkits.GroovySyntaxKit
text/javascript=jsyntaxpane.syntaxkits.JavaScriptSyntaxKit
text/xml=jsyntaxpane.syntaxkits.XmlSyntaxKit
text/sql=jsyntaxpane.syntaxkits.SqlSyntaxKit
text/properties=jsyntaxpane.syntaxkits.PropertiesSyntaxKit
text/python=jsyntaxpane.syntaxkits.PythonSyntaxKit
text/tal=jsyntaxpane.syntaxkits.TALSyntaxKit
text/jflex=jsyntaxpane.syntaxkits.JFlexSyntaxKit
text/ruby=jsyntaxpane.syntaxkits.RubySyntaxKit

The editors have a lot of predefined functionality. For example, press Ctrl-F (Find) or Ctrl-H (Replace) and you will have a Find/Replace dialog, which can even highlight the specified word in the editor:

Another very cool predefined feature is code completion. Press Ctrl-Space and your abbreviations will expand to full code snippets. These are defined in 'jsyntaxpane.javasyntaxkit.completion.properties', in the case of Java, as follows:

pu=public |
pr=private |
st=static |
cl=class |
St=String |
fri=for(int i=0; i<10; i++) {\n|
sout=System.out.println(|)
serr=System.err.println(|)
psvm=public static void main(String[] args) {\n|

Note: The pipe symbol indicates where the cursor will find itself when the abbreviation has been expanded.

Similarly, there is such a file for Groovy as well, in 'jsyntaxpane.groovysyntaxkit.completion.properties', in the META-INF/services folder.

And what determines the colors and styles of the code for the editor kits? Yet another properties file, this one called 'jsyntaxpane.syntaxstyles.properties'. Here's the default content:

OPERATOR = 0x000000, 0
KEYWORD = 0x3333ee, 0
KEYWORD2 = 0x3333ee, 3
TYPE = 0x000000, 1
TYPE2 = 0x000000, 3
STRING = 0xcc6600, 0
STRING2 = 0xcc6600, 1
NUMBER = 0x999933, 1
REGEX = 0xcc6600, 0
IDENTIFIER = 0x000000, 0
COMMENT = 0x339933, 2
COMMENT2 = 0x339933, 3
DEFAULT = 0x000000, 0
WARNING = 0xCC0000, 0
ERROR = 0xCC0000, 3


What does it all mean? The keys are the token types, used throughout the editor kits. The values are hexes for the colors, followed by 1, 2, or 3, for "bold", "italic", or "bold & italic". Simple and effective.

At some point you might want to extend/customize the features provided by the JSyntaxPane. There's no way to do so from your own code, as far as I am aware, (which would have been nice): you need to tweak the sources of the JAR. Check out the sources and you'll find you have a Maven POM, among all the other source files. Open the POM in the IDE of your choice and then you can build the sources and browse through them, noticing the JFlex sources (more about these here), which are turned into Java sources in the "target" folder (which is also where the binary JAR will be found):


You can even run the Maven project. You'll find that a tester application is included in the sources, which will be deployed when you run the Maven project, giving you a Swing application where you can try out the different editors, just to see whether they provide the functionality you need:

In short, this is a very powerful JAR that you can simply drop into your application. Read the blog of JSyntaxPane's creator and maintainer, Ayman Al-Sairafi, here. It's a very interesting blog, if you want to keep up with the latest developments of this project.

AttachmentSize
fig-1.png17.94 KB
fig-2.png14.77 KB
fig-4.png21.88 KB
fig-3.png52.52 KB
fig-5.png70.33 KB
fig-6.png20.44 KB
Published at DZone with permission of its author, Geertjan Wielenga.

Comments

Peter Karussell replied on Thu, 2008/11/13 - 3:29pm

Hi,

this is good to know. Looks like an impressive project with a great license (apache 2) and a small jar size (124KB)

Thanks for discovering + explaining it, Geertjan :-)

 

Wong Qil replied on Fri, 2008/11/14 - 9:34am

It's greate, but still need improvement.

The cursor looks  in wrong position when text in editor pane are bold characters.

Ayman Al-sairafi replied on Fri, 2008/11/14 - 2:10pm

Thanks for mentioning my project!  I couldn't have mentioned it any better.

You need to enclose the EditorKit in a JScrollPane, which NetBeans does for you by default, otherwise you will not get line numbers.

 @Wong, can you open an issue of exactly what you are facing, so I can fix it.

Dakshinamurthy Karra replied on Sat, 2008/11/15 - 9:56am

The latest versions of jEdit provides a TextArea component with similar functionality. I am using it in Marathon and it is pretty good.

 

Ken Sayers replied on Sun, 2008/11/16 - 9:06pm

This is great.  Just what I needed in the short term.  It requires Java 6.

Eitan Suez replied on Wed, 2008/11/19 - 6:52pm

does netbeans provide a similar component?  are there others you recommend?  i gave jsyntaxpane a try.  i ran into a number of issues.  first the smart tab completion feature doesn't work very well at all.  in fact it's most annoying try to write code in the editor mainly because of the tab completion feature.  i have to edit the default color of the caret because it doesn't provide enough contrast to really see it.  the text is not antialiased (jdk6u10).  i altered the paint method calls to set the hints in 4 places.  figuring out how to get line numbers to show up was an annoying experiment at trial and error.  it's also not really documented at all.  i had to take a look at the syntaxtester sample program to see how the author does it.  i was surprised to see initKit() being called after initComponents() which made no sense to me.  it turns out you sort of have to setContentType() twice and you have to make sure that the component is added to the scrollpane before you call setContentType or you won't get the line numbers to show.  anyhow, sorry to be so critical.  this component is actually very promising.  but i'm looking for something solid i can use right now.  thanks,/ eitan

Ayman Al-sairafi replied on Thu, 2008/11/20 - 2:36am

@Eitan: I'd appreciate if you simply opened up an issue(s) for the cases you mentioned.  I'll do that myself. 

This component will by no means replace a full IDE like NetBeans or even an editor like JEdit.  It's 160k, and meant for viewing and very light editing of small scripts within your much larger Swing application.

The call to initKit can be placed anywhere before you set the contentType for the EditorPane.  It can be before or after initComponents.  You only need to call setContentType once.  However if you use NetBeans GUI editor, then NetBeans does the setContentType before adding the component to a JScrollPane, so the LineNumbers are not added.  It will be a bit hard to fix this, but a simple workaround is not to set the content type property in the GUI editor and then call the setContentType on the editor after initComponents.  I'll make a note of this as well.

Eitan Suez replied on Thu, 2008/11/20 - 10:01am

hi ayman,

thanks for the personal reply to this comment which i did not expect. :-)  first of all, thank you for creating jsyntaxpane!  i think many of the issues i ran into as i initially tried to use jsyntaxpane can be allayed by adding a simple example tutorial (nothing formal) to the wiki.  a standalone/clean example, nothing tied to netbeans or any specific ide.  separately, it turns out the main issue i had in terms of using the component was the light color (/low contrast) of caret, which after setting to black, made the editor much easier to use.  the command completion, find, and smart editing are all very cool features.  good luck and i'll be logging any issues or suggestions directly as issues to the project, as you suggested.

/ eitan

Parag Joshi replied on Thu, 2009/06/18 - 5:24am

@All, I am using jysyntaxPane for the first time...I have successfully embeded it in my application.. I embed the JEditorPane in JDialog and there I have to use syntax highlighting features. However my problem is when I press CTRL-H or CTRL-F, the Find and Replace dialog appreas behind my dialog.... and therefore I cannot operate it... Can someone suggest how to bring that to the front? Or any other approach where I can type-in in the Find and Replace dialog to search the text

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.