How to "Create" an Editor for Java Applications
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.
| Attachment | Size |
|---|---|
| fig-1.png | 17.94 KB |
| fig-2.png | 14.77 KB |
| fig-4.png | 21.88 KB |
| fig-3.png | 52.52 KB |
| fig-5.png | 70.33 KB |
| fig-6.png | 20.44 KB |





Comments
Peter ___ 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
Eitan Suez replied on Wed, 2008/11/19 - 6:52pm
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