Scribd
Upload
55 views

Mobile Web Development With: Malek Kemmou CEO Arrabeta

This document summarizes a presentation on mobile web development with Microsoft Visual Studio .NET. It introduces the speaker, Malek Kemmou, a Microsoft Regional Director. The presentation covers developing for mobile devices using the .NET framework and ASP.NET mobile controls. It discusses challenges like supporting different devices and markups, and how the .NET approach provides a single code base that can automatically render adaptively for over 265 supported devices. The document outlines the agenda and demonstrates capabilities of ASP.NET mobile controls like containers, forms, text and lists display, and control transfer. It also shows how to customize rendering and add unsupported devices.

Uploaded by

charaka
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
55 views

Mobile Web Development With: Malek Kemmou CEO Arrabeta

This document summarizes a presentation on mobile web development with Microsoft Visual Studio .NET. It introduces the speaker, Malek Kemmou, a Microsoft Regional Director. The presentation covers developing for mobile devices using the .NET framework and ASP.NET mobile controls. It discusses challenges like supporting different devices and markups, and how the .NET approach provides a single code base that can automatically render adaptively for over 265 supported devices. The document outlines the agenda and demonstrates capabilities of ASP.NET mobile controls like containers, forms, text and lists display, and control transfer. It also shows how to customize rendering and add unsupported devices.

Uploaded by

charaka
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 34

Mobile Web Development with Microsoft Visual Studio .

NET
Malek Kemmou CEO Arrabeta [email protected]

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

You might also like