Geertjan's Blog

  • August 16, 2006

Extend the NetBeans Editor with Hyperlinks

Geertjan Wielenga
Product Manager
Wouldn't it be cool if, while editing an HTML file, you'd be able to click on a tag and jump to its definition in the CSS file? In NetBeans IDE, there's the concept of hyperlinking. You hold down the Ctrl key, move your mouse over an identifier and—as if by magic—the cursor becomes a hand and the identifier gets underlined in blue... just like any old hyperlink on the web. Then you click on the hyperlink and jump to the definition (of whatever it is).

This has been implemented in various places in various IDE editors and is also very relevant in the context of framework providers, because frameworks tend to come with their own language subsets (for example, Struts and JSF both come with distinctive configuration files with tags that are specific to their framework) and being able to rapidly navigate between framework-specific artifacts speeds up development time, which is one of the most important reasons of providing framework support to an IDE in the first place.

The main NetBeans API class that you're dealing with in the context of hyperlinking is this one:

Interface HyperlinkProvider

In the context of the Wicket module, hyperlink support is also provided, for navigation between the rendering side (HTML) and the creation side (Java) of Wicket web pages. Here's where you can have a look at the most important files involved in this aspect of framework support (these are created by Petr Pisl, who also created the versions for JSF and Struts, as well as their underpinning API):



JMIUtil .java

Finally, after creating derivatives of the above for your own hyperlinking implementation, you need to add registration declarations to the layer.xml file.

So, back to the start of this blog entry... hyperlinking from HTML tags to their CSS definitions. Let's say the CSS file looks like this:

h1 {background-color: #00ff00}
h2 {background-color: #11ff00}
h3 {background-color: #22ff00}
h4 {background-color: #33ff00}

From within my HTML file, I'd like to be able to click on my H1, H2, H3, or H4 tags and be able to have the IDE open the CSS file and put the cursor on the line defining the tag. So, this is how it looks in the HTML file:

When I click on any of H1, H2, H3, or H4, the CSS file opens and the cursor lands on the associated line in the CSS file. The only thing I've assumed, for the sake of keeping the sample simple, is that the CSS file has the same name and directory structure as the HTML file. (If it doesn't have the same name and isn't in the same directory structure, an ugly error is thrown. An ugly error also comes your way if the related CSS line doesn't exist, i.e., you click on H2 but there's no definition of H2 in the CSS file.) Aside from these issues, this is a fully functioning module providing support for the abovementioned scenario.


Download the module from the link above, install it in NetBeans IDE 5.5 Beta 2 (any other version will probably give you dependency problems), go to the New Project wizard and find your new sample in the Samples | NetBeans Plug-in Modules category. Then install it and use the sample.html and sample.css files to test out the functionality. Hold down the Ctrl key, move the mouse over one of the H tags, click the link and notice that the CSS file opens with the cursor on the line relating to the selected H tag. Then go ahead and adapt the sample for your own purposes.

Join the discussion

Comments ( 2 )
  • Dyego Souza do Carmo Tuesday, November 27, 2007

    Hello... i need to extend java editor... put a hint in editor to fix my classes with my internal framework... BUT... i don't know how to this...

    any ideia ?

  • Geertjan Tuesday, November 27, 2007

    Please write to dev@openide.netbeans.org with this question. Thanks.

Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.