CMSC 341 Building Java GUIs Why Java GUI Development Course is about Data Structures not GUIs We are giving you the opportunity to do extra credit and have some fun on the project GUIs are a good example of Object Oriented Programming GUIs are another example of a container 09 26 2007 CMSC 341 GUI 2 Java and GUIs There are two packages that generate GUI components in Java The AWT Abstract Windows Toolkit java awt javax swing Came first No platform independence Swing Part of Java Foundation Classes released with Java 2 Built on top of the AWT Offers platform independence 09 26 2007 CMSC 341 GUI 3 Containers In Java all GUI objects go into a Container A top level container can stand alone in a web browser or in an operating system JFrame JApplet Some containers may only be added to other containers JPanel 09 26 2007 CMSC 341 GUI 4 JFrame Methods add Object adds objects to the frame setVisible boolean makes the frame visible setLocation int x int y aligns top left corner of frame with coordinates on screen setSize int width int height sets size of frame in pixels setDefaultCloseOperation Windows const ants EXIT ON CLOSE 09 26 2007 CMSC 341 GUI 5 JFrame Code import javax swing import java awt public class UpperCaseConverter extends JFrame public UpperCaseConverter String name Constructor sets the super name title size and location setLocation 300 100 of the JFrame setSize 400 300 setDefaultCloseOperation WindowConstants EXIT ON CLOSE Makes program end when window is closed public static void main String args UpperCaseConverter ucc new UpperCaseConverter Convert to Upper Case ucc setVisible true Instantiates JFrame 09 26 2007 and makes it visible CMSC 341 GUI 6 JFrame Example The code on the previous page renders the following 09 26 2007 CMSC 341 GUI 7 LayoutManagers Every container has an underlying default LayoutManager The LayoutManager determines the size of the objects in the container and how the objects will be laid out The default LayoutManager for a JFrame is a BorderLayout 09 26 2007 CMSC 341 GUI 8 BorderLayout Divides container into five regions BorderLayout NORTH BorderLayout SOUTH BorderLayout CENTER BorderLayout EAST BorderLayout WEST One component per region Component takes size of region Center region is greedy Components are added to center by default 09 26 2007 CMSC 341 GUI 9 BorderLayout Code import java awt Specialized add import javax swing method for adding public class BorderLayoutExample extends JFrame to regions public BorderLayoutExample String name super name setSize 300 300 add new JButton North BorderLayout NORTH add new JButton South BorderLayout SOUTH add new JButton East BorderLayout EAST add new JButton West BorderLayout WEST add new JButton Center BorderLayout CENTER public static void main String args BorderLayoutExample b new BorderLayoutExample BorderLayoutExample b setVisible true 09 26 2007 CMSC 341 GUI 10 BorderLayoutExample 09 26 2007 CMSC 341 GUI 11 JPanel However we want to put several buttons in the North region of the GUI but BorderLayout only allows one component per region Add a second level container like a JPanel JPanels have a FlowLayout manager by default 09 26 2007 CMSC 341 GUI 12 FlowLayout Lays components in a fluid direction as determined by its orientation By default orientation is L R T B Possible to set the horizontal and vertical width between components Components take preferred size For buttons preferred size is the size of the text within them 09 26 2007 CMSC 341 GUI 13 JPanel and FlowLayout Code omitting code here from previous example public class UpperCaseConverter extends JFrame Since we are expecting to make these components to react to user interaction we make them object data JButton upper JButton clear public UpperCaseConverter String name omitting code here from previous example JPanel top top new JPanel upper new JButton UPPER clear new JButton CLEAR top add upper top add clear add top BorderLayout NORTH omitting code here from previous example 09 26 2007 CMSC 341 GUI 14 JPanel and FlowLayout Example Code on previous page renders as follows But we also need a text field to enter text 09 26 2007 CMSC 341 GUI 15 Second JPanel public class UpperCaseConverter extends JFrame code omitted from previous example JTextField input public UpperCaseConverter String name code omitted from previous example JPanel bottom new JPanel JLabel label new JLabel Enter text input new JTextField 20 bottom add label bottom add input add bottom BorderLayout SOUTH code omitted from previous example JLabel may also take an Icon or both a String and Icon in its constructor JTextField takes an int which indicates the number of characters to be displayed 09 26 2007 CMSC 341 GUI 16 Second JPanel Example How would we add a JTextArea to the center of our frame 09 26 2007 CMSC 341 GUI 17 JTextArea Add JTextArea reference to object data so that it can be referenced by all member methods Instantiate JTextArea reference in constructor method and add reference to the center of the JFrame JTextArea output Declare outside of methods so object data output new JTextArea 10 20 add output 09 26 2007 CMSC 341 GUI Constructor for JTextArea takes number of rows and columns 18 JTextArea Example Next time we will make this GUI functional 09 26 2007 CMSC 341 GUI 19 JComponent Methods There exists several JComponent methods that allow you to change the look of a component setBackground Color Values for all the arguments setForeground Color of these methods are already defined in Java setFont Font setPreferredSize Dimension setAlignmentX float setAlignmentY float 09 26 2007 CMSC 341 GUI 20 More LayoutManagers Seven Basic Layout Managers in Java BorderLayout BoxLayout CardLayout FlowLayout GridLayout GridBagLayout OverlayLayout We will only focus on two more of these GridLayout BoxLayout 09 26 2007 CMSC 341 GUI 21 GridLayout Creates a grid with number of rows and columns given in the constructor One component per cell Cells of equal size Component take the size of the cell 09 26 2007 CMSC 341 GUI 22 GridLayout Code import java awt import javax swing public class ButtonGrid extends JFrame public ButtonGrid super Button Grid Example setLayout new GridLayout 3 2 setSize 300 400 add new JButton 1 add new JButton 2 add new JButton 3 add new JButton 4 add new JButton 5 add new JButton 6 public static void main String arg ButtonGrid bg new ButtonGrid bg setVisible true 09 26 2007 CMSC 341 GUI The setLayout method changes a container s LayoutManager Compare the order in