GUI Components Lecture Notes PDF

1 Lecture 6: Graphical User Interface (GUI) Components: (Part 1 cont..)  2 Outlines 1. Key Event Handling 2. Layout Managers 1.FlowLayout 2.BorderLayout 3.GridLayout 3. Panels  3 Key Event Handling key events are...

1 Lecture 6: Graphical User Interface (GUI) Components: (Part 1 cont..)  2 Outlines 1. Key Event Handling 2. Layout Managers 1.FlowLayout 2.BorderLayout 3.GridLayout 3. Panels  3 Key Event Handling key events are Generated when keys on keyboard are pressed and released  4 Key Event Handling Event Type : keyEvent Implements Interface: KeyListener ‫)  ا ض دث ةحا ة افضإ ة د‬: Add Event (‫لا‬ addKeyListener( handler); Key Event Handling Methods of interface KeyListener (3 Methods): public void keyPressed (‫ض‬KeyEvent event ) Is called in response to pressing any keys public void keyReleased (‫ض‬KeyEvent event ) Is called when the key is released after any keyPressed or keyTyped event public void keyTyped (‫ض‬KeyEvent event ) Is called in response to pressing any key that Have ASCII Code  6 Example(10): Key Event Handling Write a GUI program that display all the Key Event – See the outputs Example(10): 7 import java.awt.*; // step1: import package java.awt for Graphics import javax.swing.*; // step2: import javax.swing for display Jframe import java.awt.event.*; // step3: used to handle GUI Events public class keyDemo extends JFrame implements KeyListener { private String line1 = "", line2 = "", line3 = ""; Use implements private JTextArea textArea; public keyDemo ( ) { super( " Demonstrating Keystroke Events" ); setSize( 350 , 100 ); setVisible( true ); Example(10): 8 textArea = new JTextArea( 10, 15 ); textArea.setText( "Press any key on the keyboard..." ); getContentPane().add( textArea ); addKeyListener( this ); // allow frame to process key events } //end of constructor Example(10): 9 // handle press of an action key Action key ‫ لات م يأ لع غض ا دنع‬// public void keyPressed( KeyEvent event ) { line1 = "Key pressed: " + event.getKeyText( event.getKeyCode() ); setLines2and3( event ); } ‫ا‬ ‫ض اع رت ض‬code‫ض م ال ض متض‬int‫ ا ا ل ض  ل  ا ض‬쓀 ‫ا‬ ‫ا‬ ‫ض‬code‫ض م ال ض متض‬int‫ض  ل  ا ضعدا إبالض ام افض‬焔 Հ ‫اا‬ ‫ح‬ ‫لضاةلض‬焔‫ض م ال ض  افع ضإ لا‬String ‫ح‬ ‫
ا ة ال الضإ اتف ةل‬ keyBoard Example(10): 10 // handle release of any key ‫ لات مل م يأ ام ا دنع اتعم ام غضل م ف ننع ض‬// public void keyReleased ( KeyEvent event ) { line1 = "Key released: " + event.getKeyText( event.getKeyCode() ); setLines2and3( event ); } Example(10): 11 // handle press of any key that is NOT an action key action key ‫ام م اغع ض‬ ‫ لات م يأ لع غض ا دنع ع‬// public void keyTyped ( KeyEvent event ) { line1 = "Key typed: " + event.getKeyChar(); setLines2and3( event ); } ‫ا ة‬ ‫ض م ال ض ملع ةرطض  ةلتض اض رح ةـاضلثمف‬char‫اع رتلض  ل  ا ض‬ Example(10): 12 // set second and third lines of output private void setLines2and3( KeyEvent event ) { line2 = "This key is " + ( event.isActionKey() ? "" : "not " ) + "an action key"; ‫ا‬ ‫اا‬ ‫ضث ة ثضـ ةلاضإحا ة ال الض ةنضض متض‬true‫ض  ل  ا ضعدا إبالض ام افض‬焔 Հ ‫ة‬ ‫ ضض ا اضعلثض ة و ض‬Action Keys false Example(10): 13 String temp = event.getKeyModifiersText( event.getModifiers()); ‫ا‬ ‫ا‬ ‫ا‬ ‫ضث ض ق ام افض‬硐 shift‫ض م ال ا ضة ةق ام افض‬String‫اع رتلض  ل  ا ضض‬ ‫ض م ال ض ق ام افضإح االاعث ا ض
ا ةإح ال الضض‬int‫اع رتلض  ل  ا ضض‬ ‫ا‬ ‫ت‬ ‫ا‬ ‫ي‬ ‫ضإحل ررث ا ض‬int ‫ضث ض ةر ض لاضب حض ق ام افض م‬alt ‫ضث ض‬硐 ctrl ‫لض دث ة ثض اض‬焔‫ضث ض ا‬alt‫ضث ض‬硐 ctrl‫ضث ض‬硐 shift‫ة‬ ‫ثل ا‬ ‫رح ةـاضل
لضث انرض ةنضى ة ال الضا‬ line3 = "Modifier keys pressed: " + ( temp.equals( "" ) ? "none" : temp ); textArea.setText( line1 + "\n" + line2 + "\n" + line3 + "\n" ); } Example(10): 14 public static void main( String args[] ) { // create an object to execute our class keyDemo apps = new keyDemo ( ); // set Close operation of Jframe apps.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } //end of main } //end of class ‫‪Example(10):‬‬ ‫‪15‬‬ ‫لتمةل م دا ع‬ ‫لات م يأ لع ا دنع ‪f‬‬ ‫لات مل م يأ ام لع م ف دنع ‪f‬‬ ‫‪Example(10):‬‬ ‫‪16‬‬ ‫لات م يأ لع ا دنع ‪UP‬‬ ‫لات مل م يأ ام لع ا دنع ‪UP‬‬ ‫‪Example(10):‬‬ ‫‪17‬‬ ‫لات م يأ لع ا دنع ‪SHIFT‬‬ ‫لات مل م يأ ام لع ا دنع ‪SHIFT‬‬  Layout Managers Layout managers – Provided for arranging GUI components in a container – setLayout() Container Method.  Layout Managers 1. FlowLayout Default for java.awt.Applet, java.awt.Panel and javax.swing.JPanel. Places components sequentially (left to right) in the order they were added. 2. BorderLayout Default for the content panes of JFrames and JApplets. Arranges the components into five areas: NORTH, SOUTH, EAST, WEST and CENTER. 3. GridLayout Arranges the components into rows and columns.  FlowLayout FlowLayout – The simplest layout manager – GUI components placed in container from left to right – When the edge of the container is reached, components continue to display on the next line Class FlowLayout – Constructor FlowLayout()  FlowLayout Class FlowLayout – Main Method setAlignment (int alignment) – alignment: – FlowLayout.LEFT – FlowLayout.RIGHT – FlowLayout.CENTER layoutContainer (continer) – container ‫تةلا عايو تم يتعت عاعإ لع لمعت ةلا‬ frame ‫ي لعلا ةل ايمو ي ليد تلع ة ةلااا‬  22 Example(11): FlowLayout Write a GUI program that display three buttons: Left, Right and center. When the user click on each one of those, the specific alignment must apply (align left, align right or align center). Use FlowLayout for your container.  23 Example(11): FlowLayout Left ‫ تىي ةلغضل تم‬ Center ‫ تىي ةلغضل تم‬ Right ‫ تىي ةلغضل تم‬ ‫‪Example(11): FlowLayout‬‬ ‫ تىي علضإا ليغ ةلاا ‪ frame‬وعم ايةا ةليعب‬ Example(11): 25 import java.awt.*; // step1: import package java.awt for Graphics import javax.swing.*; // step2: import javax.swing for display Jframe import java.awt.event.*; // step3: used to handle GUI Events public class FlowLayoutDemo extends JFrame { private JButton leftButton, centerButton, rightButton; private Container container; private FlowLayout layout; public FlowLayoutDemo ( ) { super( " FlowLayout Demo" ); setSize( 300 , 75 ); setVisible( true ); // get content pane and set its layout container = getContentPane(); container.setLayout( layout ); Example(11): 26 // set up leftButton and register listener leftButton = new JButton( "Left" ); container.add( leftButton ); leftButton.addActionListener( new ActionListener() { // process leftButton event public void actionPerformed( ActionEvent event ) { layout.setAlignment( FlowLayout.LEFT ); // realign attached components layout.layoutContainer( container ); } } ); // end call to addActionListener Example(11): 27 // set up centerButton and register listener centerButton = new JButton( “Center" ); container.add( centerButton ); centerButton.addActionListener( new ActionListener() { // process leftButton event public void actionPerformed( ActionEvent event ) { layout.setAlignment( FlowLayout.CENTER); // realign attached components layout.layoutContainer( container ); } } ); // end call to addActionListener Example(11): 28 // set up rightButton and register listener rightButton = new JButton( “Right" ); container.add( RightButton ); rightButton.addActionListener( new ActionListener() { // process leftButton event public void actionPerformed( ActionEvent event ) { layout.setAlignment( FlowLayout.RIGHT); // realign attached components layout.layoutContainer( container ); } } ); // end call to addActionListener Example(11): 29 public static void main( String args[] ) { // create an object to execute our class FlowLayoutDemo apps = new FlowLayoutDemo ( ); // set Close operation of Jframe apps.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } //end of main } //end of class  BorderLayout BorderLayout – Arranges components into five regions NORTH (top of container) SOUTH (bottom of container) EAST (right of container) WEST (left of container) CENTER (center of container)  31 Example(12): BorderLayout Write a GUI program that display five buttons on each region : North, South, Left, Right and center. When the user click on each one of those, the button will be invisible. Use BorderLayout for your container.  32 Example(12): BorderLayout Hide North ‫ تىي ةلغضل تم‬ Hide West ‫ تىي ةلغضل تم‬  33 Example(12): BorderLayout Hide East ‫ تىي ةلغضل تم‬ Hide South ‫ تىي ةلغضل تم‬  34 Example(12): BorderLayout Hide Center ‫ تىي ةلغضل تم‬ Example(12): 35 import java.awt.*; // step1: import package java.awt for Graphics import javax.swing.*; // step2: import javax.swing for display Jframe import java.awt.event.*; // step3: used to handle GUI Events public class BorderLayoutDemo extends JFrame implements ActionListener { private JButton buttons[]; private final String names[] = { "Hide North", "Hide South", "Hide East", "Hide West", "Hide Center" }; private BorderLayout layout; public BorderLayoutDemo ( ) { super( " BorderLayout Demo" ); setSize( 200 , 300 ); setVisible( true ); layout = new BorderLayout( 5, 5 ); // 5 pixel gaps 5 pixel gabs between components // get content pane and set its layout horizontal and container = getContentPane(); vertical container.setLayout( layout ); Example(12): 36 // instantiate button objects buttons = new JButton[ names.length ]; for ( int count = 0; count < names.length; count++ ) { buttons[ count ] = new JButton( names[ count ] ); buttons[ count ].addActionListener( this ); } // place buttons in BorderLayout; order not important container.add( buttons[ 0 ], BorderLayout.NORTH ); container.add( buttons[ 1 ], BorderLayout.SOUTH ); container.add( buttons[ 2 ], BorderLayout.EAST ); container.add( buttons[ 3 ], BorderLayout.WEST ); container.add( buttons[ 4 ], BorderLayout.CENTER ); Method add with two parameters. The second is the region in which the component should appear Example(12): 37 public void actionPerformed( ActionEvent event ) { for ( int count = 0; count < buttons.length; count++ ) if ( event.getSource() == buttons[ count ] ) buttons[ count ].setVisible( false ); else buttons[ count ].setVisible( true ); // re-layout the content pane layout.layoutContainer( getContentPane() ); } Example(12): 38 public static void main( String args[] ) { // create an object to execute our class BorderLayoutDemo apps = new BorderLayoutDemo ( ); // set Close operation of Jframe apps.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } //end of main } //end of class  GridLayout GridLayout – Divides container into grid of specified row and columns – Components are added starting at top-left cell Proceed left-to-fight until row is full  40 Example(13): GridLayout Write a GUI program that display sex buttons. When the user click on each one of those, the layout will change to another and vice versa. Use GrideLayout for your container. Example(13): 41 import java.awt.*; // step1: import package java.awt for Graphics import javax.swing.*; // step2: import javax.swing for display Jframe import java.awt.event.*; // step3: used to handle GUI Events public class GridLayoutDemo extends JFrame implements ActionListener { private JButton buttons[]; private final String names[] = { "one", "two", "three", "four", "five", "six" }; private boolean toggle = true; private Container container; private GridLayout grid1, grid2; 2 rows, 3 columns , public GridLayoutDemo ( ) { 5 pixel gabs between super( " GrideLayout Demo" ); components setSize( 300 , 150 ); horizontal and setVisible( true ); vertical grid1 = new GridLayout( 2, 3, 5, 5 ); grid2 = new GridLayout( 3, 2 ); Example(13): 42 // get content pane and set its layout container = getContentPane(); container.setLayout( grid1 ); // create and add buttons buttons = new JButton[ names.length ]; for ( int count = 0; count < names.length; count++ ) { buttons[ count ] = new JButton( names[ count ] ); buttons[ count ].addActionListener( this ); container.add( buttons[ count ] ); } Example(13): 43 // handle button events by toggling between layouts public void actionPerformed( ActionEvent event ) { if ( toggle ) container.setLayout( grid2 ); else container.setLayout( grid1 ); toggle = !toggle; // set toggle to opposite value container.validate(); } Example(13): 44 public static void main( String args[] ) { // create an object to execute our class GridLayoutDemo apps = new GridLayoutDemo ( ); // set Close operation of Jframe apps.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } //end of main } //end of class  Panels Panel – Helps organize components – Class JPanel is JComponent subclass – May have components (and other panels) added to them Example(14): Panels 46 Write a GUI program that display five buttons. As shown below. Example(14): 47 import java.awt.*; // step1: import package java.awt for Graphics import javax.swing.*; // step2: import javax.swing for display Jframe import java.awt.event.*; // step3: used to handle GUI Events public class PanelDemo extends JFrame implements ActionListener { public PanelDemo ( ) { super( " Panel Demo" ); setSize( 425 , 150 ); setVisible( true ); // get content pane Container container = getContentPane(); // create buttons array buttons = new JButton[ 5 ]; Example(14): 48 // set up panel and set its layout buttonPanel = new JPanel(); buttonPanel.setLayout( new GridLayout( 1, buttons.length ) ); // create and add buttons for ( int count = 0; count < buttons.length; count++ ) { buttons[ count ] = new JButton( "Button " + ( count + 1 ) ); buttonPanel.add( buttons[ count ] ); } container.add( buttonPanel, BorderLayout.SOUTH ); } Example(14): 49 public static void main( String args[] ) { // create an object to execute our class PanelDemo apps = new PanelDemo( ); // set Close operation of Jframe apps.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } //end of main } //end of class