Google Git
Sign in
apache / netbeans-website-cleanup / refs/heads/asciidoc-features / . / src / content / platform / tutorials / 60 / nbm-htmleditor_zh_CN.html
blob: 6cdbf3dfee70cb53b9e1a444e0038299aebbe633 [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>平台：NetBeans Platform 6.0 快速入门教程</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<!-- -*- xhtml -*- -->
<link rel="stylesheet" type="text/css" href="../../../netbeans.css">
<meta name="AUDIENCE" content="NBUSER">
<meta name="TYPE" content="ARTICLE">
<meta name="EXPIRES" content="N">
<meta name="developer" content="jtulach@netbeans.org">
<meta name="indexed" content="y">
<meta name="description"
content="Nodes API 简明指南。">
<!-- Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. --> <!-- Use is subject to license terms.-->
</head>
<body>
<h1>NetBeans Platform 6.0 快速入门教程</h1>
<p>本教程将演示如何构建 HTML Editor 而无需编写任何 Java 代码。完成本教程时，您的 HTML Editor 将如下图所示：
<p align="left"><img src="../../images/tutorials/htmleditor/html_editor_60.png" border="1" alt="启动画面面板">
<p>尽管这是一个非常简单的演示程序，但请您认真对待。该程序可以方便地编辑 HTML 页面，并且还具有代码完成、验证和预定义 HTML 片段等功能。
<p>本教程所创建的 HTML Editor 是一个&ldquo;在 Netbeans Platform 上&rdquo;构建的富客户端应用程序。这意味着 IDE 的核心，也就是 Netbeans Platform，将是您应用程序的基础。在 Netbeans Platform 上，我们可以添加所需的模块，并排除 IDE 需要但应用程序不需要的模块。下面您将看到 Netbeans Platform （应用程序的基础）中添加的一些 IDE 模块：
<p align="left"><img src="../../images/tutorials/htmleditor/diagram.png" alt="HTML Editor">
<p>创建该 HTML Editor 需要生成应用程序框架，排除您不需要的模块和用户界面项，然后将 Favorites 窗口设置为 IDE 启动时默认打开的窗口。IDE 用户界面元素支持所有这些活动。</p>
<p>您将看到构建过程多么简单、多么容易，更确切地说是在 Netbeans Platform 上<em>组装</em> 一个功能全面的应用程序。最后，我们将向您介绍如何使最终产品可以方便地通过 WebStart 下载和启动。
</p>
<p><b>注意：</b> 虽然 Netbeans Platform 是一个独立的产品，但不必为了学习本教程而单独下载它。我们将在 IDE 中开发富客户端应用程序，然后排除与 IDE 相关但对于您的应用程序来说是多余的模块。
<h3>目录</h3>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td align="left" valign="top">
<ul>
<li><a href="#gettingstarted">系统需求</a></li>
<li><a href="#generating">生成主干应用程序</li>
<li><a href="#tweakingthemenuitems">调整用户界面</a>
<li><a href="#tweakingthewindowlayout">调整窗口布局</a></li>
<li><a href="#tweakingthefavorites">调整 Favorites 窗口</a></li>
<li><a href="#runningtheapplication">运行应用程序</a></li>
<li><a href="#updatingtheapplication">添加更新功能</a></li>
<li><a href="#distributingtheapplication">分发应用程序</a></li>
<li><a href="#distributingshared">通过共享 NetBeans JNLP 存储库分发 HTML Editor</a></li>
</ul>
</td>
<td width="20"> </td>
<td align="right" valign="top">
<img src="../../images/tutorials/netbeans-stamp.gif" alt="本页内容适用于 NetBeans IDE 6.0" title="本页内容适用于 NetBeans IDE 6.0
IDE 6.0" border="0" height="45" width="206">
</td>
</tr>
</tbody></table>
<p>有关操作模块的详细信息，请参阅 NetBeans 网站上的 <a href="https://platform.netbeans.org/index.html">NetBeans 开发项目主页</a>。有任何问题，请访问 <a href="http://wiki.netbeans.org/wiki/view/NetBeansDeveloperFAQ">NetBeans Developer FAQ</a> 或使用本页顶部的反馈链接。</p>
<br />
<!-- ===================================================================================== -->
<h2 class="tutorial"><a name="gettingstarted"></a>系统需求</h2>
<p>开始之前，需要在您的计算机中下载并安装以下软件：</p>
<ul>
<li>J2SE(TM) Development Kit（JDK）5.0 或兼容版本 （<a href="http://java.sun.com/javase/downloads/index.jsp">下载最新的 JDK</a>）。</li>
<li>NetBeans IDE 6.0（<a href="http://download.netbeans.org/netbeans/6.0/final/">下载</a>）。
</ul>
<br />
<!-- ===================================================================================== -->
<h2 class="tutorial"><a name="generating"></a>生成主干应用程序</h2>
<p>在 Netbeans Platform 上创建应用程序时，首先需要创建模块套件项目。默认的模块套件项目包括 Netbeans Platform 中的<i>所有</i> 模块和 NetBeans IDE 中的<i>所有</i> 模块。由于我们并不需要所有模块，因此我们将排除不需要的模块。
<ol><li>使用 New Project ( Ctrl-Shift-N ) 向导，从 NetBeans 模块类别中的模板创建 Module Suite Project,如下图所示。</p>
<p align="left"><img border="1" src="../../images/tutorials/htmleditor/module-suite-60.png" border="1" alt="启动画面面板">
<p>单击 Next 按钮，然后将模块套件命名为 NetBeans HTML Editor。单击 Finish 按钮。
<li>右键单击项目节点，选择 Properties 选项，然后在模块套件的 Project Properties 对话框中做少量更改:
<ul><li>在 Build 面板中，单击 Create Standalone Application 按钮，指定在 Netbeans Platform 上生成富客端户应用程序。</p>
<p>确保为可执行文件添加了标记名称，为标题栏添加了应用程序标题，如下所示：</p>
<p align="left"><img border="1" src="../../images/tutorials/htmleditor/application_panel-60.png" border="1" alt="应用程序面板">
<li>在 Splash Screen 面板中,为应用程序添加程序启动画面，如下所示：
</p>
<p align="left"><img border="1" src="../../images/tutorials/htmleditor/splash_screen_panel-60.png" border="1" alt="启动画面面板">
<p>如果您还没有程序启动画面，请使用：<a href="https://platform.netbeans.org/images/tutorials/htmleditor/splash.gif">这个</a>。
</ul>
<li>在 Project Properties 对话框的 Libraries 面板中，您会看到一组&ldquo;集群&rdquo;列表。集群是相关模块的集合。仅需要选择的集群是 <tt>ide8</tt> 和 <tt>platform7</tt>。取消选中所有其他集群。
<li>在 <tt>platform7</tt> 集群中，我们仅需要以下模块：</p>
<p>Actions APIs <br>Bootstrap <br>Core <br>Core - Execution <br>Core - UI <br>Core - Windows <br>Datasystems API <br>Dialogs API <br>Execution API <br>Explorer and Property Sheet API <br>Favorites <br>File System API <br>General Queries API <br>I/O APIs <br>JavaHelp Integration <br>Keymap Options <br>Look &amp; Feel Customization Library <br>MIME Lookup API <br>MIME Lookup On SystemFS <br>Master Filesystem <br>Module System API <br>Nodes API <br>Options Dialog and SPI <br>Output Window <br>Progress API <br>Progress UI <br>Settings API <br>Settings Options API <br>Startup <br>Swing Layout Extensions integration <br>Tab Control <br>Text API <br>UI Utilities API <br>Utilities API <br>Window System API
<li>在 <tt>ide8</tt> 集群中，我们仅需要以下模块：</p>
<p>Common Palette <br>Diff <br>Editor <br>Editor Brace Matching <br>Editor Code Completion <br>Editor Code Folding <br>Editor Guarded Sections <br>Editor Indentation <br>Editor Library <br>Editor Library2 <br>Editor Settings <br>Editor Settings Storage <br>Editor Utilities <br>Error Stripe API <br>Error Stripe Core <br>General Options Dialog Panels <br>Generic Languages Framework <br>HTML <br>HTML Editor <br>HTML Editor Library <br>HTML Lexer <br>IDE Defaults <br>Image <br>Lexer <br>Lexer to NetBeans Bridge <br>Navigator API <br>Plain Editor <br>Plain Editor Library <br>Project API <br>Search API <br>Tags Based Editors Library
</p> </ol>
<!-- ===================================================================================== -->
<h2 class="tutorial"><a name="tweakingthemenuitems"></a>调整用户界面 </h2>
<p>我们可根据需要保留或拒绝默认的 IDE 用户界面。您的 HTML Editor 可能并不需要 Tools 菜单下的一些项目或所有项目。同样，您也可能不需要一些工具栏或工具栏按钮。在本部分中，我们将修改 IDE 的用户界面，只留下对您的富客户端应用程序有用的子集。
<ol><li>展开模块套件，右键单击 Modules 节点，然后选择 Add New 选项，如下所示：</p>
<p><img border="1" src="../../images/tutorials/htmleditor/add-module-60.png" alt="this layer in context">
<p>此时将出现 New Project 向导 (Ctrl-Shift-N)。将项目命名为 <tt>BrandingModule</tt>，单击 Next 按钮，然后单击 Finish 按钮。
<li>在标记模块的 Important Files 节点中，展开 XML Layer 节点。此时将出现两个子节点：</p>
<p><img border="1" src="../../images/tutorials/htmleditor/expanded-xml-layer-60.png"" alt="展开后的 xml 层">
<li>在 <tt>&lt;this layer in context&gt;</tt> 节点中，IDE 将显示所有文件夹和文件的合并视图，所有模块在其层中注册。要排除一些项，请右键单击这些项，然后选择 Delete 选项，如下所示：</p>
<p><img border="1"src="../../images/tutorials/htmleditor/this-layer-in-context-60.png" alt="this layer in context">
<p>然后，IDE 向模块的 <tt>layer.xml</tt> 文件中添加标记，当安装模块时将隐藏您已删除的那些项。例如，通过右键单击 <tt>Menu Bar/Edit</tt>，我们可以移除 HTML Editor 不需要的菜单项。此操作将生成一些代码片段，如 <tt>layer.xml</tt> 文件中的以下片段：
<pre class="examplecode">&lt;folder name=&quot;Menu&quot;&gt;
&lt;folder name=&quot;Edit&quot;&gt;
&lt;file name=&quot;org-netbeans-modules-editor-MainMenuAction$StartMacroRecordingAction.instance_hidden&quot;/&gt;
&lt;file name=&quot;org-netbeans-modules-editor-MainMenuAction$StopMacroRecordingAction.instance_hidden&quot;/&gt;
&lt;/folder&gt;
&lt;/folder&gt;</pre>
<p>
上面代码片段的结果是，另一个模块提供的 <tt>Start Macro Recording</tt> 和 <tt>Stop Macro Recording</tt> 操作从菜单中被您标记模块移除。
<li>使用上一步中介绍的方法，根据需要隐藏工具栏、工具栏按钮、菜单和菜单项。
</ol>
<!-- ===================================================================================== -->
<h2 class="tutorial"><a name="tweakingthewindowlayout"></a>调整窗口布局 </h2>
<p>
使用 <tt>&lt;this layer in context&gt;</tt> 节点，我们不仅可以删除现有项目，还可以更改其内容。例如，HTML Editor 需要操作 HTML 文件。因此，同 Java 源文件和项目合作良好的常规 IDE 相比，在初始布局中显示 <tt>Favorites</tt> 窗口很重要。
</p>
<p>
窗口布局的定义也作为层中的文件介绍，所有这些文件都存储在 <tt>Windows2</tt>文件夹下。<tt>Windows2</tt> 文件夹中的文件是 <a href="http://bits.netbeans.org/dev/javadoc/org-openide-windows/org/openide/windows/doc-files/api.html">Window 系统 API</a> 定义的伪可读 XML 文件。它们非常复杂，但好在 HTML Editor 没有必要全部理解它们，如下所示：
</p>
<ol><li>在标记模块的 <tt>&lt;this layer in context&gt;</tt> 节点处，右键单击 <tt>Windows2</tt> 节点，然后选择 Find，如下所示：</p>
<p><img border="1" src="../../images/tutorials/htmleditor/find-favorites-60.png" alt="找到 favorites">
<li>搜索名称为 <tt>Favorites</tt> 的对象，忽略大小写。我们将找到两个文件：
</p>
<p><img border="1" src="../../images/tutorials/htmleditor/find-favorites2-60.png" alt="找到 favorites">
<p>
第一个文件用于定义组件的外观和创建方式。由于不需要更改外观以及创建方式，因此也不需要修改该文件。第二个文件对您的意义较大，它包含以下内容：
</p>
<pre class="examplecode">
&lt;tc-ref version=&quot;2.0&quot;&gt;
&lt;module name=&quot;org.netbeans.modules.favorites/1&quot; spec=&quot;1.1&quot; /&gt;
&lt;tc-id id=&quot;favorites&quot; /&gt;
&lt;state opened=&quot;false&quot; /&gt;
&lt;/tc-ref&gt;</pre>
<p>
<li>尽管大多数 XML 的含义都很模糊，但是不需要读取任何文档也能看懂其中的一行。将 <tt>false</tt> 更改为 <tt>true</tt> 似乎可以在默认情况下打开该组件。请照此方法操作。
<li>
采用类似的方法，您可以更改 Component Palete 使它在默认情况下打开，并且 Navigator 将因此关闭。执行这两步。
</ol>
<p>您将看到标记模块包含三个新文件，每一个对应一个您更改的文件。实际上，这些文件覆盖了前几步中已经找到的文件，因此已经提供了覆盖窗口布局所需的信息。</p>
<p><img border="1"src="../../images/tutorials/htmleditor/wstcrefs-overridden-60.png" alt="找到 favorites">
<!-- ===================================================================================== -->
<h2 class="tutorial"><a name="tweakingthefavorites"></a>调整 Favorites 窗口</h2>
<p>
在 Files 窗口显示的模块套件的 <tt>branding</tt> 文件夹的子文件夹中，我们可以覆盖在 NetBeans 资源中定义的字符串。在本部分中，我们将覆盖在 Favorites 窗口中用于定义标签的字符串。例如，我们将 Favorites 标签值修改为 HTML Files，因为该窗口将专门用于 HTML 文件。
</p>
<ol><li>打开 Files 窗口并展开模块套件的 <tt>branding</tt> 文件夹。
<li>在 <tt>branding/modules</tt> 内创建一个新文件夹结构。新的文件夹应该命名为 <tt>org-netbeans-modules-favorites.jar</tt>。在文件夹内，创建文件夹结构：<tt>org/netbeans/modules/favorites</tt>。在最后一个文件夹内，也就是在 <tt>favorites</tt> 文件夹内, 创建一个新的 <tt>Bundle.properties</tt> 文件。这个文件夹结构和资源文件与 Favorites 窗口相关的 NetBeans 资源中的文件夹结构相匹配。
<li>添加在下面屏幕截图中显示的字符串，来覆盖 Favorites 窗口资源中匹配的资源文件所定义的相同字符串。</p>
<p><img border="1" src="../../images/tutorials/htmleditor/favorites-branding-60.png" alt="找到 favorites">
<p>为便于复制和粘贴，下面给出了一些字符串的定义。
<pre>Favorites=HTML Files
ACT_AddOnFavoritesNode=&amp;Find HTML Files...
ACT_Remove=&amp;Remove from HTML Files List
ACT_View=HTML Files
ACT_Select=HTML Files
ACT_Select_Main_Menu=Select in HTML Files List
# JFileChooser
CTL_DialogTitle=Add to HTML Files List
CTL_ApproveButtonText=Add
ERR_FileDoesNotExist={0} does not exist.
ERR_FileDoesNotExistDlgTitle=Add to HTML Files List
MSG_NodeNotFound=The document node could not be found in the HTML Files List.</pre>
</ol>
<!-- ===================================================================================== -->
<h2 class="tutorial"><a name="runningtheapplication"></a>运行应用程序</h2>
<p>
运行应用程序很简单，只需右键单击项目节点，然后选择菜单项。
</p>
<ol>
<li>右键单击应用程序的项目节点，然后选择 Clean and Build All 选项。
<li>右键单击应用程序的项目节点，然后选择 Run 选项：</p>
<p><img border="1" src="../../images/tutorials/htmleditor/run-app-60.png" alt="运行应用程序">
<li>在应用程序部署完成后，在 Favorites 窗口内右键单击并选择包含 HTML 文件的文件夹，然后打开 HTML 文件，如下所示：</p>
<p align="left"><img src="../../images/tutorials/htmleditor/html_editor_60.png" border="1" alt="启动画面面板">
</ol>
<!-- ===================================================================================== -->
<h2 class="tutorial"><a name="updatingtheapplication"></a>添加更新功能</h2>
<p>
为了使应用程序具有可扩展性，我们需要用户安装模块来增强应用程序功能。为此，仅需要启用少量额外模块，该模块可以将 Plugin Manager 和 HTML Editor 捆绑使用。
</p>
<ol><li>右键单击模块套件项目，然后选择 Properties 选项。在 Project Properties 对话框中，采用 Libraries 面板并选择下面突出显示的复选框:</p>
<p><img border="1" src="../../images/tutorials/htmleditor/auto-update-60.png" alt="运行应用程序">
<li>右键单击应用程序的项目节点，然后选择 Clean and Build All 选项。
<li>再次运行应用程序。请注意，在 Tools 菜单下已经有了一个名为 Plugins 的新菜单项。</p>
<p align="left"><img src="../../images/tutorials/htmleditor/auto-update2-60.png" border="1" alt="启动画面面板">
<li>选择新的 Plugins 菜单项并安装一些对 HTML Editor 有用的插件。浏览 <a href="http://plugins.netbeans.org/PluginPortal/">Plugin Portal</a> 并查找一些合适的插件。
</ol>
<!-- ===================================================================================== -->
<h2 class="tutorial"><a name="distributingtheapplication"></a>分发应用程序</h2>
<p>
IDE 能够创建一个 JNLP 应用程序用于网页启动应用程序，也可以创建一个包含应用程序启动程序的 ZIP 文件。在本部分，我们将使用后面一种方式。
</p>
<ol><li>右键单击应用程序的项目节点，然后选择 Build ZIP Distribution 选项，如下所示: </p>
<p><img border="1" src="../../images/tutorials/htmleditor/zip-app-60.png" alt="运行应用程序">
<p>在模块套件的 <tt>dist</tt>文件夹中创建一个 ZIP 文件，该文件夹在 Files 窗口中可以看到。
<li>解压缩应用程序之后，您可以看到如下内容:</p>
<p><img border="1" src="../../images/tutorials/htmleditor/unzipped-app-60.png" alt="运行应用程序">
<p><b>注意：</b> 如上所示，在 <tt>bin</tt> 文件夹中创建应用程序启动程序。
</ol>
<br /> <!-- ======================================================================================== -->
<h2><a name="distributingshare"></a>通过共享 NetBeans JNLP 存储库分发 HTML Editor</h2>
<p>
最后，让我们稍微调整一下第一次启动应用程序生成的 <tt>master.jnlp</tt> 文件。即使已经完成了此操作，分发准备工作也还没有结束。至少还需要修改信息部分以提供更好的描述和图标。
<p>
对标准 JNLP 基础架构所做的另一个修改是在 www.netbeans.org. 上使用共享 JNLP 存储库。在默认的情况下，为套件生成的 JNLP 应用程序始终包含其所有的模块，以及它所依赖的所有模块。这对于企业内部的互联网使用可能很有用，但是它对于大多数广泛的互联网使用不太现实。对于互联网，如果在 Netbeans Platform 上构建的所有应用程序都引用 NetBeans 模块中的某个存储库，它可能更好，这意味着可以共享这些模块，而不需要多次下载。
</p>
<p>
NetBeans 6.0 就有这样的存储库。它不包含 NetBeans IDE 拥有的所有模块，但是它包含了一些足以使非 IDE 应用程序非常类似 HTML Editor 的模块（<a href="https://netbeans.org/bugzilla/show_bug.cgi?id=112726"> 请参阅：Issue 112726）</a>。要使用存储库，我们仅需将 <tt>platform.properties</tt> 修改为正确的 URL。
</p>
<pre class="examplecode">
# share the libraries from common repository on netbeans.org
# this URL is for release60 JNLP files:
jnlp.platform.codebase=https://netbeans.org/download/6_0/jnlp/
</pre>
<p>
只要应用程序作为 JNLP 应用程序启动，就可以从 netbeans.org 下载其所有共享插件模块并和执行相同操作的其他程序共享。</p>
<br />
<!-- ======================================================================================== --> <br>
<div class="feedback-box"><a href="https://netbeans.org/about/contact_form.html?to=3&amp;subject=Feedback:%20NetBeans%20Platform%206.0%20Quick%20Start%20Tutorial">将反馈发送给我们</a></div>
<br style="clear:both;" />
<!-- ======================================================================================== -->
<h2><a name="nextsteps"></a>未来计划</h2>
<p>我们已经学习了很多技巧，并且在 Netbeans Platform 上构建了一个示例应用程序。接下来可以多看看 XML Layer 节点的子节点。如果没有更多的工作要做，您可以继续修改和调整应用程序，直到获得真正想要的健壮且简单的应用程序。接下来，您将发现向应用程序中添加自己的模块是多么容易。<a href="https://platform.netbeans.org/tutorials/index.html">Tutorials for NetBeans Module (Plug-in) and Rich Client Application Development</a>向您演示了扩展 HTML Editor 的大量应用示例。例如，您可能想在菜单栏中添加您自己的菜单项。或者您可能想在组件调色板中提供其他 HTML 片段。本教程的&ldquo;Module Developer's Resources&rdquo;中将介绍这些方案以及更多方案。
<p>同时请阅读 <a href="https://platform.netbeans.org/tutorials/60/nbm-paintapp.html">NetBeans Platform 6.0 Paint Application Tutorial</a>，该教程演示了如何创建自己的 Paint Application。最后，<a href="http://platform.netbeans.org/tutorials/60/nbm-feedreader.html">NetBeans Platform 6.0 Feed Reader Tutorial</a> 这篇教程提供了一个稍微复杂的应用程序。
</p>
<hr>
<!-- ======================================================================================== -->
</body>
</html>