Lesson 39: More wrapup on GUIs. 1.This presentation will focus on the decisions around software architecture and the decisions that will drive the code

Lesson 39: More wrapup on GUIs

1. This presentation will focus on the decisions around software architecture and the decisions that will drive the code deployment.

2. We will extend the Drawing applet we created before and take a look on how this code can be consolidated.

Software architecture– Java AppletsRecap

When using applets significant through are needed to determine the class layout and the deployment of the program files.

In our first example we had three classes that was distributed as:

Paint on web.htmSimplePaintApplet.class

Web userPaint on web.htm

SimplePaintApplet.class

DrawingCanvas2.classPaintListener2.class

Web ServerWeb page + applet

Classes being called by applet

This dialogue may be slow depending on your network speed

Recap

An alternate software architecture might have been:


Web user


Web ServerWeb page + applet


This dialogue may still be slow depending on your network speed

Java Server


Recap

An fully architected solution with a web and a client server application leveraging as much as possible of the same code.


Web user


Web Server

Web page + applet


Java Server


SimplePaint2.java

Application server

SimplePaint2.class

Application user

Classes being called by application

Recap

An fully architected solution with a web and a client server application using much of the same code and a database.


Web user


Web Server

Web page + applet


Java Server


SimplePaint2.java

Application server

SimplePaint2.class

Application user

Classes being called by application

Database.mdb

Database Server

Recap

An web application that execute the code only on the client side. Useful for “thin-clients” with low network bandwidth.

Paint on web.htmConsolidatedSimplePaintApplet.class

Web user


Web Server

Web page + applet

1. The consolidated applet contains all code classes from DrawingCanvas2.class and PaintListener2.class.

2. All code not needed for the applet is removed.

Recap

// consolidatedSimplePaintApplet.java - drawing with a mouse on the webimport java.awt.*;import javax.swing.*;import java.awt.event.*;

public class consolidatedSimplePaintApplet extends JApplet implements MouseMotionListener{ public void init(){

Container pane = getContentPane();consolidatedSimplePaintApplet canvas = new consolidatedSimplePaintApplet();canvas.addMouseMotionListener(canvas);pane.add(canvas);

} public void mouseDragged(MouseEvent e) {

consolidatedSimplePaintApplet canvas = (consolidatedSimplePaintApplet)e.getSource();Graphics g = canvas.getGraphics();g.fillOval(e.getX()-3,e.getY()- 3,6,6);

} public void mouseMoved(MouseEvent e){}}

// SimplePaintApplet.java import java.awt.*;import javax.swing.*;public class SimplePaintApplet extends JApplet{ public void init(){

Container pane = getContentPane();DrawingCanvas2 canvas = new DrawingCanvas2();PaintListener2 listener=new PaintListener2();canvas.addMouseMotionListener(listener);pane.add(canvas);

}}

// DrawingCanvas2.java - a blank canvas import javax.swing.*;import java.awt.*;class DrawingCanvas2 extends JComponent{ public Dimension getMinimumSize(){

return new Dimension(SIZE, SIZE); } public Dimension getPreferredSize(){

return new Dimension(SIZE, SIZE); } private static final int SIZE=500;}

// PaintListener2.java - paints on a DrwaingCanvas2import java.awt.*;import java.awt.event.*;class PaintListener2 implements MouseMotionListener{ public void mouseDragged(MouseEvent e) { DrawingCanvas2 canvas = (DrawingCanvas2)e.getSource(); Graphics g = canvas.getGraphics(); g.fillOval(e.getX()-radius, e.getY() - radius, diameter, diameter); } public void mouseMoved(MouseEvent e){} protected int radius =3; protected int diameter = radius*2;}

Since the applet will be compiled and no modifications or access functions to radius and diameter will occur, we can use numbers instead of variables

Recap

// consolidatedSimplePaintApplet.java - drawing with a mouse on the webimport java.awt.*;import javax.swing.*;import java.awt.event.*;public class consolidatedSimplePaintApplet extends JApplet implements MouseMotionListener{ public void init(){



consolidatedSimplePaintApplet canvas = (consolidatedSimplePaintApplet)e.getSource();Graphics g = canvas.getGraphics();g.fillOval(e.getX()-3,e.getY()- 3,6,6);

} public void mouseMoved(MouseEvent e){}}




consolidatedSimplePaintApplet canvas = (consolidatedSimplePaintApplet)e.getSource();Graphics g = canvas.getGraphics();g.setColor (Color.red);g.fillOval(e.getX()-3,e.getY()- 3,4,4);

} public void mouseMoved(MouseEvent e){}

}

Changing pen color and paint size

Recap




consolidatedSimplePaintApplet canvas = (consolidatedSimplePaintApplet)e.getSource();Graphics g = canvas.getGraphics();g.setColor (Color.red);g.fillOval(e.getX()-3,e.getY()- 3,4,4);

} public void mouseMoved(MouseEvent e){}

}

An web application that execute the code only on the client side. Useful for “thin-clients” with low network bandwidth.


Web user


Web Server

Web page + applet

1. The consolidated applet contains all code classes from DrawingCanvas2.class and PaintListener2.class.

2. All code not needed for the applet is removed.

Recap

More on Layouts and repaints

// FlowLayoutTest2.java - demo flowlayout

import java.awt.*;import javax.swing.*;

class FlowLayoutTest2{ public static void main (String[] args){

JFrame frame = new JFrame("FlowLayoutTest2");Container pane = frame.getContentPane();

pane.add(new JButton("North"), BorderLayout.NORTH);pane.add(new JButton("South"), BorderLayout.SOUTH);pane.add(new JButton("East"), BorderLayout.EAST);pane.add(new JButton("West"), BorderLayout.WEST);pane.add(new JButton("Center"), BorderLayout.CENTER);frame.pack();frame.show();

}}

// FlowLayoutTest.java - demo flowlayout


class FlowLayoutTest{ public static void main (String[] args){

JFrame frame = new JFrame("FlowLayoutTest.LEFT");Container pane = frame.getContentPane();pane.setLayout(new FlowLayout(FlowLayout.LEFT));

pane.add(new JButton("Button 1"));pane.add(new JLabel("Label 2"));pane.add(new JButton("Button 3"));pane.add(new JLabel("Label 4"));pane.add(new JButton("Button 5"));frame.pack();frame.show();

}}

Not needed (border layout is default)

// FlowLayoutTest2.java - demo flowlayout


class FlowLayoutTest2{ public static void main (String[] args){

JFrame frame = new JFrame("FlowLayoutTest2");Container pane = frame.getContentPane();

pane.add(new JButton("North"), BorderLayout.NORTH);pane.add(new JButton("South"), BorderLayout.SOUTH);pane.add(new JButton("East"), BorderLayout.EAST);pane.add(new JButton("West"), BorderLayout.WEST);pane.add(new JButton("Center"), BorderLayout.CENTER);frame.pack();frame.show();

}}

Not needed (border layout is default)

fileCompile

run

// StarTestQuit2.java - Button layout and a star


class StarTestQuit2{ public static void main (String[] args){

JFrame frame = new JFrame("Nesting containers");Container pane = frame.getContentPane();

JPanel panel = new JPanel();panel.setLayout(new GridLayout(4,1));

panel.add(new JButton("one"));panel.add(new JButton("two"));panel.add(new JButton("three"));panel.add(new JButton("four"));

pane.add(panel, BorderLayout.WEST);pane.add(new Star(), BorderLayout.CENTER);

frame.pack();frame.show();

}}

// StarTestQuit2.java - Button layout and a star


class StarTestQuit2{ public static void main (String[] args){

JFrame frame = new JFrame("Nesting containers");Container pane = frame.getContentPane();

JPanel panel = new JPanel();panel.setLayout(new GridLayout(4,1));

panel.add(new JButton("one"));panel.add(new JButton("two"));panel.add(new JButton("three"));panel.add(new JButton("four"));

pane.add(panel, BorderLayout.WEST);pane.add(new Star(), BorderLayout.CENTER);

frame.pack();frame.show();

}}

Resizing problem

// Star.java - draws a star

import javax.swing.*;import java.awt.*;

class Star extends JComponent{ public void paint (Graphics g){

double x1, x2, y1, y2;for (double angle=0; angle<Math.PI; angle = angle + Math.PI / 16) {

x1=Math.cos(angle) * RADIUS + RADIUS;y1=Math.sin(angle) * RADIUS + RADIUS;x2=Math.cos(angle + Math.PI) * RADIUS + RADIUS;y2=Math.sin(angle + Math.PI) * RADIUS + RADIUS;g.drawLine((int)x1, (int)y1,(int)x2, (int)y2);}

} public Dimension getMinimumSize(){

return new Dimension(2 * RADIUS, 2 * RADIUS); } public Dimension getPreferredSize(){

return new Dimension(2 * RADIUS, 2 * RADIUS); } private static final int RADIUS = 100;}

Old star code

// Star.java - draws and resizes a starimport javax.swing.*;import java.awt.*;class Star extends JComponent{ public void paint (Graphics g){

double x1, x2, y1, y2;for (double angle=0; angle<Math.PI; angle = angle + Math.PI / 16) {x1=Math.cos(angle) * radius + radius;y1=Math.sin(angle) * radius + radius;x2=Math.cos(angle + Math.PI) * radius + radius;y2=Math.sin(angle + Math.PI) * radius + radius;g.drawLine((int)x1, (int)y1,(int)x2, (int)y2);}

} public void setBounds(int x, int y, int width, int height){

radius = Math.min(width,height)/2;super.setBounds(x,y,width,height);repaint();


return new Dimension(2 * radius, 2 * radius); } public Dimension getPreferredSize(){

return new Dimension(2 * radius, 2 * radius); } private int radius = 100;}

New star code









This code is the same!

Old star code








The method setBounds() is defined for Jcomponent. It is called by the Layoutmanager for the container to tell it where it is being placed and how much screen to give it.
























We now ignore the new location and use only the width and heigh to adjust the radius.

Since our star can only draw a symetric star, we set the radius equal to half of the minimum of the height or width.








New star code









The JComponent from which our class is derived must also know the size and the position of the component from the Layout manger.

Once we have obtained the information, we pass this to the version of setBounds() in the parent class (which in our case is the JComponent). We do this by using the word super..








Once it has been resized we ask the object to be repainted as soon as possible.

This is an eventual call to the method paint() in our main program.
















Since the variable radius is being manipulated, it can no longer be a static final variable









Resizing problem is now fixed

1. Containers (packages) should be designed and planned for.

2. The use of JPanels should be an integral part of all GUI based (event based programs)

3. The function Math.min(x,y,z) will give you the lowest value

4. The keyword super allows you to address higher level classes from which your class are derived

5. The function setBounds addressed your object, but with the word super it can address the higher level class as well.

Key Takeaways

Documents

Lesson 39: More wrapup on GUIs. 1.This presentation will focus on the decisions around software architecture and the decisions that will drive the code