Gf Ad 4g66h

Java Programming

Lecture 9 Java GUI Cheng-Chia Chen

Transparency No. 1

Java GUI

Contents

1. java GUI evolution 2. Swing Components and Containing Hierarchy 3. Layout Management 4. Java Event Model and Event Handling 5. javaBeans Reference: • The Java Tutorial on the trail: Creating a GUI with JFC/Swing

Transparency No. 2

Java GUI

Evolution of Java GUI

• Java 1.0 AWT built in 30 days, and it shows • Java 1.1 AWT significantly improved, but GUI not finished yet • Java 2 Swing: very different, vastly improved • This lecture cover Swing only.

Transparency No. 3

Java GUI

Swing/JFC is very powerful

• Start with the simple approach so you can create basic applications • Most of the time this will satisfy your needs • If you want to modify the standard elements, you can, but... You’ll have to work harder and learn more A number of big, thick books are available

Transparency No. 4

Java GUI

Swing/JFC

• Very easy to add keyboard accelerators, tooltips, graphics • Pluggable look and feel • Provides ways to change just about everything, but you must work to understand how

Transparency No. 5

Java GUI

Swing Components and the containment hierarchy

• • • • • • •

Borders Buttons Checkboxes ComboBoxes Image Icons Labels Layered Panes and Internal Frames (MDI) • Lists and List Boxes

• • • • • • • •

Menus Popup Menus Radio Buttons Progress Bars Scrolling Scrollbars Splitter Control Tabbed Panes

Transparency No. 6

Java GUI

Swing features and Conets

• Components and the containment hierarchy • Swing Components and the Containment Hierarchy • Layout Management • Event Handling • Painting • Threads and Swing • More Swing Features and Concepts • The Anatomy of a Swing-Based Program

Transparency No. 7

Java GUI

Swing Components and the Containment Hierarchy

• An example:

• Four components in this GUI: a frame, or main window (JFrame) --- top-level container a , sometimes called a pane (J) --intermediate container a button (JButton) --- atomic components a label (JLabel) --- atomic components Transparency No. 8

Java GUI

• the containment hierarchy for the gui:

Transparency No. 9

Java GUI

• The code that adds the button and label to the , and the to the content pane: frame = new JFrame(...); button = new JButton(...); label = new JLabel(...); pane = new J(); pane.add(button); pane.add(label); frame.getContentPane().add(pane, BorderLayout.CENTER); Transparency No. 10

Java GUI

Classification of swing components

• Top-Level Containers  The components at the top of any Swing containment hierarchy.

• General-Purpose Containers  Intermediate containers that can be used under many different circumstances.

• Special-Purpose Containers  Intermediate containers that play specific roles in the UI.

• Basic Controls  Atomic components that exist primarily to get input from the ;  they generally also show simple state.

• Uneditable Information Displays  Atomic components that exist solely to give the information.

• Editable Displays of Formatted Information

Transparency No. 11

Java GUI

top-level containers

Frame ( and JFrame)

Applet (and JApplet)

Dialog ( and JDialog)

Transparency No. 12

Java GUI

General-Purpose Containers

( and J)

JScrollPane

JToolBar

JTabbedPane JSplitPane Transparency No. 13

Java GUI

Special-Purpose Containers

Root Pane

JLayeredPane

JInternalFrames

Transparency No. 14

Java GUI

Basic Controls

JMenu JMenuItem

JCheckBox JRadioButton JButton

List ( and JList) Transparency No. 15

Java GUI

Basic Controls

JTextField

Choice ( and JComboBox)

JSlider Transparency No. 16

Java GUI

Uneditable Information Displays

JProgressBar

Label ( and JLabel)

JToolTip Transparency No. 17

Java GUI

Editable Displays of Formatted Information

JTree

JColorChooser

JText

JTable

FileDialog ( and JFileChooser) Transparency No. 18

Java GUI

Structure of the java.awt (AWT) package. ImageObserver

-parent Container {abstract }

Component {abstract}

-peer ComponentPeer

TextComponent

Color

Font

TextArea

Button

LayoutManager

TextField

Canvas

Checkbox

-layoutMgr

Choice

Label

List

Transparency No. 19

Scrollbar

Java GUI

Layout Management

• the GUIs of five programs, each of which displays five buttons.

Transparency No. 20

Java GUI

Common layout tasks

• Identical Buttons, almost identical codes. why do they look so different?  use different layout managers to control the size and position of the buttons.

• the common layout tasks:  Setting the layout manager :  J pane = new J();  pane.setLayout(new BorderLayout());  Providing hints about a component :  privide size Hints : setMinimumSize(Dimension), setPreferredSize(..), setMaximumSize(..)  provide alignmentHints: setAllignmentX(float), setAlignmentY(float)  Putting space between components :  the layout manager : can specify hgap and vgap.  putting invisible component:  empty border : best for components thatTransparency have no No. 21default

Java GUI

Event Handling

• Every time the types a character (KeyEvent) or pushes a mouse button( MouseEvent), an event occurs. • Any object can be notified of the event. implement the appropriate interface and be ed as an event listener on the appropriate event source.

• Swing components can generate many kinds of events.

Transparency No. 22

Java GUI

Example GUI Events

• Act that results in the event type • clicks a button, presses Return while typing in a ActionListener text field, or chooses a menu item

Listener

• closes a frame (main window) WindowListener • presses a mouse button while the cursor is over a component MouseListener • moves the mouse over a component MouseMotionListener • Component becomes visible Transparency No. 23

Java GUI

Java Event Model

• delegation ( or forwarding ) model system: l = new EventListener(…)

l:EventListner

b=new EventSource(…)

b:EventSource

addXXXListener(l)

Event e1 occurs doXXXAction(e1) Event e2 occurs doXXXAction(e2)

…. Transparency No. 24

Java GUI

How to Implement an Event Handler

• Implement and instantiate an event Listener : public class MyClass implements XXXListener { …} XXXListener l = (XXXListener) new MyClass(…);

• the eventListener as an listener on event source: aEventSource.addXXXListener( l ) ;

• From now on, every time an event e occurs, the event source object will call the appropriate doXXXAction(e) from l. • Threads and Event Handling : Event-handling code executes in a single thread, the event-dispatching thread. Transparency No. 25 => Event handlers should execute very quickly,

Java GUI

How Painting Works

1. 2. 3. 4.

background custom painting border children

Transparency No. 26

Java GUI

More Swing Features and Concepts

• Features that JComponent provides  the ability to have borders,  tool tips, and  a configurable look and feel.

• Icons

 Many Swing components -- notably buttons and labels -can display images. You specify these images as Icon objects.

• Actions

 provide for sharing data and state between two or more components that can generate action events.

• Pluggable Look & Feel

 A single program can have any one of several looks and feels.  can let the determine the look and feel, or  can specify the look and feel programatically.

• for assistive technologies • Separate data and state models

Transparency No. 27

Java GUI

Using Swing Components

• • • •

The JComponent Class Using Top-Level Containers Using Intermediate Swing Containers Using Atomic Components

Transparency No. 28

Java GUI

The JComponent Class

• JComponent  Container  Component • Tool tips: setToolTipText(String)

• Borders

The setBorder method allows you to specify the border that a component displays around its edges.

• Keyboard-generated actions

Using the KeyboardAction method, you can enable the to use the keyboard, instead of the mouse, to operate the GUI.

• Application-wide pluggable look and feel UIManager.setLookAndFeel(…)

• Properties

can associate one or more properties Transparency No. 29

Java GUI

• for layout get/set minimum/preferred/maximum Size(..). get/set alignmentX/Y(…)

• for accessibility • Double buffering • Methods to increase efficiency getX(), getY(), getWidth(), getHeight(),…

Transparency No. 30

Java GUI

The JComponent API

• Customizing Component Appearance :  get/set for properties: border, forground, background, font, opaque  eg: setBorder(Border) / Border getBorder(), …

• Setting Component State  void setToolTipText(String)  void setEnabled(boolean b) , boolean isEnabled()  void setLocale(Locale l) , Locale getLocale()  void setCursor(Cursor), Cursor getCursor() // mouse curser Icon  void setVisible(boolean) , boolean isVisible()

• Handling Events :  add/remove (component, mouse, mouseMotion, key, container, focus) Listenser  get/set nextFocusComponent property  requestFocus(), hasFocus()  boolean contains(int x, int y), contains(Point) Transparency No. 31

Java GUI

• Painting Components void repaint() , repaint(int, int, int, int), repaint(Rectangle) void revalidate() : ReLay out the component and its affected containers. void paintComponent(Graphics)

• Dealing with the Containment Hierarchy Component add(Component [, int index | Object constraint ] ) void remove(int) , void remove(Component comp) , void removeAll() JRootPane getRootPane() Container getParent() int getComponentCount() Transparency No. 32

Java GUI

• Laying Out Components

get/set LayoutManager property: layout get/set Dimension properties: minimumSize, preferredSize,  maximumSize get/set float property: allignmentX, allignmentY

• Getting Size and Position Information

•

int getWidth(), getHeight(), getX(), getY()  Dimension getSize(), Dimension getSize(Dimension) Rectangle getBounds() , Rectangle getBounds(Rectangle) Point getLocation() , getLocation(Point), getLocationOnScreen();  Insets getInsets()

Transparency No. 33

Java GUI

Using Top-Level Containers

• three generally useful top-level container classes: JFrame,

JDialog, and JApplet.

• Each has a content pane that contains the visible components in the GUI. • Can optionally add a menu bar to a toplevel container. positioned within the top-level container, but outside the content pane.

Transparency No. 34

Java GUI

• Adding Components to the Content Pane : frame.getContentPane().add(yellowLabel, BorderLayout.CENTER);

• Adding a Menu Bar : frame.setJMenuBar(cyanMenuBar);

• The Root Pane :

Transparency No. 35

Java GUI

How to Make Frames (Main Windows)

• code creates and • sets up the frame

Transparency No. 36

Java GUI

the code

public static void main(String s[]) { JFrame frame = new JFrame("FrameDemo"); frame.addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) {System.exit(0);} }); //...create a blank label, set its preferred size... frame.getContentPane().add(emptyLabel, BorderLayout.CENTER); frame.pack(); frame.setVisible(true);

Transparency No. 37

Java GUI

JFrame APIs

• Constructors: JFrame(), JFrame(String) • void setDefaultCloseOperation(int), int getDefaultCloseOperation() Possible choices: DO_NOTHING_ON_CLOSE, HIDE_ON_CLOSE (the default) , DISPOSE_ON_CLOSE

• void setContentPane(Container) , Container getContentPane() • void setJMenuBar(JMenuBar) , JMenuBar getJMenuBar() • …

Transparency No. 38

Java GUI

Using Intermediate Swing Containers

• The most flexible, frequently used intermediate container.

• Scroll Pane Provides scroll bars around a large or growable component.

• Split Pane Displays two components in a fixed amount of space, letting the adjust the amount of space devoted to each component.

• Tabbed Pane Contains multiple components but shows only one at a time. The can easily switch between components. Transparency No. 39

Java GUI

special intermediate containers

• Internal Frame Looks like a frame and has much the same API, but must appear within another window.

• Layered Pane  Provides a third dimension, depth, for positioning components. You specify the position and size of each component. One type of layered pane, a desktop pane, is designed primarily to contain and manage internal frames.

• Root Pane :  Provides behind-the-scenes to top-level containers. Transparency No. 40

Java GUI

How to Use s

Transparency No. 41

Java GUI

• Setting the Layout Manager : J a = new J(); a.setLayout(new BorderLayout());

• Adding Components aFlow.add(aComponent); aFlow.add(anotherComponent); aBorder.add(aComponent, BorderLayout.CENTER); aBorder.add(anotherComponent, BorderLayout.SOUTH);

Transparency No. 42

Java GUI

The J API

• Constructors: J() , J(LayoutManager) • void add(Component [, Object ] [, int ]), • void add(String, Component) • int getComponentCount() • Component getComponent(int) • Component[] getComponents() • Component getComponentAt( [int, int | Point] ) • void remove(Component), void remove(int) , void removeAll() • void setLayout(LayoutManager), Transparency No. 43 LayoutManager getLayout()

Java GUI

How to Use Scroll Panes

textArea = new JTextArea(5, 30); JScrollPane scrollPane = new JScrollPane(textArea); ... contentPane.setPreferredSize(new Dimension(400, 100)); ... Transparency No. 44

Java GUI

How to use Split Pane

Transparency No. 45

Java GUI

the code

//Create a split pane with the two scroll panes in it. splitPane = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT, listScrollPane, pictureScrollPane); splitPane.setOneTouchExpandable(true); splitPane.setDividerLocation(150); //Provide minimum sizes for the two components in the split pane Dimension minimumSize = new Dimension(100, 50); Transparency No. 46

Java GUI

How to Use Tool Bars

Transparency No. 47

Java GUI

public ToolBarDemo() { ... JToolBar toolBar = new JToolBar(); addButtons(toolBar); ... J contentPane = new J(); contentPane.setLayout(new BorderLayout()); ... contentPane.add(toolBar, BorderLayout.NORTH); contentPane.add(scrollPane, BorderLayout.CENTER); Transparency No. 48

Java GUI

protected void addButtons(JToolBar toolBar) { JButton button = null; //first button button = new JButton(new ImageIcon("images/left.gif")); ... toolBar.add(button); //second button button = new JButton(new ImageIcon("images/middle.gif")); ... toolBar.add(button); //third button button = new JButton(new ImageIcon("images/right.gif")); ... toolBar.add(button); } • Other methods:  isFloatable(), setFloatable(boolean)

Transparency No. 49

Java GUI

Using Atomic Components

• The following atomic components exist primarily to get input from the : • Button, Check Box, Radio Button  Provides easy-to-use, easy-to-customize button implementations.

• Combo Box  Provides both uneditable and editable combo boxes -buttons that bring up menus of choices.

• List  Displays a group of items that the can choose.

• Menu  Includes menu bar, menu, and menu item implementations, including specialized menu items such as check box menu items.

• Slider  Lets the choose one of a continuous range of values. Transparency No. 50

Java GUI

• Some atomic components exist only to give information: • Label : Presents some text, an icon, or both. • Progress Bar : Displays progress toward a goal. • Tool Tip : Brings up a small window that describes another component. • The rest of the atomic components provide formatted information and a way of editing it: • Color Chooser : A UI for choosing colors; can be used inside or outside a dialog. • File Chooser :A UI for choosing files and directories. • Table: An extremely flexible component that displays data in a grid format. • Text : A framework including everything from simple text components, such as text fields, to Transparency No. 51

Java GUI

How to Use Buttons, Check Boxes, and Radio Buttons

ImageIcon leftButtonIcon = new ImageIcon("images/right.gif") b1 = new JButton("Disable middle button", leftButtonIcon); b1.setVerticalTextPosition(AbstractButton.CE NTER); position of the text relative to the icon

b1.setHorizontalTextPosition(AbstractButton. LEFT); b1.setMnemonic(KeyEvent.VK_D);Transparency No. 52

Java GUI

• // can use setText(“ …<.html>”) for multiFonts text • b1 = new JButton(" Disable“ + " middle button", leftButtonIcon);

Transparency No. 53

Java GUI

How to Use Check Boxes

Transparency No. 54

Java GUI

the code

//In initialization code: chinButton = new JCheckBox("Chin"); chinButton.setMnemonic(KeyEvent.VK_C); chinButton.setSelected(true); glassesButton = new JCheckBox("Glasses"); glassesButton.setMnemonic(KeyEvent.VK_G ); glassesButton.setSelected(true); … // a listener for the check boxes. CheckBoxListener myListener = new CheckBoxListener(); Transparency No. 55

Java GUI

How to use RadioButtons

• Radio buttons are groups of buttons in which, by convention, only one button at a time can be selected. • Swing release s radio buttons with the JRadioButton and ButtonGroup classes.

Transparency No. 56

Java GUI

//In initialization code: // Create the radio buttons. JRadioButton birdButton = new JRadioButton(birdString); birdButton.setMnemonic(KeyEvent.VK_B); birdButton.setActionCommand(birdString); birdButton.setSelected(true); … // Group the radio buttons. ButtonGroup group = new ButtonGroup(); Transparency No. 57 group.add(birdButton);

Java GUI

// a listener for the radio buttons. RadioListener myListener = new RadioListener(); birdButton.addActionListener(myListener); catButton.addActionListener(myListener); dogButton.addActionListener(myListener); rabbitButton.addActionListener(myListener); pigButton.addActionListener(myListener); ... class RadioListener implements ActionListener ... { public void actionPerformed(ActionEvent e) { picture.setIcon(new ImageIcon("images/" + e.getActionCommand() + ".gif")); Transparency No. 58 }

Java GUI

The event listener

class CheckBoxListener implements ItemListener { public void itemStateChanged(ItemEvent e) { ... Object source = e.getItemSelectable(); if (source == chinButton) { //...make a note of it... } else if (source == glassesButton) { //...make a note of it... } else if (source == hairButton) { //...make a note of it... } else if (source == teethButton) { //...make a note of it... } if (e.getStateChange() == ItemEvent.DESELECTED) //...make a note of it... Transparency No. 59

Java GUI

ColorChooser

Transparency No. 60

Java GUI

final JLabel banner = new JLabel("Welcome to the Tutorial Zone!", JLabel.CENTER); banner.setForeground(Color.yellow); ... final JColorChooser tcc = new ColorChooser ( banner.getForeground()); // initial selected color ... getContentPane().add(tcc, BorderLayout.CENTER); • A color chooser uses an instance of ColorSelectionModel to contain and manage the current selection, which fires a change event whenever the changes the color Transparency No. 61

Java GUI

• The example program s a change listener with the color selection model so that it can update the banner at the top of the window. The following code s and implements the change listener: tcc.getSelectionModel().addChangeListener ( new ChangeListener() { public void stateChanged(ChangeEvent e) { Color newColor = tcc.getColor(); banner.setForeground(newColor); Transparency No. 62

Java GUI

File Chooser

Transparency No. 63

Java GUI

//Create a file chooser final JFileChooser fc = new JFileChooser(); ... // Event Handler for the OpenFile button public void actionPerformed(ActionEvent e) { // container int returnVal = fc.showOpenDialog(FileChooserDemo.this); //= fc.showDialog(FileChooserDemo.this, “OK”) // other: fc.ShowSaveDialog(…) if (returnVal == JFileChooser.APPROVE_OPTION) { // other possibilities: CANCEL_OPTION, ERROR_OPTION File file = fc.getSelectedFile(); //this is where a real application would open the file. Transparency No. 64

Java GUI

Label

Transparency No. 65

Java GUI

ImageIcon icon = new ImageIcon("images/middle.gif"); ... // 2nd arg sets the position of contents relative to label label1 = new JLabel("Image and Text", icon, JLabel.CENTER); //Set the position of the text, relative to the icon: label1.setVerticalTextPosition(JLabel.BOTTOM); label1.setHorizontalTextPosition(JLabel.CENTER); label2 = new JLabel("Text-Only Label"); label3 = new JLabel(icon); //Add labels to the J. add(label1); add(label2);

Transparency No. 66 add(label3);

Java GUI

Using HTML on a Label

•

The action listener for the button executes this single line of code: • theLabel.setText(htmlTextArea.getText()); Transparency No. 67

Java GUI

Combo Boxes

• very different forms: uneditable and editable. • Uneditable Combo Box: Editable Como Box

Transparency No. 68

Java GUI

String[] petStrings = { "Bird", "Cat", "Dog", "Rabbit", "Pig" }; // Create the combo box, select item at index 4. // Indices start at 0, so 4 specifies the pig. JComboBox petList = new JComboBox(petStrings); petList.setSelectedIndex(4); ... petList.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { JComboBox cb = (JComboBox)e.getSource(); String petName = (String)cb.getSelectedItem(); picture.setIcon(new ImageIcon("images/" + petName + ".gif")); } Transparency No. 69 });

Java GUI

String[] patternExamples = { "dd MMMMM yyyy", "dd.MM.yy", "MM/dd/yy", "yyyy.MM.dd G 'at' hh:mm:ss z", "EEE, MMM d, ''yy", "h:mm a", "H:mm:ss:SSS", "K:mm a,z", "yyyy.MMMMM.dd GGG hh:mm aaa" }; ... JComboBox patternList = new JComboBox(patternExamples); patternList.setEditable(true); patternList.addActionListener(...); ... Transparency No. 70

Java GUI

How to Use Lists

Transparency No. 71

Java GUI

//...where member variables are declared: static Vector imageList; … // not limited to Strings // Create the list of images and put it in a scroll pane JList list = new JList(imageList); list.setSelectionMode(ListSelectionModel.SI NGLE_SELECTION); ... JScrollPane listScrollPane = new JScrollPane(list); • possible selection modes: SINGLE_SELECTION

Transparency No. 72

Java GUI

• JList fires list selection events whenever the selection changes. • You can process these events by adding a list selection listener to the list with the addListSelectionListener method. • A list selection listener must implement one method: valueChanged.

Transparency No. 73

Java GUI

public void valueChanged(ListSelectionEvent e) { if (e.getValueIsAdjusting()) return; JList theList = (JList)e.getSource(); if (theList.isSelectionEmpty()) { picture.setIcon(null); } else { int index = theList.getSelectedIndex(); ImageIcon newImage = new ImageIcon("images/" + (String)imageList.elementAt(index)); picture.setIcon(newImage); picture.setPreferredSize(new Dimension( newImage.getIconWidth(), newImage.getIconHeight() )); picture.revalidate(); Transparency No. 74

Java GUI

Adding Items to and Removing Items from a List

• ListModel listModel = new DefaultListModel(); • listModel.addElement("Alison Huml"); • listModel.addElement("Kathy Walrath"); • listModel.addElement("Lisa Friendly"); • listModel.addElement("Mary Campione"); • list = new JList(listModel);

Transparency No. 75

Java GUI

public void actionPerformed(ActionEvent e) { int index = list.getSelectedIndex(); // or int[ ] getSelectedIndecies() listModel.remove(index); int size = listModel.getSize(); //Nobody's left, disable firing if (size == 0) { fireButton.setEnabled(false); //Adjust the selection } else { //removed item in last position if (index == listModel.getSize()) index--; //otherwise select same index list.setSelectedIndex(index); Transparency No. 76

Java GUI

How to Use Menus ( with JMenu and JMenuBar)

Transparency No. 77

Java GUI

The Menu Component Hierarchy

Transparency No. 78

Java GUI

Creating Menus

//in the constructor for a JFrame subclass: JMenuBar menuBar; JMenu menu, submenu; JMenuItem menuItem; JCheckBoxMenuItem cbMenuItem; JRadioButtonMenuItem rbMenuItem; ... //Create the menu bar. menuBar = new JMenuBar(); setJMenuBar(menuBar);

Transparency No. 79

Java GUI

//Build the first menu. menu = new JMenu("A Menu"); menu.setMnemonic(KeyEvent.VK_A); menu.getAccessibleContext().setAccessibleDescripti on( "The only menu in this program that has menu items"); menuBar.add(menu); //a group of JMenuItems menuItem = new JMenuItem("A text-only menu item", KeyEvent.VK_T); menuItem.setAccelerator(KeyStroke.getKeyStroke( KeyEvent.VK_1, ActionEvent.ALT_MASK)); Transparency No. 80 menuItem.getAccessibleContext().setAccessibleDescription(

Java GUI

//a group of radio button menu items menu.addSeparator(); ButtonGroup group = new ButtonGroup(); rbMenuItem = new JRadioButtonMenuItem("A radio button menu item"); rbMenuItem.setSelected(true); rbMenuItem.setMnemonic(KeyEvent.VK_R); group.add(rbMenuItem); menu.add(rbMenuItem); rbMenuItem = new JRadioButtonMenuItem("Another one"); rbMenuItem.setMnemonic(KeyEvent.VK_O); group.add(rbMenuItem); Transparency No. 81

Java GUI

//a group of check box menu items menu.addSeparator(); cbMenuItem = new JCheckBoxMenuItem("A check box menu item"); cbMenuItem.setMnemonic(KeyEvent.VK_C); menu.add(cbMenuItem); cbMenuItem = new JCheckBoxMenuItem("Another one"); cbMenuItem.setMnemonic(KeyEvent.VK_H); menu.add(cbMenuItem); Transparency No. 82

Java GUI

//a submenu menu.addSeparator(); submenu = new JMenu("A submenu"); submenu.setMnemonic(KeyEvent.VK_S); menuItem = new JMenuItem("An item in the submenu"); menuItem.setAccelerator(KeyStroke.getKeyStroke( KeyEvent.VK_2, ActionEvent.ALT_MASK)); submenu.add(menuItem); menuItem = new JMenuItem("Another item"); submenu.add(menuItem); menu.add(submenu); //Build second menu in the menu bar. menu = new JMenu("Another Menu"); menu.setMnemonic(KeyEvent.VK_N); Transparency No. 83

Java GUI

Handling Events from Menu Items

• To detect when the selects a JMenuItem, you can listen for action events (just as you would for a JButton). • To detect when the selects a JRadioButtonMenuItem, you can listen for either action events or item events. • For JCheckBoxMenuItems, you generally listen for item events public class MenuDemo ... implements ActionListener, ItemListener { ... Transparency No. 84

Java GUI

Bringing Up a Popup Menu

//Create the popup menu. JPopupMenu popup = new JPopupMenu(); menuItem = new JMenuItem("A popup menu item"); menuItem.addActionListener(this); popup.add(menuItem); menuItem = new JMenuItem("Another popup menu item"); menuItem.addActionListener(this); popup.add(menuItem); //Add listener to components that can bring up popup menus. MouseListener popupListener = new PopupListener(); Transparency No. 85

Java GUI

class PopupListener extends MouseAdapter { public void mousePressed(MouseEvent e) { maybeShowPopup(e); } public void moeleased(MouseEvent e) { maybeShowPopup(e); } private void maybeShowPopup(MouseEvent e) { if (e.isPopupTrigger()) { popup.show(e.getComponent(), e.getX(), e.getY()); } } } Transparency No. 86

Java GUI

Using Text Components

• JTextComponent Hierarchy

Transparency No. 87

Java GUI

• An Example of Using Each Text Component

Transparency No. 88

Java GUI

// An Example of Using a Text Field JTextField textField = new JTextField(10); textField.setActionCommand(textFieldString); textField.addActionListener(this); //An Example of Using a Field JField Field = new JField(10); Field.setActionCommand(FieldStrin g); Field.addActionListener(this); // Event handler for both components public void actionPerformed(ActionEvent e) { … if (e.getActionCommand().equals(textFieldString)) { JTextField source = (JTextField)e.getSource(); actionLabel.setText(prefix + source.getText() Transparency No. 89

Java GUI

Using Text Area

JTextArea textArea = new JTextArea( "This is an editable JTextArea " + "that has been initialized with the setText method. " + "A text area is a \"plain\" text component, " + "which means that although it can display text " + "in any font, all of the text is in the same font." ); textArea.setFont( new Font("Serif", Font.ITALIC, 16)); Transparency No. 90

Java GUI

JEditorPane

• the foundation for Swing's styled text components and provides the mechanism through which you can add for custom text formats. • Using an Editor Pane to Display Text from a URL: JEditorPane editorPane = new JEditorPane(); editorPane.setEditable(false); ...//create a URL object for the TextSamplerDemoHelp.html file... try { editorPane.setPage(url); Transparency No. 91

Java GUI

Using a Text Pane

JTextPane textPane = new JTextPane(); String[] initString = { /* ... fill array with initial text ... */ }; String[] initStyles = { /* ... fill array with names of styles ... */ }; //Create the styles we need. initStylesForTextPane(textPane); Document doc = textPane.getDocument(); //Load the text pane with styled text. try { for (int i=0; i < initString.length; i++) { doc.insertString(doc.getLength(), initString[i], textPane.getStyle(initStyles[i])); } } catch (BadLocationException ble) { System.err.println("Couldn't insert initial Transparency No. 92

Java GUI

How to Use Border

Transparency No. 93

Java GUI

Layout components within a container

• Probably different than other GUIs you’ve used • All code, no resources • Components are placed on using “layout manager” based on the order in which you add( ) the components • Size, shape and placement quite different depending on layout manager • Applet and application window size also affects layout Transparency No. 94

Java GUI

Types of Layouts

• • • • • • •

FlowLayout BorderLayout GridLayout CardLayout GridBagLayout BoxLayout NullLayout

Transparency No. 95

Java GUI

FlowLayout

• Components “flow” onto form left-to-right and top-to-bottom • Components take on “normal” size

Transparency No. 96

Java GUI

The Code

Container contentPane = getContentPane(); contentPane.setLayout(new FlowLayout()); contentPane.add(new JButton("Button 1")); contentPane.add(new JButton("2")); contentPane.add(new JButton("Button 3")); contentPane.add(new JButton("LongNamed Button 4")); Transparency No. 97 contentPane.add(new JButton("Button

Java GUI

The FlowLayout API

• Three constructors: public FlowLayout() public FlowLayout(int alignment) public FlowLayout(int alignment, horizontalGap, int verticalGap)

int

• The alignment argument must have one of the values : FlowLayout.LEFT, FlowLayout.CENTER, FlowLayout.RIGHT.

• horizontalGap and verticalGap specify the number of pixels to put between components. default gap value = 5 pixels.

Transparency No. 98

Java GUI

BorderLayout

• Container divided into five regions: West, North, East, South, Center. Transparency No. 99

Java GUI

Example

public class BorderLayout1 extends JApplet { public void init() { Container = getContentPane(); .setLayout(new BorderLayout()); // default is FlowLayout .add(new JButton("North") , BorderLayout.NORTH); // .add(BorderLayout.NORTH, new JButton("North")); // also ok! // .add(new JButton("North"), “North”); // also ok! .add(BorderLayout.SOUTH, new JButton("South")); .add(BorderLayout.EAST, new JButton("East")); .add(BorderLayout.WEST, new JButton("West")); .add(BorderLayout.CENTER, new Transparency No. 100

Java GUI

Additional properties of BorderLayout

• (Horizontal and Vertical ) Gaps between components • constructor: BorderLayout(int hgap, int vgap)

• methods: void setHgap(int) void setVgap(int)

Transparency No. 101

Java GUI

GridLayout

• Organized in rows & columns

Transparency No. 102

Java GUI

The code

• Container contentPane = getContentPane(); contentPane.setLayout(new GridLayout(3,2)); contentPane.add(new JButton("Button 1")); contentPane.add(new JButton("2")); contentPane.add(new JButton("Button 3")); contentPane.add(new JButton("LongNamed Button 4")); contentPane.add(new JButton("Button 5")); • APIs: public GridLayout(int rows, int columns [, int hgap, int vgap ]) Transparency No. 103

Java GUI

CardLayout

• Use JTabbedPane instead. import java.awt.*; public class main extends JApplet implement ActionListner { CardLayout cards = new CardLayout(); JButton b1 = new JButton(“one”), …, b3 = new JButton(“three”); b1.addActionListner( this); … ; b3.addActionListner(this) public void init() { setLayout( cards ); add( new Button("one"), "one" ); add( new Button("two"), "two" ); add( new Button("three"), "three" ); } public void actionPerformed( ActionEvent e) No. { 104 // flip Transparency

Java GUI

CardLayout API

• • • • •

void void void void void

first(Container) next(Container) previous(Container) last(Container) show(Container, String cardID)

show card identified by cardID.

Transparency No. 105

Java GUI

GridBagLayout

• Flexible layout manager that aligns components horizontally and vertically, without requiring that the components be the same size • Quite a mess to program Must use GridBagConstraints This is what happens without resources

• You can accomplish a lot by combining other layout managers. • To make it easier, Swing has BoxLayout Transparency No. 106

Java GUI

BoxLayout

• Place all components in a row or in a column. • Much of the benefit of GridBagLayout without the pain • Has helper class Box which uses BoxLayout and builds components for you Transparency No. 107

Java GUI

BoxLayout

Transparency No. 108

Java GUI

The Layout structure

J(BoxLayout(V))

label

rigidArea(0,5)

Center

JScrollPane South

HorizontalGlue J (BorderLayout)

JButton

JButton J(BoxLayout(H)) rigidArea(10,0) Transparency No. 109

Java GUI

The Code

JScrollPane listScroller = new JScrollPane(list); listScroller.setPreferredSize(new Dimension(250, 80)); listScroller.setMinimumSize(new Dimension(250, 80)); listScroller.setAlignmentX(LEFT_ALIGNMENT); ... //Lay out the label and scroll pane from top to bottom. J listPane = new J(); listPane.setLayout(new BoxLayout(listPane, BoxLayout.Y_AXIS)); JLabel label = new JLabel(labelText); listPane.add(label); listPane.add(Box.createRigidArea(new Dimension(0,5))); Transparency No. 110

Java GUI

// Lay out the buttons from left to right. J buttonPane = new J(); buttonPane.setLayout(new BoxLayout(buttonPane, BoxLayout.X_AXIS)); buttonPane.setBorder(BorderFactory.createEmptyB order(0, 10, 10, 10)); buttonPane.add(Box.createHorizontalGlue()); buttonPane.add(cancelButton); buttonPane.add(Box.createRigidArea(new Dimension(10, 0))); buttonPane.add(setButton); // Put everything together, using the content pane's BorderLayout. Transparency No. 111

Java GUI

Box Layout Features

• the box layout takes the components‘ alignments and minimum, preferred, and maximum sizes into . • Respect each component's requested minimum and maximum heights. • Use preferred height ( or weight ) as default. • layout principles: tries to make all of its container's components equally wide -- as wide as the largest preferred width. container wider => make all the components as wide as the container.  If the components aren't all the same width then Transparency No. 112

Java GUI

Container wider than maximumSize

• All components’s AllignmentX are LEFT_ALLIGNMENT(0.0) • All components’s AllignmentX are CENTER_ALLIGNMENT(0.5) • All components’s AllignmentX are RIGHT_ALLIGNMENT(1.0)

Transparency No. 113

Java GUI

• Components have different allignmentXs: 0.0, 0.5, 1.0.

Transparency No. 114

Java GUI

When no component has maximumSize

• same allignmentX => made as wide as their container. • different allignmentX : components with an X alignment of 0.0 (left) or 1.0 (right) will be smaller. components with an intermediate X alignment will be as wide as their container

Transparency No. 115

Java GUI

Using Invisible Components as Filler

• to have space between components: add an empty border to one or both components, or insert invisible components to provide the space. use Box class to create invisible components.

• Creating invisible components with Box Type SizeConstrai HowToCreate and Box.Filler. nt

rigidArea

glue

custom

Box.createRigidArea(s ize)

horizont al

Box.createHorizontalG lue()

vertical

Box.createVerticalGlu e() new

Transparency No. 116

Java GUI

Rigid area

• Use this when you want a fixed-size space between two components. • container.add(firstComponent); • container.add(Box.createRigidArea(new Dimension(5,0))); • container.add(secondComponent);

Transparency No. 117

Java GUI

Glue

• •

container.add(firstComponent);

container.add(Box.createHorizontalGlue()); • container.add(secondComponent);

Transparency No. 118

Java GUI

Custom Box.Filler

// ensure 5~100 pixels b/t components and 100 px height container.add(firstComponent); Dimension minSize = new Dimension(5, 100); Dimension prefSize = new Dimension(5, 100); Dimension maxSize = new Dimension(Short.MAX_VALUE, 100); container.add(new Box.Filler(minSize, prefSize, maxSize)); container.add(secondComponent);

Transparency No. 119

Java GUI

Specifying Component Sizes

• change the minimum, preferred, and maximum sizes in two ways: • Invoking setXxxSize method ( defined by the JComponent class).

comp.setMinimumSize(new Dimension(50, 25)); comp.setPreferredSize(new Dimension(50, 25)); comp.setMaximumSize(new Dimension(Short.MAX_VALUE, Short.MAX_VALUE ));

• Overriding getXxxSize method:

...//in a subclass of a component class:  public Dimension getMaximumSize() {  size = getPreferredSize();  size.width = Short.MAX_VALUE;  return size; Transparency No. 120

Java GUI

The Box and BoxLayout API

• Constructors:

 BoxLayout(Container, int axis)  Box(int axies)  // create a Box : subclass of Container but not JComponent  static Box createHorizontalBox() // = new Box(BoxLayout.X_AXIS)  static Box createVerticalBox()

• Constructors or methods creating Space Fillers

 Component createRigidArea(Dimension) Create a rigid lightweight component.  Component createHorizontalGlue()  Component createVerticalGlue()  Component createGlue() Create a glue lightweight component.  Horizontal glue and vertical glue can be very useful.  Component createHorizontalStrut()  Component createVerticalStrut() Create a "strut" Transparency No. 121

Java GUI

Null Layout (absolute Positioning)

• setLayout(null); • Programmers are responsible for setting the size and position of each component. ( via setBounds(x, y, witdth, height))

Transparency No. 122

Java GUI

The code

public class NoneWindow extends JFrame { ... private boolean laidOut = false; private JButton b1, b2, b3; public NoneWindow() { Container contentPane = getContentPane(); contentPane.setLayout(null); b1 = new JButton("one"); contentPane.add(b1); b2 = new JButton("two"); contentPane.add(b2); b3 = new JButton("three"); contentPane.add(b3); Insets insets = contentPane.getInsets(); b1.setBounds(25 + insets.left, 5 + insets.top, 75, 20); Transparency No. 123

Java GUI

Event Handling

• Not limited to ActionListener InputEvent: KeyEvent, MouseEvent, MouseMotionEvent, ContainerEvent, ComponentEvent,…

• Each type of event represented by a class • Component responds to an event by making an event object and calling each “listener” ed for that event • An event listener implements a particular listener interface using an inner class • addXXXListener( ) adds a listener to your component, removeXXXListener( ) uns it Transparency No. 124

Java GUI

Java Event Model

• delegation ( or forwarding ) model system: l = new EventListener(…)

l:EventListner

b=new EventSource(…)

b:EventSource

addXXXListener(l)

Event e1 occurs doXXXAction(e1) Event e2 occurs doXXXAction(e2)

…. Transparency No. 125

Java GUI

Event, listener interface and add-and remove-methods

Components ing this event

ActionEvent ActionListener ; addActionListener( ) removeActionListener( )

Button, List, TextField, MenuItem, CheckboxMenuItem, Menu and PopupMenu

AdjustmentEvent Scrollbar, Anything you create that implements AdjustmentListener ; addAdjustmentListener( ) Adjustable removeAdjustmentListener( ) ComponentEvent ComponentListener addComponentListener( )

Component and its derivatives, including Button, Canvas, Checkbox, Choice, Container, , Transparency No. 126

Java GUI

Event, listener interface and add-and remove-methods

Components ing this event

ContainerEvent ContainerListener addContainerListener( ) removeContainerListener( )

Container and its derivatives, including

FocusEvent FocusListener addFocusListener( ) removeFocusListener( )

Component and its derivatives, including Button,

KeyEvent KeyListener

Component and its Transparency No. 127 Button, derivatives , including

, Applet, ScrollPane, Window, Dialog, FileDialog and Frame

Canvas, Checkbox, Choice, Container, , Applet, ScrollPane, Window, Dialog, FileDialog, Frame Label, List, Scrollbar, TextArea and TextField

Java GUI

Event, listener interface and add-and remove-methods

Components ing this event

MouseEvent (for both clicks and Component and its motion) derivatives, including Button, MouseListener; Canvas, Checkbox, Choice, addMouseListener( ) Container, , Applet, ScrollPane, Window,Dialog,FileDialog,Frame,Label, removeMouseListener( ) List, Scrollbar, TextArea and TextField MouseEvent (for both clicks and motion)

MouseMotionEvent MouseMotionListener addMouseMotionListener( ) removeMouseMotionListener( )

Component and its derivatives, including Button,

WindowEvent WindowListener

Window and its

Canvas, Checkbox, Choice, Container, , Applet, ScrollPane, Window,Dialog,FileDialog,Frame,Label, List, Scrollbar, TextArea and TextField

Transparency No. 128

Java GUI

• Event type: ItemEvent

listener interface: ItemListener add-and-remove-methods : addItemListener( ), removeItemListener( ) Components ing this event : Checkbox, CheckboxMenuItem, Choice, List and anything that implements ItemSelectable.

• Event type: TextEvent

listener interface: TextListener add-and-remove-methods : addTextListener( ), removeTextListener( )

Transparency No. 129

Java GUI

Subinterfaces of EventListner and their methods

• Listener interface/ adapter Methods in interface • ActionListener actionPerformed(ActionEvent) • AdjustmentListener adjustmentValueChanged(AdjustmentEvent) • ComponentListener, componentHidden(ComponentEvent) ComponentAdapter componentShown(ComponentEvent) componentMoved(ComponentEvent) componentResized(ComponentEvent) Transparency No. 130

Java GUI

Subinterfaces of EventListner and their methods

• Listener interface w/ adapter Methods in interface • KeyListener, keyPressed(KeyEvent) KeyAdapter keyReleased(KeyEvent) keyTyped(KeyEvent) • MouseListener, MouseAdapter

mouseClicked(MouseEvent) mouseEntered(MouseEvent) mouseExited(MouseEvent) mousePressed(MouseEvent) moeleased(MouseEvent)

• MouseMotionListener, mouseDragged(MouseEvent) • MouseMotionAdapter mouseMoved(MouseEvent) Transparency No. 131

Java GUI

Subinterfaces of EventListner and their methods

• Listener interface w/ adapter in interface WindowListener, windowOpened(WindowEvent) WindowAdapter windowClosing(WindowEvent)

Methods

windowClosed(WindowEvent) windowActivated(WindowEvent) windowDeactivated(WindowEvent) Transparency No. 132

Java GUI

And more in Swing:

• • • • • • • • • •

AncestorListner CaretListner, CellEditorListner ChangeListner HyperlinkListner InternalFrameListner ListDataListner ListSelectionListner MenuDragMouseListner, MenuKeyListner,,MenuListner PopupMenuListner TreeExpansionListner, TreeSelectionListner, TreeWillExpandListner • java.bean.propertyChangeListner, vetoableChangeListner

Transparency No. 133

Java GUI

JavaBeans

• Component programming model • True power in visual programming • Must be able to instantiate, query and configure objects at design time • Java 1.1 reflection provides method and field information on a live object Methods, arguments, return values

• Beans specifies a naming convention Identifies design-time fields, event handlers Transparency No. 134

Java GUI

What is a Bean?

• Just a class (thus easy to learn & use) • s three concepts: Properties Events Methods

• Follows naming convention to identify these Java call this convention a “design pattern”

Transparency No. 135

Java GUI

Properties, Methods, Events

• For a property named xxxx of type T, create two methods: pubic T getXxxx( ) // capitalize the first char public void setXxxx(T ). (First letter automatically capitalized). boolean property: may also use “is” instead of “get.”  boolean isXxxx() Ordinary methods are public

• Events use the same “Listeners,” with add- and remove- methods like before Transparency No. 136

Java GUI

A Simple Bean

class Spots {} public class Frog { private int jumps; private Color color; private Spots spots; private boolean jmpr; public int getJumps() { return jumps; } public void setJumps(int js) { jumps = js; } public Color getColor() { return color; } public void setColor(Color c) { color = c; } public Spots getSpots() { return spots; } public void setSpots(Spots newSpots) { spots = newSpots; } Transparency No. 137

Java GUI

public boolean isJumper() { return jmpr; } public void setJumper(boolean j) { jmpr = j; } public void addActionListener(ActionListener l) { //... } public void removeActionListener(ActionListener l) { // ... } public void addKeyListener(KeyListener l) { // ... } public void removeKeyListener(KeyListener l) { // ... } // An "ordinary" public method: public void croak() { System.out.println("Ribbet!"); } } Transparency No. 138

Java GUI

Introspection

• Introspector automatically analyzes a Bean for properties, events & methods

Transparency No. 139

Java GUI

Summary

• “Listener” event model and Beans are a big step forward • Swing is the best UI library I’ve seen • All Swing components are JavaBeans • Numerous application builders use Beans • Beans enable RAD environments • Beans more sophistication than shown here

Transparency No. 140

Java GUI

Summary

• Java GUI has gone through a lot of design changes • Enough of an intro to get you started • Use a GUI builder for serious development • Other references: “Core Java 2” by Horstmann & Cornell, Prentice-Hall Online help

Transparency No. 141

Java GUI

Problem 4

1. Create an JFrame with a text field and 3 buttons. When you press each button, make some different text appear in the text field. 2. Add a check box to your JFrame,capture the event and insert different text into the text field. 3. Add a set of radio buttons which change the text in the text field. 4. Add a menu that changes the text field when any of its menu item is selected.

Transparency No. 142

Java GUI

Transparency No. 143

Java GUI

More Java topics …

• Not detailed:  JDBC, RMI, JavaBeans  advanced Swing :Jtree, JTable, JText,…

• Not covered:  Java Security model  Internationalization ( i18n, l10n )  Native Methods,  Java 2D, Java 3D, Java mulitmedia framework (JMF)  XML, JavaMail

• J2EE:  JDBC, RMI, Servlet and JavaServer page, java IDL (Corba), Java Transaction service (JTS), RMI over IIOP, Java Message Queue(JMQ), JNDI, Enterprise JavaBeans

• J2ME:  KVM, Configuration: CLDP,  profile: MIDP Transparency No. 144

Java GUI

• •

•

J2ME

Java 2 platform targeted at consumer electronics and embedded devices. consists of

 a virtual machine ( KVM, thirdParty: Colored KVM, J9 ) and  a set of APIs suitable for providing tailored runtime environments for consumer and embedded electronics.

two primary kinds of components

 Configurations: low-level APIs and optimized virtual machines targeted at two broad categories of devices:  180K ~512K(CLDC: Connection limited device configuration), and 512K+  profile: a specification that details the JavaTM technology APIs, built on top of and utilizing the Transparency No. 145