Lecture 6: Components. CS480: Graphical User Interfaces. Dario Salvucci, Drexel University.

Transcription

1 Lecture 6: Components CS480: Graphical User Interfaces. Dario Salvucci, Drexel University. 1

2 Widget Week! 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!

3 Swing components Component hierarchy Top-level Containers (frame, dialog, applet, ) java.awt. Window Intermediate Containers (panel, scroll pane, ) Atomic Components (button, list, menu, ) javax.swing. JComponent today s focus

4 Lists Storage for a list of items typically text, or textual representations of complex objects (e.g., 9:00pm) could also be icons Selection single selection single interval multiple interval

5 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. JList (list view) ListModel (list data) ListModel interface defines methods for dealing with lists index in [0, size-1] Object getelementat (int index) int getsize (); void addlistdatalistener (ListDataListener l);

6 JList Basic constructor String[] data = {"one", "two", "three", "four"}; JList datalist = new JList (data); sets a basic list model that is unchangeable (no insertions/deletions after creation) model created automatically, and you can access it if you want... for (int i = 0; i < datalist.getmodel().getsize(); i++) { System.out.println (datalist.getmodel().getelementat(i)); }

7 JList Constructor with more powerful list model first, create DefaultListModel allows insertions/deletions at any time listmodel = new DefaultListModel(); listmodel.addelement ( Thing1"); listmodel.addelement ( Thing2"); listmodel.addelement ( Thing3"); listmodel.addelement ( Thing4"); listmodel.remove (index); then, create JList based on this list model list = new JList (listmodel);

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

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

10 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...

11 Basic table Simple example 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); Problems: all cells are editable Strings, full array is pre-initialized

12 Table model As for lists, tables have Model vs. View Create model first, then create view with this model MyTableModel mymodel = new MyTableModel(); JTable table = new JTable(myModel); Table models typically extend AbstractTableModel (next slide )

13 Table model 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; } }...

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

15 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

16 Table cells Different editors in one table Text Field Combo Box Check Box

17 Table cells Color chooser as editor

18 Table data manager Provide way of manipulating data in layer between model and view One important, common use: Sorting! CLICK!

19 Trees Lots of data forms 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

20 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

21 Tree model Constructing the model construct root node, as DefaultMutableTreeNode DefaultMutableTreeNode top = new DefaultMutableTreeNode("The Java Series"); can be any Object! construct other nodes & add to parent node category = new DefaultMutableTreeNode ("Books for Java Programmers"); top.add(category); book = new DefaultMutableTreeNode ("The Java Tutorial: Object-Oriented ); category.add(book); finally, construct model with root node treemodel = new DefaultTreeModel(rootNode);

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

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

24 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 leaf handle branch

25 Tree extras Changing view properties node connectors different renderers

26 Useful things to know Components To Check/Set State To Handle Events JButton JCheckBox JRadioButton JComboBox JTextField JSlider JList void setselected (boolean) boolean isselected () void setselected (boolean) boolean isselected () void setselectedindex (int) Object getselecteditem () void settext (String) String gettext () void setvalue(int) int getvalue() void setselectedindex (int) int getselectedindex () ActionListener ItemListener ActionListener ActionListener ActionListener ChangeListener 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]

27 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

28 Swing Menu Components Within the component hierarchy, can contain several types of components

29 Menu Bar Represents the bar of top-level items Creating a menu bar JMenuBar () JMenu add (JMenu) Setting the bar in a frame, applet, etc. void setjmenubar(jmenubar) JMenuBar getjmenubar()

30 Menu Any item in a menu bar or menu that displays more options Creating the menu JMenu () JMenu (String) Adding items (options) to the menu JMenuItem add (JMenuItem) JMenuItem add (String) void addseparator () JMenuItem insert (JMenuItem, int) void insert (String, int) void insertseparator(int)

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

32 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

33 Menu Items Adding keys to items Mnemonics : keys that navigate menus, only visible components void setmnemonic (int) Accelerators : keys that provide shortcuts directly to function, visible or not void setaccelerator (KeyStroke)

34 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

35 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

36 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); add submenu add items to submenu 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 second menu in bar (no items!)

37 Pop-Up Menus Menu that can be brought up anywhere on a registered component (frame, button, ) Menus actually use pop-ups to show items!

38 Menu layout?!? You can even (gasp!) lay out the menu putting glue in the menu bar (bewarned!) changing the layout of the menu bar / items (please don t try this at home)

39 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, , Some text comes in short bursts, some comes in long passages

40 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

41 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

42 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

43 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

44 Text keymaps Associate keys with actions classes: Keystroke --> Action e.g., Cmd-C --> copy By default, text components use JTextComponent.DEFAULT_KEYMAP

45 Text component example

46 Text & password fields Text field JTextField textfield = new JTextField(10); textfield.setactioncommand(textfieldstring); textfield.addactionlistener(this); Password field JPasswordField passwordfield = new JPasswordField(10); passwordfield.setactioncommand(passwordfieldstring); passwordfield.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()) + "\""); } }

47 Plain text area Create & initialize (if desired) 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." ); Set properties (note single font/style) textarea.setfont(new Font("Serif", Font.ITALIC, 16)); textarea.setlinewrap(true); textarea.setwrapstyleword(true);

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

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

50 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

51 Validated text field TextFieldDemo.java NumberFormat moneyformat = NumberFormat.getNumberInstance(); amountfield = new DecimalField(amount, 10, moneyformat); NumberFormat percentformat = NumberFormat.getNumberInstance(); percentformat.setminimumfractiondigits(3); ratefield = new DecimalField(rate, 10, percentformat); numperiodsfield = new WholeNumberField(numPeriods, 10); DecimalFormat paymentformat = (DecimalFormat)NumberFormat.getNumberInstance(); paymentformat.setmaximumfractiondigits(2); paymentformat.setnegativeprefix("("); paymentformat.setnegativesuffix(")"); paymentfield = new DecimalField(payment, 10, paymentformat);

52 Validated text field Side note WholeNumberField, subclass of TextField What might its implementation look like? protected Document createdefaultmodel() { return new WholeNumberDocument(); } protected class WholeNumberDocument extends PlainDocument { public void insertstring(int offs, String str, AttributeSet a) { char[] source = str.tochararray(); char[] result = new char[source.length]; int j = 0; for (int i = 0; i < result.length; i++) { if (Character.isDigit(source[i])) result[j++] = source[i]; else { toolkit.beep(); System.err.println("insertString: " + source[i]); } } super.insertstring(offs, new String(result, 0, j), a); } }

53 Panels As we ve seen don t really do anything logical groupings for layouts, with optional borders / labels

54 Panel borders Various types of borders

55 Scroll panes Sometimes, components are too big to display in whole So add scrollbars!

56 JScrollPane Constructors JScrollPane(Component view) JScrollPane(Component view, int vsbpolicy, int hsbpolicy) Scrollbar policies VERTICAL_SCROLLBAR_AS_NEEDED VERTICAL_SCROLLBAR_ALWAYS VERTICAL_SCROLLBAR_NEVER HORIZONTAL_SCROLLBAR_AS_NEEDED HORIZONTAL_SCROLLBAR_ALWAYS HORIZONTAL_SCROLLBAR_NEVER Note: typically don t create scrollbars and viewport all taken care of!

57 Scroll pane features Customizing row/column headers Swing Rule components

58 Scroll pane features Being scrolling-savvy must implement Scrollable interface getscrollableblockincrement getscrollableunitincrement getpreferredscrollableviewportsize getscrollabletracksviewportheight getscrollabletracksviewportwidth e.g. lists tables trees text

59 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