Graphic User Interfaces Layout Managers Event Handling

Why Do we need Layout Mgrs? What could happen… What should happen… resize

Layout Managers A Layout manager encapsulates an algorithm for positioning and sizing of GUI components –they control the positioning of the components in the container A layout manager must be associated with a Container object to perform its work –layout manager determines the positioning of the components on the Container –JPanel panel = new JPanel(); panel.setLayout(new BorderLayout()); –JPanel panel = new JPanel(new BorderLayout());

Layout Managers LayoutManager is an interface that is implemented by a number of existing classes awt layout managers –FlowLayout –BorderLayout –GridLayout –CardLayout –GridBagLayout –Nice explanation of each type at ox. Look at them!

Borderlayout this layout divides the container into 5 regions, centre, N, S, E and W

Border Layout –arranges components to fit 5 regions, centre, N, S, E and W –default for Java application content pane –can only add one component to each region, so use JPanels pane.add(component, position) BorderLayout.NORTH BorderLayout.SOUTH BorderLayout.EAST BorderLayout.WEST BorderLayout.CENTER

Grid layout

Flow Layout

–arranges components left to right –components are centered by default, but can be changed –Constructors FlowLayout() FlowLayout(int align) FlowLayout(int align, int hdist, int vdist) FlowLayout.RIGHT FlowLayout.LEFT FlowLayout.CENTER C1 C2 C3 C4 C5 C6 vdist hdist

Using Layout Managers You typically have several layouts on a single screen E.g. Flowlayout for a panel containing Cancel/OK buttons Border layout for the content pane of your frame (Add the panel for the cancel, ok buttons to south border region of your frame… What does this look like? How would you get the buttons down into the bottom right corner? To use layouts: assign a layout for whatever is getting a layout (panel for buttons, a frame etc) Then.. Add the individual “things” – specifying the location if necessary (Border layout requires n,s,e,w)

Using Layout Managers private Container createContentPane(){ // set up the content pane to use BorderLayout JPanel cPane = new JPanel(new BorderLayout()); // create panel for text fields JPanel fieldsPanel = new JPanel(); fieldsPanel.setLayout(new FlowLayout()); // add components to panel fieldsPanel.add(new JLabel("Please enter your name: ")); JTextField name= new JTextField("here....", 10); fieldsPanel.add(name); // add panel to center of frame cPane.add(fieldsPanel, BorderLayout.CENTER); // create and add button to bottom of frame ok= new JButton("OK"); cPane.add(ok, BorderLayout.SOUTH); return cPane; } 2 ways to set layout What will this look like ?

Grid Layout –divided into rows and cols GridLayout(int rows, int cols) –each component is given the same size and positioned left to right –you fix the number of rows or cols required, e.g. panel.setLayout(new GridLayout(3,0)) “any number of” a 2 x 4 grid for 5 components will create a 2 x 3 grid (unless you fill the empty ones with spaces

Card layout CardLayout –overlapping panels - same display space –Only one is displayed at a time

More..Layouts BoxLayout –like a Flow with no overlapping, –Single row or column –can be arranged horizontally or vertically Box class –Container that uses a BoxLayout manager –easier than creating a panel and allocating the BoxLayout –Box box = Box.createHorizontalBox(); setContentFrame(box); –Use “glue” and “struts” to maintain sizes when resizing

GridBaglayout GridBagLayout –flexible and sophisticated –place components in a grid of cells –components can span more than one cell –rows can have different widths and columns can have different heights –Avoid!!

Spring layout SpringLayout –flexible –specify precise relationships between edges of components

Event Driven Programming

Developing a GUI uses event driven programming waits for input user input TraditionalEvent Driven

Event Driven Programming Model User interacts with application generating events –pushing mouse button, scrolling, clicking on checkboxes, moving mouse,… Event is trapped and depending on the type of event an appropriate event handler executes Swing event handling and painting executes in a single thread called the event-dispatching thread –ensures each event handler finishes executing before next starts –prevents deadlock

Handling User Interaction Events are triggered by user interaction with components Events are captured by listeners –if and only if the listener is registered with the appropriate component Listener has an event handler that handles the captured event events and listeners are objects event handlers are methods of the Listener object Button ActionListener ActionEvent actionPerformed() invokes

Listeners Listeners are interfaces –Any object can be a listener… Listener objects capture events that occur on components that they are registered with Each Event class has an associated Listener interface Listener objects should implement appropriate event handlers –ActionEvent  ActionListener  actionPerformed() for button presses … –TextEvent  TextListener  textValueChanged() for changing text in text fields

User Interaction Create the appropriate listener object –implement the appropriate listener interface Implement event handler methods for all events that are important –event handler methods are the listener abstract methods that must be implemented to implement the interface Register the listener with the control (component) to allow it to receive events

Interacting with a Button Event is clicking on a button Create listener –appropriate interface is ActionListener –create listener object that implements ActionListener –e.g. class MyActionListener implements ActionListener {…} –instantiate: MyActionListener myListener = new MyActionListener(); Note: there are several ways of creating the listener – more later. Implement event handler – include actionPerformed() method in class that implements ActionListener – class MyActionListener implements ActionListener { … public void actionPerformed(ActionEvent e){…} … } Register listener with button component myButton = new myButton(“whatever”); myButton.addActionListener(myListener);

Let your window be the Listener public class MyWindow extends JFrame implements ActionListener { public MyWindow(){... ok = new JButton("OK"); ok.addActionListener(this); panel.add(ok);... } // event handler public void actionPerformed (ActionEvent e){ System.exit(0); } create Listener register it with the component include an event handler

Listener Interfaces… User action that results in EventListener that handles it User clicks a button, presses Enter whileActionListener typing in a text field, chooses a menu item User closes a frame (main window)WindowListener User presses a mouse button while overMouseListener a Component User moves the mouse over a componentMouseMotionListener Component gets the keyboard focusFocusListener Table or list selection changesListSelectionListener Any property in a component changes,PropertyChangeListener such as the text on a button

Summary Last topic allowed - set up a frame with components This topic gives you enough info to.. –Specify a layout for the content (and various panels) within your window –“do something” when a component is used (e.g. Button click) Implement a listener interface e.g. –public class MyWindow extends JFrame implements ActionListener Add the listener to a component e.g. –ok = new JButton("OK"); ok.addActionListener(this); Implement the method for what should happen e.g. –public void actionPerformed (ActionEvent e){... Some code that does something..