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

1
Java Graphical User Interface (GUI)using Visual
Editor in eclipse

• CSI 1390 Java Programming
• Instructor Saeid Nourian
• snourian_at_site.uottawa.ca
• University of Ottawa
• Fall 2007

2
Outline

• Installing VE
• Creating Visual Classes
• GUI Elements
• Hierarchy of GUI Element
• Layouts
• Properties
• Events
• Main Method

3
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
  double-clicking on eclipse.exe

4
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 gt Find and Install

5
Install VE

• 2) Select Search for new features to install
  and click Next.

6
Install VE

• 3) Select Callisto Discover Site and click
  Finish.

7
Install VE

• 4) Select a site such as Canada when prompted
  and click Next.

8
Install VE

• 5) Select Visual Editor 1.2.1.v

9
Install VE

• 6) Click on Select Required and click Next.

10
Install VE

• 7) Accept the User Agreement and click Next.
• 8) Click Finish.

11
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.

12
Adding VE Classes

• Click on the drop-down arrow of C icon and
  select Visual Class

13
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.

14
GUI Elements

• In order to add GUI elements, click on Palette
  and select any of the available GUI elements.

15
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.

16
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.

17
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.

18
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.

19
Events
20
Events

• This would generate the following code
• Replace it with

jButton.addActionListener(new java.awt.event.Actio
nListener() public void actionPerformed(java.aw
t.event.ActionEvent e) System.out.println("act
ionPerformed()") )
jButton.addActionListener(new java.awt.event.Actio
nListener() public void actionPerformed(java.aw
t.event.ActionEvent e) jTextField.setText("Hel
lo. OK is now pressed") )
21
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)

22
Summary

• VE is an easy tool for creating GUI Forms.
• VE automatically generates Java codes so that you
  dont have to manually make them.
• Add your own code in the Event parts of the
  generated to make the application work.