站内搜索: 请输入搜索关键词

当前页面: 开发资料首页Netbeans 专题NetBeans IDE 5.x HTML Editor Tutorial

NetBeans IDE 5.x HTML Editor Tutorial

摘要: This tutorial demonstrates how to build an HTML editor, without any Java coding whatsoever. The HTML editor that you create is a rich-client application built "on top of the NetBeans Platform". What this means is that the core of the IDE, which is what the NetBeans Platform is, will be the base of your application. On top of the NetBeans Platform, you add the plug-in modules that you need and exclude the ones that the IDE needs but that your application doesn't. Here you see some of the IDE's plug-in modules, added to the NetBeans Platform, which is its base

This tutorial demonstrates how to build an HTML editor, without any Java coding whatsoever. The HTML editor that you create is a rich-client application built "on top of the NetBeans Platform". What this means is that the core of the IDE, which is what the NetBeans Platform is, will be the base of your application. On top of the NetBeans Platform, you add the plug-in modules that you need and exclude the ones that the IDE needs but that your application doesn't. Here you see some of the IDE's plug-in modules, added to the NetBeans Platform, which is its base:

HTML Editor

You will see for yourself how simple and easy it is to build, or to be more precise, to assemble a full-featured application on top of the NetBeans Platform. At the end, you are shown how to make the final product easily downloadable and launchable using WebStart.

Note: Even though it is a separate product, there is no need to download the NetBeans Platform separately for purposes of this tutorial. You will develop the rich-client application in the IDE and then exclude the plug-in modules that are specific to the IDE but that are superfluous to you application.

The following topics are covered below:

Once the software is installed, this tutorial can be completed in 20 minutes.

For more information on working with modules, see the NetBeans Development Project home on the NetBeans website. If you have questions, visit the NetBeans Developer FAQ or use the feedback link at the top of this page.


Getting Started

Before you begin, you need to install the following software on your computer:


Playing with the Sample

Although this is a very simple demo application, it is not a toy! It is a real program that supports easy editing of HTML pages, with features such as code completion, validation, and predefined HTML snippets. To start the editor, make sure Java and WebStart are enabled on your computer and click on the following link:

Launch NetBeans HTML Editor

After dealing with WebStart and seeing a splash screen, you should see the HTML editor:

HTML Editor

Getting the Sources

So much for the end-user features. Let's now look at the code that runs this demo application. The source code is available in the NetBeans CVS repository and can be checked out or browsed online. The best way to study the source is to:

    cvs -d :pserver:anoncvs@cvs.netbeans.org:/cvs login
    cvs -d :pserver:anoncvs@cvs.netbeans.org:/cvs co contrib/sampleapps/htmleditor

Once you have the sources, open the project in NetBeans IDE 5.x. After you open the project, you will probably need to use the Project Properties dialog box to set the right location of the NetBeans IDE to make the project compilable.

The whole source consists of about 30 files, including build scripts, property files, images, which were mostly generated automatically by the NetBeans IDE 5.x plug-in module development support. Not much work needed to be done to create the HTML editor— it was not written from scratch, but heavilly reuses the existing components provided by NetBeans IDE 5.x. As a result, you get a very complex and compelling application, without writing any lines of code.

Now that you know what the end result looks like, you will assemble the HTML editor from scratch and learn how to make it optimally webstartable.


Assembling the HTML Editor

Creating the HTML editor means generating an application skeleton, excluding the modules and user interface items that you do not need, and then setting the Favorites window as the window that will open by default when the IDE starts. All of these activities are supported by user interface elements in NetBeans IDE 5.x.

Generating the Skeleton Application

  1. Using the New Project wizard (Ctrl-Shift-N), create a Module Suite Project from the template in the NetBeans Plug-in Modules category.

  2. Make a few changes in the module suite's Project Properties dialog box:

    • In the Application panel, specify that this is going to be a Standalone Application. When asked whether you want to exclude NetBeans IDE modules, click Skip. The HTML editor is going to need several of the IDE's modules, while others will not be necessary. You will exclude the superfluous ones in the next step. Make sure to also add a branding name for the executable and an application title for the titlebar, as shown below:

      application panel

    • In the Splash Screen panel, provide the application's splash screen, as shown below:

      splash screen panel

      If you do not have a splash screen, use this one.

    • Select the subset of modules that you need in the Libraries panel of the module suite. There, the only clusters that need to be selected are ide6 and platform6. Within the platform6 cluster, only the modules in this screenshot need to be selected, while in ide6, this screenshot and this screenshot show the required modules.

      So, the selected modules in platform6 are as follows:

      Actions APIs
      Bootstrap
      Core
      Core - Execution
      Core - UI
      Core - Windows
      Datasystems API
      Dialogs API
      Execution API
      Explorer and Property Sheet API
      Favorites
      File System API
      General Queries API
      I/O APIs
      JavaHelp Integration
      Look & Feel Customization Library
      Master Filesystem
      Module System API
      Nodes API
      Output Window
      Progress API & UI
      Settings API
      Settings Options API
      Startup
      Tab Control
      Text API
      UI Utilities API
      Utilities API
      Window System API

      And, in ide6, make sure the following are selected:

      Core - Component Palette
      Editor
      Editor Code Completion
      Editor Code Folding
      Editor Code Templates
      Editor Hints
      Editor Library
      Editor MIME Lookup
      Editor Settings
      Editor Settings Storage
      Editor Utilities
      Error Stripe API
      Error Stripe Core
      Experimental Search API
      HTML
      HTML Editor
      HTML Editor Library
      Image
      Plain Editor
      Plain Editor Library
      Project API
      Project UI API
      Tags Based Editors Library
      User Utilities

After finishing this step, the application should be able to start both as a standalone application and as a web-startable application. In the Projects window, right-click the project and choose Run to run the rich-client application or Run JNLP Application to run it as a web-startable application.

Pruning the User Interface

You can keep or reject as much of the IDE's user interface as you want. Your HTML editor probably does not need any or all of the items under the Tools menu. Similarly, maybe there are toolbars or toolbar buttons that you can do without. In this section, you prune the IDE's user interface until you are left with a subset that is useful to your rich-client application.

  1. Using the New Project wizard (Ctrl-Shift-N), select the Module Project template in the NetBeans Plug-in Modules category. In the Name and Location panel, make sure that you add the module project to the module suite project that you created in the previous section.

  2. In the Important Files node, expand the XML Layer node. Two subnodes are exposed:

    expanded xml layer

    In the <this layer in context> node, the IDE shows you a merged view of all virtual files that all modules register in their layers. To exclude items, you can right-click them and choose 'Delete', as shown below:

    this layer in context

    The IDE then adds tags to the plug-in module's layer.xml file which, when the plug-in module is installed, hides the items that you have deleted. For example, by right-clicking Menu Bar/Edit, you can remove menu items that are not necessary for the HTML Editor. By doing this, you generate snippets such as the following in the layer.xml file:

    <folder name="Menu">
        <folder name="Edit">
            <file name="org-netbeans-core-actions-JumpNextAction.shadow_hidden"/>
            <file name="org-netbeans-core-actions-JumpPrevAction.shadow_hidden"/>
        </folder>      
    </folder>

    The result of the above snippet is that the JumpPrevAction and JumpNextAction actions provided by another plug-in module are removed from the menu by the plug-in module that you are creating.

  3. Use the approach described in the previous step to hide as many toolbars, toolbar buttons, menus, and menu items as you want.

Tweaking the Window Layout

By using the <this layer in context> node, you can not only delete existing items, but you can also change their content. For example, the HTML editor works on HTML files, so in contrast to the regular IDE, which works with Java source files and projects as well, it makes sense to show the Favorites window in the initial layout.

The definition of the window layout is also described as files in layers, all stored under the Windows2 folder. The files in the Windows2 folder are pseudo-human readable XML files defined by the Window System APIs. They are quite complex but the good news is that for purposes of the HTML editor it is not necessary to understand them fully, as shown below.

  1. Right-click the Windows2 node and choose Find.

  2. Search for an object named Favorites, ignoring the case.

    You will find two files:

    Windows2/Components/favorites.settings
    Windows2/Modes/explorer/favorites.wstcref
    

    The first file defines what the component is going to look like and how it gets created. As this does not need to be changed, there is no need to modify the file. The second is more interesting for your purposes, it contains the following:

    <tc-ref version="2.0">
        <module name="org.netbeans.modules.favorites/1" spec="1.1" />
        <tc-id id="favorites" />
        <state opened="false" />
    </tc-ref>

  3. Even though most of the XML is cryptic, there is one line which seems promising—without reading any kind of documentation it seems likely that changing the false to true is going to make the component opened by default. And indeed, after restarting the application, the Favorites tab is opened by default.

  4. In a similar way you can change the Component Palete so that it opens by default.

  5. Next, since you are overriding the Core - Component Palette module and the Favorites module, you need to create runtime dependencies for these modules. Right-click the module project in the Projects window, choose Properties, and, in the Libraries panel, select the two modules that you need to override:

    deps

    Now open the Project Metadata file in the Important Files node. Notice that the two module dependencies have been declared as follows:

    <dependency>
      <compile-dependency/>
      <build-prerequisite/>
      <run-dependency>
      ...
      </run-dependency>
    <dependency>

    Since you have no Java classes in your project, you will generate build errors if you build the project while there are compile dependencies and build prerequisites. Prevent this problem by manually deleting the <compile-dependency> and <build-prerequisite> tags. However, since you are overriding these modules at runtime, you need to keep the <run-dependency> tags.


Distributing the HTML Editor via the Shared NetBeans JNLP Repository

Finally, let's finetune the master.jnlp file that is generated the first time you start the application. Even though it does the job, it is not yet ready for distribution. At the very least, you need to change the information section to provide better descriptions and icons.

Another change to the standard JNLP infrastructure is the use of a shared JNLP repository on www.netbeans.org. By default, the JNLP application generated for a suite always contains all its modules as well as all the modules it depends on. This may be useful for intranet usage, but it is a bit less practical for wide internet use. When on the internet, it is much better if all the applications built on the NetBeans Platform refer to one repository of NetBeans modules, which means that such modules are shared and do not need to be downloaded more than once.

There is such a repository for NetBeans 5.x. It does not contain all the modules that NetBeans IDE has, such as for example the ant module, which is not JNLP ready, but it contains enough to make non-IDE applications like the HTML editor possible. To use the repository you only need to modify platform.properties by adding the correct URL:

# share the libraries from common repository on netbeans.org
# this URL is for release50 JNLP files:
jnlp.platform.codebase=http://www.netbeans.org/download/5_0/jnlp/

As soon as the application is started as a JNLP application, all its shared plug-in modules are going to be loaded from netbeans.org and shared with other applications doing the same.




Next Steps

Now that you have learnt a lot of nice tricks and have a working application built on the NetBeans Platform, you can look at the XML Layer node's subnodes some more. Without much work, you can continue finetuning your application, pruning and tweaking it until you have a solid, streamlined application that does exactly what you want it to do. Next, find out how easy it is to add your own plug-in modules to your application. The Tutorials for NetBeans Module (Plug-in) and Rich Client Application Development show you a wide variety of use cases for extending the HTML editor. For example, maybe you want to add your own menu items in the menu bar. Or maybe you want to provide additional HTML snippets in the component palette. Both these scenarios, and many more, are outlined in the tutorials in the Module Developer's Resources.

Also take a look at the Introduction to Rich-Client Application Development, which shows you how to create your own Paint Application. Finally, a slightly more complex application is provided in the NetBeans IDE 5.x FeedReader Tutorial.
↑返回目录
前一篇: NetBeans IDE 5.0
后一篇: NetBeans IDE GUI 生成器可视反馈说明