Programming 2 LAB

1. Programming 2 LAB TA: Nouf Al-Harbi NoufNaief.net ::: nouf200@hotmail.com

2. Write a program that meets the following requirements: • Create a frame and set its layout to FlowLayout. • Size of the frame: 200,100 • Location of the frame: 50,50 • Create one label with the text “Welcome to Java”and add it to the frame. Quiz 2 End

3. Lab 6 GUI

4. From Now, the GUI main classes will extend the JFrameclass. • The constructor of the main class constructs the user interface. • The main method creates an instance of the main class and then displays the frame. • This is the preferred style of creating GUI applications. • Example: rewrite a previous program “DisplayCards” by using this way. Another way to create GUI application

5. Using Panels

6. You can use new JPanel()to create a panel with a default FlowLayoutmanager or • new JPanel(LayoutManager)to create a panel with the specified layout manageror • You can use the method setLayout to specify the layout manager: • OR: • JPanel p = new JPanel(); • p.setLayout(new GridLayout(4, 3)); • JPanel p = new JPanel(new GridLayout(4, 3)); Using Panels

7. Use the add(Component)method to add a component to the panel. • For example, the following code creates a panel and adds a button to it: JPanel p = new JPanel(); p.add(new JButton("OK")); Using Panels

8. Panels can be placed inside a frame or inside another panel. • The following statement places panel p into frame f: f.add(p); Using Panels

9. You can set colors for GUI components by using the java.awt.Colorclass. • Colors are made of red, green, and blue components, each represented by an intvalue that describes its intensity, ranging from 0 (darkest shade) to 255 (lightest shade). This is known as the RGB model. • You can create a color using the following constructor: public Color(intr, int g, int b); • in which r, g, and b specify a color by its red, green, and blue components. For example, Color color = new Color(128, 100, 100); The Color Class

10. You can use the setBackground(Color c) and setForeground(Color c) methods defined in the java.awt.Componentclass to set a component’s background and foreground colors. • EX: setting the background and foreground of a button: JButtonjbtOK = new JButton("OK"); Color color = new Color(128, 100, 100); jbtOK.setBackground(color); jbtOK.setForeground(new Color(100, 1, 1)); • Alternatively, you can use one of the 13 standard colors (BLACK, BLUE, CYAN, DARK_GRAY, GRAY, GREEN, LIGHT_GRAY, MAGENTA, ORANGE, PINK, RED, WHITE, and YELLOW) defined as constants in java.awt.Color. The following code, for instance, sets the foreground color of a button to red: jbtOK.setForeground(Color.RED); The Color Class

11. Use label.setOpaque(true); Otherwise the background is not painted, since the default of opaque is false for JLabel. Note: Change BG color for labels

12. You can create a font using the java.awt.Fontclass and set fonts for the components using the setFontmethod in the Component class. • The constructor for Font is: public Font(String name, intstyle, intsize); • You can choose a font name from SansSerif, Serif, …etc. • choose a style from Font.PLAIN(0), Font.BOLD(1), Font.ITALIC(2), • and Font.BOLD+Font.ITALIC(3) • specify a font size of any positive integer. • EX: the following statements create two fonts and set one font to a button. Font font1 = new Font("SansSerif", Font.BOLD, 16); Font font2 = new Font("Serif", Font.BOLD + Font.ITALIC, 12); JButtonjbtOK = new JButton("OK"); jbtOK.setFont(font1); The Font Class

13. A tool tip is text displayed on a component when you move the mouse on the component. • It is often used to describe the function of a component. jbtOK.setToolTipText("This is the OK button"); Tool Tip

14. You can set a border on any object of the JComponentclass. • Swing has several types of borders. • To create a titled border, use new TitledBorder(String title). • To create a line border, use new LineBorder(Color color, int width), where width specifies the thickness of the line. p1.setBorder(new TitledBorder("Three Buttons")); Border of a component

15. Display a frame (set its layout to grid(2,1) and add to it 2 panels. • Panel 1 : • Its layout : flowlayout • Contains one label with the text “Tic Tac Toe Game” • Change the font , foreground color and background color properties of the label • Add a tool tip text to the label . • Panel 2: • Layout: Grid(3,3) • Contains nine labels. • A label may display an image icon for X, an image icon for O, or nothing. • What to display is randomly decided. • Use the Math.random() method to generate an integer 0, 1, or 2, which corresponds to displaying a cross image icon, a not image icon, or nothing. Game: displaying a TicTacToeboard

16. Game: displaying a TicTacToeboard

17. End of Lab 6