This tutorial demonstrates how to create a JSP application; select and apply a template; create an XML application; and create a server-side click-across event to link a displayed column (Headline) to a hidden column (URL). This tutorial also shows how to use grid rules to optimize data presentation on a mobile device. (See the Unwired Accelerator Developer’s Guide for more information about grid rules). The resulting NewsStory application enables you to select a headline and display the corresponding news story.
This tutorial is divided into several procedures, so you can refer to them later when you create your own applications.
Creating the NewsStory
(JSP) application
Log in to Mobile Web Studio.
Select Applications in the left pane, and click the New button to launch Application Builder.
In the Application Builder, click the down arrow next to the Add button. In the menu that appears, select JSP Element.
In the JSP Element window, enter:
Use Web Application – select this option.
WAR File – enter onepage.war.
Web App Display Name – enter onepage.
Initial Resource – enter /portlets/jsp/documentdisplay.jsp.
Web App Qualified URLs – select this option.
Enable Grid Rules – unselect this option.
Single-Sign On Required – unselect this option.
Input Parameters – enter url=http://www.yahoo.com.
Later, you will create the TopNews application and create an event
for its url parameter.
For remote JSP applications, only applications containing
grid data or simple HTML are supported on Wireless Application Protocol
(WAP) devices.
Click Preview to preview the JSP page showing Yahoo’s Web site. If you do not see the Yahoo Web site, verify your input; you must see the Yahoo Web site before you go on.
Click Next to continue.
In Element Name, enter documentdisplay,
and click Finish. The document display element is added to the Element
List in Application Builder.
Figure 2-1: Document display element
The JSP application does not yet display in the Application
Builder preview pane. You must change the template so that the IFRAME
in the document display JSP
expands and fills the application’s available screen space.
Click the Template button in Application Builder.
In the Find Template window, verify that “html” is selected from the Type drop-down list, then click Search.
When the template list appears in the detail pane, select the OP Basic template, and click Select. (The template name indicates the template layout; for example, OP-1-1 Basic means the template creates a table with one row and one column).
The Find Template window closes and the template is applied to the application. It may take a few moments for the new preview of the application to appear showing the Yahoo.com Web site in the preview pane.
In the Application Builder window, click Save.
On the Finish window, make these entries; for all other fields, accept the defaults:
Click Finish to create the application.
Click OK to confirm.
Click the Close button in the upper-right corner to close the Application Builder window.
In Mobile Web Studio, approve the application:
Click New under Application Manager Status in the middle pane. The NewsStory application displays in the detail pane.
Right-click NewsStory, and select Approval Status | Approved.
Click OK to confirm.
Select Approved from the Application Manager Status menu. You see the NewsStory application in the detail pane.
You can preview the NewsStory application, although it is not yet complete:
Select NewsStory in the detail pane, and click Preview. The Yahoo.com Web site displays in a window.
Close the window.
Creating the TopNews (XML) application
In this step, create an XML application called, “TopNews,” and use grid rules to modify its presentation for the mobile device. You will display the three most important columns, and identify two hidden columns, one of which will be used in a click-across event.
Log in to Mobile Web Studio.
Select Applications in the left pane, and click the New button to launch Application Builder.
Click the arrow to the right of Add, and select XML Element. You see the XML Element Definition window.
In XML URL, enter:
http://www.moreover.com/cgi-local/page?o=xml_1&c=Top%20US%20stories
For Content XSLT, click the Select button next to the text box. The Find XSLT Template window displays.
In Type, make sure the drop-down list is set to XSL, and click Search in the upper-left corner of the window. A list of templates displays in the detail pane.
Click the moreover_content_xsl template.
Click Select to set this as the Content XSLT template for the XML Element. The Find Template window closes.
On the XML Element Definition window, click Preview to test the settings entered. After a few moments a seven-column table with multiple rows displays in the Preview pane.
Click Next to continue.
Use the Define window to identify record 1 as the header
row. In the Define Record Layout section, click “Records
contain labels.” When the “Labels are displayed
in Record” option displays, accept the default, 1. Click
Next.
On the Filter window, rename the headers of the second column:, third, fourth, sixth, and seventh columns. The procedure for changing the headers is the same for all the columns:
To change the header of the second column:
In the left-most drop-down list, select “Edit Record.”
Make sure the second drop-down list is set to “number.”
In the first text box, enter 1 to
indicate the first record.
For Field, select “number.”
In the second text box, enter the number of the column
of which you are changing the name, for example 2 to
indicate the second column.
In the fourth drop-down list, select “value” from the “value/image” drop-down list.
In the third text box, enter a name for the field. For
example, for column 2, enter URL.
This creates the header title for the column.
Click Add. In Preview, the field title has changed to the value you entered, and a new rule is added under Current Filter Rules.
This table shows the values to enter for each column:
Col 2 |
Col 3 |
Col 4 |
Col 6 |
Col 7 |
|
|---|---|---|---|---|---|
Step e |
2 |
3 |
4 |
6 |
7 |
Step g |
URL |
Headline |
Source |
SourceURL |
Date |
To include only columns 3, 4, and 7:
In the left-most drop-down list, select “Include field(s).”
Make sure the second drop-down list is set to “number.”
In the text box, enter 3,4,7 to
indicate you want to include these columns (Headline, Source, and
Date).
Click Add. In Preview, field 3, 4, and 7 are highlighted in blue, and a new rule is added under Current Filter Rules.
To indicate that columns 2 and 6 are hidden from view:
In the left-most drop-down list, select “Include hidden field(s).”
Make sure the second drop-down list is set to “number.”
In the text box, enter 2,6 to
indicate these columns (URL and SourceURL) should be hidden from
view.
Click Add. In Preview, fields 2 and 6 are highlighted in green, and a new rule is added under Current Filter Rules.
Click Next.
In the Configure Parameters window, click Next.
The Preview window displays the modified table in the lower part of the screen. Only Headline, Source, and Date are displayed (3,4,7) in grid format.
In Element name, enter TopNews (no
space) as the XML Element name, and click Finish.
The XML Element Definition wizard closes and the XML Element displays under the Element List in the Application Builder window.
In the Application Builder window, click Save.
In the Finish window, make this entry; accept the defaults for all other fields:
Click Finish.
Click OK to confirm.
Click Close in the upper-right corner to close Application Builder.
Click New under Application Manager Status in the middle pane. The TopNews application displays in the detail pane. Do not approve it yet.
Defining a click-across
event
In this step, define a server-side click-across event for the TopNews application that links the Headline field with the hidden URL field. You also use a grid rule formula to link the two fields.
Right-click TopNews in the detail pane, and select Define Events.
In the Define Click-Across Events window, click Select to the left of the data grid. The hidden fields (URL and SourceURL) are included in the grid.
Click Next to continue.
Under Assign An Event, enter these values:
Row – enter 2- (the
number 2 followed by a dash, no space) This places the event on
record 2, the last row, excluding the header. Alternatively you
could enter all to include
the header as well as all the rows.
Column – enter 2 for
Headline.
Event Name – enter url.
This event name is the display name of the Input Parameter you entered
(url=http://www.yahoo.com)
when you created NewsStory.
With Drop Down List – select “Cell
value (other cell).” A formula ($R0F0)
displays in the formula box. R0 indicates
a row index, and F0 indicates
the field, or column, index.
Formula Box – replace the default formula
with $R0F1 to indicate
any row (R0 indicates the
current row being processed) and the first column of the row (F1 indicates
column 1) of the application. In this case, $R0F1 links
the hidden URL field (column 1) with Headline (column 2) to. See
the Unwired Accelerator Developer’s Guide for information
about formulas in grid rules.
Multi-value – leave unselected.
Client-side – make sure the option is unselected to indicate the event is a server-side event. This option acts like a toggle. When the option is selected, it indicates a client-side event; when the option is not selected, it indicates a server-side event.
Click Find Application to open the Search window, and click Search.
In the Results pane, select NewsStory and select Add. The Search window closes and NewsStory displays in the Application Name field.
In the Assign An Event section, click Add. After a moment, the second field in the grid is highlighted in blue to show the event is defined for the field. The fields are underlined indicating a link is established. This is the link to the hidden URL field.
Click Next to continue. You see a preview of the application for which the event was defined.
Click Finish to save the event definition to the application.
In Mobile Web Studio, approve the application:
Right-click the TopNews application in the detail pane, and select Approval Status | Approved.
Click OK to confirm.
Select Approved from the Application Manager Status menu. You see the NewsStory application in the detail pane.
Previewing the TopNews application
Select the TopNews application in the detail pane, and click Preview. The Web site where the news story is located displays.
Select a Headline link.
Verify that the correct article displays.
Close the window.
Approving the application
Right-click the TopNews application in the detail pane, and select Approval Status | Approved.
Click OK to confirm.
Select Approved under Application Manager Status and verify the TopNews application displays.
