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

当前页面: 开发资料首页 → Netbeans 专题 → Color Sampler, Magnifier and Desktop Sampler Toolbar

Color Sampler, Magnifier and Desktop Sampler Toolbar

摘要: This article shows how to add custom tools as toolbar to the NetBeans Platform. We will use java.awt.Robot APIs to implement two example tools, the Color Sampler and the Magnifier. The Color Sampler lets you sample the color of any pixel on the desktop; whereas the Magnifier lets you magnify an area of the desktop and view it at various levels of magnification.

Introduction

Java API Used In This Tutorial

The java.awt.Robot class which was added to the J2SE in version 1.3. has couple of interesting APIs:

public Color getPixelColor(int x, int y)
The getPixel() API returns the color of a pixel at the given screen coordinates. Use this API to build a Color Sampler that can pick up the color from any pixel on the desktop. Color sampling tools are found on the tool palettes of most modern painting programs such as Adobe Photoshop(TM). This tool comes in very handy everytime you need to specify a color by providing the Hex, RGB or HSB color value. 

public BufferedImage createScreenCapture(Rectangle screenRect)
The createScreenCapture() API creates an image containing pixels read from the screen. Use this API to build a Magnifier that selects any area of the desktop and views it at various magnification levels. Such a Magnifier tool can for instance increase readability and therefor accessibility for vision impaired users.

Applications of a Color Chooser

We will use the Magnifier in conjunction with the Color Sampler to create a new tool for very precise color sampling: This custom color chooser panel for javax.swing.JColorChooser will be added to the NetBeans Platform.

The NetBeans IDE is a powerful open-source IDE. It provides a visual form editor for building Java Desktop GUIs using Java AWT/Swing components. The IDE also supports creating Web GUIs using HTML/CSS/JSP and Java Beans. All of these development activities involve defining color settings and require you to provide a precise Hex, RGB or HSB color value.

In these various contexts, color values have to be formatted in different ways:

The Color Sampler can help you quickly enter the appropiate color format because the value of the color sampled can be output in different ways. The NetBeans IDE benefits greatly from the functionality of the Color Sampler and the Magnifier tool in this domain.

Steps

To add the Color Chooser functionality to the NetBeans IDE, we will create a toolbar. The toolbar will also work in other IDEs such as Sun Java Studio Enterprise and Sun Java Studio Creator, which are based on NetBeans. In fact, the toolbar is not dependent on any of the IDE features and thus can be used in any application based on the NetBeans Platform!

This article shows you how to develop:

How the Color Sampler Tool works

The ColorSampler tool makes use of the public Color getPixelColor(int x, int y) API from java.awt.Robot. It creates a color sampler label with a dropper icon [Color Sampler dropper] as shown in the following screen shot.

Color Sampler tool

The tool also registers a mouse listener and a mouse motion listener on the label. In the mousePressed, mouseDragged and mouseReleased callbacks, it samples the color of the pixel under the mouse cursor using the getPixelColor() API. Then it sets the background color of the Color Preview label to the sampled color, and sets the content of the Color Value text field to the sampled color value in the selected format. The Color Value text field also supports dragging&dropping of the color value string.

You select the color format to be used with the Color Format dialog. you invoke the Color Format dialog by clicking on the button with the pencil icon [Select color format].

Select Color format dialog

The following formats are supported:

See Listing 1 - ColorSampler.java

How the Magnifier Tool works

The Magnifier tool makes use of public BufferedImage createScreenCapture(Rectangle screenRect) API from java.awt.Robot. The tool creates a Magnifier label with a size of 256x256 pixels. It also creates a slider with a range of integer values from 1 to 16. The slider is initialliy set to 16, as you can see in the following screenshot.

Magnifier tool

The Magnifier tool registers a mouse listener and mouse motion listener on the Magnifier label. In the mousePressed, mouseDragged and mouseReleased callbacks, the square area at the mouse coordinates on the desktop is sampled using the createScreenCapture() API. The user can magnify any area of the desktop by dragging the mouse on the Magnifier label.

The size of the sampled area depends on the current setting of the slider. If the slider is set to 16, the tool samples a 16x16 square pixel area and scales the sampled image to 256x256 square pixels corresponding to a 1:16 magnification. If the slider is set to 8, the tool samples a 128x128 square pixel area and scales the sampled image to 256x256 square pixels corresponding to a 1:2 magnification.

See Listing 2 - Magnifier.java

How the Color Chooser Panel Works

Color Sampler based Color Chooser panel for JColorChooser

The ColorSamplerColorChooser is a custom color chooser panel for javax.swing.JColorChooser. It extends he javax.swing.colorchooser.AbstractColorChooserPanel API and makes use of the Color Sampler and the Magnifier tools. It adds a change listener to the Color Sampler tool and reacts to the ChangeEvent by setting the color to the sampled color.

See Listing 3 - ColorSamplerColorChooserPanel.java

Desktop Sampler Toolbar for Netbeans

The following screenshot shows the Desktop Sampler toolbar in action in the NetBeans 4.1 IDE. Click to view it in full size.

Desktop Sampler Toolbar for NetBeans

The Desktop Sampler Toolbar Module

The DesktopSampler is a NBM module for a NetBeans Platform-based application. By installing the module, you add the Desktop Sampler toolbar to the application. To install the module, download the DesktopSampler NBM file, choose Tools > Update Center > Install Manually Downloaded Module from the menu. Select the NBM module you want to install and follow the instructions in the Wizard. The module has been tested with NetBeans IDE 4.1 and latest NetBeans IDE 5.0.

This is how it works: After installation, the Desktop Sampler will appear as a new item in the NetBeans IDE toolbar. Click the dropper icon Color Sampler dropper, keep the mouse button pressed and move the mouse around to sample the color of pixels on your desktop.

If you need more acurate sampling, show the Magnifier tool by clicking the Show Magnifier button on the right hand side of the Color Value field. A preview box appears. Click into the preview box, keep the mouse button pressed and move the mouse around to display the desired section of your desktop in the preview box, then release the mouse button. Click the dropper icon Color Sampler dropper, keep the mouse button pressed and move the mouse around to sample the color of pixels in the preview box. If the pixels in the preview box are too small for you to pinpoint, use the slider to increase the magnification and try again. If you need the result in different format, click the pencil icon Select color format and select another.

The Desktop Sampler Toolbar Module Project

The module projects needed to build the module in NetBeans IDE are available in the Resources section below.

Note that there are two flavors of module project provided, one for NetBeans IDE 4.1 (Desktop Sampler Toolbar Module Project for NetBean IDE 4.1) and one for NetBeans 5.0 IDE (Desktop Sampler Toolbar Module Project for NetBeans 5.0 IDE). This is because module projects are handled slightly differently in NetBeans IDE 4.1 and NetBeans IDE 5.0. The rest of this article talks about the common aspects of the module project and highlights the differences when necessary.

Module Project Directory Structure

The listing below shows the structure of the DesktopSampler NetBeans Module Project.

DesktopSampler Module Project Listing (for NetBeans IDE 4.1)

DesktopSampler/build.xml
DesktopSampler/manifest.mf
DesktopSampler/nbproject/project.properties
DesktopSampler/nbproject/project.xml
DesktopSampler/nbproject/private/private.xml
DesktopSampler/src/org/netbeans/modules/desktopsampler/Bundle.properties
DesktopSampler/src/org/netbeans/modules/desktopsampler/layer.xml
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/Bundle.properties
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/ColorSampler.gif
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/ColorSampler.java
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/ColorSamplerColorChooserPanel.java
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/DesktopSampler.java
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/DesktopSamplerAction.java
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/DesktopSamplerActionIcon.gif
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/Dropper.gif
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/Format.gif
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/HideMagnifier.gif
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/Magnifier.gif
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/Magnifier.java
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/ShowMagnifier.gif

DesktopSampler Module Project Listing (for NetBeans IDE 5.0)

The support for module projects has improved a great deal in NetBeans 5.0. The differences are highlighted in red.

DesktopSampler/build.xml
DesktopSampler/manifest.mf
DesktopSampler/nbproject/platform.properties
DesktopSampler/nbproject/project.properties
DesktopSampler/nbproject/project.xml
DesktopSampler/nbproject/private/platform-private.properties
DesktopSampler/nbproject/private/private.properties
DesktopSampler/nbproject/private/private.xml
DesktopSampler/src/org/netbeans/modules/desktopsampler/Bundle.properties
DesktopSampler/src/org/netbeans/modules/desktopsampler/layer.xml
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/Bundle.properties
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/ColorSampler.gif
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/ColorSampler.java
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/ColorSamplerColorChooserPanel.java
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/DesktopSampler.java
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/DesktopSamplerAction.java
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/DesktopSamplerActionIcon.gif
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/Dropper.gif
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/Format.gif
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/HideMagnifier.gif
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/Magnifier.gif
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/Magnifier.java
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/ShowMagnifier.gif

manifest.mf

The manifest.mf file declares the information about the NetBeans module such as 

Manifest-Version: 1.0
OpenIDE-Module: org.netbeans.modules.desktopsampler/1
OpenIDE-Module-Specification-Version: 1.0
OpenIDE-Module-Layer: org/netbeans/modules/desktopsampler/layer.xml
OpenIDE-Module-Localizing-Bundle: org/netbeans/modules/desktopsampler/Bundle.properties

src/org/netbeans/modules/desktopsampler/layer.xml

The layer.xml files declares the DesktopSamplerAction and installs it in the WebTools toolbar.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE filesystem PUBLIC "-//NetBeans//DTD Filesystem 1.1//EN" "http://www.netbeans.org/dtds/filesystem-1_1.dtd">
<filesystem>
    <folder name="Toolbars">
        <folder name="Tools">
            <file name="org-netbeans-modules-desktopsampler-ui-DesktopSamplerAction.instance"/>
        </folder>
    </folder>
</filesystem>

src/org/netbeans/modules/desktopsampler/Bundle.properties

The Bundle.properties file provides a way to support internationalization and localization of module information.

OpenIDE-Module-Display-Category=Tools
OpenIDE-Module-Long-Description=\
    Desktop Sampler provides a toolbar for sampling colors from Desktop. \
    It also supports zooming of any parts of Desktop.
OpenIDE-Module-Name=Desktop Sampler
OpenIDE-Module-Short-Description=Desktop Sampler

nbproject/project.xml

The following listings show the project.xml files for NetBeans 4.1 and 5.0. As you can tell from the <dependency> tag, the openide APIs have been split from a single org.openide module in 4.1 to several modules (org.openide.actions, org.openide.util, org.openide.windows) in 5.0. Again the differences are highlighted.

project.xml (for NetBeans IDE 4.1)

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://www.netbeans.org/ns/project/1">
    <type>org.netbeans.modules.apisupport.project</type>
    <configuration>
        <data xmlns="http://www.netbeans.org/ns/nb-module-project/1">
            <code-name-base>org.netbeans.modules.desktopsampler</code-name-base>
            <path>DesktopSampler</path>
            <module-dependencies>
                <dependency>
                    <code-name-base>org.openide</code-name-base>
                    <build-prerequisite/>
                    <compile-dependency/>
                    <run-dependency>
                        <release-version>1</release-version>
                        <specification-version>4.41</specification-version>
                    </run-dependency>
                </dependency>
            </module-dependencies>
            <public-packages/>
            <javadoc/>
        </data>
    </configuration>
</project>

project.xml (for NetBeans IDE 5.0 development version)

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://www.netbeans.org/ns/project/1">
    <type>org.netbeans.modules.apisupport.project</type>
    <configuration>
        <data xmlns="http://www.netbeans.org/ns/nb-module-project/2">
            <code-name-base>org.netbeans.modules.desktopsampler</code-name-base>
            <standalone/>
            <module-dependencies>
                <dependency>
                    <code-name-base>org.openide.actions</code-name-base>
                    <build-prerequisite/>
                    <compile-dependency/>
                    <run-dependency>
                        <specification-version>6.3</specification-version>
                    </run-dependency>
                </dependency>
                <dependency>
                    <code-name-base>org.openide.util</code-name-base>
                    <build-prerequisite/>
                    <compile-dependency/>
                    <run-dependency>
                        <specification-version>6.4</specification-version>
                    </run-dependency>
                </dependency>
                <dependency>
                    <code-name-base>org.openide.windows</code-name-base>
                    <build-prerequisite/>
                    <compile-dependency/>
                    <run-dependency>
                        <specification-version>6.2</specification-version>
                    </run-dependency>
                </dependency>
            </module-dependencies>
            <public-packages/>
        </data>
    </configuration>
</project>

The details of project.xml file format can be found on the New API suport page and the API support release page.

build.xml

The following listing shows build.xml file for NetBeans 4.1 IDE and NetBeans 5.0 IDE. The NetBeans 4.1 IDE version requires the cluster harness support to build it. The details of cluster harness build are described in Rich Unger's FeedReader tutorial.

build.xml (for NetBeans IDE 4.1)

This uses the cluster_harness.

<?xml version="1.0" encoding="UTF-8"?>
<project name="DesktopSampler" default="netbeans" basedir=".">
    <import file="../nbbuild/module-scripts/projectized.xml"/>
</project>

build.xml (for NetBeans IDE 5.0 development version)

This uses the standard module project suopport.

<?xml version="1.0" encoding="UTF-8"?>
<!-- You may freely edit this file. See harness/README in the NetBeans platform -->
<!-- for some information on what you could do (e.g. targets to override). -->
<!-- If you delete this file and reopen the project it will be recreated. -->
<project name="org.netbeans.modules.desktopsampler" default="netbeans" basedir=".">
    <description>Builds, tests, and runs the project org.netbeans.modules.desktopsampler.</description>
    <import file="nbproject/build-impl.xml"/>
</project>

Desktop Sampler Action

The DesktopSamplerAction is declared in the layer.xml file and provides the mechanism to install the Desktop Sampler toolbar. The Action returns an instance of DesktopSampler from the getToolbarPresenter() API.

See Listing 4 - DesktopSamplerAction.java

DesktopSampler - a toolbar presenter for Desktop Sampler Action

The Desktop Sampler combines the Color Sampler tool and the Magnifier tool. It adds the ChangeListener to the ColorSampler and stores the color value of the sampled pixel in the clipboard. It also registers a mouse listener on the Color Preview label of the Color Sampler.

When the user double-clicks the Color Preview label, it launches a JColorChoooser which makes use of the custom ColorSamplerColorChooser panel. On the right hand side of the Color Value field, the tool provides a toggle button to show [Show Magnifier] and hide [Hide Magnifier] the Magnifier tool.

See Listing 5 - DesktopSampler.java

Building and testing the Module Project

To build the project, use the pop-up menu on the DesktopSampler module project node in the Projects window and choose the Build menu item. To test the project, use the pop-up menu on the DesktopSampler module project node in Projects window and choose the Install and Reload menu item. To create your own NBM file from the project, choose the Create NBM menu item and install the created NBM file by choosing the Tools > Update Center > Install Manually Downloaded Module from the menu.

Conclusion

In this article, we have shown the details of how to build the Color Sampler and the Magnifier tool. You learned to combine them to a handy Color Chooser - a custom color chooser panel for javax.swing.JColorChooser, and how to build a toolbar for NetBeans Platform providing the tool's functionality.

Resources

Related Links


↑返回目录
前一篇: CMP Mapping in NetBeans IDE 4.1
后一篇: Comparing Java EE 5 Platform and J2EE 1.4 Platform