Intro to
Mobile Development
using .NET
Roberto Brunetti
[email protected] - [email protected]
DevLeap Pure .NET Training
Introduction to .NET
Framework
Core .NET Framework
Introduction to
ADO.NET
Introduction to
ASP.NET
Introduction to
Web Services
Core ADO.NET
Core ASP.NET
Core
Web Services
Intro to
Mobility Dev
ASP.NET 2.0
Preview/Core/Upgrade
SOA Services
with WSE2
Advanced
Mobility Dev
Architecting Apps
in .NET
DevLeap Training
Introduction to
ASP.NET
Data Warehouse
e DTS
SQL Server Reporting
Services
Sharepoint 2003
Development
OLAP Analysis
Services
VSTS
for Technicians
WinFX
Preview
WPF (Avalon)
Preview
SQL 2005 Preview
Longhorn
Preview
WCF (Indigo)
Preview
SQL 2005 Analysis
Services Preview
ThinkMobile.it
Il 12/7/2005 ho aperto il sito
Obiettivo: creare la comunità italiana per lo
sviluppo in .NET su dispositivi Mobile
.NET Compact Framework
SQL Server for Windows CE
Repliche dei dati
Applicazioni Server-side
Blogs – Forum
Scenari
Utilizzo di Terminal Service
 Impatto zero sul Device
 Solo per Pocket PC
Utilizzo di Internet Explorer
 Impatto zero sul Device
Applicazione sul Device
 Installazione sul Device
 Semplice o complessa che sia
 Scenari
 Utilizzo Socket o Web Request - Vecchio stile
 Utilizzo di XML - Vecchio Stile
 Utilizzo di Web Service !!!
 Download e uso dei dati sul device !!!
La sfida
Web Site
Problematiche 
Device Diversi
Schermi diversi
Dimensioni diverse
Supporto Markup Language Diverso
 WML, HTML, XHTML, cHTML, HDML
WAP Gateway gira le richieste in Http verso il
server
Mobile Web
HTML, WML, HDML, cHTML o XHTML ?
Se HTML, quale versione ?
 3.2 supportata da molti device ?
 4.0 supportata da alcuni
Uso Javascript lato client ?
 Sarebbe bello ma non funziona su tutti i device
Due opzioni
 Usiamo il minimo comune denominatore
 Adattiamo il rendering per vari device
 ...e quando ne esce uno nuovo ?
Altra problematica
WML e HTML sono diversi !
 Per la gestione dei form
 Per la gestione delle variabili
 In WML non esistono molti dei tag HTML
Potremmo scrivere codice che testa il device
(HTTP_USER_AGENT) e si comporta di
conseguenza
 Che fare per ogni nuovo device che esce ?
 Ci potremmo fare una libreria e un file di configurazione
Scelte Server-side
Mobile Controls, XSLT o Hand Coded
Mobile Controls
ASP.NET,
Mobile
Controls
Mobile
Web Browse
?
Native /
XSLT







Altra produttività
Gestione semplice
Supporto XML
Web Services integrati
Performance
Device Extension
Event-based
Native / XSLT






Sviluppo più complesso
Nuovo codice per nuovi device
Supporto XML (obbligatorio)
No Web Services
Utilizzo di standard
Riutilizzo ASP 3.0 e altri ambienti

ASP.NET Mobile Controls 1.1
 Estendono ASP.NET per
.NET Framework
applicazioni mobile
ASP.NET
 Integrazione con VS.NET
2002/2003
Windows Forms
&
.NET Compact
Framework
Mobile
Web
Forms
Web
Forms
Web Services
 Multi-Device
 Multi-Language
Services Framework
Base
Data
Debug
…
HTML/WML…
Common Language Runtime
System Services
Supporto Device – 250 c.a.
 ACCESS Compact: NetFront 2.0, Fujitsu F503i, Mitsubishi D502i, Mitsubishi D503i, NEC N210i, NEC N502i,








Sony SO503i
Ericsson 2.0: Ericsson R380, Ericsson R320, Ericsson R520m, Ericsson T20s
GoAmerica Go.Web: Compaq iPAQ H3650, Palm Vx, RIM Blackberry 857, RIM Blackberry 950, RIM Blackberry
957,
Microsoft Mobile Explorer: Sony CMD-Z5, Sony CMD-J5, Benefon Q,
Microsoft Pocket Internet Explorer: Casio Cassiopeia E-125, Compaq iPAQ H3630, Compaq iPAQ H3650, HP
Jornada 720, Compaq iPAQ H3670
Nokia: Nokia 3330, Nokia 6210, Nokia 7110, Nokia 9110i
Openwave UP.Browser 3.x: Audiovox CDM-9000, Ericsson R280LX, Hitachi C407H, Kyocera QCP 2035A,
Kyocera QCP 3035, LG V111, Mitsubishi T250, Motorola StarTAC 7868W, Motorola TimePort P8767, Samsung
SCH-6100, Samsung SCH-850, Samsung SCH-8500, Samsung UpRoar M100, Sanyo C401SA, Sanyo SCP4500, Sanyo SCP-5000, Sprint Touchpoint, Sprint Touchpoint 2200, Sprint Touchpoint 3000
Openwave UP.Browser 4.x: Alcatel One Touch 701, Audiovox CDM-135, Audiovox CDM-9100, Motorola
i1000plus, Motorola i2000plus, Motorola i50sx, Motorola i85s, Motorola T2288, Motorola TimePort P7382i,
Motorola TimePort P7389, Motorola V100, Motorola V120c, Motorola V2288, Motorola V60c, Siemens C35i,
Siemens S35i, Siemens SL45
Miscellaneous Browsers: Handspring Visor Platinum (Qualcomm Eudora Internet Suite 2.1; Blazer 1.0 and
Omnisky 2.1.0.15), IBM WorkPad c505 (ilinx Xiino 1.01J), Kyocera QCP 6035 (Qualcomm Eudora 2.0), Nokia
9210 (Symbian Crystal 6.0), Palm VII (MyPalm 1.0), Palm Vx (AU-Systems 2.12181.1 and Omnisky 2.0.04), Palm
m505 (MyPalm 1.1), Panasonic P210i, Panasonic P502i, Sharp J-SH04 (Original Equipment Manufacturer's
Version 3.0), Sharp Zaurus MI-E1 (Original Equipment Manufacturer's Version 6.1), Sony CLIE PEG-N700C (ilinz
Palmscape 4.0SJ), Toshiba J-T05 (Original Equipment Manufacturer's Version 3.0),
Caratteristiche
Adaptive Rendering
Mobile Control
 Sviluppo
 Espongono Proprieta’, Metodi, Eventi
Adapter
 Producono l’Output
 Un adapter per ogni tipo di “ML” da inviare
 Inviano ML corretto
 Configurati nel machine.config
Customization
Modello estendibile per customizzare il rendering per un particolare
device
Adaptive Rendering
Calendario
Invio testo WML
ASP.NET and IIS
WML
Recupero
Device Adapter
Mobile
Capabilities Recupero info
Selezione
Device Adapter
Browser e
WAP
Device
HTTP Request
Inizializzazione
Controlli
Calendar
cHTML
Recupero
Device Adapter
HTML
Invio super-TABLE
HTML
Mobile.ASPX
Web Form e Mobile Web Form
Web Form
<Form runat="server">
<asp:Label runat=“server">
Ciao Ciao
</asp:Label>
</Form>
Mobile Web Form
<mobile:Form runat="server">
<mobile:Label runat=“server">
Ciao Ciao
</mobile:Label>
</mobile:Form>
Text Display Controls
Label Control
Piccole quantità di info – read only
TextBox Control
Single-line input (text box)
Demo
Semplice
Trace per diverso rendering
Navigazione
Una pagina ASP.NET tradizionale contiene
un solo form
I device possono avere schermi
ridottissimi
Si possono costruire più form nella stessa
pagina
 Evitando di avere tante pagine “minuscole” sul sito
 Utilizzando gli stesse entità (nomi di pagine) dell’applicazione
Desktop
 Riutilizzando la stessa logica dell’applicazione Desktop
Transfer Controls
Link control
Testo con hyperlink
 Verso un form diverso (card in WML)
 Verso una pagina diversa
Proprietà SoftkeyLabel (per telefonini)
<mobile:Link id="lnkfrmResults" runat="server"
NavigateUrl="#frmResults">Go to Results</mobile:Link>
Transfer Controls
Command control
Bottone tradizionale
Può invocare eventi server-side
<mobile:Command id="cmdSelectProduct" runat="server“
softkeylabel=“Next”>Select Product</mobile:Command>
Demo 03
Demo 04
Phone Call
PhoneCall control
Su browser o Pocket PC
Visualizza il numero
Genera solo il testo
Sul un PPC Phone, SP
Chiamata diretta
A HREF verso il numero
Su WAP
Chiamata diretta
Tag WML per la chiamata
List Control
Utile per costruire Menù
Può avere Text e Value
Sul click viene scatenato ItemCommand
<mobile:List id=“lstXXX" runat="server“
OnItemCommand=“lstXXX_Command”>
<Item Text=“Udine” Value=“UD” />
<Item Text=“Trento” Value=“TN” />
<Item Text=“Milano” Value=“MI” />
</mobile:List>
TextView Control
Testo lungo
Consente
Bold
Italic
Salti pagina
Paragrafi
Anchor nel testo
Supporta Paginazione
List e Selection List
List
SelectionList
ObjectList
Databound
Opzionale
Opzionale
Obbligatorio
Pagination
Si
No
Si
Decoration
None, Bulleted,
Numbered
Dropdown, ListBox,
Radio Button,
CheckBox, MultiSelect
Solo con
Customization
Interactive
Opzionale
Si
Opzionale
Controlli simili in
ASP.NET
Datalist
ListBox, CheckBox,
CheckBoxList,
RadioButton,
RadioButtonList, &
DropDownList
Datagrid
ObjectList
DataBinding
Template
 Header
 Footer
 Item
 AlternatingItem
Dettaglio automatico
Demo
 IE
 Pocket PC
 SmartPhone
Un po’ di stile
Aggiungere un po’ di informazioni di style
3 stili predefiniti
title
Error
Subcommand
Associabili con StyleReference
Estendibile con propri stili
Demo 07
Immagini
<mobile:DynamicImage
DynamicImageSource=“path”
AutoSizeImage=true/false
AutoConvert=true/false
Cache in MobileDynamicImages
Per performance !
Non incluso in ASP.NET
Scaricabile da
http://asp.net/ControlGallery/Disclaimer.aspx?downloadControl=185&ta
bindex=2
Casi particolari
Se escono nuovi device ?
Device Update dal sito Microsoft
 Comprende eventuali nuovi adapter
Definizione device diretta da machine.config
Se vogliamo cambiare qualcosa ?
Proprerty Override
 Semplice
 Modificare valore proprietà in base al device
 Stesso Render
Custom Adapter
 Riscriviamo il processo di Render
 Più complesso ma controllo totale
Device Extensibility
Creazione
Web Form
Presentation
Layer (controls)
Device
Device
Capability
Capabilitý
aggiornato
HTTP
Request
Mobile.aspx
Business Logic
Test
Device
Invio in
Produzione
Mobile Controls
Device Adapter
generano output
HTTP
Response
Aggiunta
Device Adapters
W
A
P
IIS
.NET Framework 1.1
(ASP.NET)
Sviluppo
Produzione
Device Update
Siamo alla versione 4 per ASP.NET 1.x
Sono cumulativi
DU2 aggiunge Adapter per XHTML
Le prossime versioni conterranno solo supporto
a eventuali nuovi linguaggi
Device Profiling Tool
 http://www.asp.net/mobile/profile/default.aspx
 Step by Step online per creare la configurazione
 Restituisce il <browserCaps>
 Spettacolo !!!
Custom Config
CustomDevice.config in
C:\WINDOWS\Microsoft.NET\Framework\v1.1.43
22\CONFIG
Edit machine.config
 Cercare browserCaps
 “Add reference” 
<browserCaps>
<result type="System.Web.Mobile.MobileCapabilities, …/>
<file src="deviceUpdate.config" />
<file src="deviceUpdate3.config" />
<file src="deviceUpdate4.config" />
<file src="customdeviceUpdate.config" />
MobileCapabilities Object
ASP.NET Runtime
 Utilizza l’header HTTP USER-AGENT per identificare il browser
Mozilla/4.0 (compatible; MSIE 4.01; Windows CE;
SmartPhone; 176x220)
 Cerca il browser nella sezione <browserCaps> nel .config
 Crea un’istanza di MobileCapabilities impostando le proprietà definite nel
<browserCaps>
MobileCapabilities identifica le “capacità” del
browser MobileDeviceModel
 ScreenPixelsHeight, ScreenPixelsWidth
 PreferredRenderingType (html32, wml11, xhtml-basic, etc.)
 PreferredImageMime
…
Property Override
Modificare una qualunque proprietà di un
controllo in base al device
Size = 100 se Desktop
Size = 60 se Pocket PC
Size = 20 se SmartPhone
Size = 45 se Nokia Comunicator
ImageUrl verso GIF se Desktop / Pocket
ImageUrl verso WBMP se WAP Browser
DeviceSpecific Customization
Step 1: Selezionare il Device
•Filtri Predefiniti
•Filtri Custom
Step 2: DeviceSpecific
•Selezionare il Controllo
•Taggarlo con DeviceSpecific
Step 3: Applicare Customization Using
•Property Overrides
•<Choice Filter=“filtro” Proprietà=“xxx” />
•Template
•<Choice Filter=“filtro”>
•<ItemTemplate>...</ItemTemplate>
•</Choice>
Template Override
<mobile:Form id="Form1" runat="server">
<mobile:DeviceSpecific id="DeviceSpecific1" runat="server">
<Choice Filter="isHTML32">
<HeaderTemplate>
<mobile:Label id="Label1" runat="server"
StyleReference="title" ForeColor="Firebrick">
Contoso Inc.</mobile:Label>
</HeaderTemplate>
<FooterTemplate>
<mobile:Label id="Label2" runat="server"
Font-Size="Small">(c) Contoso, 2004.</mobile:Label>
</FooterTemplate>
</Choice>
</mobile:DeviceSpecific>
…
</mobile:Form>
Injecting Markup
 Es isHTML32 o isWML per markup specifico
<mobile:Form id="Form1" runat="server">
<mobile:DeviceSpecific id="DeviceSpecific1" runat="server">
<Choice Filter="isHTML32">
<HeaderTemplate>
<table width=“90%” cellspacing=“1”>
<tr><td bgcolor=“#003366” valign=“top” height=“100%”>
</HeaderTemplate>
<FooterTemplate>
</td></tr></table>
</FooterTemplate>
</Choice>
</mobile:DeviceSpecific>
...
...
Form e Script
<body>
<mobile:Form id="Form1" …>
<mobile:DeviceSpecific
<mobile:Label id="Label1"...>
id="DeviceSpecific1"
runat="server">
Name: </mobile:Label>
<Choice
Filter="supportsJavaScript">
<mobile:TextBox
id="TextBox1" …/>
<ScriptTemplate>
<mobile:Label id="Label2" …>
<Script for="window"
Password:
</mobile:Label>
event="onload“
<mobile:TextBox
id="TextBox2" …/>
language="jscript">
</mobile:Form>
</body> window.alert("Hello, World!");
window.Form1.TextBox1.focus();
</Script>
</ScriptTemplate>
</Choice>
</mobile:DeviceSpecific>
<html>
<body>
<head>
<form<Script
id="Form1"
name="Form1"event="onload"
method="post"…
for="window"
<input type="hidden" name="__EVENTTAR…
language="jscript">
<input type="hidden" name="__EVENTARG…
<script window.alert("Hello,
language=javascript><!--World!");
window.Form1.TextBox1.focus();
function
__doPostBack(target, argument){
var
theform
</Script> = document.Form1
theform.__EVENTTARGET.value=target
</head>
theform.__EVENTARGUMENT.value=argument
theform.submit()
}
// -->
</script>
Name:<input name="TextBox1"/><br>
Password:<input name="TextBox2"/>
</form></body></html>
ASP.NET 2.0
For Device
Property Override ovunque
Control adapter architecture per server
control
Simile a ASP.NET 1.1 Mobile Controls
Consente ai server control di comportarsi diversamente in base ai
browser
Beta 1 includeva alcuni mobile device adapter
Dalla Beta 2 non ci sono più !
Mobile Controls 1.x inclusi in ASP.NET 2.0
Aggiornata la configurazione al Device Update 4
Property Override supportata da <asp:
Mobile Control 1.x in ASP.NET 2.0
Possono sfruttare
 Auto-detection dei browser cookieless
 Membership, Profiles, Role management
 ADO.NET 2.0 MARS & Async
ASP.NET 1.x Mobile Controls non supportano
 Master pages, Web parts, Themes
Nessuna modifica al codice 
 Cambiare CodeBehind con CodeFile
 Mettere partial alla classe del CodeFile
 Togliere definizione controlli e WebForm Designer Generated Code
 Occhio AutoeventWiredUp
Quindi !?!?
ASP.NET 2.0 Server Controls per XHTML 1.1 o
HTML3.2 (enableLegacyRendering)
 Ottimo anche per device con browser “bravi”
 Pocket Internet Explorer su Pocket PC and Smartphone
 Non adatti a
 XHTML-MP browsers (Es. Sony-Ericsson)
 WAP 1.1, WAP 2.0 o cHTML
 Usare V1.x Mobile Controls
ASP.NET 2.0 Controls hanno molti vantaggi se
si possono usare
 Master pages, Login Controls, Themes
 ASP.NET 2.0 DataSource Controls
 Sapete il mio parere 
Supporto per Device
1.1 c’erano i Device Updates
In ASP.NET 2.0
 Microsoft non certifica più i nuovi device
 Gli adapter esistenti rimangono
 HTML, cHTML, XHTML Mobile Profile e CHTML
 I produttori di Device possono fornire la configurazione
 E Device Adapter
 Device Profiling http://www.asp.net/mobile/profile/default.aspx
 Aggiornato all’uscita di ASP.NET 2.0 per supportare il nuovo formato di
configurazione
Config Changes
.browser per la configurazione
Global %WINDIR%\Microsoft.Net\xx\config\browsers
Application: directory <app>\browsers
Nuova classe HttpBrowserCapabilities
Oggetto basato sui file .browser
 Assegnato all’oggetto Request (Request.Browser)
Global class
 Richiede rebuild per modifiche
 aspnet_regbrowsers.exe
Application class
 FileSystemWatcher - rebuild automatico
Propery Override 2.0
BrowserID incluso come filtro per le proprietà
<%@ Page theme=”BlueSky” Nokia:theme=”NokiaTheme” ... %>
<asp:Label runat=“server”
text=”Ciao”
IE:Text=”Ciao IE”
IE6to9:text=“Ciao IE versione 6 o 7 o 8 o 9 ”
MyOwnFilter:text=“Ciao da Filtro custom” ... />
<asp:Repeater ..>
<itemtemplate><%# Databinding expr %></itemtemplate>
<IE:itemtemplate>
<p style=”color:blue;font:arial”>
Hi <%# Databinding expr %>Ciao, come stai ?</p>
</IE:itemtemplate>
</asp:Repeater>
Altre Informazioni
 Dove posso ottenere maggiori
informazioni
www.DevLeap.it
www.pocketpcdn.com
www.asp.net/mobile
 Developer resources
Microsoft Visual Studio.NET
Microsoft .NET Framework SDK
Microsoft Developer Network