| <!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.0</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 Nodes 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 is not the latest version of this | |
| document. It applies to NetBeans IDE 6.0/6.1 only. | |
| <a href="../nbm-palette-api1.html">Click here</a> to | |
| see the most up to date version. | |
| <p><b>Contents</b></p> | |
| <img src="../../images/articles/60/netbeans-stamp60-61.gif" class="stamp" width="114" height="114" alt="Content on this page applies to NetBeans IDE 6.1" title="Content on this page applies to NetBeans IDE 6.1"> </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> | |
| </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> | |
| <li><a href="#adding-customizer">Adding a Customizer</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> | |
| </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> | |
| </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">NetBeans IDE</td> | |
| <td class="tbltd1">version | |
| <a href="http://download.netbeans.org/netbeans/6.1/final/">version 6.1</a> or<br> | |
| version 6.0</td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1">Java Developer Kit (JDK)</td> | |
| <td class="tbltd1"><a href="http://java.sun.com/javase/downloads/index.jsp">version 6</a> 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="https://netbeans.org/download/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 > New Project (Ctrl-Shift-N). Under Categories, select NetBeans Modules. Under projects, | |
| select Module Project and click Next.</li> | |
| <li>In the Name and Location panel, type <tt>Newhtmlsnippets</tt> in Project Name. | |
| Change the | |
| Project Location to any directory on your computer, such as <tt>c:\mymodules</tt>. Leave the Standalone Module radiobutton | |
| and the Set as Main Project checkbox selected. | |
| Click Next. | |
| <li>In the Basic Module Configuration panel, replace <tt>yourorghere</tt> in Code Name Base with <tt>org.netbeans.modules</tt>, | |
| so that the whole code name base is <tt>org.netbeans.modules.newhtmlsnippets</tt>. | |
| Leave the location of the localizing bundle and XML layer, so that they will be stored in a | |
| package with the name <tt>org/netbeans/modules/newhtmlsnippets</tt>. Click Finish.</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). For example, the Projects window should now look as follows: | |
| <p align="left"><img src="../../images/tutorials/codesnippet/projects-window-initial-60.png" border="1" alt="Initial Projects window."> | |
| </ol> | |
| <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="https://netbeans.org/download/dev/javadoc/">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 "Common Palette", "Text API", and "Utilities API", click "Add...", | |
| select the name from the Module list, and then click OK to confirm it:</p> | |
| <p><img src="../../images/tutorials/codesnippet/projprops-60.png" border="1" alt="Project Properties dialog box."> | |
| <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="https://netbeans.org/download/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 > 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="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> { | |
| public BR() { | |
| } | |
| private String createBody() { | |
| String Br = "<br>"; | |
| 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>) { | |
| 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> | |
| <h3 class="tutorial"><a name="defining-insertion"></a>Defining the Insertion</h3> | |
| <ol> | |
| <li>Right-click the <tt>org.netbeans.modules.newhtmlsnippets</tt> node and | |
| choose New > 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 { | |
| //firstly, find selected text range: | |
| 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); | |
| //then, replace selected text with the inserted one: | |
| 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> | |
| <h3 class="tutorial"><a name="adding-customizer"></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 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><b>Note:</b> 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>Create a <tt>JPanel</tt> and name it <tt>BRCustomizer</tt>. | |
| 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>Add a dependency on the <tt><a href="https://netbeans.org/download/dev/javadoc/org-openide-dialogs/overview-summary.html">Dialogs API</a></tt>. | |
| <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) {} | |
| 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>String comment = getComment(); | |
| String Br = "<!-- " + comment + " -->" | |
| + "\n <br>";</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> | |
| </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><b>Note:</b> 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. | |
| <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 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 > 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"><?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.newhtmlsnippets.BR" /> | |
| <icon16 urlvalue="org/netbeans/modules/newhtmlsnippets/resources/BR16.png" /> | |
| <icon32 urlvalue="org/netbeans/modules/newhtmlsnippets/resources/BR32.png" /> | |
| <description localizing-bundle="org.netbeans.modules.newhtmlsnippets.Bundle" | |
| display-name-key="NAME_html-BR" | |
| tooltip-key="HINT_html-BR" /> | |
| </editor_palette_item></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"><?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.newhtmlsnippets.BR" /> | |
| <icon16 urlvalue="org/netbeans/modules/newhtmlsnippets/resources/BR16.png" /> | |
| <icon32 urlvalue="org/netbeans/modules/newhtmlsnippets/resources/BR32.png" /> | |
| <b><inline-description> | |
| <display-name>New Line</display-name> | |
| <tooltip> | |
| <b> | |
| br | |
| </b> | |
| </tooltip> | |
| </inline-description></b> | |
| </editor_palette_item></pre> | |
| <li>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, 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> | |
| <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><filesystem></tt> tags: | |
| <p><pre class="examplecode"><folder name="HTMLPalette"> | |
| <folder name="HTML"> | |
| <file name="BR.xml" url="resources/BR.xml"/> | |
| </folder> | |
| </folder></pre> | |
| <li>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. Expand the Important Files | |
| node, expand the XML Layer node, and wait for the subnodes | |
| to be displayed. Next, 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. 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/layer-in-context-60.png" border="1" alt="layer in context"> | |
| <p>When you right-click on the node, several options are available, such as | |
| "Delete" and "Copy". | |
| <p>As an experiment, drag the <tt>BR.xml</tt> node and drop it right below the <tt>TABLE.xml</tt> node. Double-click | |
| the Layer XML node in the Important Files node, notice that two new tags have been added, one before | |
| and one after the <tt><file name="BR.xml" url="resources/BR.xml"/></tt> line:</p> | |
| <p align="left"><img src="../../images/tutorials/codesnippet/layer-in-context2-60.png" border="1" alt="layer in context"> | |
| <p>When you dragged and dropped the <tt>BR.xml</tt> node | |
| in the <tt><this layer in context></tt> node, the IDE created <tt><attr></tt> tags | |
| for positioning the new component snippet between the existing component snippets. | |
| </ol> | |
| </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>In the Projects window, right-click the <tt>Newhtmlsnippets</tt> project and choose Install/Reload | |
| in Target Platform. </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. | |
| <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"> | |
| <li>Drag the 'New Line' item into the Source Editor: | |
| <p><img src="../../images/tutorials/codesnippet/customizer-in-action-60.png" border="1" alt="customizer in action"> | |
| <li>Type a comment, click OK, and | |
| notice that a new <tt><br></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><b>Note:</b> Above, the text | |
| "breaking up the paragraph with a line break" was | |
| typed into the customizer. | |
| </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>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 border="1" src="../../images/tutorials/codesnippet/create-nbm-60.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 > Plugins | |
| from the main menu. | |
| </ol> | |
| </div> | |
| <br /> | |
| <br> | |
| <div class="feedback-box"><a href="https://netbeans.org/about/contact_form.html?to=3&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="https://netbeans.org/download/dev/javadoc/">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> | |
| </tbody> | |
| </table> | |
| </body> | |
| </html> |