Chapter 11 Building Graphical User Interfaces Introduction Components
Chapter 11 Building Graphical User Interfaces
Introduction: Components Layout managers Event handling
New classes AWT and Swing: Rewritten classes Classes which are still used AWT: Swing: Frame Button Label Menu. . . JFrame JButton JLabel Jmenu. . .
The Image. Viewer example:
image. Viewer version 0 -1
Creating frame: • First line in creating a swing GUI: frame = new Jframe (“window title”); • Last lines in creating a swing GUI: frame. pack(); frame. set. Visible(“true”);
GUI Components Layout management Event handling
Adding Simple Components: JLabel label = new JLabel(“I am a label. ”); content. Pane. add(label); JButton button = new Jbutton(“ok”); content. Pane. add(button);
Adding Menus: Menu bar Menu Item
Adding Menus: Adding a Menu. Bar: JMenu. Bar menubar = new JMenu. Bar(); Frame. set. JMenu. Bar(menubar); Adding a Menu: JMenu file. Menu = new Jmenu(“File”); Menubar. add(file. Menu); Adding a Menu. Item: JMenu. Item open. Item = new JMenu. Item(“Open”); file. Menu. add(open. Item);
GUI Components Layout management Event handling
Most Important Layout Managers: • Flow. Layout • Border. Layout • Grid. Layout • Box. Layout
Flow. Layout: • Arranges all components sequentially from left to right • It will leave each component at its preferred size, and center them horizontally • If the horizontal space is not enough to fit all components, they wrap around to a second line • The Flow. Layout can also be set to align components left or right
Border. Layout: • Places up to five components in an arranged pattern: one in the center, and one each at the top, bottom, right and left • Each of these positions may be empty, so it may hold less than five components • The five positions are named CENTER, NORTH, SOUTH, EAST and WEST • It is usually used as the main layout manager • When a Border. Layout is resized, the middle component gets stretched in both dimensions. The east and west components change in height but keep their width. The north and south components keep their height and only the width changes
Grid. Layout: • It is used to lay out components in an evenly spaced grid • The numbers of rows and columns can be specified • It will always keep all components at the same size • This can be useful to force buttons, for example, to have the same width. the width of Jbutton instances is initially determined by the text on the button: each button is made just wide enough to display its text. Inserting buttons into a Grid. Layout will result in all buttons being resized to the width of the widest button
Box. Layout: • It lays out multiple components either vertically or horizontally • It will not wrap when resized
Nested containers: • Some of swing components are containers • They can contain multiple other components • Each container has its own layout manager attached • The most used container is the class JPanel • A JPanel can be inserted as a component into the frame’s content pane
Nested containers:
Nested containers: Container content. Pane = frame. get. Content. Pane(); content. Pane. set. Layout(new Border. Layout()); JPanel south. Panel = new JPanel(); south. Panel. set. Layout(new Flow. Layout(Flow. Layout. LEFT)); JButton button 1 = new JButton(); south. Panel. add(button 1); JButton button 2 = new JButton(); south. Panel. add(button 2); JButton button 3 = new Jbutton(); south. Panel. add(button 3); content. Pane. add(south. Panel, Border. Layout. SOUTH);
GUI Components Layout management Event handling
Event Handling: • Some of swing components raise events when something happens • There are different types of event caused by different types of action • When a button is clicked or menu item is selected the component raises an Action. Event • when a mouse is clicked or moved a Mous. Event is raised • When a frame is closed a Window. Event is generated • And many more
Event handling: image. Viewer version 0 -2 2 3 Action. Event: • Exact time of event • State of the modifier keys • Command string • . . .
Event handling: 1 1
: (GUI-3 ﺗﻤﺮیﻦ)ﺗﻤﺮیﻦ . ﻣﻮﺍﺭﺩ ﺯیﺮ ﺭﺍ ﺍﺿﺎﻓﻪ کﻨیﺪ image. Viewer version 0 -2 ﺑﻪ پﺮﻭژﻪ Add another menu item called Save. Add three private methods to your class, named open. File, save. File and quit. Change the action. Performed method so that it calls the corresponding method when a menu item is activated.
Inner classes Class Enclosing. Class { … } class Inner. Class { … }
Inner classes Class Image. Viewer { 2 … class Open. Action. Listener implements Action. Listener { public void action. Performed(Action. Event event) 3 { // perform open action } } } Class Quit. Action. Listener implements Action. LIstener { public void action. Performed(Action. Event event) { // perform quit action } }
Anonymous Inner classes 2 JMenu. Item open. Item = new JMenu. Item(“Open”); open. Item. add. Action. Listener (new Action. Listener() { Public void action. Performed(Action. Evenet e) { open. File(); 1 3 } });
- Slides: 37