Download Java Graphical User Interface (GUI) using Visual Editor in

Java
Graphical User Interface (GUI)
using Visual Editor in eclipse
CSI 1390 – Java Programming
Instructor: Saeid Nourian
[email protected]
University of Ottawa
Fall 2007
Outline








Installing VE
Creating Visual Classes
GUI Elements
Hierarchy of GUI Element
Layouts
Properties
Events
Main Method
Download eclipse


Currently VE (VisualEditor) is not compatible with
the latest version of eclipse.
To use VE, download older version of eclipse:



Eclipse 3.2 (Callisto)
http://www.eclipse.org/callisto/
Once download, unzip it and start it by doubleclicking on eclipse.exe
Install VE (VisualEditor) plugin
In order to visually create graphical user interface you
need to install the VE plug-in. To install VE:
1) From Help menu of eclipse, click on:

Software Updates > Find and Install
Install VE
2) Select “Search for new features to install” and click
Next.
Install VE
3) Select “Callisto Discover Site” and click Finish.
Install VE
4) Select a site such as “Canada” when prompted and
click Next.
Install VE
5) Select “Visual Editor 1.2.1.v…”
Install VE
6) Click on “Select Required” and click Next.
Install VE
7) Accept the User Agreement and click Next.
8) Click Finish.
Creating VE Projects

VE projects are no different that regular Java
projects. Simply build a new Java Project. Later we
will add Visual Classes to it.
Adding VE Classes

Click on the drop-down arrow of C* icon and
select “Visual Class”
Visual Classes

When the dialog box for making new
visual class opens you will have option
of several styles:



Frame: This is the most common option,
used for creating windows with minimize,
maximize and close buttons.
Applet: This is used for creating a visual java
class that can be embedded in a Webpage.
Panel: Each Frame is usually consisted of
several panels. In order to build your
customized panels and then re-use them
select this option.
GUI Elements

In order to add GUI elements, click on
Palette and select any of the available GUI
elements.
Layouts


Java uses Layouts to organize the GUI elements
in a Frame or Panel.
In order to disable the automatic Layout
organization of GUI elements, you must set the
Layout property of the Frame or Panel to “null”.
Only then you can freely place GUI element
anywhere you want.
Properties



Each GUI element has some properties that can be
changes.
As shown in previous example, a Panel has a
“layout” property that can be set to null.
A TextBox has other properties such as:





Text
Foreground [Color]
Font
PreferedSize
etc.
Hierarchy of GUI Elements


Click on “Java Beans” to see the Hierarchy of the
current GUI elements in your form.
Some GUI elements such as the Frame and Panel
(named jContentPane in this case) are capable of
holding many GUI elements as their children.
Events


When a GUI element interacts with human
users, it generates “events” to let the program
that the user did something.
For example, if we are interested to know if
someone has clicked on the OK button, then
we must create the “ActionPerformed” event
listener.
Events
Events

This would generate the following code:
jButton.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(java.awt.event.ActionEvent e) {
System.out.println("actionPerformed()");
}
});

Replace it with:
jButton.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(java.awt.event.ActionEvent e) {
jTextField.setText("Hello. OK is now pressed");
}
});
main() method


Like other Java applications we did before, we need
to have a main() method to start the program.
For GUI application, simple create a new instance of
the GUI class and set its visiblity to true:
public static void main(String[] args) {
MyFrame frame = new MyFrame();
frame.setVisible(true);
}
Summary



VE is an easy tool for creating GUI Forms.
VE automatically generates Java codes so
that you don’t have to manually make them.
Add your own code in the Event parts of the
generated to make the application work.