ASP.NET – stránky pro malá zařízení a mobilní telefony

9. července 2002

•

Vytváření stránek pro malá zařízení a mobilní telefony je komplikováno různými standardy WML, WMLScript, HDML nebo cHTML. Lze vůbec vytvořit webovou aplikaci, aniž by se vývojář musel zajímat, pro jaký typ telefonu nebo PDA aplikaci vytváří? Existuje jedno elegantní řešení, kombinace Microsoft Mobile Internet Toolkit a Mobile Forms pro ASP.NET.

Požadavky na nadstandardní software serveru

Microsoft Mobile Internet Toolkit 1.0 [download]
Rozšiřuje .NET framework a Visual .NET Studio o schopnosti vytvářet webové aplikace pro malá zařízení. Obsahuje technologii, která rozliší typ zařízení, a podle toho generuje kód pro toto zařízení srozumitelný. Zahrnuje Mobile Controls, které řídí generovaní kódu, podporu pro používání těchto ovládacích prvků ve Visual .NET Studiu, záznamy o schopnostech telefonů (dají se updatovat), tutoriál a dokumentaci. Vzhledem k jeho schopnostem, je jeho velikost 4MB zanedbatelná.
Microsoft Mobile Internet Toolkit Device Updates [download]
Obsahují informace o nově vyrobených zařízeních a jejich schopnostech. Tato část celého Toolkitu je asi nejdůležitější, protože se podle ní řídí celé renderování kódu. Velikost 200 KB.
Microsoft Mobile Internet Toolkit Tested Devices [download]
A pro úplnost odkaz na stránku se seznamem podporovaných zařízení. Vedle zařízení jsou vypsány informace o tom, zda je podporováno přímo Toolkitem, nebo zda je pro jeho podporu důležitý update.

Vzorová aplikace – kalkulačka

Pravděpodobně neexistuje mobilní telefon, který by uměl WAP a neměl v menu kalkulačku, nicméně jde spíše o demonstraci postupu vytvoření mobilní aplikace. Celý postup bude popisován s použitím ASP.NET Web Matrix, o kterém jste se mohli dočíst v článku Web Matrix – vývojové prostředí pro ASP.NET.

Založil jsem si tedy novou Mobile Page, z menu File | New. Rozmístění ovládacích prvků se provádí stejně jako ve Visual .NET Studiu, kód pro formulář se generuje na pozadí:

<mobile:Form id=“Kalkulacka“ runat=“server“>
     <Mobile:Label id=“Label“ runat=“server“ Font-Italic=“True“ Font-Bold=“True“ Alignment=“Center“>Kalkulačka pomocí ASP.NET</Mobile:Label>
     <Mobile:Panel id=“pnlZadani“ runat=“server“>
         <Mobile:Label id=“Label1″ runat=“server“>Číslo 1</Mobile:Label>
         <Mobile:TextBox id=“txtCislo1″ runat=“server“ Numeric=“True“></Mobile:TextBox>
         <Mobile:RequiredFieldValidator id=“RequiredFieldValidator1″ runat=“server“ ErrorMessage=“Je nutné zadat číslo 1″ ControlToValidate=“txtCislo1″></Mobile:RequiredFieldValidator>
         <Mobile:Label id=“Label2″ runat=“server“>Číslo 2</Mobile:Label>
         <Mobile:TextBox id=“txtCislo2″ runat=“server“ Numeric=“True“></Mobile:TextBox>
         <Mobile:RequiredFieldValidator id=“RequiredFieldValidator2″ runat=“server“ ErrorMessage=“Je nutné zadat číslo 2″ ControlToValidate=“txtCislo2″></Mobile:RequiredFieldValidator>
         <Mobile:SelectionList id=“OperationList“ runat=“server“>
             <Item value=“0″ text=“Sečíst“ selected=“True“></Item>
             <Item value=“1″ text=“Odečíst“></Item>
             <Item value=“2″ text=“Násobit“></Item>
             <Item value=“3″ text=“Dělit“></Item>
         </Mobile:SelectionList>
         <Mobile:Command id=“cmdSend“ onclick=“cmdSend_Click“ runat=“server“>Proveď operaci</Mobile:Command>
     </Mobile:Panel>
     <Mobile:Panel id=“pnlVysledek“ runat=“server“ Visible=“False“>
         <Mobile:Label id=“lblVysledek“ runat=“server“>Label</Mobile:Label>
     </Mobile:Panel>
</mobile:Form>

Výslednou podobu navrhovaného formuláře si můžete prohlédnout na následujícím obrázku

Na rozdíl od klasických ASP.NET stránek (Web Forms), kde jsou ovládací prvky tvořeny tagem <asp:…, jsou ovládací prvky Mobile Web Forms tvořeny tagem <Mobile:… To proto, že tyto ovládací prvky umí generovat i kód pro jiná zařízení, než jsou „klasické“ prohlížeče. Zdrojový kód a jeho tvorba se nijak neliší od vytváření ASP.NET stránek. Jsou přípustné všechny jazyky platformy .NET frameworku. Kód obsluhující tuto kalkulačku je jednoduchý:

Zadávání čísel je omezeno na celá čísla, při dělení je však výsledek zobrazen jako desetinné číslo. Důležité jsou však 2 direktivy na začátku souboru. První udává, že stránka je odvozena od MobilePage ve jmenném prostoru System.Web.UI.MobileControls a je napsána v jazyce C#, druhá registruje tag Mobile uvozující všechny Mobile ovládací prvky:

<%@ Page Inherits=“System.Web.UI.MobileControls.MobilePage“ Language=“cs“ %>
<%@ Register TagPrefix=“Mobile“ Namespace=“System.Web.UI.MobileControls“ Assembly=“System.Web.Mobile“ %>

Nakonec bych chtěl dodat, že mě až překvapilo, s jakými variacemi této jednoduché aplikace jsem se setkal při jejím testování v různých emulátorech, PDA a mobilních telefonech. Dokonce bych se odvážil říci, že co přístroj to jiný vzhled, přizpůsobený možnostem daného přístroje. V některých případech však docházelo k problémům se zobrazováním češtiny. Například u mé Nokie 6250 se vše zobrazovalo správně, ale u některých emulátorů se české znaky neujaly. Aplikaci jsem tedy „očesal“ o diakritiku a ze simulované verze jsem pořídil několik následujících ukázek.

Příklad 1.: Číslo 1 = 23, číslo 2 nezadáno. Po odeslání je zobrazen validátor a stránka se načítá znovu.