Bu yazıda Jquery Mobile kullanarak, mobil uygulama geliştirmeye hızlıca başlangıç yapacağız. İlk olarak Jquery Mobile’dan bahsetmemiz gerek. Kısaca tanımlamamız gerekirse kendisi Jquery ve Jquery UI üzerine inşa edilmiş bir mobil web framework’tür. Temelinde, akıllı telefonlar ve tabletlerin tarayıcılarında çalışması için tasarlanan, HTML5‘den sonuna kadar yararlanan, mobil cihazlar için dizayn edilmiş bir javascript(web) framework’tür.
Jquery Mobile bir framework olarak oldukça hafiftir ve kullanımı çok kolaydır. Kullanıma başlamak için çok temel düzeyde web bilginiz olması yeterlidir (HTML, CSS, Javascript) .
Jquery Mobile’ın resmi dökümantasyonuna buradan, özelliklerine şuradan, desteklediği platformlara da buradan bakabilirsiniz.
Başlıyoruz
Bu yazıda temel işleyişi görebilmeniz için sizlerle çok basit bir uygulama geliştireceğiz. Hemen işe koyulalım. İlk olarak bilgisayarımızda herhangi bir text editörü açalım ve içerisine aşağıdaki kodları yapıştıralım.
<!DOCTYPE html>
<html>
<head>
<title>PHPAX Jquery Mobile Demo</title>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<!-- JAVASCRIPT -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Başlık</h1>
</div><!-- /header -->
<div data-role="content">
<p>Merhaba Dünya !</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Bu kodları html uzantısıyla kaydettiğinizde aşağıdaki gibi bir ekran görüntüsüyle karşılaşacaksınız. Yada buradan örnek sayfaya bakabilirsiniz.
Resimde görmüş olduğunuz üzere ben testlerimi kendi tarayıcımın ekran boyutu küçülterek yapıyorum. Test etmek için HTML5 ve Javascript destekleyen herhangi bir tarayıcı yeterlidir.
Ama daha sağlıklı testler için Opera Mobile Emulator‘u bilgisayarınızda bulundurmanızı tavsiye ederim. Programı çalıştırdığınızda sizden içerisindeki belirli telefon ve tablet modelleri arasından seçim yapmanızı isteyecektir. Ardından seçtiğiniz cihazın ebatlarında ve ekran çözünürlüğünde çalışan bir opera mini açılacaktır. Opera mini’nin adres satırına dosyanızın bulunduğu yeri yapıştırmanız ve ilgili adrese gitmeniz yeterli.
Kodlarımızı inceleyelim
Kodlarımıza dönecek olursak yukarıda da görmüş olduğunuz gibi sayfanın tipi(Doctype) HTML5’dir. Jquery Mobile kullanırken sayfalarımız HTML5’in söz dizimine göre yazılacaktır.
Sayfaya farkedeceğiniz üzere 3 dosya import ettik. Bunlar Jquery’nin js dosyası ile Jquery Mobile’a ait js ve css dosyaları.
Sayfalar standart olarak üçe ayrılıyor. Bunlar tahmin edebileceğiniz gibi header, content ve footer.
Jquery Mobile da geliştirme yaparken eklediğiniz her elementin bir data-role özelliği bulunuyor. Bu ifade bize elementin “ne olduğunu/ne yaptığını” belirtiyor. Örneğin aşağıdaki kodu sayfamızın content bölümüne yazdığımızda sayfaya bir buton ekler.
Button
Jquery Mobile, standart html elementlerine stil olarak mobil kullanıma uygun düzenlemeler yapar. Bir liste eklediğinizde ve data-rol özelliğini listview yaptığınızda otomatik olarak tarayıcınızın yorumladığı liste olmaktan çıkar stil’i (css) değişir. Bundan kastım mouse liste üzerine geldiğinde ve tıkladığınızda gördüğünüz efekt, listenin fontu-yazı büyüklüğü, sayfa içerisinde ki hizalanması vb değişiklikleri kapsar. Aşağıdaki kodları content bölümüne yapıştırırsanız resimdeki görüntüyü elde edersiniz.
<ul data-role="listview" data-theme="e" data-inset="true">
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>
Görmüş olduğunuz buton ve liste gibi Jquery Mobile onlarca element barındırmaktadır. Daha öncede söylediğim gibi bu elementlerin stilleri mobil platform kullanımına uygun olarak düzenlenir. Genel anlamda büyük olmalarının sebebi ise mobil tarayıcıların kullandığı çözünürlükten kaynaklanmaktadır. Jquery Mobile’da kodlama yaparken herhangi bir konumlandırma (floating) yapmamıza gerek kalmaz. Çünkü tüm elementler buna uygun olarak düzenlenmiştir. Her elementin yukarı-aşağı ve sağ-sol olarak aldığı margin/padding önceden bellidir. Tabiki istersek bunları değiştirebiliriz. Ama özellikle framework’te buna gerek kalmayacaktır. Jquery Mobile elementlerin stillerinin, konumlandırmalarının; farklı çözünürlüklerde, farklı cihazlarda nasıl görüneceğiyle sizi uğraştırmadan hızlıca geliştirme yapmamızı sağlar. Bize ise sadece içerik ve back-end tarafında yapacaklarımıza odaklanmak kalır. Şimdi tarayıcımızı tam ekran yapalım. Gördüğünüz gibi tüm elementler sayfa genişliğinde uzadı. Bunun sebebi kodladığımız sayfayı görüntülemek isteyen pek çok farklı cihaz olacaktır (bu bir akıllı telefon yada tablet olabilir). Her cihazın çözünürlükleri birbirinden farklı olduğu için elementler direk olarak konumlansaydı farklı cihazlarda aynı görüntüyü elde edemezdik. Bu yüzden tüm elementler otomatik olarak sayfa genişliğinde kendilerini uyarlarlar. Tarayıcınızın boyutunu değiştirerek sizde test edebilirsiniz. Sizde herhangi bir konumlandırma veya herhangi bir element eklemek isterseniz örneğin eklediğiniz bir input=”text” in boyutunu yüzde (%) yani likit olarak verirseniz, farklı cihazlarda farklı çözünürlüklere kendini otomatik olarak uyarlayacaktır. 
Çoklu sayfa yapısı
İlk olarak bu adresteki örnek sayfaya bakalım. Butona bastığımızda bir başka sayfa açılıyor. Geçiş sırasında adres satırına baktığımızda linkimizin sonuna #sayfa2 ifadesinin eklendiğini görüyoruz. Sayfanın kaynak kodlarına baktığımızda ise farkedeciğiniz üzere önceki örnekten farklı olarak tek bir sayfa yer almıyor. Bu sefer 2 sayfaya sahibiz. Kod yapısı aşağıdaki şekilde. Her bir sayfanın kendine ait header, footer ve content’i bulunuyor.
<div data-role="page" id="sayfa1">
<div data-role="header"> ... </div>
<div data-role="content"> ... </div>
<div data-role="footer"> ... </div>
</div><!-- /page -->
<div data-role="page" id="sayfa2">
<div data-role="header"> ... </div>
<div data-role="content"> ... </div>
<div data-role="footer"> ... </div>
</div><!-- /page2 -->
Sayfayı görüntülemek istediğimiz anda data-role=”page” olan div elementlerinden, sayfaya ilk eklenen gösterilir.
<div data-role="page" id="sayfa1"> ... </div>
Biz herhangi bir butona, linke #sayfa2 adresine gitmesini istersek, Jquery Mobile data-role=”page” olan ve id=”sayfa2″ olan div’i arar ve bulursa bize gösterdiği sayfayı yani #sayfa1’i gizli hale getirip yeni olan görüntülenmesini istediğimiz #sayfa2’ye geçer. Bu geçiş sırasında da standart olarak fade efekti uygular.
Bu yüzden Jquery Mobile ile uygulama geliştirirken anchor kullanamazsınız. Çünkü her # simgesinden sonraki ifadede, Jquery Mobile sayfa içerisinde id’si belirtilen ifadeyle eşleşen page (data-role=”page”) arar.
Son olarak…
Baştan sona resmi dökümantasyonu gözden geçirmenizi şiddetle öneririm, linkte yer alan örnekleri inceleyerek, pratik yaparak elementleri tanımak yeterli. Çok kısa sürede adapte olup geliştirmeye başlayabilirsiniz.
Yaptığımız örnekleri buradan indirebilirsiniz.
Hoşcakalın.
Mükemmel bir içerik, teşekkürler…