GUI Design and Java

1
GUI Design and Java

• So far, we havent talked about GUI stuff at all
  were only used the console for input/output.
• This is not what Java was designed for.
• One of the truly nice things about Java is the
  ability to create fairly complex GUIs pretty
  easily.
• Java 1.0 introduced AWT Abstract Window Toolkit
• AWT was peer-based. It used the operating system
  to draw the various entities (sliders, buttons,
  etc.)
• This was nice because it was fairly fast, but it
  had a lot of drawbacks to it

2
AWT Drawbacks

• Different GUI elements look different on
  different platforms.
• So, when youre sizing and testing something on
  System A, and you move it to System B, it may
  look different. Write Once, Run Anywhere ? Write
  Once, Test Everywhere.
• Not all OSs have all the GUI elements that
  others do (some older unix platforms are pretty
  limited vs. Windows/MacOS)
• The lead to developing for the Lowest Common
  Denominator the OS with the least powerful GUI
  collection.

3
Swing

• So, Java 2 introduced another set of graphical
  routines called SWING, which takes a different
  approach.
• Swing was actually developed by Netscape (called
  Internet Foundation Classes), who later worked
  with Sun to get it working well
• Instead of relying on the OS to draw the various
  GUI elements, Swing draws them.
• This is slower, but it is way more consistent.

4
Swing

• Swing does not replace AWT
• AWT is still used, for instance, in the Event
  Model, and a lot of Swing is built upon AWT
  (JFrame, the top level container, inherits from
  AWTs Frame)

5
Frames

• A JFrame is a Top Level container in Java (along
  with JDialog and JApplet)
• For a GUI element to appear on screen, it must be
  a part of a containment hierarchy, in which a Top
  Level container is the root.
• Each top-level container has a content pane that,
  generally speaking, contains (directly or
  indirectly) the visible components in that
  top-level container's GUI.
• Each GUI component can be contained only once. If
  a component is already in a container and you try
  to add it to another container, the component
  will be removed from the first container and then
  added to the second.

6
Frames

• You actually add the GUI elements (buttons, text
  fields, checkboxs, etc.) to the content pane

7
Simple Frame Example

• To pop up a simple frame with nothing on it is
  fairly easy..
• import javax.swing.
• public static void main(Strings args)
• JFrame myframenew JFrame()
• myframe.setSize(300,300)
• myframe.setDefaultCloseOperation(JFrame.EXIT_O
  N_CLOSE)
• myframe.show()

8
Some key points here

• JFrame inherits most of its methods from its
  superclasses. Some of interest are (Also, read
  the API there is a lot you can do with these)
• setSize
• setLocation
• setDefaultCloseOperation
• show
• dispose
• add

9
JFrames

• Anyone see a problem with the arbitrarily setting
  the size of a frame?
• We can find out the screen resolution by using a
  ToolKit
• import java.awt.
• import java.awt.event.
• import javax.swing.
• Toolkit kit Toolkit.getDefaultToolkit()
• Dimension screenSize kit.getScreenSize()
• int screenHeightscreenSize.height
• int screenWidthscreenSize.width
• myframe.setSize(screenWidth,screenHeight)

10
Panes (Pains ? )

• A JFrame is made up of multiple Panes.
• This is what content gets added to (it is
  possible to add components directly to a JFrame,
  but this is bad programming practice.

11
Layered Panes

• This is a pane that has different layers
  (Depths), which is useful for controlling things
  is a particular way (which components overlap
  others)

12
Glass Panes

• Glass panes are the top level of panes.
• Glass panes are normally invisible
• These are useful for intercepting Events (Mouse,
  Keyboard)
• Also useful for drawing on top of multiple
  components.

13
Content Panes

• This is the layer that holds the UI components.
  This is primarily what we will be concerned with.
• We generally add UI components (Images, Buttons,
  CheckBoxes, TextFields, etc.) to a General
  Purpose Container, such as a JPanel (more on them
  in a second), which is turn is added to the
  Content Pane of the JFrame.

14
JPanels

• JPanels are UI Components with two special
  properties
• You can draw things on them
• You can add things to them (they are containers
  themselves)
• Lets see some examples..

15
JPanels

• This is an example of displaying a Frame, with a
  Label on it. (if you run this, remember to import
  javax.swing.)!
• JFrame exampleFramenew JFrame() //Create a
  new frame
• exampleFrame.setSize(400,400) //Set the size as
  400x400 pixels
• exampleFrame.setDefaultCloseOperation(JFrame.EXIT
  _ON_CLOSE)
• JPanel examplePanelnew JPanel() //Create a new
  Panel
• JLabel exampleLabelnew JLabel(This is a
  Label!)
• examplePanel.add(exampleLabel) //Add the
  label to the panel
• exampleFrame.getContentPane().add(examplePanel)
  //Add the Panel to the content pane
• exampleFrame.show() //Call the show method

16
Drawing on a Panel

• To custom draw on a panel, you should
• Define a new class that inherits from JPanel
• Override the paintComponent() method
• This allows you to do custom painting generally
  you only need this to draw shapes
• UI Components (Checkboxes, Labels, etc) included
  with Swing know how to paint themselves you
  dont need to redefine paintComponent unless you
  do something special (and be sure to call the
  superclass paintComponent if you do!)

17
Drawing on a Panel

• class MyPanel extends JPanel
• public void paintComponent(Graphics g)
• super.paintComponent()
• g.drawLine(0,0,100,100) draw a line from 0,0
  to 100,100
• As you see, it takes on parameter, a Graphics
  object, which is a collection of settings for
  drawing images and texts all drawing must go
  through one of these objects

18
Drawing on a Panel

• On the previous slide, we drew a line by
• g.drawLine(0,0,100,100) //draw a line from 0,0
  to 100,100
• I know what youre thinking. That isnt a very
  Object Oriented way to do things (ok, youre not
  thinking that. But someone at Sun was)
• Java 2 introduces a collection of 2D Shape
  Objects
• Line2D
• Rectangle2D
• Ellipse2D

19
2D Objects

• Since these 2D objects are somehow different, we
  need to interact with them through a Graphics2D
  object.
• To do this, we simply take the graphics object in
  paintComponent and cast it to a Graphics2D
  object. (We can do this because, as of Java2,
  the object getting passed in actually IS a
  Graphics2D object)

20
2D Objects

• public void paintComponent(Graphics g)
• Graphics2D g2 (Graphics2D)g
• Line2D aLinenew Line2D.Double(1.0,1.0,2.0,2.0)
  
• g2.draw(aLine)
• Couple of points here the 2D Shapes all belong
  to the package java.awt.geom import this if you
  want to use it
• All these 2D Objects come in two flavors
  whatevershape.Double and whatevershape.Float
• There is no difference between these objects,
  except for the kind of objects passed to the
  constructor after that, there is no difference

21
Java Dumb-ism

• Just in case you run into this, look out for it.
• Say, for whatever reason, you need to use a
  floating point version of one of these, and want
  to pass it a number not contained in a variable
• But, Java is strongly-typed, an any of these
  numbers you pass are considered Doubles
• To solve this, add an F after the number. This
  will tell the compiler you want it to be a float
• float f1 1.0 //This actually doesnt work
• float f2 1.0F //This does

22
Colors

• When drawing, we may want to set the drawing
  Color. To do so, we use a Color object.
• There are 13 predefined colors you can use
  (black,blue,cyan,dark_gray,gray,green,light_gray,m
  agenta,orange,pink,red,white,yellow) or you can
  create your own, using the by setting the RGB
  values in the constructor
• g2.setPaint(Color.red) //or Color.RED use
  lowercase for backwards compatiblity
• g2.setPaint(new Color( 0, 128, 128)) //a
  blue-greenish color

23
Fonts

• You can create Font objects, which represent
  Fonts available on the system, for use in Labels
  and anything else that displays Text
• There are 5 Fonts which are always available
  SansSerif, Serif, Monospaced, Dialog, DialogInput
• Fonts objects take 3 arguments in the constructor
• The Font name, as a String
• a Font class constant that describes the style
  (bold, italic, etc.)
• The Font size, in points

24
Fonts

• So, you can create a Font object, and assign it
  to various UI components that display text, or to
  a Graphics object
• Font cn14
• new Font(Courier New,Font.BOLD,14)
• Font tnr12
• new Font(Times New Roman,Font.ITALIC,12)
• JLabel someLabelnew JLabel(Wassabie)
• someLabel.setFont(tnr12)

25
Images

• Be happy this class is being taught with Java
  1.4.x instead of 1.3.x
• Loading and saving images used to be a real pain.
• You used to have to load an image using a the
  Toolkits getImage command, which would spawn
  another Thread to load the image and return
  before the image was loaded. So if you wanted to
  wait until it was done loaded, youd have to
  attach a MediaTracker object and call the
  waitForAll() method inside a try/catch block.
  This was even worse pre-Swing. Forget about
  writing an image out to disk unless you wrote the
  code for it yourself.

26
Images

• It couldnt be any more simple now
• import javax.imageio.
• Image image
• try
• image ImageIO.read(new File(somefile.jpg))
  
• g.drawImage(image, x, y, null)
• catch (IOException exp)
• //Will throw an IOException if the image cant
  be loaded

27
Images

• Writing images to a file is almost as easy
• File f
• String format JPG
• ImageIO.write(image, format, f)

28
GraphicsEnvironment

• Java provides an a class, GraphicsEnvironment,
  that provides some useful system information
  (Read its API to find out all it can do)
• We can use this to find which Fonts are installed
  on the system
• You can get a Array of Strings with all the
  available fonts with the following call
• String fontNames GraphicsEnvironment
• .getLocalGraphicsEnvironment()
• .getAvailableFontFamilyNames()
• You can search through this to see what Fonts are
  installed on the system, or to propagate a
  ComboBox