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.
Overview
In this tutorial, you learn how to use the mobile features
in JDeveloper. You develop a JSF (JavaServer Faces) page within an existing
JSF/JSP/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 in a Web
browser using the embedded OC4J server. Then using the OC4J server, you run
the application in a Palm Simulator. The application can then be used through
a Palm device.
You will need access to an Oracle 10g RDBMS that
contains the sample inventory data. Also, you will need JDeveloper 10.1.3 Studio
Edition and the JDeveloper project used in this tutorial.
Before you begin the tutorial, perform the following steps
if needed:
Click the following link to
access the site where you can download the Palm simulator software.
Register to login and download the Palm Simulator on your local disk.
Once downloaded, unzip it on your local disk.
For those of you using Microsoft® eMbedded
Visual C++, Microsoft® eMbedded Visual Basic, or Microsoft® Visual
Studio 2005, you can also use the included device simulator for PocketPC
devices.
4.
Click the following link to
access the site where you can download the Web Browser software. Follow
the instructions in the documentation on how to install the Web Browser
3.0
in the Palmsimulator.
5.
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.
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_PDA.zip file
on your local disk. Once downloaded, create a directory <JDEV_HOME>\jdev\mywork and unzip EIM_PDA.zip into it.
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 Applications 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 flow diagram of
the application.
5.
The project already includes several pages. The indexPDA.jspx page is the entry point of the application from which the viewInventoryPDA.jspx and reservePartsPDA.jspx pages are callable. In the following section, you will add a new JSF page that displays the part list.
To create a new JSF JSP page, perform
the following steps:
1.
In the Component Palette, select the JSF
Page icon
and
click in the diagram below the reservePartsPDA.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 listPartsPDA.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 . Leave the default Device category to PDA.
Note: In addition to building applications for PDAs, you can use JDeveloper
and ADF Faces to build applications for industrial telnet devices.
Click Next.
4.
In Step 2, make sure the Do Not Automatically
Expose UI Components in a Managed Bean option is selected.
Click Next, and then in Step
3 click Next again .
5.
In step 4, make sure the selected libraries
include ADF Faces HTML and ADF Faces Components.
Click Finish.
6.
The new JSF page listPartsPDA opens in the editor.
7.
You can set the display view for the JSF to a specific
mobile type. Expand the drop-down list next to the Palm icon on the
editor window and choose Dell-Axim as the
type.
To add components and databinding elements, perform the following
steps:
1.
Open the Structure window View
> Structure for listPartsPDA.jspx and expand the f:view node.
2.
For your purposes, you do not need the html node and
its child nodes. Select the html node
and press the [Delete] key. You can also right click
the html node and select the Delete option from the context menu to
complete this step.
After you delete these nodes, the page in the Visual Editor looks a
bit different.
3.
With the ListPartsPDA.jspx
node selected in the Applications Navigator, right click the f:view
node in the Structure pane and from the context menus, select Insert
inside > ADF Faces HTML > Html.
Note: The components listed/available in these menus are
only components supported on PDAs. All components not supported
on PDAs are filtered out.
4.
Right-click
the afh:html node
in the Structure pane and from the context menus, select Insert
inside > Head.
In the Property palette change the Title attribute from Title 1
to Enterprise Inventory Manager.
5.
Right-click the afh:html node
in the Structure pane and from the context menus, select Insert inside
> Body.
6.
Right-click the afh:body node
in the Structure pane and from the context menus, select Insert inside
> Form.
7.
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 PanelPage
from Title 1 to Enterprise Inventory Manager.
8.
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.
9.
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 OutputFormatted option, and then click OK.
Double-click the OutputFormatted tag in the structure
pane and enter
<b>The following is the list of available parts</b>.
10.
In the structure pane, expand the PanelPage
facets node, right-click the menuGlobal entry and from the context menus, select
Insert inside > MenuButtons
11.
Right-click the af:menuButton tag
and from the context menus select Insert inside > CommandMenuItem.
In the Property Inspector set the Text value to Main
Menu and the
Action value to index.
12.
Repeat the previous step to create three additional menuButtons with
the following values:
Adding EJB 3.0 data-bound table using data controls
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 InventoryManagerBean node
and select the last item Create Data Control
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 listPartsPDA.jspx under ViewController
> Web Content
5.
In the Data Controls pane in the top right hand corner, expand InventoryManagerLocal, then expand findAllPart.
6.
When you drag the Part object
from the Data Controls pane to the panel page in the
Structure pane, the following context menu appears.
7.
Choose Tables > ADF Read Only Table... option from the menus like shown below:
In the Edit Table Columns dialog, first modify the
display labels to match the value bindings (ie. Id, Name,
Description). Then move the description field to the bottom by highlighting
It and then clicking on the bottom button. When these
are complete the dialog should like this:
Now click OK, and a databound table should appear
on the design pane of listPartsPDA.jspx.
8.
To finish off the formatting of the table, double click the table node in the structure pane, click the Column Summary tab, and for each column change the header to match the column value. So that the headers for the columns should now be Id, Name, and Description respectively.
Then go to the formatting tab, and check the Include Range Navigation box,
with rows
= 5.
Then check the Include Table Banding box,
click rows and set the banding
interval to 1. The dialog will look
like this:
After clicking OK, the listPartsPDA.jspx design
view will look like this:
In the editor window, click the faces-config.xml tab to display the
diagram.
2.
In the Component Palette,
select the Faces Navigation Case icon from the Faces
Navigation Diagram group.
3.
In the Visual Editor diagram view, click the indexPDA.jspx page,
then the listPartsPDA.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 indexPDA.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, click the faces-config.xml tab.
Click the Source tab at the bottom of the diagram to
display the XML code. Copy the navigation rule cases about the ListParts page and paste it in the navigation rule elements for listPartsPDA
from-id.
Using Windows explorer.
Open the following nodes: <palmsimulator_home>\ palsim2 and
double-click the PalmSim.exe file
to execute the program.
In the Open ROM File dialog, select the Simulator_Full_EFIGS_Release.rom file,
then Open.
2.
The Palm Simulator starts loading.
Wait until you are prompted to
pick a language. Select a language option, and then click OK.
3.
After the Applications are loaded, select the Web icon
in the Simulator.
4.
In the File Types dialog box, all the file types should be selected as
the default. Click OK.
5.
On the Web Browser screen, click Connect to establish the connection
with the running OC4J server.
Wait until you receive a network error message, then click OK.
6.
Click in the Web Browser field to display the Open URL screen.
Enter the URL that was displayed in your browser when you ran the
application. If you've closed your browser, you can retrieve the
URL in the Embedded
OC4J
server
log window in JDev.
Note: You must type in the URL; copy and paste doesn't work.
Then click OK
7.
The Index page should display in the Palm Simulator.
8.
Click the List Parts link to open the JSF page you created.
9.
You can now work with the application in the Palm Simulator.
In this tutorial, you created a JSF JSP page, bound
data to a table component, and ran the application using the OC4J server in
a Web browser and in a Palm Simulator that emulates a mobile environment.
Bookmark
and
click in the diagram below the reservePartsPDA.jspx icon.
in the Simulator.
