přejít na obsah přejít na navigaci

Linux E X P R E S, jQuery (34) – základ mobilní aplikace v jQuery Mobile

CIO Agenda

jQuery (34) – základ mobilní aplikace v jQuery Mobile

jQuery

Po minulém teoretickém úvodu se podíváme, jak pomocí jQuery Mobile vytvořit jednoduchou mobilní webovou aplikaci. 


Kostra aplikace

Když se podíváte do minulého dílu seriálu, najdete tam informace o základních konceptech frameworku. Ty nyní „přetavíme“ do skutečné mobilní webové aplikace. Kostra úplně nejjednodušší aplikace vypadá nějak takto:

<!doctype html>
<html>
  <head>
    <title>Nejjednodušší aplikace</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/jquery.mobile.min.css">
    <link rel="stylesheet" href="css/app.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.mobile.min.js"></script>
    <script src="js/app.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header"></div>
      <div role="main" class="ui-content"></div>
      <div data-role="footer"></div>
    </div>
  </body>
</html>

Zmínku si zaslouží hned několik věcí. V první řadě je to meta tag viewport, který říká, jak se má stránka zobrazovat. V tomto případě se bude vycházet z šířky zařízení a výchozí škálování bude této šířce odpovídat. Dále tu máme odkazy na javascriptové soubory – tam je potřeba vložit základní jQuery, jQuery Mobile a soubor(y) aplikace; nesmí se zapomenout ani na stylopisové soubory CSS.

Soubory jQuery a jQuery Mobile lze samozřejmě vložit i z CDN, nemusejí se vkládat lokálně, jako je tomu v příkladu.

Vlastní kostra aplikace má tady úplně základní podobu (bez dalších obsahových součástí), ale s uvedením všech tří hlavních prvků. Jak se můžete přesvědčit, zobrazí se tři prázdné prvky s výchozím nastylováním.

Pro testování mobilních aplikací můžete používat například funkci Responzivní design z vývojářských nástrojů v prohlížeči Mozilla Firefox. Obdobnou funkcí disponují i prohlížeče Google Chrome a Chromium.

Základ aplikace bez obsahu Základ aplikace bez obsahu

Aplikace s obsahem

Do aplikace nyní přidáme nějaký obsah. V hlavičce stránky bude titulek, v patičce stavový řádek, v těle nějaký text. Na obrázku je vidět, jak zafunguje základní nastylování. Pokud vám nevyhovuje, můžete si ho změnit podle potřeby.

<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Aplikace</h1>
    </div>
    <div role="main" class="ui-content">
      <p>
        Lorem ipsum…
      </p>
    </div>
    <div data-role="footer">
      <p>Aplikace připravena</p>
    </div>
  </div>
</body>

Aplikace s obsahem Aplikace s obsahem

Změnou rozlišení se můžete přesvědčit, jak funguje responzibilita. Vzhled aplikace se automaticky přizpůsobí (i když v tomto případě je to velmi primitivní).

Aplikace po změně rozlišení displeje Aplikace po změně rozlišení displeje

Ve výchozím stavu aplikace stále vypadá jako stránka, čili patička následuje za tělem a není navázána na dolní hranu obrazovky. Totéž se týká i hlavičky, ta je zase vždy na začátku stránky. V budoucnu se podíváme i na to, jak to změnit.

Ovládací prvky

Nyní zkusíme přidat do aplikace nějaké ovládací prvky. Používá se k tomu deklarativní přístup, do HTML se tedy vloží požadované elementy a u nich se nastaví atribut data-role. Framework jQuery Mobile z nich automaticky vytvoří widgety. Takto může vypadat tělo stránky:

<div role="main" class="ui-content">
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="#">První položka</a></li>
<li><a href="#">Druhá položka</a></li>
<li><a href="#">Třetí položka</a></li>
</ul>
<div>
<a href="#" data-role="button" data-icon="plus">Tlačítko</a>
</div>
</div>

Toto tělo obsahuje seznam položek a tlačítko. Že se z obyčejného seznamu (ul) stane seznam zpracovávaný frameworkem, říká jeho role listview. Nastavení data-inset na true způsobí, že položky „vylezou“ nad pozadí, nastavení atributu data-filter přidá možnost položky filtrovat (filtr standardně funguje hned při psaní). Ohledně tlačítka lze říct jen to, že atribut data-icon nastaví jeho ikonu. Zde je výsledek:

Aplikace s ovládacími prvky Aplikace s ovládacími prvky

Oživení aplikace

Příště se podíváme, jak takto vytvořenou aplikaci oživit, přidat jí interaktivitu.



Nahoru

Přidat téma diskuse

Nejsou podporovány žádné značky, komentáře jsou jen čistě textové. Více o diskuzích a pravidlech najdete v nápovědě.
Diskuzi můžete sledovat pomocí RSS kanálu rss



 
 

Top články z OpenOffice.cz

Lukáš Jelínek

Lukáš Jelínek

Dlouholetý člen autorského týmu LinuxEXPRESu a OpenOffice.cz. Vystudoval FEL ČVUT v oboru Výpočetní technika. Žije v Kutné Hoře, podniká v oblasti IT a zároveň pracuje v týmu projektu Turris. Ve volném čase rád fotografuje, natáčí a stříhá video, občas se věnuje powerkitingu a na prahu čtyřicítky začal hrát tenis.


  • Distribuce: Debian, Kubuntu, Linux Mint
  • Grafické prostředí: KDE

| proč linux | blog



Public Relations

Cesta k efektivnímu hybridnímu cloudu aneb Best practises při přechodu do AWS

MasterIT světem teď hýbe hybridní infrastruktura. A s ní i multicloud. Oba pojmy zaznívají prakticky v každém technologickém médiu. Často autoři skloňují i největší poskytovatele veřejných cloudů – Amazon Web Services a Microsoft Azure – jejichž kombinací s privátním cloudem získáte právě onen hybridní cloud. Který může být zároveň i multicloudem.

Pokračování ...


GstarCAD – DWG kompatibilní 2D/3D CAD

Public Relations

STUDENT AGENCY uvolnila ruce IT pracovníkům a zvýšila dostupnost provozovaných služeb

RegiojetSTUDENT AGENCY Holding patří mezi nejvýznamnější české dopravce a prodejce letenek, zájezdů, ale i jazykových a pracovních pobytů v zahraničí. Staré řešení IT infrastruktury nebylo flexibilní a mělo vysoké nároky na správu a údržbu. Byla tak implementována moderní hyperkonvergovaná infrastruktura postavená na VMware vSAN a řešení Dell ve formě IaaS (infra struktura jako služba).

Pokračování ...


Redakční blog

Pavel Fric

Pavel Fric, 21. August

Sayonara Player 1.5.1

Přehrávač, jak má být. Poslední dobou vývoj šlape


Pavel Fric

Pavel Fric, 26. January

MuseScore 3

První aktualizace třetí řady notačního editoru MuseScore


Redakce

Redakce, 21. December

Pište pro LinuxEXPRES

Baví vás Linux? Pište o něm, není to nic těžkého. LinuxEXPRES hledá nové autory.


Všechny blogy »