Google Git
Sign in
apache / netbeans-website-cleanup / refs/heads/master / . / src / content / platform / tutorials / 68 / nbm-palette-api1.html
blob: c13c34536c8ddb0406fc33abf5e232b1d65665ad [file] [log] [blame]
<!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 NetBeans Platform 6.5</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><strong class="notes">Note: </strong>This document uses the NetBeans IDE 6.5 Release. If you
are using an earlier version, see <a href="60/nbm-palette-api1.html">the 6.0/6.1 version
of this document</a>.
<p><b>Contents</b></p>
<img src="../images/articles/68/netbeans-stamp-65-67-68.gif" class="stamp" width="114" height="114" alt="Content on this page applies to NetBeans IDE 6.5, 6.7, 6.8" title="Content on this page applies to NetBeans IDE 6.5, 6.7, 6.8"> </p>
<ul class="toc">
<li><a href="#intro">Introduction to Code Snippets</a></li>
<li><a href="#creatingthemoduleproject">Setting Up the Module Project</a>
<ul>
<li><a href="#create-plug-in">Creating the Module Project</a></li>
<li><a href="#specifying">Specifying the Module's Dependencies</a></li>
</ul>
</li>
<li><a href="#coding-module">Coding the Code Snippet</a>
<ul>
<li><a href="#creating-snippet">Creating the Code Snippet</a>
<li><a href="#defining-insertion">Defining the Insertion</a>
</ul>
</li>
<li><a href="#registering-module">Declaring and Registering the Code Snippet</a>
<ul>
<li><a href="#declaring-resources">Declaring the Code Snippet</a>
<li><a href="#registering-resources">Registering the Code Snippet</a>
<li><a href="#adding-customizer">Optional: Adding a Customizer</a>
</ul>
</li>
<li><a href="#building">Building and Installing the Code Snippet</a>
<ul>
<li><a href="#try-plugin">Trying Out the Code Snippet</a>
<li><a href="#share-plugin">Creating a Shareable Module Binary</a>
</ul>
</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 6.5 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 6 or<br/>version 5</td>
</tr>
</tbody>
</table>
<p class="tips">Optionally, for troubleshooting purposes, you
can <a href="https://netbeans.org/files/documents/4/637/newhtmlsnippets.zip">download the completed sample</a>.
<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:
<ul>
<li>A Java class that defines the piece of code to be dragged into the Source Editor.
<li>A display name for the palette item.
<li>A tooltip for the palette item.
<li>A 16x16 pixel image for the 'Small Icon' display.
<li>A 32x32 pixel image for the 'Big Icon' display.
</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.
<h2 class="tutorial"><a name="creatingthemoduleproject"></a>Setting up the Module Project</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="create-plug-in"></a>Creating the Module Project</h3>
<ol>
<li>Choose File &gt; 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>Newhtmlsnippets</tt> in the Project Name field.
Change the Project Location to any directory on your computer. Leave the Standalone Module option
and Set as Main Project checkbox selected. Click Next.</li>
<li>In the Basic Module Configuration panel, type <tt>org.netbeans.modules.newhtmlsnippets</tt>
in Code Name Base.
<li>Select "Generate XML Layer". Leave the
locations of both the localizing bundle and the XML layer file
so that they will be stored in a package with
the name <tt>org/netbeans/modules/newhtmlsnippets</tt>. Click Finish.</li>
</ol>
<p> The IDE creates the <tt>Newhtmlsnippets</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="specifying"></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.
<ol>
<li>In the Projects window, right-click the <tt>Newhtmlsnippets</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>
<p><ul>
<li>Common Palette
<li>Text API
<li>Utilities API
</ul>
<p>Click OK to exit the Project Properties dialog box.
<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>
<br />
<!-- ===================================================================================== -->
<h2><a name="coding-module"></a>Coding the Code Snippet</h2>
<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.
<br />
<div class="indent">
<h3 class="tutorial"><a name="creating-snippet"></a>Creating the Code Snippet</h3>
<ol>
<li>Right-click the <tt>org.netbeans.modules.newhtmlsnippets</tt> node and
choose New &gt; Java Class. Type <tt>BR</tt> in Class Name, make sure that the <tt>org.netbeans.modules.newhtmlsnippets</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:
<p><pre class="examplecode">package org.netbeans.modules.newhtmlsnippets;
import javax.swing.text.BadLocationException;
import javax.swing.text.JTextComponent;
import org.netbeans.modules.newhtmlsnippets.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 = "&lt;br&gt;";
return Br;
}
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>
<p>Right-click in the Source Editor and choose Format (Alt-Shift-F).
</ol>
<p>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="defining-insertion"></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>
<ol>
<li>Right-click the <tt>org.netbeans.modules.newhtmlsnippets</tt> node and
choose New &gt; Java Class. Type <tt>HTMLPaletteUtilities</tt> in Class Name, make sure that the <tt>org.netbeans.modules.newhtmlsnippets</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:
<p><pre class="examplecode">package org.netbeans.modules.newhtmlsnippets;
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 {
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>
<p>Right-click in the Source Editor and choose Format (Alt-Shift-F).
</ol>
</div>
<br />
<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><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>Secondly, you register the XML file in the <tt>layer.xml</tt> file,
in the palette's folder.
<br />
<div class="indent">
<h3 class="tutorial"><a name="declaring-resources"></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.
<ol>
<li>Right-click the <tt>org.netbeans.modules.newhtmlsnippets</tt> package node and
choose New &gt; 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\newhtmlsnippets</tt> in Folder.
Click Finish.</li>
<li>Replace the default content of the <tt>BR.xml</tt> file with the following:
<pre class="examplecode">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;!DOCTYPE editor_palette_item PUBLIC "-//NetBeans//Editor Palette Item 1.0//EN"
"https://netbeans.org/dtds/editor-palette-item-1_0.dtd"&gt;
&lt;editor_palette_item version="1.0"&gt;
&lt;class name="org.netbeans.modules.newhtmlsnippets.BR" /&gt;
&lt;icon16 urlvalue="org/netbeans/modules/newhtmlsnippets/resources/BR16.png" /&gt;
&lt;icon32 urlvalue="org/netbeans/modules/newhtmlsnippets/resources/BR32.png" /&gt;
&lt;description localizing-bundle="org.netbeans.modules.newhtmlsnippets.Bundle"
display-name-key="NAME_html-BR"
tooltip-key="HINT_html-BR" /&gt;
&lt;/editor_palette_item&gt;</pre>
<p>In the 1.1 DTD, 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:
<pre class="examplecode">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;!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>"&gt;
&lt;editor_palette_item version="1.0"&gt;
&lt;class name="org.netbeans.modules.newhtmlsnippets.BR" /&gt;
&lt;icon16 urlvalue="org/netbeans/modules/newhtmlsnippets/resources/BR16.png" /&gt;
&lt;icon32 urlvalue="org/netbeans/modules/newhtmlsnippets/resources/BR32.png" /&gt;
<b>&lt;inline-description&gt;
&lt;display-name&gt;New Line&lt;/display-name&gt;
&lt;tooltip&gt;
&lt;b&gt;
br
&lt;/b&gt;
&lt;/tooltip&gt;
&lt;/inline-description&gt;</b>
&lt;/editor_palette_item&gt;</pre>
<p><strong class="notes">Note: </strong>You can choose either of the two
approaches above, depending on your requirements.
<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 align="left"><img border="1" src="../images/tutorials/codesnippet/BR32.png" alt="BR32">
<img border="1" src="../images/tutorials/codesnippet/BR16.png" alt="BR16">
<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 align="left"><img border="1" src="../images/tutorials/codesnippet/bundle-60.png" alt="new bundle keys">
</ol>
<p>At this point, the project source structure should be as follows:
<p><img src="../images/tutorials/codesnippet/65-proj-1.png"/></p>
<h3 class="tutorial"><a name="registering-resources"></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.
<ol>
<li>Add the following tags to the <tt>layer.xml</tt> file, between the <tt>&lt;filesystem&gt;</tt> tags:
<p><pre class="examplecode">&lt;folder name="HTMLPalette"&gt;
&lt;folder name="HTML"&gt;
&lt;file name="BR.xml" url="resources/BR.xml"&gt;
&lt;attr name="position" intvalue="150"/&gt;
&lt;/file&gt;
&lt;/folder&gt;
&lt;/folder&gt;</pre>
<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>&lt;this layer in context&gt;</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 align="left"><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>
</ol>
<h3 class="tutorial"><a name="adding-customizer"></a>Optional: 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 tag 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><strong class="notes">Note: </strong>If you check out the <tt>html</tt> module
from the NetBeans sources, you will find many examples
of customizers in the <tt>org/netbeans/modules/html/palette/items</tt>
package.
<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>.
<li><p>Use the New File dialog (Ctrl-N)
to create a <tt>JPanel</tt> in the <tt>org.netbeans.modules.newhtmlsnippets</tt> package.
Name it <tt>BRCustomizer</tt>.</p>
<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" border="1" alt="customizer in design mode">
<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;
BR br;
JTextComponent target;</pre>
<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>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">public boolean showDialog() {
dialogOK = false;
String displayName = "";
try {
displayName = NbBundle.getBundle("org.netbeans.modules.newhtmlsnippets.Bundle").getString("NAME_html-BR"); // NOI18N
} catch (Exception e) {
//Handle the exception here.
}
descriptor = new DialogDescriptor(this, NbBundle.getMessage(BRCustomizer.class, "LBL_Customizer_InsertPrefix") + " " + displayName, true,
DialogDescriptor.OK_CANCEL_OPTION, DialogDescriptor.OK_OPTION,
new ActionListener() {
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);
repaint();
return dialogOK;
}</pre>
<li>Define the <tt>evaluateInput()</tt> method, which
is called in the <tt>showDialog()</tt> method above, as
follows:
<p><pre>private void evaluateInput() {
String comment = jTextField1.getText();
br.setComment(comment);
}</pre>
<li>Add to the <tt>Bundle.properties</tt> file:
<pre>LBL_Customizer_InsertPrefix=Insert
NAME_html-BR=Line Break</pre>
<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.newhtmlsnippets;
import javax.swing.text.BadLocationException;
import javax.swing.text.JTextComponent;
import org.netbeans.modules.newhtmlsnippets.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 = "&lt;!-- " + comment + " --&gt;"
+ "\n &lt;br&gt;";</b>
return Br;
}
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>
</ol>
<p>Your project source structure should now include your <tt>JPanel</tt>:
<p><img src="../images/tutorials/codesnippet/65-proj-2.png"/></p>
</div>
<br />
<!-- ======================================================================================= -->
<h2><a name="building"></a>Building and Installing the Code Snippet</h2>
<p>Now we need to think about installation and distribution.
In the first section below, we install the code snippet,
next we create an NBM file and examine distribution channels.</p>
<div class="indent">
<h3 class="tutorial"><a name="try-plugin"></a>Trying Out the Code Snippet</h3>
<p>Install and try out the code snippet,
by following the steps below.
<ol>
<li><p>In the Projects window, right-click the <tt>Newhtmlsnippets</tt> project and choose Run. </p>
<p>The module is built and installed in the target platform. The target platform opens so that you
can try out your new module. The default target platform is the
installation used by the current instance of the development IDE.</p>
<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 dragging-and-dropping the item:</p>
<p><img src="../images/tutorials/codesnippet/result1-60.png" border="1" alt="new snippet in component palette"></p>
<li>Drag the 'New Line' item into the Source Editor and, if you completed the optional
section on creating a customizer (above), you will see a customizer:
<p><img src="../images/tutorials/codesnippet/customizer-in-action-60.png" border="1" alt="customizer in action"></p>
<li><p>Type a comment, click OK, and
notice that a new <tt>&lt;br&gt;</tt> tag is inserted
at the cursor, together with an HTML comment:</p>
<p><img src="../images/tutorials/codesnippet/result2-60.png" border="1" alt="dropped line break"></p>
<p><strong class="notes">Note: </strong>Above, the text
"breaking up the paragraph with a line break" was
typed into the customizer.</p>
</ol>
<h3 class="tutorial"><a name="share-plugin"></a>Creating a Shareable Module Binary</h3>
<p>An NBM file is the binary version of the module that
provides the code snippet. Below, using one menu item, we create
the NBM file.
<ol>
<li><p>In the Projects window, right-click the <tt>newhtmlsnippet</tt> project and choose Create NBM.</p>
<p>The NBM file is created and you can view it in the Files window (Ctrl-2), as shown
below:</p>
<p align="left"><img src="../images/tutorials/codesnippet/65-proj-3.png" alt="Shareable NBM.">
<li>Make the module available to others via, for example, the
<a href="http://plugins.netbeans.org/PluginPortal/">Plugin Portal</a>.
<li>The recipient can install the module by using their IDE's Plugin Manager. They
would choose Tools &gt; Plugins
from the main menu.
</ol>
</div>
<br />
<br>
<div class="feedback-box"><a href="https://netbeans.org/about/contact_form.html?to=3&amp;subject=Feedback:%20Code%20Snippet%20Module%20Tutorial">Send Us Your Feedback</a></div>
<br style="clear:both;" />
<!-- ======================================================================================== -->
<h2><a name="nextsteps"></a>Next Steps</h2>
<p>For more information about creating and developing NetBeans modules, see the following resources:
<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>
<hr>
<!-- ======================================================================================== -->
<h2><a name="version"></a>Versioning </h2>
<p>
<table width="76%" border="1">
<tbody>
<tr>
<td>
<div align="left"><b>Version</b></div>
</td>
<td>
<div align="left"><b>Date</b></div>
</td>
<td>
<div align="left"><b>Changes</b></div>
</td>
<td>
<div align="left"><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>
</tbody>
</table>
</body>
</html>