Intro to mobile development using net
This presentation is the property of its rightful owner.
Sponsored Links
1 / 44

Intro to Mobile Development using .NET PowerPoint PPT Presentation


  • 35 Views
  • Uploaded on
  • Presentation posted in: General

Intro to Mobile Development using .NET. Roberto Brunetti [email protected] - [email protected] 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.

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Intro to mobile development using net

Intro to Mobile Developmentusing .NET

Roberto Brunetti

[email protected] - [email protected]


Devleap pure net training

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


Devleap training

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


Thinkmobile it

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


Scenari

Scenari

  • Utilizzo di Terminal Service

    • Impatto zero sul Device

    • Solo per Pocket PC

  • Utilizzo di Internet Explorer

    • Impatto zero sul Device

  • Applicazione sul Device

    • Installazione sul Device

      • Semplice o complessa che sia

    • Scenari

      • Utilizzo Socket o Web Request - Vecchio stile

      • Utilizzo di XML - Vecchio Stile

      • Utilizzo di Web Service !!!

      • Download e uso dei dati sul device !!!


La sfida

La sfida

Web Site


Problematiche

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


Mobile web

Mobile Web

  • HTML, WML, HDML, cHTML o XHTML ?

  • Se HTML, quale versione ?

    • 3.2 supportata da molti device ?

    • 4.0 supportata da alcuni

  • Uso Javascript lato client ?

    • Sarebbe bello ma non funziona su tutti i device

  • Due opzioni

    • Usiamo il minimo comune denominatore

    • Adattiamo il rendering per vari device

      • ...e quando ne esce uno nuovo ?


Altra problematica

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


Scelte server side mobile controls xslt o hand coded

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


Asp net mobile controls 1 1

.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


Supporto device 250 c a

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


Caratteristiche

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


Adaptive rendering calendario

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


Web form e mobile web form

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>


Text display controls

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


Navigazione

Navigazione

  • Una pagina ASP.NET tradizionale contiene un solo form

  • I device possono avere schermi ridottissimi

  • Si possono costruire più form nella stessa pagina

    • Evitando di avere tante pagine “minuscole” sul sito

    • Utilizzando gli stesse entità (nomi di pagine) dell’applicazione Desktop

    • Riutilizzando la stessa logica dell’applicazione Desktop


Transfer controls

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>


Transfer controls1

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>


Phone call

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


List control

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>


Textview control

TextView Control

  • Testo lungo

  • Consente

    • Bold

    • Italic

    • Salti pagina

    • Paragrafi

    • Anchor nel testo

    • Supporta Paginazione

Demo 06


List e selection list

List e Selection List


Objectlist

ObjectList

  • DataBinding

  • Template

    • Header

    • Footer

    • Item

    • AlternatingItem

  • Dettaglio automatico

  • Demo

    • IE

    • Pocket PC

    • SmartPhone

Demo 16


Un po di stile

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


Immagini

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


Casi particolari

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


Device extensibility

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


Device update

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


Custom config

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


Mobilecapabilities object

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


Property override

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


Devicespecific customization

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>


Template override

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


Injecting markup

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


Form e script

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


Asp net 2 0

ASP.NET 2.0

For Device


Property override ovunque

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:


Mobile control 1 x in asp net 2 0

Mobile Control 1.x in ASP.NET 2.0

  • Possono sfruttare

    • Auto-detection dei browser cookieless

    • Membership, Profiles, Role management

    • ADO.NET 2.0 MARS & Async

  • ASP.NET 1.x Mobile Controls non supportano

    • Master pages, Web parts, Themes

  • Nessuna modifica al codice 

    • Cambiare CodeBehind con CodeFile

    • Mettere partial alla classe del CodeFile

    • Togliere definizione controlli e WebForm Designer Generated Code

    • Occhio AutoeventWiredUp


Quindi

Quindi !?!?

  • ASP.NET 2.0 Server Controls per XHTML 1.1 o HTML3.2 (enableLegacyRendering)

    • Ottimo anche per device con browser “bravi”

      • Pocket Internet Explorer su Pocket PC and Smartphone

    • Non adatti a

      • XHTML-MP browsers (Es. Sony-Ericsson)

      • WAP 1.1, WAP 2.0 o cHTML

    • Usare V1.x Mobile Controls

  • ASP.NET 2.0 Controls hanno molti vantaggi se si possono usare

    • Master pages, Login Controls, Themes

    • ASP.NET 2.0 DataSource Controls

      • Sapete il mio parere 


Supporto per device

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


Config changes

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


Propery override 2 0

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


Altre informazioni

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


  • Login