|
|
Unlike what you get with Visual Studio 2003, no special project template for mobile web applications is being shipped with VS .NET anymore—at least none exists in the current Alpha version. This makes sense; due to merging the controls, a separate treatment has become dispensable. If you want to make a project suitable for mobile devices, you just create a new web site as usual and add the desired pages.
Thanks to adaptive rendering, you can use all known web controls in mobile web sites. Additionally, more controls are included that focus especially on the needs of mobile devices.
In the scenarios up to this point, you've seen several forms within a mobile web page created. In the new version, however, you'll only work with one server-side form, the same way you would with regular pages. Nevertheless, you may want to switch between different views as you would with the cards used in WML, for example. For this purpose, the MultiView and View controls can be used in combination. I already talked about these controls in Chapter 11. The real target for their use, however, is mobile devices.
The example in Listing 12-3 is based on the one in Listing 12-1 with the difference being that now a MultiView and two View controls are used to switch between editing and displaying the user's name. Further on, I've added a button to jump back to the previous view. Figure 12-4 shows the output of the example.
 |
<%@ page language="C#" %>
<script runat="server">
void BT_Submit_Click(object sender, System.EventArgs e)
{
this.LT_Name.Text = string.Format("Your name is: {0}", this.TB_Name.Text);
this.MV_Main.ActiveViewIndex = 1;
}
void LB_Back_Click(object sender, System.EventArgs e)
{
this.MV_Main.ActiveViewIndex = 0;
}
</script>
<html>
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form runat="server">
<asp:multiview id="MV_Main" runat="server" activeviewindex="0">
<asp:view id="View1" runat="server">
<p>
Please enter your name:
<br /><br />
<asp:textbox id="TB_Name" runat="server"/>
<asp:button id="BT_Submit" runat="server"
text="OK" onclick="BT_Submit_Click" softkeylabel="OK" />
</p>
</asp:view>
<asp:view id="View2" runat="server">
<p>
<asp:literal id="LT_Name" runat="server"/>
<br /><br />
<asp:linkbutton id="LB_Back" runat="server" softkeylabel="Back"
onclick="LB_Back_Click">Back</asp:linkbutton>
</p>
</asp:view>
</asp:multiview>
</form>
</body>
</html>
|
Switching between various views results from the use of the MultiView control's ActiveViewIndex property. In the development environment, however, all the views are displayed in parallel and can be visually edited, as shown in Figure 12-5.
| Tip |
Many mobile devices support soft keys, which are nothing but physical buttons that enable you to perform desired actions. The different Button controls have a property called SoftwarekeyLabel that will enable you to define labeling if the (mobile) browser supports it. |
I briefly presented the Pager control to you in Chapter 11. The application of this control is particularly useful for mobile web applications with a limited bandwidth and a small viewing display because you can paginate the content.
Listing 12-4 shows the usage of the Pager control in combination with a DataList control, which doesn't support paging itself. The Customers table of the Northwind database is shown with company name and telephone number.
|
<%@ page language="C#" %>
<html>
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form runat="server">
<asp:sqldatasource id="SqlDataSource1" runat="server"
providername="System.Data.OleDb"
selectcommand="..."
connectionstring="...">
</asp:sqldatasource>
<asp:panel id="PNL_Customers" runat="server">
<asp:datalist id="DL_Customers" runat="server"
datasourceid="SqlDataSource1">
<itemtemplate>
<asp:label text='<%# Eval("CompanyName") %>' runat="server" />
<br />
Phone:
<asp:label text='<%# Eval("Phone") %>' runat="server"/>
</itemtemplate>
</asp:datalist>
</asp:panel>
<asp:pager id="Pager1" runat="server"
controltopaginate="PNL_Customers" itemsperpage="5" mode="NextPrev">
</asp:pager>
</form>
</body>
</html>
|
This source code will work without any problems in the both the desktop and Pocket PC versions of Internet Explorer. Unfortunately, the Openwave simulator still shows the very long customer list, regardless of the paging (see Figure 12-6). Due to this example being heavily based on the examples in the documentation, I presume this involves a bug in the current version that will be eliminated in the Beta version.
It is reasonable to enlarge the list shown previously with the capability to call the individual companies directly. The example doesn't work as easily as I thought. Therefore, I've made an easier example to demonstrate a new control (see Listing 12-5). This one, called PhoneLink, enables you to initiate a telephone call as long as the current device will support it.
|
<%@ page language="C#" %>
<html>
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form runat="server">
<asp:phonelink id="PL_Contact" runat="server"
phonenumber="004976339239990"
navigateurl="contact.aspx">
Call me!
</asp:phonelink>
</form>
</body>
</html>
|
As you can see in the listing, you can specify a URL as well as a telephone number. Depending on the device and its capabilities, either a call is initiated or the given address will be opened in the browser, as shown in Figure 12-7.
|
|
