Professional Documents
Culture Documents
net programming
By : Mr.M.M.Muzammil ICTSociety-Kandy
Background
Cell phones (mobile telephones) have become part of our life style. One exciting thing about mobile devices is their
ability to connect to the Internet and to execute web applications. Mobile applications can now be developed to deliver
any types of data, to any user, any place in the world! Different mobile devices support different programming languages.
Some support WAP and WML, some support HTML or a limited version of HTML, and some support both or a different
language. To support all types of mobile devices, developers must create one different application for each language.
With .NET Mobile, Microsoft has introduced a new platform for developing mobile applications. This tutorial is about
how to develop applications with an extension to the .NET Framework, called the Microsoft Mobile Internet Toolkit
(MMIT) or simply .NET Mobile.
.NET Mobile
.NET Mobile is an extension to Microsoft ASP.NET and the Microsoft's .NET Framework. .NET Mobile is a set of
server-side Forms Controls to build applications for wireless mobile devices. These controls produce different output for
different devices by generating WML, HTML, or compact HTML.
Mobile Devices
The Internet
Internet Information Services - IIS
The .NET Framework
ASP.NET
.NET Mobile
Software Requirements
To develop mobile applications with .NET Mobile, you must have the following components:
You will need Windows 2000 to develop .NET applications (IIS 5 (Internet Information Services) is a part of Windows
2000You also have to install MMIT (.NET Mobile).
How To Start
The following ASP.NET page displays "Hello W3Schools" as a WML card in a WML enabled cell phone:
<%@ Page
Inherits="System.Web.UI.MobileControls.MobilePage" %>
<%@ Register
TagPrefix="mob"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<mob:Form runat="server">
<mob:Label runat="server">Hello W3Schools</mob:Label>
</mob:Form>
The Page directive tells ASP to use (inherit) mobile page handling instead of regular page handling (like the one used for
traditional browsers).
The Register directive defines the prefix that will be used for mobile controls. We have used
"mob", but you can use any prefix you like.
The <mob:Form> element tells the server to create a mobile form control.
The <mob:Label> element tells the server to create a mobile label control with the text "Hello W3Schools".
When the ASP .NET page executes, it will produce the following output to a WAP enabled mobile phone:
<?xml version='1.0'?>
<!DOCTYPE wml PUBLIC
'-//WAPFORUM//DTD WML 1.1//EN'
'http://www.wapforum.org/DTD/wml_1.1.xml'>
<wml>
<card>
<p>Hello W3Schools</p>
</card>
</wml>
<html>
<body>
<form id="ctrl1" name="ctrl1" method="post"
action="example.aspx">
<div>Hello W3Schools</div>
</form>
</body>
</html>
Conclusion
.NET Mobile will generate WML code for WAP enabled cell phones and HTML code for devices like the Pocket PC.By
detecting the browser, .NET Mobile will output correct content, providing developers with a powerful tool to develop
single applications that will serve many different mobile devices.
Since mobile web pages detect your browser, you can test your mobile applications with a standard browser.When a
mobile web page detects a web browser it will produce HTML output.
Openwave Simulators
The Openwave mobile browser is the most common browser used in Internet-enabled cellphones.An emulator can be
downloaded from http://www.openwave.com
This toolkit contains emulators for most of the different Nokia devices.This toolkit can be downloaded from
http://forum.nokia.com
.NET Mobile Forms are specialized web forms designed to work on different mobile
devices.
Mobile Pages
A mobile page is much the same as an ordinary .NET web page. It is a text file with an aspx extension, and it can contain
a variety of web controls.
The difference is the page directive that identifies the page as a mobile page, and the controls used on the page, which are
mobile controls.
The mobile controls can be programmed device-independently, and the page will produce an output that suits the device
that access it.
Mobile Forms
Each mobile page must have at least one mobile form, and each mobile form can have a number of mobile controls.
Note that mobile pages can have multiple mobile forms. This is due to the nature of mobile devices. Mobile devices have
small screens and it is very normal to navigate between screens with a simple link.
Automatic Paging
The paging is handled differently for each control. For example when paging takes place the controls included in a panel
control will stay together.
Displaying Text
This mobile page uses a TextView control to display a large amount of text:
<%@ Page
Inherits=
"System.Web.UI.MobileControls.MobilePage"%>
<%@ Register
TagPrefix="Mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<Mobile:Form runat="server">
<Mobile:TextView runat="server">
This is a very long text to demonstrate
how text can be displayed over several screens.
This is a very long text to demonstrate
how text can be displayed over several screens.
This is a very long text to demonstrate
how text can be displayed over several screens.
This is a very long text to demonstrate
how text can be displayed over several screens.
</Mobile:TextView>
</Mobile:Form>
When this page is displayed on a mobile device, the navigation and display functions of the page will be compiled
differently for different devices with different display characteristics.
When the text is displayed on a pocket PC with a small display, the user will be able to scroll the text with a scroll bar,
but on a cell phone the text will be displayed over several screens with proper navigation tools added.
Note that all mobile controls must have the runat attribute set to "server", in order to secure proper rendering of the page
for different devices.
Single Forms
<%@ Page
Inherits=
"System.Web.UI.MobileControls.MobilePage"%>
<%@ Register
TagPrefix="Mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<Mobile:Form runat="server">
<Mobile:Label runat="server">Hello W3Schools
</Mobile:Label>
</Mobile:Form>
Multiple Forms
<%@ Page
Inherits=
"System.Web.UI.MobileControls.MobilePage"%>
<%@ Register
TagPrefix="Mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<Mobile:Form id="f1" runat="server">
<Mobile:Label runat="server">Hello W3Schools
</Mobile:Label>
<Mobile:Link runat="server" NavigateURL="#f2">2
</Mobile:Link>
</Mobile:Form>
<Mobile:Form id="f2" runat="server">
<Mobile:Label runat="server">Hello Again
</Mobile:Label>
<Mobile:Link runat="server" NavigateURL="#f1">1
</Mobile:Link>
</Mobile:Form>
Links
Note the <Mobile:Link> element in the example above. The link control lets the user navigate between the two mobile
forms.
Programming Events
Mobile controls have an object model with programmable properties, methods and events.
Submitting Text
<%@ Page
Inherits=
"System.Web.UI.MobileControls.MobilePage"%>
<%@ Register
TagPrefix="Mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<script runat="server">
Dim age
When a page has two forms, the first form is always opened by default.The first form has a label with the text "Age?", an
input box to input the age, and a submit button.The second page is activated by the submit button on the first page, and
displays a response.When the application runs on a mobile device, the two pages will display like this:
Form 1 Form 2
Submit
Input Controls are used to collect input from the mobile user.
Input Controls
There is a number of mobile controls that support user input. The most common input control is perhaps the Textbox
control, which was demonstrated in the previous chapter. The Textbox control is perfect for simple user input like names,
numbers, identifications and keywords. For larger amount of input a TextView control is a better choice. The TextView
control allows long multi-line input like the one you need for SMS or other messages.
Numeric Input
The numeric attribute of the textbox control can be set to true or false to specify whether the textbox should accept only
numeric input.
Note: This behavior will normally work on cell phones by changing the input mode from letters to numbers. For HTML
browsers however, this behavior is normally not supported.
Password Input
The password attribute of the textbox control can be set to true or false to specify whether the textbox should be treated as
a password field. A password field will hide the input by displaying * (stars) instead of ordinary text.
List Controls
Textbox and TextView controls are well suited for entering input, but sometimes you want the user to select from a list of
predefined values. The Selection List Control supports drop down lists, check boxes and radio buttons. This topic is
covered in another chapter. The List Control supports selection from menus and lists. The List Control is covered in
another chapter.
User Interface Controls are controls which display the user interface:
Name Function
Command Performs an action
Form Defines a container for mobile controls
Image Defines an image
Label Defines a text
Link Defines a hyperlink
List Defines a list
Mobile Page Defines a container for mobile controls
Object List Defines a list of data objects
Panel Defines a container for other controls
Selection List Defines a list to select from
Style Sheet Defines styles to be applied to other controls
Textbox Defines a single line input box
TextView Defines a multi-line input box
For a full control reference, including properties methods, events, and more examples, please look at the "Mobile
Reference" page.
Validation Controls
Validation controls are used to validate the data entered by a user. Validation controls allow you to validate an input
control (like a Textbox), and display a message when validation fails.
Each validation control performs a specific type of validation (like validating against a specific value or a range of
values).By default, page validation is performed when a command control is clicked. You can prevent validation when a
control is clicked by setting the Causes Validation property to false.
Validating Input
<%@ Page
Inherits=
"System.Web.UI.MobileControls.MobilePage"%>
<%@ Register
TagPrefix="Mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<script runat="server">
</script>
<Mobile:Label runat="server">Age?</Mobile:Label>
<Mobile:TextBox id="age" runat="server" />
<Mobile:Command OnClick="Page2" runat="server">
Submit</Mobile:Command>
</Mobile:Form>
The first form has a label with the text "Age?", an input box to input the age, and a submit button.
The second page is activated by the submit button on the first page, and displays a response.
When the application runs on a mobile device, the two pages will display like this:
Form 1
Age?
Submit
Form 2
The previous example used a CompareValidator control to validate an input field. The field to validate was defined by the
attribute ContolToValidate.You can also use a ValidationSummary control with the attribute FormToValidate, to validate
all the input of a form. This way you can display a summary of errors instead of one error at the time.
For a full control reference, including properties methods, events, and more examples, please refer to the "Mobile
Reference" page.
The Mobile List Control supports different input and display properties.
<%@ Page
Inherits=
"System.Web.UI.MobileControls.MobilePage"%>
<%@ Register
TagPrefix="Mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<script runat="server">
Sub Show_Price(sender As Object,e As ListCommandEventArgs)
text1.Text=e.ListItem.Text & "=" & e.ListItem.Value
ActiveForm=f2
End Sub
</script>
The second page displays a price. This page is activated when a car is selected on the first page.
When the application runs on a mobile device the two pages will display like this:
Form 1 Form 2
Volvo=$30,000
Volvo
BMW
Audi
The Selection List Control supports drop down lists, check boxes and radio buttons.
This mobile page uses a Selection List to let the user select a car:
<%@ Page
Inherits=
"System.Web.UI.MobileControls.MobilePage"%>
<%@ Register
TagPrefix="Mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<script runat="server">
Sub Car_Click(sender as Object, e as EventArgs)
ActiveForm=f2
t1.text=cars.Selection.Value
End Sub
</script>
When this page is displayed on a mobile device, the navigation and display functions of the page will be compiled
differently for different devices with different display characteristics.
Fore some devices, like a handheld PC, it might display a dropdown list to choose from. For a cell phone it might display
a list of options to select from.
.NET Mobile displays different types of images for different types of devices.
The Image Control allows the developer to specify different types of images for different types of devices.
Image Types
Some mobile devices will display GIF images. Other mobile devices will display BMP images or WBMP images. The
Image Control allows you to specify different images for each preferred image type.
<%@ Page
Inherits=
"System.Web.UI.MobileControls.MobilePage"%>
<%@ Register
TagPrefix="Mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<Mobile:Form runat="server">
<Mobile:Image runat="server">
<DeviceSpecific>
<Choice ImageURL="image.gif" />
<Choice ImageURL="image.bmp" />
<Choice ImageURL="image.wbmp" />
</DeviceSpecific>
</Mobile:Image>
</Mobile:Form>
When this page is displayed on pocket PC, a GIF image will be displayed. On a cell phone a WBMP image or a BMP
image will be displayed, according to the characteristics of the cell phone.
<%@ Page
Inherits=
"System.Web.UI.MobileControls.MobilePage"%>
<%@ Register
TagPrefix="Mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<Mobile:Form runat="server">
<Mobile:AdRotator runat="server"
AdvertisementFile="advertisements.xml">
</Mobile:AdRotator>
</Mobile:Form>
<%@ Page
Inherits=
"System.Web.UI.MobileControls.MobilePage"%>
<%@ Register
TagPrefix="Mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<script runat="server">
</script>
In this example a calendar is displayed in the first form. When the user select a date from the calendar, the selected date is
displayed in a new form.
This mobile page will display the text "Tove's number" and dial the number (555) 555-5555 when the user selects the
text:
<%@ Page
Inherits=
"System.Web.UI.MobileControls.MobilePage"%>
<%@ Register
TagPrefix="Mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<Mobile:Form runat="server">
<Mobile:PhoneCall runat="server"
PhoneNumber="(555) 555-5555"
Text="Tove's number"
AlternateFormat="{0}" />
</Mobile:Form>
The attribute "AlternateFormat" has the value "{0}". This displays the text from the attribute "Text".If you use the value
"{1}" it will display the text from the attribute "PhoneNumber".You can also use a construct like this:
AlternateFormat="{0} is {1}". This will display the text "Tove's number is (555) 555-5555".
Utility Controls
Name Function
AdRotator Displays advertisements
Calendar Displays a calendar
PhoneCall Calls a telephone number
Each Mobile Form can have zero ore more Mobile Panels.
Mobile Forms and Mobile Panels are used to group Mobile Controls.
Mobile Controls
UI Controls
Name Function
Command Performs an action
Form Defines a container for mobile controls
Image Defines an image
Label Defines a text
Link Defines a hyperlink
List Defines a list
Mobile Page Defines a base class for all mobile pages
Object List Defines a list of data objects
Panel Defines a container for other controls
Selection List Defines a list to select from
Style Sheet Defines styles to apply to other controls
Textbox Defines a single line input box
TextView Defines a multi-line input box
Validation Controls
Name Function
CompareValidator Compares the value of one input control to the value of
another input control or to a fixed value
CustomValidator Allows you to write a method to handle the validation of
the value entered
RangeValidator Checks that the user enters a value that falls between
two values
RegularExpressionValidator Ensures that the value of an input control matches a
specified pattern
RequiredFieldValidator Makes an input control a required field
ValidationSummary Displays a report of all validation errors occurred in a
page
Utility Controls
Name Function
AdRotator Displays advertisements
Calendar Displays a calendar
PhoneCall Calls a telephone number