Graphical user interfaces• interfaces are built from components– buttons, labels, text areas, lists, menus, dialogs, ...– canvas: graphics for drawing and image rendering• each component has – properties: size, position, visibility, text, font, color, …– methods: things it will do, e.g., change properties– events: external stimuli it responds to• containers hold components and containers• layout managers control size, placement of objects within a container– some programmable, some purely by drawing– may adapt to changes like reshaping• Swing package (javax.swing): – runs standalone everywhere, can be used on web pages in applets– Google Web Toolkit is similar• other GUI systems are analogous, but with many differencesSwing exampleshttp://java.sun.com/docs/books/tutorial/uiswing/index.htmlComponent object hierarchyObject Component ContainerJComponentJPanelJLabelJButtonJTextComponentJTextFieldJFormattedTextFieldJPasswordFieldJTextAreaJEditorPaneJTextPane• containers hold components & containers, used to build up nested structures– JFrame: top-level window– Jpanel: general container for components & containers– JMenuBar for menubar across top of JFrame– JToolBar for toolbar, possibly floating• individual components like JButton, JText, …– respond to events, have methods for other behaviors– have get and set methods for accessing properties like size, color, fontLayout hierarchy• JFrame holds one or more JPanels• JPanel holds components and other Jpanels• JPanel used for layout– add() method adds components to the panel– panel uses a LayoutManager that lays out components– layout manager can be set to one of severalJPanelJPanelJPanelEvents• stuff happens– mouse motion, button push, button release, …–scrollbar fiddled– keyboard keypress, release, shift key, etc.– component got or lost focus– window iconified, uniconified, hidden, exposed, moved, reshaped, killed– etc.• each such event is passed to event-handling mechanism in the program• program can decide what to do with itEvents in Swing• components register to receive (listen for) events that they areinterested in:JButton jb = new JButton("whatever");jb.addActionListener(this);– tells jb to notify this container when event happensi.e., sets up a callback– usually called by container that contains object that will get the event• a thread watches for events like button push, mouse motion or click, key down or up, …• when event occurs, listener's actionPerformed is called– from component where event occurs (e.g., button instance) when it does • handler determines type or instance that caused event, does appropriate actionactionPerformed(ActionEvent e) { … }• different kinds of listeners for different sources– keyboard, mouse, mouse motion, window, …Example 1: Buttons and labels• after it starts:• after Count button is pushed 3 times:• after Quit button is pushed:Example 1 events, layoutimport java.awt.*; import java.awt.event.*; import javax.swing.*;public class Ex1 extends JFrame implements ActionListener {int count;JLabel lab;JButton bcount, bquit;public static void main(String[] args) {Ex1 a = new Ex1();}Ex1() {setTitle("Ex1");lab = new JLabel("Counter");JPanel p1 = new JPanel(); p1.add(lab);bcount = new JButton("Count", new ImageIcon("new.gif"));bcount.addActionListener(this);bquit = new JButton("Quit");bquit.addActionListener(this);JPanel p2 = new JPanel();p2.add(bcount); p2.add(bquit);getContentPane().setLayout(new BorderLayout());getContentPane().add(p1, BorderLayout.NORTH);getContentPane().add(p2, BorderLayout.SOUTH);pack();setVisible(true); setDefaultCloseOperation(EXIT_ON_CLOSE);}Example 1, continued// the one function of the ActionListener interface:public void actionPerformed(ActionEvent ae) {System.out.println(ae.getActionCommand());if (ae.getActionCommand().equals("Count")) { // by contentcount++;lab.setText(Integer.toString(count));} else if (ae.getSource() == bquit) { // by object nameSystem.exit(0);}}• five steps to set up a GUI component:– declare an object, like Button– create it with new– add it to a container– add an ActionListener to catch events– handle events in actionPerformed• information is spread all over the placeAnonymous inner classes• an unnamed class defined inside another classJLabel label = new JLabel("0");JButton button = new JButton("Lookup");button.addActionListener(new ActionListener() {public void actionPerformed(ActionEvent e) {n++;label.setText(n);}});• equivalent to this, without separate declaration and nameclass foo implements ActionListener {public void actionPerformed(ActionEvent e) {...}}button.addActionListener(new foo());Layout manager approaches• Java– position by imperative code, with 8 standard layout managers– graphical layout by NetBeans IDE• Tk– mostly declarative: position relative to other positioned objects• VB (pre .NET)– mostly draw on a screen: absolute positioning– can modify dynamically by setting properties• C#– drawing objects creates imperative code as side effect– can use either method to do layout• iPhone– Interface Builder mostly drawing on screen– can create objects, position them, etc., by imperative commands• Android– declarative positioning specified in XML– can create objects, position them, etc., by imperative commandsLayout managers in Swing• control container size, position, padding, stretch & shrink, etc., • each container has a default layout manager– set it at creation or change it later with setLayout methodJPanel jp = new JPanel(new BorderLayout());jp.setLayout(new BorderLayout())• FlowLayout– fills area left to right in rows– each row can be centered, left or right adjusted• BorderLayout– fills North, South, East, West, and Center(PAGE_START, PAGE_END, LINE_START, CENTER, LINE_END)• GridLayout– regular array of specified number of rows and columns• CardLayout– multiple windows that all occupy the same space– usually selected with tabs or combo boxes• etc., etc.Flow Layout• default for Panelspublic class Layout1 extends JFrame {public static void main(String[] args) {Layout1 a = new Layout1();a.setTitle("Layout1: flow");JPanel p = new JPanel();p.add(new Button("One"));p.add(new Button("Two "));p.add(new Button("Three"));p.add(new Button("Four"));p.add(new Button("Five"));a.getContentPane().add(p);a.pack();a.setVisible(true);}}Border Layoutpublic class