Introduction to Mobile Development Roberto Brunetti Email: roberto@devleap.it BLog: www.DevLeap.it/BLog/Rob.rss

Chi siamo www.DevLeap.it Un gruppo di 5 persone con tanta voglia di Studiare a fondo le tecnologie Capire il “behind the scenes” Implementare soluzioni reali Confrontarsi con le problematiche reali Sperimentare nuove idee www.microsoft.com/italy/msdn/studenti

Cosa Facciamo Sviluppo interno Corsi Conferenze Seminari Mentoring Analisi e disegno di progetto Auditing su realizzazioni proprie o di terze parti Valutazione skill risorse umane Non facciamo sviluppo direttamente (Supporto telefonico/via email a contorno di altri servizi: mentoring) Definizione di percorsi di crescita per team di sviluppo www.microsoft.com/italy/msdn/studenti

Chi siete ? Avete mai visto un Pocket PC ? Avete mai sviluppato in ambienti “mobile” ? Conoscete .NET ? Sviluppate in Visual Basic o C++ ? www.microsoft.com/italy/msdn/studenti

Agenda Panoramica ai dispositivi Mobile MS Panoramica Strumenti di sviluppo Panoramica Connettività e Protocolli Panoramica Scenari di sviluppo Sviluppo Web (server-side) Sviluppo Rich Client Enterprise Application Altri Tool attuali Direzioni future www.microsoft.com/italy/msdn/studenti

Useremo Tablet PC/Pocket PC 2002/SmartPhone 2002 SQL Server 2000 Collegheremo/Scollegheremo Qualche crash… SQL Server 2000 SQL Server for Windows CE C++ e C# WML/HTML/ASP.NET .NET Emulatori di dispositivi Per allargare il panorama www.microsoft.com/italy/msdn/studenti

Panoramica dispositivi Notebook...non poteva mancare Tablet PC Smart Display Device Windows CE Pocket PC Pocket PC Phone Edition SmartPhone Telefonini WAP PDA Palm OS www.microsoft.com/italy/msdn/studenti

.NET Clients www.microsoft.com/italy/msdn/studenti

Tablet PC www.microsoft.com/italy/msdn/studenti

Tablet PC Interfaccia identica a XP Con Ink Recogniction e EMR Stylus Adattabile a qualunque forma fisica All’interno è un PC RAM – Disco Fisso – Schede varie - USB Windows XP Tablet PC Edition Girano tutte le applicazioni attuali Include .NET Framework completo 2 Forme State : LapTop classico Convertible: tastiera e penna www.microsoft.com/italy/msdn/studenti

Demo Internet Explorer su Tablet Remote Assistance Creazione invitation da Tablet (pwd=pippo) Salvo su DeskTop Open invitation da Desktop Aggiustare Schermo PowerPoint su Tablet PC Journal su Tablet PC www.microsoft.com/italy/msdn/studenti

Smart Display (Foto) Stylus e touch-sensitive screen On-screen Keyboard Handwriting recogniction Supporto per mouse e tastiera wireless Accesso al PC con Windows XP (SP1) Via scheda wireless 802.11 Basato su XP Professional Windows CE for Smart Device (+ probabile) Versione CE.NET 4.1 + Add-on kit www.microsoft.com/italy/msdn/studenti

Windows CE Sistema Operativo Real-time Modulare 3.0 4.x Si possono scegliere le componenti per creare un device 3.0 pIE 3, Supporto Ethernet, IIS, ASP, MSMQ Ad oggi gli OEM hanno aggiunto Bluetooth, 802.x, Fingerprint 4.x Bluetooth, 802.x IE 5.5, WMT 8.0, Direct X 8.0 .NET Compact Framework Kerberos, SSL, SmartCard www.microsoft.com/italy/msdn/studenti

Varie forme Pocket PC 2000 (3.0) Pocket PC 2002 Handheld PC CE 3.0 Pocket PC 2002 CE 3.0 con nuova shell Handheld PC CE 2.0 Handheld PC Pro CE 2.0 con applicazioni 3.0 CE .NET (4.x) Pocket PC 2003 (deve uscire) Automazione industriale www.microsoft.com/italy/msdn/studenti

Pocket PC Sistema operativo Windows CE 3.0 Ne esistono due versioni Ogni produttore può scegliere i moduli Ne esistono due versioni Pocket PC 2000 (anche detta 3.0) Pocket PC 2002 Interfaccia Pen e Keyboard on-screen Touch Screen Ogni produttore può inserire Hw Lettore Bar Code GPS integrato Applicazioni Custom Guscio custom ...nei ristoranti... www.microsoft.com/italy/msdn/studenti

Hardware ROM: 32 – 48 RAM: 32 – 64 Processore (da 206 a 400 Mhz) StrongARM, Intel PXA 250, Texas OMAP 710 Add-on Compact Flash SD Slot Infrared USB – Serial Bluetooth Jacket di espansione Per PCMCIA (PCCard) www.microsoft.com/italy/msdn/studenti

Pocket PC GPS Marina Americana www.microsoft.com/italy/msdn/studenti

Per le demo con Pocket PC Add-on kit per Pocket PC Scheda VGA per proiezione esterna Cavo di connessione con proiettore Oppure wireless (con proiettore wireless) Noi non l’abbiamo Ricorriamo ad un vecchio sistema CE Remote Display Comodo per sviluppare (Tastiera/Mouse) Demo CERedisp www.microsoft.com/italy/msdn/studenti

Demo Secure Digital (SD Slot) SDIO Fingerprint Memoria aggiuntiva Normalmente 8 – 256 Mb Sta per uscire Panasonic SD Storage 1 Gb SDIO SD con Input / Output File di Video su Pocket PC Fingerprint www.microsoft.com/italy/msdn/studenti

Pocket PC 2002 Applications Connettività [Modem] [Scheda Wireless] [Bluetooth] [Ethernet] VPN (PPTP) Terminal Services ActiveSync “Office” Inbox (e-mail) Contacts, Calendar, Tasks, Notes Excel, Word Reader Internet Explorer HTML 3.2 XML WAP 1.2.1 JScript SSL ActiveX MSN Instant Messenger Windows Media Player Locale e Streaming www.microsoft.com/italy/msdn/studenti

Demo Pocket PC Internet Explorer Calendar Contacts www.microsoft.com/italy/msdn/studenti

Pocket PC Phone Edition Integra il PocketPC con il telefono Nasce dal PocketPC 2002 Pen-based e tastiera on-screen Touch-Pad per la composizione 32 Mb ROM 32 Mb RAM Processore StrongARM Infrared SD slot www.microsoft.com/italy/msdn/studenti

Pocket PC Phone Edition Foto Dimensione schermo Normalmente uguale a Pocket PC Potrebbe variare da produttore a produttore www.microsoft.com/italy/msdn/studenti

Pocket PC Phone Edition Applicazioni del Pocket PC 2002 SIM SIM Manager Contatti SIM (Address Book) SMS Conference Call Auricolare Multitasking: si può lavorare con le applicazioni mentre si telefona www.microsoft.com/italy/msdn/studenti

Smartphone 2002 Hardware Processore 120MHz ARM 8MB+ RAM 16MB Flash ROM 176x220 16-bit display SD Slot No Compact Flash E’ un telefono No touch-screen No Stylus www.microsoft.com/italy/msdn/studenti

SmartPhone Foto www.microsoft.com/italy/msdn/studenti

Smartphone 2002 Applications Telefonia! Tastierino on-screen Profile Shortcut GPRS Tri-band ActiveSync Pocket Outlook Inbox (e-mail, v-mail, sms) Contacts Calendar Tasks Internet Explorer HTML 3.2 XML WAP 1.2.1 JScript SSL MSN Instant Messenger Windows Media Player Locale e Streaming ActiveSync www.microsoft.com/italy/msdn/studenti

SP Internet Explorer HTML 3.2 WAP 1.2.1 Microsoft JScript® 1.1 No Frames HTML 4.0 – innerText, innerHTML, accesskey No Style Sheets WAP 1.2.1 Microsoft JScript® 1.1 cHTML (i-Mode) accesskey, tel: URL XML / XSL Microsoft ActiveX® controls SSL security Imagini: JPEG, GIF, PNG, BMP, 2BP, XBM, WBMP www.microsoft.com/italy/msdn/studenti

SP Supporto WAP Integrazione con HTML Viewer WML, WBXML, WML Script, WTLS security Bearer (Portante) IP, SMS (WAP Push, SI/SL) WTAI (Wireless Telephony Application Interface) SmartPhone consente MakeCall Le caratteristiche non sono adatte allo SmartPhone e non sicure www.microsoft.com/italy/msdn/studenti

SmartPhone Demo Usiamo sempre Remote Display Contact Calendar Operazioni One-Hand SD Slot Usare quella del Pocket PC Autorun all’inserimento www.microsoft.com/italy/msdn/studenti

ROM vs RAM ROM RAM Demo Memoria su Pocket PC Sistema Operativo Aggiornabile per upgrade del S.O. RAM Per far girare le applicazioni Per Storage “permanente” Tranne Hard Reset Tranne esaurimento batteria tampone Sul Pocket PC Off non significa Reset Viene mantenuta la RAM Le applicazioni restano nel loro stato Demo Memoria su Pocket PC Inserire SD slot www.microsoft.com/italy/msdn/studenti

Pocket PC Phone vs. Smartphone Pocket PC Phone Edition Utilizzo Data centric con supporto voice Telefono con funzionalitá dati Mercato di riferimento Mobile Professional Consumer Schermo 240x320 o maggiore 176x220 hi-res color Input A due mani Touch screen e stylus Una mano (one-handed) Keypad e joystick Application Tutta la suite No Pocket Word, Pocket Excel, Reader or Terminal Service Client Priorità Mobile Outlook Web access Comunicazioni Voice e text www.microsoft.com/italy/msdn/studenti

Pocket PC vs. SmartPhone Full-screen dialog, 2 SoftKeys, Menu semplici Meno RAM File System più piccolo Processore più lento L’accoppiata vincente  Lo SP può fare da Modem per il Pocket PC Come per i cellulari tradizionali Connessione Cavo/Infrared/BlueTooth www.microsoft.com/italy/msdn/studenti

Installazione applicazioni Non sono telefoni !!!! Cambia il paradigma Download e Install file .CAB Security su SmartPhone Per prevenire download “maligni” Installazione da Desktop Tramite ActiveSync Si lancia il setup su Desktop Viene scaricato e installato il sw sul Device Demo SmartPhone SD Demo ActiveSync www.microsoft.com/italy/msdn/studenti

Altri Device Nokia Sony Ericsson Samsung Etc Etc WAP + WML Alcuni HTTP + HTML Ancora Tastiere PDA HandHeld PC Passati... Palm OS Tante versioni Schermi Diversi B&W/Color WAP + WML HTTP + HTML www.microsoft.com/italy/msdn/studenti

Connettività Panoramica

Device -> DeskTop Porta Seriale Porta USB Porta Infrarossi Rete In dotazione sui vecchi device Porta USB In dotazione sui nuovi device Porta Infrarossi Sempre Rete Scheda separata oppure integrata ActiveSync Per sincronizzare i dati Outlook, File System, Favorites di IE etc... www.microsoft.com/italy/msdn/studenti

Connettività P2P Perchè Cavo IrDA - Infrarossi Bluetooth PC -> PDA per sincronizzazione dati PDA -> Cellulare come modem (gateway) Cavo Vecchio stile 1 cavo per ogni coppia di Device IrDA - Infrarossi Eliminiamo i cavi Necessità allineamento Bluetooth Elimina i cavi Discovering / Parnership Occhio quando siete fuori.... www.microsoft.com/italy/msdn/studenti

ActiveSync Demo Options Demo FileSystem Demo Option/Rules Per controllare la Sincronizzazione Calendario, Task, Email, Note Per passare dati e convertirli Word, Excel, Powerpoint PDF (da Adobe) File Audio/Video Ogni applicazione può montare il filtro di conversione Funge anche da Gateway per i device Demo FileSystem Demo Option/Rules www.microsoft.com/italy/msdn/studenti

ActiveSync Demo Connection Settings Connection Settings Porta Seriale Porta Infrarosso USB Network E... Bluethooh (COM Port Emulation) Demo Connection Settings www.microsoft.com/italy/msdn/studenti

Connettività Networking Basato su TCP/IP Bluetooth per PAN Scheda Rete Separata Vecchio stile Scheda Rete Wireless Peer-to-Peer Access Point I nuovi device “costosi” ce l’hanno a bordo www.microsoft.com/italy/msdn/studenti

Connectivity Overview Circuit Switched Data (e.g. GSM, CDMA) Packet Data (e.g. GPRS, 1xRTT) WAP SMS TCP/IP Cable Replacement 802.11 Bluetooth Desktop Pass-Through www.microsoft.com/italy/msdn/studenti

Firewall ! I device navigano Come proteggerli ? Dal piu’ famoso produttore di Firewall www.checkpoint.com/products/connect/vpn-1_clients_wince.html Lavora in tandem con VPN-1 per rendere sicure IPSec NAT Tunneling/Encription LDAP Personal Firewalls www.microsoft.com/italy/msdn/studenti

Wireless cable WLAN Home WLAN mercato Auth, Key mgmt, Encry 8 devices Pt-to-MP 0-10m/50m 1 M (2M ...) 0/20* dBm RF: 2.4 GHz FHSS Bluetooth 10 devices 128 devices CSMA topologia 0-3m/5m 30m 50m distanza Optical 850 nm DSSS, FHSS tecnologia Optional WEP 11 M 20 dBm 802.11b 802.11 Application 40 / 128 bit security 4 M/115K 1.6 M (10M) bitrate ? power IrDA (Luft) Home-RF Categoria DECT WDCT Voice/WLAN 100-300m RF:1.9/2.4 GHz 736/576 k 24 dBm 50-60 devices TDMA www.microsoft.com/italy/msdn/studenti

Demo Pocket PC Schede di rete Wireless Network Gestione Connessioni da Connection Manager www.microsoft.com/italy/msdn/studenti

Rob e Marco a Parigi Che bello il mondo wireless Tutto senza cavi !!!! Tranne l’alimentazione !!! Ma qualcuno ci sta già pensando... www.microsoft.com/italy/msdn/studenti

API Connessione Send/Receive Esposte da Connection Manager Winsock – TCP/IP, Bluetooth, IRDA Wininet – HTTP, FTP WAP WDP API – UDP o Binary SMS SMS API – SMS Text Sending www.microsoft.com/italy/msdn/studenti

Stupid Windows Socket Applicazione 1 Applicazione 2 Scacchi ? Dama ? Listen (es porta 7878) Applicazione 2 Open Socket IP:7878 Send “Ciao” Riceve “Ciao” -> Operazione Reply “OK” Riceve OK -> “Messaggio ricevuto” Scacchi ? Dama ? www.microsoft.com/italy/msdn/studenti

WinInet e Winsock Simili alle API di Windows XP Supporto Winsock 2.0 HTTP e FTP Open Url Analizza la response Chimata a Connection Manager automatica www.microsoft.com/italy/msdn/studenti

WAP e WML Conosciamo tutti Http e Html Spendiamo un po’ di tempo su WAP e WML Riferimento WAP Forum www.wapforum.org Definizione di WAP Wireless Application Protocol WML Wireless Markup Language WMLScript www.microsoft.com/italy/msdn/studenti

WAP Protocollo applicativo End-to-End Ambiente application basato su Browser www.microsoft.com/italy/msdn/studenti

WAP Application Un’applicazione WAP consiste Applicazione Server Applicazione Client L’applicazione Client viene scaricata tramite un gateway dal Server L’applicazione Client può girare su dispositivi diversi WAP fornisce lo standard Browser Interprete di script www.microsoft.com/italy/msdn/studenti

Client Browser Script Interpreter WML e WMLScript Simile a un web browser Interpreta WML Script Interpreter Esecuzione di applicazioni Interpreta WMLScript (Simile a ECMAScript) Set di librerie per accedere ai servizi del UA WML e WMLScript Ottimizzati per WAP Binary encoded (compilati) www.microsoft.com/italy/msdn/studenti

“Client / Server” L’applicazione è memorizzata su un web server Il contenuto può essere WML WMLScript HTML Alcuni gateway possono eseguire la conversione HTML->WML L’accesso è via URL Come per il web www.microsoft.com/italy/msdn/studenti

WML simile HTML Demo WML <?xml version=“1.0”?> <!DOCTYPE wml PUBLIC ...........> <wml> <card id=“card1” title=“Prima card”> <p>Primo esempio</p> </card> </wml> Demo Nokia Demo SmartPhone Demo WML www.microsoft.com/italy/msdn/studenti

Flow 1 Pressione di un tasto sul telefonino 2 Lo user agent invia la richiesta via WAP al gateway 3 Richiesta al web server via HTTP 5 Normale HTTP Response 6 Codifica binaria e invio allo user agent www.microsoft.com/italy/msdn/studenti

WAP Architettura Client Livelli embedded nel client www.microsoft.com/italy/msdn/studenti

Altri Markup Language... ...per Interfacce utente HDML cHTML XHTML XML Handheld Device Markup Language cHTML Compact HTML XHTML Utilizza regole XML per HTML Esempio <br /> oppure <hr></hr> XML www.microsoft.com/italy/msdn/studenti

Standard utilizzati oggi Pocket PC 2002 (OBEX, HTTP, HTML, WAP, CHTML, XML, WLAN, Wi-Fi (802.11x), Bluetooth, MPEG4, IRDA, 802.3 (Ethernet), POP3, IMAP4, WAP, VPN, Windows Media, MP3, RDP protocol, SMTP, SMS, LDAP, JScript 1.2, NNTP, SSL2, SSL3, PCT 1.0, SGC) Pocket PC 2002 Phone Edition (OBEX, HTTP, HTML, WAP, CHTML, XML, WLAN, Wi-Fi (802.11x), Bluetooth, MPEG4, GSM, GPRS, IRDA, 802.3 (Ethernet), POP3, IMAP4, WAP, VPN, Windows Media, MP3, RDP protocol, SMTP, SMS, LDAP, JScript 1.2, NNTP, SSL2, SSL3, PCT 1.0, SGC, GSM/GPRS, CDMA/1xRTT) Smartphone 2002 (OBEX, HTTP, HTML, WAP, CHTML, XML, WLAN, Wi-Fi (802.11x), Bluetooth, MPEG4, GSM, GPRS, IRDA, 802.3 (Ethernet), POP3, IMAP4, WAP, VPN, Windows Media, MP3, TAPI, ExTAPI, WLTS, GSM/GPRS, CDMA/1xRTT) www.microsoft.com/italy/msdn/studenti Nota: Lista incompleta

Panoramica Scenari di Sviluppo

Scenari Utilizzo di Terminal Service Utilizzo di Internet Explorer Impatto zero sul Device Solo per Pocket PC Utilizzo di Internet Explorer Applicazione sul Device Installazione sul Device Semplice o complessa che sia Scenari Utilizzo del Web Request Vecchio stile Utilizzo di XML Vecchio Stile Utilizzo di Web Service !!! Download e uso dei dati sul device !!! www.microsoft.com/italy/msdn/studenti

Decisioni Server Side o Smart Client Tecnolgie Server Side Mobile Web Notification Tecnologie Smart Client Managed o Native Client Code Strategia accesso ai dati XML Web service SQL Merge Replication SQL Remote Data Access (RDA) www.microsoft.com/italy/msdn/studenti

Server Side o Smart Client ? Abbiamo il controllo dei Device? Possiamo installare e gestire i client device? Quanto (ore) viene usata questa applicazione? Serve un’interfaccia utente particolare? L’applicazione deve lavorare disconnessa? Quanto cosa la connessione? Server Side ? Smart Client www.microsoft.com/italy/msdn/studenti

Server Side o Smart Client ! Supporto multi-device Logica Server-side Nessuna installazione sul client Interfaccia via Browser Solo on-line Server Side ? Smart Client Versioni diverse Logica e dati Client-side Installazione sui client Flessibilità interfaccia utente Performance Offline & Online Utilizzo API locali POOM Smart Client www.microsoft.com/italy/msdn/studenti

Server-side: Tipo di App ? Complementari es. Push URL per “browse back” Mobile Web Notification Mobile Web Applicazioni interattive Interfaccia utente Modello di sviluppo Web Device con supporto per Browser Notification Push messaggi SMS, IM, ecc. Architettura Publish / Subscribe Device con e senza supporto Browser www.microsoft.com/italy/msdn/studenti

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 ? www.microsoft.com/italy/msdn/studenti

Scelte Server-side Mobile 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 www.microsoft.com/italy/msdn/studenti

Quick Demo Mobile Control Adaptive Rendering Calendario: Una roba complessa !!! Internet Explorer Tablet PC (o PC) IE su Pocket PC IE su SmartPhone Nokia Mobile Internet Toolkit Microsoft Mobile Explorer .. Ci torniamo www.microsoft.com/italy/msdn/studenti

Notification Technology Generazione Delivery Subscriptions Opzioni Invio MMIS, .NET Alerts SMTP etc. SQL Server: SQL Notification Services SMS Eventi SOAP ecc. IM Windows Server SMTP www.microsoft.com/italy/msdn/studenti

Scelte Smart Client Piattaforma Target ? Applicazione o Driver ? Facilità di sviluppo o performance pure ? Conoscenze precedenti ? www.microsoft.com/italy/msdn/studenti

Piattaforma client LapTop / Tablet PC Pocket PC 2000/2002 VB 6, VC++, .NET Driver C++ Pocket PC 2000/2002 eVB 3.0, eVC++ 3.0, .NET Driver eVC++ HPC e Palm PC (vecchi) eVB 3.0, eVC++ 3.0 SmartPhone 2002 eVC++ 3.0 (per adesso) CE.NET eVC++ 4.0, .NET (Pocket PC 2003 occorre SP2) www.microsoft.com/italy/msdn/studenti

Scelte Smart Client Managed .NET CF (VB .NET, C# etc.) eVB eVC e eVB native eVC eVC Tempo www.microsoft.com/italy/msdn/studenti

Other Windows CE Devices Scelte Smart Client Visual Studio .NET + Smart Device Extensions Tool eVC Pocket PC + PPC Phone Edition .NET Compact Framework .NET Framework Notebook PCs Tablet PCs SDKs SDKs Microsoft Smartphone … Other Windows CE Devices Windows CE Windows XP OS OS www.microsoft.com/italy/msdn/studenti

Quick Demo Visual Studio .NET Una semplice applicazione (SDEApp) Sul Pocket PC Modifica testo Ci torniamo... www.microsoft.com/italy/msdn/studenti

? Scelte Smart Client Managed Native Produttività “Safe Programming” Supporto Web Service Librerie comuni Stessi tool e API del desktop Si utilizza per la maggioranza dei casi Managed .NET CF ? Smart Client Native Sviluppo a basso livello Sviluppo Real-time Sviluppo Driver Sviluppo wrapper per codice legacy SmartPhone...per adesso Native (eVC) www.microsoft.com/italy/msdn/studenti

ASP.NET, Mobile Controls 3. Sincronizzazione (http) Scelte accesso ai dati WAP, HTML ecc. ASP.NET, Mobile Controls Presentation Layer Mobile Browser Browser 1. XML Web Service XML Web Service .NET Compact Framework 4. ADO.NET Dati Locali 2. Accesso SQL Server Smart client SQL Server CE SQL Server 3. Sincronizzazione (http) Windows CE Windows Server www.microsoft.com/italy/msdn/studenti

Scelte Accesso ai Dati 1. XML Web services 2. Direct SQL Server Riutilizzo Web service (desktop, mobile web ecc.) Incapsulamento Business Logic 2. Direct SQL Server Più semplice per applicazioni sempre on-line 3. SQL Server CE Synch Utilizzo di dati locali Sincronizzazione auto/granulare dei dati Applicazioni Off-line 4. Local data access Utilizzo di store locale per applicazioni Off-line Utilizzo ADO .NET, SQL Server CE, XML www.microsoft.com/italy/msdn/studenti

Sviluppo Server-Side Basato su Browser Pocket in Rete SmartPhone con ActiveSync Entrambi Remote Basato su Browser

La sfida Web Site www.microsoft.com/italy/msdn/studenti

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 www.microsoft.com/italy/msdn/studenti

WML E’ un documento XML Card = Unità base Deck = Documento Rigoroso Case sensitive (xml è minuscolo) Well formed /Valid www.wapforum.org/DTD/wml_1.1.xml Card = Unità base Singola interazione fra l’utente e il browser Deck = Documento Raggruppa le card Esiste una card di default Scaricato via url www.microsoft.com/italy/msdn/studenti

Simile a HTML Demo WML/01 <?xml version=“1.0”?> <!DOCTYPE wml PUBLIC ...........> <wml> <card id=“card1” title=“Prima card”> <p>Primo esempio</p> </card> </wml> Demo WML/01 www.microsoft.com/italy/msdn/studenti

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> </wml> www.microsoft.com/italy/msdn/studenti

WML: Tag e Element Deck / Card Events Tasks Variables User Input Anchor Image Timer Text wml, card, template, head, access, meta do, ontimer, onenter, onpick, onevent, postfield go, prev, refresh, noop Setvar input, select, option, optgroup, fieldset a, anchor img timer br, p, table, tr, td www.microsoft.com/italy/msdn/studenti

Navigazione LINK Demo WML/02 <wml> <card id=“card1” title=“prima card”> <p> Seleziona <anchor>vai <go href=“#card2”/> </anchor> per navigare </p> </card> <card id=“card2” title=“seconda card”> <p>Informazioni</p> </wml> Demo WML/02 www.microsoft.com/italy/msdn/studenti

Navigazione ACCEPT Demo WML/03 <wml> <card id=“card1” title=“prima card”> <do type=“accept” label=“Vai”> <go href=“#card2”/> </do> <p>Seleziona <b>vai</b> per navigare</p> </card> <card id=“card2” title=“seconda card”> <p>Informazioni</p> <do type="prev" label=“Indietro"> <prev/> </wml> Demo WML/03 www.microsoft.com/italy/msdn/studenti

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 www.microsoft.com/italy/msdn/studenti

User Input <input I campi diventano/sono delle variabili name=“nome” default=“valore default” format=“inputmask” emptyok=“true/false” size=“dimensioneinput” maxlength=“maxchar” tabindex=“numero” /> I campi diventano/sono delle variabili Non Esiste in HTML www.microsoft.com/italy/msdn/studenti

Input esempio Demo WML/04 <wml> <card id=“card1” title=“Inserimento” <do type=“accept”> <go href=“#card2”/> </do> <p>Immetti il tuo nome: <input name=“nome”/></p> </card> <card id=“card2 title=“Visualizzazione”> <p>Ciao $(nome)</p> </wml> Demo WML/04 www.microsoft.com/italy/msdn/studenti

WMLScript Per validare gli input MessageBox Interazione con lo user agent Invio di chiamate Invio di SMS Address Book telefono Address Book SIM Può sfruttare caratteristiche specifiche del device...come per i browser E’ standard compreso nella specifica WAP Diverso da HTML dove è “a cura del browser” www.microsoft.com/italy/msdn/studenti

Interazione con il server <card> <do type=“accept”> <go href=“http://xxx” method=“get/post”> <postfield name=“name" value="$(nome)"/> </go> </do> <p> Inserisci il tuo nome <input name=“nome”/> </p> </card> GET/POST come HTML ma possiamo decidere quali valori inviare www.microsoft.com/italy/msdn/studenti

Server-side scripting Inviare WML dinamico al dispositivo <wml> <%While not rs.eof%> <card id=“<%=rs(“IdCard”)%>” title=“<%=rs(“TitoloCard”)%>”> ... </card> <%rs.movenext End%> </wml> www.microsoft.com/italy/msdn/studenti

Torniamo al problema Trace 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 Trace www.microsoft.com/italy/msdn/studenti

ASP.NET Mobile Controls Estendono ASP.NET per applicazioni mobile .NET Framework Services Framework ASP.NET Common Language Runtime System Services Windows Forms & .NET Compact Framework Base Data Debug … Web Forms Mobile Web Services Integrazione con VS.NET 2002/2003 Multi-Device Multi-Language HTML/WML… www.microsoft.com/italy/msdn/studenti

Supporto Device – 200 c.a. Machine.Config 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 www.microsoft.com/italy/msdn/studenti

Web Form e Mobile 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> www.microsoft.com/italy/msdn/studenti

Caratteristiche Adaptive Rendering Customization Mobile Control Sviluppo Espongono Proprieta’, Metodi, Eventi Adapter Producono l’Output Un adapter per ogni tipo di “ML” da inviare Inviano ML corretto Customization Modello estendibile per customizzare il rendering per un particolare device www.microsoft.com/italy/msdn/studenti

Adaptive Rendering Calendario ASP.NET and IIS Invio testo WML Mobile Capabilities WML Recupero info Browser e Device Recupero Device Adapter Selezione Device Adapter WAP HTTP Request Inizializzazione Controlli Recupero Device Adapter Calendar cHTML HTML Invio super-TABLE HTML Mobile.ASPX www.microsoft.com/italy/msdn/studenti

Text Display Controls Demo 01 Label Control TextBox Control Demo Piccole quantità di info – read only TextBox Control Single-line input (text box) Demo Semplice Trace per diverso rendering Demo 01 www.microsoft.com/italy/msdn/studenti

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 www.microsoft.com/italy/msdn/studenti

Transfer Controls Demo 02 Demo 12 Link control PhoneCall control Testo con hyperlink Verso un form diverso (card in WML) Verso una pagina diversa Proprietà Softkey (per telefonini) PhoneCall control Genera mark-up Su un telefonino con possibilità di chiamata diretta Su un device visualizza il numero Demo 02 <mobile:Link id="lnkfrmResults" runat="server" NavigateUrl="#frmResults">Go to Results</mobile:Link> Demo 12 www.microsoft.com/italy/msdn/studenti

Transfer Controls Command control Demo 03: Notare Variabili in WML Bottone tradizionale Può invocare eventi server-side Proprietà SoftkeyLabel Testo per la SoftKey del telefonino Demo 03: Notare Variabili in WML Demo 04 <mobile:Command id="cmdSelectProduct" runat="server“ softkeylabel=“Next”>Select Product</mobile:Command> www.microsoft.com/italy/msdn/studenti

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> www.microsoft.com/italy/msdn/studenti

TextView Control Demo 06 Testo lungo Consente Bold Italic Salti pagina Paragrafi Anchor nel testo Supporta Paginazione Demo 06 www.microsoft.com/italy/msdn/studenti

List e Selection List List SelectionList ObjectList Databound Opzionale Obbligatorio Pagination Si No Decoration None, Bulleted, Numbered Dropdown, ListBox, Radio Button, CheckBox, MultiSelect Solo con Customization Interactive Controlli simili in ASP.NET Datalist ListBox, CheckBox, CheckBoxList, RadioButton, RadioButtonList, & DropDownList Datagrid www.microsoft.com/italy/msdn/studenti

ObjectList Demo Campeggi DataBinding Template Dettaglio automatico Header Footer Item AlternatingItem Dettaglio automatico Demo IE Pocket PC Nokia SmartPhone Demo Campeggi www.microsoft.com/italy/msdn/studenti

Un po’ di stile Aggiungere un po’ di informazioni di style 3 stili predefiniti title Error Subcommand Associabili con StyleReference Demo 07 Estendibile con propri stili www.microsoft.com/italy/msdn/studenti

WAP/WML batte HTTP/HTML Gestione input numerico Mantenimento valore campi e variabili cross-request Tutto gestito dietro le quinte In HTTP/HTML non sarebbe possibile Entra in gioco il ViewState di ASP.NET Demo 08 da Nokia www.microsoft.com/italy/msdn/studenti

Dati Caricamento dati da codice Esempio con Demo 10 Controllo SelectionList ComboBox, ListBox (anche multiselect) Demo 10 www.microsoft.com/italy/msdn/studenti

Capability aggiornato Device Adapter generano output Device Extensibility IIS .NET Framework 1.1 (ASP.NET) Creazione Web Form Device Capability aggiornato Device Capabilitý HTTP Request Presentation Layer (controls) Mobile.aspx Business Logic Mobile Controls Device Adapter generano output Test Device HTTP Response Invio in Produzione Aggiunta Device Adapters WAP Sviluppo Machine.Config Produzione www.microsoft.com/italy/msdn/studenti

DeviceSpecific Customization Demo 11 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> www.microsoft.com/italy/msdn/studenti

Customization ObjectList Control Header Template Item Template AlternateItem Template Separator Template Footer Template ItemDetails Template Pocket PC Customization Phone: Limitazioni www.microsoft.com/italy/msdn/studenti

Emulatori disponibili Link verso i vari emulatori http://support.microsoft.com/default.aspx?scid=kb;en-us;320977 http://www.asp.net/mobile/DeviceSimulators.aspx?tabindex=6 www.microsoft.com/italy/msdn/studenti