I když jsem teď ve Fallout only stavu, nedalo mi to a musel jsem prozkoumat něco nového. Je tomu asi osm dní, co se objevila první verze jQuery Mobile. Je to alpha, na mém mobilu to moc nefunguje a na mobilu mé přítelkyně také ne. Je to malé, je to rychlé, vypadá to super a hlavně se to dá použít jako takové HTML5 tech demo, aneb jak by mohl vypadat web za pár let.

Když se řekne o jQuery Mobile, že je framework pro vytváření webových mobilních aplikací, resp. jejich rozhraní, věřte, že to je pravda. jQuery Mobile totiž přináší hned několik stavebních kamenů, se kterými nemusíte uživatelské rozhraní prakticky řešit.

Problém webového uživatelského rozhraní pro mobilní telefony je ten, že prakticky co model telefonu, to jiný prohlížeč. Není šance udělat něco pořádného, co by fungovalo všude a proto tu máme jQuery Mobile, které všechny telefony překrývá vhodnou vrstvou z HTML5, JavaScriptu a CSS. JavaScript se postará o HTML5 šablonu a navleče na ní správné CSS styly. Ano, takhle je jQuery Mobile řešeno. Přidáte do šablony čtyři správné atributy a stránka je v tu ránu nastylovaná. Přidáte dva další a vybere i správný styl. Přidáte trochu vlastního AJAXu, využijete možnost mít více stránek v jednom HTML a aplikace je na světě. Jestli jste šikovní a chce se vám pracovat pouze s JavaScriptem, měli byste dosáhnou toho, že se aplikace bude chovat velmi real-time a na server bude sahat jen když bude potřeba něco uložit.

Dokumentace je napsaná v jQuery Mobile, takže si hned můžete svým mobilním telefonem zabrousit na tuto adresu a vyzkoušet si to. Připomínám, že jde o alphu, takže nic slavného nečekejte (v Chromiu ale funguje parádně).

První stránka

Jak jsem napsal, udělat stránku pomocí jQuery Mobile je velmi jednoduché a doufám, že až bude trošku stabilnější, donutí to některé servery vytvořit mobilní verzi. Pokud mají web napsaný dobře, prakticky tomu nic nebude bránit.

A teď se vrhneme rovnou na strukturu HTML dokumentu, kterou si zatím dovolím zkopírovat z dokumentace.

  1. < !DOCTYPE html>
  2. <html>
  3.         <head>
  4.         <title>Page Title</title>
  5.         <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  6.         <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  7.         <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
  8. </head>
  9. <body>
  10.  
  11. …
  12.  
  13. </body>
  14. </html>

Tohle by vám mělo být podezřelé, klasický HTML5 dokument a nějaké nalinkované skripty a styly. Teď do tagu body přidáme nějaký zajímavý obsah.

  1. <div data-role="page" data-theme="a" id="home">
  2.                
  3.         <header data-role="header">
  4.                 <h1>Můj první mobilní web</h1>
  5.         </header>
  6.                
  7.         <div data-role="content">
  8.                
  9.                 <ul data-role="listview">
  10.                         <li data-role="list-divider">Moje menu</li>
  11.                         <li><a href="#about">Něco málo o mně</a></li>
  12.                         <li><a href="#signin">Přihlášení</a></li>
  13.                 </ul>
  14.  
  15.         </div>
  16.  
  17.         <footer data-role="footer">
  18.                 <h4>&copy; Copyright 2010 by Adam Štrauch</h4>
  19.         </footer>
  20.        
  21. </div>

Všimněte si zvláštního atributu date-role. Tím říkáme jQuery Mobile, co to obsahuje za data, resp. v jaké, jsou vztahu ke stránce a on podle toho daný objekt ostyluje. Co všechno se dá do date-role napsat, samozřejmě najdete v dokumentaci, ale měl by tu být řád, jakože nejvýš je stránka (page), v ní je hlavička (header), obsah (content) a patička (footer) a až v obsahu je zbytek. Výsledek si můžete přihlédnout trochu níže, ale nejdříve si kód doplníme ještě o dvě stránky. Bude to trochu dlouhé.

  1. <div data-role="page" data-theme="a" id="about">
  2.                
  3.         <header data-role="header">
  4.                 <h1>Něco málo o mě</h1>
  5.         </header>
  6.                
  7.         <div data-role="content">
  8.                 <h2>Adam Štrauch</h2>
  9.                 <p>Jak se jmenuju už víte, ale chci vám ukázat můj nový web. Tohle je on, napsal jsem ho za pět minut a vypadá suprově.</p>
  10.         </div>
  11.                
  12.         <footer data-role="footer">
  13.                 <h4>&copy; Copyright 2010 by Adam Štrauch</h4>
  14.         </footer>
  15. </div>
  16.        
  17. <div data-role="page" data-theme="a" id="signin">
  18.                
  19.         <header data-role="header">
  20.                 <h1>Přihášení</h1>
  21.         </header>
  22.                
  23.         <div data-role="content">
  24.                        
  25.                 <ul id="errors_login" class="error"></ul>
  26.                        
  27.                 <form id="form_signin">
  28.                        
  29.                 <div data-role="fieldcontain">
  30.                         <label for="username">Uživatelské jméno</label>
  31.                         <input type="text" name="username" id="username" value=""  />
  32.                                                
  33.                         <label for="password">Heslo</label>
  34.                         <input type="password" name="password" id="password" value="" />
  35.                 </div>
  36.                                
  37.                 <div data-role="fieldcontain">
  38.                         <input type="button" name="submit" id="submit" value="Sign in" onclick="sign_in();" />
  39.                 </div>
  40.                        
  41.                 </form>
  42.                        
  43.                 <em>Zůstaneš přihlášen, dokud se neodhlásíš</em>
  44.         </div>
  45.                
  46.         <footer data-role="footer">
  47.                 <h4>&copy; Copyright 2010 by Adam Štrauch</h4>
  48.         </footer>
  49. </div>

Tím jsme přidali do dokumentu další stránky. Teď vás asi napadá, proč to takhle řešit a jak se vůbec mezi stránkami přepínat. jQuery Mobile automaticky nalezne všechny odkazy na stránce a zpracuje je svým způsobem, rozhodně ne tak, jak jste zvyklí. Takže když najdete v atributu href #about tak ví, že má jen přepnout stránku a nemusí nic načítat. Když tam je ale adresa, tak se postará o hezký AJAXový efekt odsunu a hlavně doplní tlačítko zpět do hlavičky stránky (to doplní i v # případě). Historii si drží, takže opravdu se můžete dostat hluboko do stránky a pak zase ven. Navíc když pošlete URL i s #, dostane se člově, kterému URL posíláte tam, kam potřebujete. Sami byste tuto funkcionalitu chvilku psali. Pokud se vám podobné chování nelíbí, doplňte atribut rel=“external“ a odkaz bude zase odkazem. U # tohle nefunguje, ale to nebude kritické.

Pro mobil je tenhle koncept důležitý hlavně proto, že lze do jednoho dokumentu namačkat všechny data a pak s nimi pracovat buď jak velí jQuery Mobile a nebo si chování upravit vlastními skripty. Stránky jsou pak rychlé jako blesk, jen to chce ještě trochu lepší telefony a stabilnější jQuery Mobile.

Do budoucna nás toho čeká u jQuery Mobile ještě hodně a líbí se mi, v jakém světle to ukázalo HTML5. Takhle si představuju framework na straně klienta. Navíc podobný framework nahrává webovým aplikacím pro desktop. I ten kydaneček kódu, co jsem ukázal tady vypadá v kombinaci s Application Shotcut z Google Chrome/Chromium jako majestátní páv. Navíc jQuery Mobile obsahuje zajímavé widgety, dialogy, efekty a vůbec všechno po čem srdce běžného konzumního uživatele touží. Mrkněte na jQuery Mobile, zaslouží si to.


Disclaimer: Post jsem psal dost na rychlo, už chci být zas u Fallout NV :)