The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie COMP 14 Introduction to Programming Adrian Ilie July 21, 2005.

Slides:



Advertisements
Similar presentations
Chapter 3 – Web Design Tables & Page Layout
Advertisements

Graphic User Interfaces Layout Managers Event Handling.
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie COMP 14 Introduction to Programming Adrian Ilie July 20, 2005.
Java Swing Recitation – 11/(20,21)/2008 CS 180 Department of Computer Science, Purdue University.
Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
1 HTML Markup language – coded text is converted into formatted text by a web browser. Big chart on pg. 16—39. Tags usually come in pairs like – data Some.
COMP 14 Introduction to Programming Miguel A. Otaduy June 8, 2004.
COMP 14: HTML & the Web June 20, 2000 Nick Vallidis.
1 Applets Chapter 1 To understand:  why applets are used to extend the capabilities of Web pages  how an applet is executed and know about the restrictions.
Chapter 14 Applets. 2 Knowledge Goals Understand the differing roles of applications and applets Understand how a browser operates Understand the role.
COMP 14 Introduction to Programming Miguel A. Otaduy June 7, 2004.
Chapter 13: Advanced GUIs and Graphics J ava P rogramming: From Problem Analysis to Program Design, From Problem Analysis to Program Design, Second Edition.
GUI and Event-Driven Programming Part 2. Event Handling An action involving a GUI object, such as clicking a button, is called an event. The mechanism.
Applets, HTML and GUI’s Recitation – 04/11/2008 CS 180 Department of Computer Science, Purdue University.
1 Class 8. 2 Chapter Objectives Use Swing components to build the GUI for a Swing program Implement an ActionListener to handle events Add interface components.
Java Programming Chapter 10 Graphical User Interfaces.
Chapter 9: Applets Jim Burns Fall Outline Learn about applets Learn about applets Write an HTML doc to host an applet Write an HTML doc to host.
Applets Java API.
HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.
Introduction to GUI Java offers a great number of pre-defined classes to support the development of graphical user interfaces –These are broken down into.
Chapter 13 Advanced GUIs and Graphics. Chapter Objectives Learn about applets Explore the class Graphics Learn about the class Font Explore the class.
Java Programming, 3e Concepts and Techniques Chapter 3 Section 65 – Manipulating Data Using Methods – Java Applet.
Dr. Nuha El-KhaliliInternet Programming ( ) HTML Hyper Text Markup Language The language of web pages Maintained by the W3C
Applets Chapter 17.  Java’s big splash onto the scene came in the mid 90’s. The people at Sun Microsystems had managed to work java programs into Web.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
Java Programming: From Problem Analysis to Program Design, 4e Chapter 12 Advanced GUIs and Graphics.
Using the Netbeans GUI Builder. The Netbeans IDE provides a utility called the GUI Builder that assists you with creating Windows applications. The Netbeans.
Java Programming: From Problem Analysis to Program Design, Second Edition1  Learn about basic GUI components.  Explore how the GUI components JFrame,
JAPPLET.
Applets and Frames CS 21a: Introduction to Computing I First Semester,
JAVA: An Introduction to Problem Solving & Programming, 5 th Ed. By Walter Savitch and Frank Carrano. ISBN © 2009 Pearson Education, Inc., Upper.
Introduction to HTML 1 Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.
Chapter 17: Applets, Images, and Sound. Objectives Learn about applets Write an HTML document to host an applet Use the init() method Work with JApplet.
GUI programming Graphical user interface-based programming.
Chapter 13. Applets and HTML HTML Applets Computer Programming with JAVA.
GUI Components and Design Here we add one more component to our programs, JButtons –JButtons can only be inserted into JPanels (or JApplets) –Clicking.
Chapter 13Java: an Introduction to Computer Science & Programming - Walter Savitch 1 Chapter 13 l HTML l Applets Applets and HTML.
GUIs in Java Swing, Events CS2110, SW Development Methods Readings: MSD, Chapter 12 Lab Exercise.
Graphic User Interface. Graphic User Interface (GUI) Most of us interact with computers using GUIs. GUIs are visual representations of the actions you.
Lec.10 + (Chapter 8 & 9) GUI Java Applet Jiang (Jen) ZHENG July 6 th, 2005.
Graphics and Event-Driven Programming in Java John C. Ramirez Department of Computer Science University of Pittsburgh.
MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -1 Lecture 3 - Graphical User Interfaces r GUI toolkits in Java API r JFrame r GUI components.
Chapter 12 1 TOPIC 13B l Buttons and Action Listeners Window Interfaces Using Swing Objects.
Alice in Action with Java Chapter 14 Events and GUIs.
Concurrent Programming and Threads Threads Blocking a User Interface.
Applets and Frames. Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L14: GUI Slide 2 Applets Usually.
Java Programming Applets. Topics Write an HTML document to host an applet Understand simple applets Use Labels with simple AWT applets Write a simple.
Java GUI. Graphical User Interface (GUI) a list a button a text field a label combo box checkbox.
Creating Applets. What is an applet? What is an applet? A Java program that runs in a web browser. A Java program that runs in a web browser. An applet.
1 GUI programming Graphical user interface-based programming Chapter G1 (pages )
Java Programming: From Problem Analysis to Program Design, 3e Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
Review_6 AWT, Swing, ActionListener, and Graphics.
Chapter 131 Applets and HTML Chapter Objectives learn how to write applets learn to write a simple HTML document learn how to embed an applet in.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Tutorial 4 – Completing the Inventory Application.
What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup.
Chapter 10 - Writing Graphical User Interfaces1 Chapter 10 Writing Graphical User Interfaces.
Swing GUI Components So far, we have written GUI applications which can ‘ draw ’. These applications are simple, yet typical of all Java GUI applications.
Lesson 28: More on the GUI button, frame and actions.
Graphical User Interface (GUI)
Applets. 9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L12: Applets Slide 2 Applets Usually.
1 Applets Programming. Introduction Java programs are divided into two main categories, applets and applications. An application is an ordinary Java program.
©The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter Chapter 7 ( Book Chapter 14) GUI and Event-Driven Programming.
Java Applet What is a Java Applet? How is applet compiled?
A First Look at GUI Applications
Graphical User Interface (pronounced "gooey")
Ellen Walker Hiram College
Chapter 13: Advanced GUIs and Graphics
UNIT-5.
Advanced GUIs and Graphics
Graphical User Interface
Presentation transcript:

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie COMP 14 Introduction to Programming Adrian Ilie July 21, 2005

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 2 Last Time Create a Java window extending JFrame. Add labels with JLabel Add Images with ImageIcon Setting colors and layout

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 3 Example: LowerUpperCase

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 4 Basics Layout: GridLayout(3,2) JLabel to output result JTextField to input sentence 4 buttons

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 5 JLabel and JTextField Very similar. With JTextField we can also type data from outside and access it in the program. JLabel output=new JLabel(); JTextField input=new JTextField(); … String inputStr=input.getText(); output.setText(“OUTPUT RESULT”);

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 6 Using Buttons Create JButton objects Buttons generate events when clicked Add event handlers Inside event handler, code operations to be executed when button is clicked

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 7 Adding Buttons To create a button, we use the JButton class Add button to the content pane Change text of the button with the setText method Enable/disable the button with setEnabled method JButton toLower = new JButton (“To Lower Case"); toLower.setText(“Convert to Lower Case"); content.add(toLower); toLower.setEnabled(false);

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 8 Buttons and Events Pressing buttons triggers action events Setup a listener for the event ♦ actionPerformed method from ActionListener class ♦ ActionListener class from the java.awt.event package something else to import

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 9 ActionListener Special type of class, called interface Interface - class that contains only the method headings (no method bodies) public interface ActionListener { public void actionPerformed (ActionEvent e); }

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 10 ActionListener In order to handle an event, define a class that will implement ActionListener. Make the class ButtonHandler an internal class of our main class. In ButtonHandler, code the method actionPerformed private class ButtonHandler implements ActionListener

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 11 ActionListener Declare a ButtonHandler that will be a data member of the main class. Instantiate the ButtonHandler (e.g. in the constructor) Once the JButton object is created, register the action listener: private ButtonHandler toLowerHandler; toLowerHandler=new ButtonHandler(); toLower.addActionListener(toLowerHandler);

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 12 Example: LowerUpperCase Declare buttons: toLowerButton, toUpperButton, exitButton, clearButton Instantiate buttons Add buttons to the content pane Implement ActionListener classes that will handle events: ButtonHandler, ExitHandler, ClearHandler Register action listeners

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 13 actionPerformed Variables we want to access inside the actionPerformed methods, must be declared as member variables of the main class ♦ not local to constructor Make input, output, and the buttons member variables

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 14 ExitHandler.actionPerformed We simply need to exit the system System.exit(0);

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 15 ClearHandler.actionPerformed Clear JTextField input and JLabel output input.setText(“”); output.setText(“”); setVisible(true);

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 16 ButtonHandler.actionPerformed How do we know which button we pressed ( toLower or toUpper )? public void actionPerformed(ActionEvent e) { JButton pressed=(JButton)(e.getSource()); if(pressed==toLower) … else if(pressed==toUpper) … }

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 17 Example: LowerUpperCase Finish example

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 18 Applets A Java application is a stand-alone program with a main method A Java applet is a Java program that is intended to be transported over the web and executed using a web browser ♦ an applet doesn't have a main method ♦ needs an extra import statement: import java.applet.Applet;

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 19 Applet Methods Several methods from Applet class that are invoked automatically at certain points in an applet's life ♦ init - executed only once when the applet is initially loaded ♦ start - called when applet becomes active (when browser loads / returns to the page) ♦ stop - called when applet becomes inactive (when browser leaves the page) ♦ paint - automatically executed and is used to draw the applets contents

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 20 Converting Apps to Applet See Ch 13, pgs ( ) Extends JApplet instead of JFrame No main method No constructor ♦ put code from constructor in init() method No setVisible, setTitle, or setSize methods

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 21 Example: LowerUpperCase Convert to Applet

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 22 Want to Learn More? Creating a GUI with Swing Creating Applets

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 23 Writing Web Pages Web pages are written in a "markup" language called HTML (HyperText Markup Language) HTML is NOT a programming language. HTML just tells the computer how to format text and images--it's like using Word, but having to type in what you want things to look like.

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 24 Tags HTML works based on the concept of tags. A tag is some text surrounded by Tags are not printed to the screen Example tags: ♦,,, A lot of the time they work in pairs: ♦ and HTML is not case-sensitive ♦ and are the same thing

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 25 Very Simple Web Page Simple web page This is the text on a web page. View any web page source by choosing Source from the View menu in a web browser

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 26 What Do The Tags Mean?, ♦ go at the beginning and end of EVERY page, ♦ introduction of the document, ♦ what goes in the title bar of the window, ♦ the text (and other stuff) that is displayed in the window

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 27 Color and Images You can add color or an image to the background: ♦ color: make body tag ♦ image: make body tag

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 28 Ignores White Space In HTML, where you put a line break is ignored. The web browser decides this for you based on the size of the window These two will print the same thing: first: Why not fly? second: Why not fly?

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 29 Adding White Space Putting at the beginning of a paragraph and at the end will put a blank line between two pieces of text You can also use to insert a carriage return (aka ) will insert a horizontal line

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 30 Other Tags Bold ♦ and Italic ♦ and Center ♦ and Comments ♦

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 31 Hierarchical Structure For documents having a hierarchical structure, you can use heading tags ♦ marking chapter in a book ♦ marking section of a chapter ♦ marking subsection of a chapter ♦ and so on down... ♦

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 32 Lists There are two kinds of lists: ♦ Ordered lists (surrounded by and ♦ Unordered lists (surrounded by and Both use and to indicate List Items (things in the list)

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 33 Tables You can also create tables Beginning: ♦ options: border, cellspacing, cellpadding Each row: Each column:

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 34 Links This is the important part. This is how you go from page to page. text to be displayed

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 35 Inserting Images You can also just add an image into the middle of the page Use

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 36 Tutorials Quick Reference Want To Learn More?

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 37 Applets and the Web An applet is embedded into an HTML file using a tag that references the bytecode file (ClassName.class) of the applet class It is actually the bytecode version of the program that is transported across the web The applet is executed by a Java interpreter that is part of the browser ♦ this Java interpreter not included in Windows XP, must download from java.com

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 38 Basic HTML file for an applet: Can also specify size of applet window Put the applet HTML file (named something.html) and your Java applet bytecode (named ClassName.class) in your public_html folder in AFS space. Applets and the Web

The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL Adrian Ilie 39 Finish Homework 6 (due Saturday night) ♦ Sort ints ♦ Create array of Participant objects ♦ Read data into Participant objects ♦ Sort Participant objects Start Homework 7 (due Monday night) ♦ Access AFS disk space ♦ Create simple web page (just one line in the body) ♦ Play around with UpperLower.java Bring laptops to the remaining classes (review & practice) To do