Web Design Development Lecture 10 Basics of GUI

Web Design & Development Lecture 10

Basics of GUI

GUI ?

Support for GUI in Java

Support for GUI • Abstract Windowing Toolkit (AWT) & Swing packages – Provides rich set of user interface components – java. awt & javax. swing – Old (AWT) VS. New(Swing) • Components in awt & swing (start with J) – – – Frame, JFrame Menu, JMenu Button, JButton Text. Field, JText. Filed Label, JLabel and many more…. • Use Java API Documentation well, its your FRIEND.

Abstract Windowing Toolkit • AWT – The original GUI components – Referred as “Heavy Weight Components (HWC)” • Tied directly to the local platform’s GUI capabilities – Provides • robust event-handling model • Layout Managers

Swing • Swing – Newest GUI components, Names start with J can be identified – “replacement” to the AWT – Referred as “Light Weight Components (LWC)” • Swing components are written, manipulated and displayed completely in java • So they are not “weighed down” by the GUI capabilities of local platform – Several Swing components are still HWC like JFrame etc. – Allows uniform “look & feel” across all platforms

A Part of the Framework Object Component Container JComponent Abstract. Button JButton Window JPanel Frame JFrame

GUI Creation Steps

GUI Creation Steps 1. import required package – e. g. swing, awt 2. Setup the top level container – e. g. JFrame myframe = new JFrame();

GUI Creation Steps (cont. ) System Area 3. Get the component Area of the top level Container c = my. Frame. get. Content. Pane(); Component Area

GUI Creation Steps (cont. ) 4. Apply layout to that Area – c. set. Layout(new Flow. Layout()); 5. Create & add components – JButton b 1 = new JButton(“Hello”); – c. add(b 1); 6. Set size of Frame and make it Visible – my. Frame. set. Size(200, 200); – my. Frame. set. Visible(true);

Example GUI

GUI: Example Code //Step 1: import packages import java. awt. *; import javax. swing. *; public class GUITest { JFrame my. Frame ; JText. Field tf; JButton b 1; public void init. GUI ( ) { //method used for setting layout of GUI //Step 2: setup the top level container my. Frame = new JFrame(); //Step 3: Get the component area of top-level container Container c = my. Frame. get. Content. Pane(); //Step 4: Apply layouts c. set. Layout( new Flow. Layout( ) ); ….

GUI: Example Code (cont. ) //Step 5: create & add components JText. Field tf = new JText. Field(10); JButton b 1 = new JButton("My Button"); c. add(tf); c. add(b 1); //Step 6: set size of frame and make it visible my. Frame. set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); my. Frame. set. Size(200, 150); my. Frame. set. Visible(true); } //end init method public GUITest () { // constructor init. GUI (); } ………

GUI: Example Code (cont. ) public static void main (String args[ ]) { GUITest gui = new GUITest(); } } // end of class

Compile & Execute

GUI Creation Approaches Composition class GUITest{ Inheritance class GUITest extends JFrame{ JFrame frame; Container c; public GUITest ( ) { frame = new JFrame ( ); } cc==frame. get. Content. Pane(); cc==get. Content. Pane(); …… …… frame. set. Visible(true); } } ……… }

Layout Managers

Layout Managers – The layout of components in a container is usually governed by layout managers – Similar to HTML – policy, not position • Do not set explicit pixel sizes or positions of things • Layout Managers know the intent (policy) • Layout Managers apply the intent to figure out the correct size on the fly

Layout Managers • Layout Managers – Java supplies many layout managers. Five commonly used are: § Flow. Layout § Grid. Layout § Border. Layout § Box. Layout § Grid. Bag. Layout

Layout Managers • Layout Managers – Flow. Layout • Places components in a line as long as they fit, then starts the next line. • Uses “best judgement” in spacing components. Centers by default. • Lets each component assume its natural (preferred) size. • Often used for placing buttons on panels.

GUI: Example Code Flow. Layout …. c. set. Layout (new Flow. Layout() ); JButton JButton b 1 = b 2 = b 3 = b 4 = b 5 = c. add(b 1); c. add(b 2); c. add(b 3); c. add(b 4); c. add(b 5); }//end of main } new JButton(“Next Slide”); new JButton(“Previous Slide”); new JButton(“Back to Start”); new JButton(“Last Slide”); new JButton(“Exit”);

Layout Managers • Layout Managers – Grid. Layout • Splits the panel into a grid with given number of rows and columns. • Places components into the grid cells. • Forces the size of each component to occupy the whole cell. • Allows additional spacing between cells.

GUI: Example Code Grid. Layout …. c. set. Layout (new Grid. Layout(3 , 2) ); JButton JButton b 1 = b 2 = b 3 = b 4 = b 5 = c. add(b 1); c. add(b 2); c. add(b 3); c. add(b 4); c. add(b 5); …… } new JButton(“Next Slide”); new JButton(“Previous Slide”); new JButton(“Back to Start”); new JButton(“Last Slide”); new JButton(“Exit”);

GUI: Example Code Grid. Layout …. c. set. Layout (new Grid. Layout(3 , 2, 10, 20 ) ); JButton JButton b 1 = b 2 = b 3 = b 4 = b 5 = new JButton(“Next Slide”); new JButton(“Previous Slide”); new JButton(“Back to Start”); new JButton(“Last Slide”); new JButton(“Exit”); c. add(b 1); c. add(b 2); c. add(b 3); c. add(b 4); c. add(b 5); size(200, 200) }//end of main } Extra space between the cells

Layout Managers • Layout Managers – Border. Layout • Divides the area into five regions • Adds a component to the specified region • Forces the size of each component to occupy the whole region. NORTH WEST CENTER SOUTH EAST

GUI: Example Code Border. Layout …. c. set. Layout (new Border. Layout( ) ); JButton JButton b 1 = b 2 = b 3 = b 4 = b 5 = new JButton(“Next Slide”); new JButton(“Previous Slide”); new JButton(“Back to Start”); new JButton(“Last Slide”); new JButton(“Exit”); c. add(b 1, Border. Layout. NORTH); c. add(b 2, Border. Layout. SOUTH); c. add(b 3, Border. Layout. EAST); c. add(b 4, Border. Layout. WEST); c. add(b 5, Border. Layout. CENTER); }//end of main }

Layout Managers • Layout Managers – Default Layouts • Each container has a default layout manager, which remains in effect until the component’s set. Layout method is called. – Some of the defaults are: • Content pane Border. Layout • JPanel Flow. Layouts

Making Your own Calculator

Calculator GUI

Code: Calculator. GUI import java. awt. *; import javax. swing. *; public class Calculator. GUI { JFrame f. Calc; JButton b 1, b 2, b 3, b 4, b 5, b 6, b 7, b 8, b 9, b 0; JButton b. Plus, b. Minus, b. Mul, b. Point, b. Equal, b. Clear; JPanel p. Buttons; JText. Field tf. Answer; JLabel l. My. Calc;

Code: Calculator. GUI (cont. ) public void init. GUI ( ) { //used for setting layout of calculator f. Calc = new JFrame(); b 0 b 1 b 2 b 3 b 4 b 5 b 6 b 7 b 8 b 9 = = = = = new JButton("0"); new JButton("1"); new JButton("2"); new JButton("3"); new JButton("4"); new JButton("5"); new JButton("6"); new JButton("7"); new JButton("8"); new JButton("9"); b. Plus b. Minus b. Mul b. Point b. Equal b. Clear = = = new JButton("+"); new JButton("-"); new JButton("*"); new JButton("="); new JButton("C"); // continue….

Code: Calculator. GUI (cont. ) tf. Answer = new JText. Field(); l. My. Calc = new JLabel("My Clacualator"); //creating panel object and setting its layout p. Buttons = new JPanel (new Grid. Layout(4, 4)); //adding components (buttons) to panel p. Buttons. add(b 1); p. Buttons. add(b 2); p. Buttons. add(b 3); p. Buttons. add(b. Clear); p. Buttons. add(b 4); p. Buttons. add(b 5); p. Buttons. add(b 6); p. Buttons. add(b. Mul); //continue

Code: Calculator. GUI (cont. ) p. Buttons. add(b 7); p. Buttons. add(b 8); p. Buttons. add(b 9); p. Buttons. add(b. Minus); p. Buttons. add(b 0); p. Buttons. add(b. Point); p. Buttons. add(b. Plus); p. Buttons. add(b. Equal); Container con = f. Calc. get. Content. Pane(); con. set. Layout(new Border. Layout()); //adding components to container con. add(tf. Answer, Border. Layout. NORTH); con. add(l. My. Calc, Border. Layout. SOUTH); con. add(p. Buttons, Border. Layout. CENTER); f. Calc. set. Size(300, 300); f. Calc. set. Visible(true); } // end of init. GUI method ……. .

Code: Calculator. GUI (cont. ) //default constructor public Calculator. GUI ( ) { init. GUI(); } //main method public static void main(String args[ ]) { Calculator. GUI cal. GUI = new Calculator. GUI(); } } //end of class

More Swing Components • JCheck. Box – Note uppercase B (vs. Checkbox in AWT) • JRadio. Button – Use a Button. Group to link radio buttons • JText. Area – Place in JScroll. Pane if you want scrolling • JFile. Chooser

Swing Components Top Level Containers Your application usually extends one of these classes !

Swing Components • General Purpose Containers