ASP.NET & Mobility
Roberto Brunetti
[email protected]
http://blogs.devleap.com/rob
http://thinkmobile.it/blogs/rob
La sfida
Web Site
La sfiga 
•
•
•
•
•
•
Device Diversi
Schermi diversi
Dimensioni diverse
Supporto Markup Language Diverso
Html e Http li conosciamo
Diamo uno sguardo a WML rispetto a HTML
• Ricordiamoci che il WAP Gateway gira le richieste
in Http verso il server
Simile a HTML
<?xml version=“1.0”?>
<!DOCTYPE wml PUBLIC ...........>
<wml>
<card id=“card1” title=“Prima card”>
<p>Primo esempio</p>
</card>
</wml>
MultiCard
<?xml version=“1.0”?>
<!DOCTYPE wml PUBLIC ...........>
<wml>
<card id=“card1” title=“Prima card”>
<p>Prima</p>
</card>
<card id=“card2” title=“Seconda card”>
<p>Seconda</p>
</card>
</wml>
WML: Tag e Element
Deck / Card
wml, card, template, head, access, meta
Events
do, ontimer, onenter, onpick, onevent, postfield
Tasks
go, prev, refresh, noop
Variables
Setvar
User Input
input, select, option, optgroup, fieldset
Anchor
a, anchor
Image
img
Timer
timer
Text
br, p, table, tr, td
Variabili
• In HTML in quanto tale non esistono !
• Sono case sensitive
• Si impostano con
• <setvar name=“variab1” value=“valore”/>
• Durante la navigazione
• <go href=“#card2”><setvar...../></go>
• Si leggono i valori con
• $(variab1)
• Mantengono il contesto (!= HTTP)
• Se l’utente naviga interagendo con l’applicazione
• Può essere perso se naviga verso altri deck non interagendo con
l’applicazione
Torniamo al problema
• WML e HTML sono diversi
• Per la gestione dei form
• Per la gestione delle variabili
• In WML non esistono molti dei tag HTML
• Inoltre abbiamo schermi di dimensioni diversi da device a
device
• 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
ASP.NET Mobile Controls 1.1
• Estendono ASP.NET
per app mobile
.NET Framework
ASP.NET
• Integrazione con
VS.NET 2002/2003
Windows Forms
&
.NET Compact
Framework
Mobile
Web
Forms
Web
Forms
Web Services
• Multi-Device
• Multi-Language
HTML/WML…
Services Framework
Base
Data
Debug
…
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 SCP-4500, 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 JT05 (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>
Sfruttare il device
• PhoneCall control
• Genera mark-up
• Su un telefonino con possibilità di chiamata diretta
• Su un device visualizza il numero
ObjectList
• DataBinding
• Template
•
•
•
•
Header
Footer
Item
AlternatingItem
• Dettaglio automatico
• Demo
• IE
• Pocket PC
• SmartPhone
Calendar
• Gli adapter producono non solo ML diversi in
base al device
• Ma anche interfacce utente diverse (o
completamente diverse) da device a device
Problemi
• 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
IIS
.NET Framework 1.1
(ASP.NET)
Sviluppo
Produzione
Device Update
•
•
•
•
Siamo alla versione 4
Sono cumulativi
DU2 aggiunge Adapter per XHTML
Le prossime versioni conterranno solo supporto a
eventuali nuovi linguaggi
• Device nuovo a mano ?
• Device Profiling Tool
• http://www.asp.net/mobile/profile/default.aspx
• Step by Step online per creare la configurazione
• Restituisce il <browserCaps>
• Spettacolo !!!
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>
Device Filters
•
Filtri di comparazione rispetto a MobileCapabilities
•
•
compare indica la proprietà dell’oggetto MobileCapabilities
true se la prorietà indicata come compare è uguale
all’attributo argument
<deviceFilters>
<filter name="isHTML32"
compare="PreferredRenderingType"
argument="html32" />
</deviceFilters>
•
In pratica
•
•
isHTML32 se PreferredRenderingType è Html32
Si possono anche scrivere filtri più complessi da codice
•
Ad esempio basare il criterio su più “compare”
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">
DevLeap Mobile</mobile:Label>
</HeaderTemplate>
<FooterTemplate>
<mobile:Label id="Label2" runat="server"
Font-Size="Small">(c) DevLeap, 2005.</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>
Emulatori disponibili
• Link verso i vari emulatori
• http://support.microsoft.com/default.aspx?scid
=kb;en-us;320977
• http://www.asp.net/mobile/DeviceSimulators.a
spx?tabindex=6
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 
• 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>
Device Adapter Custom
• Andiamo oltre
• Modifichiamo il Render
• Classe per Custom Device Adapter
• Aggingere l’assembly al progetto o registrarlo nella
GAC
• Aggiornare il .browser files per mappare il nostro
adapter
ASP.NET 2.0 Runtime
To client
.aspx
XYZcontrol
.browser
files
M
a
p
pi
n
g
MyAdapter
HtmlAdapter
WmlAdapter
Inherits WebControlAdapter
using System;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.Adapters;
namespace DevLeap.MobileAdapter
{
public class LabelAdapter : System.Web.UI.WebControls.Adapters.WebControlAdapter
{
protected new Label Control
{
get
{
return (Label)base.Control;
}
}
protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
// Produrre l’output
// Es. Facciamo bold il testo
writer.Write("<b>!!");
writer.Write(Control.Text);
writer.Write("</b>");
}
}
}
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.
Content created by 3 Leaf Solutions