Building a Mobile Application for Telnet Devices with ADF Faces and JDeveloper
Building a Mobile Application for Telnet Clients with
ADF Faces and JDeveloper
In this tutorial, you use Oracle JDeveloper 10g Release
3 to design, build, test and deploy an ADF Faces application on a Telnet emulator.
Approximately 30 minutes
This tutorial covers the following topics:
 Place
the cursor over this icon to load and view
all the screenshots for this tutorial. (Caution: This action loads all
screenshots simultaneously, so, depending on your Internet connection,
may result in a slow response time.)
Note: Alternatively, you can place the cursor
over an individual icon in the following steps to load and view only the
screenshot associated with that step. You can hide an individual screenshot
by clicking it.
In the tutorial, you learn how to use the mobile features
in JDeveloper. You develop a JSF (JavaServer Faces) page within an existing
JSF/EJB 3.0 application, add components to the page, and create a table that
binds to an EJB 3.0 Data Control. Also, you run the application on a Telnet
client using the embedded OC4J server and ITS. The application can then be used
on a Telnet device.
Back to Topic List
Back to Topic List
You will need access to Oracle Database 10g, containing
the sample inventory data. Also, you will need JDeveloper Release 3 (10.1.3)
Studio Edition and the JDeveloper project provided with this tutorial.
Before you begin the tutorial, perform the following steps,
as needed:
Back to Topic List
To Check
software requirements, perform the following
steps:
| 1. |
Have access to or have installed Oracle Database
10g (Release 2 or Release 1). You can download it from Oracle Technology
Network (http://www.oracle.com/technology/software/products/database/oracle10g/index.html).
|
| 2. |
Have access to or have installed Oracle JDeveloper
10.1.3 Studio Edition. You can download it from Oracle Technology
Network (http://www.oracle.com/technology/products/jdev/index.html).
|
| 3. |
Start JDeveloper. Double-click the JDeveloper executable
(<JDEV_HOME>\jdeveloper.exe) found in the root
directory where you unzipped it.
If the Migrate User Settings dialog box opens, click NO.
Close the Tip of the Day window.
|
| 4. |
The JDeveloper IDE should now be displayed.
|
Back to Topic
Back to Topic List
To create the database
schema, please perform the following steps:
| 1. |
Download the sql.zip file
and unzip it on your local drive (for example: in C:\OBE_for_Mobile).
It will create a new subdirectory called sql.
|
| 2. |
Open a Command Prompt window in the
newly created sql directory (in our example, that will be C:\OBE_for_Mobile\sql\
directory).
|
| 3. |
Connect to the Oracle database using Oracle
SQL*Plus as system using sqlplus
system[@dbname] (for example: sqlplus
system)
|
| 4. |
Run create_user.sql SQL
script and pass two parameters to it: username and password (for example:
sql>@@create_user.sql
parts welcome)
|
| 5. |
Connect to the database as the newly created user.
connect parts/welcome
|
| 6. |
Run create_all.sql SQL
script (sql>@@create_all.sql)
Close the command window. |
Back to Topic
Back to Topic List
To create a new Database Connection
in JDeveloper
| 1. |
Click the Connections
Navigator tab.
|
| 2. |
Right-click the Database node and select New
Database Connection ...
|
| 3. |
The Create Database Connection wizard comes up.
Click Next on the Welcome page.
|
| 4. |
Change the connection name to partsDB,
leaving the default value for the Connection Type: Oracle (JDBC).
Click Next.
Note: The precreated project uses the partsDB connection
name. Hence, you must use that name.
|
| 5. |
Enter the username and password (parts/welcome)
for the database user that you created earlier, and click Next.
|
| 6. |
Specify the connection details and click Next.
|
| 7. |
Test the connection by pressing the Test Connection button. If the test does not succeed then go back and fix any problems.
Press Finish to create the connection and close the
wizard.
|
Back to Topic
Back to Topic List
To upload a prebuilt application with an existing
project, perform the following steps:
| 1. |
Right click the following link to download the
starter application EIM_Telnet.zip file
on your local disk. Once downloaded, unzip it into the <JDEV_HOME>\dev\mywork
directory.
|
2.
|
In JDeveloper, select File > Open to load the prebuilt
workspace.
In the Open dialog box, select the EIM_PDA.jws file located in the <JDEV_HOME>\jdev\mywork\EIM_Telnet directory. Then click Open.
|
3.
|
In the Navigator, expand the nodes EIM_PDA > ViewController > Web Content > WEB-INF and double-click the faces-config.xml file.
|
| 4. |
The editor window displays the page flow diagram
of the application.
|
| 5. |
The project already includes several pages. The indexTelnet.jspx page is the entry point of the application from which the viewInventoryTelnet.jspx and reservePartsTelnet.jspx pages are callable. In the following section, you will add a new JSF page that displays the part list.
|
Back to Topic List
To create a new JSF JSP page, perform
the following steps:
1. |
In the Component Palette, select the JSF Page
icon  and
click on the diagram below the reservePartsTelnet.jspx
icon.
|
2. |
Double-click the new page on the diagram to
open the Create JSF JSP Wizard.
Click Next on the Welcome page.
|
| 3. |
In step 1 of the Create JSF JSP Wizard, enter listPartsTelnet.jspx
as the file name (the extension is provided depending on the JSP type
you select). Select the JSP Document as the type, and
select the Add Mobile Support check box . Change the
default Device category to Telnet.
Click Next.
|
| 4. |
In Step 2, make sure the Do Not Automatically
Expose UI Components in a Managed Bean option is
selected.
Click Next.
|
| 5. |
In step 3, make sure the selected libraries
include ADF Faces Components
|
| 6. |
In step 4, set the title of the page to be Enterprise Inventory Manager.
Click Finish.
|
| 7. |
The new JSF page listPartsTelnet opens in the editor.
|
| 8. |
You can set the display view for the JSF to a specific
mobile type. Expand the drop-down list next to the Command prompt icon on the
editor window and choose Symbol-Pdt6846 as the
type.
The JSF page display should look like this:
|
Back to Topic List
To add components and databinding elements, perform the following
steps:
1. |
Open the Structure window View
> Structure for listPartsTelnet.jspx and
expand the f:view node.
|
2.
|
Right-click the af:form node
in the Structure window and from the context menus, select Insert
inside > PanelPage.
Notice the change in the Design view. The page is displayed using
the appropriate design-time renderers.
In the Property palette, change the Title attribute of the panel Page
from Title 1 to Enterprise Inventory Manager.
|
3.
|
Right-click the af:panelPage node
in the Structure window and from the context menus, select Insert inside
> ADF Faces Core ...
In the Insert ADF Faces Core Item dialog box, select the PanelHeader option, then click OK.
In the Property palette, change the Text attribute of the PanelHeader
from panelHeader 1 to Parts List.
|
4.
|
Right-click the af:panelPage node
in the Structure window and from the context menus, select Insert
inside
> ADF Faces Core...
In the Insert ADF Faces Core Item dialog box, select the OutputText option, and then click OK.
Double-click the OutputText tag in the Structure pane
and enter: The following is the list of available parts.
|
5.
| The JSF page display should look like this:
|
Back to Topic List
To create a parts list table with all available parts
from an EJB 3.0 Session bean, follow the steps below:
1. |
In JDeveloper, go to View > Application Navigator.
Expand EIM_PDA > Model > Application Sources > oracle.wireless
> demo > part > model. You will see several EJB 3.0
Entity beans and one EJB 3.0 Session bean, InventoryManagerBean.java.
|
| 2. |
Right-click the session bean InventoryManagerBean.java
and select the Create Data Control option from the context
menu
|
3.
|
In the EJB Interface Chooser dialog, select Local and
click OK. This will make several data controls related
files.
|
4.
|
Collapse the Model node in the
Applications Navigator, and double click the listPartsTelnet.jspx under ViewController > Web
Content
|
5.
|
In the Data Controls pane in the top right hand
corner, expand InventoryManagerLocal, then expand findAllPart and
select the Part data control component.
|
6.
|
Drag the Part object from the Data Controls pane to
the panel page in the Structure pane. Then the following context menu
appears:
|
7.
|
Choose Tables > ADF Read-Only Table... option
from the menus.
In the Edit Table Columns dialog, first modify the
display labels to match the value bindings (ie. Id, name, description).
Now move the description field to the bottom by highlighting
it and then clicking the bottom button.
Finally, change all of the Component to use fields to ADF Output
Text. When these are complete, the dialog should look like this:
Now click OK, and a databound table should appear
on the design pane of listPartsTelnet.jspx.
|
8.
|
Fix the table headers by double-clicking the table in
the Structure pane, clicking the Column Summary tab,
and changing the headers to Id, Name,
and Description respectively.
|
9.
|
After deleting the selection facet, the listPartsTelnet.jspx design view will look like this:
|
Back to Topic List
| 1. |
In the editor window, click the faces-config.xml tab to display the
diagram.
|
| 2. |
In the Component Palette,
select the JSF Navigation Case icon from the JSF
Navigation Diagram group.
|
| 3. |
In the Visual Editor diagram view, click the indexTelnet.jspx page,
then the listPartsTelnet.jspx page. A navigation link
is added to the diagram, with a default outcome of success.
Double-click the link and change the from-outcome property
to list.
|
| 4. |
In the Applications Navigator, select the indexTelnet.jspx page
and expand the nodes in the Structure pane.
|
| 5. |
Right-click the af:panelGroup and from the context
menus select Insert inside > ADF Faces Core...
|
| 6. |
In the Insert ADF Faces Core Item dialog box, select CommandLink and then click OK.
|
| 7. |
In the Property Inspector, set the Text value to
List Parts and the Action value to list.
|
| 8. |
The Structure pane should now look like this:
|
| 9. |
In the Navigator window under ViewController > Web Content
> WEB-INF, double-click the web.xml file.
Locate the javax.faces.STATE_SAVING_METHOD parameter
and change its value from client to server
as shown below.
|
| 10. |
In the editor window, click the Diagram tab
to display the diagram. Right-click the indexTelnet.jspx icon
and select the Run option.
|
| 11. |
A telnet client should be spawned and the telnet device screen should
be shown. In telnet, this is the only way for the server to know what
agent is connecting to the application. Simply select the first device
Symbol PDT 1 by pressing enter.
|
| 12. |
The Index page is displayed on the telnet client.
Press the down arrow to navigate to the List Parts commandLink,
and press enter to select it.
This opens the List Parts page you just created.
|
| 13. |
The Parts List page is displayed on your telnet client.
|
Back to Topic List
In this tutorial, you created a JSF JSP page, bound
data to a table component, and ran the application using a Telnet emulator.
Back to Topic List
Place the cursor over this icon to hide all screenshots.
|
