Basics of GUI - Web Design and Development - Lecture Slides, Slides of Web Design and Development

Download Basics of GUI - Web Design and Development - Lecture Slides and more Slides Web Design and Development in PDF only on Docsity! Web Design & Development Lecture 10 Docsity.com Basics of GUI Docsity.com 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 – TextField, JTextFiled – Label, JLabel – and many more…. • Use Java API Documentation well, its your FRIEND. Docsity.com 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 Docsity.com 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 Docsity.com GUI Creation Steps 1. import required package – e.g. swing, awt 2. Setup the top level container – e.g. JFrame myframe = new JFrame(); Docsity.com GUI Creation Steps (cont.) 3. Get the component Area of the top level Container Container c = myFrame.getContentPane(); System Area Component Area Docsity.com GUI Creation Steps (cont.) 4. Apply layout to that Area – c.setLayout(new FlowLayout()); 5. Create & add components – JButton b1 = new JButton(“Hello”); – c.add(b1); 6. Set size of Frame and make it Visible – myFrame.setSize(200,200); – myFrame.setVisible(true); Docsity.com GUI: Example Code (cont.) //Step 5: create & add components JTextField tf = new JTextField(10); JButton b1 = new JButton("My Button"); c.add(tf); c.add(b1); //Step 6: set size of frame and make it visible myFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); myFrame.setSize(200,150); myFrame.setVisible(true); } //end init method public GUITest () { // constructor initGUI (); } ……… Docsity.com GUI: Example Code (cont.) public static void main (String args[ ]) { GUITest gui = new GUITest(); } } // end of class Docsity.com Compile & Execute Docsity.com 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 Docsity.com Layout Managers • Layout Managers – Java supplies many layout managers. Five commonly used are:  FlowLayout  GridLayout  BorderLayout  BoxLayout  GridBagLayout Docsity.com Layout Managers • Layout Managers – FlowLayout • 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. Docsity.com GUI: Example Code GridLayout …. c.setLayout (new GridLayout(3 , 2) ); JButton b1 = new JButton(“Next Slide”); JButton b2 = new JButton(“Previous Slide”); JButton b3 = new JButton(“Back to Start”); JButton b4 = new JButton(“Last Slide”); JButton b5 = new JButton(“Exit”); c.add(b1); c.add(b2); c.add(b3); c.add(b4); c.add(b5); …… } Docsity.com GUI: Example Code GridLayout …. c.setLayout (new GridLayout(3 , 2, 10, 20 ) ); JButton b1 = new JButton(“Next Slide”); JButton b2 = new JButton(“Previous Slide”); JButton b3 = new JButton(“Back to Start”); JButton b4 = new JButton(“Last Slide”); JButton b5 = new JButton(“Exit”); c.add(b1); c.add(b2); c.add(b3); c.add(b4); c.add(b5); size(200, 200) }//end of main } Extra space between the cells Docsity.com Layout Managers • Layout Managers – BorderLayout • 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 SOUTH CENTER EAST WEST Docsity.com Making Your own Calculator Docsity.com Calculator GUI Docsity.com Code: CalculatorGUI import java.awt.*; import javax.swing.*; public class CalculatorGUI { JFrame fCalc; JButton b1, b2, b3, b4, b5, b6, b7, b8, b9, b0; JButton bPlus, bMinus, bMul, bPoint, bEqual, bClear; JPanel pButtons; JTextField tfAnswer; JLabel lMyCalc; Docsity.com Code: CalculatorGUI (cont.) pButtons.add(b7); pButtons.add(b8); pButtons.add(b9); pButtons.add(bMinus); pButtons.add(b0); pButtons.add(bPoint); pButtons.add(bPlus); pButtons.add(bEqual); Container con = fCalc.getContentPane(); con.setLayout(new BorderLayout()); //adding components to container con.add(tfAnswer, BorderLayout.NORTH); con.add(lMyCalc, BorderLayout.SOUTH); con.add(pButtons, BorderLayout.CENTER); fCalc.setSize(300, 300); fCalc.setVisible(true); } // end of initGUI method …….. Docsity.com Code: CalculatorGUI (cont.) //default constructor public CalculatorGUI ( ) { initGUI(); } //main method public static void main(String args[ ]) { CalculatorGUI calGUI = new CalculatorGUI(); } } //end of class Docsity.com More Swing Components • JCheckBox – Note uppercase B (vs. Checkbox in AWT) • JRadioButton – Use a ButtonGroup to link radio buttons • JTextArea – Place in JScrollPane if you want scrolling • JFileChooser Docsity.com