1. Developing Mobile Web Applications With ASP.NET Mobile Controls
Malek Kemmou

2. On the Agenda Devices today Mobile Internet Challenges
.Net approach to devices
265 devices (Device Update 4)
Object Model and built-in controls
Extending to non supported devices
ASP.Net mobile Controls
Single code base
Targeting specific devices

3. Mobile Devices Today 100s of phones Multiple PDA/XDA devices
Tablets, Mini-Tablets
…etc.

4. .Net for devices overview Development Platform
Visual Studio .NET
.NET Framework
KEY MESSAGE: There are two types of mobile software, and .NET supports both.
SLIDE BUILDS: 0
SLIDE SCRIPT:
Visual Studio .NET supports two types of mobile development: server-side Web applications and client-side rich applications.
These can be paralleled with desktop development between ASP.NET Web applications and Windows Forms-based rich client applications. In fact, the similarity is more than coincidental—the mobile development platform is actually derived from the same desktop development platform.
SLIDE TRANSITION: Developing server-side web applications
Server-side Web Apps
Local Code
Client-side Rich Apps
Remote Web Pages
Mobile Web Browser
.NET Compact Framework

5. Challenges How many code bases do I have to maintain ?
Form factors
Rendering Markups :
WML1.1, 1.2, 2.0
cHTML
XHTML
HTML 3.2 / 4.0
Capabilities
Back buttons ?
Cookies ?
Scripts ?
…etc.
How do I add support for new devices ?

6. Traditional Techniques
Reading the Request Headers
What markup
What capabilities
What Gateway capabilities
Fan out to separate code
Maybe componentize code for some reuse
Maybe code some template based rendering

7. The Solution: ASP.NET Mobile Controls
Adaptively render to devices based on browser, device and gateway combination
Extend ASP.NET to empower web developers to build mobile web applications
Integrates with the Visual Studio .NET development environment for ease of use.
Formerly known as Microsoft Mobile Internet Toolkit.

8. The Solution: ASP.NET Mobile Controls
Single mobile Web page that adapts to multiple devices
Support multiple mark-up languages
WML1.1 (WAP), cHTML 1.0, xHTML Mobile and Basic profile, HTML 3.2 …
Support for a variety of devices
Web enabled Cell Phones, PDAs, and Pagers
Customizable and extensible framework
Add new controls and devices
Support for new devices without having to rewrite or recompile your application

9. Adaptive Rendering

10. Mobile Web Controls Out of the box, ASP.NET Mobile Controls
Works with 265+ different mobile devices (Device Update 4)
Easily extensible to support additional devices
Uses basic style properties (Font, font-size, forecolor)
Used only if supported by requesting device
Ignored for down-level browsers
Gives acceptable presentation across wide range of devices
Customization
Allows advanced presentation features of up-level browsers to be leveraged
Gives a richer, clearer user interface
Enhances usability for the application

11. Mobile Internet Toolkit
How MWC Work…
IIS
.NET Framework
Mobile Internet Toolkit
Create
ASP.NET Pages
Detect Device
Capabilities
HTTP
Request
Add User Interface
Element
ASP.NET Mobile control
Load and execute
ASP.NET Pages
Integrate
Business Logic
Wire-up events
Generate output
(markup language)
Based on device,
browser and
gateway
combination
HTTP
Response
Post/Save to
Web Servers
Development Environment
Production Environment

12. How it works

13. ASP.NET Mobile Controls Object Model
AdRotator
Calendar
Image
List
CompareValidator
PagedControl
ObjectList
CustomValidator
Panel
Form
RangeValidator
BaseValidator
SelectionList
RegularExpression
Validator
PhoneCall
StyleSheet
Command
RequiredField
Validator
TextControl
Label
TextView
Link
ValidationSummary
TextBox

14. ASP.NET Mobile Controls Containers
AdRotator
Calendar
Image
List
CompareValidator
PagedControl
ObjectList
CustomValidator
Panel
Form
RangeValidator
BaseValidator
SelectionList
RegularExpression
Validator
PhoneCall
StyleSheet
Command
RequiredField
Validator
TextControl
Label
TextView
Link
ValidationSummary
TextBox

15. ASP.NET Mobile Controls Forms
Multiple forms per page
Separately addressable set of controls that can be navigated
Container for other controls
Rendered as one or more “screens” based on target device
Only one active form at a time
By default – first form active when page accessed
Set via ActiveForm

16. ASP.NET Mobile Controls Panels
Provides grouping for multiple controls
Single control for displaying, hiding enabling or disabling a set of controls
Applying styles to panel that are inherited by child controls
Empty panel placeholder container for dynamically created controls

17. ASP.NET Mobile Controls Text Display
Label Control
Small amount of content – read only text
TextBox Control
Single-line input text boxes
TextView Control
Exclusive to Mobile Web Controls
Large fields of text
Small set of mark-up: bold, italics, page break, paragraph, anchor tag
Support pagination

18. ASP.NET Mobile Controls Lists
Declared or databound list of items
Decorations: None | Bulleted | Numbered
Items can be set to act as links
Static or interactive mode
Support pagination
Similar to DataList control in ASP.NET

19. ASP.NET Mobile Controls ObjectList
Strictly databound
Use to show list or table of data objects
Can view multiple fields for each data object
Can associate multiple commands with each object
Support pagination
Similar to DataGrid in ASP.NET

20. ASP.NET Mobile Controls Control Transfer
Link Control
Text-based hyperlink to another form on the mobile page or any URL
Softkey Property
Similar HyperLink Control in ASP.NET
PhoneCall Control
Exclusive to MWC
Generates mark-up for automatically calling or displaying phone numbers

21. ASP.NET Mobile Controls Control Transfer
Like Button Control in ASP.NET
Way to invoke ASP.NET event handlers from UI elements
SoftkeyLabel Property
Specify text for Softkey on supporting mobile phones

22. ASP.NET Mobile Controls Adding new Devices
<browserCaps>
<use var="HTTP_USER_AGENT" />
<filter>
<case
match=".*Windows CE.*">
match="Mozilla/.* \(compatible; MSIE 3.02; Windows CE;
(?'deviceID' \w*;)* (?'screenWidth'\d*)x(?'screenHeight'\d*)\)">
match=" Smartphone;"
with="${deviceID}">
canInitiateVoiceCall = "true"
inputType = "telephoneKeypad"
isColor = "true"
maximumRenderedPageSize = "300000"
preferredImageMime = "image/jpeg"
screenCharactersHeight = "13"
screenCharactersWidth = "28"
</case>
</filter>

23. ASP.NET Mobile Web Controls Customization Example
WML 1.1, Monochrome,
WBMP graphics
HTML 4.01, XHTML-Basic,
CSS1, Jscript, Full color,
JPG, GIF, PNG graphics
Enhances presentation, and retains same functionality across all devices

24. ASP.NET Mobile Web Controls Customization Process
Step 1: Select device for customization
Pre-defined Filters
Mobile Capabilities
Step 2: Create DeviceSpecific construct
In a Custom Control
Directly in mobile.aspx
Step 3: Apply customization
Directly to control
Using a StyleSheet

25. Customize Rendering

26. Summary Connected environment Out of the box support for 265+ devices
Auto detection, adaptive rendering
Customizable
Extensible

27. Call to Action There are 100s of millions devices out there
Great opportunities
Start using the ASP.Net Mobile Controls to target as well low end & high end devices
Start extending Web Solutions for mobile users
Explore possibilities for disconnected applications as well