You are on page 1of 64


Nguyen Trung Lap Lotus College

Mobile devices have become part of life MDs can connect to the Internet. To deliver any types of data, to any user, any place in the world! is a new platform for developing mobile applications

Key Technologies
Microsoft .NET Compact Framework is the smart device development framework for Microsoft .NET. ASP.NET mobile controls, known as the Microsoft Mobile Internet Toolkit (MMIT), build mobile Web applications. SQL Server CE is the compact database for mobile devices.

Key Technologies
Windows Mobile is a powerful and flexible mobile device platform(smart phone) Windows CE and Windows XP Embedded. (pocket pc, tablet pc)

.NET Compact Framework

Common language runtime
Managing code at execution time Memory,thread,security,compilation management Provides the data types, structures to incorporate CE APIs, DLL.

.NET Compact Framework class library

Is a collection of reusable classes. Included controls

Data and XML (System.Data and System.Xml namespaces, sql server, sql server ce ) Web Services GDI Support(System.Drawing) Base Classes(System.Threading, System.Net, System.IO ) IrDA Support(System.Net.IrDA ) Visual basic The option component

Included technology

Features Missing from the .NET Compact Framework Method Overloads Missing Controls
CrystalReportViewer, PageSetupDialog, PrintDialog, PrintDocument, PrintPreviewControl and PrintPreviewDialog Using the Windows CE API

XML Functionality
System.Xml.XPath namespace Xslt

Bluetooth BinaryFormatter and SoapFormatter classes Security, printing, remoting...

Developing with Visual Studio .NET 2003 Visual Studio .NET include a set of prebuilt device profiles(contains information necessary to build applications that target specific devices ) Additions to the IDE
Templatespredefined configurations for common project types Device-specific controls Device emulators Automatic deployment of applications Remote debugging

Supported Languages
The .NET Compact Framework supports C# and Visual Basic .NET Projects are restricted to a single language, either C# or Visual Basic .NET Workaround: templet project

Controls included with the .NET Compact Framework

Button CheckBox ComboBox ContextMenu DomainUpDown
























MainMenu Toolbar InputPanel .....

Deploy .NetCPF Application

Using cabinet file .cab file compress and store all needed file Make the files and settings required are correctly handled. Easy to distribute application

.NET compact framework May be SQLCE All .cab file for application, .netcpf, sqlce

Create .Cab File

Open Visual Studio.Net IDE Select release from solution configuration Click built .Cab file on built menu Find the individual CAB files under the subdirectory \bin\release in app directory

After ceate the cab file, copy the suitable file into device and click to install



The Mobile Internet Toolkit

Allows to develop web application for mobile devices Is built on Microsoft .Net framework Is mobile version of ASP.Net

Support for a variety of devices Write-once Web pages World-class tool support Customizability and extensibility

Is a special webform Is displayed by mobile devices Is a text file with an .aspx extention Content a set of mobile webform controls Automatically convert to suitable form for requesting devices

Simple mobile webform

<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %> <%@ Page language="c#" Codebehind="MobileWebForm1.aspx.cs" Inherits="Hello.MobileWebForm1" AutoEventWireup="false" %> <HEAD> <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1"> <meta name="CODE_LANGUAGE" content="C#"> <meta name="vs_targetSchema" content=""> </HEAD> <body Xmlns:mobile=""> <mobile:Form id="Form1" runat="server"> <mobile:TextBox id="TextBox1" runat="server"></mobile:TextBox> </mobile:Form> </body>

HTML and CodeBehind

Content the tags which form the page

Content server side script

The same to ASP.NET page

Multiple Form On One Page

Can put mutiple form on a page( different from page) Can manage the complexity of website Can organize web site in the same way as desktop web Can take advantage of page level feature

Demo Mobile Web Controls

WAP wireless application protocol

Whats WAP
Wap is a standard for accessing internet content via wireless client (mobile phone, PDA)
WAP stands for Wireless Application Protocol WAP is an application communication protocol WAP is used to access services and information WAP is inherited from Internet standards WAP is for handheld devices such as mobile phones WAP is a protocol designed for micro browsers WAP enables the creating of web applications for mobile devices. WAP uses the mark-up language WML (not HTML) WML is defined as an XML 1.0 application

How WAP works

The Wireless Application Protocol

WAP protocol is a leading standard for information service on wireless devices WAP standard base on internet standards (html, xml, tcp/ip) WAP include the specifications:
wml language wmlscript wtai (wireless telephony appliction interface)

WAP Micro Browser

A small browser fit on mobile devices Enable to show the wap content was written in wml, wmlscript Make minimal demands on hradware, memory and cpu

WML- wireless markup language WML inherited from HTML but base on XML, stricter than HTML WML is used to create wap pages Pages in wml are called decks Decks are constructed as a set of cards WML page have extension .wml

WML uses wmlscript to run simple code on client the same to java script in html wmlscript is a light java script language wmlscript are not embedded in wml page wml page only contain wmlscript url wmlscript need to be compiled into bytecode on server before run in a wap browser

WML Tags
The same to HTML tags All tags are case sensitive All tags must be properly closed

Decks and Cards

Wml page are called deck Deck contain a set of cards The cards related to each other with link All cards in a page are downloaded Navigation between the cards is done inside client

WAP Example
<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" ""> <wml> <card id="HTML" title="HTML Tutorial"> <p> Our HTML Tutorial is an award winning tutorial from W3Schools. </p> </card> <card id="XML" title="XML Tutorial"> <p> Our XML Tutorial is an award winning tutorial from W3Schools. </p> </card> </wml>

Paragraph And Line Break

<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" ""> <wml> <card title="Paragraphs"> <p> This is a paragraph </p> <p> This is another<br/>with a line break </p> </card> </wml>

<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" " l"> <wml> <card title="Formatting"> <p> normal<br/> <em>emphasized</em><br/> <strong>strong</strong><br/> <b>bold</b><br/> <i>italic</i><br/> <u>underline</u><br/> <big>big</big><br/> <small>small</small> </p> </card> </wml> ----- Formatting ----normal emphasized strong bold italic underline big small

<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" ""> <wml> <card title="Table"> <p> <table columns="3"> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </table> </p> </card> </wml>

<anchor> tag always has a task ("go", "prev", or "refresh")
<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"""> <wml> <card title="Anchor Tag"> <p><anchor>Next page<go href="test.wml"/> </anchor> </p> </card> </wml>

Go, Previous, Refresh

<wml> <card> <p> <anchor> Go To Test <go href="test.wml"/> </anchor> <anchor> Previous Page <prev/> </anchor> <anchor> Refresh this page <go href="thispage.wml"/> <refresh> <setvar name="x" value="30"/> </refresh> </anchor> </p> </card> </wml>

<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"""> <wml> <card title="A Tag"><p><a href="test.wml">Next page</a></p> </card> </wml>

<img></img> display picture

<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"""> <wml><card title="Image"> <p>This is an image <img src="/images/stickman.wbmp" alt="stickman" /> in a paragraph </p> </card> </wml>


Input Field
A WML card can be set up to let a user enter information
<wml> <card title="Input"> <p> Name: <input name="Name" size="15"/> <br/> Age: <input name="Age" size="15 format="*N"/> <br/> Sex: <input name="Sex" size="15"/> </p> </card> </wml>

Select and Option

<wml> <card title="Selectable List 1"> <p> <select> <option value="htm">HTML Tutorial</option> <option value="xml">XML Tutorial</option> <option value="wap">WAP Tutorial</option> </select> </p> </card> </wml> <wml> <card title="Selectable List 1"> <p> <select multiple="true"> <option value="htm">HTML Tutorial</option> <option value="xml">XML Tutorial</option> <option value="wap">WAP Tutorial</option> </select> </p> </card> </wml>

Timer function of WML. The time unit of the timer is 1/10 of a second. The example below will display a message for 3 seconds, and then take you to the file "test.wml":
<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" ""> <wml> <card ontimer="test.wml"> <timer value="30"/> <p>Some Message</p> </card> </wml>

<setvar> tag


<setvar name="i" value="500"/>

Input field
<card id="card1"> <select name="schoolname"> <option value="HTML">HTML Tutorial</option> <option value="XML">XML Tutorial</option> </select> </card>

Use variable
<card id="card2"><p>You selected: $(schoolname)</p></card>

WMLScript Language Client side script

What is WMLScript?
WMLScript is the scripting language used in WML pages WMLScript is a light version of the JavaScript language WML scripts are not embedded in the WML pages. WML pages only contains references to script URLs WMLScript is compiled into byte code on the server before it is sent to the WAP browser WMLScript is a part of the WAP specification

What is WMLScript used for?

WMLScript is used to validate user input WMLScript is used to generate message boxes and dialog boxes locally, to view error messages and confirmations faster WMLScript is used to access facilities of the user agent

How to call a WMLScript from a WML page

<wml> <card id="no1" title="Go to URL"> <do type="options" label="Go"> <go href="check.wmls#go_url('W3Schools')"/> </do> </card> </wml>

The script is in a file called check.wmls, and the name of the function is go_url.

check.wmls File
extern function go_url(the_url) { if (the_url=="W3Schools") { WMLBrowser.go(" m/wap.wml") } }

WMLScript Language Syntax

The smallest unit of execution in WMLScript is a statement and each statement must end with a semicolon (;). WMLScript is case-sensitive. Comments can either be single-line (beginning with //) or multi-line (bracketed by /* and */). This syntax is identical to both C++ and Java. A literal character string is defined as any sequence of zero or more characters enclosed within double ("") or single () quotes. Boolean literal values correspond to true and false. New variables are declared using the var keyword (i.e. var x;)

Data Types
WMLScript is a weakly typed language
Boolean Integer Floating-point String Invalid

WMLScript is not object-oriented -> is impossible to create your own userdefined data types

Flow Control Statements

Java does support:(the same to java)
if-else for loop while loop break, and continue statements.

Related WMLScript statements can be executed together as a unit known as a function Syntax:

extern function identifier(FormatParameterList) { Block }; Example: function RunTime(distance, speed) { var time = distance / speed; return time; };

Functions (2)
When calling a function included with one of the WMLScript standard libraries, the library name must be included with the function call

Example: var a = String.length("1234567890");

The WMLScript Standard Libraries

WML does provide six "pre-built" libraries

Lang - Included in this library are functions for data type manipulation, absolute value calculations, and random number generation. Float - Typical functions provided by this library include sqrt(), round(), and pow(). String - Some of the functions included in this library are length(), charAt(), find(), replace(), and trim().

The WMLScript Standard Libraries

URL - This library contains a set of functions for handling both absolute URLs and relative URLs. Typical functions include getPath(), getReferer(), and getHost(). WMLBrowser - Commonly used functions in this library include go(), prev(), next(), getCurrentCard(), and refresh(). Dialogs - This library contains a set of typical user interface functions including prompt(), confirm(), and alert().

Dialogs Library Functions

Function alert() confirm() Description Displaysamessage,waitsforaconfirmation,and thenreturnsanemptystring Displaysamessage,waitsforananswer,andreturns abooleanvaluedependingontheselectedanswer Displaysaquestion,waitsforaninput,andthen returnstheuser'sanswer


Float Library Functions

Function Description

ceil() floor() int() maxFloat() minFloat() pow() round() sqrt()

Returnsthenearestintegerthatisnotsmallerthana specifiednumber Returnsthenearestintegerthatisnotlargerthana specifiednumber Returnstheintegerpartofaspecifiednumber Returnsthelargestpossiblefloating-pointnumber Returnsthesmallestpossiblefloating-pointnumber Raisesanumbertothepowerofasecondnumber andreturnstheresult Returnsthenearestintegertoaspecifiednumber Returnsthesquarerootofaspecifiednumber

The Lang Library

Function abort() abs() characterSet() exit() float() isFloat() Description AbortsaWMLScriptandreturnsamessagetothe callerofthescript Returnstheabsolutevalueofanumber Returnsthecharactersetsupportedbythe WMLScriptinterpreter ExitsaWMLScriptandreturnsamessagetothe callerofthescript Returnstrueiffloating-pointnumbersare supported,andfalseifnot Returnstrueifaspecifiedvaluecanbeconverted intoafloating-pointnumberbytheparseFloat() function,andfalseifnot Returnstrueifaspecifiedvaluecanbeconverted intoanintegerbytheparseInt()function,and falseifnot


The Lang Library

Function max() maxInt() min() minInt() parseFloat() parseInt() random() seed() Description Returnsthelargestvalueoftwonumbers Returnsthemaximumpossibleintegervalue Returnsthesmallestvalueoftwonumbers Returnstheminimumpossibleintegervalue Returnsafloating-pointvaluedefinedbyastring Returnsanintegerdefinedbyastring Returnsarandomintegerbetween0anda specifiednumber Initializestherandomnumbergeneratorwitha number,andreturnsanemptystring

String Library Functions

Function charAt() compare() Description Returnsacharacterthatisplacedinaspecified positionofastring Comparetwostrings,andreturnsanintegerthat tellsiftheonestringisidentical,smallerorlarger thantheother Separatesastringintoelements,andthenreturna specifiedelement Returnsthenumberoftimesaspecifiedvalue appearsinastring Returnsthepositionofasubstringinastring Formatsavalue,andreturnstheresult Separatesastringintoelements,insertsa substring,andthenreturntheresult Returnsabooleanvaluethatistrueifthestringis empty,andfalseifnot

elementAt() elements() find() format() insertAt() isEmpty()

String Library Functions

Function length() removeAt() replace() replaceAt() squeeze() subString() toString() trim() Description Returnsthelengthofastring Separatesastringintoelements,removesan element,andthenreturntheresult Replacesapartofastringwithanewstring,and returntheresult Separatesastringintoelements,replacesan element,andthenreturntheresult Reducesallwhitespacestosinglespaces,and returnstheresult Returnsastringthatisaspecifiedpartofanother string Createsastringfromanumber,andreturnthe result Returnsastringwithoutleadingandtrailingspaces

The URL Library

Function escapeString() getBase() getFragment() getHost() getParameters() getPath() getPort() getQuery() getReferer() getScheme() isValid() loadString() resolve() unescapeString() Description ReplacesspecialcharactersinaURLwithanescapesequence,and returnstheresult ReturnsthefragmentinaURL ReturnsthehostspecifiedinaURL ReturnstheparametersinthelastpathsegmentofaURL ReturnsthepathspecifiedinaURL ReturnstheportnumberspecifiedinaURL ReturnsthequerypartinaURL ReturnstheschemeinaURL ReturnstrueifaURLhastherightsyntax,andfalseifnot ReturnsthecontentandthecontenttypeofaspecifiedURL ReturnsanabsoluteURLfromabaseURLandarelativeURL ReplacestheescapesequencesinaURLwithcharacters,andreturn theresult

WMLBrowser Library Functions

Function getCurrentCard() getVar() go() newContext() prev() refresh() setvar() Description Returnsthe(relative)URLofthecurrentcard Returnsthevalueofavariable Goestoanewcard,specifiedbythenewURL,and returnsanemptystring Clearsallvariables,andreturnsanemptystring Thebrowsergoesbacktothepreviouscard,and returnsanemptystring Refreshesthecurrentcard,andreturnsanempty string Setsthevalueofavariable,andreturnstrueifthe newvaluewasimplementedsuccessfully,andfalseif not