cs338-l4 - drexel ccidavid/classes/cs338/lectures/cs338-l4.pdfpage 5 cs 338: graphical user...

1 CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University.

Lecture 4: Components

CS 338: Graphical User Interfaces. Dario Salvucci, Drexel University. 2

Widgets!

•  Look at the most common GUI components –  see what they do –  see how they work

•  High-level goal: Get prepared to build a real interface!


Swing components

•  Component hierarchy

Top-level Containers (frame, dialog, applet, …)

Intermediate Containers (panel, scroll pane, …)

Atomic Components (button, list, menu, …)

javax.swing. JComponent

java.awt. Window


Buttons

•  Something that invokes an action/command or changes system state –  “OK” / “Cancel” –  “New Folder” –  File type: “Word 98”

•  Visual design based on real-world buttons –  physical mouse click also resembles button push!

(the power of metaphors…)


Buttons

•  AbstractButton = abstract parent class –  JButton –  JCheckBox –  JRadioButton –  JMenuItem –  and more…

•  Side note: AbstractButton is an abstract class, not an interface


All Buttons

•  Can contain both text and icon

•  What’s an icon?

–  A small fixed size picture, typically used to decorate components

ImageIcon leftButtonIcon = new ImageIcon ("images/right.gif");


All Buttons

•  Placing text in the buttons

•  Enabling / disabling buttons (important!!) b.setEnabled (true);

(false);

b.setHorizontalTextPosition (AbstractButton.CENTER); (AbstractButton.LEFT); (AbstractButton.RIGHT);

b.setVerticalTextPosition (AbstractButton.CENTER); (AbstractButton.TOP); (AbstractButton.BOTTOM);


All Buttons

•  Noting the “Action Command” –  string that denotes what the button does

–  can be used in handling events

b1.setActionCommand (“disable”);

public void actionPerformed(java.awt.event.ActionEvent e) { if (e.getActionCommand().equals("disable")) { b2.setEnabled(false); b1.setEnabled(false); b3.setEnabled(true); } else { b2.setEnabled(true); b1.setEnabled(true); b3.setEnabled(false); } }

All Buttons

•  Associating keys

•  Attaching “tool tips”

b1.setMnemonic (KeyEvent.VK_D); b2.setMnemonic (KeyEvent.VK_M); b3.setMnemonic (KeyEvent.VK_E);

b1.setToolTipText ("Click this button to disable the middle button."); b2.setToolTipText ("This middle button does nothing when you click it."); b3.setToolTipText ("Click this button to enable the middle button.");


JButton

•  Our old friend...

•  Constructors JButton () // Creates a plain button, no icon or text JButton (Icon icon) // Creates a button with an icon. JButton (String text) // Creates a button with text. JButton (String text, Icon icon) // Creates a button with initial text and an icon


JButton

•  Setting the default button (for “Return” key)

getRootPane().setDefaultButton (setButton);


JButton

•  Using HTML in the button label (Only later versions! >= Swing 1.1.1B of JFC 1.1)

b1 = new JButton ("<html>Disablemiddle button", leftButtonIcon); b2 = new JButton("<html>Middle button", middleButtonIcon); b3 = new JButton("<html>Enablemiddle button", rightButtonIcon);


JButton

•  Handling events …

button. addActionListener (new MyActionListener ()); …

class MyActionListener implements ActionListener {

public void actionPerformed (ActionEvent e) { if (e.getActionCommand().equals("disable")) { b2.setEnabled(false); b1.setEnabled(false); b3.setEnabled(true); } else { b2.setEnabled(true); b1.setEnabled(true); b3.setEnabled(false); } }

}


Toggle buttons

•  JToggleButton with subclasses –  JCheckBox –  JRadioButton

•  Three kinds of events

•  Checking state

Click press: ChangeEvent // button armed ChangeEvent // button pressed

Click release: ChangeEvent // button selected ItemEvent // item state changed ChangeEvent // button released ActionEvent // full button press

if (button.isSelected()) …

good for radio button!

good for check box!


Toggle Events

•  ChangeEvent –  Notifies that state has changed in the event

source

•  ItemEvent –  Semantic event which indicates that an item was

selected or deselected –  High-level event generated by an ItemSelectable

object

•  ActionEvent –  Semantic event which indicates that a

component-defined action occurred.


JCheckBox

•  Check box: on/off toggle, each box independent of all others

JCheckBox

•  ItemListener interface

•  Handling events for a JCheckBox… –  (next slide)

void itemStateChanged(ItemEvent e) Invoked when an item has been selected or deselected.


CheckBoxListener myListener = new CheckBoxListener(); chinButton.addItemListener(myListener); glassesButton.addItemListener(myListener); hairButton.addItemListener(myListener); teethButton.addItemListener(myListener); ... 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 (e.getStateChange() == ItemEvent.DESELECTED) //...make a note of it... picture.setIcon(/* new icon */); } }

JCheckBox


JRadioButton

•  Radio button: on/off toggle, but only one of a group of buttons can be selected


JRadioButton birdButton = new JRadioButton(birdString); birdButton.setSelected(true); JRadioButton catButton = new JRadioButton(catString); JRadioButton dogButton = new JRadioButton(dogString); JRadioButton rabbitButton = new JRadioButton(rabbitString); JRadioButton pigButton = new JRadioButton(pigString); …

ButtonGroup group = new ButtonGroup(); group.add(birdButton); group.add(catButton); group.add(dogButton); group.add(rabbitButton); group.add(pigButton); ... << still need to add buttons to frame! >>

JRadioButton

group buttons to handle selection

one selected


•  Handling events 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")); } }

JRadioButton


Combination (Combo) Box

•  Select from a fixed list of items –  typically, a not-so-large list –  typically, a sorted list (easy to find items)


JComboBox

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")); } });

Note: Listener only needed if you need to do something

for each action!


Text Field

•  Editable, single-line field for typing text

•  Keypresses, deletions handled for you! •  You can also monitor changes (e.g.,

keypresses) and take action as they happen •  Special text fields

–  password fields (“•••••”) –  validated fields (e.g, “$7.95”)

JTextField

•  Constructors

•  Setting / getting text — the obvious...

JTextField() // Constructs a new TextField. JTextField(int columns) // Constructs a new empty TextField with the

specified number of columns. JTextField(String text) // Constructs a new TextField initialized with

the specified text. JTextField(String text, int columns) // Constructs a new TextField initialized with

the specified text and columns.

textField.getText (); textField.setText (text);


•  Handling events like usual… … textField.addActionListener(new MyTextListener ()); ... class MyTextListener implements ActionListener ... { public void actionPerformed(ActionEvent e) { String text = textField.getText (); << do something with text… >> } }

JTextField


Slider

•  For entering a numeric value bounded by a minimum and maximum value.


JSlider

•  Constructors

•  Getting / setting values — the obvious...

JSlider(); JSlider(int ORIENTATION); JSlider(int min, int max); JSlider(int min, int max, int value); JSlider(int ORIENTATION, int min, int max, int value);

The JSlider constructors let us change the orientation (HORIZONTAL or VERTICAL), the minimum and maximum value, and the initial value for a slider.

getValue () setMaximum (int Max) setMinimum (int Min) setValue (int Value)

•  Handling events … slider.addChangeListener(new MyChangeListener ()); ... public void stateChanged(ChangeEvent e) { JSlider source = (JSlider) e.getSource(); if (!source.getValueIsAdjusting()) { int fps = (int) source.getValue(); if (fps == 0) { if (!frozen) stopAnimation(); } else { delay = 1000 / fps; if (frozen) startAnimation(); } } }

• JSlider


Lists

•  Storage for a list of items –  typically text, or textual

representations of complex objects (e.g., 9:00pm)

–  could also be icons

•  Selection mode –  single selection

–  single interval

–  multiple interval


List View vs. Data

•  Lists have a common interface for dealing with the sequence of data –  allows data to be shared across lists, tables, etc.

•  ListModel interface –  defines methods for dealing with lists –  index in [0, size-1]

Object getElementAt (int index) int getSize (); void addListDataListener (ListDataListener l);

JList (list view)

ListModel (list data)


JList

•  Basic constructor

–  sets a basic list model that is unchangeable (no insertions/deletions after creation)

–  model created automatically, and you can access it if you want...

String[] data = {"one", "two", "three", "four"}; JList dataList = new JList (data);

for (int i = 0; i < dataList.getModel().getSize(); i++) { System.out.println (dataList.getModel().getElementAt(i)); }

JList

•  Constructor with more powerful list model –  first, create DefaultListModel

•  allows insertions/deletions at any time

–  then, create JList based on this list model list = new JList (listModel);

listModel = new DefaultListModel();

listModel.addElement (”Thing1"); listModel.addElement (”Thing2"); listModel.addElement (”Thing3"); listModel.addElement (”Thing4"); … listModel.remove (index);


JList

•  List selection –  complex class ListSelectionModel –  handles selection intervals, etc.

•  What we’ll need to know… list = new JList (listModel); list.setSelectionMode (ListSelectionModel.SINGLE_SELECTION); <or> (ListSelectionModel.SINGLE_INTERVAL_SELECTION); <or> (ListSelectionModel.MULTIPLE_INTERVAL_SELECTION);


JList

•  Handling selection events (on the JList view) … list.addListSelectionListener (new MyListSelectionListener()); …

public class MyListSelectionListener implements ListSelectionListener { public void valueChanged (ListSelectionEvent e) { if (e.getValueIsAdjusting() == false) { if (list.getSelectedIndex() == -1) { // No selection } else { // Selection, update text field. } } } }

// What you might use in the above functions… listModel.addElement (…); listModel.insertElementAt (…); listModel.remove (…);


Tables

•  Close cousins to our good friends, Lists •  Typical case

–  two-dimensional grid •  uneditable to display

tabular information •  editable to manage

tabular information

–  usually alpha-numeric text

•  But many possibilities...

Object[][] data = { {"Mary", "Campione", "Snowboarding", new Integer(5), new Boolean(false)}, {"Alison", "Huml", "Rowing", new Integer(3), new Boolean(true)}, {"Kathy", "Walrath", "Chasing toddlers", new Integer(2), new Boolean(false)}, {"Mark", "Andrews", "Speed reading", new Integer(20), new Boolean(true)}, {"Angela", "Lih", "Teaching high school", new Integer(4), new Boolean(false)} }; String[] columnNames = {"First Name”, "Last Name”, "Sport”, "# of Years”, … } JTable table = new JTable(data, columnNames);

Basic table

•  Simple example

•  Problems: all cells are editable Strings, full array is pre-initialized


Table model

•  As for lists, tables have Model vs. View

•  Create model first, then create view with this model

•  Table models typically extend AbstractTableModel (next slide…)

MyTableModel myModel = new MyTableModel(); JTable table = new JTable(myModel);


•  TableDemo.java example class MyTableModel extends AbstractTableModel { final String[] columnNames = ...//same as before... final Object[][] data = ...//same as before... public int getColumnCount() { return columnNames.length; } ... public Object getValueAt(int row, int col) { return data[row][col]; } public boolean isCellEditable(int row, int col) { //Note that the data/cell address is constant, //no matter where the cell appears onscreen. if (col < 2) { return false; } else { return true; } } ...

Table model


Table view

•  Resizing columns TableColumn column = null; for (int i = 0; i < 5; i++) { column = table.getColumnModel().getColumn(i); if (i == 2) { column.setPreferredWidth(100); //sport column is bigger } else { column.setPreferredWidth(50); } }


Table cells

•  Cell renderer –  used to draw all cells, shared by cell type

•  Boolean -- rendered with a check box •  Number -- rendered by a right-aligned label •  ImageIcon -- rendered by a centered label •  Object -- rendered by a label w/ the object's string

•  Cell editor –  takes over when user edits the cell

•  Example: Integer object in cell –  renderer: JLabel, right-aligned –  editor: JTextField, right-aligned


Table cells

•  Different editors in one table

Text Field Combo Box Check Box


Table cells

•  Color chooser as editor


Table data manager

•  Provide way of manipulating data in layer between model and view

•  One important, common use: Sorting! CLICK!

Trees

•  Lots of data fall nicely into a hierarchy –  tree structure: every node

has 1 parent (except root) –  e.g., directories & files,

company management structures, Swing components!

•  Nice to have a convenient, standard way of storing and viewing


Swing Trees

•  Basic structure –  root node –  branch nodes –  leaf nodes

•  Yet again… Model vs. View –  model = hierarchy of data/information –  view = vertical list of currently visible nodes that

can be expanded or collapsed


Tree model

•  Constructing the model –  construct root node, as

DefaultMutableTreeNode

–  construct other nodes & add to parent node

–  finally, construct model with root node

DefaultMutableTreeNode top = new DefaultMutableTreeNode("The Java Series");

category = new DefaultMutableTreeNode ("Books for Java Programmers"); top.add(category); book = new DefaultMutableTreeNode ("The Java Tutorial: Object-Oriented”); category.add(book);

treeModel = new DefaultTreeModel(top);

can be any Object!


Tree view

•  Create a JTree with the model –  often good idea to add scrollbars

DefaultMutableTreeNode top = new DefaultMutableTreeNode("The Java Series"); ... << create tree model >> ... JTree tree = new JTree(top); JScrollPane treeView = new JScrollPane(tree);


Tree view

•  Selection based on “paths” –  path of nodes from root to node (leaf or branch)

–  in Swing: TreePath class stores path as array –  or, method direct to bottom-most node…

tree.getSelectionModel().setSelectionMode (TreeSelectionModel.SINGLE_TREE_SELECTION); ... DefaultMutableTreeNode node = (DefaultMutableTreeNode) tree.getLastSelectedPathComponent();


Tree view

•  Handling selection events tree.addTreeSelectionListener (new TreeSelectionListener() { public void valueChanged(TreeSelectionEvent e) { DefaultMutableTreeNode node = (DefaultMutableTreeNode) tree.getLastSelectedPathComponent();

if (node == null) return;

if (node.isLeaf()) { Object nodeInfo = node.getUserObject(); BookInfo book = (BookInfo)nodeInfo; displayURL(book.bookURL); } else { displayURL(helpURL); } } });

handle branch

handle leaf


Tree extras

•  Changing view properties –  node connectors

–  different renderers


Useful things to know

Components To Check/Set State To Handle Events

JButton ActionListener

JCheckBox void setSelected (boolean) boolean isSelected () ItemListener

JRadioButton void setSelected (boolean) boolean isSelected () ActionListener

JComboBox void setSelectedIndex (int) Object getSelectedItem () ActionListener

JSlider void setValue(int) int getValue() ChangeListener

JList void setSelectedIndex (int) int getSelectedIndex () ListSelectionListener

DefaultListModel

void addElement (Object) void insertElementAt (Object,int) void remove (int) Object getElementAt (int) int getSize ()

ListDataListener [created for you if you use JList constructor passing list model]

JTextField void setText (String) String getText () ActionListener


Menus

•  A great GUI development! (Apple Lisa) •  Fit lots of functionality into a small space

–  requires overlapping & restoring of graphics

•  Have become more standardized, more hierarchical, & just plain bigger


Swing Menu Components

•  Within the component hierarchy, can contain several types of components


Menu Bar

•  Represents the bar of top-level items •  Creating a menu bar

•  Setting the bar in a frame, applet, etc.

JMenuBar () JMenu add (JMenu)

void setJMenuBar(JMenuBar) JMenuBar getJMenuBar()


Menu

•  Any item — in a menu bar or menu — that displays more options

•  Creating the menu

•  Adding items (options) to the menu

JMenu () JMenu (String)

JMenuItem add (JMenuItem) JMenuItem add (String) void addSeparator ()

JMenuItem insert (JMenuItem, int) void insert (String, int) void insertSeparator(int)


Menu Items

•  Terminal components of the menu, with actions associated with them

•  Creating menu items (w/ Strings, Icons) JMenuItem() JMenuItem(S) JMenuItem(I) JMenuItem(S,I)

JCheckBoxMenuItem() JCheckBoxMenuItem(S) JCheckBoxMenuItem(I) JCheckBoxMenuItem(S,I)

JRadioButtonMenuItem() JRadioButtonMenuItem(S) JRadioButtonMenuItem(I) JRadioButtonMenuItem(S,I)


Menu Items

•  How do you handle menu item events? (this is, when the item is selected)

•  Remember, menu items are buttons — treat them that way!

•  So then… –  JMenuItem --> action listener –  JRadioButtonMenuItem --> action listener –  JCheckBoxMenuItem --> item listener


Menu Items

•  Adding keys to items –  Mnemonics : keys that navigate

menus, only visible components

–  Accelerators : keys that provide shortcuts directly to function, visible or not

void setAccelerator (KeyStroke)

void setMnemonic (int)


MenuDemo.java

menuBar = new JMenuBar(); setJMenuBar(menuBar);

menu = new JMenu("A Menu"); menu.setMnemonic(KeyEvent.VK_A); menu.getAccessibleContext().setAccessibleDescription( "The only menu in this program that has menu items"); menuBar.add(menu);

menuItem = new JMenuItem("A text-only menu item", KeyEvent.VK_T); menuItem.setAccelerator(KeyStroke.getKeyStroke( KeyEvent.VK_1, ActionEvent.ALT_MASK)); menuItem.getAccessibleContext().setAccessibleDescription( "This doesn't really do anything"); menu.add(menuItem);

menuItem = new JMenuItem("Both text and icon", new ImageIcon("images/middle.gif")); menuItem.setMnemonic(KeyEvent.VK_B); menu.add(menuItem);

create menu bar

create menu, with “A” mnemonic

more menu items

…


MenuDemo.java

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); menu.add(rbMenuItem);

menu.addSeparator(); cbMenuItem = new JCheckBoxMenuItem ("A check box menu item"); cbMenuItem.setMnemonic(KeyEvent.VK_C); menu.add(cbMenuItem);

add separator

create radio button menu items

w/ button group

create check box

menu items


MenuDemo.java

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);

menu = new JMenu("Another Menu"); menu.setMnemonic(KeyEvent.VK_N); menu.getAccessibleContext().setAccessibleDescription( "This menu does nothing"); menuBar.add(menu);

add submenu

add items to submenu

add second menu in bar (no items!)


Pop-Up Menus

•  Menu that can be brought up anywhere on a “registered” component (frame, button, …)

•  Menus actually use pop-ups to show items!


Menu layout ?!?

•  You can even (gasp!) lay out the menu –  putting glue in the menu bar

(ok, this I can see)

–  changing the layout of the menu bar / items (please don’t try this at home)


Text components

•  GUIs may be graphical, but TEXT still forms the core of many interactions –  reading text: help manuals, web pages, … –  writing text: word processing, email, …

•  Some text comes in short bursts, some comes in long passages


Swing text components

•  Text controls –  limited amount of information, then action (?)

•  Plain text areas –  unformatted text of unlimited length

•  Styled text areas –  display, edit text of many styles


Text component components

•  What does a text component consist of? –  model / document : stores textual content –  view : displays text –  controller / “editor kit” : implements editing

capabilities for read/write –  keymap : binds keys to actions –  support for undo/redo, carets


Text model / document

•  Text components = View Document = Model

•  The document ... –  contains text in logical structure

(paragraphs, styles, etc.) –  provides low-level support for editing text with

insert and remove –  notifies document & undo listeners of changes –  manages position of focus (e.g., cursor) –  allows retrieval of text information / properties

Remember lists?


Text editor kit

•  Functionality for editing - inserting, deleting, cutting, pasting, … –  e.g., move to next word/para/page, select … –  stored as Swing “Action”s

•  All text components have them, but you can’t always get at them –  e.g., text fields

•  Built-in Swing editors –  DefaultEditorKit : plain text –  HTMLEditorKit : HTML –  RTFEditorKit : RTF


Text keymaps

•  Associate keys with actions –  classes: Keystroke --> Action –  e.g., “Cmd-C” --> “copy”

•  By default, text components use JTextComponent.DEFAULT_KEYMAP


Text component example


Text & password fields

•  Text field

•  Password field

JTextField textField = new JTextField(10); textField.setActionCommand(textFieldString); textField.addActionListener(this);

public void actionPerformed(ActionEvent e) { String prefix = "You typed \""; if (e.getActionCommand().equals(textFieldString)) { JTextField source = (JTextField)e.getSource(); actionLabel.setText(prefix + source.getText() + "\""); } else { JPasswordField source = (JPasswordField)e.getSource(); actionLabel.setText(prefix + new String(source.getPassword()) + "\""); } }

JPasswordField passwordField = new JPasswordField(10); passwordField.setActionCommand(passwordFieldString); passwordField.addActionListener(this);


Plain text area

•  Create & initialize (if desired)

•  Set properties (note single font/style)

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)); textArea.setLineWrap(true); textArea.setWrapStyleWord(true);


Plain text area

•  Setting scrollbars –  we haven’t really done this yet, but… –  use an intermediate-level “scroll pane”

JScrollPane areaScrollPane = new JScrollPane(textArea); areaScrollPane.setVerticalScrollBarPolicy( JScrollPane.VERTICAL_SCROLLBAR_ALWAYS); areaScrollPane.setPreferredSize(new Dimension(250, 250)); areaScrollPane.setBorder(...create border...);


Styled text area

•  Creating an uneditable “editor pane” (huh?) linked to a URL page

JEditorPane editorPane = new JEditorPane(); editorPane.setEditable(false); ...//create a URL object for the TextSamplerDemoHelp.html file... try { editorPane.setPage(url); } catch (IOException e) { System.err.println("Attempted to read a bad URL: " + url); }


Validated text field

•  Enforce a particular format on text –  e.g., for numbers, dates, times, etc.

•  Two types of validation –  action-validated : check only on action event

(i.e., user presses Return) –  change-validated : check continually, thus never

allowing invalid data


Validated text field

•  FormattedTextFieldDemo.java amountFormat = NumberFormat.getNumberInstance(); amountField = new JFormattedTextField(amountFormat); amountField.setValue(new Double(amount)); amountField.setColumns(10);

percentFormat = NumberFormat.getNumberInstance(); percentFormat.setMinimumFractionDigits (2); rateField = new JFormattedTextField (percentFormat); rateField.setValue(new Double(rate)); rateField.setColumns(10);

numPeriodsField = new JFormattedTextField (); numPeriodsField.setValue (new Integer(numPeriods)); numPeriodsField.setColumns (10);

paymentFormat = NumberFormat.getCurrencyInstance(); paymentField = new JFormattedTextField (paymentFormat); paymentField.setValue (new Double(payment)); paymentField.setColumns (10); paymentField.setEditable (false); paymentField.setForeground (Color.red);


Panels

•  As we’ve seen…

–  don’t really do anything –  logical groupings for layouts,

with optional borders / labels


Panel borders

•  Various types of borders


Panel borders

•  Creating with BorderFactory –  empty borders (for spacing)

–  line border

–  other types… etched = BorderFactory.createEtchedBorder(); raisedbevel = BorderFactory.createRaisedBevelBorder(); loweredbevel = BorderFactory.createLoweredBevelBorder(); empty = BorderFactory.createEmptyBorder(); … titledcenter = BorderFactory.createTitledBorder (blackline, "title"); title2.setTitleJustification(TitledBorder.CENTER);

Border blackline = BorderFactory.createLineBorder(Color.black); component.setBorder(blackline);

Border spacer = BorderFactory.createEmptyBorder (top, left, bottom, right); component.setBorder (spacer);

actually, apply to any components!


Scroll panes

•  Sometimes, components are too big to display in whole

•  So add scrollbars!


JScrollPane

•  Constructors

•  Scrollbar policies

•  Note: typically don’t create scrollbars and viewport — all taken care of!

JScrollPane(Component view) JScrollPane(Component view, int vsbPolicy, int hsbPolicy)

HORIZONTAL_SCROLLBAR_AS_NEEDED HORIZONTAL_SCROLLBAR_ALWAYS HORIZONTAL_SCROLLBAR_NEVER

VERTICAL_SCROLLBAR_AS_NEEDED VERTICAL_SCROLLBAR_ALWAYS VERTICAL_SCROLLBAR_NEVER


Scroll pane features

•  Customizing row/column headers

Swing Rule

components


Scroll pane features

•  Being “scrolling-savvy” –  must implement Scrollable interface

getScrollableBlockIncrement getScrollableUnitIncrement getPreferredScrollableViewportSize getScrollableTracksViewportHeight getScrollableTracksViewportWidth

e.g. lists

tables trees text


Split panes

•  Two related panes, limited screen area

–  often, one pane for selecting, second pane for viewing selection

–  often, both panes are scroll panes


JSplitPane

•  Example splitPane = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT, listScrollPane, pictureScrollPane); splitPane.setOneTouchExpandable(true); splitPane.setDividerLocation(150);

(Be afraid. Be very afraid.)


Split pane nesting

•  Can create hierarchical split panes, just like all panels

(Ok, better.)


Tabbed panes

•  Panes that share the same space –  panes components

appear, disappear with selection

•  Each pane has a logical grouping of functions –  lots of functions –  small space


JTabbedPane

•  Example

•  Similar in functionality to card layout

ImageIcon icon = new ImageIcon("images/middle.gif"); JTabbedPane tabbedPane = new JTabbedPane(); Component panel1 = makeTextPanel("Blah"); tabbedPane.addTab("One", icon, panel1, "Does nothing"); tabbedPane.setSelectedIndex(0); Component panel2 = makeTextPanel("Blah blah"); tabbedPane.addTab("Two", icon, panel2, "Does twice as much nothing"); ...


Toolbars

•  Provide quick & easy access to functions –  often implement same

functions as menus –  often are buttons,

but don’t have to be –  often have iconic

representations

•  Flexible layout and positioning –  attached vs. floating


JToolBar

•  Construct toolbar

•  Create panel with BorderLayout •  Add main panel to center,

toolbar to one of outside areas

JToolBar toolBar = new JToolBar(); button = new JButton(new ImageIcon("images/left.gif")); toolBar.add(button); button = new JButton(new ImageIcon("images/middle.gif")); toolBar.add(button); ...

contentPane.setLayout(new BorderLayout()); contentPane.add(toolBar, BorderLayout.NORTH); contentPane.add(scrollPane, BorderLayout.CENTER);


JToolBar

•  Swing handles the rest! –  user can drag toolbar to other BorderLayout area

–  user can drag toolbar out to create floating bar

toolBar.setFloatable (true);


Toolbars with shared actions

•  Swing Action class –  define Action, assign to multiple components

•  e.g., assign “Paste” to menu item and toolbar button

–  features of an Action •  text and icon •  action listener •  various other associated states

–  why bother with an Action? •  single action listener for all components •  centralized text, icon •  centralized “enabled” state, tool tip, etc.


Toolbars with shared actions

•  Action example leftAction = new AbstractAction("Go left", new ImageIcon("images/left.gif")) { public void actionPerformed(ActionEvent e) { displayResult("Action for first button/menu item", e); } }; button = toolBar.add (leftAction); button.setText (""); // an icon-only button button.setToolTipText ("This is the left button"); menuItem = mainMenu.add (leftAction); menuItem.setIcon (null); // arbitrarily, no icon in menu …

leftAction.setEnabled (selected);


Internal frames / windows

•  Provides one way to open multiple frames within a single parent frame –  design advantages? disadvantages?

iconified

normal


JInternalFrame

•  Construct internal frame

•  Create desktop for main frame, add internal frame

InternalFrame intFrame = new InternalFrame(); //...Create the GUI and put it in the frame... //...Then set the window size or call pack... //...and set the window's location. intFrame.setLocation (xOffset*openFrameCount, yOffset*openFrameCount); intFrame.setVisible (true);

desktop = new JDesktopPane(); desktop.add (intFrame); frame.setContentPane (desktop); ... desktop.setDragMode (JDesktopPane.OUTLINE_DRAG_MODE); //1.3 code

Dialogs

•  Dependent on a frame — if parent frame dies, so does the dialog

•  Two basic types –  modal: blocks all

other user input •  errors, alerts, …

–  non-modal: can still interact with main frame


JDialog

•  For non-modal (modeless) dialogs, must create JDialog directly and build frames

•  But for your typical modal dialog uses, Swing’s built-in dialogs will do fine


JOptionPane

•  Useful standard modal dialog

question information

warning error JOptionPane.showMessageDialog (frame, "Eggs aren't supposed to be green.");

int n = JOptionPane.showConfirmDialog( frame, "Would you like green eggs and ham?", "An Inane Question", JOptionPane.YES_NO_OPTION);


Overall program structure

•  One good style to follow... public class MyWindow extends JFrame {

<< instance variables for our window frame >>

MyWindow () { super (<<name>>); << create all components and add to frame >> }

class <<MyListener>> implements <<ListenerInterface>> { … } class <<MyListener>> implements <<ListenerInterface>> { … } …

public static void main(String s[]) { JFrame frame = new MyWindow (); << add frame listeners >> << finish and display frame >> }

}


Finally!

•  We’re done the Swing components! Or at least the ones we’ll be looking at.

•  Still ones we haven’t discussed, like … –  JApplet top-level container –  JLayeredPane intermediate container –  etc.

•  Make use of Sun’s Java Swing web site and any of numerous Java & Swing books

cs338-l4 - drexel ccidavid/classes/cs338/lectures/cs338-l4.pdfpage 5 cs 338: graphical user...

Documents