Example: Displaying the tableView Web Control (SAP Library

Example: Displaying the tableView Web Control

The following example of the tableView Web control shows the different possibilities available for displaying information on different mobile devices. This example also makes it clear that the Web controls for each device are displayed correctly, without your having to develop special source code.

The Web controls are displayed for a specific device in such a way that they support the properties and characteristics of each device.

For example, the same JSP source code contained in the tableView Web control, is displayed as follows on the following mobile devices (and emulators):

(1) Pocket-PC emulator	(2) Palm emulation with Eudora Browser	(3) WAP emulator

JSP example: Source code

<%@ page import="com.sapportals.htmlb.*,com.sap.mobile.htmlb.rendering.*, com.sapportals.htmlb.table.TableView,com.sapportals.htmlb.event.*" %>

<%@ taglib uri="htmlb.tld" prefix="hbj" %>
<hbj:content id="myContext" >
<hbj:page title="TableView tag">
<hbj:form id="myFormId" method="post" action="">
<jsp:useBean id="myTableViewBean" scope="page" class="com.sap.mobile.htmlb.test.MobileJspBean" />
<%
if( myContext instanceof MobilePageContext )
myTableViewBean.model.setPageContext((IMobilePageContext)myContext);
%>
<hbj:tableView id="myTableView1"
model="myTableViewBean.model"
design="ALTERNATING"
headerVisible="true"
footerVisible="true"
fillUpEmptyRows="true"
navigationMode="BYLINE"
headerText="TableView example 1"
onNavigate="myOnNavigate"
visibleFirstRow="1"
visibleRowCount="5"
rowCount="20"
>

<% // EventHandler for tableView
Event myEvent = myContext.getCurrentEvent();
if (myEvent != null) {
if (myEvent instanceof TableNavigationEvent) {
TableView table = (TableView)myContext.getComponentForId("myTableView1");
TableNavigationEvent event = (TableNavigationEvent)myEvent;
myTableView1.setVisibleFirstRow(event.getFirstVisibleRowAfter());
}
}
%>
</hbj:tableView>
</hbj:form>
</hbj:page>
</hbj:content>

Weather data binding: Source code

package com.sap.mobile.htmlb.test;

import com.sap.mw.jco.JCO;

import com.sapportals.htmlb.table.TableColumn;
import com.sapportals.htmlb.enum.TableColumnType;
import com.sapportals.htmlb.table.TableViewModel;
import com.sap.mobile.htmlb.table.MobileTableViewModel;

public class MobileJspBean {
static String[][] strWeather =
{
{ "Berlin", "13", "8", "cloudy", "4 NW", "cloudy.jpg" },
{ "Frankfurt", "9", "4", "rainy", "3 S", "rainy.jpg" },
{ "Rome", "20", "10", "sunny", "3 SW", "sunny.jpg" },
{ "London", "12", "7", "rainy", "4 NW", "rainy.jpg" },
{ "Vienna", "11", "7", "cloudy", "3 NW", "cloudy.jpg" },
{ "Lisbon", "23", "12", "sunny", "3 NE", "sunny.jpg" },
{ "New York", "8", "2", "cloudy", "1 N", "cloudy.jpg" },
{ "Los Angeles", "24", "14", "sunny", "2 SE", "sunny.jpg" },
{ "Kapstadt", "20", "17", "cloudy", "4 S", "cloudy.jpg" },
{ "Peking", "17", "2", "sunny", "3 S", "sunny.jpg" },
};

static Object[] colnames = {
"City", "Max", "Min", "Weather", "Wind", "Img" // header
};

static int[] colprios = {
1, 1, 2, 2, 2, 1 // header
};

// Properties:
public MobileTableViewModel model;

public TableViewModel getModel() {
return this.model;
}
public void setModel(MobileTableViewModel model) {
this.model = model;
}

// Default constructor:
public MobileJspBean() {

String mimePath = "/mobilehtmlb/mimes/";
int i=0;
while( i<10 ) {
if( strWeather[i][5].indexOf('/') == -1 )
strWeather[i][5] = mimePath + strWeather[i][5];
i++;
}

model = new MobileTableViewModel(strWeather, colnames, colprios);

TableColumn col6 = model.getColumnAt(6);
col6.setType(TableColumnType.IMAGE);

}

Note

We used emulators to consider the display of JSPs. Emulators are programs that simulate the behavior of real devices. They are particularly well-suited to testing applications, above all if you do not have the device available.

As you can see, the example of the weather information table looks different on different browsers. However, it has been displayed on the screen according to the supported browser characteristics.

(1) A pocket PC with a color screen can display pictures in .jpg or .gif format along with gridlines, columns and rows in a tabular form, with appropriately-aligned cell contents.
(2) The Eudora Browser used on Palm devices can display table rows, but cannot put data in vertically-aligned columns.
(3) Conversely, the WAP-enabled mobile telephone from Siemens can display tables in the expected way. It also supports pictures in wireless bitmap (WBMP) format. However, this mobile telephone can only realistically display three columns, since it has a relatively small screen. You can specify the number of columns that a mobile device should display yourself using priorities (see above in the highlighted source code for weather data binding). To do this, the MobileTableViewModel class is extends.

Note

However, other WAP-enabled mobile telephones display tables differently (see isTableSupported Method of the ClientInfo Interface).