25 GUI Example

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

We have not written any code yet!

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

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

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

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

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

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

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