Developing a Mobile Browser Application
Developing a Mobile Browser Application
This tutorial describes how to provide wireless capabilities
to a regular J2EE application.
Approximately 20 minutes
This tutorial covers the following topics:
Place the cursor over this icon to load and view all
the screenshots for this tutorial. (Caution: Because this action loads all screenshots
simultaneously, response time may be slow depending on your Internet connection.)
Note:
Alternatively, you can place the
cursor over each individual icon in the following steps to load and view only
the screenshot associated with that step.
Back to Topic List
OracleAS 10g Wireless provides a platform to build
new mobile applications or enable existing applications to be accessible from
the wireless device. Using the JDeveloper Wireless Extension (JWE) 10g
9.0.5, you can equip standard J2EE applications with wireless capabilities.
This OBE demonstrates building a mobile browser application based on XHTML by
using JDeveloper and the JWE.
Back to Topic List
Before starting this tutorial, you should:
| 1. |
Have installed Oracle JDeveloper 10g
|
Back to Topic List
JWE, built on Oracle JDeveloper Extension Framework, integrates
the OracleAS Wireless WDK with Oracle JDeveloper. Using JWE, you can develop:
 |
Wireless applications that can
be accessed through multiple delivery channels such as voice, messaging,
and
small-screen browsers (WAP, XHTML, MP, and so on) |
|
Java 2 Micro Edition (J2ME) applications |
To install and use JWE, perform the following steps:
| 1. |
Open your browser and enter the following URL to download the JDeveloper
Wireless Extension:
http://www.oracle.com/technology/tech/wireless/tools/index.html
Extract the zip file on your machine.
|
| 2. |
Copy the jwe.jar file to the jdev_home\lib\ext folder.
For example, if you have installed JDeveloper in E:\jdev10g folder,
then copy jwe.jar file to E:\jdev10g\jdev\lib\ext.
|
| 3. |
Restart JDeveloper if you have already started it.
|
Back to Topic List
To launch an application from a device emulator, you must
first register the device emulator to JDeveloper. Perform the following steps:
| 1. |
Download and install the device emulator from the Openwave Web site:
http://developer.openwave.com/download
This tutorial deals with Openwave Phone Simulator
Version 6.2.2.
|
| 2. |
Device emulators simulate how an application looks and behaves on a mobile
device. To register the device emulator, click the Tools menu in
JDeveloper and select Preferences.
|
| 3. |
Expand Wireless Extension in the Preferences window.
|
| 4. |
Select Device Emulators.
|
| 5. |
Click New.
|
| 6. |
You see the Register New Emulator window:
Enter Openwave for Emulator Name. Click Browse to select
OSDK62http.exe file in your emulator install folder– for
example, <Drive>\Openwave\SDK 6.2.2\program\http\OSDK62http.exe.
Click OK.
|
| 7. |
Select the emulator that you just added from the Device Emulators list
and click Test to verify whether the configuration works.
|
| 8. |
You can now view the success message on the device emulator.
Close the emulator and click OK to close the Preferences window.
|
Back to Topic List
To develop a mobile browser application, perform the following
steps:
| 1. |
Select Workspaces in System-Navigator. If System-Navigator is
not visible, then click the View menu and select
System-Navigator. Right-click and select New Workspace... from
the context menu.
|
| 2. |
Change the Workspace Name to MobileApp in the Create Workspace
dialog box and click OK.
|
| 3. |
You see the Create Project dialog box. Enter Mobile for
Project Name and click OK.
|
| 4. |
Right-click the project in the System-Navigator and select New...
from the context menu.
|
| 5. |
Expand Wireless Tier under categories in the left frame and select
Multi-Channel Applications. Select Multi-Channel Application
Creation Wizard in the right frame and click OK.
|
| 6. |
Click Next in the Create a Multi-Channel Wireless Application
welcome page.
|
| 7. |
You see three templates. Select "A one-page Hello World template"
and click Next.
|
| 8. |
Enter the name Demo_Application.jsp for the template
file and click Next.
|
| 9. |
Click Finish.
Observe that the Demo_Application.jsp file and the web.xml
file are generated.
|
| 10. |
You can now modify your application. In the Code Editor, look
for <title> tag and replace Hello World with My
Application.
|
| 11. |
Similarly look for <div> tag and replace Hello World
with Sample Mobile Application.
|
| 12. |
Add the following line of code below the closing tag </div>:
<div class="heading"> Product Details </div>
|
| 13. |
To add the product details, include the following code after the <div>
tag:
<table>
<tr> <th> Name </th> <th> Price </th> </tr>
<tr> <td> Backpack </td> <td> $20 </td> </tr>
<tr> <td> Skybag </td> <td> $75 </td> </tr>
</table>
|
| 14. |
Right-click Demo_Application.jsp. Select Run from the
context menu and select Wireless JSP in Browser to view
the results.
|
| 15. |
You see the application running on the default browser.
|
| 16. |
View the same application on your device emulator:
Right-click Demo_Application.jsp. Select Run from the
context menu and select Wireless JSP in Emulator to view the
results.
|
In this lesson, you've learned how to:
|
Configure device emulator for JDeveloper
|
| |
Write an application that can run on the device emulator as well as a
browser
|
Back to Topic List
|
To ask a question about this OBE tutorial, post a query on the OBE
Discussion Forum |
|
To learn more about Wireless and Mobile Services, click here. |
|
To learn how to setup JWE, click here. |
Place the cursor over this icon to hide all screenshots.
Copyright © 2004 Oracle Corporation. All Rights Reserved.
|
Bookmark
