1

LAB 2

UML for small Java Applet Development OBJECTIVE AND BACKGROUND The purpose of this second UML lab is to familiarize programmers with Rational Rose UML environment and Java Applet development. We will learn to use UML to extend java Applet class to your own class. At the end of this lab, you should be able to create and run a simple Hello applet. WEB SITE REFERENCES

• Professor Lin’s Web site: http://www.etcs.ipfw.edu/~lin • Rational, the Software Development Company www.rational.com • Using Rose J (a detailed Lab manual of 102 pages)

http://www.rational.com/support/documentation/manuals/docset149/Rational%20Rose/Documentation/Rose_java.pdf

• Other documents: http://www.rational.com/support/documentation/manuals/docset149/index.jsp

EQUIPMENT AND SOFTWARE

• PC (256 Mbytes, Windows 98, Room ET 226) Rational Rose Enterprise Software

• SUN Java Development Tool kit J2SE (standard edition) • JCreator - Integrated developing environment (www.Jcreator.com)

PROCEDURE a) Creating a simple applet (AppletHelloUML.java) Step 1: Run Rational Rose Enterprise

1. Click on the Cancel button to close the Create New Model Dialog box. Step 2: Activate the Framework

1. Click on File> New command and a Create New Model dialog box will be displayed.

2. Open the framework that corresponds to the system you are going to develop. In this case, we will choose J2SE1.3.

3. Save the model. Step 3: Create a Use Case Diagram

1. Click on Use Case View > Main

P.I. Lin Lab 2 – UML for Small Applet Development

2

2. From the menu bar select Tool > Create > Use Case 3. Select the Actor from the Toolbox and place it into the Use Case Diagram 4. Right click on the Actor to see the pop-up menu, and then select Open

Specification menu 5. Select the Use Case from the Toolbox and place it into the User Case

Diagram 6. Right click on the User case to change the name to AppletHelloUML

Actor AppletHelloUML

Step 3: Create AppletHelloUML Class Diagram (classes, attributes, and operations)

1. Click on Browse>Class Diagram. Make sure Logical View is selected in the package windows. Select New to create a new logical view.

2. Give the name Main in the Diagram title.

P.I. Lin Lab 2 – UML for Small Applet Development

3

3. Click on Use Logical View > Main

4. Create a new class called “AppletHelloUML”

- Tools > Create > Class - Select the Class icon (rectangle box symbol) from the Toolbox - Place a class to the workspace of the Class Diagram - Type in a desired class name: “AppletHelloUML” - Right click the new class diagram and select “Open Specification” - View the class name in the name box: AppletHelloUML - Select “class” in the Type combo box

P.I. Lin Lab 2 – UML for Small Applet Development

4

5. Add Attributes to the AppletHelloUML class

- Right click the AppletHelloUML class to select New Attributes from a dialog box - Accept the default name, and hit enter - Right click the AppletHelloUML class again to select Open Specification - The window called Class Specification for AppletHelloUML is then displayed; change the attribute name to message; select Type as: String; specify Initial Value with a pair double quotes as: “Applet says Hello UML”; set Export Control to: private

P.I. Lin Lab 2 – UML for Small Applet Development

5

6. Add Operations to the AppletHelloUML class

- Right click the AppletHelloUML class to get an dialog box - Select New Operations, and give a new method name as init, then hit Enter key to enter another method name as AppletHelloUML - Double click the init method to display Operation Specification menu for init dialog box - Add return type as: void; add some information on this operation method to Document text box 7. Change Operation Specification for AppletHelloUML method

- Right click on the class diagram AppletHelloUML to select Operation Specification for showing Class Specification for AppletHelloUML - Select Implementation radio button in the Export Control - Verify the AppletHelloUML class diagram is the same as shown below.

P.I. Lin Lab 2 – UML for Small Applet Development

6

AppletHelloUMLmessage : java.lang.String = "Hello UML"

init()AppletHelloUML()

Step 4. Code Generation

1. From the menu bar, select Tools > Java/J2EE > Project Specification.

P.I. Lin Lab 2 – UML for Small Applet Development

7

2. Double-click on the last one of the Classpaths as shown in the following diagram.

3. Click on the button with three dots to see a dialog box. 4. Choose Directory.

P.I. Lin Lab 2 – UML for Small Applet Development

8

5. Right click on the class diagram and select Java/J2EE> Generate Code. Choose your working directory and click “OK”.

P.I. Lin Lab 2 – UML for Small Applet Development

9

Step 5: Extending AppletHelloUML class from java.applet.Applet

1. Right click on AppletHelloUML class diagram and click on Open Specification. Class Specification dialog box as in the following figure should appear. Click on the left-most button (New/Insert) from Extends

P.I. Lin Lab 2 – UML for Small Applet Development

10

2. Select an extends class dialog box will appear. Choose

java.applet.Applet.

3. Code generate again by selecting AppletHelloUML class diagram. The following codes in AppletHelloUML.java are generated //Source file: E:\\lwinmoe\\cs492\\test\\lab2\\AppletHelloUML.java import java.applet.Applet; public class AppletHelloUML extends Applet { private String message = "Hello UML"; /** * @roseuid 3C87FAE000A4 */ public AppletHelloUML() { } /** * @roseuid 3C5191300376 */ public void init() { } }

P.I. Lin Lab 2 – UML for Small Applet Development

11

Step 6. Java Code Editing 1. Open source java files in Notepad and edit those files as shown below. Or use any other Development Environment such as JBuilder or JCreator. Change or add according to the highlighted words in the java source files. //Source file: E:\\lwinmoe\\cs492\\test\\lab2\\ AppletHelloUML.java import java.applet.Applet; import java.awt.*; public class AppletHelloUML extends Applet { private String message = "Hello UML"; private Panel p; private Label lbl; /** * @roseuid 3C519141006D */ public AppletHelloUML () { } /** * @roseuid 3C5191300376 */ public void init() { Panel p = new Panel(); lbl = new Label(message); p.add(lbl); add(p); } } Step 7. Creating an HTML file to run the applet 1. Create lab2.htm with the following codes. <HTML> <HEAD> <TITLE> Lab2 </TITLE> </HEAD> <BODY> <applet code = "AppletHelloUML.class" width = 100 height = 100> </APPLET> </BODY> </HTML>

P.I. Lin Lab 2 – UML for Small Applet Development

12

Step 8. Compiling and Running the applet

1. To compile AppletHelloUML.java from command line, open a command shell.

2. Make sure the path is set to c:\jdk1.3.1_01\bin or the directory where Java Development Kit (JDK) was installed.

3. Run javac program with the source file AppletHelloUML.java with the parameter name

4. Open lab2.htm in any browser or from command line run appletviewer lab2.htm.

P.I. Lin Lab 2 – UML for Small Applet Development