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 to upload – leave blank.
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 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.
Click Next to continue.
Click Finish. The document display element is added to the Element List in Application Builder.
The JSP element does not yet display in the Application Builder preview pane. The template needs to be changed 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 (otherwise 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
On the Split window, click Next as this feature is not used in this tutorial.
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, third, fourth, sixth, and seventh 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 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 URL to
create the header title.
Click Add. In Preview, the field 2 title has changed to URL, and a new rule is added under Current Filter Rules.
To change the header of the third 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 3 to
indicate the third column.
In the fourth drop-down list, select “value” from the “value/image” drop-down list.
In the third text box, enter Headline to
create the header title.
Click Add. In Preview, the field 3 title has changed to Headline, and a new rule is added under Current Filter Rules.
To change the header of the fourth 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 4 to
indicate the fourth column.
In the fourth drop-down list, select “value” from the “value/image” drop-down list.
In the third text box, enter Source to
create the header title.
Click Add. In Preview, the field 4 title has changed to Source, and a new rule is added under Current Filter Rules.
To change the header of the sixth 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 6 to
indicate the sixth column.
In the fourth drop-down list, select “value” from the “value/image” drop-down list.
In the third text box, enter SourceURL to
create the header title.
Click Add. In Preview, the field 6 title has changed to SourceURL, and a new rule is added under Current Filter Rules.
To change the header of the seventh 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 7 to
indicate the seventh column.
In the fourth drop-down list, select “value” from the “value/image” drop-down list.
In the third text box, enter Date to
create the header title.
Click Add. In Preview, the field 7 title has changed to Date, and a new rule is added under Current Filter Rules.
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 to continue. The Window 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.
Click Next to continue.
On the Continuous Capture window, click Finish since this feature is not included in this tutorial. 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 all other defaults):
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-.
This places the event on record 2 to 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 Portlet 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. A preview of the application for which the event was defined displays.
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 the Preview button. The Yahoo.com Web site displays in a window.
Select a Headline link.
Verify that the correct article displays.
Close the window.
| Copyright © 2005. Sybase Inc. All rights reserved. |
|
|
