HTML5 aplikace pro Windows Phone 7
V článku si vysvětlíme základní principy, jak fungují HTML5 aplikace na mobilních zařízeních (nejen) se systémem Windows Phone 7. Podíváme se podrobněji na to, jak mohou získávat informace z telefonu, a ukážeme si jednoduchou „hybridní“ aplikaci, která dokáže komunikovat s operačním systémem telefonu.
Nálepky:
Webové aplikace a mobilní telefony obecně
Mobilních platforem je na našem trhu celá řada – Windows Phone, iOS, Android, Symbian, Blackberry a MeeGo. Jedno však mají společné, a to moderní webový prohlížeč podporující HTML5. Pokud vaši aplikaci v HTML5 spustíte přímo z webu, tak narazíte na několik problémů:
- Aplikace nemůže přistupovat ke zdrojům telefonu.
- Aplikace nemůžete přistupovat k datům v telefonu.
- XHR požadavky mohou odcházet pouze na doménu aplikace.
- Aplikaci nedostanete na Marketplace.
Řešení těchto problémů, které například používá oblíbená platforma PhoneGap, je vcelku jednoduché a univerzální. Webovou HTML5 aplikaci je třeba „obalit“ nativní aplikací pro danou platformu. Jednoduše řečeno: pro každou platformu vytvoříte nativní aplikaci, která bude obsahovat jen komponentu webového prohlížeče, ve které poběží vaše HTML5 aplikace. Tím odstraníte v podstatě všechny výše popsané problémy. U každé platformy bude postup samozřejmě trochu jiný, ale jako obecný princip to funguje.
Windows Phone
Ukažme si vytvoření „nativně-webové“ aplikace na platformě WP7.
Abychom odstranili všechny výše popsané problémy HTML5 aplikací na Windows Phone, je nutnou podmínkou běh aplikace z paměti telefonu. Při prvním spuštění je potřeba aplikaci uložit do IsolatedStorage. Webová aplikace může být součástí instalačního balíčku jako Resource nebo si ji může nativní aplikace při prvním spuštění stáhnout z internetu. V obou případech je nutné webovou aplikaci při prvním spuštění uložit do IsolatedStorage.
U ovládacího prvku WebBrowser, který vložíte do aplikace, pak musíte povolit skriptování nastavením vlastnosti IsScriptEnabled na true a zaregistrovat si událost ScriptNotify. Tato událost je vyvolána v případě, že vaše webová aplikace, běžící v této komponentě, zavolá z Javascriptového kódu metodu
window.external.notify(…);
Pokud potřebujete z nativní aplikace vyvolat JS funkci v právě otevřené stránce webové aplikace, tak použijete metodu InvokeScript ovládacího prvku WebBrowser.
Jednoduchý příklad
Vytvoříme si HTML5 aplikaci, která zobrazí jméno kontaktu z telefonu.
HTML5 aplikace
Protože je příklad jednoduchý, vystačíme si s pár řádky kódu.
<!DOCTYPE html>
<html>
<head>
<title>Mobile</title>
<meta name="viewport" content="width=device-width"/>
<script type="text/javascript">
function SearchContact()
{
window.external.notify("SearchContact");
}
function ContactFound(email)
{
var contactEmailDiv=document.getElementById("contactEmail");
contactEmailDiv.textContent=email;
}
</script>
</head>
<body>
<h1>Contact</h1>
<div id="contactEmail">
</div>
<div><input type="button" onclick="SearchContact()" value="Search
Contact"/></div>
</body>
</html>
Velmi důležité je použití meta tagu viewport, na základě kterého webový prohlížeč upravuje zobrazení stránky v mobilním zařízení. Funkce SearchContact má za úkol vyvolat událost v nativní aplikaci a předat hodnotu „SearchContact“.
Funkce CountactFound je pak vyvolána z nativní aplikace.
Nativní aplikace
Nejprve je potřeba HTML5 aplikaci uložit do paměti telefonu, tedy do IsolatedStorage. Postup, resp. načtení jednotlivých stránek, se bude lišit podle toho, zda je HTML5 aplikace k nativní aplikaci připojena jako Resource, nebo se nachází na webovém serveru. Postup pro uložení stránek HTML5 aplikace z Resources do IsolatedStorage najdete v článku How to: Display Static Web Content Using the WebBrowser Control for Windows Phone. Pokud budete stránky stahovat z internetu, bude kód načtení jiný:
private void FillCache()
{
HttpWebRequest request = (HttpWebRequest)WebRequest.Create("http://...");
request.BeginGetResponse(OnDataPage, request);
}
private void OnDataPage(IAsyncResult e)
{
HttpWebRequest request = (HttpWebRequest)e.AsyncState;
try
{
HttpWebResponse response = (HttpWebResponse)request.EndGetResponse(e);
using (BinaryReader br = new BinaryReader(response.GetResponseStream()))
{
byte[] data = br.ReadBytes((int)response.GetResponseStream().Length);
SaveToIsoStore(request.RequestUri.AbsolutePath, data);
}
}
catch (Exception ex)
{
//
}
finally
{
Dispatcher.BeginInvoke(() => FillCache());
}
}
Nezapomínejte, že veškerá komunikace Windows Phone telefonu s internetem je asynchronní.
Vlastní vložení ovládacího prvku WebBrowser do aplikace je velmi jednoduché. Do výchozí šablony Windows Phone aplikace, kterou vytvoří Visual Studio 2010, stačí ovládací prvek přetáhnout na příslušné místo přímo z panelu Toolbox.
U ovládacího prvku pak povolíme skriptování a zaregistrujeme si událost ScriptNotify.
<phone:WebBrowser Name="_webBrowser"IsScriptEnabled="True"ScriptNotify="_webBrowser_ScriptNotify" />
Hledání kontaktu
Kontakt začneme hledat po vyvolání události z HTML5 aplikace:
private void _webBrowser_ScriptNotify(object sender, NotifyEventArgs e)
{
if (e.Value != "SearchContact")
{
return;
}
Navigate Contacts c = new Contacts();
c.SearchCompleted += new EventHandler<ContactsSearchEventArgs>(c_SearchCompleted);
c.SearchAsync(String.Empty, FilterKind.None, "Contacts Test #1");
}
Hledání kontaktu je opět asynchronní. Poté, co je kontakt nalezen, uvědomíme o tom HTML5 aplikaci:
void c_SearchCompleted(object sender, ContactsSearchEventArgs e)
{
Contact c = e.Results.FirstOrDefault<Contact>();
if (c == null)
{
return;
}
_webBrowser.InvokeScript("ContactFound", c.DisplayName);
}
Zobrazení HTML5 aplikace v ovládacím prvku WebBrowser
Vlastní zobrazení webové stránky v ovládacím prvku WebBrowser má na starost metoda Navigate. Pokud není v URI uveden protokol HTTP, bude se stránka hledat v IsolatedStorage.
Závěr
Pomocí HTML5 můžete začít snadno vytvářet i „nativní“ aplikace pro mobilní zařízení. Neříkám, že je to vhodné pro všechny typy aplikací, ale tento způsob jistě své uplatnění najde. Více informací, zejména jak nastavit prostředí pro vývoj a informaci o soutěži pro vývojáře Windows Phone aplikací, najdete na stránkách Vyvíjej!
Pěkný článek, bude jeho varianta i pro jiné mobilní OS?
PS: SyntaxHighlighter poněkud ztížil čtení první ukázky kódu.
Syntax highlighter byl umravněn, omlouvám se autorovi i čtenářům.
Odkazy v článku do microsoftí doukumentace vedou na 404.
Dobrý den, snad redakce (autor opraví), nicméně zatím lze odkazy upravit „ručně“. Stačí místo escape znaků přepsat zpět závorky „()“. Tedy například u prvního odkazu ve tvaru „http://msdn.microsoft.com/en-us/library/ff402601(v=VS.92).aspx“.
Ještě jednou se omlouvám, a tentokrát se jdu už hanbou propadnout. Odkazy takhle kreativně zpracoval parser URL-to-HTML, který holt započítal i uzavírací závorku v textu do odkazu (problém totiž není v těch escape znacích, ale v zapomenuté závorce za ASPX).