logo资料库

SWT 教程(Java图形界面开发).pdf

第1页 / 共88页
第2页 / 共88页
第3页 / 共88页
第4页 / 共88页
第5页 / 共88页
第6页 / 共88页
第7页 / 共88页
第8页 / 共88页
资料共88页,剩余部分请下载后查看
12 - An Eclipse GUI Builder Overview: .................................................................................................................... 1 A GUI Builder:............................................................................................................ 1 Acquiring the Designer Plug-in:.................................................................................. 2 Installation:.................................................................................................................. 2 Activating the Designer:.............................................................................................. 3 Creating a new SWT/JFace Java Project:.................................................................... 3 Creating a new SWT Java File:................................................................................... 4 Parts of the Designer: .................................................................................................. 7 Open Definition and Convert Local to Field Buttons ............................................... 11 Handling Events with the Designer:.......................................................................... 11 Adding an Event Listener with the SWT Designer:.................................................. 12 Deleting an Event Listener with the SWT Designer: ................................................ 14 Using Layout Managers in the SWT Designer: ........................................................ 14 NullLayout: ............................................................................................................... 15 FillLayout:................................................................................................................. 18 RowLayout:............................................................................................................... 19 GridLayout: ............................................................................................................... 20 FormLayout (Professional Version Only):................................................................ 22 StackLayout (Professional Version Only):................................................................ 30 BorderLayout (Professional Version Only): ............................................................. 31 FlowLayout (Professional Version Only): ................................................................ 33 GridLayout (AWT) (Professional Version Only): .................................................... 34 Creating Menus in the SWT Designer (Professional Version Only): ....................... 34 Custom Widget Templates (Professional Version Only):......................................... 37 Widget Morphing (Professional Version Only):....................................................... 38 Custom Composites (Professional Version Only): ................................................... 38 JFace Viewers (Professional Version Only): ............................................................ 41 Custom JFace Dialog Creation:................................................................................. 42 JFace Wizard Page Creation (Professional Version Only): ...................................... 44 JFace Application Creation (Professional Version Only):........................................ 46 Code Generation Options:......................................................................................... 50 Type Specific Code Generation Options (Professional Version Only):.................... 52 Additional Features of the Designer:......................................................................... 53 Creating a UI: Two Examples................................................................................... 55 Creating a GUI for an Address Book Application: ................................................... 55 Creating a new Project: ............................................................................................. 55 Creating a new SWT Application: ............................................................................ 55 Designing the GUI Window:..................................................................................... 56 Creating Menus: ........................................................................................................ 61 Creating Event Handlers: .......................................................................................... 63 Creating an SWT GUI for a Client Billing Application:........................................... 65 Taking a Look at the Original GUI: .......................................................................... 66 Creating Our Own ClientBillingUI:.......................................................................... 67 Creating the Client List Group:................................................................................. 68 Department of Computer Science University of Manitoba i 12 - An Eclipse GUI Builder www.cs.umanitoba.ca/~eclipse
Creating a Tabbed Folder:......................................................................................... 69 The Clients Tab: ........................................................................................................ 69 The Transactions Tab:............................................................................................... 71 Creating a Menu:....................................................................................................... 72 Running the Application: .......................................................................................... 73 Creating a Swing GUI for the Client Billing Application:........................................ 73 Creating the ClientBillingUI: .................................................................................... 73 Creating the Client List JPanel:................................................................................. 75 Creating a JTabbedPane: ........................................................................................... 78 The Clients Tab: ........................................................................................................ 79 The Transactions Tab:............................................................................................... 81 Creating a Menu:....................................................................................................... 85 Running the Application: .......................................................................................... 86 Summary: .................................................................................................................. 86 Department of Computer Science University of Manitoba ii 12 - An Eclipse GUI Builder www.cs.umanitoba.ca/~eclipse
12 - An Eclipse GUI Builder 1, 2 by Raphael Enns and Shantha Ramachandran Department of Computer Science, University of Manitoba, Winnipeg, Manitoba, Canada Last revised: May 21, 2004 Overview: In this tutorial, we describe how to use a GUI Builder plug-in for Eclipse, as well as look at its features. The GUI Builder that we will look at in this tutorial is the Designer created by Instantiations, Inc., and is available at http://www.swt-designer.com. We will be using version 2.0.0 of the Designer in this tutorial. A GUI Builder: In the previous tutorials, we have seen that SWT and Eclipse are fairly simple and straightforward to use. One of the most common questions about SWT, however, is “Where is the GUI Builder?” The answer is that there is no GUI Builder that comes with Eclipse. However, because Eclipse is open source and designed for plug-ins, a GUI Builder plug-in is able to be made and can be integrated right into Eclipse. The Designer is a plug-in that allows you design SWT and Swing GUIs in Eclipse. The Designer is available at http://www.swt-designer.com. A restricted version of the plug-in is available for free download at the above website. There is also a professional version, which Look at http://www.instantiations.com/swt-designer/comparison.html see a comparison between the free and the professional versions. is available for $199 USD. to includes extra features, that As of version 2.0 of the Designer, Instantiations includes both SWT and Swing support in the Designer. The SWT part is the same as in previous versions and is called the SWT Designer. The Swing part is called the Swing Designer and is similar to the SWT Designer. There is also a WindowBuilder product in the Designer which is simply both the SWT Designer and the Swing Designer. Since most of the features are the same or similar between the SWT Designer and the Swing Designer, this tutorial will mainly look at features of the SWT Designer. To demonstrate the similarities and the differences between the SWT Designer and the Swing Designer, one of the examples at the end of this tutorial will be done in Swing. 1 This work was funded by an IBM Eclipse Innovation Grant. 2 © Raphael Enns, Shantha Ramachandran and David Scuse Department of Computer Science University of Manitoba 1 12 - An Eclipse GUI Builder www.cs.umanitoba.ca/~eclipse
Acquiring the Designer Plug-in: You can download the Designer from the website, http://www.swt-designer.com. It can be found in the Download section. Make sure you get the correct file for your version of Eclipse. In order to download the Designer, you must have a username and password. You can get a username and password by registering at the Designer’s website. Installation: Once you have downloaded the Designer, installing it is quite simple. First make sure Eclipse is closed. Move the zip file into your Eclipse directory and then unzip the file. It will add three folders to your plugin directory that start with com.swtdesigner. To make sure that the plug-in was successfully installed, start Eclipse. Go to the menu item Help > About Eclipse Platform. Click on the Plug-in Details button, and a list will appear. The Designer and the SWT-Designer Help Plug-in items should appear in the plug-in list. In the case that you would wish to remove the Designer from your computer, the Designer creates a batch file called designer-delete.bat in your Eclipse program directory. Run this file to remove the Designer. Department of Computer Science University of Manitoba 2 12 - An Eclipse GUI Builder www.cs.umanitoba.ca/~eclipse
Activating the Designer: Before you begin using the Designer you have to activate it. To start the activation process, select Window > Preferences inside Eclipse. Select the “+” beside “Designer” on the left side of the Preferences window, click on License, and then click on the button that says “Registration and Activation”. Both SWT and Swing support comes with the Designer product, but depending on your serial number, only one of the three products is activated. For example, if you have a valid serial number for the SWT Designer, you can use the SWT functionality of the Designer, but you will not be able to use the Swing functionality except in evaluation or free mode. If you have a serial number for WindowBuilder, you will have full use of both the SWT and Swing functionality of the Designer. Select the type of Designer that you want to activate, select the desired mode, and then click Next. Follow the directions in the following pages to activate the Designer. Once it has been activated you are ready to start designing GUIs. Creating a new SWT/JFace Java Project: An SWT/JFace Java Project and a regular Java Project are nearly equivalent. They both create a Java project and you can use the Designer with both types. The only difference between an SWT/JFace Java project and a regular Java project is that the SWT/JFace Java project will automatically add the SWT and JFace jar files to the build path. Department of Computer Science University of Manitoba 3 12 - An Eclipse GUI Builder www.cs.umanitoba.ca/~eclipse
To create an SWT/JFace Java Project, select File > New > Project, and then in the resulting window select SWT > SWT/JFace Java Project. Click Next and then create the project the way you would normally create a Java Project. You do not have to add the SWT and JFace jar files to the build path because they are added automatically. Note: To be able to use SWT, the SWT runtime DLL must be accessible by the SWT jar file. For information on how to do this, see the Installing Eclipse tutorial, which can be found at http://www.cs.umanitoba.ca/~eclipse. Creating a new SWT Java File: The easiest way to set up a file to use the Designer is to use the Designer Wizard. Select File > New > Other from the menu and select Designer > SWT Application. Department of Computer Science University of Manitoba 4 12 - An Eclipse GUI Builder www.cs.umanitoba.ca/~eclipse
Click Next. In the window that opens, choose the project the file will go in and give the file a name. You can also select which method the SWT code will initially appear in by selecting the appropriate radio button as shown below. Click Finish to create the new file. This will add a file to your project that already has an SWT event loop and a shell created for you. The file should automatically open in the Designer Editor. To open a file that has not been created by the Designer, simply right-click on the file and select Open With > Designer Editor. This will open the file in the Designer Editor in the source view. There are two tabs at the bottom of the editor window labeled Source and Design as shown below. If you click on the Design tab, the file will be displayed in the design view and you will be able to visually design your GUI. Department of Computer Science University of Manitoba 5 12 - An Eclipse GUI Builder www.cs.umanitoba.ca/~eclipse
Two other quick ways to switch between the source and design view are to click on the “Switch between source and designer” button in the toolbar that is shown below, or simply press F12. Note: If a file was last opened in the Designer Editor, it will continue to open in that editor until a different editor is selected to open the file with. Below is an image of the Designer in the design view for a new file that was created using the SWT Application wizard. Initially the class only has a shell with no controls and no layout. Note: To view the Designer Editor using the full screen, simply double click on the tab of the current file at the top of the editor window. Department of Computer Science University of Manitoba 6 12 - An Eclipse GUI Builder www.cs.umanitoba.ca/~eclipse
分享到:
收藏