Mobile Web Development with Microsoft Visual Studio .
NET
Malek Kemmou CEO Arrabeta kemmou@kemmou.com
xmlContainer.Render()
<Speaker> <Bio>
<P> CEO Arrabeta (consulting firm based in Casablanca Morocco) <BR/> Newtelligence Alliance Partner </P> <P> Senior Consultant and Senior Trainer <BR/> Solutions Architecture, integration, interoperability </P> <P> Microsoft Regional Director for Middle East and Africa </P> <P> Ineta MEA Speaker Bureau </P> <P> Speaker at many conferences and events (TechEd, NDC, MDC, DevDays, DevEssentials ) </P>
</Bio>
</Speaker>
Microsoft Regional Directors
http://www.microsoft.com/rd ~140 experts from all around the world Speaking at PDC 2004 :
Clemens Vasters (Germany) Stephen Forte (New York) Farhan Mohammad (Minesota) Goksin Bakir (Turkey) Malek Kemmou (Morocco) Ahmad Badr (Egypt) Hossam Khalifa (Egypt)
Mobility Track
Mobile Web Development with Microsoft Visual Studio .NET Developing Compact Framework Applications for PocketPC and Smartphone Developing PocketPC Applications for a Semi-Connected Environment Building Localized/Globalized Applications for Windows Mobile Devices (Goksin Bakir) Developing Performing Mobile Applications with the .Net Compact Framework
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
Mobile Devices Today
100s of phones
Multiple PDA/XDA devices Tablets, Mini-Tablets etc.
.Net for devices overview
Development Platform
Visual Studio .NET
.NET Framework
Server-side Web Apps
Remote Web Pages
Local Code
Client-side Rich Apps
Mobile Web Browser
.NET Compact Framework
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 Back buttons ? Cookies ? Scripts ? etc.
Capabilities
How do I add support for new devices ?
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
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.
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
Demo
Adaptive Rendering
Mobile Web Controls
Out of the box, ASP.NET Mobile Controls
Works with 265 different mobile devices out of the box (with Device Update 4) Is easily extensible to support additional devices Uses basic style properties (for example: Font, font-size, forecolor) that are advisory
Used only if supported by requesting device Ignored for down-level browsers
Gives acceptable presentation across wide range of devices for minimum development effort Allows advanced presentation features of up-level browsers to be leveraged Gives a richer, clearer user interface Enhances usability for the application
Customization
How MWC Work
Detect Device Capabilities Create ASP.NET Pages Add User Interface Element ASP.NET Mobile control Integrate Business Logic Wire-up events Post/Save to Web Servers Load and execute ASP.NET Pages Generate output (markup language) Based on device, browser and gateway combination HTTP Request
HTTP Response
Development Environment
IIS .NET Framework Mobile Internet Toolkit
Production Environment
Demo
How a simple Mobile Web Form Works
ASP.NET Mobile Controls Object Model
MobileControl AdRotator Calendar
Image
PagedControl Panel SelectionList
List ObjectList Form BaseValidator PhoneCall
CompareValidator CustomValidator RangeValidator RegularExpression Validator RequiredField Validator
StyleSheet
TextControl TextView ValidationSummary
Command Label Link
TextBox
ASP.NET Mobile Controls Containers
MobileControl AdRotator Calendar
Image
PagedControl Panel SelectionList
List ObjectList Form BaseValidator PhoneCall
CompareValidator CustomValidator RangeValidator RegularExpression Validator RequiredField Validator
StyleSheet
TextControl TextView ValidationSummary
Command Label Link
TextBox
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
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
Demo
Containers
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
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
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
Demo
Text and List Display
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
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
Adding an Unsupported Device
<browserCaps> <use var="HTTP_USER_AGENT" /> <filter> <case match=".*Windows CE.*"> <filter> <case match="Mozilla/.* \(compatible; MSIE 3.02; Windows CE; (?'deviceID' \w*;)* (?'screenWidth'\d*)x(?'screenHeight'\d*)\)"> <filter> <case match=" Smartphone;" with="${deviceID}"> canInitiateVoiceCall = "true" inputType = "telephoneKeypad" isColor = "true" maximumRenderedPageSize = "300000" preferredImageMime = "image/jpeg" screenCharactersHeight = "13" screenCharactersWidth = "28" </case> </filter> </case>
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
Customization Process
Step 1: Select device for customization
Pre-defined Filters Mobile Capabilities
Step 2: Create DeviceSpecific construct
Directly in mobile.aspx In a Custom Control
Step 3: Apply customization
Directly to control Using a StyleSheet
Demo
Customizing Rendering
ASP.Net Mobile in ASP.Net 2.0
Not separate from regular ASP.Net
All ASP.Net Web Controls built for mobile device support Fully backward compatible
Mobile Web Control based code continues to run
Warning :
Doesnt make a case for one code base covering multi-device and regular Web
Form factors targets difficult to unify Maintenance load
Can permit reuse and unified UI Processing
Summary
Connected environment Out of the box support for 265+ devices Auto detection, adaptive rendering Customizable Extensible
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
Questions
I will post session content on
