1. 25
GUI Example

2. Previously GUI Programming III: Events Delegation Event Model
Event Object
Event Listener
Event Control Flow
Registration
Event Listener Interfaces
Listener Methods
Process
Action Event Example

3. Overview
Build GUI application than displays a switch and a light bulb. By clicking the switch we can turn the light bulb on and off

4. States Valid states The light build may be on or off
The switch may be on or off
To be able to see the switch in the dark (light off) the switch will be lighted when switch is off
Switch without light when on as it can already be seen because the light is also on
When the switch is on the light is also on
When the switch is off the light is also off

5. Sketch Just draw a simple view of what will be the general GUI look
Draw it in a paper
Switch by Amadeo Ascó I O

6. States Valid states The light build may be off or on
lightOn.gif
lightOff.gif
Valid states
The light build may be off or on
The switch may be off or on
To be able to see the switch in the dark (light off) then the switch will be lighted when switch is off
Switch without light when on as it can already be seen because the light is also on
When the switch is on the light is also on
When the switch is off the light is also off
switchOff.gif
switchOn.gif

7. Considerations The display can be obtained by
Application draw the pictures from basic drawing operation
Too much work
Quality may not be very good
Application uses external images
The quality of the display depends of the quality of the images. Normally better than previous approach
Can change the images without the need of changing the code
Can use already existing functionality in swing

8. Considerations Switch The switch IS a button
Can be clicked, like a JButton
On click executes an operation, like a JButton
Changes the image on click, like a JButton
We may need specific functionality:
The look will be just the image no borders as normal buttons so override it
Because IS a button we extend JButton; use extends

9. Considerations Switch
These mean a new class that inherits (extends) JButton SwitchImg

10. Considerations
Light
The light does not have click functionality, it is not a button
Need to draw the light at the middle of the rest of the area (area left by the switch)
JPanel allows to create an area where to draw
JPanel draws a rectangular area with an specified colour, the background colour
The light IS NOT a panel but it is contained by our special panel

11. Considerations
Light
Our panel HAS an image (on the centre); image(s) are members of our panel
JPanel
Does not provide capabilities to hold image(s) so we need to add it
Does not draw image(s) so we have to provide it
Override method void paintComponent(Graphics g)
Graphics has capabilities to draw images; drawImage(...)
These mean a new class that inherits (extends) JPanel
ImgPanel

12. Considerations Base GUI We have the content of our GUI
We need a base with all standard GUI functionality; new class
Logo
Minimise, maximise and close buttons
Display area
Our GUI HAS a switch and a light
Witch means member variables

13. Considerations Base GUI A new class
It IS a JFrame which means inherit (extends) from JFrame
SwitchGUI
To set the size of the GUI use the method
void setPreferredSize(Dimension dim)
The content of the GUI is in the content pane; obtainable by calling method
Container getContentPane()
Switch by Amadeo Ascó
Content pane

14. setResizable(false);
Considerations
Base GUI
No too much point to allow the user to change the size of the application GUI:
setResizable(false);
Change colour using void setBackground(Color) on the component of interest
Need to synchronise switch with light by implementing the ActionListener

15. Considerations Entry Point
We need a place to process the entered data from commend prompt, if any; we are writing an application
Use a new class to contain all the functionality used to start the application
SwitchMain

16. Position
Layout managers are responsible to position each element in its parent control
In this case useful ones maybe
BorderLayout in package java.awt; position components in five regions - here more
CardLayout in package java.awt; it treats each component in the container as a card - here more
GridBagLayout in package java.awt; can be complex but very powerful - here more
Many more than can be used - here more

17. We have not written any code yet!

18. Organize The project will contain the following directories (folders)
bin contains the .classes of the project and .jar file
src contains the .java of the project; the source code files
doc contains the documentation like readme.txt file, other help file(s)
doc\javadoc contains the javadoc documentation for the project
images contains all the images to use - get them from here

19. Organize The project needs a meaningful name
Project refers to switching on/off a light so several potential names
Light
Switch
...
The source files package structure of the project should identify you (or company you work for) and identify the project (you cannot use the word switch): com.aasco.switches

20. Organize The classes It seem logic that the package to be called gui
SwitchImg
ImgPanel
SwitchGUI
are part of the GUI of the application so put them all together in the same package
It seem logic that the package to be called gui
com.aasco.switches.gui

21. Organize
The class SwitchMain refers to the entry point for the application so create it in the base package; com.aasco.switches

22. Write Code Now we can start by writing the code Create the classes
Make sure that their inheritance is correct (extends) - IS
Add member variables – HAS
Add functionality; new or override
package com.aasco.switches;
public class SwitchMain {
public static void main(String[] astrArgs) {
new SwitchGUI();
} // main()
} // end class SwitchMain

23. Try to implement it in the labs!
What we expect
Try to implement it in the labs!

24. Remember Remember to add
Comments to your code
Documentation comments
Build the javadoc documentation
When creating the JAR file you must also select the images directory as the images must be contained in the final application
To get the javadoc run the steps as specified in the website
To build the final ZIP file follow the steps shown in the website