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

当前页面: 开发资料首页Netbeans 专题在 Mac OS X上开发 GUI

在 Mac OS X上开发 GUI

摘要: NetBeans 5.0 is a comprehensive Java development tool which supports the entire gamut of Java development, from client-side to server-side to embedded devices.

NetBeans 5.0 is a comprehensive Java development tool which supports the entire gamut of Java development, from client-side to server-side to embedded devices. It is free and open-source, hosted at www.netbeans.org. NetBeans developers have gone out of their way to make using NetBeans on Macintosh a delight for both the seasoned programmer and beginner alike. The NetBeans Integrated Development Environment (IDE) offers a range of features out-of-the-box that is far broader than those available in any other free Java development tool. Since NetBeans is written in pure Java, it will run on any platform. This article will demonstrate creating a user interface using Matisse, the user interface builder that is the crown jewel of the 5.0 release. Project Matisse allows you to create a truly cross-platform UI, just by dragging and dropping.

HTML code-completion in NetBeans 5.0
Not just for Java - HTML code-completion in NetBeans 5.0 being used to write this article

The challenge of creating cross-platform user interfaces

Any Macintosh user has seen applications which were ported from other operating systems and which don't look and feel quite right on their desktop. Most vendors don't want to completely rewrite their application for each operating system. Desktop Java applications are in a particularly sensitive situation, as they are cross-platform by nature - yet there are subtleties to making an application look and feel right that are specific to each platform.

Fortunately, Apple provides an excellent set of user interface design guidelines that can help design Mac-friendly UIs. In fact, it is usually a violation of these guide lines that can make an application look or feel not "Mac-friendly".

The Swing UI toolkit takes care of ensuring your UI components look right on Macintosh, but there's more to being Mac-friendly than pretty blue buttons. One of the other subtleties is component spacing. Every platform has different recommendations for how far apart components should be positioned from each other and the edges of the window they're in. With NetBeans 5.0 and Matisse, you can design your UI once, on your Macintosh, and know that it will obey these sorts of guidelines on all other platforms as well - not only does Matisse make Java UI design easier than ever, it makes true cross-platform UI design as simple as drag and drop.

Laying out forms in Java has traditionally been difficult. There is the extremely powerful, but not easy to use GridBagLayout, and a variety of other layout managers that have their uses and their limitations. Matisse, the UI builder in NetBeans 5.0, uses a unique, open-source layout manager which will be included in JDK 6, and can be shipped with your application to simply and quickly create great looking, cross-platform user interfaces that will work with JDK 1.4 and up.

Using Project Matisse

To start working with Matisse, simply create a new JPanel form in a project - you can either go to the File | New File menu item, or right- or ctrl-click a Java package and select JPanel Form.

Creating a new JPanel from a template Creating a new JPanel

This action will create a new Java source file that extends javax.swing.JPanel and open Matisse, the GUI editor - you can then drag and drop components from the palette that appears on the right onto the form.

Matisse Editor Snap to Guidelines
Dragging a JLabel onto a JPanel - guide lines automatically indicate correct component positioning

This screen shot shows dashed guide lines along the left and top edges of the form; drag a component onto this form and it snaps into position. For example, click the JLabel item in the Component Palette, drag the component into position and click. These guide lines are something special -- something that only Matisse provides – because they represent the spacing Apple recommends in the Apple user interface design guidelines for how far away from the edge of a window components should be placed. (Don't want the component to snap into place? Hold down the Option key before you place the component.)

There's more to it than that. Macintosh-specific positioning is an example of the problem of creating a platform-specific user interface: You don't want Macintosh-specific spacing anywhere but on a Macintosh. Otherwise your users would have the same experience -- the UI would look unnatural on Linux and Windows -- that you have when you run a badly ported application on your Macintosh. That's not the purpose of a UI design tool - it shouldn't create a UI that looks great only on the machine it was designed on. NetBeans solves this problem for all platforms. In the next section, we'll show you how.

Creating Cross-Platform UIs

Project Matisse calculates spacing on the fly -- the layout manager knows what platform it's running on, and it knows the user interface design recommendations are for each platform. If you compile this user interface and run it on Linux under GTK look and feel, the spacing will be what is recommended in the GTK's user interface guidelines. The same is true for Microsoft Windows or for the Java Look and Feel (Metal), so your UI will follow Sun's Java Look and Feel Design Guidelines. Just by dragging and dropping a label, you've already got a user interface that will do the right thing and feel comfortable to any user on any platform.

Using Project Matisse, your apps will look right running on any platform, not just the one you've designed it on.

Adding More Components

Most user interfaces are more complex than a single label component, so let's go ahead and add a few more components. For example, let's create a simple editing screen for customer information. The next step would be to add a text field where our user can enter some text. This, again, is as simple as selecting, dragging and dropping.

Dropping a text field
Dropping a JTextField beside our JLabel - Components automatically align on the font baseline

There are two more guide lines in the screen shot above. The vertical line is very much like the lines that guided us to drop the JLabel where we did. Matisse automatically suggests the spacing that Apple recommends for spacing between components on a form. When your app is deployed, it will automatically honor the correct spacing for whatever platform your application is running on. The UI is not hard-coded and it's not going to look Macintosh-specific just because you developed it on a Macintosh - this is a true cross-platform UI.

The other guide line that Matisse is helping out with is the horizontal one. That line indicates the font baseline. Human beings scan text in a straight line - actually one of the reasons that Serif text is still used in books is that the serifs (the little hats on the ends of the stalks of letters) actually help the eye follow text. If you want to make someone read something more slowly,

It is something measurable that you can prove with minimal experimentation. Unfortunately, an enormous number of user interfaces look like this:

Developers are all subtlely torturing our users when we create UIs like this! Yes, everyone reading this article can tell that the field is to hold a person's name. But how ever-so-slightly much longer did it take for your mind to process that image? And how does it affect your perception of the quality of the application that shows such a UI? Subtle differences like really set your application apart. In a competitive market, it matters. Ask yourself, would you rather use a web site where you can get mp3 files or use iTunes?

If you use NetBeans with Project Matisse, your problem has been solved permanently. And transparently. All you have to do is drag and drop. Matisse understands font baselines - even though two components are not the same height, they are aligned, precisely, accurately, on any platform, at any font size, on the font baseline. All you have to do to take advantage of this feature is to let go of the mouse button when the horizontal guide line appears.

It is true - you could do this with GridBagLayout - but it would require a lot of ingenuity and a lot of effort. You would need to calculate a pixel offset using an offscreen Graphics object and then use that to compute the Insets you provide to GridBagLayout for any given component (to calculate a false center that corresponds to the mutual font baseline). No developer should have to expend that kind of effort to create a true cross-platform UI. Now you don't have to. With NetBeans 5.0 & Matisse, it's drag, drop and you've got a UI that is a work of art on any platform.

Finishing The UI

Let's go ahead and turn this into a real user interface. We do this simply by dragging and dropping more components, and using the snap-to-guide line behavior of Matisse to drop components in the correct locations. Matisse displays the relationships between components, as seen below.


The completed UI - Components can be customized using property editor

Adding a few more components really puts in perspective how powerful a tool Matisse is for UI design - all of the components in the above screen shot have exactly the resizing behavior a user would expect, will look right across different platforms and font sizes. Your users will experience an application that seems as if it were designed just for their circumstances, no matter what platform they're running it on.

Beyond Desktop Java

This article has emphasized desktop Java support in NetBeans 5.0, but that barely scratches the surface of what NetBeans offers to server-side and other Java developers. NetBeans ships out-of-the-box with unmatched free support for Java Enterprise Edition development. You can download NetBeans bundled with an application server (the Sun Java System Application server, aka the open-source Project Glassfish, aka the J2EE Reference Implementation) for instant, out-of-the-box, J2EE application development. While NetBeans benefits from a plug-in architecture and a variety of community developed and third party plug-ins, great care is taken to ensure that what you get simply by downloading the NetBeans IDE will provide all you need to do serious development, without any added configuration or downloads.

The NetBeans Open Source Project

The NetBeans open source project is sponsored by Sun Microsystems, creator of the Java language. It is hosted on netbeans.org, which is home to the source code and a lively community of both the users and authors of NetBeans. There are a variety of mailing lists that are a resource to users of the IDE, and also the development lists where you can influence the future directions of the NetBeans project, or contribute yourself. All of these lists can also be accessed via a newsreader via news.gmane.org. The NetBeans IDE can be downloaded from netbeans.org.

More Information

Matisse Demo (Flash)

Matisse GUI Builder Quickstart Tutorial (zip)

Developing for Java with NetBeans 4.1 on Mac OS

Project Matisse (NetBeans GUI Builder)






↑返回目录
前一篇: 添加按钮的功能(初学者指南)(4)
后一篇: 在 NetBeans IDE 中对 GUI 窗体进行国际化(1)