blob: 113f81c2eea53dbccab6febc4a4f7a2b4868b82d [file] [log] [blame]
//
// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements. See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership. The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License. You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied. See the License for the
// specific language governing permissions and limitations
// under the License.
//
= NetBeans 平台 HTML 编辑器
:jbake-type: platform_tutorial
:jbake-tags: tutorials
:jbake-status: published
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:icons: font
:experimental:
:description: NetBeans 平台 HTML 编辑器 - Apache NetBeans
:keywords: Apache NetBeans Platform, Platform Tutorials, NetBeans 平台 HTML 编辑器
本教程简要地向您介绍 NetBeans 平台工作流,演示了创建一个简单 HTML 编辑器的过程。创建的 HTML 编辑器尽管简单,但是功能非常成熟,因为它将重用 NetBeans 平台提供的基础结构。例如,无需任何编码,您的 HTML 编辑器即可拥有一个成熟的窗口系统。完成本教程后,您将基本掌握如何在 NetBeans 平台创建、构建和运行应用程序。
完成本教程后,您可以继续参阅 link:https://netbeans.apache.org/kb/docs/platform_zh_CN.html[NetBeans Platform learning trail](NetBeans 平台学习资源)。该学习资源提供了综合性教程,这些教程重点介绍适用各种应用程序类型的一系列 NetBeans API。如果您不希望创建 "Hello World" 应用程序,则可以跳过本教程,而直接阅读学习资源。
*注意:*本文档针对的是 NetBeans IDE 6.7 发行版。如果使用的是早期版本,请参见 link:61/nbm-htmleditor_zh_CN.html[本文档的 6.1 版]。如果是第一次接触 NetBeans 平台,建议您先阅读 link:nbm-quick-start_zh_CN.html[NetBeans 平台快速入门],然后再继续阅读本文档。如果要了解如何创建 NetBeans 插件而不是 NetBeans 平台应用程序,请参见 link:nbm-google_zh_CN.html[NetBeans 插件快速入门]。
(可选)要解决疑难问题,可以 link:http://plugins.netbeans.org/PluginPortal/faces/PluginDetailPage.jsp?pluginid=6635[下载完整的样例]并查看其源代码。
在本教程结束时,您的 HTML 编辑器将如下图所示:
image::images/htmleditor_html-editor-65.png[]
*注意:*尽管这是一个非常简单的演示程序,但请您认真对待。这是一个真正的程序,通过该程序可轻松编辑 HTML 页,并且它还具有代码完成、验证和预定义 HTML 片断的功能。
本教程所创建的 HTML 编辑器是一个“在 NetBeans 平台上”构建的富客户端应用程序。这意味着 IDE 的核心,也就是 NetBeans 平台,将是您应用程序的基础。在 NetBeans 平台上,添加所需的模块,并且排除 IDE 需要但应用程序不需要的模块。下面您将看到 NetBeans 平台(应用程序的基础)中添加的一些 IDE 模块:
image::images/htmleditor_diagram.png[]
创建该 HTML 编辑器需要生成应用程序框架,排除您不需要的模块和用户界面项,然后将 Favorites 窗口设置为 IDE 启动时缺省打开的窗口。IDE 用户界面元素支持所有这些活动。
您将看到构建过程多么简单、多么容易,更确切地说是在 NetBeans 平台上组装一个功能全面的应用程序。最后,我们将向您介绍如何使最终产品可以方便地通过 WebStart 下载和启动。
*注意:*虽然 NetBeans 平台是一个独立的产品,但不必为了学习本教程而单独下载它。我们将在 IDE 中开发富客户端应用程序,然后排除与 IDE 相关但对于您的应用程序来说是多余的模块。
== 生成主干应用程序
NetBeans 平台上创建应用程序时,首先需要创建 NetBeans 平台Application 项目。缺省的模块 NetBeans 平台Application 项目包括 NetBeans 平台中的所有模块和 NetBeans IDE 中的所有模块。由于我们并不需要所有模块,因此我们将排除不需要的模块。
[start=1]
1. 使用 New Project (Ctrl-Shift-N) 向导,从 NetBeans 模块类别中的模板创建 NetBeans 平台Application Project,如下所示。
image::images/htmleditor_new-nb-app-wiz-65.png[]
单击“下一步”并将 NetBeans 平台Application 项目命名为 "NetBeansHTMLEditor"。单击“完成”。
[start=2]
1. 右键单击项目节点,选择“属性”选项,然后在 NetBeans 平台 Application 的“项目属性”对话框中做少量更改:
* 在“构建”面板中,请确保单击了“创建独立应用程序”单选按钮,指定在 NetBeans 平台上生成富客端户应用程序。
确保为可执行文件添加了标记名称,为标题栏调整了应用程序标题,如下所示:
image::images/htmleditor_html-editor-prop-1-65.png[]
* 在“闪屏”面板中,请注意可以为应用程序提供闪屏和进度栏标记,如下所示:
image::images/htmleditor_html-editor-prop-2-65.png[]
*注意:*如果您还没有闪屏,请使用: link:images/htmleditor_splash.gif[这个]
[start=3]
1. 在“项目属性”对话框的“库”面板,您会看到一组“集群”列表。集群是相关模块的集合。需要选择的集群只有 ``ide11`` ``platform11`` ,如下所示:
image::images/htmleditor_libraries-cust-1.png[]
然后单击“解决”按钮,所需模块将添加到已选择作为应用程序一部分的模块所需的模块集合中。“解决”按钮消失,并且不应再出现红色错误消息:
image::images/htmleditor_libraries-cust-2.png[]
现在拥有了一个与 HTML 编辑器相关的 NetBeans 模块的子集。但是,尽管您需要现在拥的这些模块,但可能不需要这些模块提供的所有用户界面元素。在下一节中,您调整用户界面并定制特定于将创建的 HTML 编辑器的窗口布局。
== 调整用户界面
可以根据需要保留或删除所选模块提供的用户界面。例如,您的 HTML 编辑器可能并不需要“工具”菜单下的一些项目或所有项目。同样,您也可能不需要一些工具栏或工具栏按钮。在此部分,我们将修改 IDE 的用户界面,只留下对您的富客户端应用程序有用的子集。
[start=1]
1. 展开 NetBeans 平台Application 项目,右键单击 Modules 节点,然后选择“添加”选项,如下所示:
image::images/htmleditor_add-module-61.png[]
此时将现“新建项目”向导 (Ctrl-Shift-N)。将项目命名为 ``BrandingModule`` ,单击“下一步”。
[start=2]
1. 在“代码名称基”字段中,输入 ``org.netbeans.brandingmodule``
[start=3]
1. 单击“生成 XML 层”,然后单击“完成”。
[start=4]
1. 在标记模块中,展开 ``layer.xml`` 节点。随即出现两个子节点:
image::images/htmleditor_expanded-xml-layer-61.png[]
[start=5]
1. ``<上下文中的此层>`` 节点中,IDE 将显示所有文件夹和文件的合并视图,所有模块在其层中注册。要排除一些项,请右键单击这些项,然后选择“删除”选项,如下所示:
image::images/htmleditor_this-layer-in-context-61.png[]
然后,IDE 向模块的 ``layer.xml`` 文件中添加标记,当安装模块时将隐藏您已删除的那些项。例如,通过右键单击 ``Menu Bar/Edit`` ,我们可以移除 HTML 编辑器不需要的菜单项。此操作将生成一些代码片段,如 ``layer.xml`` 文件中的以下片段:
[source,xml]
----
<folder name="Menu">
<folder name="Edit">
<file name="org-netbeans-modules-editor-MainMenuAction$StartMacroRecordingAction.instance_hidden"/>
<file name="org-netbeans-modules-editor-MainMenuAction$StopMacroRecordingAction.instance_hidden"/>
</folder>
</folder>
----
上面代码片段的结果是,另一个模块提供的 ``“启动宏记录”`` ``“停止宏记录”`` 操作从菜单中被您标记模块移除。要再次显示它们,只需从 ``layer.xml`` 文件中删除上述标记。
[start=6]
1. 使用上一步中介绍的方法,根据需要隐藏工具栏、工具栏按钮、菜单和菜单项。完成此步骤后,查看 ``layer.xml`` 文件。这样做时,您应该看到类似下文的内容,具体取决于您所删除的条目:
[source,xml]
----
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE filesystem PUBLIC "-//NetBeans//DTD Filesystem 1.1//EN" "https://netbeans.org/dtds/filesystem-1_1.dtd">
<filesystem>
<folder name="Menu">
<file name="BuildProject_hidden"/>
<folder name="File">
<file name="Separator2.instance_hidden"/>
<file name="SeparatorNew.instance_hidden"/>
<file name="SeparatorOpen.instance_hidden"/>
<file name="org-netbeans-modules-project-ui-CloseProject.shadow_hidden"/>
<file name="org-netbeans-modules-project-ui-CustomizeProject.shadow_hidden"/>
<file name="org-netbeans-modules-project-ui-NewFile.shadow_hidden"/>
<file name="org-netbeans-modules-project-ui-NewProject.shadow_hidden"/>
<file name="org-netbeans-modules-project-ui-OpenProject.shadow_hidden"/>
<file name="org-netbeans-modules-project-ui-RecentProjects.shadow_hidden"/>
<file name="org-netbeans-modules-project-ui-SetMainProject.shadow_hidden"/>
<file name="org-netbeans-modules-project-ui-groups-GroupsMenu.shadow_hidden"/>
</folder>
<file name="Refactoring_hidden"/>
<file name="RunProject_hidden"/>
<folder name="Window">
<file name="ViewRuntimeTabAction.shadow_hidden"/>
<file name="org-netbeans-modules-project-ui-logical-tab-action.shadow_hidden"/>
<file name="org-netbeans-modules-project-ui-physical-tab-action.shadow_hidden"/>
</folder>
</folder>
</filesystem>
----
== 调整窗口布局
使用 ``<上下文中的此层>`` 节点,我们不仅可以删除现有项目,而且还可以更改其内容。例如,HTML 编辑器可以对 HTML 文件进行编辑,因此,与使用 Java 源文件和项目的常规 IDE 相比,在初始布局中显示 ``Favorites`` 窗口是很重要的。
窗口布局的定义也作为层中的文件介绍,所有这些文件都存储在 ``Windows2`` 文件夹下。 ``Windows2`` 文件夹中的文件是 link:http://bits.netbeans.org/dev/javadoc/org-openide-windows/org/openide/windows/doc-files/api.html[Window 系统 API] 定义的伪可读 XML 文件。它们非常复杂,但好在 HTML 编辑器没有必要全部理解它们,如下所示:
[start=1]
1. 在标记模块的 ``<上下文中的此层>`` 节点中,在 ``Windows2/Components`` ``Windows2/Modes`` 中查找下面两个突出显示的文件(名为 "favorites.settings" "favorites.wstcref"):
image::images/htmleditor_find-favorites2-61.png[]
第一个文件定义组件的外观和创建方式。由于不需要更改外观以及创建方式,因此也不需要修改该文件。第二个文件对您的意义较大,它包含以下内容:
[source,xml]
----
<tc-ref version="2.0">
<module name="org.netbeans.modules.favorites/1" spec="1.1" />
<tc-id id="favorites" />
<state opened="false" />
</tc-ref>
----
[start=2]
1. 尽管大多数 XML 的含义都很模糊,但是不需要读取任何文档也能看懂其中的一行,将 ``false`` 更改为 ``true`` 似乎可以在缺省情况下打开该组件。请照此方法操作。
[start=3]
1. 可以使用类似的方法更改 ``CommonPalette.wstcref`` 文件,以便缺省打开组件面板。
现在,您应看到标记模块包含一个新文件,该文件指示您所更改的每个文件。实际上,这些文件将覆盖在上一步中找到的文件。这些文件已自动在模块的 ``layer.xml`` 文件中进行注册。
== 调整 Favorites 窗口
在文件窗口显示的 NetBeans 平台Application 项目的 ``branding`` 文件夹的子文件夹中,我们可以覆盖在 NetBeans 资源中定义的字符串。在此部分,我们将覆盖在 Favorites 窗口用于定义标签的字符串。例如,我们将 Favorites 标签值修改为 HTML Files,因为该窗口将专门用于 HTML 文件。
[start=1]
1. 打开文件窗口并展开 NetBeans 平台Application 项目的 ``branding`` 文件夹。
[start=2]
1. ``branding/modules`` 内创建一个新文件夹结构。(在 IDE 中,可通过以下方法创建文件夹:右键单击某个文件夹,选择“新建”|“其他”,然后从“其他”类别中选择“文件夹”。)新的文件夹应该命名为 ``org-netbeans-modules-favorites.jar`` 。在文件夹内,创建文件夹分层结构: ``org/netbeans/modules/favorites`` 。在最后一个文件夹内,也就是在 ``favorites`` 文件夹内,创建一个新的 ``Bundle.properties`` 文件:
image::images/htmleditor_favorites-branding-61a.png[]
这个文件夹结构和资源文件与 Favorites 窗口相关的 NetBeans 资源中的文件夹结构相匹配。
[start=3]
1. 添加在下面屏幕快照中显示的字符串,来覆盖 Favorites 窗口资源中匹配的资源文件所定义的相同字符串。
image::images/htmleditor_favorites-branding-61b.png[]
为了简化此步骤,复制并粘贴上文定义的字符串:
[source,java]
----
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.
----
稍后,在启动应用程序时,将会看到“收藏夹”窗口中的文本和标签已更改为上面列出的内容。这说明可以从 NetBeans 平台中提取组件,并根据需要标记该组件。
== 运行应用程序
运行应用程序很简单,只需右键单击项目节点,然后选择菜单项。
[start=1]
1. 右键单击应用程序的项目节点,然后选择“清楚并构建全部”选项。
[start=2]
1. 右键单击应用程序的项目节点,然后选择“运行”选项:
[start=3]
1. 在应用程序部署完成后,在 Favorites 窗口内右键单击并选择包含 HTML 文件的文件夹,然后打开 HTML 文件,如下所示:
image::images/htmleditor_html-editor-65.png[]
现在,就已创建好了一个功能完善的 HTML 编辑器,而无需键入一行 Java 代码。
== 分发应用程序
从两种方法中选择一种分发您的应用程序。如果需要尽可能控制您的应用程序,则应该使用 Web start (JNLP) Web 上分发应用程序。在这种情况下,希望更新应用程序时,您应该本地进行并通知最终户进行了更新,他们在下一次联机启动应用程序时将自动获取更新。此外,还可以选择使用包含应用程序的 ZIP 文件进行分发。使用这种方式,最终用户将在本地拥有完整的应用程序。您可以通过下文描述的更新机制分发更新和新特性。
=== 通过 ZIP 文件分发应用程序
为了使应用程序具有可扩展性,我们需要用户安装模块来增强应用程序功能。为此,应用程序应已捆绑插件管理器。
[start=1]
1. 选择“工具”|“插件”菜单项,然后安装一些对 HTML 编辑器有用的插件。浏览 link:http://plugins.netbeans.org/PluginPortal/[Plugin Portal] 并查找一些合适的插件。这也是最终用户更新其本地安装的应用程序的方式。
[start=2]
1. 右键单击应用程序的项目节点,然后选择“构建 ZIP 分发”选项。
[start=3]
1. ``dist`` 文件夹(可在文件窗口中找到)中,您现在应该能够看到 ZIP 文件,扩展它即可看到其内容:
image::images/htmleditor_unzipped-app-61.png[]
*注意:*如上所示,在 ``bin`` 文件夹中创建应用程序启动程序。
=== 通过共享 NetBeans Web Start 存储库分发 HTML 编辑器
除了使用 ZIP 文件分发之外,我们还可以通过微调使用“运行 JNLP 应用程序”第一次启动应用程序时生成的 ``master.jnlp`` 文件进行 Webstart 分发。即使已经完成了此操作,分发准备工作也还没有结束。至少还需要修改信息部分以提供更好的描述和图标。
对标准 JNLP 基础结构的另一处更改是,使用了 www.netbeans.org 上提供的共享 JNLP 资源库。缺省情况下,为套件生成的 JNLP 应用程序始终包含其所有模块以及它所依赖的所有模块。这对于企业内部的联网使用可能很有用,但是它对于大多数广泛的互联网使用不太现实。对于互联网,如果在 NetBeans 平台上构建的所有应用程序都引用 NetBeans 模块中的某个存储库,它可能更好,这意味着可以共享这些模块,而不需要多次下载。
NetBeans 6.1 提供了一个此类资源库。它并非包含 NetBeans IDE 的所有模块,而是仅包含一些足以使非 IDE 应用程序非常类似 HTML 编辑器的模块。要使用存储库,您仅需要添加正确的 URL 来修改 ``platform.properties``
[source,java]
----
# share the libraries from common repository on netbeans.org
# this URL is for release65 JNLP files:
jnlp.platform.codebase=http://bits.netbeans.org/6.5/jnlp/
----
只要应用程序作为 JNLP 应用程序启动,就可以从 netbeans.org 下载其所有共享插件模块并和执行相同操作的其他程序共享。
link:http://netbeans.apache.org/community/mailing-lists.html[请将您的意见和建议发送给我们]
== 另请参见
NetBeans HTML 编辑器教程到此结束。关于在 NetBeans 平台上创建和开发应用程序的更多信息,请参见以下资源:
* link:https://netbeans.apache.org/kb/docs/platform_zh_CN.html[其他相关教程]
* link:https://bits.netbeans.org/dev/javadoc/[NetBeans API Javadoc]