Handout 7 - Introduction To Applets

8966482.doc

FBE – Computer Science Dept

Mekelle University Faculty of Business & Economics Computer Science Department Comp 262: Internet Programming with Java Handout 7 – Applets

Reference: For more information on the material covered in this handout, you should take some time to look at the Sun Java Tutorial, for which there is a link on the intranet, under the materials listing for this course. See in particular the topics 'Writing Applets' and ‘User Interfaces that Swing’. There are many ready-written applets available for download and reuse on the internet. If you do a search for 'Java applets' in any search engine, you should find many sites that do this. e-books on the Intranet – look for the section on applets in any of the Java books e.g. • Java AWT Reference (Books OReilly) – good for finding out about the different graphical components e.g. buttons, labels • Teach Yourself Java in 21 Days (Books Macmillan) • Java Developers Reference (Books Macmillan) • Exploring Java (Books OReilly) 1 Some Terminology There are various terms used when talking about using Java to write interactive components or user interfaces. This list defines these terms, to avoid confusion. Swing: The Swing package is a part of the Java Foundation Classes (JFC) in the Java platform. JFC is designed to help programmers build GUIs1 for applications. Swing was first included in version 1.1 of the JDK. It includes components such as buttons, windows and tables for use in interfaces. The Swing classes are in the javax.swing package. Applets can be created using Swing classes. See the topic 'User Intefaces that Swing – A QuickStart Guide' on the Sun Java tutorial for more information. AWT (Abstract Window Toolkit): prior to Swing, AWT provided components for user interfaces. The AWT classes are in the java.awt package. Applets: an applet is a Java class that can be embedded in a web page using the HTML <APPLET> tag. The Applet class inherits from AWT classes – as shown in the inheritance hierarchy below (java.lang.Object is the top-level super class). Applets can also make use of the Swing classes, but only by extending the JApplet subclass of the Applet class. 1

GUI – Graphical User Interface Page 1 of 15

8966482.doc

FBE – Computer Science Dept

java.lang.Object

java.awt.Component

java.awt.Container

java.awt.Panel

java.applet.Applet Figure 1 – Inheritance hierarchy for the Applet class

In this handout, we will look at how to write an applet class and how to use it in a web page. We will use the AWT classes in the applets, as they provide graphical user interface components for use on applets. Generally, applets are used to provide graphical components in web pages while Swing is used to provide user interfaces on non-web applications. 2

Overview of using an Applet

[Code Example: Applets/Simple.java and Applets/DemoApplets.html]

An applet is a Java class. The applet is embedded in a web page using the HTML <APPLET> tag. The tag's CODE attribute is set to the name of the compiled Java class file. The compiled class should be in the same directory as the web page. This is illustrated in below.

Simple.java

Java compiler

Simple.class Used in

Web page: DemoApplets.html <APPLET CODE="Simple.class" WIDTH=300 HEIGHT=200>

Figure 2 – steps in producing and using an applet

For example, the example applet class, Simple, can be placed on a web page using this HTML shown above, the output is as shown in Figure 3 below.

Page 2 of 15

8966482.doc

FBE – Computer Science Dept

The Applet tag has attributes code to specify the name of the Java class and width and height to specify the size of the display area of the applet on the web page. The width and height are set in pixels. When the web page is first loaded into a Java-enabled browser, the class is downloaded from the server by the browser and runs it. An instance of the Simple class is created by the Java VM that is installed with the browser.

Figure 3 – output of the Simple applet in a web page

Because a Java applet runs inside a Java-enabled web browser, the applet has access to the structure the browser provides – this includes the window, event-handling and graphics. 3 The Applet Class All applets extend the built-in Java Applet class. This class is in the java.applet package. The Applet class provides the basic functionality if an applet – which allows it be run under the control of a web browser. The methods of the Applet class can be overridden in order to customise the behaviour of an applet. 3.1 Applet Life-Cycle Some of the basic methods are listed in the table below. These methods mark the stages in the life-cycle of an applet – initialisation (or loading), starting, stopping and unloading. Note that as an Applet is not a stand-alone Java application, it does not need to have a main method to run – it is the init() and start() methods that are used to run the applet. Method init() start()

Description This method is invoked when the applet is first loaded. It should be used to carry out tasks that need to happen once during the lifetime of the applet e.g. load an image, set up the screen display for the applet Invoked every time the browser displays the web page containing the applet Page 3 of 15

8966482.doc

stop()

destroy()

FBE – Computer Science Dept

Invoked when the browser is closed (and, some browsers, when the browser is minimised or when the user leaves the web page by going to another URL) – stops or suspends anything the applet is doing e.g. if the start method started an animation, it should be stopped in this method Invoked when the browser determines that it no longer needs the applet – this is when the applet is removed from the browser's cache. Therefore the invocation of this method is controlled by the browser itself. Use to release resources used by the applet – but should do this in the other methods e.g in stop() as it may be a long time before destroy() is invoked.

Let us look at the Simple class – it overrides the init(), start(), stop() and destroy() methods, and has a method addItem() that adds a string to the StringBuffer object buffer. When a web page containing this applet is loaded, the text ‘initializing… starting…’ appears in the applet’s display area. In some browsers, if the browser is minimised or if another web page is loaded and then the user goes back to this one, the text changes to ‘initializing…starting…stopping…’. The words are being added to the StringBuffer when the init(), start() and stop() methods are invoked. import java.applet.Applet; import java.awt.Graphics; public class Simple extends Applet { StringBuffer buffer; public void init() { buffer = new StringBuffer(); addItem("initializing... "); } public void start() { addItem("starting... "); } void addItem(String newWord) { System.out.println(newWord); buffer.append(newWord); repaint(); } public void stop() { addItem("stopping... "); } public void destroy() { addItem("preparing for unloading..."); } public void paint(Graphics g) { //Draw a Rectangle around the applet's display area. g.drawRect(0, 0, size().width - 1, size().height - 1);

}

//Draw the current string inside the rectangle. g.drawString(buffer.toString(), 5, 15); }

Page 4 of 15

8966482.doc

FBE – Computer Science Dept

Note: another way to view an applet is by using the appletviewer that comes with the JDK. It is in the java bin directory. For example, if you have the APPLET tag in a web page named demoapplets.html, you can view the applets in it by running this on a command line: appletviewer demoapplets.html

• •

If you are not in the same folder as the demoapplets.html, provide the full path to it. If appletviewer is not recognized as a command, you need to add the path c:\ j2sdk1.4.1_03\bin to the path variable (set path=%path%;c:\ j2sdk1.4.1_03\bin).

When appletviewer runs, it opens a window for each applet on the webpage. In the Applet menu of the window, you can stop, start, reload, restart and close the applet. The output appears in the window and also as output on the command line. If you cannot see the output from the stop() and destroy() methods of the Simple class in your browser, you should see them as output when the appletviewer is run. 3.2 Display of an Applet The Simple class also overrides another Applet method, paint(). This method draws the content of the display area of the applet. In this case, it draws a rectangle around the applet’s display area and displays the current contents of buffer in it. The paint() only needs to be overridden if the applet has to have something appear on the screen – which is usually required. Another method that can be used to change the display is update() – this allows The Applet class inherits these methods from the AWT Component class. The addItem() method invokes another method, repaint() – this causes the applet to be redrawn, so the new contents of the StringBuffer are displayed. Note that the paint() method takes one parameter – a Graphics object. This is an AWT class that provides methods for drawing various shapes in the applet. The Graphics object is created and passed to the paint() method by the browser. 3.3 Other Methods of Applet Class The Applet class provides some other methods that can be overridden by the applet and others that cannot be overridden but which are accessor or mutator methods for instance variables. Some of these are shown below. See the Java AWT Reference ebook to find out about other methods. Most of these methods are inherited from the java.awt.Compnent class – so they can also be used with component objects such as Button and Label. Applet Method setBackground (Color color) showStatus (String string)

Description Sets the background colour for the applet's display area. Color is an object from java.awt.Color class. Cannot be overridden. Changes the status text on the browser window to the value of string (the status of a browser appears in the status bar, usually at the bottom left of the browser window). Cannot be Page 5 of 15

8966482.doc

setLayout(LayoutManager layout_mgr_object) getSize()

4

FBE – Computer Science Dept

overridden. Sets the Layout Manager for the applet to the specified layout_mgr_object e.g. setLayout(new BorderLayout()) See section 5for more information about Layout Managers. Returns a Dimension object – a Dimension object has properties such as width and height, which are the dimensions of the component on which getSize() was called. For an applet, they are the dimensions of the applet's display area. For example: currentWidth = getSize().width;

AWT UI Components

AWT provides several UI (user interface) components that can be placed in an applet. These are listed below – the class name for each is shown in parentheses. UI Component Buttons Checkboxes Single-line text fields Larger text display and editing areas Labels Lists Pop-up lists of choices Sliders and scrollbars Drawing areas Menus Containers

Full Class Name(s) java.awt.Button java.awt.Checkbox java.awt.TextField java.awt.TextArea java.awt.Label java.awt.List java.awt.Choice java.awt.Scrollbar java.awt.Canvas java.awt.Menu, java.awt.MenuItem, java.awt.CheckboxMenuItem java.awt.Panel, java.awt.Window and its subclasses

To include one of these in an applet, you must first create the object and then add it to the applet by calling the add() method of the Applet super class e.g. Button button1; …… //create a Button object button1 = new Button("OK"); add (button1);

An object can be removed using the remove() method e.g. remove (button1);

UI components repaint themselves automatically – so there is no need for the paint() method to be overridden in the containing applet, if there is no other content to be drawn on the screen. 5 Layout Managers Layout Managers are objects that can be used to control where the components are placed in the applet's display area. They are used because it would be difficult to place components accurately for different platforms, screens etc – as components such as buttons have different sizes and appearances on different platforms.

Page 6 of 15

8966482.doc

FBE – Computer Science Dept

If a Layout Manager is not specified, the default layout is used – this simply places each component after the last one. For an Applet, the default Layout Manager is the FlowLayout – this layout adds components to the applet in rows, going from left to right. Layout Managers apply to all AWT containers. Some possible Layout Managers are listed in the table below, along with the constants defined for each one – the constants are usually used to position components in the container. Layout Manager BorderLayout FlowLayout GridLayout CardLayout

Description Places components around the borders of the container Places components one after the other in rows, from left to right Places components in a grid layout Displays one component at a time; components are added using the addLayoutComponent() method; each Component can be assigned a name; the component displayed can be changed in response to an action e.g. a button click.

Constants/Methods/Constructors NORTH, SOUTH, EAST,WEST,CENTER – these refer to positions in the container LEFT, CENTER, RIGHT – these tell it how to align the components in each row GridLayout(int rows, int columns) To specify the number of rows and columns in the grid addLayoutComponent (String name, Component component) to add a component to the layout

For example, to use a BorderLayout in an applet, and to place a button at the bottom of the applet’s display area (i.e. South): Button button1; …… setLayout( new BorderLayout()); …… button1 = new Button("OK"); add (button1, BorderLayout.SOUTH);

All the Layout Managers implement the LayoutManager (or LayoutManager2 – for Java 1.1) interface. You can create your own LayoutManager by defining a class that implements the interface. However, we will not cover this – see Chapter 7 of the ebook Java AWT Reference for more information. 6 Responding to Events An applet can respond to events, such as a click of the mouse or a button being clicked on, that occur in its display area. Since version 1.1, Java provides an event model that can be utilised in applets. The event model supports the notion of event listeners – from the class java.util.EventListener. An event listener is any object that implements one or more of the listener interfaces. There are listener interfaces for each of the different types of AWT event, and also for non-graphical events. An object that implements a listener interface inherits methods that can be used to respond to that type of event.

Page 7 of 15

8966482.doc

6.1

FBE – Computer Science Dept

MouseListener Interface

[Code Example: Applets/SimpleClick.java, LineApplet1.java, LineApplet2.java and Applets/DemoApplets.html – compile the Java classes in the same dir as the web page]

For example, an object that implements the MouseListener interface can ‘listen’ for mouse clicks and respond as desired. The SimpleClick class adds to the Simple class by implementing the MouseListener interface so it can detect when the mouse is clicked anywhere in the applet’s area. The added code is as follows. import java.awt.event.MouseListener; import java.awt.event.MouseEvent; ……… //These methods are abstract in MouseListener, so they //must have an implementation here. The only one that is not //empty here is mouseClicked. public } public } public } public }

void mouseEntered(MouseEvent event) { void mouseExited(MouseEvent event) { void mousePressed(MouseEvent event) { void mouseReleased(MouseEvent event) {

public void mouseClicked(MouseEvent event) { addItem("click!... "); }

All of the MouseListener methods implemented above take a MouseEvent object as the parameter – the event object is automatically created when the event occurs. MouseListener Method void mousePressed (MouseEvent event) void mouseReleased (MouseEvent event) void mouseEntered (MouseEvent event) void mouseExited (MouseEvent event) void mouseClicked (MouseEvent event)

Description Invoked when the mouse button is pressed down – use if you want to respond before a mouse click is completed Invoked when the mouse button is released (unpressed) Invoked when the mouse enters the component – in this case, the component is the applet itself Invoked when the mouse exits the component Invoked when the mouse button is pressed and then released – use if it does not matter when the button is pressed/released – it only matters that a click occurred.

The MouseEvent object has some methods that can be used to get more information about the event – such as how many times the button was clicked (if you want to detect a double-click or a single-click) and the coordinates at which the click occurred. MouseEvent Method int getClickCount()

Description Returns the number of times the mouse was clicked (use to determine if a double-click occurred – so can have different responses to single and double clicks) Page 8 of 15

8966482.doc

Java.awt.Point getPoint()

int getX() int getY()

FBE – Computer Science Dept

Returns a Point object. Point is an AWT class that represents the x and y coordinates. The point is where the event occurred – the x and y values are relative to the (0,0) position of the component in which the event occurred. In this case, the component is the applet, so x and y are relative to the top left corner of the applet. Returns the x coordinate of the point at which the event occurred. Returns the y coordinate of the point at which the event occurred.

See the LineApplet1 and LineApplet2 applets for examples of using the above methods. In both applets, if you click the mouse once and then click again, a line is drawn between the two points. Each click after that results in another line being drawn, from the end-point of the previous line. The code stores the previous point, gets the new point, then calls the drawLine() method of the Graphics object. LineApplet1 and LineApplet2 implement the same functionality, but the code is written differently. • LineApplet1 uses a separate class, DrawLine, to draw the line. • LineApplet2 implements this differently – as it is the only class that uses DrawLine, DrawLine is implemented as an inner class (this is a topic we have not covered yet – see section 13 at the end of this handout for a brief explanation). The inner class is an instance of the java.awt.Event.MouseAdapter class. This class defines dummy methods for handling the different mouse events – they need to be overridden to provide an implementation. Using MouseAdapter is an alternative to implementing the MouseListener interface (as in SimpleClick.java) – as the methods are not abstract, they do not all have to be overridden – only the ones you are interested in. In this case, we are only interested in the mouseClicked handler. 6.2 MouseMotionListener Interface If an applet implements the MouseMotionListener interface, it can listen for movement of the mouse as well as mouse clicks. This interface is separate so that if an applet does not care about mouse movement, it can listen only for clicks. MouseMotionListener Method void mouseMoved (MouseEvent event) void mouseDragged (MouseEvent event)

Description Invoked when the mouse is moved but no buttons on the mouse have been pressed Invoked when the mouse has been moved while a button is pressed (i.e. click and drag of the mouse)

These events can be used to respond to mouse movement e.g. to move a component inside the applet by redrawing the applet or to draw a line in the applet's display area. There is also a MouseListenerAdapter class, which provides dummy implementations for the methods above. It is easier to extend this class rather than to implement the interface (as was done in LineApplet2.java with MouseAdapter).

Page 9 of 15

8966482.doc

FBE – Computer Science Dept

6.3 ActionListener Interface Action events are generated by specific types of action that you might want to respond to, for example: • Clicking a button • Selecting a menu item • Hitting Enter in a text component ActionListener Method void actionPerformed (ActionEvent event)

Description When any action event occurs in an AWT component, this method is invoked. The event object contains further information about the event that occurred.

The table below shows methods on the ActionEvent class. ActionEvent Method int getID() String getActionCommand()

Description Returns an ID value for the action that occurred – every ActionEvent sub-class has a constant value ACTION_PERFORMED defined in it, which is the value returned by this method. Returns a string that is a name for the kind of action that occurred. Button and MenuItem components can set this string with their setActionCommand() method. If setActionCommand() is not called to set the string, then the label of the Button or MenuItem is returned.

6.4 Others There are a number of other event types that can occur. Each of these has a corresponding Listener interface that can be implemented by an applet to respond to the events. Interfaces that have more than one method that can be overridden also have an Adapter class – which is just a convenient class to use. Using the Adapter class rather than implementing the interface means that the Applet (or other event handling class) does not have to implement the methods it does not use. This document does not cover these other event types in detail – for further details, see the O'Reilly e-book Java AWT Reference (Chapter 4 – Events). Event Class AdjustmentEvent

Listener Interface AdjustmentListener

Adapter Class None

ComponentEvent

ComponentListener

ComponentAdapter

ContainerEvent

ContainerListener

ContainerAdapter

FocusEvent

FocusListener

FocusAdapter

ItemEvent

ItemListener

None

TextEvent

TextListener

None

WindowEvent

WindowListener

WindowAdapter

Page 10 of 15

Description of the type of events On components that can be adjusted e.g. a scrollbar When a component has been moved, resized, hidden or shown When the source container object has a child added or removed When a component gets or loses focus List, Choice & Checkbox components implement the ItemSelectable interface – when a change in the selection is made, this event occurs When text is changed in a textfield, text-area or other text component Events on the outer window object

8966482.doc

FBE – Computer Science Dept

7 Getting Parameters from the Web Page An applet can accept parameters each time it is loaded. The parameters are specified in the HTML, using tags inside the <APPLET> tag. A parameter is defined as a name-value pair. Parameters should be used to control configuration of the applet so that the applet does not have to be recompiled every time a change is required. For example – in the init() method of an applet named Simple2: String bgColour; bgColour = getParameter("bgColour");

The HTML tag for the applet should include a param tag with the name set to 'bgColour': <APPLET CODE="Simple2.class" WIDTH=300 HEIGHT=100> <param name="bgColour" value="#ffff00">

8

Displaying Images in an Applet

To display an image in an applet, it is first necessary to create an Image object – from the package java.awt.Image. The Applet class has a method, getImage(), that takes two parameters – the base URL and the path to the image file, relative to the URL. Usually, images are stored in a sub-directory of the web site e.g. in images/. The Applet class provides a method, getCodeBase(), that returns the URL in which the class file is running. For example, if an applet is embedded in http://fbeserver/students/xxx/applets/simpleApplet.html, if the method getCodeBase() is called inside the class, it will return something like: http://fbe-server/students/xxx/applets This can be used with getImage() to create an Image object based on an image file in a sub-folder of the web site. For example, to create an image object for an image named Ethiopia_flag.jpg that is stored in the images folder of the web site: String imagePath = "images/ethiopia_flag.jpg"; Image image1; //an Image object public void init() { …… image1 = getImage (getCodeBase(), imagePath); …… }

In this case, getCodeBase() returns the full path to the directory containing the applet. The image object can then be drawn using the drawImage() method of the Graphics class. In the code below, the image is drawn at position (5,15) in the applet's display area. The parameters to drawImage() are the Image object, the x coorodinate, the y coordinate and an ImageObserver object. ImageObserver is an interface that supports the loading of images into an applet. However, we do not have to create one – because Applet is a sub-class of java.awt.Component, which implements the ImageObserver interface. Therefore the Page 11 of 15

8966482.doc

FBE – Computer Science Dept

applet itself can be the ImageObserver – referenced by the keyword this in the code below. String imagePath = "images/ethiopia_flag.jpg"; Image image1; //an Image object public void init() { …… image1 = getImage (getCodeBase(), imagePath); this.getGraphics().drawImage (image1, 5, 15, this); …… }

9 AWT Colours The java.awt.Color class defines colours that can be used in java.awt.Component components. An Applet inherits from Component, so it too can use colour objects. Some of the methods on the Color class are as shown below. Color Method Color (int green, int red, int blue) decode(String htmlColorCode)

Description Constructor – red, green and blue values are between 0 and 255 (hue values – can get these in FrontPage or HTMLKit) Decodes a colour such as #ffffff to produce a Color object for that colour. This is a static method on the class so it is called using Color.decode(). Useful if passing in a colour as a parameter from the applet HTML.

The Color class also has some constants that give references to some common colours e.g. Color.red

See Chapter 3 of the e-book Java AWT Reference for more information. 10 Using the Swing Classes [Code Examples: Scripting/Swing/ - all examples in this folder are Swing applets]

So far, we have been working with the AWT graphical components. This has been to get a good grasp of how to build and work with applets in general. Many applets now are Swing applets – this means they use the Swing classes for graphical components. Some reasons to use Swing rather than AWT components are as follows: • • • •

The Java Swing classes provide better UI components for use in applets and in other, non-web-based, user interfaces. The Swing components are more reliable than the AWT components. Swing also provides more flexibility for the look and feel of applets and other user interfaces. Many of the AWT classes have now been replaced by the Swing classes. Sun will continue to add functionality to the Swing classes but will not do so with AWT classes.

Page 12 of 15

8966482.doc

FBE – Computer Science Dept

An applet that uses Swing components should extend the Swing class JApplet instead of Applet. JApplet is part of the javax.swing package, and extends Applet. The class hierarchy is shown in Figure 4 below. Swing components display best in JApplet. java.lang.Object

java.awt.Component

java.awt.Container

java.awt.Panel

java.applet.Applet

javax.swing.JApplet Figure 4 – class inheritance hierarchy for JApplet

When writing applets using Swing, the basic idea is the same – an applet still has the same life-cycle of intialisation, starting, stopping and unloading. If adding components to a JApplet, it is best to use the Swing components. The Swing components are in the javax.swing package. They usually have the same name as the corresponding component in AWT but preceded with a J e.g. JButton is the Swing equivalent of Button. In a Swing interface, components are added to a Container object, not directly to the applet itself. This also applies to Layout Managers – the layout is set for the Container, not for the applet itself. See, for example, the Simple2Swing applet in the Code Examples. The following lines of code, taken from the Simple2Swing.java, show how the container object is returned from the method getContentPane() on the applet and is then used to set the layout and to add a component. JButton button2; Container appletPanel; …… public void init() { appletPanel = this.getContentPane(); appletPanel.setLayout( new BorderLayout()); …… button2 = new JButton ("Swing"); appletPanel.add (button2, BorderLayout.NORTH); } Page 13 of 15

8966482.doc

FBE – Computer Science Dept

In Swing, the events framework is the same – in fact, the java.awt.event classes are still used for event handling (MouseListener, ActionListener etc). Listeners can be added to the applet and its components in the same way – by using the appropriate method to add a Listener e.g. this.addMouseListener (mouse_listener object) or button.addActionListener (action_listener_object). See the examples MouseEventDemo (implements MouseListener interface) and MouseEventDemo2 (has an inner class as the MouseListener). 11 Security Considerations for Applets Applets are downloaded to the client, so cannot carry out certain actions that could do malicious damage on the client PC. These include not being able to: • Run other programs on the client • Make network connections on the client • Read or write files on the client • Read certain system properties (though an applet can read some system properties such as the Java version number – it cannot read sensitive information such as the home directory of a network user) Many internet users are suspicious of applets, believing that they can do malicious damage on their PCs. Users can restrict applets in their browser. You should be aware of this and do not use applets for required functionality on your websites – use them to provide extra functions e.g. showing pictures or a small game or activity for users to carry out. 12 Applets in FrontPage To insert an applet in FrontPage, you can enter the HTML on the HTML tab or you can do it using these steps: • On the Insert menu, choose Advanced and then Java Applet • In the 'Applet Source' box, type the name of the class file for the applet • In the 'Message for browsers without Java support' box, type HTML or text that will appear in place of the applet on browsers that do not support applets. • Under Applet parameters, for each parameter that you want to pass to the Java applet, click Add and then enter the parameter's name and value. 13 Inner Classes An inner class is a special case of a member or nested class. Basically, a nested class is a class that is defined inside another class, and can be used in the class just as an instance variable can be used inside the class. The nested class is associated with an instance of the containing (or outer) class. It can directly access the instance variables and instance methods of the outer class – including private members (because the nested class is inside the outer class). A nested class that is not static is called an inner class. A nested class can be declared static, in which case it is simple called a static nested class. An instance of an inner class is associated only with one particular instance of its outer class. Generally, an inner class should be used where the class is used only as part of the outer class and it reflects a close relationship between the inner and outer classes. Page 14 of 15

8966482.doc

FBE – Computer Science Dept

Notes prepared by: FBE Computer Science Department.

Page 15 of 15