jQuery Mobile Framework


Am pomenit recent de Sencha Touch şi de iUI – acum vedem jQuery Mobile care are exact acelaşi obiectiv: să fie un framework pentru aplicaţii mobile. HTML5, JavaScript (evident jQuery) şi CSS sunt ingredientele acestui pachet care a ajuns nu de mult la versiunea 1.0… dar nu vă aşteptaţi să fie un produs mega, ultra şi foarte stabil. Personal am optat totuşi să încep cu jQuery Mobile să încerc unele proiecte pentru simplul fapt că sunt cât de cât familiar cu jQuery.

imagine

Dacă vreţi să vedeţi jQuery Mobile în acţiune, vă recomand să vedeţi documentaţia. Este o documentaţie-demonstraţie, pentru că în timp ce vezi live ce poate, ai şi documentaţia, doar că pentru cod efectiv adesea trebuie să te uiţi în sursă. În timp ce paleta ofertei nu este la fel de bogată precum la Sencha Touch (caruselul poate îmi lipseşte cel mai mult), vom găsi ingredientele principale:

  • pagini: putem avea webaplicaţia formată din mai multe pagini (o pagină = un fişier) dar, atenţie, poate fi şi totul (mai multe pagini) într-un singur fişier
  • bări de instrumente (sus şi/sau jos)
  • butoane (în bările de instrumente sau chiar în corpul paginii)
  • formatarea conţinutului: pe linii/coloane; conţinut ce se ascunde/arată…
  • nu lipsesc elementele ce ţin de formulare
  • şi în fine listele, o modalitate estetică pentru a afişa mai multe elemente
  • toate suportă cinci teme: negru, albastru, gri, alb şi galben

Am tras un semnal de alarmă la început şi acum mă explic: jQuery Mobile are încă scăpări, unele foarte supărătoare. Cu toate că suntem la versiunea 1.0 finală, tranziţiile între pagini arată cum arată online, dar pe majoritatea smartphone-urilor (fie cu Android, iOS sau altele) sunt enervant de sacadate. Cel mai supărător (d)efect e că la trecerea la o pagină nouă vezi pagina nouă, apoi rapid pagina veche, şi iarăşi, definitiv, pagina nouă. Soluţia? Eliminarea tranziţiilor până la o versiune 1.1 sau 1.01 sau cum îi va spune. Apoi cu cât îţi bagi mâinile mai adânc dai şi de alte probleme (ex: subsolurile mereu vizibile rămân uneori aiurea pe ecran la defilare). Acum va decide fiecare dacă astfel de probleme sunt prea grave sau nu. Eu unul merg înainte, aşteptând cu optimism rezolvarea problemelor în versiuni viitoare.

Şi închei punând structura tradiţională a unei pagini cu jQuery Mobile. Nu, nu e identică cu cea din documentaţie. Am preferat să pun charset-ul din start pe UTF-8 şi să pun şi codul pentru subsol. Avem două secţiuni mari: ce e în head şi ce e în body. În head avem în linia 6 o indicaţie ce spune ca lăţimea folosită să fie cea a ecranului (altfel implicit e undeva pe la 900px) şi să nu fie scalare. Includem apoi CSS-ul pentru jQuery Mobile, framework-ul jQuery şi apoi framework-ul jQuery Mobile. În fine, în secţiunea body avem o structură clară: antet, conţinut şi subsol (sau în engleză header, content şi footer). Poate în alte articole vom vedea cum jonglăm mai departe, pornind de la acest cadru banal.

<!DOCTYPE html> 
<html> 
	<head> 
	<meta charset="utf-8" />
	<title>Pagina mea</title>
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head> 
<body> 
<div data-role="page">
	<div data-role="header">
		<h1>Titlu</h1>
	</div><!-- /antet -->
	<div data-role="content">	
		<p>Conţinut</p>		
	</div><!-- /continut -->
	<div data-role="footer"> 
		<p>Subsol</p>
	</div><!-- /subsol -->
</div><!-- /page -->
</body>
</html>


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

2 comentarii

  1. Prietene raspunsul la intrebarea ta e http://phonegap.com/ .

    Asta e acuma miezu’ dar de obicei trebuie sa folosesti scula la ce ai tu nevoie, link ul urmator iti da o lista de framework-uri ce si cum fac puse frumos pe criterii: http://www.markus-falk.com/mobile-frameworks-comparison-chart/

  2. radu.capan spune:

    Nu stiu la care intrebare te referi.

    Dupa stiinta mea, limitata desigur, Phonegap, cu care am lucrat putin, e pentru acele cazuri cand ai nevoie de acces la functii specifice telefonului (vibratii, contacte, camera foto, altele). Phonegap nu e necesar, cel putin pt aplicatii simpliste (asa cum am scris aici). Photegap face casa buna cu jQuery Mobile (si cu multe alte frameworke-uri) si nu se exclud tocmai pt ca au „teluri” diferite. Am sa ajung probabil si la Phonegap, dar din punctul meu de vedere trecerea e prin framework-uri precum cele comparate in chart-ul (foarte interesant) indicat de tine.


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *