<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml"> | |
<head> | |
<!-- -*- xhtml -*- --> | |
<title>NetBeans Code Snippet Module Tutorial for the NetBeans Platform</title> | |
<link rel="stylesheet" type="text/css" href="https://netbeans.org/netbeans.css"/> | |
<meta name="AUDIENCE" content="NBUSER"/> | |
<meta name="TYPE" content="ARTICLE"/> | |
<meta name="EXPIRES" content="N"/> | |
<meta name="developer" content="gwielenga@netbeans.org"/> | |
<meta name="indexed" content="y"/> | |
<meta name="description" | |
content="A short guide to using the Palette API."/> | |
<!-- Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. --> | |
<!-- Use is subject to license terms.--> | |
</head> | |
<body> | |
<h1>NetBeans Code Snippet Module Tutorial</h1> | |
<p>This tutorial demonstrates how to create and add code snippets to the HTML/JSP Component Palette. Code snippets are small pieces of code | |
that can be dragged from a component palette and dropped in the Source Editor. They serve to speed up coding. The HTML/JSP Component Palette | |
has several code snippets already, but you might want to add some additional ones and share them with others.</p> | |
<p><strong class="notes">Note: </strong>This document uses NetBeans Platform 7.2 | |
and NetBeans IDE 7.2. If you | |
are using an earlier version, see <a href="71/nbm-palette-api1.html">the previous version | |
of this document</a>.</p> | |
<p><b>Contents</b></p> | |
<p><img src="../images/articles/74/netbeans_stamp_74_73_72.png" class="stamp" width="114" height="114" alt="Content on this page applies to NetBeans IDE 7.2" title="Content on this page applies to NetBeans IDE 7.2"/></p> | |
<ul class="toc"> | |
<li><a href="#intro">Introduction to Code Snippets</a></li> | |
<li>Scenario 1: Simple Palette Items | |
<ul> | |
<li><a href="#simple-1">Creating the Module Project</a></li> | |
<li><a href="#simple-2">Defining and Registering the Code Snippet</a></li> | |
</ul> | |
</li> | |
<li>Scenario 2: Complex Palette Items | |
<ul> | |
<li><a href="#complex-1">Creating the Module Project</a></li> | |
<li><a href="#complex-2">Setting Up the Module Project</a></li> | |
<li><a href="#complex-3">Coding the Code Snippet</a></li> | |
<li><a href="#complex-4">Defining the Insertion</a></li> | |
<li><a href="#complex-5">Declaring the Code Snippet</a></li> | |
<li><a href="#complex-6">Registering the Code Snippet</a></li> | |
<li><a href="#complex-7">Building and Installing the Code Snippet</a></li> | |
<li><a href="#complex-8">Adding a Customizer</a></li> | |
</ul> | |
</li> | |
</ul> | |
<p><b>To follow this tutorial, you need the software and resources listed in the following | |
table.</b></p> | |
<table> | |
<tbody> | |
<tr> | |
<th class="tblheader" scope="col">Software or Resource</th> | |
<th class="tblheader" scope="col">Version Required</th> | |
</tr> | |
<tr> | |
<td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE</a></td> | |
<td class="tbltd1">version 7.2 or above</td> | |
</tr> | |
<tr> | |
<td class="tbltd1"><a href="http://java.sun.com/javase/downloads/index.jsp">Java Developer Kit (JDK)</a></td> | |
<td class="tbltd1">version 7 or above</td> | |
</tr> | |
</tbody> | |
</table> | |
<h2 class="tutorial"><a name="intro"></a>Introduction to Code Snippets</h2> | |
<p>To create a code snippet, you use the | |
<a href="http://bits.netbeans.org/dev/javadoc/org-netbeans-spi-palette/overview-summary.html">NetBeans Palette API</a>. | |
A code snippet requires the following files:</p> | |
<ul> | |
<li>A Java class that defines the piece of code to be dragged into the Source Editor.</li> | |
<li>A display name for the palette item.</li> | |
<li>A tooltip for the palette item.</li> | |
<li>A 16x16 pixel image for the 'Small Icon' display.</li> | |
<li>A 32x32 pixel image for the 'Big Icon' display.</li> | |
</ul> | |
<p>After you have created or added the above files to the NetBeans module, you declare them in a resource declaration XML file, | |
which you register in the NetBeans System Filesystem by using the <tt>layer.xml</tt> file.</p> | |
<p>You will learn about two different scenarios in this tutorial. The first scenario | |
is simple, requiring no coding, and is useful if you do not need a customizer | |
to appear when the palette item is dropped. The second scenario is more complex, | |
and therefore more flexible, requiring you to provide Java code to define | |
a customizer.</p> | |
<h2 class="tutorial"><a name="creatingthemoduleproject"></a>Scenario 1: Simple Palette Items</h2> | |
<p>Before you start writing the module, you have to make sure you | |
that your project is set up correctly. The IDE provides a wizard that sets up all the basic files | |
needed for a module.</p> | |
<div class="indent"> | |
<h3 class="tutorial"><a name="simple-1"></a>Creating the Module Project</h3> | |
<div class="indent"> | |
<ol> | |
<li>Choose File > New Project (Ctrl+Shift+N). Under Categories, select NetBeans Modules. | |
Under Projects, select Module. Click Next.</li> | |
<li>In the Name and Location panel, type <tt>NewSnippets1</tt> in the Project Name field. | |
Change the Project Location to any directory on your computer. Click Next.</li> | |
<li>In the Basic Module Configuration panel, type <tt>org.netbeans.modules.newsnippets1</tt> | |
in Code Name Base. Click Finish.</li> | |
</ol> | |
</div> | |
<p> The IDE creates the <tt>NewSnippets1</tt> | |
project. The project contains all of your sources and | |
project metadata, such as the project's Ant build script. The project | |
opens in the IDE. You can view its logical structure in the Projects window (Ctrl-1) and its | |
file structure in the Files window (Ctrl-2). | |
</p> | |
<h3 class="tutorial"><a name="simple-2"></a>Defining and Registering the Code Snippet</h3> | |
<p>You need to create an XML file that defines the code snippet, together | |
with a registration in the XML layer file.</p> | |
<div class="indent"> | |
<ol> | |
<li>Create an XML file named BR.xml, with this content: | |
<pre class="examplecode"><?xml version="1.0" encoding="UTF-8"?> | |
<!DOCTYPE editor_palette_item PUBLIC "-//NetBeans//Editor Palette Item 1.1//EN" | |
"https://netbeans.org/dtds/editor-palette-item-1_1.dtd"> | |
<editor_palette_item version="1.0"> | |
<body><![CDATA[ <br> ]]></body> | |
<icon16 urlvalue="org/netbeans/modules/newsnippets1/BR16.png" /> | |
<icon32 urlvalue="org/netbeans/modules/newsnippets1/BR32.png" /> | |
<inline-description> | |
<display-name>New Line</display-name> | |
<tooltip><![CDATA[ <br> ]]></tooltip> | |
</inline-description> | |
</editor_palette_item></pre> | |
</li> | |
<li> | |
<p>Add two icons to the module, such as these below, in locations defined by the <tt>icon16</tt> element | |
and the <tt>icon32</tt> element above:</p> | |
<p><img src="../images/tutorials/codesnippet/BR32.png" alt="BR32"/></p> | |
<p><img src="../images/tutorials/codesnippet/BR16.png" alt="BR16"/></p> | |
</li> | |
<li><p>Right-click the module, choose New | Other | |
and then Module Development | XML Layer, as shown below:</p> | |
<br/> | |
<p><img src="../images/tutorials/codesnippet/72/new-layer.png" alt="new bundle keys"/></p> | |
<br/> | |
<p>Complete the wizard and your module will have a new layer file, where | |
you can register new items into the filesystem of the application | |
when the module is installed.</p> | |
</li> | |
<li>Between the <tt>filesystem</tt> tags, register the code snippet | |
as follows: | |
<pre class="examplecode"><folder name="HTMLPalette"> | |
<folder name="HTML"> | |
<file name="BR.xml" url="BR.xml"> | |
<attr name="position" intvalue="150"/> | |
</file> | |
</folder> | |
</folder></pre> | |
</li> | |
<li> | |
<p>Check that the source structure of your module is as follows:</p> | |
<br/> | |
<p><img src="../images/tutorials/codesnippet/72/new-snippets-1.png" alt="new bundle keys"/></p> | |
</li> | |
</ol> | |
</div> | |
</div> | |
<p>Run the module. Open an HTML file. In the Palette (Ctrl-Shift-8), notice an item | |
named "New Line". Drag it into the HTML file and drop it. You should | |
see a BR tag added at the point where you dropped the item. | |
</p> | |
<h2 class="tutorial"><a name="creatingthemoduleproject"></a>Scenario 2: Complex Palette Items</h2> | |
<p>Before you start writing the module, you have to make sure you | |
that your project is set up correctly. The IDE provides a wizard that sets up all the basic files | |
needed for a module.</p> | |
<div class="indent"> | |
<h3 class="tutorial"><a name="complex-1"></a>Creating the Module Project</h3> | |
<div class="indent"> | |
<ol> | |
<li>Choose File > New Project (Ctrl+Shift+N). Under Categories, select NetBeans Modules. | |
Under Projects, select Module. Click Next.</li> | |
<li>In the Name and Location panel, type <tt>NewSnippets2</tt> in the Project Name field. | |
Change the Project Location to any directory on your computer. Click Next.</li> | |
<li>In the Basic Module Configuration panel, type <tt>org.netbeans.modules.newsnippets2</tt> | |
in Code Name Base. Click Finish.</li> | |
</ol> | |
</div> | |
<p> The IDE creates the <tt>NewSnippets2</tt> | |
project. The project contains all of your sources and | |
project metadata, such as the project's Ant build script. The project | |
opens in the IDE. You can view its logical structure in the Projects window (Ctrl-1) and its | |
file structure in the Files window (Ctrl-2).</p> | |
<h3 class="tutorial"><a name="complex-2"></a>Specifying the Module's Dependencies</h3> | |
<p>You will need to use several classes that belong to the <a href="http://bits.netbeans.org/dev/javadoc/index.html">NetBeans APIs</a>. | |
Each has to be declared as a module dependency. Use the Project Properties dialog box for this purpose, | |
as described below.</p> | |
<div class="indent"> | |
<ol> | |
<li>In the Projects window, right-click the <tt>NewSnippets2</tt> project node and choose Properties. | |
In the Project Properties dialog box, click Libraries.</li> | |
<li><p>For each of the following, click "Add...", | |
select the name from the Module list, and then click OK to confirm it:</p> | |
<ul> | |
<li>Common Palette</li> | |
<li>Text API</li> | |
<li>Utilities API</li> | |
</ul> | |
<p>Click OK to exit the Project Properties dialog box.</p></li> | |
<li>In the Projects window, expand the Important Files node, double-click the Project Metadata node, and note that the APIs you selected have been | |
declared as module dependencies.</li> | |
</ol> | |
</div> | |
<h3 class="tutorial"><a name="complex-3"></a>Coding the Code Snippet</h3> | |
<p>In this section, you create <tt>BR.java</tt>, which defines | |
a code snippet for an HTML line break. By implementing the | |
<tt><a href="http://bits.netbeans.org/dev/javadoc/org-openide-text/org/openide/text/ActiveEditorDrop.html">ActiveEditorDrop</a></tt> class, | |
you let the NetBeans APIs provide the infrastructure for | |
a palette item for NetBeans editors. You also | |
create <tt>HTMLPaletteUtilities.java</tt>, which defines | |
the insertion of the tag in the editor.</p> | |
<div class="indent"> | |
<ol> | |
<li>Right-click the <tt>org.netbeans.modules.newsnippets2</tt> node and | |
choose New > Java Class. Type <tt>BR</tt> in Class Name, make sure that the <tt>org.netbeans.modules.newsnippets2</tt> | |
package is selected in the Package drop-down list, and click Finish.</li> | |
<li>Replace the default content of the <tt>BR.java</tt> file with the following: | |
<pre class="examplecode">package org.netbeans.modules.newsnippets2; | |
import javax.swing.text.BadLocationException; | |
import javax.swing.text.JTextComponent; | |
import org.netbeans.modules.newsnippets2.HTMLPaletteUtilities; | |
import <a href="http://bits.netbeans.org/dev/javadoc/org-openide-text/org/openide/text/ActiveEditorDrop.html">org.openide.text.ActiveEditorDrop</a>; | |
public class BR implements <a href="http://bits.netbeans.org/dev/javadoc/org-openide-text/org/openide/text/ActiveEditorDrop.html">ActiveEditorDrop</a> { | |
public BR() { | |
} | |
private String createBody() { | |
String Br = "<br>"; | |
return Br; | |
} | |
@Override | |
public boolean <a href="http://bits.netbeans.org/dev/javadoc/org-openide-text/org/openide/text/ActiveEditorDrop.html#handleTransfer(javax.swing.text.JTextComponent)">handleTransfer(JTextComponent targetComponent</a>) { | |
String body = createBody(); | |
try { | |
HTMLPaletteUtilities.insert(body, targetComponent); | |
} catch (BadLocationException ble) { | |
return false; | |
} | |
return true; | |
} | |
}</pre></li> | |
</ol> | |
</div> | |
<p class="tips">A red error message remains because you have not created the <tt>HTMLPaletteUtilities</tt> | |
class yet, which you will do in the next section.</p> | |
<h3 class="tutorial"><a name="complex-4"></a>Defining the Insertion</h3> | |
<p>In this section, you create the <tt>HTMLPaletteUtilities</tt> class, which | |
defines the place where the snippet will be dropped.</p> | |
<div class="indent"> | |
<ol> | |
<li>Right-click the <tt>org.netbeans.modules.newsnippets2</tt> node and | |
choose New > Java Class. Type <tt>HTMLPaletteUtilities</tt> in Class Name, make sure that the <tt>org.netbeans.modules.newsnippets2</tt> | |
package is selected in the Package drop-down list, and click Finish.</li> | |
<li>Replace the default content of the <tt>HTMLPaletteUtilities.java</tt> file with the following: | |
<pre class="examplecode">package org.netbeans.modules.newsnippets2; | |
import javax.swing.text.BadLocationException; | |
import javax.swing.text.Caret; | |
import javax.swing.text.Document; | |
import javax.swing.text.JTextComponent; | |
import javax.swing.text.StyledDocument; | |
import <a href="https://netbeans.org/download/dev/javadoc/org-openide-text/org/openide/text/NbDocument.html">org.openide.text.NbDocument</a>; | |
public class HTMLPaletteUtilities { | |
public static void insert(final String s, final JTextComponent target) throws BadLocationException { | |
final StyledDocument doc = (StyledDocument)target.getDocument(); | |
class AtomicChange implements Runnable { | |
@Override | |
public void run() { | |
Document value = target.getDocument(); | |
if (value == null) | |
return; | |
try { | |
insert(s, target, doc); | |
} catch (BadLocationException e) {} | |
} | |
} | |
try { | |
<a href="https://netbeans.org/download/dev/javadoc/org-openide-text/org/openide/text/NbDocument.html#runAtomicAsUser(javax.swing.text.StyledDocument,%20java.lang.Runnable)">NbDocument.runAtomicAsUser(doc, new AtomicChange())</a>; | |
} catch (BadLocationException ex) {} | |
} | |
private static int insert(String s, JTextComponent target, Document doc) throws BadLocationException { | |
int start = -1; | |
try { | |
<b>//firstly, find selected text range:</b> | |
Caret caret = target.getCaret(); | |
int p0 = Math.min(caret.getDot(), caret.getMark()); | |
int p1 = Math.max(caret.getDot(), caret.getMark()); | |
doc.remove(p0, p1 - p0); | |
<b>//then, replace selected text range with the inserted one:</b> | |
start = caret.getDot(); | |
doc.insertString(start, s, null); | |
} catch (BadLocationException ble) {} | |
return start; | |
} | |
}</pre></li> | |
</ol> | |
</div> | |
</div> | |
<!-- <h2><a name="registering-module"></a>Declaring and Registering the Code Snippet</h2> | |
<p>Code snippets are registered in two phases. Firstly, you declare | |
a code snippet in an XML file that conforms to the | |
NetBeans Editor Palette Item DTD. | |
In this XML file, you declare your <tt>ActiveEditorDrop</tt> implementation | |
class, a 16x16 pixel icon, a 32x32 pixel icon, a display name, | |
and a tooltip.</p> | |
<p><strong class="notes">Note: </strong>Use the 1.0 version of the DTD if you | |
want the display name and tooltip to be defined in a properties | |
file. Use the 1.1 version of the DTD if you want to declare the | |
display name and tooltip witin the XML file itself. Both approaches | |
are described below.</p> | |
<p>Secondly, you register the XML file in the <tt>layer.xml</tt> file, | |
which you will create in this section.</p>--> | |
<div class="indent"> | |
<h3 class="tutorial"><a name="complex-5"></a>Declaring the Code Snippet</h3> | |
<p>The NetBeans Editor Palette Item DTD is used to | |
declare the <tt>ActiveEditorDrop</tt> class, the icons, the | |
display name, and the tooltip.</p> | |
<div class="indent"> | |
<ol> | |
<li>Right-click the <tt>org.netbeans.modules.newsnippets2</tt> package node and | |
choose New > Other. Select XML Document in the XML folder and click Next. | |
Type <tt>BR</tt> in File Name. Type <tt>\resources</tt> at the end of <tt>src\org\netbeans\modules\newsnippets2</tt> in Folder. | |
Click Next and then click Finish.</li> | |
<li>Replace the default content of the <tt>BR.xml</tt> file with the following: | |
<pre class="examplecode"><?xml version="1.0" encoding="UTF-8"?> | |
<!DOCTYPE editor_palette_item PUBLIC "-//NetBeans//Editor Palette Item 1.0//EN" | |
"https://netbeans.org/dtds/editor-palette-item-1_0.dtd"> | |
<editor_palette_item version="1.0"> | |
<class name="org.netbeans.modules.newsnippets2.BR" /> | |
<icon16 urlvalue="org/netbeans/modules/newsnippets2/resources/BR16.png" /> | |
<icon32 urlvalue="org/netbeans/modules/newsnippets2/resources/BR32.png" /> | |
<description localizing-bundle="org.netbeans.modules.newsnippets2.Bundle" | |
display-name-key="NAME_html-BR" | |
tooltip-key="HINT_html-BR" /> | |
</editor_palette_item></pre> | |
<p>Instead of the above, you can use the 1.1 DTD, where you can define the display name and tooltip without | |
using a properties file. Below, only the difference with the previous | |
XML file definition is highlighted:</p> | |
<pre class="examplecode"><?xml version="1.0" encoding="UTF-8"?> | |
<!DOCTYPE editor_palette_item PUBLIC "<b>-//NetBeans//Editor Palette Item 1.1//EN</b>" | |
"https://netbeans.org/dtds/<b>editor-palette-item-1_1.dtd</b>"> | |
<editor_palette_item version="1.0"> | |
<class name="org.netbeans.modules.newsnippets2.BR" /> | |
<icon16 urlvalue="org/netbeans/modules/newsnippets2/resources/BR16.png" /> | |
<icon32 urlvalue="org/netbeans/modules/newsnippets2/resources/BR32.png" /> | |
<b><inline-description> | |
<display-name>New Line</display-name> | |
<tooltip> <![CDATA[ <br> ]]></tooltip> | |
</inline-description></b> | |
</editor_palette_item></pre> | |
<p><strong class="notes">Note: </strong>You can choose either of the two | |
approaches above, depending on your requirements.</p></li> | |
<li><p>Add a 16x16 pixel icon and a 32x32 pixel icon to the new <tt>resources</tt> folder. Name them | |
<tt>BR16.png</tt> and <tt>BR32.png</tt>. They can also be in other icon formats, such as GIF or JPG. Make sure that | |
the resource is correctly declared in the <tt>BR.xml</tt> file. You can | |
right-click them here and then save them to your module's source | |
structure:</p> | |
<p><img src="../images/tutorials/codesnippet/BR32.png" alt="BR32"/></p> | |
<p><img src="../images/tutorials/codesnippet/BR16.png" alt="BR16"/></p></li> | |
<li><p>If you want to use a properties file | |
for declaring the palette item's display name | |
and tooltip, which implies that you are using the 1.0 DTD, | |
add the following to the <tt>Bundle.properties</tt> file:</p> | |
<p><img src="../images/tutorials/codesnippet/bundle-60.png" alt="new bundle keys"/></p> | |
</li> | |
</ol> | |
</div> | |
<h3 class="tutorial"><a name="complex-6"></a>Registering the Code Snippet</h3> | |
<p>The <tt>layer.xml</tt> file registers the user interface | |
elements of your module in your application, which in this | |
case is the IDE. Here, we need to register the palette item | |
in the <tt>layer.xml</tt> file so that the item will appear | |
in the HTML Palette.</p> | |
<div class="indent"> | |
<ol> | |
<li>Right-click the <tt>org.netbeans.modules.newsnippets2</tt> package node and | |
choose New > Other. Select Module Development > XML Layer. Click Next | |
and then click Finish.</li> | |
<li>Add the following tags to the <tt>layer.xml</tt> file, between the <tt><filesystem></tt> tags: | |
<pre class="examplecode"><folder name="HTMLPalette"> | |
<folder name="HTML"> | |
<file name="BR.xml" url="resources/BR.xml"> | |
<attr name="position" intvalue="150"/> | |
</file> | |
</folder> | |
</folder></pre></li> | |
<!-- | |
<li><p>Optionally, you can reorder the items in | |
the palette. When you do so, you can use the user interface | |
provided for this purpose to do so.</p> | |
<p>Expand the <tt>layer.xml</tt> node and then | |
expand <tt><this layer in context></tt>. A folder appears for every folder declared by | |
every <tt>layer.xml</tt> file of every module registered in the IDE. </p> | |
<p>Notice that the "HTMLPalette" folder | |
is marked in bold. This matches the name of the folder you created in your own <tt>layer.xml</tt> file. | |
Expand the folder | |
and notice that its subfolder, HTML, is also in bold. Expand the HTML folder and notice that | |
the <tt>BR.xml</tt> | |
resource declaration file that you declared has been added to the resource declaration files provided by other | |
modules:</p> | |
<p><img src="../images/tutorials/codesnippet/65-layer.png" alt="layer in context"/></p> | |
<p>When you right-click on the node, several options are available, such as | |
"Delete" and "Copy".</p> | |
<p>As an experiment, drag the "New Line" node and drop it right below the "Table" node. Double-click | |
the <tt>layer.xml</tt> file and notice that the value of the "position" element changes whenever | |
you move the "New Line" node to a different place.</p> | |
</li>--> | |
</ol> | |
</div> | |
</div> | |
<!-- ======================================================================================= --> | |
<div class="indent"> | |
<h3><a name="complex-7"></a>Building and Installing the Code Snippet</h3> | |
<p>Now we need to think about installation and distribution. Install and try out the code snippet, | |
by following the steps below.</p> | |
<div class="indent"> | |
<ol> | |
<li><p>In the Projects window, right-click the <tt>NewSnippets2</tt> project and choose Run. | |
The module is built and installed in a new instance of NetBeans IDE.</p> | |
</li> | |
<li><p>Create a new HTML file in the IDE. When the | |
HTML file opens, it displays the Component Palette (Ctrl-Shift-8) with one additional code snippet, called "New Line", with a tooltip that displays the | |
result of drag-and-dropping the item:</p> | |
<p><img src="../images/tutorials/codesnippet/71/result.png" alt="new snippet in component palette"/></p> | |
</li> | |
<li>Drag the 'New Line' item into the Source Editor and notice that a new <tt><br></tt> tag is inserted | |
at the cursor. | |
</li> | |
</ol> | |
</div> | |
<h3 class="tutorial"><a name="complex-8"></a>Adding a Customizer</h3> | |
<p>Optionally, you can let a <tt>JPanel</tt> appear when | |
the palette item is dropped. In the <tt>JPanel</tt>, you | |
can let the user define values for attributes that relate | |
to the snippet that is about to be created. However, note that | |
adding such a customizer is optional. In the case of a | |
line break, which is what we are creating in this tutorial, | |
there are no attributes that relate to the BR tag. For that | |
reason, to illustrate the customizer functionality, we | |
will add a comment before the BR tag, by means of a | |
customizer.</p> | |
<p><strong class="notes">Note: </strong>If you check out the <tt><a href="http://hg.netbeans.org/main/file/bdb88f1fa043/html">html</a></tt> module | |
from the <a href="http://hg.netbeans.org/main/file/">NetBeans sources</a>, you will find many examples | |
of customizers in the <tt><a href="http://hg.netbeans.org/main/file/bdb88f1fa043/html/src/org/netbeans/modules/html/palette/items">org/netbeans/modules/html/palette/items</a></tt> | |
package.</p> | |
<div class="indent"> | |
<ol> | |
<li>Add a dependency on the NetBeans <tt><a href="http://bits.netbeans.org/dev/javadoc/org-openide-dialogs/overview-summary.html">Dialogs API</a></tt> and the <a href="http://bits.netbeans.org/dev/javadoc/org-openide-awt/overview-summary.html"><tt>UI Utilities API</tt></a>.</li> | |
<li><p>Use the New File dialog (Ctrl-N) | |
to create a <tt>JPanel</tt> in the <tt>org.netbeans.modules.newsnippets2</tt> package. | |
Name it <tt>BRCustomizer</tt>.</p></li> | |
<li><p>Use the Pallette (Ctrl-Shift-8) to drag and drop a <tt>JLabel</tt> and a <tt>JTextField</tt> | |
onto the <tt>JPanel</tt> and arrange the <tt>JPanel</tt> | |
as follows:</p> | |
<p><img src="../images/tutorials/codesnippet/customizer-in-palette-60.png" alt="customizer in design mode"/></p> | |
</li> | |
<li>You will need to declare the following at the top of | |
the <tt>BRCustomizer</tt> class: | |
<pre>private Dialog dialog = null; | |
private DialogDescriptor descriptor = null; | |
private boolean dialogOK = false; | |
private BR br; | |
private JTextComponent target;</pre></li> | |
<li>Rewrite the <tt>BRCustomizer</tt> constructor | |
as follows: | |
<pre>public BRCustomizer(BR br, JTextComponent target) { | |
this.br = br; | |
this.target = target; | |
initComponents(); | |
}</pre></li> | |
<li>In your <tt>BRCustomizer</tt> class, add this method, | |
so that, in the next steps, you can open the customizer from your | |
<tt>ActiveEditorDrop</tt> implementation class: | |
<pre class="examplecode">@NbBundle.Messages({ | |
"LBL_Customizer_InsertPrefix=Insert", | |
"NAME_html-BR=Line Break"}) | |
public boolean showDialog() { | |
dialogOK = false; | |
descriptor = new DialogDescriptor(this, Bundle.LBL_Customizer_InsertPrefix(), true, | |
DialogDescriptor.OK_CANCEL_OPTION, DialogDescriptor.OK_OPTION, | |
new ActionListener() { | |
@Override | |
public void actionPerformed(ActionEvent e) { | |
if (descriptor.getValue().equals(DialogDescriptor.OK_OPTION)) { | |
evaluateInput(); | |
dialogOK = true; | |
} | |
dialog.dispose(); | |
} | |
}); | |
dialog = DialogDisplayer.getDefault().createDialog(descriptor); | |
dialog.setVisible(true); | |
return dialogOK; | |
}</pre></li> | |
<li>Define the <tt>evaluateInput()</tt> method, which | |
is called in the <tt>showDialog()</tt> method above, as | |
follows: | |
<pre>private void evaluateInput() { | |
String comment = jTextField1.getText(); | |
br.setComment(comment); | |
}</pre></li> | |
<li>Hook your customizer into the | |
<tt>ActiveEditorDrop</tt> implementation class | |
as follows (only the lines that are changed | |
are highlighted below): | |
<pre class="examplecode">package org.netbeans.modules.newsnippets2; | |
import javax.swing.text.BadLocationException; | |
import javax.swing.text.JTextComponent; | |
import org.netbeans.modules.newsnippets2.HTMLPaletteUtilities; | |
import <a href="https://netbeans.org/download/dev/javadoc/org-openide-text/org/openide/text/ActiveEditorDrop.html">org.openide.text.ActiveEditorDrop</a>; | |
public class BR implements <a href="https://netbeans.org/download/dev/javadoc/org-openide-text/org/openide/text/ActiveEditorDrop.html">ActiveEditorDrop</a> { | |
<b>private String comment = "";</b> | |
public BR() { | |
} | |
private String createBody() { | |
<b>comment = getComment(); | |
String Br = "<!-- " + comment + " -->" | |
+ "\n <br>";</b> | |
return Br; | |
} | |
@Override | |
public boolean <a href="https://netbeans.org/download/dev/javadoc/org-openide-text/org/openide/text/ActiveEditorDrop.html#handleTransfer(javax.swing.text.JTextComponent)">handleTransfer(JTextComponent targetComponent</a>) { | |
<b>BRCustomizer c = new BRCustomizer(this, targetComponent); | |
boolean accept = c.showDialog(); | |
if (accept) {</b> | |
String body = createBody(); | |
try { | |
HTMLPaletteUtilities.insert(body, targetComponent); | |
} catch (BadLocationException ble) { | |
<b>accept = false;</b> | |
} | |
} | |
<b>return accept;</b> | |
} | |
<b>public String getComment() { | |
return comment; | |
} | |
public void setComment(String comment) { | |
this.comment = comment; | |
}</b> | |
}</pre> | |
</li> | |
</ol> | |
</div> | |
</div> | |
<p>Run the module. Open an HTML file. In the Palette (Ctrl-Shift-8), notice the item | |
named "New Line". Drag it into the HTML file and drop it. You should | |
see your customizer. Enter something, finish the dialog, | |
and the BR tag is added, together with a comment, at the point where you dropped the item. | |
</p> | |
<div class="feedback-box"><a href="https://netbeans.org/about/contact_form.html?to=3&subject=Feedback:%20Code%20Snippet%20Module%207.2%20Tutorial">Send Us Your Feedback</a></div> | |
<!-- ======================================================================================== --> | |
<h2><a name="nextsteps"></a>Next Steps</h2> | |
<p>For more information about creating and developing NetBeans modules, see the following resources: </p> | |
<ul> | |
<li><a href="https://netbeans.org/kb/trails/platform.html">Other Related Tutorials</a></li> | |
<li><a href="http://bits.netbeans.org/dev/javadoc/index.html">NetBeans API Javadoc</a></li> | |
</ul> | |
<!-- ======================================================================================== --> | |
<!-- | |
<h2><a name="version"></a>Versioning </h2> | |
<p> | |
<table width="76%"> | |
<tbody> | |
<tr> | |
<td> | |
<div><b>Version</b></div> | |
</td> | |
<td> | |
<div><b>Date</b></div> | |
</td> | |
<td> | |
<div><b>Changes</b></div> | |
</td> | |
<td> | |
<div><b>Open Issues</b></div> | |
</td> | |
</tr> | |
<tr> | |
<td> | |
1 | |
</td> | |
<td> | |
28 November 2005 | |
</td> | |
<td> | |
Initial version | |
</td> | |
<td> | |
<ul> | |
<li>Is it the same for Swing/AWT Components? | |
<li>How could formatting/indentation be different? | |
<li>Need to add explanation for adding own dialog box for predefining values. | |
<li>Need new screenshot of the Component Palette, to show the new snippet under the | |
existing Table snippet. | |
<li>Explanatory text for the use of the NetBeans APIs to be added. | |
<li>Show how to share snippets between palettes via shadow files. | |
</ul> | |
</td> | |
</tr> | |
<tr> | |
<td> | |
2 | |
</td> | |
<td> | |
2 December 2005 | |
</td> | |
<td> | |
</td> | |
<td> | |
<ul> | |
<li>Fixed <a href="https://netbeans.org/bugzilla/show_bug.cgi?id=69620">issue 69620</a> | |
</ul> | |
</td> | |
</tr> | |
<tr> | |
<td> | |
3 | |
</td> | |
<td> | |
8 December 2005 | |
</td> | |
<td> | |
</td> | |
<td> | |
<ul> | |
<li>Fixed <a href="https://netbeans.org/bugzilla/show_bug.cgi?id=69766">issue 69766</a> | |
</ul> | |
</td> | |
</tr> | |
<tr> | |
<td> | |
4 | |
</td> | |
<td> | |
1 June 2007 | |
</td> | |
<td> | |
</td> | |
<td> | |
<ul> | |
<li>Began updating for 6.0 | |
</ul> | |
</td> | |
</tr> | |
<tr> | |
<td> | |
5 | |
</td> | |
<td> | |
2 November 2008 | |
</td> | |
<td> | |
</td> | |
<td> | |
<ul> | |
<li>Began updating for 6.5 | |
</ul> | |
</td> | |
</tr> | |
<tr> | |
<td> | |
6 | |
</td> | |
<td> | |
19 November 2011 | |
</td> | |
<td> | |
</td> | |
<td> | |
<ul> | |
<li>Began updating for 7.1 | |
</ul> | |
</td> | |
</tr> | |
<tr> | |
<td> | |
7 | |
</td> | |
<td> | |
23 July 2012 | |
</td> | |
<td> | |
</td> | |
<td> | |
<ul> | |
<li>Began updating for 7.2. Rewrote it to include the simple palette section. | |
</ul> | |
</td> | |
</tr> | |
</tbody> | |
</table>--> | |
</body> | |
</html> |