Intro to Mobile Development

using .NET

Roberto Brunettiroberto@devleap.it - rob@thinkmobile.it

DevLeap Pure .NET Training

Introduction to .NET Framework

Introduction to .NET Framework

Architecting Apps in .NET

Architecting Apps in .NET

Introduction toWeb Services

Introduction toWeb Services

Introduction to ASP.NET

Introduction to ASP.NET

Introduction to ADO.NET

Introduction to ADO.NET

Core ASP.NETCore ASP.NETCore ADO.NETCore ADO.NET CoreWeb Services

CoreWeb Services

Core .NET FrameworkCore .NET Framework

SOA Serviceswith WSE2

SOA Serviceswith WSE2

ASP.NET 2.0Preview/Core/Upgrade

ASP.NET 2.0Preview/Core/Upgrade

Intro toMobility Dev

Intro toMobility Dev

AdvancedMobility DevAdvanced

Mobility Dev

DevLeap Training

Sharepoint 2003 Development

Sharepoint 2003 Development

Data Warehouse e DTS

Data Warehouse e DTS

OLAP Analysis Services

OLAP Analysis Services

Longhorn Preview

Longhorn Preview

WinFXPreviewWinFX

Preview

WCF (Indigo) Preview

WCF (Indigo) Preview

SQL 2005 PreviewSQL 2005 Preview

Introduction to ASP.NET

Introduction to ASP.NET

WPF (Avalon) Preview

WPF (Avalon) Preview

SQL 2005 Analysis Services Preview

SQL 2005 Analysis Services Preview

SQL Server Reporting Services

SQL Server Reporting Services

VSTS for Technicians

VSTS for Technicians

ThinkMobile.it

Il 12/7/2005 ho aperto il sitoObiettivo: creare la comunità italiana per lo sviluppo in .NET su dispositivi Mobile

.NET Compact FrameworkSQL Server for Windows CERepliche dei datiApplicazioni 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 SiteWeb Site

Problematiche

Device DiversiSchermi diversiDimensioni diverseSupporto 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

Mobile Controls 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, ASP.NET, Mobile Mobile ControlsControls

Native / Native / XSLTXSLT

Mobile Mobile Web BrowseWeb Browse ??

Scelte Server-side

Mobile Controls, XSLT o Hand Coded

ASP.NET Mobile Controls 1.1

Integrazione con VS.NET 2002/2003

.NET Framework

Services Framework

ASP.NET

Common Language Runtime

System Services

Windows Forms&

.NET Compact Framework

Base Data Debug …

Web Forms

MobileWeb Forms

Web Services

Estendono ASP.NET per applicazioni mobile

Multi-Device

Multi-LanguageHTML/WML…

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 J-T05 (Original Equipment Manufacturer's Version 3.0),

Caratteristiche

Adaptive RenderingMobile 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

CustomizationModello estendibile per customizzare il rendering per un

particolare device

Adaptive RenderingCalendario

WMLWML

cHTMLcHTML HTMLHTML

CalendarCalendar

MobileMobileCapabilitiesCapabilities

HTTP RequestHTTP Request

Invio super-TABLE Invio super-TABLE HTMLHTML

Mobile.ASPX

Recupero Recupero Device AdapterDevice Adapter

Recupero info Recupero info Browser e Browser e

DeviceDeviceSelezione Selezione Device AdapterDevice Adapter

Recupero Recupero Device AdapterDevice Adapter WAPWAP

ASP.NET and IISASP.NET and IIS Invio testo WMLInvio testo WML

InizializzazioneInizializzazioneControlliControlli

Web Form e Mobile Web Form

Mobile Web Form

<<mobilemobile:Form runat="server">:Form runat="server"><<mobilemobile:Label runat=“server">:Label runat=“server">

Ciao CiaoCiao Ciao</</mobilemobile:Label>:Label>

</</mobilemobile:Form>:Form>

<Form runat="server"><Form runat="server"><<aspasp:Label runat=“server">:Label runat=“server">

Ciao CiaoCiao Ciao </</aspasp:Label>:Label></Form></Form>

Web FormWeb Form

Text Display Controls

Label ControlPiccole quantità di info – read only

TextBox ControlSingle-line input (text box)

DemoSempliceTrace 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" <mobile:Link id="lnkfrmResults" runat="server" NavigateUrl="#frmResults">Go to Results</mobile:Link>NavigateUrl="#frmResults">Go to Results</mobile:Link>

Transfer Controls

Command controlBottone tradizionalePuò invocare eventi server-side

Demo 03Demo 04

<mobile:Command id="cmdSelectProduct" runat="server“ <mobile:Command id="cmdSelectProduct" runat="server“ softkeylabel=“Next”>Select Product</mobile:Command>softkeylabel=“Next”>Select Product</mobile:Command>

Phone Call

PhoneCall controlSu browser o Pocket PC

Visualizza il numeroGenera solo il testo

Sul un PPC Phone, SPChiamata direttaA HREF verso il numero

Su WAPChiamata direttaTag WML per la chiamata

List Control

Utile per costruire MenùPuò avere Text e ValueSul click viene scatenato ItemCommand<mobile:List id=“lstXXX" runat="server“ <mobile:List id=“lstXXX" runat="server“

OnItemCommand=“lstXXX_Command”>OnItemCommand=“lstXXX_Command”><Item Text=“Udine” Value=“UD” /><Item Text=“Udine” Value=“UD” /><Item Text=“Trento” Value=“TN” /><Item Text=“Trento” Value=“TN” /><Item Text=“Milano” Value=“MI” /><Item Text=“Milano” Value=“MI” />

</mobile:List></mobile:List>

TextView Control

Testo lungoConsente

BoldItalicSalti paginaParagrafiAnchor nel testoSupporta 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

DataBindingTemplate

Header Footer Item AlternatingItem

Dettaglio automaticoDemo

IE Pocket PC SmartPhone

Un po’ di stile

Aggiungere un po’ di informazioni di style3 stili predefiniti

titleErrorSubcommand

Associabili con StyleReferenceEstendibile con propri stili

Demo 07

Immagini

<mobile:DynamicImageDynamicImageSource=“path”AutoSizeImage=true/falseAutoConvert=true/false

Cache in MobileDynamicImagesPer performance !

Non incluso in ASP.NETScaricabile da http://asp.net/ControlGallery/Disclaimer.aspx?

downloadControl=185&tabindex=2

Casi particolari

Se escono nuovi device ?Device Update dal sito Microsoft

Comprende eventuali nuovi adapterDefinizione 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

IISIIS.NET Framework 1.1 .NET Framework 1.1

(ASP.NET)(ASP.NET)

SviluppoSviluppo ProduzioneProduzione

CreazioneCreazioneWeb FormWeb Form

Business LogicBusiness Logic

PresentationPresentation Layer (controls)Layer (controls)

Test Test DeviceDevice

Invio inInvio inProduzioneProduzione

HTTPHTTPRequestRequest

DeviceDeviceCapabilitýCapabilitý

Mobile Controls Mobile Controls Device AdapterDevice Adapter

generano outputgenerano output

AggiuntaAggiuntaDevice AdaptersDevice Adapters

DeviceDeviceCapabilityCapabilityaggiornatoaggiornato

HTTPHTTPResponseResponse

Mobile.aspxMobile.aspx

Device Extensibility

WWAAPP

Device Update

Siamo alla versione 4 per ASP.NET 1.xSono cumulativiDU2 aggiunge Adapter per XHTMLLe 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.4322\CONFIG

Edit machine.config Cercare browserCaps “Add reference”

<browserCaps><browserCaps> <result type="System.Web.Mobile.MobileCapabilities, …/><result type="System.Web.Mobile.MobileCapabilities, …/> <file src="deviceUpdate.config" /><file src="deviceUpdate.config" /> <file src="deviceUpdate3.config" /><file src="deviceUpdate3.config" /> <file src="deviceUpdate4.config" /><file src="deviceUpdate4.config" /> <file src="customdeviceUpdate.config" /><file src="customdeviceUpdate.config" />

MobileCapabilities Object

ASP.NET Runtime Utilizza l’header HTTP USER-AGENT per identificare il browserMozilla/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 DesktopSize = 60 se Pocket PCSize = 20 se SmartPhoneSize = 45 se Nokia Comunicator ImageUrl verso GIF se Desktop / Pocket ImageUrl verso WBMP se WAP Browser

DeviceSpecific Customization

Step 1:Step 1: Selezionare il Device•Filtri Predefiniti•Filtri Custom

Step 1:Step 1: Selezionare il Device•Filtri Predefiniti•Filtri Custom

Step 3:Step 3: Applicare Customization Using•Property Overrides

•<Choice Filter=“filtro” Proprietà=“xxx” />•Template

•<Choice Filter=“filtro”>•<ItemTemplate>...</ItemTemplate>

•</Choice>

Step 3:Step 3: Applicare Customization Using•Property Overrides

•<Choice Filter=“filtro” Proprietà=“xxx” />•Template

•<Choice Filter=“filtro”>•<ItemTemplate>...</ItemTemplate>

•</Choice>

Step 2:Step 2: DeviceSpecific•Selezionare il Controllo•Taggarlo con DeviceSpecific

Step 2:Step 2: DeviceSpecific•Selezionare il Controllo•Taggarlo con DeviceSpecific

Template Override

<mobile:Form id="Form1" runat="server"><mobile:Form id="Form1" runat="server"> <mobile:DeviceSpecific id="DeviceSpecific1" runat="server"><mobile:DeviceSpecific id="DeviceSpecific1" runat="server"> <Choice Filter="<Choice Filter="isHTML32isHTML32">"> <HeaderTemplate><HeaderTemplate> <mobile:Label id="Label1" runat="server" <mobile:Label id="Label1" runat="server" StyleReference="title" ForeColor="Firebrick">StyleReference="title" ForeColor="Firebrick"> Contoso Inc.</mobile:Label>Contoso Inc.</mobile:Label> </HeaderTemplate></HeaderTemplate> <FooterTemplate><FooterTemplate> <mobile:Label id="Label2" runat="server" <mobile:Label id="Label2" runat="server" Font-Size="Small">(c) Contoso, 2004.</mobile:Label>Font-Size="Small">(c) Contoso, 2004.</mobile:Label> </FooterTemplate></FooterTemplate> </Choice></Choice> </mobile:DeviceSpecific></mobile:DeviceSpecific> … … </mobile:Form></mobile:Form>

Injecting Markup

Es isHTML32 o isWML per markup specifico

<mobile:Form id="Form1" runat="server"><mobile:Form id="Form1" runat="server"> <mobile:DeviceSpecific id="DeviceSpecific1" runat="server"><mobile:DeviceSpecific id="DeviceSpecific1" runat="server"> <Choice Filter="<Choice Filter="isHTML32isHTML32">"> <HeaderTemplate><HeaderTemplate> <table width=“90%” cellspacing=“1”><table width=“90%” cellspacing=“1”> <tr><td bgcolor=“#003366” valign=“top” height=“100%”><tr><td bgcolor=“#003366” valign=“top” height=“100%”> </HeaderTemplate></HeaderTemplate> <FooterTemplate><FooterTemplate> </td></tr></table></td></tr></table> </FooterTemplate></FooterTemplate> </Choice></Choice> </mobile:DeviceSpecific></mobile:DeviceSpecific> ...... ......

Form e Script

<body> <mobile:Form id="Form1" …> <mobile:Label id="Label1"...> Name: </mobile:Label> <mobile:TextBox id="TextBox1" …/> <mobile:Label id="Label2" …> Password: </mobile:Label> <mobile:TextBox id="TextBox2" …/> </mobile:Form></body>

<html><body><form id="Form1" name="Form1" method="post"… <input type="hidden" name="__EVENTTAR… <input type="hidden" name="__EVENTARG… <script language=javascript><!-- function __doPostBack(target, argument){ var theform = document.Form1 theform.__EVENTTARGET.value=target theform.__EVENTARGUMENT.value=argument theform.submit() } // --> </script>Name:<input name="TextBox1"/><br>Password:<input name="TextBox2"/></form></body></html>

<mobile:DeviceSpecific <mobile:DeviceSpecific id="DeviceSpecific1" runat="server">id="DeviceSpecific1" runat="server"> <Choice Filter="supportsJavaScript"><Choice Filter="supportsJavaScript"> <ScriptTemplate><ScriptTemplate> <Script for="window" <Script for="window" event="onload“ event="onload“ language="jscript">language="jscript"> window.alert("Hello, World!");window.alert("Hello, World!"); window.Form1.TextBox1.focus();window.Form1.TextBox1.focus(); </Script></Script> </ScriptTemplate></ScriptTemplate> </Choice></Choice></mobile:DeviceSpecific></mobile:DeviceSpecific>

<head><head> <Script for="window" event="onload" <Script for="window" event="onload" language="jscript">language="jscript"> window.alert("Hello, World!");window.alert("Hello, World!"); window.Form1.TextBox1.focus();window.Form1.TextBox1.focus(); </Script></Script></head></head>

ASP.NET 2.0

For Device

Property Override ovunque

Control adapter architecture per server control

Simile a ASP.NET 1.1 Mobile ControlsConsente ai server control di comportarsi diversamente in base ai

browserBeta 1 includeva alcuni mobile device adapterDalla 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 UpdatesIn 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 configurazioneGlobal %WINDIR%\Microsoft.Net\xx\config\browsersApplication: 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” <%@ Page theme=”BlueSky” Nokia:themeNokia:theme=”NokiaTheme” ... %>=”NokiaTheme” ... %>

<asp:Label runat=“server”<asp:Label runat=“server”text=”Ciao” text=”Ciao” IE:TextIE:Text=”Ciao IE” =”Ciao IE” IE6to9IE6to9:text=“Ciao IE versione 6 o 7 o 8 o 9 :text=“Ciao IE versione 6 o 7 o 8 o 9 ””MyOwnFilterMyOwnFilter:text=“Ciao da Filtro custom” ... />:text=“Ciao da Filtro custom” ... />

<asp:Repeater ..><asp:Repeater ..> <itemtemplate><%# Databinding expr %></itemtemplate><itemtemplate><%# Databinding expr %></itemtemplate> <IE:<IE:itemtemplateitemtemplate>> <p style=”color:blue;font:arial”><p style=”color:blue;font:arial”> Hi <%# Databinding expr %>Ciao, come stai ?</p>Hi <%# Databinding expr %>Ciao, come stai ?</p> </</IE:IE:itemtemplate>itemtemplate></asp:Repeater></asp:Repeater>

<%@ Page theme=”BlueSky” <%@ Page theme=”BlueSky” Nokia:themeNokia:theme=”NokiaTheme” ... %>=”NokiaTheme” ... %>

<asp:Label runat=“server”<asp:Label runat=“server”text=”Ciao” text=”Ciao” IE:TextIE:Text=”Ciao IE” =”Ciao IE” IE6to9IE6to9:text=“Ciao IE versione 6 o 7 o 8 o 9 :text=“Ciao IE versione 6 o 7 o 8 o 9 ””MyOwnFilterMyOwnFilter:text=“Ciao da Filtro custom” ... />:text=“Ciao da Filtro custom” ... />

<asp:Repeater ..><asp:Repeater ..> <itemtemplate><%# Databinding expr %></itemtemplate><itemtemplate><%# Databinding expr %></itemtemplate> <IE:<IE:itemtemplateitemtemplate>> <p style=”color:blue;font:arial”><p style=”color:blue;font:arial”> Hi <%# Databinding expr %>Ciao, come stai ?</p>Hi <%# Databinding expr %>Ciao, come stai ?</p> </</IE:IE:itemtemplate>itemtemplate></asp:Repeater></asp:Repeater>

Altre Informazioni

Dove posso ottenere maggiori informazioniwww.DevLeap.itwww.pocketpcdn.comwww.asp.net/mobile

Developer resourcesMicrosoft Visual Studio.NETMicrosoft .NET Framework SDKMicrosoft Developer Network