1 / 44

Intro to Mobile Development using .NET

Intro to Mobile Development using .NET. Roberto Brunetti roberto@devleap.it - rob@thinkmobile.it. DevLeap Pure .NET Training. Introduction to .NET Framework. Core .NET Framework. Introduction to ASP.NET. Introduction to ADO.NET. Introduction to Web Services. Core ADO.NET. Core ASP.NET.

colin-guerrero
Download Presentation

Intro to Mobile Development using .NET

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. DevLeap Pure .NET Training Introduction to .NET Framework Core .NET Framework Introduction to ASP.NET Introduction to ADO.NET Introduction toWeb Services Core ADO.NET Core ASP.NET CoreWeb Services ASP.NET 2.0Preview/Core/Upgrade Intro toMobility Dev SOA Serviceswith WSE2 AdvancedMobility Dev Architecting Apps in .NET

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

  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 Trace

  10. Scelte Server-sideMobile Controls, XSLT o Hand Coded  • Mobile Controls • Altra produttività • Gestione semplice • Supporto XML • Web Services integrati • Performance • Device Extension • Event-based ASP.NET, Mobile Controls ? Mobile Web Browse • 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 Native / XSLT

  11. .NET Framework ASP.NET Windows Forms & .NET Compact Framework Web Forms Mobile Web Forms Web Services Services Framework Base Data Debug … Common Language Runtime System Services ASP.NET Mobile Controls 1.1 • Integrazione con VS.NET 2002/2003 • Estendono ASP.NET per applicazioni mobile • Multi-Device • Multi-LanguageHTML/WML… Demo 13

  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), Machine.Config

  13. 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 Machine.config 1.0 - Web.config 2.0

  14. Invio testo WML Recupero info Browser e Device Recupero Device Adapter Selezione Device Adapter InizializzazioneControlli Recupero Device Adapter Invio super-TABLE HTML Adaptive RenderingCalendario ASP.NET and IIS Mobile Capabilities WML WAP HTTP Request Calendar cHTML HTML Mobile.ASPX

  15. Web Form e Mobile Web Form MobileWeb Form Web Form <Form runat="server"> <asp:Label runat=“server"> Ciao Ciao </asp:Label> </Form> <mobile:Form runat="server"> <mobile:Label runat=“server"> Ciao Ciao </mobile:Label> </mobile: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 Demo 01

  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) dell’applicazione Desktop • Riutilizzando la stessa logica dell’applicazione Desktop

  18. Transfer Controls • Link control • Testo con hyperlink • Verso un form diverso (card in WML) • Verso una pagina diversa • Proprietà SoftkeyLabel (per telefonini) Demo 02 <mobile:Link id="lnkfrmResults" runat="server" NavigateUrl="#frmResults">Go to Results</mobile:Link>

  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</mobile:Command>

  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 Demo 12

  21. List Control Demo 05 • 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>

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

  23. List e Selection List

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

  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&tabindex=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. WAP Device Extensibility IIS .NET Framework 1.1 (ASP.NET) CreazioneWeb Form Device Capabilityaggiornato Device Capabilitý HTTP Request Presentation Layer (controls) Mobile.aspx Business Logic Mobile Controls Device Adaptergenerano output Test Device HTTP Response Invio inProduzione Aggiunta Device Adapters Sviluppo Produzione

  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 <browserCaps> • Spettacolo !!! Machine.Config

  30. Custom Config • CustomDevice.config in C:\WINDOWS\Microsoft.NET\Framework\v1.1.4322\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" />

  31. 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 • …

  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:Selezionare il Device • Filtri Predefiniti • Filtri Custom Demo 11 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>

  34. 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> Demo 18

  35. 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> ... ... Demo 19

  36. Form e Script <body> <mobile:Form id="Form1" …> <html> <mobile:DeviceSpecific id="DeviceSpecific1" runat="server"> <Choice Filter="supportsJavaScript"> <ScriptTemplate> <Script for="window" event="onload“ language="jscript"> window.alert("Hello, World!"); window.Form1.TextBox1.focus(); </Script> </ScriptTemplate> </Choice> </mobile:DeviceSpecific> <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> <head> <Script for="window" event="onload" language="jscript"> window.alert("Hello, World!"); window.Form1.TextBox1.focus(); </Script> </head> <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> Demo 20

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

  42. 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

  43. 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> Demo 23

  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

More Related