Introduction to Mobile Development Roberto Brunetti Email: [email protected] BLog: www.DevLeap.it/BLog/Rob.rss www.microsoft.com/italy/msdn/studenti 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 • 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 • 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) • 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 • 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) www.microsoft.com/italy/msdn/studenti Demo • Secure Digital (SD Slot) • 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 • 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 • 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 • 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 • 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 Smartphone Utilizzo • Data centric con supporto voice • Telefono con funzionalitá dati Mercato di riferimento • Mobile Professional • 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 • Comunicazioni Voice e text • Mobile Outlook • Web access www.microsoft.com/italy/msdn/studenti Pocket PC vs. SmartPhone • 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 www.microsoft.com/italy/msdn/studenti Altri Device • • • • Nokia Sony Ericsson Samsung Etc Etc • WAP + WML • Alcuni HTTP + HTML • PDA • HandHeld PC • Passati... • Palm OS • • • • • Tante versioni Schermi Diversi B&W/Color WAP + WML HTTP + HTML • Ancora Tastiere www.microsoft.com/italy/msdn/studenti Connettività Panoramica www.microsoft.com/italy/msdn/studenti Device -> DeskTop • Porta Seriale • 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è • 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 • 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 www.microsoft.com/italy/msdn/studenti ActiveSync • • • • • Connection Settings Porta Seriale Porta Infrarosso USB Network • E... Bluethooh (COM Port Emulation) 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) WAP SMS Cable Replacement Bluetooth Packet Data (e.g. GPRS, 1xRTT) TCP/IP 802.11 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 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 • Esposte da Connection Manager • Send/Receive • • • • 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 • Listen (es porta 7878) • Applicazione 2 • Open Socket IP:7878 • Send “Ciao” • Applicazione 1 • Riceve “Ciao” -> Operazione • Reply “OK” • Applicazione 2 • 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 WinInet • • • • 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 • 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 <?xml version=“1.0”?> <!DOCTYPE wml PUBLIC ...........> <wml> <card id=“card1” title=“Prima card”> <p>Primo esempio</p> </card> </wml> Demo Nokia Demo SmartPhone 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 • 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) Nota: Lista incompleta www.microsoft.com/italy/msdn/studenti Panoramica Scenari di Sviluppo www.microsoft.com/italy/msdn/studenti 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 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 ? Server Side ? 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? www.microsoft.com/italy/msdn/studenti Server Side o Smart Client ! • Server side Server Side ? • Supporto multi-device • Logica Server-side • Nessuna installazione sul client • Interfaccia via Browser • Solo on-line • Smart Client Smart Client • • • • • • • Versioni diverse Logica e dati Client-side Installazione sui client Flessibilità interfaccia utente Performance Offline & Online Utilizzo API locali • POOM www.microsoft.com/italy/msdn/studenti Server-side: Tipo di App ? Complementari Mobile Web • Mobile Web es. Push URL per “browse back” Notification • Notification • Applicazioni interattive • Interfaccia utente • Modello di sviluppo Web • Device con supporto per Browser • 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 ASP.NET, Mobile Controls Mobile Web Browse ? Native / XSLT • • • • • • • • Native / XSLT • • • • • • Altra produttività Gestione semplice Supporto XML Web Services integrati Performance Device Extension Event-based Sviluppo più complesso Nuovo codice per nuovi device Supporto XML (obbligatorio) No Web Services Utilizzo di standard Riutilizzo ASP 3.0 e altri ambienti 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 Eventi SQL Server: SQL Notification Services Windows Server SOAP ecc. Opzioni Invio MMIS, .NET Alerts SMTP etc. www.microsoft.com/italy/msdn/studenti SMS IM SMTP 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 • 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 Managed .NET CF (VB .NET, C# etc.) eVB eVC eVC e eVB Scelte Smart Client native eVC Tempo www.microsoft.com/italy/msdn/studenti Scelte Smart Client + Smart Device Extensions eVC Microsoft Smartphone Notebook PCs .NET Compact Framework .NET Framework Tablet PCs OS Other Windows CE Devices SDKs Pocket PC + PPC Phone Edition … Windows CE Windows XP www.microsoft.com/italy/msdn/studenti OS SDKs Tool Visual Studio .NET 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 Managed .NET CF Smart Client ? Native (eVC) • • • • • • Produttività “Safe Programming” Supporto Web Service Librerie comuni Stessi tool e API del desktop Si utilizza per la maggioranza dei casi • Native • • • • Sviluppo a basso livello Sviluppo Real-time Sviluppo Driver Sviluppo wrapper per codice legacy • SmartPhone...per adesso www.microsoft.com/italy/msdn/studenti Browser Scelte accesso ai dati Mobile Browser Smart client .NET Compact Framework 4. ADO.NET Dati Locali WAP, HTML ecc. ASP.NET, Mobile Controls Presentation Layer 1. XML Web Service XML Web Service 2. Accesso SQL Server SQL Server CE SQL Server 3. Sincronizzazione Windows CE (http) Windows Server www.microsoft.com/italy/msdn/studenti Scelte Accesso ai Dati • 1. XML Web services • 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 www.microsoft.com/italy/msdn/studenti 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 • • • • 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 <?xml version=“1.0”?> <!DOCTYPE wml PUBLIC ...........> <wml> <card id=“card1” title=“Prima card”> <p>Primo esempio</p> </card> </wml> 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> </card> </wml> www.microsoft.com/italy/msdn/studenti 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 www.microsoft.com/italy/msdn/studenti Navigazione LINK <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> </card> </wml> www.microsoft.com/italy/msdn/studenti Navigazione ACCEPT <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/> </do> </card> </wml> 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 • • • • • • • • name=“nome” default=“valore default” format=“inputmask” emptyok=“true/false” size=“dimensioneinput” maxlength=“maxchar” tabindex=“numero” /> Non Esiste in HTML • I campi diventano/sono delle variabili www.microsoft.com/italy/msdn/studenti Input esempio <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> </card> </wml> 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 • 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 www.microsoft.com/italy/msdn/studenti ASP.NET Mobile Controls • Estendono ASP.NET per applicazioni mobile • Integrazione con VS.NET 2002/2003 .NET Framework ASP.NET Web Forms Mobile Web Forms Web Services • Multi-Device • Multi-Language HTML/WML… Windows Forms & .NET Compact Framework Services Framework Base Data Debug … Common Language Runtime System Services www.microsoft.com/italy/msdn/studenti Supporto Device – 200 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 CDM9100, 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), www.microsoft.com/italy/msdn/studenti 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> www.microsoft.com/italy/msdn/studenti 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 • Customization • Modello estendibile per customizzare il rendering per un particolare device www.microsoft.com/italy/msdn/studenti Adaptive Rendering Calendario Invio testo WML ASP.NET and IIS Mobile Capabilities WML Recupero Device Adapter Selezione Device Adapter Recupero info Browser e Device Inizializzazione Controlli Calendar cHTML WAP HTTP Request Recupero Device Adapter HTML Invio super-TABLE HTML Mobile.ASPX www.microsoft.com/italy/msdn/studenti Text Display Controls • Label Control • Piccole quantità di info – read only • TextBox Control • Single-line input (text box) • Demo • Semplice • Trace per diverso rendering 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 • Link control • Testo con hyperlink • Verso un form diverso (card in WML) • Verso una pagina diversa • Proprietà Softkey (per telefonini) <mobile:Link id="lnkfrmResults" runat="server" NavigateUrl="#frmResults">Go to Results</mobile:Link> • PhoneCall control • Genera mark-up • Su un telefonino con possibilità di chiamata diretta • Su un device visualizza il numero www.microsoft.com/italy/msdn/studenti Transfer Controls • Command control • Bottone tradizionale • Può invocare eventi server-side <mobile:Command id="cmdSelectProduct" runat="server“ softkeylabel=“Next”>Select Product</mobile:Command> • Proprietà SoftkeyLabel • Testo per la SoftKey del telefonino • Demo 03: Notare Variabili in WML • Demo 04 www.microsoft.com/italy/msdn/studenti List Control • 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 • Testo lungo • Consente • • • • • • Bold Italic Salti pagina Paragrafi Anchor nel testo Supporta Paginazione www.microsoft.com/italy/msdn/studenti 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 Customizatio n Interactive Opzionale Si Opzionale Controlli simili Datalist in ASP.NET ListBox, Datagrid CheckBox, CheckBoxList, RadioButton, RadioButtonLis www.microsoft.com/italy/msdn/studenti t, & ObjectList • DataBinding • Template • • • • Header Footer Item AlternatingItem • Dettaglio automatico • Demo • • • • IE Pocket PC Nokia SmartPhone 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 crossrequest • Tutto gestito dietro le quinte • In HTTP/HTML non sarebbe possibile • Entra in gioco il ViewState di ASP.NET www.microsoft.com/italy/msdn/studenti Dati • Caricamento dati da codice • Esempio con • Controllo SelectionList • ComboBox, ListBox (anche multiselect) • Demo 10 www.microsoft.com/italy/msdn/studenti 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 W A P Produzione www.microsoft.com/italy/msdn/studenti 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> www.microsoft.com/italy/msdn/studenti Customization ObjectList Control Header Template Item Template AlternateItem Template Separator Template Footer Template Pocket PC Customization ItemDetails Template www.microsoft.com/italy/msdn/studenti Phone: Limitazioni Emulatori disponibili • Link verso i vari emulatori • http://support.microsoft.com/default.aspx?s cid=kb;en-us;320977 • http://www.asp.net/mobile/DeviceSimulato rs.aspx?tabindex=6 www.microsoft.com/italy/msdn/studenti