GUI DEVELOPMENT Command line Input Scanner class Output

  • Slides: 16
Download presentation
GUI DEVELOPMENT Command line Input: Scanner class Output: System. out. println() GUI Components Input:

GUI DEVELOPMENT Command line Input: Scanner class Output: System. out. println() GUI Components Input: Text Fields, Mouse Clicks Output: Labels, Dialog Boxes Comparison: Command line versus GUIs line: Easy to learn, good for debugging Disadvantages: Inappropriate for production systems

JAVA GUI DEVELOPMENT AWT (Abstract Window Toolkit) Simple components, short learning curve Operating system

JAVA GUI DEVELOPMENT AWT (Abstract Window Toolkit) Simple components, short learning curve Operating system calls create components (heavy weight) Single buffering SWING Complex components, lots of features, steep learning curve Draws components locally (lightweight, consistent cross platform look & feel) Double buffering for increased responsiveness Extends AWT, often overriding methods Note: Java. FX and Androids don’t use Swing for mobile devices

SWING CLASS HIERARCHY Heavyweight Lightweight

SWING CLASS HIERARCHY Heavyweight Lightweight

AWT CLASS HIERARCHY

AWT CLASS HIERARCHY

GAME COMPONENTS These could help JOption. Pane JText. Field JSlider We’ll definitely use these

GAME COMPONENTS These could help JOption. Pane JText. Field JSlider We’ll definitely use these JApplet JPanel Parent classes JButton JLabel Layout. Manager Border. Layout Box. Layout Component Container JComponent Window Frame Applet

CREATING A JAPPLET Extend; code the init method Get the content pane Create Components

CREATING A JAPPLET Extend; code the init method Get the content pane Create Components Add components to the content pane If draggable, set title and possibly the icon Set the size Override Japplet methods as needed JAPPLET AND JFRAME CREATING A JFRAME Instantiate or extend Get the content pane Create Components Add components to the content pane Set title, possibly icon Set the size Set location in window Set close operation Set visible

JPANEL Definition: A sub-panel that holds components Creating a JPanel Instantiate (new JPanel()) Create

JPANEL Definition: A sub-panel that holds components Creating a JPanel Instantiate (new JPanel()) Create and add components (add(new JButton("X")); If desired Set background and foreground colors Set a border (set. Border method) Set size, preferred size, minimum size, maximum size Override the paint. Component method if necessary Note: when overriding paint. Compnent, you should call super. paint. Component(g);

LAYOUT MANAGERS Definition: An object that controls how components are drawn in a panel

LAYOUT MANAGERS Definition: An object that controls how components are drawn in a panel Manager classes Flow, Border, Box, Grid. Bag, Overlay, and others Default if none specified: Flow Purpose: Abstracts component positioning so appearance will correctly adapt to different platforms.

BORDERLAYOUT public class Show. Border extends JFrame { public static void main(String[] args) {

BORDERLAYOUT public class Show. Border extends JFrame { public static void main(String[] args) { JFrame f = new Show. Border(); Container c = f. get. Content. Pane(); c. set. Layout(new Border. Layout(5, 10)); c. add(new JButton("East"), Border. Layout. EAST); c. add(new JButton("West"), Border. Layout. WEST); c. add(new JButton("North"), Border. Layout. NORTH); c. add(new JButton("South"), Border. Layout. SOUTH); c. add(new JButton("Center"), Border. Layout. CENTER); f. set. Title("Show Border Layout"); f. set. Size(new Dimension(400, 200)); f. set. Location. Relative. To(null); // Center on screen f. set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); f. set. Visible(true); } } Note: set. Image. Icon can replace the Java coffee cup

BOX LAYOUT public class Show. Box extends JFrame { public static void main(String[] args)

BOX LAYOUT public class Show. Box extends JFrame { public static void main(String[] args) { JFrame f = new Show. Box(); Container c = f. get. Content. Pane(); c. set. Layout(new Box. Layout(c, Box. Layout. X_AXIS)); c. add(new JButton("First")); c. add(Box. create. Horizontal. Strut(10)); c. add(new JButton("Second")); c. add(Box. create. Horizontal. Glue()); c. add(new JButton(“Third")); f. set. Title("Show Box Layout"); f. set. Size(new Dimension(400, 75)); f. set. Location. Relative. To(null); // Center on screen f. set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); f. set. Visible(true); } } Note: Box Layouts can be either horizontal or vertical)

JBUTTON Instantiate: JButton button = new JButton(“Reset"); Background Color: button. set. Background(new Color(0, 0

JBUTTON Instantiate: JButton button = new JButton(“Reset"); Background Color: button. set. Background(new Color(0, 0 x 99, 0 x. FF)); Foreground Color: button. set. Foreground(Color. WHITE); Border: button. set. Border (Border. Factory. create. Etched. Border(Etched. Border. RAISED)); Tool tip: button. set. Tool. Tip. Text("This is a tool tip"); Change Font: button. set. Font(new Font("Arial", Font. BOLD, 25)); Set size of button: button. set. Size(BUTTON_SIZE); Set preferred size: button. set. Preferred. Size(BUTTON_SIZE); Set the minimum size: button. set. Minimum. Size(BUTTON_SIZE); Set the maximum size: button. set. Maximum. Size(BUTTON_SIZE); Notes: Listen for button clicks: button. add. Action. Listener(this); 1) The set. Text method can change the button label 2) Buttons can also be created with icons (Image. Icon object) 3) Listener methods respond to user interactions (week 5 slides)

JLABEL label = new JLabel("Points: " + 0); label. set. Background (new Color(0 x

JLABEL label = new JLabel("Points: " + 0); label. set. Background (new Color(0 x 33, 0 x 66, 0 xcc)); label. set. Foreground(Color. WHITE); label. set. Opaque(true); // The default is false. label. set. Border(Border. Factory. create. Etched. Border (Etched. Border. RAISED)); label. set. Preferred. Size(new Dimension(100, 30)); To change a label: . set. Text ("Points: " + 20); To get a label’s text: String text = label. get. Text();

JOPTIONPANE Purposes: Display messages in a production system Create dialog boxes for gathering user

JOPTIONPANE Purposes: Display messages in a production system Create dialog boxes for gathering user input JOption. Pane class structure: a group of static methods providing a variety of options Example: JOption. Pane. show. Message. Dialog (this, "this is a message for the user"); Note: The first argument of show. Message. Dialog is a GUI component that the message will always appear on top. A null argument is legal, but then the message could go behind the component.

JSLIDER JSlider slider = new JSlider(JSlider. VERTICAL); slider. set. Paint. Labels(true); slider. set. Paint.

JSLIDER JSlider slider = new JSlider(JSlider. VERTICAL); slider. set. Paint. Labels(true); slider. set. Paint. Ticks(true); slider. set. Major. Tick. Spacing(10); slider. set. Minor. Tick. Spacing(1); slider. add. Change. Listener ( new Change. Listener() { public void state. Changed (Change. Event e) { // *** Insert listener code here ** } }); Note: Horizontal Jsliders are also possible Note: background/foreground color, border, font methods exist

JTEXTFIELD JPanel panel = new JPanel(); panel. set. Layout(new Box. Layout(panel, Box. Layout. X_AXIS));

JTEXTFIELD JPanel panel = new JPanel(); panel. set. Layout(new Box. Layout(panel, Box. Layout. X_AXIS)); JText. Field field = new JText. Field("Initial data"); field. set. Preferred. Size(new Dimension(200, 30)); field. set. Maximum. Size(field. get. Preferred. Size()); JLabel label = new JLabel("Enter Something"); panel. add(label); panel. add(Box. create. Horizontal. Strut(10)); panel. add(field); field. add. Action. Listener(new Action. Listener() { public void action. Performed(Action. Event e) { // Add listener logic here } });

OTHER COMMON SWING COMPONENTS JCheck. Box, JRadio. Button, JText. Area, JCombo. Box, JScroll. Bar,

OTHER COMMON SWING COMPONENTS JCheck. Box, JRadio. Button, JText. Area, JCombo. Box, JScroll. Bar, JTable, JTree, Many others All swing components follow the same general principles for instantiating, sizing, setting colors/fonts, adding listeners, etc. as was described on the previous slides