Lab Exercise 4. Please follow the instruction in Workshop Note 4 to complete this exercise.

Size: px

Start display at page:

Download "Lab Exercise 4. Please follow the instruction in Workshop Note 4 to complete this exercise."

Sabina Norman
6 years ago
Views:

1 Lab Exercise 4 Please follow the instruction in Workshop Note 4 to complete this exercise. 1. Turn on your computer and startup Windows XP (English version), download and install J2ME Wireless Toolkit 2.2 to your computer. Then download the laboratory resource files from 2. Find a PNG image and put it in the resource folder, and then display it on your screen. (Page 1 2) 3. Draw a regular rectangle and a filled rectangle on the screen, what is the different between drawrect and fillrect? In addition, can you apply this method to clear the screen? (Page 3 6) 4. Draw the solid and dotted line on the screen, try to use this method to draw a dotted rectangle. (Page 7 8) 5. Draw an arc and a sector on the screen. Then draw a rounded rectangle, a filled rounder rectangle and a filled triangle. (Page 9 13) 6. Set the font style, and display a string on the screen. (Page 14) 7. Download and install Abyss Web Server X1 to your computer. Then configure the MIME document type in order to deploy your application from web. (Page 15 20) 8. After the configuration and start up your web server, create the related JAD, JAR and HTML file for deployment. (Page 23) 9. Use the OTA Provisioning or your mobile to download your application from web server. Then install it and execute it. Please use IPCONFIG in DOS prompt to obtain the correct IP address rather than using LOCALHOST for distribution. (Page 24 26) Copyright 2007 Lo Chi Wing

$1. Display Picture on your mobile 1. Create a new project, name the project and the class at DisplayImage and MyClass. 2. Put the image to the resource folder (C:\WTK22\apps\DisplayImage\res). 3.$

2 1. Display Picture on your mobile 1. Create a new project, name the project and the class at DisplayImage and MyClass. 2. Put the image to the resource folder (C:\WTK22\apps\DisplayImage\res). 3. Create two java source files MyClass.java and ImageCanvas.java in the src folder under your project folder (C:\WTK22\apps\DisplayImage\src). MyClass.java // include the MIDlet supper class import javax.microedition.midlet.midlet; // include the GUI libraries of MIDP import javax.microedition.lcdui.*; /* */ /* Display single Image Demo. */ /* */ public class MyClass extends MIDlet implements CommandListener { // Define the GUI components private ImageCanvas MyCanvas; // Canvas private Command cmdexit; // Exit Button // Define the no-argument constructor public MyClass() { // Define the Exit Button with Exit label cmdexit = new Command("Exit", Command.EXIT, 0); // Define the canvas MyCanvas = new ImageCanvas(); // Called by application manager to start the MIDlet public void startapp() { // Create the Exit Button MyCanvas.addCommand(cmdExit); // Add the Command Listener MyCanvas.setCommandListener(this); // Set the current display of the midlet to the Canvas Display.getDisplay(this).setCurrent(MyCanvas); // PauseApp is used to suspend background activities and release resources Copyright 2007 Lo Chi Wing 1

3 // on the device when the midlet is not active. public void pauseapp() { // DestroyApp is used to stop background activities and release // resources on the device when the midlet is at the end of its life cycle. public void destroyapp(boolean unconditional) { // Implement the event handling method defined in the CommandListener interface. public void commandaction(command c, Displayable s) { if (c == cmdexit) { destroyapp(true); notifydestroyed(); ImageCanvas.java // include the GUI libraries of MIDP import javax.microedition.lcdui.*; /* Canvas for graphic display */ public class ImageCanvas extends Canvas { public void paint(graphics g) { try { // Create image from resource file Image MyImage = Image.createImage("/background.png"); // Draw the image at (0,0) g.drawimage(myimage, 0, 0, g.top g.left); catch(exception e) { System.out.println(e.getMessage()); 4. Compile and execute the program, can you see the greeting message? Copyright 2007 Lo Chi Wing 2

4 2. Draw a regular rectangle 1. Create a new project, name the project and the class at MyDrawing and MyClass. Then create two java source files MyClass.java and ImageCanvas.java in the src folder under your project folder (C:\WTK22\apps\MyDrawing\src). MyClass.java // include the MIDlet supper class import javax.microedition.midlet.midlet; // include the GUI libraries of MIDP import javax.microedition.lcdui.*; /* */ /* Display single Image Demo. */ /* */ public class MyClass extends MIDlet implements CommandListener { // Define the GUI components private ImageCanvas MyCanvas; // Canvas private Command cmdexit; // Exit Button // Define the no-argument constructor public MyClass() { // Define the Exit Button with Exit label cmdexit = new Command("Exit", Command.EXIT, 0); // Define the canvas MyCanvas = new ImageCanvas(); // Called by application manager to start the MIDlet public void startapp() { // Create the Exit Button MyCanvas.addCommand(cmdExit); // Add the Command Listener MyCanvas.setCommandListener(this); // Set the current display of the midlet to the Canvas Display.getDisplay(this).setCurrent(MyCanvas); // PauseApp is used to suspend background activities and release resources // on the device when the midlet is not active. public void pauseapp() { // DestroyApp is used to stop background activities and release // resources on the device when the midlet is at the end of its life cycle. public void destroyapp(boolean unconditional) { // Implement the event handling method defined in the CommandListener interface. public void commandaction(command c, Displayable s) { if (c == cmdexit) { destroyapp(true); notifydestroyed(); Copyright 2007 Lo Chi Wing 3

5 ImageCanvas.java // include the GUI libraries of MIDP import javax.microedition.lcdui.*; /* Canvas for graphic display */ public class ImageCanvas extends Canvas { public void paint(graphics g) { try { // Draw a rectangle with 25 x 35 pixel at (30, 40) g.drawrect(30, 40, 25, 35); catch(exception e) { System.out.println(e.getMessage()); 2. Build and Run the project, a rectangle is shown on your screen. Copyright 2007 Lo Chi Wing 4

6 3. Draw a filled rectangle with color 1. Open the previous project MyDrawing, and then modify the java source file ImageCanvas.java as follow: // include the GUI libraries of MIDP import javax.microedition.lcdui.*; /* Canvas for graphic display */ public class ImageCanvas extends Canvas { public void paint(graphics g) { try { // Set the color to Red g.setcolor(255, 0, 0); // Draw a rectangle with 25 x 35 pixel at (30, 40) g.fillrect(30, 40, 25, 35); catch(exception e) { System.out.println(e.getMessage()); 2. Build and Run the project, what is the different between drawrect and fillrect? Copyright 2007 Lo Chi Wing 5

7 4. Clear the screen 1. Open the previous project MyDrawing, and then modify the java source file ImageCanvas.java as follow: // include the GUI libraries of MIDP import javax.microedition.lcdui.*; /* Canvas for graphic display */ public class ImageCanvas extends Canvas { public void paint(graphics g) { try { // Set the color to white g.setcolor(255, 255, 255); // Draw a maximum size rectangle to fill the screen g.fillrect(0, 0, getwidth(), getheight()); catch(exception e) { System.out.println(e.getMessage()); 2. Build and execute the MIDlet, now you can clear the screen. Copyright 2007 Lo Chi Wing 6

5. Draw a solid line 1. Open the previous project MyDrawing, and then modify the java source file ImageCanvas.java as follow: // include the GUI libraries of MIDP import javax.microedition.lcdui.

8 5. Draw a solid line 1. Open the previous project MyDrawing, and then modify the java source file ImageCanvas.java as follow: // include the GUI libraries of MIDP import javax.microedition.lcdui.*; /* Canvas for graphic display */ public class ImageCanvas extends Canvas { public void paint(graphics g) { try { // Clear the screen g.setcolor(255, 255, 255); g.fillrect(0, 0, getwidth(), getheight()); // Set the color to Red g.setcolor(255, 0, 0); // Set the stroke style to Solid g.setstrokestyle(0); // Draw the line from (20,20) to (80, 20) g.drawline(20, 20, 80, 20); catch(exception e) { System.out.println(e.getMessage()); 2. Build and Run the project, a red solid line is shown on the screen. Copyright 2007 Lo Chi Wing 7

9 6. Draw a dotted line 1. Open the previous project MyDrawing, and then modify the java source file ImageCanvas.java as follow: // include the GUI libraries of MIDP import javax.microedition.lcdui.*; /* Canvas for graphic display */ public class ImageCanvas extends Canvas { public void paint(graphics g) { try { // Clear the screen g.setcolor(255, 255, 255); g.fillrect(0, 0, getwidth(), getheight()); // Set the color to Blue g.setcolor(0, 0, 255); // Set the stroke style to dotted g.setstrokestyle(1); // Draw the line from (20,20) to (80, 20) g.drawline(20, 20, 80, 20); catch(exception e) { System.out.println(e.getMessage()); 2. Build and Run the project, a blue dotted line is shown on the screen. Copyright 2007 Lo Chi Wing 8

7. Draw an arc 1. Open the previous project MyDrawing, and then modify the java source file ImageCanvas.java as follow: // include the GUI libraries of MIDP import javax.microedition.lcdui.

10 7. Draw an arc 1. Open the previous project MyDrawing, and then modify the java source file ImageCanvas.java as follow: // include the GUI libraries of MIDP import javax.microedition.lcdui.*; /* Canvas for graphic display */ public class ImageCanvas extends Canvas { public void paint(graphics g) { try { // Clear the screen g.setcolor(255, 255, 255); g.fillrect(0, 0, getwidth(), getheight()); // Set the color to Black g.setcolor(0, 0, 0); // Draw an arc with a bounding box located at 10,10, that extends to 100, 100. // The start angle is 0, and the arc angle is 150. g.drawarc(10, 10, 100, 100, 0, 150); catch(exception e) { System.out.println(e.getMessage()); 2. Build and Run the project, an arc is shown on the screen. Copyright 2007 Lo Chi Wing 9

11 8. Fill an sector 1. Open the previous project MyDrawing, and then modify the java source file ImageCanvas.java as follow: // include the GUI libraries of MIDP import javax.microedition.lcdui.*; /* Canvas for graphic display */ public class ImageCanvas extends Canvas { public void paint(graphics g) { try { // Clear the screen g.setcolor(255, 255, 255); g.fillrect(0, 0, getwidth(), getheight()); // Set the color to Blue g.setcolor(0, 0, 255); // Draw a filled arc (sector) with bounding box at 10,10, that extends to 100, 100. // The start angle is 0, and the arc angle is 150. g.fillarc(10, 10, 100, 100, 0, 150); catch(exception e) { System.out.println(e.getMessage()); 2. Build and Run the project, a blue sector is shown on the screen. Copyright 2007 Lo Chi Wing 10

12 9. Draw a rounded rectangle 1. Open the previous project MyDrawing, and then modify the java source file ImageCanvas.java as follow: // include the GUI libraries of MIDP import javax.microedition.lcdui.*; /* Canvas for graphic display */ public class ImageCanvas extends Canvas { public void paint(graphics g) { try { // Clear the screen g.setcolor(255, 255, 255); g.fillrect(0, 0, getwidth(), getheight()); // Set the color to Blue g.setcolor(0, 0, 255); // Draw a rounded rectangle with 80 x 60 pixel at (30, 40) with // horizontal and vertical diameter is 30 and 40. g.drawroundrect(30, 40, 80, 60, 30, 40); catch(exception e) { System.out.println(e.getMessage()); 2. Build and Run the project, a blue sector is shown on the screen. Copyright 2007 Lo Chi Wing 11

13 10. Fill a rounded rectangle 1. Open the previous project MyDrawing, and then modify the java source file ImageCanvas.java as follow: // include the GUI libraries of MIDP import javax.microedition.lcdui.*; /* Canvas for graphic display */ public class ImageCanvas extends Canvas { public void paint(graphics g) { try { // Clear the screen g.setcolor(255, 255, 255); g.fillrect(0, 0, getwidth(), getheight()); // Set the color to Red g.setcolor(255, 0, 0); // Draw a rounded rectangle with 80 x 60 pixel at (30, 40) with // horizontal and vertical diameter is 30 and 40. g.fillroundrect(30, 40, 80, 60, 30, 40); catch(exception e) { System.out.println(e.getMessage()); 2. Build and Run the project, a blue sector is shown on the screen. Copyright 2007 Lo Chi Wing 12

11. Fill a Triangle 1. Open the previous project MyDrawing, and then modify the java source file ImageCanvas.java as follow: // include the GUI libraries of MIDP import javax.microedition.lcdui.

14 11. Fill a Triangle 1. Open the previous project MyDrawing, and then modify the java source file ImageCanvas.java as follow: // include the GUI libraries of MIDP import javax.microedition.lcdui.*; /* Canvas for graphic display */ public class ImageCanvas extends Canvas { public void paint(graphics g) { try { // Clear the screen g.setcolor(255, 255, 255); g.fillrect(0, 0, getwidth(), getheight()); // Set the color to Red g.setcolor(255, 0, 0); // Draw a filled triangle at (30, 40), (100, 60) and (90, 140) g.filltriangle(30, 40, 100, 60, 90, 140); catch(exception e) { System.out.println(e.getMessage()); 2. Build and Run the project, a red triangle is shown on the screen. Copyright 2007 Lo Chi Wing 13

12. Draw a String 1. Open the previous project MyDrawing, and then modify the java source file ImageCanvas.java as follow: // include the GUI libraries of MIDP import javax.microedition.lcdui.

15 12. Draw a String 1. Open the previous project MyDrawing, and then modify the java source file ImageCanvas.java as follow: // include the GUI libraries of MIDP import javax.microedition.lcdui.*; /* Canvas for graphic display */ public class ImageCanvas extends Canvas { public void paint(graphics g) { try { // Clear the screen g.setcolor(255, 255, 255); g.fillrect(0, 0, getwidth(), getheight()); // Set the color to Red g.setcolor(255, 0, 0); // Set the font at proportional, bold italic and large size g.setfont(font.getfont(font.face_proportional, Font.STYLE_BOLD Font.STYLE_ITALIC, Font. SIZE_LARGE)); // Draw Hello World with left top at (50, 50) g.drawstring("hello World", 50, 50, g.top g.left); catch(exception e) { System.out.println(e.getMessage()); 2. Build and Run the project, the string Hello World is shown in proportional font face, bold italic style and large size. Copyright 2007 Lo Chi Wing 14

13. Installation and Configuration of Abyss Web Server X1 v2.0.6 1.

6) from the following URL: http://www.aprelium.com/abyssws/download.php. 2.

exe to start the installation of Abyss Web Server X1 v2.0.6.

16 13. Installation and Configuration of Abyss Web Server X1 v Download the Abyss Web Server X1 (version 2.0.6) from the following URL: 2. Double click abwsx1.exe to start the installation of Abyss Web Server X1 v Select [I Agree] to accept the license. 3. Select the component that you want to install (Recommend select all), and then press [Next] to continue. Copyright 2007 Lo Chi Wing 15

$(Recommend path is C:\Abyss Web Server ), and then click [Install] to$ start the installation. 5.

It s recommend to use [Automatic startup on user logon] or [Install as

However, due to the permission restriction in computer laboratory, you

17 4. Use [Browse] to modify the location of the installation path (Recommend path is C:\Abyss Web Server ), and then click [Install] to start the installation. 5. You will ask to select the startup method for the web server. It s recommend to use [Automatic startup on user logon] or [Install as Windows Service] when you install it at home. However, due to the permission restriction in computer laboratory, you re recommended to select [Manual startup] here. 6. After the install process finish, you can click [Yes] to start the server. Copyright 2007 Lo Chi Wing 16

7. The configuration file will automatic create, press [OK] to continue. 8. Open the configuration console from the following URL: http://127.0.0.1:9999.

18 7. The configuration file will automatic create, press [OK] to continue. 8. Open the configuration console from the following URL: Then select the language [English]. 9. Please create your own Administrator Login and Password for your access. Press [OK] to continue. Copyright 2007 Lo Chi Wing 17

10. A login dialog box will prompt you to

19 10. A login dialog box will prompt you to input your username and password to login the Administrator Panel. 11. Select [Server Configuration], and then click the [MIME Type]. 12. Press the [Add] button to add the new type. Copyright 2007 Lo Chi Wing 18

20 13. Create the new MIME file type associations: text/vnd.sun.j2me.app-descriptor and press the [Add] button. 14. Set the extension as jad and then click [OK] to continue. 15. Press [OK] to confirm the setting and back. Copyright 2007 Lo Chi Wing 19

21 16. Repeat the above step to create the MIME type application/java-archive for extension jar. Don t forget to click [OK] for confirmation. Finally, you must press the [Restart] button to restart the server in order to apply new change. Copyright 2007 Lo Chi Wing 20

14. Configuration of IIS Server for Windows 2000/XP/2003 1.

Select [Control Panel] [Add/Remove Program].

select Internet Information Service (IIS).

Before we can download the JAR and JAD files from the web server, we need to set the

22 14. Configuration of IIS Server for Windows 2000/XP/ If you have not install the IIS components to your Windows 2000/XP/2003. Select [Control Panel] [Add/Remove Program]. Then select [Add/Remove Windows Component] in the Add/Remove Program dialog box and select Internet Information Service (IIS). Please ensure that you have installed the World Wide Web Server. 2. Before we can download the JAR and JAD files from the web server, we need to set the MIME header for the web server. Select [Control Panel] [Administrative Tools] [Internet Services Manager]. 3. Right-click the Default Web Site for the server name in which IIS is running, and click [Properties]. Copyright 2007 Lo Chi Wing 21

4. On the HTTP Headers tab, click [File Type] in the MIME

Create two new MIME file type associations: text/vnd.sun.j2me.

Then click [OK] to close all dialog boxes. 7.

23 4. On the HTTP Headers tab, click [File Type] in the MIME Mapping. 5. Then click [New Type] on the File Type dialog box. 6. Create two new MIME file type associations: text/vnd.sun.j2me.app-descriptor for jad and application/java-archive for jar. Then click [OK] to close all dialog boxes. 7. You must restart IIS to apply the new change for the web server. Copyright 2007 Lo Chi Wing 22

$After the package process, you can find two file MyProject.jad and MyProject.jar stored in the folder C:\WTK22\apps\MyProject\bin. 3.$ $You need to copy the files to the folder C:\Inetpub\wwwroot\MyWeb. If you re using Abyss Web Server, then you need to copy the files to the folder C:\Program Files\Abyss Web Server\htdocs. 4.$ $Use Notepad or other editor to create an HTML web page (such as index.html ) that allow user to download the files, then save it in the MyWeb folder of your web server (i.e. C:\Program Files\Abyss Web Server\htdocs\MyWeb\index.$

24 15. Deployment of your Program 1. Start Ktoolbar in J2ME Wireless Toolkit 2.2. Then open the project MyProject you created before. 2. Select [Project] [Package] [Create Package] to create the package for deployment. After the package process, you can find two file MyProject.jad and MyProject.jar stored in the folder C:\WTK22\apps\MyProject\bin. 3. Create a folder called MyWeb in your web server, and then copy the above two files to it. If you re using IIS Server to deployment the project. You need to copy the files to the folder C:\Inetpub\wwwroot\MyWeb. If you re using Abyss Web Server, then you need to copy the files to the folder C:\Program Files\Abyss Web Server\htdocs. 4. Use Notepad or other editor to create an HTML web page (such as index.html ) that allow user to download the files, then save it in the MyWeb folder of your web server (i.e. C:\Program Files\Abyss Web Server\htdocs\MyWeb\index.html for Abyss Web Server or C:\Inetpub\wwwroot\MyWeb\index.html for IIS). <HTML> <HEAD> <TITLE>MyDeployment</TITLE> </HEAD> <BODY> <A HREF=" </BODY> </HTML> 5. Now your application is really to be distributed, you can invert your friend to download and install your program. The link is Copyright 2007 Lo Chi Wing 23

16. Download the J2ME Application 1. Since the GPRS time for download is very expensive, we ll use the Simulator to test the web server. Select OTA Provisioning in J2ME Wireless Toolkit 2.

25 16. Download the J2ME Application 1. Since the GPRS time for download is very expensive, we ll use the Simulator to test the web server. Select OTA Provisioning in J2ME Wireless Toolkit 2.2 to open Java Application Manager. Then press [Apps] (click the right button) to enter Apps and then press the [Select] button to choice Install Application. 2. Since we have put it the J2ME program in our local web server, so you can just enter Copyright 2007 Lo Chi Wing 24

26 3. Then press [Menu] and select Go (Click [Select] button in the phone again when ready). 4. Select the Component MyDeployment and click [Install] to continue. 5. A confirmation screen will display, you must click [Install] again to confirm. Copyright 2007 Lo Chi Wing 25

27 6. When installation finished, a new application will appear on your screen. You can execute it to test the program. If there is no problem, you can use your mobile to test it. 7. If you plan to remove the application, you can use [Remove] to uninstall it. Copyright 2007 Lo Chi Wing 26

28 Appendix: Guess Number 1. Create a new project, name the project and the class at GuessNumber and MyClass. 2. Copy the following image to the resource folder (C:\WTK22\apps\GuessNumber\res). 3. Create a java source file called MyClass.java in the src folder under your project folder (C:\WTK22\apps\GuessNumber\src). // include the MIDlet supper class import javax.microedition.midlet.midlet; // include the GUI libraries of MIDP import javax.microedition.lcdui.*; // include Java Random utility import java.util.random; /******************************************************************************/ /* All MIDlet applications must extend the MIDlet class. */ /******************************************************************************/ public class MyClass extends MIDlet implements CommandListener { private Display midletdisplay; // Reference to Display object private Command cmdguess; // Command Button to guess the Number private Command cmdexit; // Command Button to exit the MIDlet private Form frmmain; // Main form private TextField txtanswer; // Text field to store Answer private Random rand = new Random(); // Initialize Random Seek private int RandomNumber = 0; // Random Number // Define the no-argument constructor public MyClass() { // Retrieve the display from the static display object midletdisplay = Display.getDisplay(this); // Textfield for Username and Password cmdguess = new Command("Guess", Command.SCREEN, 1); cmdexit = new Command("Exit", Command.EXIT, 1); // Textfield for Username and Password txtanswer = new TextField("Answer", "", 8, TextField.NUMERIC); // The main form frmmain = new Form("Guess Number"); // Read the appropriate image try { frmmain.append(new ImageItem(null, Image.createImage("/game.png"), ImageItem.LAYOUT_CENTER, null)); catch (java.io.ioexception e) { System.err.println("Unable to locate or read the PNG file"); Copyright 2007 Lo Chi Wing 27

29 // Create Form, add Commands and textfield, listen for events frmmain.append(txtanswer); frmmain.addcommand(cmdexit); frmmain.addcommand(cmdguess); frmmain.setcommandlistener(this); // Display the ticker on top Ticker t = new Ticker("Welcome! I have a number for 1-9. Let's guess what it is."); frmmain.setticker(t); // Called by application manager to start the MIDlet. public void startapp() { // Random a number between 0 to 9 RandomNumber = Math.abs(rand.nextInt())%10; // Set the current display of the midlet to the Form midletdisplay.setcurrent(frmmain); // PauseApp is used to suspend background activities and release resources // on the device when the midlet is not active. public void pauseapp() { // DestroyApp is used to stop background activities and release // resources on the device when the midlet is at the end of its life cycle. public void destroyapp(boolean unconditional) { // Implement the event handling method defined in the CommandListener interface. public void commandaction(command c, Displayable s) { System.out.println(RandomNumber); if (c == cmdguess) { Alert al = null; // Output Alert try { if (Integer.parseInt(txtAnswer.getString()) == RandomNumber) { al = new Alert("Congratulation", "You are correct!", Image.createImage("/correct.png"), AlertType.CONFIRMATION); else if (Integer.parseInt(txtAnswer.getString()) > RandomNumber) { al = new Alert("Sorry", "Your number is too large", Image.createImage("/error.png"), AlertType.ERROR); else if (Integer.parseInt(txtAnswer.getString()) < RandomNumber) { al = new Alert("Sorry", "Your number is too small", Image.createImage("/error.png"), AlertType.ERROR); catch (java.io.ioexception e) { System.err.println("Unable to locate or read the PNG file"); // Display the Alert on screen midletdisplay.setcurrent(al); else if (c == cmdexit) { destroyapp(true); notifydestroyed(); Copyright 2007 Lo Chi Wing 28

30 4. Use the [Build] button to build the project, then press [Run] button to test the program. You can input the number and pres [Guess] to guess the number or press [Exit] to quit. Copyright 2007 Lo Chi Wing 29

Lab Exercise 7. Please follow the instruction in Workshop Note 7 to complete this exercise.

Lab Exercise 7. Please follow the instruction in Workshop Note 7 to complete this exercise. Lab Exercise 7 Please follow the instruction in Workshop Note 7 to complete this exercise. 1. Turn on your computer and startup Windows XP (English version), download and install J2ME Wireless Toolkit