INFSY 547: WEB-Based Technologies

Slides:



Advertisements
Similar presentations
Java GUI building with the AWT. AWT (Abstract Window Toolkit) Present in all Java implementations Described in (almost) every Java textbook Adequate for.
Advertisements

Graphic User Interfaces Layout Managers Event Handling.
CMSC 341 Building Java GUIs. 09/26/2007 CMSC 341 GUI 2 Why Java GUI Development? Course is about Data Structures, not GUIs. We are giving you the opportunity.
Java Swing Recitation – 11/(20,21)/2008 CS 180 Department of Computer Science, Purdue University.
Lecture 24 Applets. Introduction to Applets Applets should NOT have main method but rather init, stop, paint etc They should be run through javac compiler.
IEEM 110 Computing in Industrial Applications Basic User Interface in Java.
Chapter 14 Applets. 2 Knowledge Goals Understand the differing roles of applications and applets Understand how a browser operates Understand the role.
Slides prepared by Rose Williams, Binghamton University Chapter 18 Applets.
Chapter 13: Advanced GUIs and Graphics J ava P rogramming: From Problem Analysis to Program Design, From Problem Analysis to Program Design, Second Edition.
Java GUI building with the AWT. 2 AWT (Abstract Window Toolkit) Present in all Java implementations Described in most Java textbooks Adequate for many.
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.
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.
Java Programming: From Problem Analysis to Program Design, 4e Chapter 12 Advanced GUIs and Graphics.
Applets and Frames CS 21a: Introduction to Computing I First Semester,
Java GUI building with the AWT. AWT (Abstract Window Toolkit) Present in all Java implementations Described in (almost) every Java textbook Adequate for.
Graphical User Interface CSI 1101 N. El Kadri. Plan - agenda Graphical components Model-View-Controller Observer/Observable.
MIT AITI 2003 Lecture 17. Swing - Part II. The Java Event Model Up until now, we have focused on GUI's to present information (with one exception) Up.
Java GUI building with Swing. 2 AWT (Abstract Window Toolkit) Present in all Java implementations Described in (almost) every Java textbook Adequate for.
Cs884(Prasad)java12AWT1 Abstract Windowing Toolkit Support for Graphical User Interface (Event-driven programming)
Applets Session 8. Java Simplified / Session 8 / 2 of 31 Review The Abstract Windowing Toolkit (AWT) is a set of classes that allow us to create a graphical.
Java GUI’s are event driven, meaning they generate events when the user interacts with the program. Typical events are moving the mouse, clicking a mouse.
 2002 Prentice Hall, Inc. All rights reserved Introduction Graphical User Interface (GUI) –Gives program distinctive “look” and “feel” –Provides.
– Advanced Programming P ROGRAMMING IN Lecture 21 Introduction to Swing.
1 Outline 1 Introduction 2 Overview of Swing Components 3 JLabel 4 Event Handling 5 TextFields 6 How Event Handling Works 7 JButton 8 JCheckBox and JRadioButton.
Graphic User Interface. Graphic User Interface (GUI) Most of us interact with computers using GUIs. GUIs are visual representations of the actions you.
Copyright © 2002, Systems and Computer Engineering, Carleton University c-Gui3.ppt * Object-Oriented Software Development Part 18-c Building.
Timer class and inner classes. Processing timer events Timer is part of javax.swing helps manage activity over time Use it to set up a timer to generate.
Swing Differences between Swing and AWT Naming Conventions All Swing components begin with a capital J -- JPanel, JButton, JScrollBar, JApplet, etc..
MT311 Java Application Development and Programming Languages Li Tak Sing ( 李德成 )
Layout Managers Arranges and lays out the GUI components on a container.
Java Applets: GUI Components, Events, Etc. Ralph Westfall June, 2010.
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.
1 / 67 COP 3503 FALL 2012 SHAYAN JAVED LECTURE 14 Programming Fundamentals using Java 1.
For (int i = 1; i
The Abstract Window Toolkit (AWT) supports Graphical User Interface (GUI) programming. AWT features include: a rich set of user interface components; a.
Intro to Applets. Applet Applets run within the Web browser environment Applets bring dynamic interaction and live animation to an otherwise static HTML.
Field Trip #23 Hangman By Keith Lynn. JApplet A JApplet is a top-level container An applet is a small Java program that is executed by another program.
1 Layout Managers Layout managers –Provided for arranging GUI components –Provide basic layout capabilities –Processes layout details –Programmer can concentrate.
CSI 3125, Preliminaries, page 1 Layout Managers. CSI 3125, Preliminaries, page 2 Layout Managers The LayoutManagers are used to arrange components in.
1 Event Handling – Lecture 4 Prepared by: Ahmad Ramin Rahimee Assistant Professor ICTI.
CSI 3125, Preliminaries, page 1 Event Handling. CSI 3125, Preliminaries, page 2 Event Handling An Event Change in the state of an object is known as event.
Graphical User Interface (GUI) Two-Dimensional Graphical Shapes.
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.
Graphical User Interface (GUI)
Event Handler Methods Text field Object Responder JAVA AWT Environment: Messages are sent between JAVA Objects Screen Event Notification Press Button.
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.
Introduction to GUI Programming in Java: Frames, Simple Components, and Layouts.
AWT Vs SWING. 2 AWT (Abstract Window Toolkit) Present in all Java implementations Described in most Java textbooks Adequate for many applications Uses.
Prepared by: Dr. Abdallah Mohamed, AOU-KW Unit7: Event-driven programming 1.
GUI.1 Graphical User Interfaces GUIs. GUI.2 The Plan Components Flat Layouts Hierarchical Layouts Designing a GUI Coding a GUI.
Introduction Many Java application use a graphical user interface or GUI (pronounced “gooey”). A GUI is a graphical window or windows that provide interaction.
Events and Event Handling
Java Applets.
A First Look at GUI Applications
Lecture 09 Applets.
Java GUI.
Graphical User Interface (pronounced "gooey")
Ellen Walker Hiram College
Chap 7. Building Java Graphical User Interfaces
Chapter 13: Advanced GUIs and Graphics
Event-driven programming for GUI
Timer class and inner classes
Java Applets.
GUI building with the AWT
GUI building with the AWT
Advanced GUIs and Graphics
Graphical User Interface
Presentation transcript:

INFSY 547: WEB-Based Technologies Gayle J Yaverbaum, PhD Professor of Information Systems Penn State Harrisburg

Adding More Applets objects to XML Content <?xml version="1.0"?> <!DOCTYPE panelslayoutapplet SYSTEM "PanelLayoutsApplet.dtd"> <jclass> <app class="panellayoutsapplet.PanelLayoutsApplet“ width="300" height="250"> </app> <app class="firstapplet.FirstApplet" width="300" height="250"> <app class="urlapplet.URLApplet" width="300" height="250"> </jclass>

xsl Code <TR> <xsl:for-each select="app"> <TD width=“30%"> <applet> <xsl:attribute name="code"> <xsl:value-of select="@class"/> </xsl:attribute> <xsl:attribute name="width"> <xsl:value-of select="@width"/> <xsl:attribute name="height"> <xsl:value-of select="@height"/> </applet> </TD> </xsl:for-each> </TR>

Run Saxon Processor

Applet Considerations Javax.swing supplies best classes setSize is unnecessary but aids in debugging applet size is set in html

package guisampleapplet; import javax.swing.JApplet; import java.awt.*; public class GUISampleApplet extends JApplet { PanelClass p; public void init () p = new PanelClass(); }

Graphical User Example package guisampleapplet; import javax.swing.JApplet; import java.awt.*; public class GUISampleApplet extends JApplet { PanelClass p; public void init() p = new PanelClass(); this.setSize(300, 40); this.add("North", p); } Extending our code! BorderLayout

package guisampleapplet; import java.awt.Color; import java.awt.FlowLayout; import javax.swing.JButton; import javax.swing.JPanel; public class PanelClass extends JPanel { JButton _button1, _button2, _button3; JPanel _p; public PanelClass() { super(); _p = this; designPanel(); } private void designPanel() { _p.setBackground(Color.blue); _p.setLayout(new FlowLayout()); _button1 = new CreateAButton(_p, _button1, "Button 1 ",Color.orange); _button2 = new CreateAButton(_p, _button2, "Button 2 ", Color.GREEN); _button3 = new CreateAButton(_p, _button3, "Button 3 ", Color.YELLOW);

package guisampleapplet; import java.awt.Color; import javax.swing.JButton; import javax.swing.JPanel; public class CreateAButton extends JButton { public CreateAButton (JPanel p, JButton b, String str, Color c) super (str); this.setBackground(c); p.add (this); }

Layout Managers In JAVA Indicate layout of choice or accept default layout is set in setLayout method Indicate layout of choice or accept default Add () and remove () methods are common to all layouts.

Popular Layout Managers FlowLayout GridLayout BorderLayout

Panels A layout manager may apply to a panel or an applet as a whole An applet may be divided into panels which may themselves be divided into subpanels and so on.

Panels Labels, buttons and more may be added to containers (panels) Subsequently, panels are added to the applet

Complete all files to run your applet in a browser xml dtd xsl css bat Run the applet in the browser

Add a class to create a label Add labels between each button Remove button labels Change all button colors Line up each button and label – one/line using GridLayout (see next slide and page 285 of text)

GridLayout package gridlayoutexample; import javax.swing.JApplet; import javax.swing.JPanel; import java.awt.*; public class GridLayoutClass extends JApplet { CreateAButton b; JPanel j; public void init () this.setBackground (Color.white); j = new JPanel (); j.setLayout(new GridLayout(5, 2)); for (int i=1; i<=10; i++) b= new CreateAButton (j, i, Color.red, Color.white); j.add (b); } this.add(j);

package gridlayoutexample; import java.awt.Color; import javax.swing.JButton; import javax.swing.JPanel; public class CreateAButton extends JButton { public CreateAButton (JPanel p, int x, Color c, Color f) super ("Button " + x); this.setBackground(c); this.setForeground (f); }

Event Driven Programming Code that is called by the system when an event occurs An event signifies an occurrence The event generator notifies event handlers

Typical event handling Text field Object Event Handling Button Object JAVA AWT Environment: Messages are sent between JAVA Objects Screen OS Interrupt Event Notification Update Text Field Press Button (Buttons generate events) Typical event handling

Event Handling and Associated Objects Interface Events Flow User clicks a button User types text User uses a mouse When an event occurs, applet is notified Program may take action

Add implements action listener to the class public class PanelClass extends JPanel implements ActionListener 1. Add to the action code to: _button1.addActionListener(this); for designPanel method 2. Do this for all of your buttons

public void actionPerformed(ActionEvent e) { if (e.getSource() == _button1) _button1.setBackground (Color.red); _button2.setBackground (Color.blue); _button2.setBackground (Color.yellow); } Change all of the colors for each button clicked to a different color pattern

BorderLayout Manager o Divides the container (either a panel or whole applet) o Five areas - North -South -East -West -Center May also use the horizontal and vertical gaps as in FlowLayout

BorderLayout Manager North West South East Center

public void PlacePanels () { setLayout(new BorderLayout(5,10)); . } Note: 1. may simply be (new BorderLayout () 2. the 5,10 indicates border space in pixels

Pressing a mouse button triggers a mouse event Rather than implementing ActionListener, you will implement MouseListener (note that more than one listener may be implemented) When a mouse is pressed, the location is stored in x,y coordinates and location may be retrieved with getx () and gety (). MouseEvent handlers are invoked

Example on next slides demonstrate: Mouse enter Mouse exit Left mouse click Right mouse click

import java.applet.Applet; import java.awt.*; import java.awt.event.*; public class mousedemo extends Applet implements MouseListener { //note that this bracket will having matching end bracket next screen TextField mousetext; public void init(){ mousetext = new TextField(25); add(mousetext); addMouseListener(this); } public void mousePressed(MouseEvent e){ if((e.getModifiers()& InputEvent.BUTTON1_MASK) == InputEvent.BUTTON1_MASK){ mousetext.setText("Left mouse button down at " + e.getX() + "," + e.getY()); } else{ mousetext.setText("Right mouse button down at "

public void mouseClicked(MouseEvent e){ mousetext.setText("You clicked the mouse at " + e.getX() + "," + e.getY()); } public void mouseReleased(MouseEvent e){ mousetext.setText("The mouse button is up"); public void mouseEntered(MouseEvent e){ mousetext.setText("The mouse is in the applet"); public void mouseExited(MouseEvent e){ mousetext.setText("The mouse is out of the applet"); } //note that this bracket ends the applet from previous page