Intro to Mobile Development using.NET Roberto Brunetti -

Presentazione sul tema: "Intro to Mobile Development using.NET Roberto Brunetti -"— Transcript della presentazione:

1 Intro to Mobile Development using.NET Roberto Brunetti roberto@devleap.it - rob@thinkmobile.it

2 DevLeap Pure.NET Training Introduction to.NET Framework Architecting Apps in.NET Introduction to Web Services Introduction to ASP.NET Introduction to ADO.NET Core ASP.NET Core ADO.NET Core Web Services Core.NET Framework SOA Services with WSE2 ASP.NET 2.0 Preview/Core/Upgrade Intro to Mobility Dev Advanced Mobility Dev

3 DevLeap Training Sharepoint 2003 Development Data Warehouse e DTS OLAP Analysis Services Longhorn Preview WinFX Preview WCF (Indigo) Preview SQL 2005 Preview Introduction to ASP.NET WPF (Avalon) Preview SQL 2005 Analysis Services Preview SQL Server Reporting Services VSTS for Technicians

4 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

5 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 !!!

6 La sfida Web Site

7 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

8 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 ?

9 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

10 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, Mobile Controls Native / XSLT Mobile Web Browse ? Scelte Server-side Mobile Controls, XSLT o Hand Coded

11 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 BaseDataDebug … Web Forms Mobile Web Forms Web Services Estendono ASP.NET per applicazioni mobile Multi-Device Multi-Language HTML/WML…

12 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),

13 Caratteristiche Adaptive Rendering Mobile Control Sviluppo Espongono Proprieta, Metodi, Eventi Adapter Producono lOutput 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

14 Adaptive Rendering Calendario WML cHTMLHTML Calendar MobileCapabilities HTTP Request Invio super-TABLE HTML Mobile.ASPX Recupero Device Adapter Recupero info Browser e Device Selezione Device Adapter Recupero Device Adapter WAP ASP.NET and IIS Invio testo WML Inizializzazione Controlli

15 Web Form e Mobile Web Form Mobile Web Form Ciao Ciao Ciao Ciao </Form> Web Form

16 Text Display Controls Label Control Piccole quantità di info – read only TextBox Control Single-line input (text box) Demo Semplice Trace per diverso rendering

17 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) dellapplicazione Desktop Riutilizzando la stessa logica dellapplicazione Desktop

18 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 NavigateUrl="#frmResults">Go to Results

19 Transfer Controls Command control Bottone tradizionale Può invocare eventi server-side Demo 03 Demo 04 <mobile:Command id="cmdSelectProduct" runat="server softkeylabel=Next>Select Product softkeylabel=Next>Select Product

20 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

21 List Control Utile per costruire Menù Può avere Text e Value Sul click viene scatenato ItemCommand </mobile:List>

22 TextView Control Testo lungo Consente Bold Italic Salti pagina Paragrafi Anchor nel testo Supporta Paginazione

23 List e Selection List ListSelectionListObjectList DataboundOpzionale Obbligatorio PaginationSiNoSi DecorationNone, Bulleted, Numbered Dropdown, ListBox, Radio Button, CheckBox, MultiSelect Solo con Customization InteractiveOpzionaleSiOpzionale Controlli simili in ASP.NET DatalistListBox, CheckBox, CheckBoxList, RadioButton, RadioButtonList, & DropDownList Datagrid

24 ObjectList DataBinding Template Header Footer Item AlternatingItem Dettaglio automatico Demo IE Pocket PC SmartPhone

25 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

26 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&t abindex=2

27 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

28 IIS.NET Framework 1.1 (ASP.NET) Sviluppo Produzione Creazione Web Form Business Logic Presentation Layer (controls) Layer (controls) TestDevice Invio in Produzione HTTPRequestDeviceCapabilitý Mobile Controls Device Adapter generano output Aggiunta Device Adapters Device Capability aggiornato HTTPResponse Mobile.aspx Device Extensibility WAPWAPWAPWAP

29 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 Spettacolo !!!

30 Custom Config CustomDevice.config in C:\WINDOWS\Microsoft.NET\Framework\v1.1.43 22\CONFIG Edit machine.config Cercare browserCaps Add reference <browserCaps>

31 MobileCapabilities Object ASP.NET Runtime Utilizza lheader HTTP USER-AGENT per identificare il browser Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; SmartPhone; 176x220) Cerca il browser nella sezione nel.config Crea unistanza di MobileCapabilities impostando le proprietà definite nel MobileCapabilities identifica le capacità del browser MobileDeviceModel ScreenPixelsHeight, ScreenPixelsWidth PreferredRenderingType (html32, wml11, xhtml-basic, etc.) PreferredImageMime …

32 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

33 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 Template... Step 3: Step 3: Applicare Customization Using Property Overrides Template... Step 2: Step 2: DeviceSpecific Selezionare il Controllo Taggarlo con DeviceSpecific Step 2: Step 2: DeviceSpecific Selezionare il Controllo Taggarlo con DeviceSpecific

34 Template Override <mobile:Label id="Label1" runat="server" <mobile:Label id="Label1" runat="server" StyleReference="title" ForeColor="Firebrick"> StyleReference="title" ForeColor="Firebrick"> Contoso Inc. Contoso Inc. <mobile:Label id="Label2" runat="server" <mobile:Label id="Label2" runat="server" Font-Size="Small">(c) Contoso, 2004. Font-Size="Small">(c) Contoso, 2004. …

35 Injecting Markup Es isHTML32 o isWML per markup specifico......

36 Form e Script Name: Password: <form id="Form1" name="Form1" method="post"… <input type="hidden" name="__EVENTTAR… <input type="hidden" name="__EVENTARG… <!-- function __doPostBack(target, argument){ var theform = document.Form1 theform.__EVENTTARGET.value=target theform.__EVENTARGUMENT.value=argument theform.submit() } // --> Name: Password: <mobile:DeviceSpecific id="DeviceSpecific1" runat="server"> id="DeviceSpecific1" runat="server"> <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(); </mobile:DeviceSpecific> <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(); </head>

37 ASP.NET 2.0 For Device

38 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:

39 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

40 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

41 Supporto per Device 1.1 cerano 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.aspxhttp://www.asp.net/mobile/profile/default.aspx Aggiornato alluscita di ASP.NET 2.0 per supportare il nuovo formato di configurazione

42 Config Changes.browser per la configurazione Global %WINDIR%\Microsoft.Net\xx\config\browsers Application: directory \browsers Nuova classe HttpBrowserCapabilities Oggetto basato sui file.browser Assegnato alloggetto Request (Request.Browser) Global class Richiede rebuild per modifiche aspnet_regbrowsers.exe Application class FileSystemWatcher - rebuild automatico

43 Propery Override 2.0 BrowserID incluso come filtro per le proprietà <asp:Label runat=server text=Ciao IE:Text=Ciao IE IE6to9:text=Ciao IE versione 6 o 7 o 8 o 9 IE6to9:text=Ciao IE versione 6 o 7 o 8 o 9 MyOwnFilter:text=Ciao da Filtro custom... /> Hi Ciao, come stai ? Hi Ciao, come stai ? </asp:Repeater> <asp:Label runat=server text=Ciao IE:Text=Ciao IE IE6to9:text=Ciao IE versione 6 o 7 o 8 o 9 IE6to9:text=Ciao IE versione 6 o 7 o 8 o 9 MyOwnFilter:text=Ciao da Filtro custom... /> Hi Ciao, come stai ? Hi Ciao, come stai ? </asp:Repeater>

44 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