This tutorial demonstrates how to select and apply a template, create an application, create an event, and create a listener for the event. This tutorial also uses grid rules to manipulate the content and presentation of the data. See the Unwired Accelerator Feature Guide for more information about grid rules.
The workflow of this tutorial is divided into several procedures, so you can refer to them later when you create your own applications. Complete all the procedures to complete the tutorial.
Selecting a template
In this step, use the Find Template window to locate and select a template.
Currently, only JSP templates are valid for mobile applications.
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 the Select button to set this as the Content XSLT template for the XML Element. The Find Template window closes after you click Select. You have now searched for and selected a template.
Creating the application
Next, create the XML application.
On the XML Element Definition window, click Preview to test the settings entered. After a few moments a seven-column table 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.” The “Labels are displayed in Record” option displays.
Accept the default 1,
and click Next. The Filter window displays.
On the Filter window, enter the following rules:
To 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” from the drop-down list.
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” from the drop-down list.
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” from the drop-down list.
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” from the drop-down list.
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” from the drop-down list.
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 only want to include these columns.
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 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.
In Element name, enter Top News 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 is added to the Application Builder.
In the Application Builder window, click Save.
In the Finish window, make this entry (accept all other defaults):
Click the Finish button.
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.
Defining a click-across
event
In this step, define a client-side click-across event for the TopNews application using the hidden URL field.
Right-click TopNews in the detail pane, and select Define Events.
In the Define ClickAcross Events window, click the Select button that is to the left of the data grid.
Click Next to continue.
Under Assign An Event, enter these values:
Row – enter all. This
places the event on the header as well as the records; alternatively
you could enter 2- (a 2 followed
by a dash, no space) to indicate every record from 2 to the last
record, excluding the header).
Column – enter 2.
Event Name – enter TopNewsURL.
with Drop Down List – select “Cell value (other cell).”
Formula Box – enter $R0F1 to
indicate any row (R0 indicates an index row) and in the first field
(F1 indicates field 1) of the application. See the Unwired
Accelerator Feature Guide for information about grid rules.
Multi-value – deselect the check box.
Client-side – select the check box.
Notify Now – select the check box.
Notify Across Page – deselect the check box.
Click the Add button to add the event. After a moment the second field in the grid is highlighted in blue to show the event has been defined for the field. The fields are underlined indicating a link has been established.
Click Next to continue. In the Preview window, a preview of the application, for which the event was defined, displays.
Click Finish to save the event definition to the application.
Creating a listener application
In this step, create an application that listens for the TopNewsURL click-across event, and displays the URL for the news story.
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. The JSP Element Definition window displays.
On the JSP Element window, enter these values:
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.
For remote JSP applications, currently only applications
containing grid data or simple HTML are supported on WAP devices.
Click the Preview button to preview the document display JSP page showing Yahoo's web site.
Click Next to continue.
In Element Name, enter document display as
the element name.
Click Finish. The document display element is added to the Element List in Application Builder.
The JSP element does not yet display properly in the Application Builder preview. 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 to launch the Find Template window.
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 something about 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 the Finish button to create the application.
Click OK to confirm.
Click the Close button in the upper right corner to close the Application Builder window.
When applications are first saved their status is set to “New.” In the Application Manager, click on “New” in the list of status types that is just to the right of the Build menu.
Defining a client-side click-across listener
In this step, define a client-side click-across listener on the NewsStory application using the TopNewsURL event defined earlier.
Right-click NewsStory, and select Define Listeners.
In Define ClickAcross Listeners, enter the following values:
Event Name – enter TopNewsURL.
Listener Param – select “url”.
Auto Submit – select this option.
Click the plus icon ( + ) to add the event-to-parameter listener association.
Click OK to save the listener to the application.
You have created a link between the TopNewsURL event you just created and the NewsStory listener application you created on page §.
| Copyright © 2005. Sybase Inc. All rights reserved. |
|
|
