Java Swing Components and Layout Managers Ravikiran Janardhana COMP 401: Foundations of Programming UNC – Chapel Hill 1Source: http://dilbert.com/strips/comic/2010-05-14/ 2Demo Code • Download the zipped demo code java-swing-ui.zip in Piazza under Recitation section (Alternative: http://bit.ly/17g106Q) • Create a new Java Project in Eclipse • Extract the zipped demo code • Place all the 3 folders (demo, tictactoe, widgets) in your Project src (source) folder and refresh the project in Eclipse. 3Java Swing • Java Swing is a set of classes that provide powerful and flexible GUI components. • Built on top of Abstract Window Toolkit (AWT) • Swing Components are lightweight • Supports a pluggable look and feel 4Aspects of a UI Component • View – The way that the component looks when rendered on the screen • Controller – The way that the component reacts to the user • Model – The state information associated with the component 5Example – Check Box • Model – whether the box is checked or not • View – how the check box is displayed on the screen • Controller – what to do when a user click’s a check box • Java Swing combines View and Controller into a single entity called UI delegate. So, it uses Model-Delegate architecture. 6MVC 7 Source: http://www.codeproject.com/Articles/17068/A-Practical-Use-of-the-MVC-PatternComponents • Swing Components are derived from the JComponent class • JComponent inherits the AWT classes Container and Component. • All of Swing components are represented by classes defined within the package javax.swing 8Top Level Containers 9 Source: http://docs.oracle.com/javase/tutorial/uiswing/components/toplevel.htmlSwing Components (all) 10 Source: Java The Complete Reference, Seventh EditionAn Honest Confession • I cannot remember every component’s syntax • I always refer to Oracle (previously Sun) documentation and examples while working with Swing • I usually have a framework and I fill the blanks based on the type of UI. 11Let’s build something • Tic Tac Toe – 3 x 3 grid – Players alternate in choosing a slot on the grid – Player wins if he has three slots in a row or column or diagonally – Game is a draw, if all slots are filled and we have no winner 12Design • What does the end product look like ? • Always draw first on the paper / UI design program • Most programmers are good at programming and not UI design (it’s an art) 13UI Mockup 14 The last point in the previous slide is true in my case What Components to use ? • JFrame – drawing sheet • JPanel – container of Components • JButton – to represent 3x3 grid • JLabel – to indicate player turn • How to put everything together ? – Use Layout Managers 15Visual guide to Layout Managers • BorderLayout • BoxLayout 16 Source: http://docs.oracle.com/javase/tutorial/uiswing/layout/visual.htmlVisual guide to Layout Managers • FlowLayout • GridLayout 17 Source: http://docs.oracle.com/javase/tutorial/uiswing/layout/visual.htmlGridBagLayout • Flexible and Complex • Components are placed in grid of row and columns, allowing specified components to span multiple rows or columns • 3x3 Grid • Single label at (0, 3) will span 3 columns 18GridBagLayout • Mockup and Layout match 19 0, 0 1, 0 2, 0 0, 1 1, 1 2, 1 0, 2 1, 2 2, 2 0, 3Steps to build Java Swing UI • Initialize a JFrame • Initialize a JPanel and add it to the JFrame • Add JComponent’s (JButton, JLabel) to the JPanel • Add event handlers to the components and logic to update state 20package demo; import java.awt.Dimension; import javax.swing.JFrame; public class UIDemo { JFrame f; public static void main(String[] args) { UIDemo ui = new UIDemo(); ui.initUI(); } public void initUI(){ //Initialize a new JFrame f = new JFrame(); //Set the size f.setSize(new Dimension(460, 460)); //Set title f.setTitle(“Tic Tac Toe”); //Set visibility f.setVisible(true); //Set default operation on close f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } } Initialize a Jframe (Demo1.java) 21Initialize a JPanel (Demo2.java) 22 public class UIDemo { JFrame f; JPanel p; public void initUI(){ //Initialize a new JFrame f = new JFrame(); //Set the size f.setSize(new Dimension(600, 600)); //Set frame layout (not required here) //f.setLayout(new FlowLayout()); //Initialize a JPanel p = new JPanel(); //Set panel layout p.setLayout(new GridBagLayout()); //Set panel size (not required here) //p.setPreferredSize(new Dimension(460, 460)); //Add the JPanel to the JFrame f.add(p); //Rest of the code as in previous slide … Nothing changed, but there is a JPanel added to the JFrameAdd JButton grid (Demo3.java) 23 b = new JButton[9]; int k = 0; //GridBagLayout constraints GridBagConstraints c = new GridBagConstraints(); for(int i = 0; i < 3; i++){ for(int j = 0; j < 3; j++){ //Used when the component's display area is larger //than the component's requested size to determine //whether and how to resize the component. c.fill = GridBagConstraints.BOTH; //Internal X and Y padding c.ipadx = 10; c.ipady = 10; //Grid position (i, j) c.gridx = i; c.gridy = j; //Weights (0.0 to 1.0) are used to determine how to distribute //space among columns (weightx) and among rows (weighty); //this is important for specifying resizing behavior. c.weightx = 0.5; c.weighty = 0.5; //Set button properties b[k] = new JButton(); //Add button to panel p.add(b[k++], c); } } Source: http://docs.oracle.com/javase/tutorial/uiswing/layout/gridbag.htmlAdd JButton Icon and JLabel (Demo4.java) 24 ImageIcon defaultIcon = new ImageIcon(getClass().getResource("default.png")); for(int i = 0; i < 3; i++){ for(int j = 0; j < 3; j++){ //Rest of the code ….. //Set button properties b[k] = new JButton(); //Set background color b[k].setBackground(Color.WHITE); //Set default icon b[k].setIcon(defaultIcon); //Rest of the code ….. } } //Add the JLabel pStatus = new JLabel("Player 1 (O) turn"); pStatus.setHorizontalAlignment(JLabel.CENTER); pStatus.setFont(new Font("SansSerif", Font.BOLD, 20)); //Constraints c.fill = GridBagConstraints.BOTH; c.gridwidth = 3; c.gridheight = 1; c.ipadx = 10; c.ipady = 10; c.gridx = 0; c.gridy = 3; c.weightx = 0.5; c.weighty = 0.5; p.add(pStatus, c); At (0, 3) (JLabel) the gridWidth