[搜集整理]Eclipse+SWT开发入门(2)

1: Eclipse中用SWT和JFace开发入门 ;2:在Eclipse中使用SWT进行界面设计......

[搜集整理]Eclipse+SWT开发入门
目录

1:Developing SWT applications using Eclipse
2：使用Jigloo开发SWT的入门教
3：Jigloo 开发 SWT 的入门教程

 

 

Developing SWT applications using Eclipse

While SWT is integrated as part of the Eclipse plug-in API, for standalone application development it is best to develop against the SWT standalone download. This document will help you get set up.

First, download the .zip of SWT for your platform from the SWT homepage.

The SWT .zip file can then be imported into your workspace. In the File menu, choose Import and select the Existing Projects Into Workspace wizard. (In newer versions of eclipse, you can find Existing Projects Into Workspace in the General category).

Direct the wizard to the location where you downloaded the .zip file. This will create a project called org.eclipse.swt in your workspace.

Your Java projects can then add the SWT project as a dependency. Open the properties dialog of your Java project, and on the Java Build Path page, include the org.eclipse.swt project.

With the SWT project as a dependency, you can now benefit from Eclipse features such as the Javadoc view and code assist.

Now you can run any main class in your project by selecting the class and then selecting Run > Run As > Java Application

A Jigloo SWT Tutorial

In this simple tutorial you will create a simple browser with an "About" dialog.

Topics covered:

• Arranging elements using FormLayout
• Navigating between visual elements in the tree outline and their code
• Adding multiple elements of the same type to a form
• Multi-selecting elements
• "Surround by" action - useful for times when you realise you really need your elements to be in a tab folder, etc
• Changing which properties appear under the "Basic" and "Expert" headings in the "GUI Properties" editor.

First you will need a Java project and (preferably) a package to hold your classes.
If you don't know how to do this then hitting Ctrl+N is a quick way to bring up the "Create" dialog from which you can perform both these steps.

Creating the main application window

Create new Composite

...again, Ctrl+N will show the "create" dialog, from which you should select "GUI forms->SWT->Composite"



As well as creating your composite, Jigloo will copy the jar and native libraries into your project. It copies all the native libraries, even though you generally will not need them all, but you never know...

Choose your editor preferences

Now we've got a Jigloo editor open, let's change how it looks. Click on the "Open Jigloo preferences editor" button in the toolbar to the left of the Jigloo editor. The Eclipse preferences window appears with Jigloo selected. Choose "Appearance and Behaviour" and then "Tabbed panels". This is useful when you want to maximize your design area, but "Split-pane" can be useful if you want to see immediately the connection between code and GUI.


Now hit "OK" and close and re-open the Jigloo editor (you need to do this to change to tabbed panels). If your java class does not immediately re-open in the Jigloo editor, you can ensure that it uses Jigloo's Form Editor by right-clicking on the class and choosing "Open with->Form editor".

Start adding controls

The composite is created initially with a FormLayout manager, which allows you to position elements absolutely and relatively on the form and automatically resizes them as the form changes shape. However, other layouts are useful for certain purposes - for example GridLayout is very useful for situations where your elements are layed out in a grid, with elements spanning multiple rows or columns. If you wish to set a layout manager for a composite, select it from the "layout" palette and then click on the element you wish to apply it to, or right-click on the element and use the "Set Layout" options.

Let's add a "GO" button to the top right of the form. First click on the "Button" icon in the "Controls" palette and "drop" the button in the top-right corner of the form, using the alignment lines.



Then enter a name and initial text (and an icon image if you like) in the dialog that will appear.



You may need to re-adjust the position of the button after it is added to the form - Jigloo does a better job once it knows exactly how big the button is.
Then add a CCombo control to the top left of the form, call it addressCombo with initial value "www.cloudgarden.com" and stretch it over to meet the "GO" button. You can also drag it's bottom edge to make it the same height as the goButton. Then right-click on the addressCombo and choose "Set/Change style...->BORDER", which will give it a 3D border.

Now click on the alignment button at the top-right of the addressCombo - an "alignment helper" should pop up (see image)


Click on the right anchor button till the anchors look the same as in the image above. Now the addressCombo's top, left and right edges are anchored fixed distances from the top, left and right edges of the form and it will expand horizontally if the form is resized.

Then select the goButton and anchor it as shown in the image below, so that it stays fixed in the top right corner of the form (and does not resize) as the form is resized.


Now close the alignment helper and make the main form bigger because we will add more controls - notice that the addressCombo gets wider.

Now add a "Status" CLabel to the bottom left of the form, an "About" Button called (surprise) aboutButton to the bottom-right of the form, a CLabel called statusLabel stretched along the bottom edge between the other label and the aboutButton, and then add a Browser control in the center of the form.



Anchor all controls so that the browser control expands in both directions and the statusLabel expands horizontally.

You can test whether your form behaves as expected when it is resized by clicking the "Preview" button in the outline view.

Creating the About Dialog

Create a new SWT Dialog called AboutDialog (use CTRL+N to open the "New" dialog)


Again, it will already have FormLayout set as it's layout manager.

Add a Button and CLabel as shown, and anchor them so the label stretches both ways and the button is anchored to the bottom-right.

A bit about properties

Now, use the property editor to set the CLabel's alignment to CENTER



Since we are in the property editor, we should take a moment to look at property "categories" which organise properties into "Basic", "Expert", "Hidden" and any other category you might want to create. For instance, if you scroll down a bit in the property list you'll see the "Expert" category, and a property "backgroundImage". You may want to use this property a lot and so move it to the "Basic" category. You can do this by simply right-clicking on a property name and choosing the category you want from the list (see below).

Back to the dialog

Now, just to demonstrate the "Surround by" feature, right-click on the label and choose "Surround by container...->CTabFolder"



Then add a new CTabItem (from the "Items" palette) to the newly-created CTabFolder, add a CLabel to the CTabItem

Add code to dispose dialog

Now, select the OK button and find the "Events" section in the "GUI Properties" view. Then scroll down and open the "SelectionListener" node, and set "widgetSelected" to "inline"


Jigloo will flip to the source code editor, at the place where the widgetSelected event handler has been inserted. Edit the code to add

dialogShell.dispose()

as shown, so that the dialog will close when the OK button is hit.

Add event code to main composite

But how will the dialog appear in the first place? We will add code to the main composite's aboutButton event handler, so go back to the main composite and add a SelectionListener.widgetSelected event handler for the aboutButton. If you like, use a "handlerMethod" instead of "inline" this time. Then add the following code to the event handler:

AboutDialog about = new AboutDialog(getShell(), SWT.DIALOG_TRIM);
about.open();

Now, it would be nice if the statusLabel's text were updated from the browser, so add a StatusTextListener.changed event handler to the browser control (using Jigloo's event editor, of course) and add a single line of code (shown in bold text below) so the handler looks like this:

browser1.addStatusTextListener(new StatusTextListener() {
public void changed(StatusTextEvent evt) {
statusLabel.setText(evt.text);
}
});


Now, we need to be able to send a url to the browser, so we will add a method that will do that, and also add the url to the addressCombo's list (if it is not already in it)

private void go() {
String url = addressCombo.getText();
if(addressCombo.indexOf(url) < 0)
addressCombo.add(url);
browser1.setUrl(url);
}

Then we will add a KeyListener.keyPressed handler to the addressCombo (using Jigloo's event editor), so that when "Enter" is pressed the url will be sent to the browser

addressCombo.addKeyListener(new KeyAdapter() {
public void keyPressed(KeyEvent evt) {
if(evt.keyCode == SWT.CR)
go();
}
});

And finally, a simple SelectionListener.widgetSelected handler to the goButton

goButton.addSelectionListener(new SelectionAdapter() {
public void widgetSelected(SelectionEvent evt) {
go();
}
});

Running the app

Congratulations! You are all done! Hit CTRL+S to save the form. A quick way to run the main method of the class you just created is to click the "Run" button in the Outline view.


And here it is running...

使用Jigloo开发SWT的入门教程

cleverpig 发表于 2008-05-06 13:25:58
作者:cleverpig 来源:Matrix
评论数:4 点击数:745 投票总得分:0 投票总人次:0
关键字:Jigloo,SWT,开发,入门

摘要 :

 

本文介绍一下如何用 Jigloo 开发一个简单的 SWT 应用把自己编写的 public static String doConvert(String input) 方法封装成图形界面的版本. 本文适用于从未有过 GUI/SWT 开发经验但是熟悉 Eclipse IDE 的基本使用以及插件安装的读者, 读者同时应该对 Java 语言有了解和使用的经验. 本文不讲述 SWT/Swing 以及 GUI 设计的相关知识.

 

 

使用Jigloo开发SWT的入门教程

作者:BeanSoft

经常有朋友苦于自己做了一个转换工具算法, 想用图形界面封装一下给同事使用, 却不知道如何下手. 本文介绍一下如何用 Jigloo 开发一个简单的 SWT 应用, 把自己编写的 public static String doConvert(String input) 方法封装成图形界面的版本. 本文适用于从未有过 GUI/SWT 开发经验但是熟悉 Eclipse IDE 的基本使用以及插件安装的读者, 读者同时应该对 Java 语言有了解和使用的经验. 本文不讲述 SWT/Swing 以及 GUI 设计的相关知识.

如果有读者希望用 Swing 来进行这个界面的设计, 那么请您留言发表建议, 如果需要的话我将讲述 Jigloo 开发 Swing 的入门教程, 要实现的目的和本文相同, 但是步骤相对简单, 因为不需要安装 Swing(JDK 自带了). 笔者的Code Manager.SWT即是用 Jigloo 完成了大部分的界面开发工作.

期望对如何使用 Jigloo 有深入了解的读者,可以在安装 Jigloo 插件后阅读 Eclipse 帮助文档中的 Jigloo GUI Builder Guide 一节了解更多的技巧, 例如: 如何在大文件模式下使用 Jigloo, 如何避免解析某些代码, Jigloo 如何解析界面代码以及如何打开由其它界面设计器制作的界面文件等. 这些帮助文档可以通过菜单 Help -> Help Contents 来打开.

关于Jigloo

Jigloo 是一个 Eclipse 插件，使开发者可以快速构建在 Java平台上运行的复杂图形用户界面 (GUI)。它可用于构建基于 Swing 的应用程序和基于 Standard Widget Toolkit (SWT) 的应用程序。它是一个易于使用的可视化编辑器，因此可以为桌面应用程序快速创建 UI。

一. 搭建开发环境

1. SWT 类库的下载和安装

SWT 是 IBM 出品的类似于 AWT 的组件包, 基于 OS 组件封装模拟而成, 由 C 代码和 Java 代码混合而成. http://www.eclipse.org/swt/有详细介绍，而且大家也可以 Google一下. 本文以 Windows 版本为例进行讲解. 需要注意的是并非所有平台都能运行 SWT, 详情请参考 SWT 项目主页的介绍. 并且不同的平台需要对应平台的 SWT 运行库.
截图:




下载 SWT 3.3 M5 swt-3.3M5-win32-win32-x86.zip( Windows 版本):
使用eclipse3.3的好处是它运行的时候不需要再指定library 路径了.

然后参考 Developing SWT applications using Eclipse 一文中的说明搭好基于 Eclipse 的开发环境(以下为文章内容的中文翻译):

因为 SWT 被集成为 Eclipse plug-in API 的一部分, 独立运行的应用程序开发最好基于 SWT 独立版的下载. 这个文档讲帮助你安装.

首先, 从SWT主页下载适于您的平台的 SWT 的.zip 文件.

SWT .zip 文件可以导入到你的工作区. 选择 File 菜单, 然后选择 Import , 选中 Existing Projects Into Workspace 向导. (新版本的 eclipse 中, 你可以在 General 分类下找到 Existing Projects Into Workspace).


定位向导里面的路径到你下载的 .zip 文件所在的目录. 这将会在工作区里创建一个名为 org.eclipse.swt 的工程.


您自己的 Java 项目可以将 SWT 项目作为依赖添加进来. 打开Java 项目的 Properties 对话框, 在 Java Build Path 设置页中, 包含 org.eclipse.swt 项目.


将 SWT 项目作为依赖项, 你可以使用 Eclipse 的一些方便的功能例如 Javadoc 视图和代码提示(code assist).


现在你可以在你的项目中运行任何的主类, 通过选中类然后选择菜单 Run > Run As > Java Application.

2. Jigloo 的下载和安装

Jigloo能识别大多数的 FormBuilder 创建的 GUI, 例如 JBuilder 等, 运行速度比较快, 比 Visual Editor 好用. 可以编辑 AWT,Swing/SWT 的界面. Jigloo个人用免费, 商用需收费.

注: 3.95 版本上笔者测试运行过的 Eclipse 版本有 3.2, 3.3. 为了便于讲述, 本文所使用的 Eclipse 版本是 3.3.0, Jigloo 3.95, JDK 1.5.

下载地址: jigloo_395.zip

二. Jigloo 简单使用

1. 初识 Jigloo

首先我们要如上所示新建一个名为 MyProject 的 Java 工程:

选择菜单 File -> New -> Project..., 然后选择在第一个分类中选择 Java Project, 点击 Next, 然后输入 MyProject, 并按照上节所讲设置好依赖关系. 然后请复制下列代码然后在 MyProject 的 src 目录上点击右键, 选择"Paste", 这样这个转换类就出现在了工程中:

public class Converter {
public static String doConvert(String input) {
return input + " is converted.";
}
}

然后我们选择菜单 File -> New -> Other..., 在所出现的 New 对话框中打开分类 GUI Forms -> SWT, 选中 SWT Composite, 如下图所示:


在接下来的向导对话框中保持默认的输入值不变即可:


接着将会自动用 Jigloo 界面设计器打开新生成的文件, 显示如下:


在 Outline(大纲) 页面中显示如下内容:
(1) 按钮切换是否显示栅格;
(2) 按钮弹出一个窗口预览当前设计界面(不经过编译);
(3) 按钮编译并运行生成的代码;
(4) 按钮启动/停止分析代码改动(由代码生成设计界面);
(5) 按钮切换是否显示继承的组件;
(6) 按钮切换界面从 SWT 到 Swing 或者反向转换(注意会有代码错误出现, 并非 100% 准确);
(7) 列出了界面中的组件层次大纲, 单击可以选中相应的组件.

在编辑器页面中显示如下内容:
(8) 正在设计中的界面, 点击红色控制(handle)点并拖拉可以调整组件的大小, 位置;
(9) SWT/Swing 组件选择面板, 单击一个组件, 然后再单击一次(8), 即可将组件放到界面中, 同样也可以继续调节大小,位置;
(12) 显示的是代码视图, 这是生成的代码, 也可以再下面修改代码, 完毕后上面将会重新解析绘制设计中的界面;
在 GUI Properties 页面中显示如下内容:
(10) 按钮切换属性列表显示为拖拉面板(SashForm)或者多页面板(TabbedPane);
(11) 属性列表, 依次为: 属性(Properties), 布局(Layout), 事件(Event).

2. 拖拉快速搭建界面

轻松地拖放, 预览.

首先我们在(7)中选择 this - Composite, Grid, 然后在(11)中选择 Layout 面板, 点击树节点 Layout(*), 在右侧下拉列表框中选择其值为 Absolute( 绝对布局).

我们选择这个布局主要是为了快速开发的关系, 虽然这不是一个很好的选择. 详细信息可以自行浏览 SWT 开发相关的资料.

好了, 接下来在(9)中选择面板 Controls, 然后点击两次 Text 控件, 放到设计面板上, 拖拉使其不要重叠并放置在合适的位置上, 这两个组件按照默认值即可, 分别为 text1, text2. 如果发现放 Text2 的时候无法添加上去, 请把它放到 Outline 中的 (7) 的 this - Composite, Grid 即可.

最后我们把一个 Button 添加上去, 在添加对话框中修改 Text 值为 OK.

拖放各个组件(包括 Composite)来布局到合适的大小和位置, 如下图所示:


这时候可以点击工具栏按钮 (2) 或者 (3) 预览设计成的界面. Jigloo 已经帮你写好了大部分的代码, 因此无需担心界面无法显示.

3. 加入事件响应代码

首先点击一下界面上的 "OK" 按钮, 然后选择(11)中的 Event 面板, 然后展开SelectionListener , 单击 widgetSelected 节点右侧的not handled 下拉框, 然后选择 handler method, 这样将会生成一个点击 OK 后触发的事件调用方法, 如下图所示:

接着编辑器中的鼠标将会定位到刚才生成的事件方法中, 默认生成的代码如下所示:

private void button1WidgetSelected(SelectionEvent evt) {
System.out.println("button1.widgetSelected, event=" + evt);
//TODO add your code for button1.widgetSelected
}

我们在 TODO 后面加入下列代码即可完成我们所需要的功能了:

text2.setText(Converter.doConvert(text1.getText()));

这段代码将会设置文本框2中的文本内容为先前编写的转换代码所处理过的内容, 输入的内容是 text1 中显示的文本. 相当于调用如下一段代码:

String input = text1.getText();
String output = Converter.doConvert(input);
text2.setText(output);

setText(String) 和 getText() 方法分别对组件显示的文本内容进行读写操作.

4. 测试

点击 (3) 按钮,运行, 修改 text1 中的值, 然后点击 OK 按钮, 可以看到运行结果正常. 如下图所示


三. 打包发布应用

1. 目录布局以及复制依赖文件

我们这个项目仅仅依赖 swt.jar, 首先在 MyProject 下新建一个文件夹 lib, 然后从项目 org.eclipse.swt 下将swt.jar复制到当前项目的 lib 下, 即可, 最后的文件目录结构如下示:

MyProject
├─classes
├─lib
└─src

2. 编写启动脚本

在根目录下编写 运行.bat, 内容如下所示:

java -cp classes;libswt.jar NewComposite

双击运行此批处理文件可以看到主窗口.

3. 用 pack200 打包发布(可以大大减小个头)

如果使用的是 JDK 1.5, 可以用 pack200 来减小 swt.jar 的大小, 注意用户下载后必须先解压才能运行程序.pack200用法以及批处理文件语法请自行查找相关资料.

压缩所用的两个批处理文件如下:

压缩.bat 发布的时候运行一次

pack200 libswt.jar.gz libswt.jar
del libswt.jar

解压缩.bat 用户下载后需要运行一次

unpack200 libswt.jar.gz libswt.jar
del libswt.jar.gz

四. FAQ

一些常见小问题：

Q: 我编辑下面的代码后发现 GUI Properties 面板和组件层次大纲消失了?

A: 点击一下界面设计器中的按钮后 GUI Properties 面板将会再次出现.

Q: 我想给窗口设置一个标题, 并且给两个文本框设置默认的值为空, 怎么办?

A: 修改 Properties 属性中的 text 即可, 文本框的可以先在界面设计器中选中组件, 然后在GUI属性页修改即可. 主窗口的稍微复杂一点, 如下图所示需要先选中 Shell, 然后再修改:


Q: 我想使用多行文本编辑器(TextArea), 而文中的例子是单行文本框, 怎么办?

A: 将这段操作改为 " 接下来在(9)中选择面板 Controls, 然后点击两次 TextArea 控件, 放到设计面板上, 拖拉使其不要重叠并放置在合适的位置上, 这两个组件按照默认值即可, 分别为 text1, text2. 如果发现放 Text2 的时候无法添加上去, 请把它放到 Outline 中的 (7) 的 this - Composite, Grid 即可", 而不是使用原来的 Text 控件.

Q: 发现关闭 Eclipse 再打开刚才设计的代码的时候没有出现 Jigloo 界面设计器, 我如何才能打开它进行编辑?

A: 有时候 Eclipse 不能记住上次打开某文件的时候所用的编辑器, 因此首先确保这个类没有被 Eclipse 的其它编辑器打开, 然后右键点击文件选择 "Open with->Form Editor". 如下图所示:


五. 相关资源

下载本文所使用的 MyProject 源码：下载MyProject.zip后解开文件, 然后需要运行一次 解压缩.bat, 将项目导入 Eclipse 即可编译.
IBM提供的Jigloo入门：开始使用 Jigloo：Eclipse 的 GUI 构造器

六. 关于作者

刘长炯，中国北京，西安电子科技大学通信工程学士。曾任Synnex China公司系统架构师和Java讲师。擅长于Java EE 开源架构和WebLogic平台解决方案。他的Blog：http://www.blogjava.net/beansoft。

Jigloo 开发 SWT 的入门教程

作者: BeanSoft@126.com

日期: 2007.03.18

转载请注明出处http://www.blogjava.net/beansoft/archive/2007/03/18/104577.html.

经常有朋友苦于自己做了一个转换工具算法, 想用图形界面封装一下给同事使用, 却不知道如何下手. 本文就介绍一下如何用 Jigloo 开发一个简单的 SWT 应用把自己编写的 public static String doConvert(String input) 方法封装成图形界面的版本. 本文适用于从未有过 GUI/SWT 开发经验但是熟悉 Eclipse IDE 的基本使用以及插件安装的读者, 读者同时应该对 Java 语言有了解和使用的经验. 本文不讲述 SWT/Swing 以及 GUI 设计的相关知识.

如果有读者希望用 Swing 来进行这个界面的设计, 那么请您留言发表建议, 如果需要的话我将讲述 Jigloo 开发 Swing 的入门教程, 要实现的目的和本文相同, 但是步骤相对简单, 因为不需要安装 Swing(JDK 自带了). 笔者的 Code Manager .SWT 即是用 Jigloo 完成了大部分的界面开发工作.

期望对如何使用 Jigloo 有深入了解的读者可以在安装 Jigloo 插件后阅读 Eclipse 帮助文档中的 Jigloo GUI Builder Guide 一节了解更多的技巧, 例如: 如何在大文件模式下使用 Jigloo, 如何避免解析某些代码, Jigloo 如何解析界面代码以及如何打开由其它界面设计器制作的界面文件等. 这些帮助文档可以通过菜单 Help -> Help Contents 来打开.

一. 搭建开发环境

1. SWT 类库的下载和安装

SWT 是 IBM 出品的类似于 AWT 的组件包, 基于 OS 组件封装模拟而成, 由 C 代码和 Java 代码混合而成. 首页: http://www.eclipse.org/swt/. 详细介绍可以 Google. 本文以 Windows 版本为例进行讲解. 需要注意的是并非所有平台都能运行 SWT, 详情请参考 SWT 项目主页的介绍. 并且不同的平台需要对应平台的 SWT 运行库.

截图:

下载 SWT 3.3 M5 swt-3.3M5-win32-win32-x86.zip:

Download from: [China] Actuate Shanghai (http) Windows 版本. 用 3.3 的好处是它运行的时候不需要再指定 library 路径了.

然后参考 http://www.eclipse.org/swt/eclipse.php Developing SWT applications using Eclipse 一文中的说明搭好基于 Eclipse 的开发环境.

以下为文章内容的中文翻译:

因为 SWT 被集成为 Eclipse plug-in API 的一部分, 独立运行的应用程序开发最好基于 SWT 独立版的下载. 这个文档讲帮助你安装.

首先, 从SWT homepage 下载适于您的平台的 SWT 的.zip 文件.

SWT .zip 文件可以导入到你的工作区. 选择 File 菜单, 然后选择 Import , 选中 Existing Projects Into Workspace 向导. (新版本的 eclipse 中, 你可以在 General 分类下找到 Existing Projects Into Workspace).

定位向导里面的路径到你下载的 .zip 文件所在的目录. 这将会在工作区里创建一个名为 org.eclipse.swt 的工程.

您自己的 Java 项目可以将 SWT 项目作为依赖添加进来. 打开Java 项目的 Properties 对话框, 在 Java Build Path 设置页中, 包含 org.eclipse.swt 项目.

将 SWT 项目作为依赖项, 你可以使用 Eclipse 的一些方便的功能例如 Javadoc 视图和代码提示(code assist).

现在你可以在你的项目中运行任何的主类, 通过选中类然后选择菜单 Run > Run As > Java Application.

2. Jigloo 的下载和安装

Jigloo
能识别大多数的 FormBuilder 创建的 GUI, 例如 JBuilder 等, 运行速度比较快, 比 Visual Editor 好用. 可以编辑 AWT,Swing/SWT 的界面. 个人用免费, 商用需收费.

Note: Jigloo is free for non-commercial use, but purchase of a Professional License is required for commercial use (after successfully evaluating Jigloo).

注: 3.95 版本上笔者测试运行过的 Eclipse 版本有 3.2, 3.3. 为了便于讲述, 本文所使用的 Eclipse 版本是 3.3.0, Jigloo 3.95, JDK 1.5.

Eclipse:
2.1.*, 3.0*, 3.1*, 3.2, 3.3

Java:
1.3, 1.4 or 5.0

Platforms:

Windows, Linux (gtk) and Mac OSX. (On a Mac, only SWT GUIs can be built).

下载地址: jigloo_395.zip

二. Jigloo 简单使用

1. 初识 Jigloo

首先我们要如上所示新建一个名为 MyProject 的 Java 工程:

选择菜单 File -> New -> Project..., 然后选择在第一个分类中选择 Java Project, 点击 Next, 然后输入 MyProject, 并按照上节所讲设置好依赖关系. 然后请复制下列代码然后在 MyProject 的 src 目录上点击右键, 选择"Paste", 这样这个转换类就出现在了工程中:

public class Converter {
         public static String doConvert(String input) {
                return input + " is converted.";
         }
 }

然后我们选择菜单 File -> New -> Other..., 在所出现的 New 对话框中打开分类 GUI Forms -> SWT, 选中 SWT Composite, 如下图所示:

在接下来的向导对话框中保持默认的输入值不变即可:

接着将会自动用 Jigloo 界面设计器打开新生成的文件, 显示如下:

在 Outline(大纲) 页面中显示如下内容:
(1) 按钮切换是否显示栅格;
(2) 按钮弹出一个窗口预览当前设计界面(不经过编译);
(3) 按钮编译并运行生成的代码;
(4) 按钮启动/停止分析代码改动(由代码生成设计界面);
(5) 按钮切换是否显示继承的组件;
(6) 按钮切换界面从 SWT 到 Swing 或者反向转换(注意会有代码错误出现, 并非 100% 准确);
(7) 列出了界面中的组件层次大纲, 单击可以选中相应的组件.
在编辑器页面中显示如下内容:
(8) 正在设计中的界面, 点击红色控制(handle)点并拖拉可以调整组件的大小, 位置;
(9) SWT/Swing 组件选择面板, 单击一个组件, 然后再单击一次(8), 即可将组件放到界面中, 同样也可以继续调节大小,位置;
(12) 显示的是代码视图, 这是生成的代码, 也可以再下面修改代码, 完毕后上面将会重新解析绘制设计中的界面;
在 GUI Properties 页面中显示如下内容:
(10) 按钮切换属性列表显示为拖拉面板(SashForm)或者多页面板(TabbedPane);
(11) 属性列表, 依次为: 属性(Properties), 布局(Layout), 事件(Event).

2. 拖拉快速搭建界面

拖放, 预览.
首先我们在(7)中选择 this - Composite, Grid, 然后在(11)中选择 Layout 面板, 点击树节点 Layout(*), 在右侧下拉列表框中选择其值为 Absolute( 绝对布局).

我们选择这个布局主要是为了快速开发的关系, 虽然这不是一个很好的选择. 详细信息可以自行浏览 SWT 开发相关的资料.

好了, 接下来在(9)中选择面板 Controls, 然后点击两次 Text 控件, 放到设计面板上, 拖拉使其不要重叠并放置在合适的位置上, 这两个组件按照默认值即可, 分别为 text1, text2. 如果发现放 Text2 的时候无法添加上去, 请把它放到 Outline 中的 (7) 的 this - Composite, Grid 即可.

最后我们把一个 Button 添加上去, 在添加对话框中修改 Text 值为 OK.

拖放各个组件(包括 Composite)来布局到合适的大小和位置, 如下图所示:

这时候可以点击工具栏按钮 (2) 或者 (3) 预览设计成的界面. Jigloo 已经帮你写好了大部分的代码, 因此无需担心界面无法显示.

3. 加入事件响应代码

首先点击一下界面上的 "OK" 按钮, 然后选择(11)中的 Event 面板, 然后展开SelectionListener , 单击 widgetSelected 节点右侧的not handled 下拉框, 然后选择 handler method, 这样将会生成一个点击 OK 后触发的事件调用方法, 如下图所示:

接着编辑器中的鼠标将会定位到刚才生成的事件方法中, 默认生成的代码如下所示:

        private void button1WidgetSelected(SelectionEvent evt) {
                System.out.println("button1.widgetSelected, event=" + evt);
                //TODO add your code for button1.widgetSelected
         }

我们在 TODO 后面加入下列代码即可完成我们所需要的功能了:

text2.setText(Converter.doConvert(text1.getText()));

这段代码将会设置文本框2中的文本内容为先前编写的转换代码所处理过的内容, 输入的内容是 text1 中显示的文本. 相当于调用如下一段代码:

String input = text1.getText();
String output = Converter.doConvert(input);
text2.setText(output);

setText(String) 和 getText() 方法分别对组件显示的文本内容进行读写操作.

4. 测试

点击 (3) 按钮,运行, 修改 text1 中的值, 然后点击 OK 按钮, 可以看到运行结果正常. 如下图所示:

三. 打包发布应用

1. 目录布局以及复制依赖文件

我们这个项目仅仅依赖 swt.jar, 首先在 MyProject 下新建一个文件夹 lib, 然后从项目 org.eclipse.swt 下将swt.jar复制到当前项目的 lib 下, 即可, 最后的文件目录结构如下示:

MyProject
├─classes
├─lib
└─src

2. 编写启动脚本

在根目录下编写 运行.bat, 内容如下所示:

java -cp classes;libswt.jar NewComposite

双击运行此批处理文件可以看到主窗口.

3. 用 pack200 打包发布(可以大大减小个头)

如果使用的是 JDK 1.5, 可以用 pack200 来减小 swt.jar 的大小, 注意用户下载后必须先解压才能运行程序.pack200用法以及批处理文件语法请自行查找相关资料.

压缩所用的两个批处理文件如下:

压缩.bat 发布的时候运行一次

pack200 libswt.jar.gz libswt.jar

del libswt.jar

解压缩.bat 用户下载后需要运行一次

unpack200 libswt.jar.gz libswt.jar

del libswt.jar.gz

四. FAQ

欢迎提问, 并来 Wiki 留言交流.

一些常见小问题.

Q: 我编辑下面的代码后发现 GUI Properties 面板和组件层次大纲消失了?

A: 点击一下界面设计器中的按钮后 GUI Properties 面板将会再次出现.

Q: 我想给窗口设置一个标题, 并且给两个文本框设置默认的值为空, 怎么办?

A: 修改 Properties 属性中的 text 即可, 文本框的可以先在界面设计器中选中组件, 然后在GUI属性页修改即可. 主窗口的稍微复杂一点, 如下图所示需要先选中 Shell, 然后再修改:

Q: 我想使用多行文本编辑器(TextArea), 而文中的例子是单行文本框, 怎么办?

A: 将这段操作改为 " 接下来在(9)中选择面板 Controls, 然后点击两次 TextArea 控件, 放到设计面板上, 拖拉使其不要重叠并放置在合适的位置上, 这两个组件按照默认值即可, 分别为 text1, text2. 如果发现放 Text2 的时候无法添加上去, 请把它放到 Outline 中的 (7) 的 this - Composite, Grid 即可", 而不是使用原来的 Text 控件.

Q: 发现关闭 Eclipse 再打开刚才设计的代码的时候没有出现 Jigloo 界面设计器, 我如何才能打开它进行编辑?

A: 有时候 Eclipse 不能记住上次打开某文件的时候所用的编辑器, 因此首先确保这个类没有被 Eclipse 的其它编辑器打开, 然后右键点击文件选择 "Open with->Form Editor". 如下图所示:

五: 下载本文所使用的 MyProject 源码

下载后解开文件, 然后需要运行一次 解压缩.bat, 将项目导入 Eclipse 即可编译.

MyProject.zip 741KB