Introduction to Java Chapter 9 Graphical User Interfaces

Introduction to Java Chapter 9 Graphical User Interfaces and Applets Chapter 9 - Graphical User Interfaces and Applets 1

Introduction to Java GUIs • The Java SDK contains to different Graphical User Interfaces (GUIs) – The Abstract Windowing Toolkit (AWT), which contained the original Java GUI – The Swing package, which is a newer, more flexible Java GUI • Only the Swing GUI is taught in this text Chapter 9 - Graphical User Interfaces and Applets 2

Introduction to Java How GUIs Work • GUIs provide a user with a familiar environment in which to work, with push buttons, menus, dropdown lists, text fields, etc. • GUI-based programs are harder to program, since they must be ready for mouse clicks or keyboard input to any component at any time • Mouse clicks or keyboard inputs are known as events, and GUI-based programs are event-driven Chapter 9 - Graphical User Interfaces and Applets 3

Introduction to Java How GUIs Work (2) • A GUI consists of: – GUI Components, which represent elements on the screen such as push buttons, text fields, etc. – A Container to hold the components. The containers in this chapter are JPanel and JFrame. – A Layout Manager to control the placement of GUI components within the container. – Event handlers to respond to mouse clicks or keyboard inputs on any component or container in the GUI Chapter 9 - Graphical User Interfaces and Applets 4

Introduction to Java Creating and Displaying a GUI • To create a GUI: – – Create a container class to hold the GUI components Select and create a layout manager for the container Create components and add them to the container Create “listener” objects to detect and respond to the events expected by each GUI component – Register the listeners with appropriate components – Create a JFrame object, and place the completed container in the center of content pane associated with the frame. Chapter 9 - Graphical User Interfaces and Applets 5

Introduction to Java Creating and Displaying a GUI (2) Required packages Create GUI in init method Set layout manager Create GUI components Method (s) to implement actions Add listener for button Chapter 9 - Graphical User Interfaces and Applets 6

Introduction to Java Creating and Displaying a GUI (3) Create main method, JFrame so the program starts here Create and add window listener Method init called here, so GUI created here Add GUI to JFrame Define listener class for pushbutton Chapter 9 - Graphical User Interfaces and Applets 7

Introduction to Java Creating and Displaying a GUI (4) • Result after three mouse clicks on the button: Chapter 9 - Graphical User Interfaces and Applets 8

Introduction to Java Events and Event Handling • An event is an object that is created by some external action (mouse click, key press, etc. ) • When an event such as a mouse click occurs, Java automatically sends that event to the GUI object that was clicked on. • When the event is received by the GUI object, the object checks to see if any listener object has registered with it to receive the event, and it forwards the event to the action. Performed method of that object. Chapter 9 - Graphical User Interfaces and Applets 9

Introduction to Java Events and Event Handling (2) • The action. Performed method is known as an event handler because it performs whatever steps are required to process the event. • In many cases, the event handler makes a call to a callback method in the object that created the GUI, since such methods can update instance variables within the object directly – In the previous example, class Button. Handler was a listener, its method action. Performed was an event handler, and method update. Label was a callback method Chapter 9 - Graphical User Interfaces and Applets 10

Introduction to Java Events and Event Handling (3) • In the previous example: – A mouse click on the button creates an event – The event is sent to the JButton object – The JButton object sends the event to the action. Performed method of the Button. Handler object – That method calls the method update. Label (callback) – update. Label updates the label Chapter 9 - Graphical User Interfaces and Applets 11

Introduction to Java The JLabel Class • A label is an object that displays a single line of read -only text and/or an image. – It does not respond to mouse clicks or keyboard input. • Constructors: public public JLabel(); JLabel(String s, int horizontal. Alignment); JLabel(Icon image, int horizontal. Alignment); JLabel(String s, Icon image, int horizontal. Alignment); • These constructors create a label containing text s, image, or both Chapter 9 - Graphical User Interfaces and Applets 12

Introduction to Java • Methods: The JLabel Class (2) Chapter 9 - Graphical User Interfaces and Applets 13

Introduction to Java Example: The JLabel Class Chapter 9 - Graphical User Interfaces and Applets 14

Introduction to Java The JButton Class • The JButton class creates a pushbutton. – When a mouse clicks on a button, an Action. Event is generated and passed to any registered listeners. • Constructors: public JButton(); JButton(String s); JButton(Icon image); JButton(String s, Icon image); • These constructors create a pushbutton containing text s, image, or both Chapter 9 - Graphical User Interfaces and Applets 15

Introduction to Java Example: Creating Buttons Chapter 9 - Graphical User Interfaces and Applets 16

Introduction to Java Action. Events • JButtons generate Action. Event objects when an event (mouse click) occurs on them. • A listener class for these events must implement the Action. Listener interface, and have an action. Performed method. • An listener object must be registered to listen for Action. Events on each button. • When a mouse click occurs, the action. Performed method of the corresponding listener object will be called to handle the event Chapter 9 - Graphical User Interfaces and Applets 17

Introduction to Java The JText. Field Class • The JText. Field class creates a text field. – When a user types text and presses the ENTER key, an Action. Event is generated and passed to any registered listeners. • Constructors: public JText. Field(); JText. Field(int cols); JText. Field(String s, int cols); • These constructors create a text field containing a blank space large enough for cols characters, the text string s, or both Chapter 9 - Graphical User Interfaces and Applets 18

Introduction to Java The JPassword. Field Class • The JPassword. Field class is identical to the JPassword. Field class, except the text typed into the field is not visible. Instead, a string of asterisks are shown to represent the characters typed. • Constructors: public JPassword. Field(); JPassword. Field(int cols); JPassword. Field(String s, int cols); Chapter 9 - Graphical User Interfaces and Applets 19

Introduction to Java Example: Creating Text Fields Chapter 9 - Graphical User Interfaces and Applets 20

Introduction to Java The JCombo. Box Class • The JCombo. Box class field in which a user can either type text or select a choice from a drop down list of options. • Constructors: public JCombo. Box(); public JCombo. Box( Object[] ); public JCombo. Box( Vector ); • These constructors create a combo containing list of choices from the Object or Vector • A user can be forced to select from the drop down list only using the method set. Editable(false) Chapter 9 - Graphical User Interfaces and Applets 21

Introduction to Java Example: Creating Combo Boxes Chapter 9 - Graphical User Interfaces and Applets 22

Introduction to Java The JCheck. Box Class • The JCheck. Box class creates a special type of button that toggles between “on” and “off” each time it is clicked. • It looks like a small box with a check mark, but it is really a full-fledged button • Selected Constructors: public JCheck. Box( String s, boolean state ); public JCheck. Box( Icon image, boolean state ); public JCheck. Box( String s, Icon image, boolean state ); • These constructors create a check box containing text s, image, or both, in initial state Chapter 9 - Graphical User Interfaces and Applets 23

Introduction to Java Example: Creating Check Boxes Chapter 9 - Graphical User Interfaces and Applets 24

Introduction to Java The JRadio. Button Class • The JRadio. Button class creates a radio button, a small circle with a dot in the center when “on”. • Selected Constructors: public JRadio. Button( String s, boolean state ); public JRadio. Button( Icon image, boolean state ); public JRadio. Button( String s, Icon image, boolean state ); • These constructors create a radio button containing text s, image, or both, in initial state Chapter 9 - Graphical User Interfaces and Applets 25

Introduction to Java Button Groups • Radio buttons are grouped together into groups known as button groups. • Only one button within a group may be on at any time. If one is turned on, the other radio buttons in the group will be forced off • Constructor: public Button. Group(); • Methods: public void add(Abstract. Button b); // Add button to group public void remove(Abstract. Button b); // Remove from group Chapter 9 - Graphical User Interfaces and Applets 26

Introduction to Java Example: Creating Radio Buttons Button. Group ensures that the 4 radio buttons are mutually exclusive Chapter 9 - Graphical User Interfaces and Applets 27

Introduction to Java Layout Managers • Layout managers are classes that control the location of components within a container Chapter 9 - Graphical User Interfaces and Applets 28

Introduction to Java Border. Layout Manager • The Border. Layout layout manager arranges components in five regions, known as North, South, East, West, and Center • Constructors: public Border. Layout(); public Border. Layout(int horizontal. Gap, int vertical. Gap); • A layout manager is associated with a container using the container’s set. Layout method: set. Layout( new Border. Layout() ); • Components are added to specific regions with a special option of the container’s add method: add(new Button("North"), Border. Layout. NORTH); • Default layout manager for JFrame Chapter 9 - Graphical User Interfaces and Applets 29

Introduction to Java Example: Creating a Border. Layout Chapter 9 - Graphical User Interfaces and Applets 30

Introduction to Java Flow. Layout Manager • The Flow. Layout layout manager arranges com- ponents in order from left to right and top to bottom across a container • Constructors: public Flow. Layout(); public Flow. Layout(int align, int horizontal. Gap, int vertical. Gap); • The alignment can be LEFT, RIGHT, or CENTER • Default layout manager for JPanel Chapter 9 - Graphical User Interfaces and Applets 31

Introduction to Java Example: Creating a Flow. Layout Chapter 9 - Graphical User Interfaces and Applets 32

Introduction to Java Grid. Layout Manager • The Grid. Layout layout manager arranges components in a rigid rectangular grid structure. • Constructors: public Grid. Layout(int rows, int cols); public Grid. Layout(int rows, int cols, int horiz. Gap, int vert. Gap); • Components are added to the grid in order from left to right and top to bottom Chapter 9 - Graphical User Interfaces and Applets 33

Introduction to Java Example: Creating a Grid. Layout Chapter 9 - Graphical User Interfaces and Applets 34

Introduction to Java Box. Layout Manager • The Box. Layout layout manager arranges components within a container in a single row or a single column. • The spacing and alignment of each element on each row or column can be individually controlled. • Containers using Box. Layout managers can be nested inside each other to produce complex layouts • Constructor: public Box. Layout(Container c, int direction); • The direction can be X_AXIS or Y_AXIS • Rigid areas and glue regions can be used to space out components within a Box. Layout Chapter 9 - Graphical User Interfaces and Applets 35

Introduction to Java Example: Creating a Box. Layout Chapter 9 - Graphical User Interfaces and Applets 36

Introduction to Java Combining Layout Managers to Produce a Result • To create just the look you want, it is sometimes useful to create multiple containers inside each other, each with its own layout manager • For example, a top-level panel might use a horizontal box layout, and that panel may contain two or more panels using vertical box layouts • The result is complete control of component spacing in both dimensions Chapter 9 - Graphical User Interfaces and Applets 37

Introduction to Java Example: Nested Containers and Layouts Structure: Result: Chapter 9 - Graphical User Interfaces and Applets 38

Introduction to Java Applets • An applet is a special kind of Java program that is designed to run inside a Web browser – It is a subclass of javax. swing. JApplet – The JApplet class is similar to JFrame, in that components must be attached to its content pane – The JApplet class is similar to JPanel, in that the default layout is Flow. Layout • Applets are usually restricted from accessing computer resources (files, etc. ) on the local computer for security reasons Chapter 9 - Graphical User Interfaces and Applets 39

Introduction to Java Applet Methods • Every applet has 5 standard methods: – init — called by the browser when the applet is first – – loaded into memory start — called by the browser to start animations running when the applet is made visible stop — called by the browser to stop animations running when the applet is covered or minimized destroy — called by the browser just before the applet is destroyed paint. Component — called when the applet is drawn or re-drawn Chapter 9 - Graphical User Interfaces and Applets 40

Introduction to Java Applet Methods • Applet methods will always be called in the order init, start, stop, destroy • start and stop may be called many times during the life of an applet • All 5 methods are implemented as dummy methods in class JApplet, and the dummy methods are inherited by all applets • Applets override only the methods that they need to perform their function Chapter 9 - Graphical User Interfaces and Applets 41

Introduction to Java Creating an Applet • To create an applet: – Create a subclass of JApplet to hold GUI components – Select a layout manager for the container, if the default layout manager (Flow. Layout) is not acceptable – Create components and add them to the content pane of the JApplet container. – Create “listener” objects to detect and respond to the events expected by each GUI component, and assign the listeners to appropriate components. – Create an HTML text file to specify to the browser which Java applet should be loaded and executed Chapter 9 - Graphical User Interfaces and Applets 42

Introduction to Java Example: Creating an Applet This simple applet implements init and inherits all other methods as dummies Note that all components are added to the Content. Pane of the JApplet Chapter 9 - Graphical User Interfaces and Applets 43

Introduction to Java Example: Creating an Applet (2) Listener class for button on applet HTML code to start applet in browser Chapter 9 - Graphical User Interfaces and Applets 44

Introduction to Java Location of Class Files for Applets • If an applet uses a class that is not built into a package, that class must be present in the same directory as the HTML file used to start the applet – This directory could be local or remote—it doesn’t matter – Class files can be transferred over the net, so they should be small Chapter 9 - Graphical User Interfaces and Applets 45

Introduction to Java Using Packages with Applets • If an applet uses nonstandard package, then the package must appear in the appropriate subdirectory of the directory containing the HTML file. – This directory could be local or remote—it doesn’t matter – CLASSPATH is ignored by Location of class applets! chapman. io. Fmt within package chapman. io Chapter 9 - Graphical User Interfaces and Applets 46

Introduction to Java Creating Dual Application / Applets • If an application does not need to perform I/O or other restricted tasks, it can be structured to run both as an applet and an application – Design the program as an applet – Add a main method with calls to init and start – Add calls to stop and destroy in the window. Closing method of the Window handler • Such program can be more versatile Chapter 9 - Graphical User Interfaces and Applets 47

Introduction to Java Dual Application / Applet init method in applet Chapter 9 - Graphical User Interfaces and Applets 48

Introduction to Java Dual Application / Applet (2) main method calls init and start Chapter 9 - Graphical User Interfaces and Applets 49

Introduction to Java Dual Application / Applet (3) window. Closing method calls stop and destroy Chapter 9 - Graphical User Interfaces and Applets 50

Introduction to Java Dual Application / Applet (4) Running as application Running as applet Chapter 9 - Graphical User Interfaces and Applets 51