Eric Roberts Handout #61CS 106A March 3, 2010Building GUIsBuilding GUIsEric RobertsCS 106AMarch 3, 2010Renaissance Engineers and the Mac GUI• The graphical user interface onthe Macintosh was designed bya group of young engineers atApple who helped usher in arevolution in interface design.Renaissance Engineers and the Mac GUIFrom left, Andy Hertzfeld, Chris Espinoza, Joanna Hoffman, George Crowe, Bill Atkinson, Jerry Manock. Renaissance Engineers and the Mac GUI• The graphical user interface onthe Macintosh was designed bya group of young engineers atApple who helped usher in arevolution in interface design.• The Macintosh team brought aneclectic combination of skillsand passions to their work thatextended beyond their technicalstrengths in programming: JefRaskin was a musician, JoannaHoffman was a physicist and anarchaeologist, Jerry Manockwas a specialist in industrialdesign, and Bill was (and is) aserious artistic photographer.Managing Component Layout• In FacePamphlet 2.0, the interactors live in control strips oneach side of the window. Although using control stripsmakes sense for simple applications, creating a moresophisticated user interface requires you to be able to placeinteractors anywhere inside a window.• Arranging interactors to form an elegant, easy-to-use interfaceis a difficult design challenge. One of the factors thatcomplicates the design is the fact that the size of the programwindow can change over time. A layout that makes sense fora large window may not be appropriate for a small one.• Java seeks to solve the problem of changing window size byusing layout managers, which are responsible for arranginginteractors and other components when the windows thatcontain them change size.Components and Containers• Understanding how layout managers work is significantlyeasier if you first understand the relationship between twoclasses—Component and Container—that are fundamentalto Java’s windowing system.•The Component class forms the root of Java’s window systemhierarchy in the sense that anything that appears in a windowis a subclass of Component.•The Container class is a subclass of C omponent that cancontain other Components, thereby making it possible to nestcomponents inside structures of arbitrary depth.• As you can see from the hierarchy diagram on the next slide,many of the classes you have seen in the text are subclasses ofboth Component and Container. In particular, all Swinginteractors, the GCanvas class, and the Program class are bothcomponents and containers.– 2 –Classes in the Component HierarchyComponentPanel JComponentContainerWindowGCanvas IOConsoleAppletJAppletProgramJPanel FrameJFrameSwinginteractorclassesLayout Managers• In Java, each Container has a layout manager that takesresponsibility for arranging the components in that container.• The layout manager for a container is invoked automaticallywhen the size of the container changes. Although automaticinvocation is sufficient for most applications, you may atsome point encounter situations in which you need to invokethe layout process by calling validate on the container.• A layout manager uses the following factors to arrange thecomponents in a container:– The specific policy set by the layout manager– The amount of space available in the container– The preferred size of each component– Any constraints specified when a component was addedAssigning a New Layout Manager• You can assign a new layout manager to a Container bycalling the setLayout method with a new layout managerobject that is usually constructed specifically for that purpose.•The Program class overrides the definition of setLayout so itforwards the request to the CENTER region of the programrather than setting the layout for the program itself. Thisstrategy makes it possible to use a control strip even if youcall setLayout.• Although it is possible to write layout managers of your own,you can usually rely on the standard layout managers suppliedwith Java’s libraries. The next few slides describe the built-inBorderLayout, FlowLayout, and GridLayout managers; themore flexible TableLayout manager is covered later in thislecture.The BorderLayout Manager•A BorderLayout manager divides its container into fiveregions, as follows:CENTERNORTHSOUTHWESTEAST•A BorderLayout manager creates the layout by giving theNORTH and SOUTH components their preferred space and thendoing the same for the WEST and EAST components. Anyremaining space is then assigned to the CENTER component.• When you add a component to a container managed by aBorderLayout, you need to specify the region, as incontainer.add(component, BorderLayout.SOUTH);The FlowLayout Manager•The FlowLayout manager is in many ways the simplestmanager to use and is particularly convenient for gettingprograms running quickly.•The FlowLayout manager arranges its components in rowsfrom top to bottom and then from left to right within eachrow. If there is space within the current row for the nextcomponent, the FlowLayout manager puts it there. If not, thelayout manager centers the components on the current rowand starts the next one. The FlowLayout manager also leavesa little space between each component so that the componentsdon’t all run together.• The problem with the FlowLayout manager is that it has noway to make sure that the divisions between the lines come atappropriate places, as illustrated by the example on the nextslide.Limitations of FlowLayout• The following program creates a slider and two labels:• If the program window is wide enough, everything looks fine.public class FlowLayoutSlider extends Program { public void init() { setLayout(new FlowLayout()); add(new JLabel("Small")); add(new JSlider(0, 100, 50)); add(new JLabel("Large")); }}• If, however, you make the program window very narrow, thebreak between the interactors comes at an awkward place.FlowLayoutSliderSmallLarge– 3 –The GridLayout Manager•The GridLayout manager is easiest to illustrate by example.The following init method arranges six buttons in a gridwith two rows and three columns:public void init() { setLayout(new GridLayout(2, 3)); for (int i = 1; i <= 6; i++) { add(new JButton("Button " + i)); }}GridLayoutExampleButton 1 Button 2 Button 3Button 4 Button 5 Button 6• As you can see from the sample run at the bottom of the slide,the buttons are expanded to fill the cell in which they