Programmeren in ASP.NET/Mobiele toepassingen

Inleiding

De meeste website-ontwerpers zijn gewoon hun sites te ontwerpen voor de gewone browsers (IE en Netscape, eventueel ook Opera), en voor een normale resolutie.

Maar tegenwoordig zijn er ook mobiele apparaten waarmee je kan surfen: PDA's (Personal Digital Assistant), mobiele telefoons (GSM's) en pagers.

Enkele zaken die daarbij een rol spelen zijn:

de resolutie, die kan gaan van 2 regels, tot bijna de normale waarden
cookies
de markup-taal: Pocket PC ondersteunt HTML, telefoons in Amerika en Europa ondersteunen WML (Wireless Markup Language), telefoons in Japan ondersteunen CHTML

Om hiermee te werken, gebruik je de ASP.NET Mobile Controls van Microsoft. Deze worden geleverd vanaf versie 1.1 van het dotNET framework. Ze worden ondersteund in Web Matrix (vanaf versie 0.6) en Visual Studio (vanaf versie 2003).

Je moet wel voor elke website een tweede versie maken met een "mobiele" presentatie, door "mobile controls" te gebruiken in de plaats van web-controls.

Bij elk verzoek van een mobiele gebruiker zullen de ASP.NET Mobile Controls evalueren wat de mogelijkheden van de client zijn. ASP.NET zal dan de corresponderende adapter gebruiken om de juiste markup-taal te produceren.

Zo zal bijvoorbeeld een lijst voor de Pocket PC waarschijnlijk uitgevoerd worden met radioknoppen, maar voor WML, dat geen radioknoppen heeft, zal een WML-picklist of een dropdownlijst aangemaakt worden.

Een ander voorbeeld zijn afbeeldingen: sommige devices kunnen kleuren tonen, andere alleen zwart-wit. Sommige ondersteunen alleen WBMP of BMP, en geen GIF of JPG. De ASP.NET Mobile Controls zullen dit allemaal automatisch aanpassen.

Dit betekent dat de ontwerper meer moet kijken naar de functionaliteit en minder naar de presentatie: hoe het er uiteindelijk uitziet. Dit kan immers voor verschillende clients verschillend zijn, zodat de ontwerper er toch weinig controle over heeft.

Het voordeel is dat naargelang er nieuwe devices verschijnen, het volstaat om op de server bijkomende adapters te installeren. Als ontwerper moet je verder niets meer doen, de server ondersteunt dan automatisch de nieuwe devices.

Hoe begin je eraan?

Een mobiele webapplicatie maken met ASP.NET is niet moeilijk:

Maak een Mobile Web Form in Visual Studio
Voeg Mobile Controls toe aan de pagina

Deze ASP.NET pagina toont "WIKIBOOKS" als een WML-card op een mobiele telefoon met WML:

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" %>
<%@ Register TagPrefix="Mobile" Namespace="System.Web.UI.MobileControls"
          Assembly="System.Web.Mobile" %>
<Mobile:Form runat="server">
   <Mobile:Label runat="server">WIKIBOOKS</Mobile:Label>
</Mobile:Form>

Het Page-directief vraagt ASP om mobile page handling te gebruiken in plaats van gewone page handling.

Het Register-directief stelt de prefix in die gebruikt wordt voor mobile controls in de pagina. In het voorbeeld wordt "Mobile" gebruikt, maar je bent vrij om een andere te kiezen. Het <Mobile:Form>-element vraagt aan de server een mobile form-control aan te maken. Het <Mobile:Label>-element vraagt aan de server een mobile label-control met de tekst "WIKIBOOKS" aan te maken.

Mobile ASP.NET Output

Wanneer de pagina uitgevoerd wordt, zal ze deze output produceren voor een mobiele telefoon met WAP:

<?xml version='1.0'?>
<!DOCTYPE wml PUBLIC 
'-//WAPFORUM//DTD WML 1.1//EN'
'http://www.wapforum.org/DTD/wml_1.1.xml'>
<wml>
<card>
<p>WIKIBOOKS</p>
</card>
</wml>

Deze output krijg je voor Pocket PC:

<html>
<body>
<form id="ctrl1" name="ctrl1" method="post"
action="example.aspx">
<div>WIKIBOOKS</div>
</form>
</body>
</html>

Door browserdetectie zal .NET Mobile correcte inhoud leveren voor alle soorten clients, waardoor het voor developers gemakkelijk is applicaties te maken die op verschillende soorten mobiele apparaten werken.

Meerdere formulieren op één pagina

Gewone ASP.NET-webpagina's kunnen maar één formulier per pagina bevatten. Omdat mobiele apparaten kleinere schermen hebben, is het toegelaten om meerdere formulieren op één pagina te zetten. Er wordt er maar één op het scherm getoond, maar de navigatie van het ene formulier naar het andere gebeurt binnen één en dezelfde pagina.

Dit heeft meerdere voordelen:

Een ingewikkelde website kan beter beheerd worden, doordat je vermijdt veel kleine pagina's te hebben
Je kan je mobiele applicatie op dezelfde manier organiseren als je gewone applicatie, omdat één enkele gewone pagina overeenkomt met één enkele mobiele pagina met meerdere formulieren
Je kan profiteren van de voordelen van mobiele webformulieren zoals automatisch behoud van de paginastaat (view state) en automatische aanpassing aan apparaten die wel meerdere schermen tegelijk kunnen tonen.

Als een client een pagina voor de eerste keer opvraagt, wordt het eerste formulier getoond. Je kan vanuit code navigeren naar een ander formulier door de ActiveForm-property van de mobiele pagina in te stellen, of je kan de gebruiker laten navigeren met een link-control.

De code hieronder toont een pagina met 2 formulieren, en navigatie met links.

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" Language="VB" %>
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>

<mobile:Form runat="server" id="Form1">
    <mobile:Label runat="server" StyleReference="title">
         Dit is het eerste formulier 
    </mobile:Label>
    <mobile:Link runat="server" NavigateURL="#Form2">
         Tweede formulier
    </mobile:Link>
</mobile:Form>

<mobile:Form runat="server" id="Form2">
    <mobile:Label runat="server" StyleReference="title">
         Dit is het tweede formulier 
    </mobile:Label>
    <mobile:Link runat="server" NavigateURL="#Form1">
         Eerste formulier
    </mobile:Link>
</mobile:Form>

Meer informatie

← Server-side afbeeldingen

Programmeren in ASP.NET

Meer informatie →