wap - wml - xhtml mp

BAŞLIYORUZ !

Eğer daha önce web sayfası hazırladıysanız ( yani HTML bilginiz varsa-ki umarım artık HTML bilmeyeniniz yoktur ) çok şanslısınız, çünkü WML ile HTML birbirine çok benzer. Sayfalarınızda Javascript kullandıysanız daha da iyi, çünkü WMLScript , Javascript ‘in hafifleştirilmiş versiyonu gibidir.Bir de PHP, ASP gibi dilleri kullanarak sayfalarınıza dinamik içerik kattıysanız, işin büyük bölümünü halletmişsiniz demektir. Bu bilgiler ışığında WAP sayfalarını hazırlamanın gerçekten çok basit olduğunu siz de göreceksiniz. Fakat daha önce bu gibi şeylerle uğraşmadıysanız üzülmeyin. Bu kitabı bitirdiğinizde sizin de WAP sayfası hazırlamak için gerekli donanımınız olacak.

İnternetteki sayfaların HTML kullanılarak yazılması gibi, WAP sayfaları da WML kullanılarak yazılır. Ve aynı şekilde internetteki sayfalarda Javascript kullanılabildiği gibi, WAP sayfalarında da WMLScript dili kullanılabilir. Fakat arada bazı farklılıklar bulunmaktadır; mesela HTML’de iç içe geçmiş tablo yapılarına izin verilirken WML de bu yapılamaz. Veya Javascript’i HTML içine gömmeye imkan vardır, fakat WMLScript kodları ayrı dosyalarda saklanırlar, yani WML sayfalarında gömülü değildirler. Eğer kafanız karıştıysa telaşlanmayın, bunların hepsini ilerleyen başlıklarda öğreneceğiz…

Artık hazırsanız yavaş yavaş bir WAP sayfası oluşturmaya başlayalım. Şimdi ekrana herhangi bir metin editörü ( örneğin Windows’taki “Not Defteri” gibi) açın ve içine aşağıdaki satırları yazın ;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml>  <card id="card1" title="Acaba çalışacak mı?"> <p>Çalıştı !!!</p> </card> <card id="card2" title="Deneme"> <p>Bu yazıyı ekranda göremeyeceğiz !!!</p> </card></wml>

Ve bu sayfayı “deneme.wml” ismiyle kaydedin (WAP’taki sayfaların uzantıları genelde “wml” dir). Burada neler yazdığımızı yakında öğreneceksiniz. Aslında şu an ilk WAP sayfanızı hazırlamış bulunuyorsunuz. Ama hazırladığımız bu sayfanın cep telefonumuzda nasıl görüneceği hakkında hiçbir fikrimiz yok - en azından şimdilik. Birazdan WAP sayfamızı nasıl görüntüleyebileceğimizi öğreneceğiz. Ama önce dikkat etmemiz gereken bazı kuralları açıklayalım…

TEMEL KURALLAR

• Kod yazımı:

Henüz WML sayfası hazırlamayla ilgili hiç bir şey bilmediğinizi farzediyorum. Dikkat etmeniz gereken en önemli kurallardan biri kodların düzenli bir şekilde yazılmasıdır. Sayfanıza başka biri de baktığı zaman ne yapmaya çalıştığınızı anlayabilmelidir. Yukarıda yazdığımız kodlarda bazı satırlarda girinti-çıkıntı verdiğimizi göreceksiniz. Aslında dümdüz, araya boşluk bile koymadan, alt satıra bile geçmeden kodumuzu yazabilirdik. Fakat bu, hem sizin için, hem de sizin kodunuzu anlamaya çalışan başkalarının akıl sağlığı (!) için oldukça zararlı olacaktır. Kodlara hakim olmaya başladıkça, birbirinden farklı olan elemanları sizler de tanımaya başlayacaksınız, bunların yazımını bizim örneğimizdeki gibi

yapmaya özen gösterin.

WML’de elemanlar etiketlerden oluşurlar. Daha sonra da tekrar açıklanacağı gibi, etiketler “<” ve “>” karakterleri arasına yazılır (<…> gibi). Her açılan etiket için bir de kapanış etiketi bulunduğunu unutmayın. Kapanış etiketlerinde açılış etiketlerinden farklı olarak “/” karakteri bulunur. Bununla ilgili bazı istisnai yazım şekillerini ileride öğreneceğiz. Bu konu çok önemli olduğu için ileride tekrar değinilecektir.

WML’de iç içe eleman yazımı mümkündür, fakat açılış ve kapanış sıralamasına dikkat etmek gereklidir. Örneğin;

<a> <b> </b> </a> gibi bir yazım doğrudur . Eğer elemanlar iç içe yerleştirilecekse, her zaman ilk açılan etiket en son kapanmalıdır. Tam tersi şekilde son açtığınız etiketi ilk başta kapatmanız gerekir. Aşağıdaki yazım yanlıştır;

<a> <b> </a> </b>Merak etmeyin, bunlarla ilgili o kadar örnek yapacağız ki, bu kitap bittiğinde yazım hatası yapma olasılığınız kalmayacak… Bu nedenle yukarıda yazdıklarımız size yabancı geldiyse korkmayın, bir süre sonra yaptıklarınıza siz bile şaşıracaksınız .

• Açıklama satırları:

Kodlarınızı yazarken açıklama satırlarından faydalanın. Böylece hem kodunuzu dışarıdan anlamaya çalışan birisi daha az zorluk çekecektir, hem de siz birkaç ay sonra kodunuzu tekrar incelediğinizde yapmaya çalıştığınız işi daha çabuk hatırlarsınız. İlerleyen başlıklarda açıklama satırlarının kullanım şekillerini öğreneceksiniz.

• Ezberleme Sistemi:

Kitap boyunca karşınıza bir çok kod satırı çıkacak. Yakında öğreneceğiniz gibi, bir çok eleman ve bunlara ait bir çok özellik mevcut. Size tavsiyem, bunları ezberlemeye çalışmayın! Ama sık sık uygulama geliştirin. Size faydası olacağını düşündüğünüz konuları not alın. Kitaptaki örnekleri siz de uygulamaya çalışın. Bir süre sonra birçok kodu zaten ezberlemiş olduğunuzu siz de fark edeceksiniz. Aksi takdirde kafanız karışacak ve konuya olan ilginiz dağılacaktır.

SİMÜLATÖR PROGRAMLAR

Az önce hazırladığımız sayfayı görüntüleyebilmek için bir simülator programa ihtiyacımız var. Çünkü cep telefonlarının ekranları bilgisayar ekranlarından çok daha küçüktür. Normal internet sayfaları bilgisayarımızdaki ekrana tam oturabilirken cep telefonumuzdaki ekrana sığmaları imkansızdır. Hazırladığımız WAP sayfalarını bilgisayar ekranında görüntüleyebilmek için birçok şirket simülatör programlar geliştirmişlerdir. Bu programlar cep telefonu gibi davranarak bizim sayfalarımızın cep telefonu ekranlarında nasıl görünecekleri hakkında bize fikir verirler. Böyle bir

simülatör programı “http://www.forum.nokia.com/info/sw.nokia.com/id/db2c69a2-4066-46ff-81c4-caac8872a7c5/NMB40_install.zip.html” adresinden (veya www.forum.nokia.com ‘da NMB40_install.zip diye aratarak) temin edebilirsiniz. Fakat herhangi bir arama motorunda “WAP emulator” gibi bir arama yaparsanız da birçok benzeri programla karşılaşacaksınız. Bazı siteler üyelik isteyeceklerdir (Nokia’nın sitesi gibi), ve yine bazı programlar başka bazı programların da yüklü olmasını bekleyeceklerdir ( mesela Java desteği gibi). Fakat yılmadan 10-15 dakikanızı ayırırsanız, bu işlemi çabucak bitirirsiniz.

Programı indirip kurduğunuzu ve çalıştırdığınızı farzediyorum. Karşınıza aşağıdaki gibi bir ekran gelecektir (aslında bundan biraz daha uzun görünecektir, ben köşesinden tutup biraz sıkıştırdım.):

Şekil 1-1

Şimdi menüden “File” ve sonrada “Open File” a girelim. Buradan az önce kaydettiğimiz deneme.wml dosyasını bulalım. Bu dosyayı açtığınız zaman ekrana aşağıdaki görüntünün gelmesi lazım:

Şekil 1-2

Tebrikler !!! Artık sizin de bir WAP sayfanız var ! Üstelik cep telefonunuzda nasıl görüneceğini de aşağı yukarı biliyorsunuz. Fakat ufak bir problemimiz var. Malum, piyasada bir çok farklı çeşit cep telefonu satılmakta. Her şirketin telefonunun donanım, ekran boyutları gibi özellikleri farklılıklar göstermekte. Bir başka deyişle, şu an yukarıdaki şekliyle görüntülenen WAP sayfamız, gerçek hayatta ve gerçek cep telefonlarında biraz daha farklı görünebilir. Bu sizi üzmesin, çünkü bu farklılık büyük boyutlarda olmayacaktır, ve ben bu kitap boyunca elimden geldiğince size her

http://www.forum.nokia.com/

telefonda aynı şekilde görüntülenebilecek örnekler vermeye çalışacağım.Pekala, artık hayatın acımasız bir yönüyle daha yüzleştiğimize göre, daha önce hazırladığımız WAP sayfamıza geri dönebilir ve onu biraz daha yakından inceleyebiliriz.

WML DÖKÜMAN YAPISI

Hatırlarsanız örneğimizdeki ilk üç satır şöyleydi;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml">

“Bunlar ne yaaa?!” dediğinizi duyar gibi oluyorum. Ama birazdan size küçük bir sürprizim olacak, lütfen okumaya devam edin…WAP sayfalarımıza başlarken hep bu üç satırı kullanırız- şimdilik böyle bilin… Burada ilk satırdaki <?xml version="1.0" encoding='ISO-8859-9'?> bildirisi kullanılan XML versiyonunu ve karakter setini gösterir. Aslında bütün WML sayfaları birer XML dökümanıdır ( XML hakkında daha detaylı bilgiyi XML teknolojisini anlatan herhangi bir kitapta bulabilirsiniz ). Bu nedenle burada xml versiyonunu belirtmiş olmamız gayet doğaldır. “encoding='ISO-8859-9’ ” bildirisi, Türkçe karakter seti kullandığımızı gösterir. Böylece Türkçe karakterlerle (ç,ş,ğ… gibi) problem yaşamayız. İsterseniz “ encoding='ISO-8859-9' “ yazısını tamamen silip sayfayı tekrar kaydedin ve tekrar görüntüleyin. Ufak bir problemle karşılaşacağınızı şimdiden garanti edebilirim.Şimdi gelelim ikinci ve üçüncü satırlara…Bu satırlarda da DOCTYPE bildirisini tanımlarız. WML sayfalarını hazırlamak için birden fazla DTD şeması tanımlanmıştır ( DTD şemaları hakkında ayrıntılı bilgiyi XML teknolojisini anlatan herhangi bir kitapta bulabilirsiniz…) .Biz örneklerimizde oldukça yaygın bir kullanımı olan bu şemayı tercih ettik. Bu gibi şemalar, dilde kullanacağımız söz dizimini (syntax) belirler.Ve gelelim minik sürprizimize, aslında bu anlattıklarımın anlamını bilmenize gerek yok-muhtemelen çoğunu da anlamamıştınız zaten . Siz sadece bu üç satırı her sayfanın başına koyun, yeter…Ve bir şeye dikkat edin, bu bildirilerden önce boşluk bırakmayın! Aksi takdirde bazı WAP tarayıcılarla problem yaşayabilirsiniz.

Şimdi işin bizi asıl ilgilendiren kısımlarına gelelim.

<wml>  <card id="card1" title="Acaba çalışacak mı?"> <p>Çalıştı !!!</p> </card> <card id="card2" title="Deneme"> <p>Bu yazıyı ekranda göremeyeceğiz !!!</p> </card></wml>

WML sayfaları yazarken bazı kurallara dikkat etmeliyiz. Mesela etiketlerde büyük-küçük harf duyarlılığı vardır. Yani “<wml>” ile “<Wml>” aynı şey değildir-ki zaten ikinci ifade yanlıştır. Ayrıca daha önce anlatıldığı gibi açtığımız bir etiketi mutlaka kapatmalıyız. Aksi takdirde sayfamız görüntülenemez. Kapanış etiketlerinde normalden farklı olarak “/” karakteri bulunur. Şöyleki;<…> …. </...>

<wml> elemanı

Şimdi üstteki satırlara geri dönelim. Dikkat ettiğiniz gibi buradaki ilk satırda “<” ve “>” karakterleri

arasında “wml” yazıyor, yani “<wml>” şeklinde bir etiket var. Peki bu etiket nerede kapanmış? …Çok doğru, en altta…Buradaki “</wml>” satırının ilk satırdakinden tek farkı, “/” karakteridir. Eğer çok çok dikkatliyseniz aklınıza şöyle bir soru gelmiş olabilir : ”Peki neden taaa ilk başta yazdığımız üç satırda böyle bir karakter kullanarak etiketleri kapatmadık? ”Güzel bir tespit, cevap ise çok basit: “Çünkü onlar aslında WML elemanları değil.” Ama unutmayın, bu onları yazmadan da WML sayfası oluşturabilirsiniz anlamına gelmez.<wml> elemanı, bir WML dökümanındaki kök elemandır. Diğer bütün elemanlar bu elemanı oluşturan “<wml>…</wml>” etiketlerinin arasına yazılır (İlk üç satırdaki bildirilerin WML elemanları olmadığını tekrar hatırlatırım, bu nedenle onlar <wml> elemanının etiketleri dışındadırlar.).

Açıklama satırları:

Yine az önceki satırlara dönersek, ilk satırda “” gibi bir ifade de var. Bu bir açıklama ifadesidir.Kodlarınızı yazarken sonradan baktığınızda ne yaptığınızı hatırlamanız için, veya başkalarına bir not düşmek için açıklama satırlarından faydalanabilirsiniz. Açıklamalarınızı, “” etiketleri arasında yazabilirsiniz. Bu etiketlerin arasındaki ifadeler WAP tarayıcısı tarafından görüntülenmez. Kullanımı aşağıdaki gibidir;

 

<card> elemanı

Sırada <card id="card1" title="Acaba çalışacak mı?"> satırı var.WML dosyaları bir veya birden fazla “card (kart) ” dan oluşur. Bir kartın içine resim, yazı, link gibi birçok eleman konulabilir. Bu kartlar da bir desteyi (deck) oluştururlar. Bir kullanıcı bir WAP sayfasına gittiği zaman telefonun tarayıcısı sunucudan bir veya birden fazla “kart”tan oluşan bir desteyi yükler. Kartlar, desteler, iskambil oyunu gibi değil mi? Kafanız mı karıştı ? Aşağıdaki şekli bir inceleyin:

Şekil 1-3

Gördüğünüz gibi WML sayfası yüklendiğinde aslında yüklenen, kartlardan oluşan bir destedir, yani desteyle WML sayfası aynı şeydir. Telefonun ekranında aynı anda sadece bir kart görüntülenebilir. Eğer kullanıcı aynı destedeki

Deste

WML Sayfası

Kart 1

Kart 2

Kart 3

(sayfadaki) başka bir karta ulaşmak isterse, sunucudan bir daha bilgi transferine gerek kalmaz. Bu bize önemli bir hız avantajı sağlar. Dikkat ettiyseniz bizim destemizde iki kart bulunmaktadır. Ve biz ikinci kartta yazan yazıyı ekranda görememekteyiz. Peki ikinci karta ulaşmanın bir yolu yok mu? Kabul ediyorum, basit bir soru oldu…Elbetteki bunun bir yolu var, zamanı gelince onu da öğreneceğiz.Şimdi <card id="card1" title="Acaba çalışacak mı?"> satırına geri dönelim. Bu etiketin içinde id=”…” ve title=”…” şeklinde bildirimler var. Bunlar “card” elemanına ait özelliklerdir ve elemanların bu gibi özellikleri (attribute) olabilir. Özellikler , hayatımızı kolaylaştırır ve bize bazen tahmin edebileceğinizden çok daha fazla yardımcı olurlar. Bu gibi özelliklerle zaman zaman karşılaşacağız, ve size anlamlarını açıklayacağım. Siz sadece bu özelliklerin değerlerini çift tırnak (“”) içinde girmeye özen gösterin…Burada id özelliğine, bu elemana istediğimizde ulaşmamız için özel bir isim vermeliyiz. Bir başka deyişle, destemizde 2 tane kart var. Bizim bunları birbirinden ayırt etmemiz için onları isimlendirmemiz lazım. Bu isimlendirmeyi istediğiniz gibi yapabilirsiniz. Tek dikkat etmeniz gereken bir ismi iki kere kullanmamanız. Her elemanın isminin farklı olması lazım. Ben burada “card1” ve “card2” isimlerini verdim. Ama siz belki de “ali” ve “veli” isimlerini tercih edersiniz. Bu tamamen size kalmış… “title” özelliği ise o kartın başlığını belirler. Şekil 1-2 ‘yi bir daha dikkatlice incelerseniz, bizim ilk kartın “title” özelliğine yazdığımız “Acaba çalışacak mı?” yazısı ekranın başlığında görünmektedir. Zaten “title”ın türkçesi de “başlık” demektir. Yavaş yavaş kafanızda bir şeyler netleşmeye başladı , değil mi? Güzeeel…Şimdi minik bir uzmanlık sorusu: 2. satırda açılan <card id="card1" title="Acaba çalışacak mı?"> etiketinin kapandığı yer neresidir?...Harika, doğru bildiniz!!! 4.satırda kapanmıştır. Gittikçe işler kolaylaşıyor…Bir şeyi daha açıklığa kavuşturalım; “id”,”title” vs… gibi özellikler sadece ihtiyaç duyduğumuzda bize gereklidir, yani tanımlamamız şart değildir. Burada “id” özelliğini kullanmadığımız için onu silip silmemekte serbestsiniz.

GÖRÜNTÜ ve METİN BİÇİMLENDİRME ELEMANLARI

<p> elemanı

Örneğimizde “<p>Çalıştı !!!</p>” diye bir ifade var. Burada da açılıp kapanmış bir etiket var;”<p>”. Bu “paragraf” anlamına gelmektedir.WML’deki bazı kurallar HTML’dekilere göre çok daha katıdır. HTML’de “<body> Merhaba…</body>” gibi bir ifade problem yaratmazken, WML’de bu bir problemdir. Örneğin aşağıdaki ifade yanlıştır:

<card id="card1" title="Acaba çalışacak mı?"> Çalıştı !!!</card>

Yukarıdaki yanlışlığı düzeltmek için metnimizi “<p>…</p>” etiketleri arasına alarak tekrar düzenlemeliyiz;

<card id="card1" title="Acaba çalışacak mı?"> <p>Çalıştı !!!</p></card>

<p> elemanı iki özelliği destekler; “align” ve “mode”.”align” özelliği paragrafın hizalamasını yapmak için kullanılır ve şu üç değerden birini alır: “left”, “center”, “right” . Lütfen aşağıdaki örnekleri inceleyin:

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="card1" title="’p’ elemanı"> <p align=”center”> Merhaba...Ben bir "p" elemanının "align" özelliğine "center" değeri verilmiş haliyim...</p> </card></wml>

Şekil 1-4 Şekil 1-5

<p> elemanının “align” özelliğine “left” yazmakla, bu özelliği hiç kullanmamak aynı şeydir, çünkü varsayılan değer zaten metnin sola dayalı halidir.

Şimdi <p> elemanının “mode” özelliğine bir göz atalım; “mode” özelliği, metnin ekrandan taşması durumunda kesilip kesilmeyeceğini belirler. Bu özelliğe iki değer yazabilirsiniz; “wrap” ve “nowrap”. Daha iyi anlamak için aşağıdaki örneği inceleyin;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="card1" title="’p’ elemanı"> <p mode=”nowrap”> "mode" özelliğine "nowrap" verirseniz ekranda yazı süreeeeeeer gider ve bazen bu kötü bir görüntü yaratabilir... </p> </card></wml>


Şekil 1.6 daki örnekte de görüldüğü gibi, “mode” özelliğine “nowrap” değeri verirseniz tarayıcı metni kesmeden yana doğru devam ettirir, kaydırma çubuğunu kullanmak zorunda kalırsınız. Şunu da unutmayın ki, bazı telefonlarda yana doğru kaydırma çubuğu yoktur. Bir başka deyişle bu durumda göreceğiniz davranış telefondan telefona değişir. Şekil 1.7 deki “mode” özelliğine “wrap” değeri aktarılmış görüntü ise yazı ekrana sığmadığı zaman yazıyı keser ve alt satırdan devam ettirir. Bu özelliği kullanmazsanız da varsayılan değer zaten budur.

WML ile ilgili bir noktayı hatırlatmak isterim, WML’ de küçük-büyük harf duyarlılığı vardır. Yani etiketlerdeki ve özelliklerindeki değerler mutlaka küçük harfli olmalıdır (istisnai durumlar olunca size haber vereceğim ) . Örneğin aşağıdaki gibi bir ifade yanlıştır;

<p Align=”center”>Bu yanlış…Daha dikkatli olmalısın!</p>

Yukarıdaki ifadede “Align” özelliğinin ilk harfinin büyük olması, bütün büyüyü bozmuştur ve sayfamız hatalı hale gelmiştir. Bunu düzeltmek için yapabileceğimiz tek bir şey var; “A” harfini küçük yazmak…

<p align=”center”>Bu doğru…Aferin </p>

<br /> elemanı

<br /> elemanı, bu elemanı yerleştirdiğiniz noktadan itibaren metni keser ve alt satırdan devam ettirir. Hemen örnekleyelim;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="card1" title="’br’ elemanı"> <p> Bu yazı <br /> alt satırdan devam etsin lütfen… </p> </card></wml>

Şekil 1-8

Şekil 1-8’de de gördüğünüz gibi, bizim <br /> elemanını kullandığımız yerden itibaren metin bölünmüş ve alt satıra geçilmiştir. Şimdi biraz hafızamızı tazeleyelim. Dikkat ettiyseniz “lütfen” kelimesi de alt satıra geçilerek yazılmış. Halbuki biz ona alt satıra geç demedik. Peki neden oraya yazılmış ? Doğru cevabı bilirseniz bir çay molası vermeniz için size izin vereceğim …Peki kabul ediyorum, bu da zor bir soru olmadı…Verdiğiniz cevap tamamen doğru; Çünkü “<p>” elemanının “mode” özelliğini biz belirtmesek de varsayılan özellik wrap” ti. Biz “mode” özelliğini belirtmemiş olsak da “<p>” elemanı böyle yorumlandı ve tarayıcı ekrana sığmayan metni bölerek aşağıdan devam ettirdi.Bu arada deminden beri zihninizi kurcalayan diğer soruyu farkettim. “<br />” elemanının kullanılış şekli kafanızı karıştırdı. İşte bu yazım şekli istisnai bir etiket açılış-kapanışının aynı anda olduğu yazım şeklidir. Bunun gibi elemanlarla ileride de karşılaşacağız. Sizin beklediğiniz yapı belkide aşağıdaki gibiydi;

<p> Bu yazı <br></br > alt satırdan devam etsin lütfen… </p>

Yukarıdaki yapı daha önce HTML ile uğraşmış olanlara çok tuhaf görünebilir. Fakat yeni öğrenmeye başlamışsanız haklı olarak yukarıdaki gibi bir yapı beklemişsinizdir. Aslında yukarıdaki gibi bir yazım şekli gayet doğrudur ve hatasız çalışacaktır. Fakat siz yine de “<br />” elemanını bu sadeleştirilmiş haliyle kullanmaya alışın.

<b> elemanı

<b> elemanı, açılış ve kapanış etiketleri arasındaki yazıyı koyulaştırarak ekrana yazar. Bir kelimeyi vurgulamak istediğiniz zaman kullanışlı olacaktır.Aşağıda bir örnek sizi bekliyor;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="card1" title="’b’ elemanı"> <p> İnan bana, onu değil, <b> SENİ </b> seviyorum ben!!! </p> </card>

</wml>

Şekil 1-9

Sevdiğiniz insan bu dediğinize inandı mı, bilmiyorum, ama siz anafikri anladınız sanırım…

<i> elemanı

Bu elemanın görevi, yazıları italik bir şekilde yazmaktır. Bazen oldukça etkili olabilir…

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="card1" title="’i’ elemanı"> <p> Birşey sormak istiyorum...<i>Benimle evlenir misin?</i> </p> </card></wml>

Şekil 1-10

Vaayyyy…Hiç fena değil …

<u> elemanı

Bu eleman ise, istediğiniz yazının altını çizmek için kullanılır.

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="card1" title="’u’ elemanı"> <p> <u> Kesinlikle </u> seni bir daha görmek istemiyorum!!! </p> </card></wml>

Şekil 1-11

Yazık oldu. Başkasıyla yakalanmış olmanız sizin bittiğiniz an olmuş…

Elemanların birlikte kullanımı

Sakın bu elemanları ayrı ayrı mı kullanmalıyım gibi yanlış bir fikre kapılmayın. Aksine, bu elemanları birlikte kullanmanız, bazı durumlarda can simidi etkisi yapabilir…

<?xml version="1.0" encoding='ISO-8859-9'?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="card1" title="Son Çırpınış"> <p> Yaa valla <b> yanlış anladın </b>!!!Ben sadece <u> seni </u> b seviyorum !Ve benimle <i>evlenmeni istiyorum...</i> <b><u><i>Benimle evlenir misin?</i></u></b> </p> </card></wml>

Şekil 1-12

Valla gözlerim yaşardı…Umarım sizi affeder ve teklifinizi kabul eder .Bu arada, “<b><u><i>Benimle evlenir misin?</i></u></b>” satırına dikkat edin. Burada en dışta <b> elemanı, en içte ise <i> elemanı var. Ama bunlar gayet düzenli bir şekilde iç içe yerleştirilmiş. Yani etiketlerin açılış ve kapanış sıraları bozulmamış. Zaten bozulsaydı, hatalı bir ifade olacaktı. Mesela aşağıdaki gibi bir ifade yanlıştır;

<b><i><u>Benimle evlenir misin?</i></u></b>

En başta <b> elemanı en sonda kapanmış-ki bu doğru, fakat ikinci sırada açılan <i> etiketinin kapandığı yer yanlış olduğu için, bu ifade hata mesajına neden olacaktır. Üzülmeyin, bu gibi iç içe geçmiş yapılarla daha çok çalışacağız, ve siz yeterli antrenmanı yapma fırsatı bulacaksınız…

<table> elemanı

Daha önce HTML ile uğraşanlar bilir, <table> elemanı web sayfası hazırlarken kullanılan en önemli elemanlardan biridir. Sayfanın düzenini sağlamada önemli rol oynar.WML sayfalarında da <table> elemanını kullanmamız mümkündür. Gerçi WML sayfaları oldukça küçük ekranlarda görüntülendikleri için düzen vermek zaten zor değildir. Fakat biz ne kadar çok eleman bilirsek, o kadar iyi sayfa tasarlarız. Bu nedenle bu elemanı biraz daha yakından inceleyelim.“table” ın türkçedeki anlamı “tablo”dur. Tablolar satırlardan ve sütunlardan oluşur. Bizim bir tablo yaratıp içine veri yerleştirebilmemiz için üç etikete ihtiyacımız vardır; <table>, <tr> ve <td>. Aşağıda bir tablonun örnek yapısı verilmiştir;

<table> <tr> <td> Veri buraya yazılır </td> </tr></table>

Şu an en basit şekliyle bir tablo oluşturduk. Fakat bu gerçekten fazlasıyla basit ve gereksiz oldu. Yine de bize hiç faydası yok değil. Örneğin verinin sadece <td>…</td> etiketleri arasına yazıldığını yukarıda rahatlıkla gözlemleyebiliyoruz. Şunu hemen belirtelim, bir tabloda dilediğiniz kadar satır ve sütun oluşturabilirsiniz. Aslında HTML bize tablo içinde tablo oluşturmaya dahi izin veriyordu. Fakat bu WML’de yapılamaz. “<table>” nesnesinin desteklediği özelliklerden biri “columns” (türkçesi “sütun”) özelliğidir. Bu

özelliği tanımlamazsanız WAP simülatörünüz muhtemelen hata mesajı verecektir. Bu özelliğe vereceğiniz değer, her <tr>…</tr> etiketi arasındaki <td> elemanı sayısıyla aynı olmalıdır. Şöyleki;<table columns=”2”> <tr> <td>Gül</td> <td>Gonca</td> </tr> <tr>

<td>Lale</td><td>Papatya</td>

</tr></table>

Evet, bu kadar basit işte…İlk satırda “columns” özelliğini belirttim, ve her <tr>…</tr> arasında 2 adet <td> elemanı olduğundan “columns” özelliğine “2” değeri atadım. Fark ettiğiniz gibi bu tabloda 2 satır ve 2 sütun var. Şimdi bunu gerçek bir WML sayfasına yazalım; <?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="card1" title="Tablolar"> <p> <table columns=”2”> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> </p> </card></wml>

Şekil 1-13

Gördüğünüz gibi tablomuzda 2 satır ve 2 sütun var. Rakamların hangi hücrelerde olduklarına dikkat edin. Hemen bir örnek daha yapalım;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="card1" title="Tablolar"> <p> <table columns=”2”> <tr> <td>Ali</td> <td>Ayşe</td> </tr> <tr> <td>Burhan</td> <td>Belma</td> </tr> <tr> <td>Celil</td> <td>Ceyda</td> </tr> </table> </p> </card></wml>

Şekil 1-14

Örneğimizde “columns” özelliğinin hala “2” olduğuna dikkat edin. Tablomuzda 3 satır olmasına rağmen, 2 sütun olduğu için bu atama doğru olacaktır. Pekiii…Diyelim ki bu isimlerin sola dayalı yazılmasını değil de ortaya hizalanmasını, hatta sağa yaslanmasını istiyoruz. İşte burada “table” elemanının “align” özelliği yardımımıza koşuyor. Bizim belirlediğimiz şekilde yazı istediğimiz tarafa yaslanarak görüntülenir. “align” özelliği aşağıdaki üç değerden birini alır;

L : Sola dayalı (Varsayılan değer budur)C : Ortalanmış

R : Sağa dayalı

Şimdi farzedelim ki 2 satırdan – 3 sütundan oluşan bir tablomuz var. Bizim ayarlayacağımız “align” özelliği tabii ki sütunlar için geçerli olacaktır. Peki biz ilk sütundaki yazılar sola, ikincisindekiler ortaya, üçüncüsündekiler sağa dayalı olsun istersek ne yapmalıyız? Yapmamız gereken şey aynen şu; “ align=”LCR” ” yazmak...Veya sadece üçüncü satır sağa dayalı olsun istersek “align=”LLR” ” yazmalıyız. Yani her sütun için bir harf ataması yapmalıyız. Kafanız karıştıysa telaşlanmayın, deneme yanılma yöntemiyle olayı daha iyi algılayacaksınız. Lütfen yazdığımız örnekler üzerinde oynamalar yaparak sizler de denemeler yapın. Şu örneği inceleyin:

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="card1" title="Tablolar"> <p> <table columns=”3” align=”LCR”> <tr> <td>Açıl</td> <td>susam</td> <td>açıııl</td> </tr> <tr> <td>Kapan</td> <td>susam</td> <td>kapaan</td> </tr> </table> </p> </card> </wml>

Şekil 1-15

Gördüğünüz gibi yazdığımız harfler (LCR) sırasıyla sütunlardaki yazıları hizalamıştır. Ayrıca tablomuzda üç sütun olduğu için “columns“ özelliğine “3” yazdık. Aksi takdirde ilginç sonuçlar elde edebilirdik. İsterseniz bu özelliğe “2” yazın ve bir deneyin…

Bir konuyu sizlere tekrar hatırlatmak istiyorum. Aşağıdaki yapıyı inceleyin;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="card1" title="Tablolar"> <p> <table columns=”1” align=”LCR”> <tr> <td> <table columns=”1”> <tr> <td>vs vs…</td> </tr> </table> </td> </tr> </table> </p> </card></wml>

Yukarıdaki yapı iç içe geçmiş tablo (nested) yapısıdır ve HTML’de gayet güzel çalışır, fakat WML bu yapıyı desteklemez ve hata uyarısı verir. Daha önce HTML kullanmışsanız bunun gibi birkaç ufak tefek noktaya dikkat etmeniz gerekecektir.

<img /> elemanı

“Her şey iyi güzel deee, şuraya bir resim koyamayacak mıyız?” diye sorduğunuzu duyar gibi oluyorum. “<img/>” elemanı tam sizin aradığınız eleman, üstelik kullanması bedava .Yalnız bu elemanı kullanırken dikkat etmeniz gereken birkaç husus var;

<img/> elemanının “src” özelliğini mutlaka tanımlamalısınız. Bu özelliğe vereceğiniz değer, resmin bulunduğu yol ve dosya ismi olmalı. Bu adres tam bir yol adresi olabileceği gibi (D:/WAP/resimler/guvenlik.wbmp) , göreceli bir adres de olabilir. Mesela resmin bulunduğu WML dosyamızın ismi “resimli.wml” olsun ve “ D:/WAP/” klasörünün altında olsun. Resim ise “D:/WAP/resimler/” klasörü altındaki “guvenlik.wbmp” adlı bir dosya olsun. Göreceli adresi belirlemek için src=”resimler/guvenlik.wbmp” ifadesi yazılmalıdır.<img/> elemanının “alt” özelliğini belirlemelisiniz. Bu özellik bir hata oluştuğunda veya resim dosyası bulunamadığında ekrana onun yerine çıkacak yazıyı belirler.Sonuncu ve aslında en önemli özellik , WML sayfalarında desteklenen resim formatıyla ilgili. HTML sayfalarında bir çok farklı resim formatı desteklenmekte olduğundan resmin “.gif”, “.bmp”, “.jpg” gibi formatlarda olması fark etmiyordu. Fakat WML sayfalarında resmin türünün “.wbmp” olması lazım. Bu formatta resim hazırlayan programları internette bulabilirsiniz. Aslına bakarsanız, yeni çıkan telefonların WAP tarayıcıları “gif”, “jpg” vs… gibi resim formatlarını destekleyebilmektedir. Fakat biz sayfalarımızın olabildiğince geniş bir kitle tarafından görüntülenmesini istediğimize göre, şimdilik “wbmp” formatıyla bir süre daha idare etmeliyiz.

Sıra geldi minik örneğimize; <?xml version="1.0" encoding='ISO-8859-9'?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="card1" title="Resim"> <p> <img src=”../resimler/guvenlik.wbmp” alt=”güvenlik”/> Hooop, nereye?! </p> </card> </wml>

Şekil 1-16

İşte karşınızda sanal güvenlik görevlisi, bizi tehlikelerden korumaya hazır vaziyette bekliyor.

Size resimleri sayfanızda kullanmadan önce bir kere daha düşünmenizi tavsiye ederim. Çok gerekli değilse resim kullanmamaya özen gösterin. Çünkü bu, sayfanızın yavaş yüklenmesine sebep olacaktır, bu da hem sayfayı açmaya çalışan kullanıcıyı rahatsız edecek hem de bağlantı maliyetini artıracaktır.

BAĞLANTI (LİNK) ELEMANLARI

Bağlantı elemanları (link), farklı WML kartları arasında gezinmemizi sağlar. Sayfadaki bağlantıyı seçtiğiniz zaman aynı veya farklı bir destedeki kartı görüntüleyebiliriz.Bağlantıyı yaratmak için “<anchor>” elemanı kullanılır. “<anchor>…</anchor>” etiketleri arasında bizim bağlantımız oluşturacak bazı elemanlar mevcuttur. Bu elemanlar aşağıda listelenmiştir ;<go /> : Bu elemanın “href” özelliğine atayacağımız değerle, istediğimiz WML sayfasına ve kartına ulaşmamız mümkündür. Kullanımı aşağıdaki gibidir. <anchor> <go href="..." />… </anchor>

“href” özelliğine atayacağımız değer, görüntülemek istediğimiz sayfanın URI adresi olmalıdır. Bu tam bir adres olabileceği gibi göreceli bir adres de olabilir. Meraklanmayın, birazdan örnekle daha iyi anlayacaksınız…<prev /> : Bu eleman, en son görüntülenen sayfaya bağlantı oluşturur. <refresh /> : Sayfayı WAP tarayıcısına tekrar yükler. Böylece sayfadaki olası değişiklikleri görüntülememizi sağlar. Borsayı düşünün, bilgilerin sürekli güncellenmesi gereklidir, bu özellik

sayesinde sayfamızı yeniden yüklemeye imkan verirsek kullanıcıyı büyük hatalar yapmaktan kurtarmış oluruz…

Aynı Destedeki Elemanlara Ulaşma- <anchor> elemanı

Hatırlarsanız WML sayfasında bir deste içinde birden fazla kart olabiliyordu- ki gerçek hayattaki iskambil kağıtlarında da durum farklı değildir. Fakat bir WML sayfasında birden fazla deste bulunamıyordu. Şu ana kadarki örneklerimizde sayfa içinde sadece bir kart kullandık. Fakat az önce bağlantılar oluşturmayı öğrendiğimize göre, destemize yeni kartlar eklemenin ve bu kartları da dolaşmaya başlamanın tam zamanıdır. Hem aynı destedeki diğer kartlara ulaşmak, bize hız ve maliyet açısından büyük avantaj sağlar, çünkü destenin kendisi zaten yüklenmiştir, yani kartlarımızın hepsi cep telefonumuzda yüklüdür, bu nedenle sunucuya bir daha bağlanmamıza ve veri transfer etmemize gerek kalmadığından, hem maliyet düşer, hem de kart çok çabuk yüklenir. Fakat bu, bütün kartları aynı desteye sokalım ve sadece bir wml sayfası oluşturalım anlamına gelmez. WML sayfamızın (destemizin) çok büyük olması, çok geç yüklenmesine sebep olabilir. Bu nedenle uymamız gereken bazı optimizasyon kuralları vardır, bunları daha sonra öğreneceğiz.

Lütfen örneği inceleyin;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="anasayfa" title="TATLI TARİFLERİ"> <p>

Burada tatlı tarifleri bulabilirsiniz... <br/>

<anchor> <go href="#sutlac"/>Sütlaç </anchor> <br/> <anchor> <go href="#kazandibi"/>Kazandibi </anchor> <br/> <anchor> <go href="#keskul"/>Keşkül </anchor>

</p> </card> <card id="sutlac" title=”SÜTLAÇ”>

<p> Sütlacı yapmak için 2 yemek kaşığı tuzu biberlerle yoğurduktan sonra.... .... <br/> <anchor>

<go href="#anasayfa"/>Anasayfa </anchor> </p>

</card> <card id="kazandibi" title=”KAZANDİBİ”>

<p>

Kazandibini yapmak çok basittir.Şöyleki;.... .... <br/> <anchor>

<prev/>Anasayfa </anchor> </p>

</card> <card id="keskul" title=”KEŞKÜL”>

<p> Keskul enfes bir tatlı olup, yapımı... .... <br/> <anchor>

<go href="#anasayfa"/>Anasayfa </anchor> </p>

</card></wml>

Vay bee, gerçekten kocaman bir sayfamız oldu…Artık profesyoneller olduğumuza göre, buna şaşırmamak lazım… Aslında sayfamız gayet basit, birazdan bunu siz de fark edeceksiniz. Şimdi sayfamızı minik parçalar halinde inceleyelim, önce ilk kartımızdan başlayalım;

<card id="anasayfa" title="TATLI TARİFLERİ"> <p>


<anchor> <go href="#sutlac"/>Sütlaç </anchor> <br/> <anchor> <go href="#kazandibi"/>Kazandibi </anchor> <br/> <anchor> <go href="#keskul"/>Keşkül </anchor>

</p> </card>

Bu kartın ismi “anasayfa” (“card” elemanın “id” değeri), ve başlığımız “TATLI TARİFLERİ”, sayfamızda daha önce öğrenmediğimiz hiçbir yapı yok, her zamanki gibi <card>…</card> etiketleri arasında bir takım elemanlar var, bunların en kökündeki eleman <p> elemanı, sonra birkaç kesme ve bağlantı elemanı var, hepsi bu…Ne kadar basit olduğunu siz de görüyorsunuz, değil mi?Aşağıda kartın ekrandaki görüntüsü var;

Şekil 1-17

Hmmm, leziz bir ekran bu…Şimdi de <anchor> elemanının kullanım şeklini inceleyelim;

<anchor> <go href="#sutlac"/>Sütlaç </anchor>

<go> elemanın “href” özelliğine , gitmek istediğimiz kartın adını girmeden önce, “#” karakterini yazmalıyız. Eger destemizde “sutlac” isminde bir kart tanımlamamışsak, bu hataya yol açacaktır.Bir şey dikkatinizi çekti mi? <go> elemanından sonra yazdığımız yazı, yani “Sütlaç”, altı çizili olarak ekranda görünüyor. Bu size internet sayfalarından tanıdık gelecektir. Hani tıkladığınızda bambaşka dünyalara gittiğiniz o bağlantılar var ya, işte aynen onlardan birini şu an telefonumuzda görmekteyiz. Burada “tıklama” gibi bir olay olmadığı için, biz telefonumuzun yön tuşlarıyla bağlantının üzerine gelip onu işaretlediğimizde gideceğimiz dünyanın ismi “sutlac”, ve bizi orada bekleyen şey ise sütlaçın nasıl yapıldığına dair bir tarif (Siz sakın benim tarifimle sütlaç yapmaya kalkmayın!).Yine “anasayfa” kartımızın içinde başka bağlantılar da var ve bunlar da bizi kazandibi ve keşkül tariflerinin yapıldığı “kazandibi” ve “keskul” kartlarına götürüyorlar. Böylece ilk kartımızı incelemeyi tamamladık…Sıra ikinci kartımız olan “sutlac” kartında;

<card id="sutlac" title=”SÜTLAÇ”> <p>

Sütlacı yapmak için 2 yemek kaşığı tuzu biberlerle yoğurduktan sonra.... .... <br/> <anchor> <go href="#anasayfa"/>Anasayfa </anchor>

</p> </card>

Şekil 1-18

Bu kartta sütlacı yapmak için gayet yanlış bir tariften sonra, kesme (<br/>) etiketi ve bir bağlantı kullanılmış. Bağlantıyı seçtiğimizde anasayfa kartına geri dönüyoruz.Sıra üçüncü kartımızda;

<card id="kazandibi" title=”KAZANDİBİ”> <p>

Kazandibini yapmak çok basittir.Şöyleki;.... .... <br/> <anchor> <prev/>Anasayfa </anchor>

</p> </card>

Şekil 1-19

Bu kartta anasayfaya ulaşmak için <go> elemanı yerine “<prev/>” elemanından faydalanmışız. Hatırlarsanız bu eleman WAP tarayıcıda görüntülenen bir önceki sayfaya bir bağlantıydı. Biz bu karta sadece anasayfadan ulaşabildiğimize göre <prev/> elemanı anasayfaya geri dönecektir.

Dördüncü kartımız olan “keskul” kartımız da, “sutlac” kartımızla aynı yapıya sahip. Bu nedenle onu incelemeyi size bırakıyorum.

Gördüğünüz gibi, bu kadar kod, aslında parça parça incelediğiniz zaman çok basit, sizler başka zamanlarda da zor görünen kodları mantıklı parçalara bölerek incelemeyi deneyin, böylece işiniz oldukça kolaylaşacaktır.

Farklı Destelerdeki Elemanlara Ulaşma

Ulaşmak istediğiniz kart, farklı bir WML sayfasında olabilir. Bu bağlantıyı sağlamak, aynı destedeki karta ulaşmaktan daha zor değildir. Lütfen aşağıdaki sayfayı inceleyin ve sayfa1.wml ismiyle kaydedin;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="anasayfa" title="TATLI TARİFLERİ"> <p>


<anchor> <go href="sayfa2.wml#sutlac"/>Sütlaç

</anchor> </p> </card></wml>

Bu bizim ilk sayfamızdı, sadece bir karttan oluşuyor. Burada “href” özelliğine atadığımız değere dikkat edin; “sayfa2.wml#sutlac”. Bunun anlamı, ‘git, sayfa2.wml adlı dosyadaki “sutlac” isimli kartı bul getir’, demek.Şimdi sayfa2.wml dosyasını da hazırlayalım;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="sutlac" title="SÜTLAÇ"> <p>

Sütlacın yapımında dikkat etmemiz gereken temel husus vs vs… <br/>

<anchor> <go href="sayfa1.wml#anasayfa"/>Anasayfa

</anchor> </p> </card></wml>

Bu da basit bir WML sayfası ve bir karttan oluşuyor; ”sutlac” kartı. Burada da anasayfaya dönmek için bir bağlantı koymuşuz, “href“ özelliğine “sayfa1.wml#anasayfa” değerini vererek, “sayfa1.wml” dosyasındaki “anasayfa” isimli karta ulaşmak istediğimizi belirtmişiz.

Aşağıda bu sayfaların ekran görüntüleri var;

Bağlantıyı seçtikten sonra Şekil 1-20 Şekil 1-21

Gittikçe gelişiyoruz, değil mi? Baksanıza, kartlar arasında, hatta sayfalar arasında geçişler yapmaya başladık… Galiba biz bu işin üstesinden geleceğiz . Bu arada minik bir bilgi; eğer “href“ özelliğine sadece dosya ismi yazarsak (deneme.wml gibi) ve kart ismi belirtmezsek, WAP tarayıcısı otomatik olarak bu dosyanın ilk kartını ekranda görüntüler.

<a> elemanı

<a> elemanı da, bağlantılar oluşturmaya yarar (HTML bilgisi olanlarınız gittikçe şaşırıyor olmalı, çünkü kullanılan elemanlar hemen hemen aynı, üstelik kullanım şekilleri de öyle).

<anchor> <go href="#trafik">Trafik bilgilerini görüntüle </anchor>

şeklinde oluşturulan bir bağlantı, aşağıdaki şekilde de yazılabilir;

<a href="#trafik">Trafik bilgilerini görüntüle</a>

Aslında ben ikinci yazımı daha pratik olması bakımından tercih ediyorum, siz de kendi tercihinizi yapabilirsiniz. Fakat bir şeyi açıklayalım, <a> elemanı sadece bu gibi bir bağlantı oluşturmada <go> elemanının yerini alabilir, yani her zaman <go> elemanı yerine <a> elemanını kullanabilirim gibi bir fikre kapılmayın. İlerde “<go>” bize çok lazım olacak…Aşağıda bu elemanın örneklendirilmiş hali var;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="anasayfa" title="'a' elemanı"> <p>

...yağışlı bir hava bekleniyor... <br/><a href="#trafik">Trafik bilgilerini görüntüle</a>

</p> </card>

<card id="trafik" title="Trafik Bilgileri"> <p>

...civarında yapılan yol çalışmaları nedeniyle yoğun bir trafik...<br/><a href="#anasayfa">Anasayfa</a>

</p> </card></wml>

Gördüğünüz gibi iki karttan oluşan sayfamızda trafik bilgilerini sunduğumuz “trafik” kartına bağlantıyı <a> elemanını kullanarak yapmışız, “trafik” kartında da anasayfaya bağlantıyı yine aynı elemanla gerçekleştirmişiz.

Sayfalarımızın görüntüleri ise şöyle;

Bağlantıyı seçtikten sonra Şekil 1-22 Şekil 1-23

Resimli Bağlantılar Oluşturma

İnternetteki sayfalardan da bildiğiniz gibi, bağlantılar sadece yazıyla oluşturulmuyor. Bir resme tıkladığınız zaman da başka sayfalara gidebiliyorsunuz. Bu gibi bir özellik WML sayfalarında da desteklenmektedir. Aşağıdaki örneği inceleyin;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="anasayfa" title="Resimli bağlantılar"> <p>

Mistik dünyanın derinliklerineresmi seçerek girebilirsin...<br/>

</p><p align="center">

<a href="zen.wml#zen_dunyasi"><img src="zen.wbmp" alt="zen" /></a></p>

</card></wml>

Gördüğünüz gibi <a> ve </a> etiketleri arasında bu defa yazı yerine bir resim elemanı (<img>) yerleştirdik. Bunu ayrı bir <p>…</p> bloğunun içine koymamızın nedeni daha güzel bir görüntü elde etmek, dikkat ederseniz ikinci <p> bloğunu ortaya hizalanacak şekilde ayarladık, bu nedenle resmimiz de ekranda ortalanmış vaziyette. Artık bizim de resimli bir bağlantımız var, aşağıda sayfayı görebilirsiniz;

Şekil 1-24

Resmin etrafında gördüğünüz mavi kare, resmin bir bağlantı olduğunu gösterir. Bu çizgileri WAP tarayıcımız otomatik çizmiştir, ve telefondan telefona bu çizgilerin rengi değişebilir. Hatta hiç çizgi olmayabilir bile…

Cep Telefonunun Tuşlarına Görevler Tanımlama

WML’deki <do> elemanı, cep telefonunuzun belirli bir arayüz elemanına (mesela tuş) görev atamakta kullanılır. Görev, kullanıcı bu arayüz elemanını harekete geçirirse gerçekleştirilir. Bu arayüz elemanı cep telefonunuzun bir tuşu olabileceği gibi, sesle aktif olan bir komut da olabilir.Şimdi <do> elemanını daha yakından inceleyelim…

<do> elemanı

Telefonunuzda bazı tuşlar menüyü açar, bazıları bir önceki ekrana geri döner, örneğin bizim simülatör programımızda soldaki tuşla “Options” (Seçenekler) menüsüne ulaşıyoruz, sağdaki tuşla “Back” (Geri) bir önce görüntülenen sayfaya ulaşıyoruz. Hatırlarsanız biz kendimiz de <prev/> elemanıyla bir önceki sayfaya ulaşabiliyorduk. Bir başka deyişle telefon, bir önceki sayfayı görüntüleme ihtiyacımıza cevap verecek bir tuşa zaten sahip. Genelde telefonlarda böyle bir tuş vardır, ya da menüde bir yerde bir önceki sayfaya gitmek için bir seçenek bulunur.Peki bunları neden anlattım? Az önce telefonumuzun tuşlarını programlayabileceğimizden, onlara özel görevler atayabileceğimizden bahsetmiştik. Yani mesela ben “Back”(Geri) tuşuna bastığımda özel bir sayfayı açsın bana… Hatta orada “Back” yazısını da görmek istemiyorum. Mesela “Git” yazsın. Bunu nasıl yaparız? Tabii ki <do> elemanı yardımıyla. Şimdi aşağıdaki örneği inceleyelim;


<wml> <card id="anasayfa" title="'do' elemanı"> <do type="prev" label="git" name="git"> <go href="#gizli" /> </do> <p> Asla gizli sayfama ulaşamayacaksııın!!! </p> </card> <card id="gizli" title="Gizli Sayfa"> <p> Hayıııırr!!! Burayı görmemeliydin!!! Buradaki hazineler beniiimm!!! </p> </card></wml>

Dikkat ettiyseniz yukarıda bizden saklanmaya çalışan sayfaya ulaşmak için herhangi bir bağlantı tanımlamamışız (<do> elemanının içindeki hariç, ama o da ekranda görüntülenmeyecek zaten). Siz de benim gibi o sayfaya girmek ve içindeki her şeyi görmek istiyorsunuz değil mi? Aşağıdaki ekran görüntülerini inceleyin;

Ve tuşa basınca Şekil 1-25 Şekil 1-26

Sanki çok hazinesi varmış gibi… Burası bizim mekanımız, kimse bizden bir şey saklayamaz

Yukarıdaki şekilde gördüğünüz gibi “Gizli Sayfa” ya ulaşmak için normal bir bağlantı yok, bu sayfaya girmek için tek yol ekranın sağ altındaki “git” tuşuna basmak. Fakat “Gizli Sayfa”da dikkat ettiyseniz tuş yine eskisi gibi, ve “Back” yazıyor. Bunun çok basit bir nedeni var, kodumuzda <do> elemanını sadece birinci kartta (“anasayfa” kartı) tanımlamışız, bu nedenle ikinci sayfada bu fonksiyon ortadan kayboluyor.

Şimdi kodumuzu daha yakından inceleyelim;

<do type="prev" label="git" name="git"> <go href="#gizli" /> </do>

Sizin de fark ettiğiniz gibi <do> elemanına ait bazı özellikler tanımlamışız. Bunları kısaca tanıyalım;

“name” özelliği: Bu özellik “id” özelliği gibidir. <do> elemanına ait tekil bir isim verilmesi gerekir, yani bu özelliğe verdiğiniz ismi başka bir elemana vermemelisiniz.“label” özelliği: Bu özelliğe verdiğiniz değer ekranda gözükecek yazı olacaktır. 6 karakter veya daha az olacak şekilde adlandırmanızda fayda vardır.“type” özelliği: Bu özelliğe verdiğiniz değer sayesinde WAP tarayıcısı sizin etiketinizi nereye yerleştirmek istediğinizi, ne yapmaya çalıştığınızı anlayacaktır. Bizim örneğimizde biz “type” özelliğine “prev” ( bir önce görüntülenen sayfa ) değerini verdik-ki bu da telefonumuzdaki “Back” tuşuna karşılık geliyordu. Bunu WAP tarayıcısı şöye algıladı; “Benim telefonumda ‘Back’ tuşu var mı? Var… O zaman bu programı yazan adam bu tuşun işlevini değiştirmek istiyor, hatta bu adam tuşun ismini de değiştirmek istiyor! Yaa ne gerek var şimdi?! Ama yapacağız mecbur… ”. İşte görüyorsunuz, bu zavallı WAP tarayıcıları sabah akşam dinlenmek nedir bilmeden çalışıyorlar…

“type“ özelliğine verilebilecek değerler aşağıda sıralanmışır;

1. “accept” : Kullanıcının herhangi bir tür aksiyonu kabul edebilmesi için bastığı tuştur. Bu telefonlarda genelde sol tarafta duran tuş olur. Mesela bizim simülatörümüzde “Options” tuşuna basınca bütün “accept” elemanları gözükür, ama bazı telefonlarda sadece sol tuşa basmak yeterlidir, bir başka deyişle bu telefondan telefona farklılık gösterir.

2. “prev”: Az önce de bahsettiğimiz gibi, bu değer telefonda bir önceki sayfayı görüntülemek üzere ayarlanmış tuşa karşılık gelir. Bizim simülatörümüzde bu sağdaki tuştur.

3. “options”: Seçenekler menüsüne ulaşmak için tuşa bastığımızda, bütün seçenek elemanları (opsiyonlar) karşımıza gelecektir. Bu değeri kullandığımız zaman, bizim istediğimiz aksiyon seçenekler menüsünde karşımıza gelecektir. Birazdan bununla ilgili örnekler de yapacağız.

Yukarıdaki değerler, en sık kullanılanlardı. Fakat bunlardan başka değerler de kullanmak mümkündür. Aşağıda bunlar listelenmiştir;

4. “help” : Yardım menüsüne ulaşmak için kullandığımız tuş veya aksiyondur.5. “reset” : Bir olayı temizlemek veya baştaki haline getirmek için kullandığımız tuş veya

aksiyondur.6. “delete” : Bir nesne veya menüyü silmek için kullanılan tuş veya aksiyondur.7. “unknown” : Görevin WAP tarayıcı tarafından herhangi bir tuş ya da aksiyona atanabileceği

anlamına gelir.

“optional” özelliği : Bu özelliğe “true” değerini atadığınız takdirde WAP tarayıcısı <do> elemanını görmezlikten gelebilir. Bu özelliğin varsayılan değeri “false” dır.

Böylece <do> elemanına ait özellikleri öğrendik, aslında bu elemanın (ve daha önceki elemanların ) başka özellikleri de var, fakat bunlar bize lazım değil- en azından şimdilik…Şimdi <do> elemanının etiketleri arasına yazmış olduğumuz <go> elemanını hatırlarsanız daha önce öğrenmiştik, istediğimiz WML kartına bu elemanla ulaşabiliyorduk. Bu elemanın buradaki görevi de aynı, bizi bir karta ulaştırmak.

<do> elemanının içine başka elemanlar da yerleştirilebilir;

<prev />: Bir önceki sayfayı gösterir.<refresh /> : Sayfayı yeniden yükler.<noop /> : Hiçbir şey yapılmaması anlamına gelir, bu elemanı daha sonra da inceleyeceğiz.

<do> elemanıyla ilgili başka bir örnek yapalım;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="anasayfa" title="Masal Dünyası"> <do name="m1" type="accept" label="Pamuk Prenses"> <go href="#pp"/> </do> <do name="m2" type="accept" label="Hansel ve Gretel"> <go href="#hg"/> </do> <do name="geri" type="prev" label="Geri"> <prev/> </do> <p> Masal dünyasına hoşgeldiniz..

<br/> Masalları görmek için seçeneklere giriniz...

</p> </card> <card id="pp" title="Pamuk Prenses"> <p> Pamuk prenses bir gün yedi cücelerle... </p> </card> <card id="hg" title="Hansel ve Gretel"> <p> Hansel ve Gretel cadının evine... </p> </card></wml>

Evet, yukarıdaki kodumuzda toplam 3 kartımız var, bunlardan ilkinin adı (id’si) “anasayfa”, ikincisinin adı “pp” (‘Pamuk Prenses’i kısalttım), üçüncüsünün adı ise “hg”(‘Hansel ve Gretel’i kısalttım). Sadece ilk kartta <do> elemanları tanımlamışım ve bunlardan ikisinin “type” özelliklerine “accept” değeri atamışım. Bu demek oluyor ki bizim simülatörümüzde “Options” tuşuna bastığım zaman bu seçenekler karşıma gelecek. Aslında “type” özelliğine “options” değeri atasam aynı anlama gelmez miydi? Evet, bizim simülatörümüz için aynı anlama gelirdi, ama daha önce söylendiği gibi, bu telefondan telefona değişiyordu.

Bakalım ekranımızda nasıl görünüyormuş;

Şekil 1-27 Şekil 1-28 Şekil 1-29

Şekil 1-27’de gördüğünüz gibi, anasayfamızda masallarla ilgili bir bağlantı bulunmamakta. Fakat biz “Options” tuşuna bastığımızda daha önce <do> elemanı yardımıyla tanımladığımız seçenekler karşımıza çıkıyor (Şekil 1-28), ve biz bunlardan birini seçtiğimizde (biz burada Pamuk Prenses’i seçmişiz) bu masalın anlatıldığı sayfaya ulaşıyoruz (Şekil 1-29).Yine Şekil 1-27 ‘de dikkat ederseniz “Back” yerine “Geri” yazıyor, bu tuşun normaldeki işlevi olan bir önceki sayfayı açma fonksiyonunu değiştirmiyoruz, <prev/> elemanı zaten aynı işlevi yerine getiriyor, yani bu simülatör için sadece ekranda yazan yazıyı Türkçeleştiriyoruz, hepsi bu. Fakat başka simülatörlerde tepki farklı olabilir, mesela bazı simülatörlerde “Geri” yazısını menüde görmeniz mümkün olacaktır, daha önce dediğimiz gibi, bu tepki telefondan telefona değişir.

<template> elemanı

Şimdi oldukça kullanışlı bir elemanı öğreneceğiz. <template> elemanı <do> ve <onevent> elemanlarını destedeki her kart için geçerli kılmaya yarar (<onevent> elemanını daha sonra işleyeceğiz). “Bu ne demek şimdi?” diye düşündüğünüzü biliyorum, merak etmeyin, birazdan her şey aydınlığa kavuşacak…Hani internet sayfalarında olur ya, sol tarafa menüler koyarlar, veya üstte menüler olur, hangi sayfayı açarsanız açın bu menüleri görürsünüz, çünkü bu menüler sayesinde sitedeki diğer sayfaları dolaşmanız kolaylaşır. İşte buna benzer bir yapı kurmak WAP sayfalarında da mümkündür. Bu yapıyı nasıl kurarız diye biraz düşününce, sizin de kafanızda bir şeylerin canlanacağını sanıyorum. Zaten biz şimdiden menü oluşturmayı biliyoruz, hatırlarsanız bir önceki konuda “Pamuk Prenses” ve “Hansel ve Gretel” başlıklarını menüde görüntülemiştik. Fakat bunlar sadece “anasayfa” kartındaki menüde görüntülenebiliyordu. Bizim bunu her karttan görüntüleyebilmemiz için ne yapmamız lazım? Cevabı zaten biliyorsunuz değil mi? Her karta aynı <do> elemanlarını eklersek, her kartta aynı menüyü görüntüleyebiliriz.

<card id="card1"> <do name="a1" type="accept" label="bağlantı1"> <go href="bağlantı1.wml"/> </do> <do name="a2" type="accept" label="bağlantı2"> <go href="bağlant2.wml"/> </do> ...</card>

<card id="card2"> <do name="a1" type="accept" label="bağlantı1"> <go href="bağlantı1.wml"/> </do> <do name="a2" type="accept" label="bağlantı2"> <go href="bağlantı2.wml"/> </do> ...</card> …

Gördüğünüz gibi hem “card1” kartında, hem “card2” kartında aynı <do> elemanları ve aynı bağlantılar konulmuştur, ve bunları menüde görmek mümkündür. Fakat burada hem kodumuzdaki satır miktarı artmış, hem fazla kod yüklendiği için bağlantı maliyeti artmıştır.

WML bize böyle menüler oluşturmak için daha güzel bir imkan tanımıştır, tabiri yerindeyse “kıyak yapmıştır”.

Aşağıdaki örneği inceleyin;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <template> <do type="prev" label="Geri" name="geri"> <prev/> </do>

<do type="accept" label="Sayfa 1" name="sayfa1"> <go href="#sayfa1"/> </do> <do type="accept" label="Sayfa 2" name="sayfa2"> <go href="#sayfa2"/> </do> <do type="accept" label="Sayfa 3" name="sayfa3"> <go href="#sayfa3"/> </do>

</template> <card id="sayfa1" title="Sayfa 1"> <p>

İlk sayfa bu... <br/>

<a href="#sayfa2">İkinci sayfaya git</a> </p> </card> <card id="sayfa2" title="Sayfa 2"> <p>

Burası da ikinci sayfa... <br/>

<a href="#sayfa3">Üçüncü sayfaya git</a> </p>

</card> <card id="sayfa3" title="Sayfa 3"> <p> Burası son durak... </p> </card></wml> Şimdi çok şaşıracaksınız işte… Bu elemanın ne kadar kullanışlı olduğunu kullanmadan bilemezsiniz, <template> elemanında dört tane <do> elemanı tanımlamışız, bunlardan ilki simülatörümüzdeki “Back” yazısını “Geri” yazısıyla değiştirmek amaçlı, diğer üçü ise daha önceden bildiğiniz gibi menüde görüntülenecek bağlantılar. Peki bu işlevler hangi sayfada görüntülenecek sizce? Yani, “Geri” yazısını ve menüleri hangi kartta göreceğiz? Cevap; hepsinde ! Sizce de harika değil mi?Şimdi kodumuzu nasıl işlediğimize bakalım, gördüğünüz gibi <template> elemanını herhangi bir <card> elemanının içine gömmemişiz, kök eleman olan <wml> elemanın içine yerleştirilmiş durumda. Ve içinde dört tane <do> elemanı tanımladığımızı az önce de belirtmiştik- ki bu elemanı siz daha önce öğrendiniz. <template> ilgili yazacak başka bir şey de yok, gerçekten kullanması çok basit, ve işlevi harika, şimdi aşağıda ekran görüntülerine bir göz atalım;


Yukarıdaki şekillerde dikkat ederseniz bütün ekranlarda “Back” tuşunun yazısı “Geri” yazısıyla değişmiş.

Şekil 1-33

Ve sürpriizz, yukarıdaki menüye tüm ekranlardan ulaşabiliyoruz, işte mükemmel bir navigasyon sistemi…

OLAYLAR (EVENTS)

Olaylar (events), çok basit bir mantığa göre çalışır, siz dersiniz ki; “Akşam 20:30’a saatimi kurayım ki randevumu unutmayayım.” ve saatinizi kurarsınız. Akşam saatiniz çalar ve siz hazırlanmaya başlarsınız. Gördüğünüz gibi, önceden bir olay kurguluyorsunuz ve neticesinde bir şeyler yapıyorsunuz , “şöyle bir durum oluştuğu zaman böyle bir tepki ver” diyorsunuz. İşte size “olay”ın tanımı…

WML’de de bazı olay çeşitleri tanımlanmıştır, mesela az önceki örneğimizdeki gibi, WML’de de saatimizi kurmak mümkündür, yani sizin şöyle bir durum kurgulamanıza olanak vardır; “Adam bu sayfaya girdikten 5 saniye sonra onu otomatikmen başka bir sayfaya götüreyim.”. Sizce de mükemmel değil mi? Şimdi de bunu nasıl yapacağımızı öğrenelim…

<onevent> elemanı

WML de olaylar <onevent> elemanı sayesinde tanımlanır. Desteklenen dört çeşit olay vardır;ontimer : Bir zaman sayacının kurulu olduğu süre dolduğunda meydana gelir. Mesela 10 saniye sonraya kurarsanız olay 10 saniye sonra tetiklenir.onenterbackward : WAP tarayıcısında bir önceki ekrana dönüş yapıldığında tetiklenir. Mesela “Back” tuşuna basarak bir önceki sayfaya döndüğünüzde bu olay meydana gelir.onenterforward : Yeni bir sayfaya girdiğinizde meydana gelir. Mesela bir bağlantıya tıklayarak bir sayfaya girerseniz bu olay tetiklenir.onpick : Seçim listesinden bir seçenek işaretlendiğinde meydana gelir. Mesela menüden bir bağlantıyı tıkladığınızda bu olay tetiklenir.

Bunlar <onevent> elemanının “type” özelliğine atanarak kullanılır.Olay neticesinde tetiklenebilecek durumlar şunlardır;<go /><prev /><refresh /><noop />

Yukarıdaki elemanları daha önceden tanıyoruz, birazdan örneklemelerle daha iyi anlayacaksınız.

Şimdi daha derine inelim…

Zamanlayıcı ve ontimer olayı

“ontimer“ olayı <timer /> elemanıyla birlikte kullanılır. Bu elemanın “value” özelliğine verdiğiniz değer planladığınız zaman peryodunu gösterir. Zaman birimi olarak saniyenin onda birini (1/10sn) kabul eder. Aşağıda örnek bir kullanımını görebilirsiniz;

<timer value=”10” />

Yukarıdaki gibi bir yazım zamanlayıcıyı tam 1 saniye sonra çalışmak üzere kurmuştur. İşte tam bu zamanlayıcının kurulu olduğu süre dolduğunda bizim “ontimer” olayımız sahneye çıkar ve kendisinden istenen kodları çalıştırır.

İnsanlara güncel haberleri veren bir sayfanız olduğunu farzedin, dünyada dakika başı ilginç bir olay meydana geldiğini düşünürsek, sayfanızın son gelişmeleri de kullanıcılara gösterebilmesi için böyle bir zamanlayıcıya ihtiyacınız olabilir. Veya borsadaki anlık bilgileri kullanıcılara gösterebilmeniz için sayfanızın durmadan kendini yenilemesi gerekir ki, bu da ancak zamanlayıcı ile yapılabilir. Aslında zamanlayıcının kullanımı konusunda bir kısıtlama yoktur, sadece hayal gücünüzü kullanın…

Aşağıdaki örnek aydınlatıcı olacaktır;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="giris"> <onevent type="ontimer"> <go href="#anasayfa" /> </onevent> <timer value="30" /> <p align="center"> <img src="../resimler/logo.wbmp" alt="logo" /> </p> </card> <card id="anasayfa" title="Hoşgeldiniz"> <p> WAP hakkında bilgi mi edinmek istiyorsunuz? Peki o zaman... </p> </card></wml>

Gerçi yukarıda neler olduğunu anladığınızı tahmin ediyorum, ama yine de dayanamayıp anlatacağım; ilk kartımız “giris” kartı, ve içinde demindendir anlatıp da bir türlü örnekleyemediğimiz <onevent> elemanı var, yani birazdan bir “olay” olacağı kesin ! <onevent> elemanının “type” özelliğine verdiğimiz değer ise “ontimer”, demek ki kodumuzun bir yerlerinde <timer /> elemanını da kullanmış olmalıyız. Biraz inceleyince hemen iki satır altında olduğunu görüyoruz, ve “value” özelliğine verdiğimiz değere bakılırsa zamanlayıcı 3 saniye sonrasına kurulmuş. Zamanlayıcının tetiklediği olay şu; “Başka bir sayfaya gitmek”, bunu da <onevent> elemanına gömdüğümüz <go> elemanıyla sağlıyoruz. Gerisi ise rutin kodlar…Aşağıda ekran görüntülerini görebilirsiniz;

3 sn sonra Şekil 1-34 Şekil 1-35

Önce resmimiz ekranda beliriyor, 3 saniye görüntülendikten sonra anasayfamıza gidiyoruz. Sizin için tüm yaratıcılığımı kullanarak bir logo bile hazırladım, kıymetinizi bilin…

Şimdi minik bir örnek daha inceleyelim;


<wml> <card id="anasayfa" ontimer="zamanlayici.wml" title="Borsadan Haberler">

<timer value="30" /> <p align="center"> Borsada son durum vs vs ...

</p> </card></wml>

Evet, <card> elemanının “ontimer” özelliği de mevcut, bu da bizi <onevent> elemanını uzun uzun yazmaktan kurtarıyor. Yukarıdaki sayfayı “zamanlayici.wml” olarak kaydedin, her 3 saniyede bir kendini yenileyecektir. Yalnız bazı telefonlar görüntüledikleri sayfaları önbelleklerine alırlar, bunun anlamı, sayfa her kendini yenilediğinde aslında görüntülenen önbellekteki sayfa olacaktır, bu da kullanıcının borsada hiç değişiklik olmadığını sanmasına yol açacaktır. Telaşlanmayın, bu durumdan da kurtulmanın bir yolu var, yakında öğreneceğiz…

onenterbackward olayı

Kullanıcı telefonunun geçmişinde (history) kayıtlı sayfalardan birini görüntülemeye çalıştığında bu olay tetiklenir.

Aşağıda örnek bir kullanım göreceksiniz ;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="anasayfa" title="Burçlar Dünyası"> <p> Merhaba, burçların gizemli dünyasına hoş geldiniz...<br/><br/> Burcunuzu seçin:<br/> <a href="#reklam_aslan">Aslan</a><br/>

... </p> </card> <card id="reklam_aslan" title="Reklam"> <onevent type="onenterbackward"> <prev/> </onevent> <onevent type="ontimer"> <go href="#aslan"/> </onevent> <timer value="50"/> <p> <a href="http://www.bedavafiyatina.com/">Didem Soysal'ın "Burçlar ve Meditasyon" isimli beklenen kitabı çıktı! Ayrıntılar için tıklayın.</a><br/><br/> <a href="#aslan">Reklamı sonlandır</a> </p> </card> <card id="aslan" title="Aslan Burcu"> <p> Bugün kendinizi iyi hissedeceksiniz, yıldızınızın Venüs'e yaklaşması sonucu... <br/> <anchor> <prev/>Geri </anchor> </p> </card></wml>

Kodumuzda üç kartımız var, ilki bizim anasayfamız, buradan isteyen kendi burcunu seçerek o günkü falını öğrenebiliyor (biz sadece “Aslan” burcunu yazdık), ve tıkladığında onu bir reklam sayfasına götürüyoruz. Bu sayfada 5 sn beklettikten sonra (ontimer olayı kullandığımıza dikkat edin ) onun burcuyla ilgili bilgileri sunduğumuz sayfaya gidiyoruz.Peki kullanıcı anasayfaya geri dönmek istediği zaman ne olacak? Bunun için bir bağlantı tanımlamışız, ve o bağlantıya <prev /> elemanını gömmüşüz, yani bağlantı aslında bir önceki sayfaya dönüyor. Fakat reklamın olduğu sayfadaki “onenterbackward” olayı sayesinde kullanıcıya aynı reklamı ikinci kez göstermeden (bu onu rahatsız edecektir) onu anasayfaya götürebiliyoruz. Dikkat ederseniz reklam sayfasındaki “onenterbackward” olayına <prev /> elemanını gömmüşüz, yani kullanıcı bu sayfaya geri döndüğünde bu olay tetikleniyor, ve sayfa görünmeden hemen bir önceki sayfaya geçiyor-ki, o da anasayfamız…

Bir şey daha dikkatinizi çekti, değil mi? Reklam sayfasındaki <a> elemanında tanımladığımız bağlantı şekli bir tuhaf sanki… Aslında biraz unutkan bir yapım vardır, kabul ediyorum, ama daha önce bu bağlantı şeklini bilerek atlamıştım. O zamanlar daha hiç bir şey bilmiyordunuz, halbuki şimdi artık WAP uzmanı sayılırsınız… Bu nedenle şu an tam zamanı bence. Gördüğünüz gibi “ http://www.bedavafiyatina.com/ “ şeklinde bir bağlantı tanımlayabilmemiz mümkün, bir başka

deyişle sayfalarınızdaki bağlantıların illa sizin sunucunuzda bulunması gerekmez, bu şekilde bir URL’yi de bağlantı olarak verebilirsiniz.Aşağıda WML sayfamızın görüntüleri de verilmiştir;


Şekil 1-36 bizim anasayfamızın görüntüsü, burada “Aslan” bağlantısını seçince “Reklam” sayfamıza gidiyoruz, 5 sn sonra da (veya “Reklamı sonlandır”ı seçerek) burcumuzla ilgili sayfamıza… Buradaki “Geri” bağlantısını seçince normalde “Reklam” sayfasının görüntülenmesi gerekirken anasayfa görüntüleniyor. onenterforward olayı

Bu olay, kullanıcı ileri yönde bir sayfa görüntülemek istediğinde tetiklenir. Mesela bir <go> elemanındaki bağlantıyı seçtiğinizde ileri yönde ilerlemişsinizdir.

Bir sayfaya girdiğinizde bir WMLScript fonksiyonu çağırmak istediğinizi farzedelim (WMLScript’i daha sonra öğreneceğiz), örneğin minik bir oyun tasarladınız, size rastgele bir sayı lazım ve bu sayının sayfaya girdiğinizde hazır olması lazım, işte size onenterforward olayını kullanmak için güzel bir fırsat…Aşağıdaki örneğimizi inceleyin;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="card1" title="İlk sayfa"> <p> Bu bizim 1 nolu kartımız.<br/><br/> <a href="#card2">Sıradaki karta geç</a> </p> </card> <card id="card2" title="Hazine sayfası"> <onevent type="onenterforward"> <go href="#card3"/> </onevent> <onevent type="onenterbackward"> <prev/>

</onevent> <p> Hahhahhaaa !!! Bu defa hazineye ulaşamayacaksın işteee !!! </p> </card> <card id="card3" title="Son sayfa"> <p> Bu 3 nolu kartımız.<br/><br/> <anchor> <prev/>Geri </anchor> </p> </card></wml>

Yine üç kartımız var, ilk sayfadaki bağlantı 2. karta yapılmış, fakat orada bir “ onenterforward “ olayı tanımlamışız ve bu olaya bir <go> elemanı yerleştirmişiz. Bu eleman yüzünden bu sayfayı kullanıcımız hiçbir zaman göremeyecek… Sayfaya girdiğimiz an bu olay işleyecek ve kendimizi aniden 3 nolu sayfada bulacağız. Aynı şekilde geri dönerken tetiklenecek “onenterbackward” olayı nedeniyle ilk karta geri döneceğiz. Maalesef bu defa hazineye ulaşamadık Aşağıdaki ekran görüntüleri size ümitsiz durumumuzu daha iyi açıklayacaktır;

Bağlantıyı seçince Şekil 1-39 Şekil 1-40

Seçenek Listeleri ve onpick olayı

onpick olayı seçenek listesi oluşturan <select> ve <option> elemanlarıyla birlikte kullanılır, bu nedenle önce bu elemaları inceleyeceğiz;

<select>-<option> elemanları

<select> elemanı kullanıcının bir konuda seçim yapabilmesi için seçenek elemanları tanımlar, bu seçenek elemanlarını da <option> elemanları oluşturur. Örneği inceleyince daha iyi anlayacaksınız;


<wml> <card id="card1" title="Anket"> <p> Hangi grubu daha çok beğeniyorsunuz?<br/><br/> <select name="secenekler"> <option value="dream_th">Dream Theater</option> <option value="shadow_gl">Shadow Galery</option> <option value="symphonyx">SymphonyX</option> </select> </p> </card></wml>

Minik bir anket yapmak istediğinizi ve iyi müzik gruplarından hangisinin daha çok beğenildiğini öğrenmek istiyorsunuz, işte size hazır bir örnek…Gördüğünüz gibi <option> elemanları <select>…</select> arasına gömülür, “value” özelliği elemanın değerini gösterir ve ona daha sonra göstereceğimiz gibi ulaştığımızda kullanıcının hangi seçeneği seçtiğini anlamamızı sağlar.<select> elemanında ise “name” özelliğini belirterek ona ulaşabiliriz.Aşağıda ekran görüntüsünü görebilirsiniz;

Seçenek Listesi açıldığında Şekil 1-41 Şekil 1-42

Bizim simülatörümüzde seçenek listeleri yukarıdaki gibi görünmektedir, dikdörtgen şeklindeki kutuyu seçince Şekil 1-42 de olduğu gibi bir ekran açılmakta ve radyo tuşları denen yapıyla bizim seçim yapmamıza olanak tanımaktadır, fakat unutmayın, bu görüntüler telefondan telefona farklılık gösterecektir.

Peki ya birden fazla seçim yapmamızı gerektiren bir durum varsa? Aşağıdaki örneği inceleyin;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="card1" title="Anket"> <p> Hangi tür müzikleri seversiniz?<br/><br/> <select name="secenekler" multiple=”true”>

<option value="klasik">Klasik</option> <option value="rock">Rock</option> <option value="caz">Caz</option> <option value="pop">Pop</option> <option value="arabesk">Arabesk</option> </select> </p> </card></wml>

Bu örneğin de ekran görüntüsü aşağıdaki gibidir;

Seçenek Listesi açıldığında Şekil 1-43 Şekil 1-44

Gördüğünüz gibi aynı anda iki veya daha çok seçeneği işaretleme şansına sahipsiniz.

<optgroup> elemanı

onpick olayını anlatalım dedik, nerelere geldik…Bu elemanı da öğrenince seçenek listesi ile ilgili en önemli konuları öğrenmiş olacağız.<optgroup> elemanı seçenek listesindeki seçenekleri gruplamak için kullanılır. Aşağıdaki örneği inceleyin;


<wml> <card id="card1" title="Secenekler"> <p>

En beğendiğiniz müzisyen ; <br/><br/> <select name="secenekler"> <optgroup title="Rock"> <option value="jason">Jason Becker</option> <option value="marty">Marty Friedman</option>

<option value="petrucci">John P. Petrucci</option> </optgroup> <optgroup title="Klasik">

<option value="beethoven">Beethoven</option> <option value="vivaldi">Vivaldi</option>

<option value="schubert">Schubert</option> </optgroup> </select> </p> </card></wml>

Kullanıcının en sevdiği müzisyeni merak ediyorsunuz, fakat bir çok müzik türü var, Beethoven gibi klasik müziğin deha ismiyle Jason Becker gibi virtüöz bir gitaristi yan yana yazmak biraz düzensiz bir görüntüye yol açabilir, bu nedenle bunları farklı başlıklar altında toplamakta fayda var. Ekranlar size daha iyi fikir verecektir;


İlk ekranımız normal seçenek listesi görünümünde, fakat onu seçtiğimizde karşımıza iki ana başlık çıkıyor; “Rock” ve “Klasik”, ve bu başlıklardan birini seçtiğimizde karşımıza müzisyenlerin isimleri seçenekler halinde çıkıyor. Böylece seçeneklerimiz gayet düzenli görünüyor. onpick olayı

Bu olay seçenek listesindeki opsiyonlardan biri seçildiği zaman tetiklenir. Eğer “multiple” özelliği “true” seçilmişse, yani birden fazla seçim yapabilme olanağı varsa , sadece seçeneği işaretlerken değil, işaretini kaldırırken de tetiklenir. Aşağıdaki gibi bir yapıya sahiptir;

<option ...> <onevent type="onpick"> <go href="deneme.wml"/> </onevent> ...</option>

Yukarıdaki yapıda seçenek seçildiği zaman WAP tarayıcısı “deneme.wml” dosyasına gidecektir. Burada istersek <refresh />, <prev />, <noop /> gibi elemanları da kullanma şansımız var.Az önceki yazımın daha kısaltılmış bir şeklini <option> elemanının “onpick” özelliğinden faydalanarak aşağıdaki gibi yazabilirsiniz;

<option onpick="deneme.wml" ...> ...</option>

Yalnız bu kısaltılmış yazım şeklinde “onpick” özeliğine verdiğiniz değer dosya ismi veya kart ismi olmalıdır, yani sadece <go> elemanını yazmaktan kurtulabiliriz. Eğer amacımız sayfayı yeniden yüklemekse uzun yazımı kullanıp <refresh /> elemanını kullanmalıyız.

Şimdi bir örnek yapalım;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="anasayfa" title="Trafik Durumu"> <p> Trafik durumunu öğrenmek istediğiniz bölgeyi seçiniz:<br/><br/> Bölgeler:<br/> <select name="secenekler"> <option onpick="#kopru1">1. Köprü</option> <option onpick="#kopru2">2. Köprü</option> <option> <onevent type="onpick"> <go href="#mecidiyekoy"/> </onevent> Mecidiyeköy </option> </select> </p> </card> <card id="kopru1" title="1. Köprü"> <p> 1. Köprü 'de şu an trafik yoğun...<br/><br/> ... </p> </card> <card id="kopru2" title="2. Köprü"> <p> 2. Köprü'de trafik akışı...<br/><br/> ... </p> </card> <card id="mecidiyekoy" title="Mecidiyeköy"> <p> Mecidiyeköy'de trafik kazası nedeniyle...<br/><br/> ... </p> </card></wml>

Örneğimizde 4 kartımız var, ilk kartımızda bir seçenek listesi bulunmakta, ve biz bu listeyi açınca karşımıza trafik durumunu görmek istediğiniz bölge seçenekleri çıkıyor. Bunlardan birini seçtiğimiz

anda seçtiğimiz bölgeyle ilgili sayfaya ulaşıyoruz. Bir bakıma burada <option> elemanlarını ve onpick olayını bir menü oluşturmak için kullanmışız. İlk iki <option> elemanında bu elemanların “onpick” özelliğinden faydalanmışız, üçüncü <option> elemanında ise uzun yazımı tercih edip <go> elemanı kullanmışız. Fakat iki yazımın da yaptığı iş aynıdır. Aşağıda ekran görüntülerini görebilirsiniz;


GİRDİ ALANLARI

<input /> elemanı

Şu ana kadar hep siz anlattınız, sayfayı açan kullanıcı sizi dinledi, ama onun da size anlatmak istediği bazı şeyler olacaktır. Mesela sizinle tanışmak isteyecektir belki. Peki kullanıcının ismini nasıl öğreniriz ?İşte <input /> elemanı bize bu imkanı sağlar . Kullanıcının bilgi girişi yapmasını

istediğimiz yerlerde bu elemanı kullanabiliriz.Aşağıdaki örneği inceleyin;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="anasayfa" title="'Input' Elemanı"> <p> Birazda siz anlatın...<br/> Mesela, isminiz nedir? <input name="isim" maxlength="16" /> </p> </card></wml>

Burada <input /> elemanına ait bazı özellikler tanımlandığı dikkatinizi çekmiş olmalı. “maxlength” özelliği <input /> elemanına maksimum kaç karakter yazılabileceğini belirler. Buraya yazdığınız değer 5 ise kullanıcı 5 karakterden fazlasını giremez. Aşağıda ekran görüntüsünü görebilirsiniz.

Şekil 1-51

Yine bu elemana ait “value” özelliğine verdiğiniz değer, kullanıcı sayfayı yüklediğinde ekranda kendiliğinden yazılı olarak gelecektir. Az önceki yazımı “<input name="isim" maxlength="16" value=”İsim”/>” satırıyla değişirsek biz hiçbir şey yazmadan aşağıdaki görüntüyü elde ederiz;

Şekil 1-52

Yalnız bu özelliği kullanırken dikkat etmelisiniz. Çünkü kullanıcı, ekranda yazılı olan bu “İsim” yazısını silmek ve kendi ismini girmek için harcayacağı enerjiden dolayı mutsuz olabilir.

Parola Alanları :

<input /> elemanını aynı zamanda parola girişi olarak kullanmamız da mümkündür. Bunun için bu elemanın “type” özelliğinden faydalanırız. Bu özelliğe vereceğimiz “password” değeriyle girdiğimiz karakterler (*) şeklinde gözükecektir. Aşağıdaki örneği inceleyin;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml> <card id="anasayfa" title="'Input' Elemanı"> <p> Lütfen ad ve parolanızı giriniz: <br/> <input name="ad" maxlength="16" />

<input name="parola" type="password" /> </p> </card></wml>

İşte bir parola alanı yarattık, aşağıda ekran görüntüsünü görebilirsiniz;

Şekil 1-53

Yazı Formatlama :

Kullanıcının ekrana girdiği yazıların doğru formatta olmasını isteriz, yani bir isim alanına “XR98*N” yazılmışsa kullanıcı muhtemelen uzaydan gelmiştir. Bizim burada yapmamız gereken uzaylılara dünyadaki insanların isimlerinde sayısal karakterlerin bulunmadığını bildirmektir. Veya kullanıcının yaşını sorduğumuz bir alana “Heeyy gidi heyyy” yazmasını engellemek için bir şeyler yapmalıyız. Belki kullanıcı yanlışlıkla girdi alanını boş geçecektir, bunu da engellemeliyiz. Bunu daha sonra öğreneceğimiz WMLScript ile yapabileceğimiz gibi, telefonumuza da yaptırabiliriz.

Aşağıdaki örneğimiz daha açıklayıcı olacaktır;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="anasayfa" title="'Input' Elemanı"> <p> Lütfen adınızı giriniz: <br/> <input name="ad" format="Aaaa" /> </p> </card></wml>

Kullanıcının girdiği yazıların uygun formatta girilmesini sağlamak için <input /> elemanının “format” özelliğinden faydalanırız. Bu özelliğe verilebilecek değerler aşağıda listelenmiştir;

a : Sayısal olmayan küçük harfler ve sembolik karakterlerA: Sayısal olmayan büyük harfler ve sembolik karakterlern : Sayısal veya sembolik karakterlerN : Sayısal karakterlerx : Herhangi bir sayısal, sembolik karakter veya küçük harflerX : Herhangi bir sayısal, sembolik karakter veya büyük harflerm : Herhangi bir karakter, WAP tarayıcı otomatik olarak küçük harf moduna ayarlanmış olacaktır, fakat kullanıcı bu modu değişebilirM: Herhangi bir karakter, WAP tarayıcı otomatik olarak büyük harf moduna ayarlanmış olacaktır, fakat kullanıcı bu modu değişebilir

Şimdi bu kriterlere göre az önce yazdığımız kodlarda “ad” alanında nasıl bir biçim uygulanmıştır sizce? Ben söyleyeyim isterseniz, kullanıcı toplam 4 karakter girebilir, yazdığı ilk harf büyük olmalı, diğer üç tanesi ise küçük, mesela “Okan” gibi, fakat kullanıcı buraya sembolik karakterler de girebilecektir (“Ok*n” gibi). Demek ki adında sayısal karakter bulunmayan uzaylılar buraya isimlerini yazabilirler. Tablodaki bu harflerin önüne (*) karakteri koyarak sonsuz sayıda o formatta karakter girişine izin verebilirsiniz, mesela;

<input name="ad" format="*M" />

şeklindeki bir yapıda kullanıcı istediği karakterden istediği kadar girebilecektir, aslında siz bu özelliği kullanmazsanız da zaten kendiliğinden bu format uygulanmaktadır.

Şimdi de kullanıcının yaşını soran bir alana normal harfleri girmesini engelleyelim;

<input name="yas" format="*N" />

Artık kullanıcımız bu alana girdiği zaman sadece sayısal karakter girebilir. WAP tarayıcısı ise bu alana girildiğinde otomatik olarak sayısal karakterlere geçiş yapar, kullanıcı ayrıca bu işle uğraşmış olmaz.

Şimdi az önceki örneği bir adım daha ilerletelim ve kullanıcının isminin ilk harfinin büyük, geri kalanların küçük girilmesini sağlayacak şekilde formatlayalım.<input name="ad" format="A*a" />

Artık kullanıcını isminin baş harfini büyük yazarak ismini girebilir. Örneğin “Selami”, “Ali”, “Cemalettin” gibi isimlerin hepsi yazılabilir. Hatırlarsanız ilk baştaki örneğimizde en fazla 4 karakter yazabiliyorduk.

Bu formatlama değerleriyle siz de değişik ve daha karmaşık şeyler yapmaya çalışın, böylece konuya hakimiyetiniz artacaktır.

Emptyok özelliği :

Bu özellikle, girdi alanlarınızın boş geçilip geçilemeyeceğini belirlersiniz. Örneğin kullanıcıdan alacağınız bir bilginin sizin için çok önemli olduğunu farzedin, bu alan boş geçilirse sorunlar yaşayacaksanız bu özelliği kullanmalısınız.

Aşağıdaki örneği inceleyin;


<wml> <card id="anasayfa" title="TERMİNATÖR"> <p> Hangi yıldayız ?!<br/> <input name="yil" emptyok="false" />

Bugün günlerden ne ?! <input name="gun" emptyok="true" />

</p> </card></wml>

Evet, terminatör hangi yılda olduğunu mutlaka bilmek isteyecektir, bu nedenle “emptyok” özelliğine “false” değeri vermeliyiz. “false” değeri, bu alanın boş bırakılamayacağı anlamına gelir. Terminatör günü de bilmek isteyecektir, ama o kadar da şiddetli bir şekilde değil, bu nedenle bu özelliğe “true” değeri veriyoruz, yani boş geçilebileceği anlamına geliyor. Aşağıda bu örneğin ekran görüntüsü var ;


Eğer terminatöre yılı söylemezsek Şekil 1-55 deki gibi bir ekran görüntüsüyle karşılaşıyoruz. Bu nedenle ona iyi davranmanızı ve yılı doğru söylemenizi tavsiye ederim…

Hatırlarsanız bir önceki konuda “format” özelliğini öğrenmiştik, ve bu eleman yazılan metnin doğru formatta girilmesini sağlıyordu, peki diyelim ki aşağıdaki gibi bir yazım yaptık;

<input name="yas" format="NN" emptyok="true"/>

Yani diyoruz ki buraya bir değer girmelisin ve girilen değer sayısal karakter olmalıdır (ve iki karakter olmalıdır), fakat yine demişiz ki bu girdi alanını boş geçebilirsiniz, peki ne olacak şimdi? Bu gibi bir durumda <emptyok> özelliği daha ağır basar ve kullanıcı isterse burayı boş geçebilir. Eğer kullanıcı değer girmeye çalışırsa da bizim istediğimiz özelliklerde girmek zorunda kalacaktır.

WML DEĞİŞKENLERİ

Değişkenler, programlama dillerinin vazgeçilmez unsurlarıdır. Programın belli aşamalarında belli değerleri alırlar ve bu değerle işimiz bittiği zaman yok olup giderler. Bu değerleri istediğimiz zaman okuyabilir veya değiştirebiliriz.WML kartları arasında dolaşırken kullanıcıdan aldığımız bazı değerleri bir sonraki kartta kullanmamız gerekebilir, işte tam o anda ihtiyacınız olan şey bir “değişken”dir. Gerekli bilgiyi ona depolarız, ve bir sonraki kartta kullanırız. Değişkenlerin kullanımı WML’de çok basittir ve katı kuralları yoktur, basitçe bir isim belirlersiniz ve ona bir değer atarsınız. Aslında WML’deki değişken kullanımı HTML ile aralarındaki en önemli farklardan biridir, HTML’de yardımcı bir dil kullanmadan (Javascript, VBScript gibi) değişken kullanımı yoktur, fakat WML, değişkenleri kendiliğinden destekleyen bir yapıya sahiptir.Değişkenlerle ilgili örnek yapmadan önce birkaç kuralı hatırlatalım;

• Değişken isimleri büyük-küçük harflere duyarlıdır, yani “ali” ile “Ali” burada aynı şey değildir.

• Değişken isimlendirilmesinde noktalama işaretleri kullanılamaz.• Değişkenin isminin ilk karakteri harf ya da “_” karakteri olmalıdır.Sonraki karakterler

sayısal da olabilir.• Değişkeni bir kere tanımladığınız zaman bütün kartlar ve destelerde onu kullanabilirsiniz.

Bir değişkeni aşağıdaki yöntemlerle tanımlayabilirsiniz;

1. <setvar /> elemanıyla2. <select> ve <input /> elemanlarıyla3. WMLScript’in WMLBrowser standart kütüphanesinde bulunan setVar() fonksiyonuyla

(bunu daha sonra öğreneceğiz)

<setvar /> elemanı ile değişken tanımlamak

<setvar /> elemanı, değişken tanımlamak için kullanabileceğimiz metodlardan ilkidir. İki özelliği vardır; “name” ve “value” özellikleri. “name” özelliğine atayacağınız değer, değişkenin ismini, “value” özelliğine atayacağınız değer, değişkenin değerini belirler. Bu eleman <go>, <prev>, <refresh> elemanlarıyla birlikte kullanılmalıdır. Aşağıdaki örnekte kullanıcı bir bağlantıyı işaretleyince bir değişkene değer veriyoruz.

<anchor> <go href=" sayfa2.wml"> <setvar name="onceki_sayfa" value="sayfa1"/> </go> Sonraki sayfaya git</anchor>

Kullanıcı bağlantıyı seçince “onceki_sayfa” isimli bir değişken oluşturuyoruz ve bu değişkene “sayfa1” değerini veriyoruz. Peki bu değişkeni nasıl kullanacağız der gibi bakıyorsunuz, yakında anlatacağım…Az önceki örnekte kullanıcı bir işlem yaptığı zaman (bir bağlantıyı seçtiği zaman) değişken oluşturup değer veriyorduk. Peki kullanıcının bir şeyler yapmasına gerek kalmadan bunu yapabilir miyiz? Elbette…Tek yapmamız gereken “onenterforward” gibi kendiliğinden tetiklenen bir olaya bizim <setvar /> elemanımızı yerleştirmek.

<onevent type="onenterforward">

<refresh> <setvar name="x" value="156"/> </refresh></onevent>

Gördüğünüz gibi bu karta girildiği an “x” isimli bir değişken oluşturuyoruz ve değer olarak “156” değerini veriyoruz. <refresh> elemanı sayesinde de sayfanın güncellenmesini sağlıyoruz.

<select> ve <input /> elemanları ile değişken tanımlamak

<select> ve <input /> elemanlarını kullanarak da değişken tanımlayabiliriz. Bu elemanların “name” özelliklerine vereceğimiz değer, aynı zamanda değişkenlerin de ismi olacaktır. Aşağıdaki örneği inceleyin;

<select name="tatlilar"> <option value="Dondurma">Dondurma</option> <option value="Künefe">Künefe</option> <option value="Sütlaç">Sütlaç</option></select>

Biraz şaşırtıcı gelebilir, ama az önce farkında olmadan bir değişken tanımladık. Değişkenimizin ismi “tatlılar”, ve taşıdığı değer kullanıcı bir seçeneği işaretlediği zaman o seçeneğin “value” özelliğindeki değere eşitleniyor. Yani kullanıcı “Künefe” seçeneğini işaretlediği zaman “tatlilar” değişkeninin değeri “kunefe” şeklinde ayarlanıyor.

<input name=”isim” />

Yukarıdaki <input /> elemanı da aslında bir değişken oluşturuyor, değişkenin adı “isim”, ve değeri kullanıcının bu alana yazacağı değer şeklinde ayarlanıyor. Kullanıcı bu alana “Doğukan” değerini girerse “isim” değişkeninin taşıdığı değer “Doğukan” oluyor.

setVar( ) fonksiyonu ile değişken tanımlamak

Aslında bu konuyu sonradan işlememiz daha uygun olacaktı, çünkü henüz WMLScript’in ne olduğu hakkında hiçbir fikrimiz yok, fakat burada bu fonksiyona bir değinmemiz gerekir sanırım, çünkü konunun akışı bunu gerektiriyor. Hem daha önce bahsettiğim gibi, biraz unutkan bir yapım vardır, sonraya bırakırsam unuturum diye korkuyorum .

setVar( ) fonksiyonu ile değişken oluşturmak gerçekten çok basittir, gerçi diğer yöntemler de oldukça basitti…Aşağıda bu fonksiyon yardımıyla oluşturulmuş örnek bir kullanım görüyorsunuz;

WMLBrowser.setVar(“isim”,”Mehmet Okan”) ;

setVar fonksiyonu iki parametre alır, bunlardan ilki değişkenin ismini, diğeri taşıdığı değeri ayarlar. Yukarıda “isim” adında bir değişken oluşturulup bu değişkene “Mehmet Okan” değeri verilmiştir. “WMLBrowser” kelimesinin anlamını sonradan öğreneceğiz. Gördüğünüz gibi gayet basit bir şekilde değişkeni oluşturup ona değer verebiliyoruz, fakat bu tip bir tanımı sadece WMLScript’te yapabileceğinizi unutmamalısınız. WMLScript hakkında detaylı bilgiyi daha sonra anlatacağım.

Değişkeni Kullanmak

Şu ana kadar değişkeni nasıl oluşturabileceğimizi ve ona nasıl değer atayabileceğimizi öğrendik,

ama onu hiç kullanmadık. Halbuki değişkenler işkoliktirler, çalışmadan duramazlar. Hemen onları çalıştıralım ve bu eziyetten kurtaralım;


<wml> <card id="anasayfa" title="Değişkenler"> <onevent type="onenterforward"> <refresh> <setvar name="x" value="156"/> </refresh> </onevent> <p> İsminiz nedir? <input name="isim" maxlength="15"/><br/>

En sevdiğiniz tatlı? <select name="tatlilar"> <option value="Dondurma">Dondurma</option> <option value="Künefe">Künefe</option> <option value="Sütlaç">Sütlaç</option> </select>

<a href="#degisken">Sonraki Sayfa</a> </p> </card> <card id="degisken" title="Merhaba"> <p> Merhaba $(isim).<br/> $(tatlilar) seviyorsun demek...Onu ben de severim.<br/> Başta yarattığımız x değişkenin değeri : <b>$(x)</b>. </p> </card></wml>

Gerçekten de profesyonel işler yapmaya başladık, değil mi? Kodumuzda iki kart var; “anasayfa” ve “degisken” kartları. “anasayfa” kartında her zamanki elemanlar var, <input />, <select> gibi, fakat ilk başta bir <onevent> olayı var ve <setvar/> elemanıyla bir değişken tanımlamışız. Böylece sayfa yüklenirken bizim değişkenimiz de hazır olacak. Hemen kafanızı kurcalayan bir soruyu cevaplayayım, <onevent> elemanında bir <refresh> elemanı var, ve biz <setvar /> elemanını bu elemanın içinde kullanmışız, bunun nedeni değişkeni tanımladıktan sonra sayfayı tekrar yüklemek ve WAP tarayıcının bu yeni değişkenimizden haberdar olmasını sağlamaktır.“degisken” kartımızda ise ilk kartta elemanların “name” özelliklerine verdiğimiz değerleri parantez içinde ve önlerine “ $ “ sembolü gelecek şekilde kullanmışız. İşte işin sırrı bu yazım şeklinde… Değişkeni kullanmak için “ $(…) ” şeklinde bir yazım kullanılır ve parantezler arasına değişkenin ismi yazılır. Şimdi ekran görüntülerine bir göz atalım;


Harika! Biz “degisken” kartında hiç “Doğukan” veya “Künefe” gibi bir ifade yazmamıştık, fakat bizim değişkenlerimiz bir önceki karttan bu bilgileri bu karta taşıdılar. <input /> elemanına girilen “Doğukan” değeri, <select> elemanında seçilen “Künefe” değeri, hatta ilk başta <setvar /> elemanıyla oluşturduğumuz “x” değişkeninin “156” değeri, hepsi buradalar… Işığı gören gelmiş yani

Değişken Değerini Silmek

Daha önce de anlatıldığı gibi, değişkeni bir kere tanımladınız mı onu bütün kartlardan ve destelerden okuyabilirsiniz, hatta başkalarının hazırladığı sayfalardaki değişken değerlerini bile okumanız mümkündür. Bu nedenle önemli bilgilerinizi değişkende tutuyorsanız (mesela parola, kredi kart numarası gibi) , o zaman değişkenle işiniz biter bitmez onun değerini silmeniz gerekir. Bunu yapmak için çok basit bir yöntem vardır;

<setvar name="parola" value="" />

Bu kadar basit işte. “parola” değişkeniyle işimiz bitince ona boş bir değer atıyoruz ve böylece içindeki bilgiyi temizlemiş oluyoruz. Artık bizim “parola” değişkenimiz boş bir değer taşımakta…

“newcontext” özelliği ve newContext ( ) fonksiyonu

<card> elemanının daha önce bahsetmediğimiz özelliklerinden biri olan “newcontext” özelliği ile de değişken değerlerini silebiliriz. Bu özelliğin varsayılan değeri “false” olarak ayarlanmıştır, fakat biz bunu “true” diye değiştirirsek karttaki bütün değişken değerleri sıfırlanır. Fakat bu özellik WAP tarayıcısının geçmiş bilgilerini de yok edeceğinden “Back” tuşu gibi bir tuşa bastığınızda bir önceki sayfayı görüntüleyemezsiniz.

WMLScript’in standart kütüphanesinde bulunan newContext ( ) fonksiyonu da aynı işi görür. Hiçbir parametre almayan bu fonksiyon, karttaki bütün değişkenleri temizler. Aşağıdaki gibi bir kullanımı vardır.

WMLBrowser.newContext();

WMLScript’i yakında öğreneceğiz.

SUNUCUYA BİLGİ GÖNDERMEK

Kullanıcıyla nasıl iletişime geçeceğinizi, ondan nasıl bilgi alabileceğinizi önceki konularda gördük. Şu ana kadar yaptığımız işlemler hep WAP tarayıcı üzerindeydi, yani adamın elinde tuttuğu cep telefonunda işlem yaptık hep.Biraz daha uzmanlaşınca kullanıcının bize verdiği bilgileri sunucuya (server) göndermek ve bu bilgileri işleme sokmak isteyebilirsiniz. Mesela kullanıcının en sevdiği tatlının “Künefe” olduğunu hiç unutmamak istiyoruz, böylece kullanıcı ona değer verdiğimizi düşünecektir. Bunu yapmanın tek yolu sunucumuzda bir veritabanı oluşturmak ve kullanıcıya ait bilgileri bu veritabanında tutmaktır. Daha sonra sayfamıza tekrar girdiği zaman onun daha önce bize verdiği bilgilere ulaşıp ona sürpriz yapabiliriz. Hatta bazen kullanıcıya ait bilgileri saklamamız sürpriz yapmanın ötesinde bir gereklilik olabilir. Bu gibi durumlar için sunucuya veri yollamanın nasıl yapılacağını bilmemiz gerekir.Sunucu tarafında çalışacak kodları yazmadan önce şunu belirtmeliyim; sunucunuzda bir Web-sunucusu (Apache, IIS vs… gibi) ve bir script motoru (PHP, ASP, JSP vs… gibi) kurulu olmalıdır. Eğer bunları nasıl kuracağınız ve kullanacağınız hakkında bilginiz yoksa, öncelikle bu konuları öğrenmenizi ve bu konuyu şimdilik öğrenmeye çalışmamanızı tavsiye ederim.

<postfield> elemanı

Sunucuya veri yollamak için <go> ve <postfield /> elemanları kullanılır. <go> elemanını zaten daha önceden tanıyoruz, <postfield> elemanını da nasıl kullanacağımızı şimdi öğrenelim;


<wml> <card id="anasayfa" title="Merhaba"> <p>

İsminiz nedir? <input name="isim" maxlength="15"/><br/>

En sevdiğiniz tatlı? <select name="tatlilar" multiple="true"> <option value="Dondurma">Dondurma</option> <option value="Künefe">Künefe</option> <option value="Sütlaç">Sütlaç</option> </select>

<anchor> <go method="get" href="kaydet.php"> <postfield name="ad" value="$(isim)"/> <postfield name="tatli" value="$(tatlilar)"/> </go> Gönder </anchor> </p> </card></wml>

Dikkat ederseniz daha önce öğrendiğimiz elemanların bazı özelliklerini sırası geldikçe öğreniyoruz, bir önceki konuda <card> elemanının “newcontext” özelliğini öğrendiğimiz gibi, şimdi de <go> elemanının “method” özelliğini öğreneceğiz.“method” özelliği sunucuya verinin ne şekilde gönderileceğini belirler. Varsayılan değeri “get” tir, ve bu şekildeyken veri “href” özelliğine girilen URL’nin sonuna eklenerek sunucuya yollanır, bu da bu metotla kısıtlı miktarda veri yollayabileceğimiz anlamına gelir.“method” özelliğine verilebilecek diğer değer “post” tur. Bu değer verilirse veri, sunucuya yollanan isteğin mesaj gövdesine yerleştirilerek yollanır. Eğer sunucuya yollayacağınız veri miktarı büyükse bu metodu tercih etmelisiniz.<go> elemanının “href” özelliğine de “kaydet.php” değeri girmişiz. Yolladığımız verileri sunucuda işlemek için PHP, ASP, JSP, PERL vs… gibi diller kullanırız. Bu kitapta bu diller hakkında bilgi verilmeyecektir, fakat nasıl kullanacağınızı anlamanız için ilerleyen konularda örnek programlar yazılacaktır.

Şimdi bize asıl yabancı olan elemana gelelim; “<postfield />”. Bu eleman <go>…<go/> etiketleri arasında kullanılır ve sunucuya veriyi yollamaya yarar. “name” özelliği veriye verilen isim, “value” özelliği ise veriye verilen değer anlamına gelir. Dikkat ettiyseniz biz “value” özelliğine değeri değişken yardımıyla vermişiz.

Şimdi de işin sunucu tarafına bir göz atalım;

Sunucu taraflı Programlama

Bir önceki konuda veriyi sunucuya nasıl yollayacağımızı öğrenmiştik, ve sunucu tarafında bu veriyi PHP, ASP, JSP gibi dillerle işleyebileceğimizden bahsetmiştik. Şimdi de sunucu tarafında bu veriyi nasıl işleyebileceğinizi örnek bir kodla görelim;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="anasayfa" title="Merhaba"> <p> İsminiz nedir? <input name="isim" maxlength="15"/><br/> En sevdiğiniz tatlı? <select name="tatlilar" multiple="true"> <option value="Dondurma">Dondurma</option> <option value="Künefe">Künefe</option> <option value="Sütlaç">Sütlaç</option> </select> <anchor> <go method="get" href="islem.php"> <postfield name="ad" value="$(isim)"/> <postfield name="tatli" value="$(tatlilar)"/> </go> Gönder </anchor> </p> </card></wml>

Bu bizim az önceki örneğimiz, isterseniz örnekteki gibi bir bağlantı tanımlayarak değil, “onpick” veya “onenterforward” gibi bir olaya da <go> elemanı tanımlayarak sunucuya veri gönderebilirsiniz. Ben az önceki örnek üzerinden devam etmeyi tercih ettim. Örneğimizi sunucunuzda kök dizin olarak ayarladığınız yere herhangi bir isimle kaydedin, sonra aşağıdaki kodları da “islem.php” adıyla aynı dizine kaydedin.

<?php header('Content-type: text/vnd.wap.wml'); echo '<?xml version="1.0" encoding=”ISO-8859-9” ?>'; ?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml">

<wml> <card id="sunucu" title="Sunucu"> <p> Sunucuya erişen veriler:<br/> İsim: <?php echo $_POST["ad"]; ?><br/> Sevdiği tatlı :<?php echo $_POST["tatli"]; ?><br/> </p> </card></wml>

Şimdi WAP tarayıcınızı açın ve “File” menüsünden “Load URL…” yi seçin. Burada adres çubuğuna “ http://localhost/sunucuOrnegi.wml “ şeklinde giriş yapın. Burada sizin ilk baştaki sayfayı “sunucuOrnegi.wml” adıyla kaydettiğinizi farzediyorum. Ayrıca localhost’ta çalıştığınızı farzediyorum, bunun yerine “ http://127.0.0.1/sunucuOrnegi.wml “ gibi IP adresi de girebilirsiniz. Şimdi “Load” tuşuna basın ve bekleyin, hiçbir şey olmadığını göreceksiniz (Bu problem Nokia’nın simülatöründe oluşmaktadır, diğer bazı simülatörlerin böyle bir sorunu bulunmamaktadır ) . Bu sorunu çözmek için “Nokia WAP Gateway Simulator” programına ihtiyacınız var, bunu “forum.nokia.com”da arama yaparak bulabilirsiniz. Bu programı kurunca az önceki adımları tekrar uygulayın, sayfanızın çalıştığını göreceksiniz.

Sunucu taraflı kodlama yaparken ben PHP dilini tercih ettim, fakat siz istediğiniz bir dili kullanarak da aynı sonuca ulaşabilirsiniz. Buradaki PHP kodlarını açıklamayacağım, bu dili anlatan bir kitaptan bu kodların anlamını öğrenebilirsiniz. Öncelikle şunu hatırlatmalıyım ki, dökümanın MIME tipini kodunuzda belirtmeniz gerekir , biliyorum, durmadan yeni yeni terimler çıkıyor karşınıza, ama inanın benim bu konuda yapabileceğim bir şey yok. Siz sadece kullanacağınız dile göre MIME tipini nasıl belirtebileceğinizi öğrenin, PHP’de bu, bizim ilk satırda yazdığımız şekilde yapılıyor. Ayarlayacağınız değer "text/vnd.wap.wml" şeklinde olmalı. Biz bunu örneğimizde ilk satırdaki “header('Content-type: text/vnd.wap.wml')” ifadesiyle yapıyoruz.“ $_POST["ad"] ” ve “ $_POST["tatli"] ” ifadelerindeki “ad” ve “tatli” değerlerinde de gördüğünüz gibi, sunucuya gelen verilere <postfield /> elemanlarının “name” özelliklerine verdiğimiz değerlerle ulaşıyoruz.Aşağıda ekran görüntülerini görebilirsiniz;

Verileri gönderince Şekil 1-58 Şekil 1-59

Sizce de güzel görünmüyor mu? Bizim cep telefonumuzdaki veriler normal bir bilgisayara (sunucu) geldi, orada işlendi ve tekrar bizim cep elefonumuza geri yollandı. Valla şu teknolojideki gelişmeyi aklım almıyor benim

DİĞER WML ELEMANLARI

<head> elemanı

<head> elemanı deste (deck) hakkında bilgi içerir. İçinde bir <access /> elemanı veya birden fazla <meta /> elemanı barındırabilir. Barındırdığı bilgi bütün deste hakkında olduğu için herhangi bir kartın içine yerleştirilmez. Birazdan örneklendireceğiz...

<access /> elemanı

Normalde WML sayfalarımız herkese açıktır ve herkes tarafından görüntülenebilir. Fakat biz bunu kısıtlamak ve sadece belirli yerlerden erişime izin vermek isteyebiliriz. <access /> elemanı burada devreye girer ve bizim erişim verdiğimiz yerler haricinde sayfamıza ulaşımı kısıtlar.Sayfamızda birden fazla <access /> elemanı bulunması hatadır. Eğer bu eleman tanımlanmamışsa sayfamızı herkes görüntüleyebilir. Aşağıdaki örneği inceleyin;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <head> <access domain="www.sihirlibolge.com" /> </head> <card id="anasayfa" title="Dikkat !"> <p>Sihirli bölgeden gelmiyorsan buraya giremezsin !!!</p> </card></wml>Şu an sayfayı açmayı denerseniz aşağıdaki görüntüyle karşılaşırsınız;

Şekil 1-60

Gördüğünüz gibi bu bölgeye erişmeniz yasaklanmıştır.Bunu sağlayan <access /> elemanının “<head>...</head>” arasına yerleştirildiğine dikkat edin. Zaten <head> elemanı bu görev için vardır, yani <access /> ve <meta /> elemanlarını barındırır.<access /> elemanının “domain” özelliği sayesinde hangi adresteki kartların sayfamızı görüntülemeye yetkisi olduğunu belirleriz. Bizim örneğimizdeki sayfaya sadece “www.sihirlibolge.com” adresinden gelenler ulaşabilir. Bu adresten ulaşmaya çalışmadığımız zaman Şekil 1-60 taki gibi bir ekranla karşılaşırız. Bu elemanın “path” özelliği olayı bir adım daha ileri götürür ve bu adresteki bir dizine kadar sayfaya erişimi kısıtlayabilir. Örneğimizde bunu gerçekleştirmek için aşağıdaki gibi bir yazım yeterlidir;

<head> <access domain="www.sihirlibolge.com" path=”/wmlsayfalari” /> </head>

Artık sayfamızı sadece “www.sihirlibolge.com/wmlsayfalari” adresindeki sayfalar görüntüleyebilecektir.

<meta /> elemanı

<meta /> elemanı, bize bilgi hakkında bilgi sağlar. Cümlem her ne kadar felsefi bir anlam taşısa da , siz en basit anlamıyla algılayınız. Yani bizim yazdığımız kodları bilgi olarak kabul edersek, bu elemanda tanımladığımız bazı değerler sayfamız hakkında bazı genel bilgiler verir. Örnekleyince daha iyi anlayacaksınız…Bu elemanın kullanım yerlerinden biri WAP tarayıcının “önbellek”(cache) denilen yapısına yöneliktir. WAP tarayıcıları hafızalarında minik bir alanı, görüntüledikleri sayfalar için ayırmışlardır, sizin görüntülediğiniz sayfaları bu alana kaydederler ve siz aynı sayfayı tekrar görüntülemek istediğinizde hemen bu minik hafıza alanından ilgili sayfayı ekrana getirirler (tabii eğer onu henüz silmemişlerse). İşte bu yapıya “önbellek” denir . Bu olayın en büyük avantajı WAP tarayıcının sunucuya tekrar bağlanmaya gerek kalmadan sayfayı ekrana getirebilmesidir ki bu zaman ve maliyet tasarrufu sağlayacaktır. Fakat sayfanız sürekli güncel olmayı gerektiriyorsa (borsa bilgileri gibi) bu büyük bir dezavantaj olabilir ve ziyaretçi farkına bile varmadan eski görüntüleri görüntülüyor olabilir, bu nedenle buna karşı bir takım önlemler alınması gereklidir. Hatırlarsanız benzeri bir problemi daha önce <timer /> nesnesiyle çözmüştük, fakat oradaki kullanım kullanıcının sayfayı görüntülediği süre boyunca geçerliydi, kullanıcının ertesi gün sayfamıza tekrar bakmak isteyeceği zaman “önbellek” denilen olay yüzünden sayfanın bir gün önceki halini görüntüleyebileceğini hiç düşünmemiştik. Aşağıdaki örneği inceleyin;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <head> <meta http-equiv="cache-control" content="no-cache"/> </head> <card id="anasayfa" ontimer="borsa_durum.wml" title="Borsadan Haberler">

<timer value="30" /> <p align="center"> Borsada son durum vs vs ...

</p> </card></wml>

<meta /> elemanına ait birkaç özellik bulunmaktadır. “http-equiv” özelliği, bu özelliğin HTTP başlığı (HTTP header) olarak ele alınması gerektiğini belirtir (HTTP ile ilgili ayrıntılı bilgiyi bu konuyu anlatan bir kitaptan öğrenebilirsiniz). Ayrıca yine bu elemana ait “name” özelliğinin yerine kullanılabilir. Eğer gönderdiğiniz “meta” bilginin HTTP başlığı olarak dengi varsa “http-equiv”özelliğini, yoksa “name” özelliğini kullanmalısınız.<meta /> elemanının diğer bir özelliği “content”tir. Bu özelliğe verebileceğiniz değerlerden biri bizim yukarıda yazdığımız gibi “no-cache” şeklindedir, ve sayfanın önbelleğe alınmamasını sağlar. Böylece sayfamız her görüntülenmek istendiğinde önbellekten değil, en güncel halinin bulunduğu sunucumuzdan yüklenecektir. Fakat biz belirli bir süre için sayfamızın önbelleğe alınmasına izin vermek isteyebiliriz. Örneğin sayfamızda sunduğumuz bilgi 3 gün boyunca değişmeyecekse , boşuna “no-cache” diye belirtmenin anlamı yoktur. Sayfamızın ne kadarlık bir zaman diliminden sonra “eskimiş” sayılacağını belirtebiliriz. Aşağıdaki gibi bir yazım şekli bunu gösterir;

<meta http-equiv="Cache-Control" content="max-age=3600"/>

“content” özelliğine vereceğimiz “max-age=…” değeri sayfamızın belirtilen kadar süre geçtikten sonra eskimiş olacağını ve önbellekten silinmesi gerektiğini belirtir. Burada vereceğimiz değer saniye cinsindendir, yukarıdaki yazımda sayfanın sadece 1 saatliğine (yani 3600 sn) önbellekte tutulabileceği belirtiliyor. Eğer “max-age=0” şeklinde yazsaydık “no-cache” değeriyle aynı anlama gelecekti.Bazı telefonlar <prev /> elemanıyla veya “Back” tuşuyla geri gitmişseniz sayfayı güncellemeyecek ve önbellekteki halini ekrana getirecektir. Bunun önüne geçmek için “content” özelliğine “must-revalidate” değeri yazılır.

<meta http-equiv="Cache-Control" content="must-revalidate"/>

<meta /> elemanına ait özelliklerden biri de “forua” özelliğidir. “true” veya “false” değerleri alabilir. “true” değeri verilirse meta bilgisi karşıdaki WAP tarayıcıya mutlaka ulaştırılacaktır.

Burada bir konuyu belirtelim; Bazı telefonlar yukarıdaki metotlarla önbellek kontrolü yapmazlar, hatta bazı telefonlarda önbellek bile yoktur. Bu nedenle burada yazacağımız kodların göreceği tepki telefondan telefona değişir. Eğer WAP tarayıcısı sizin yazdığınız meta bilginin ne olduğunu anlamazsa onu görmezden gelecektir.

Aşağıdaki örnekte eğer tarayıcı destekliyorsa sayfa önbelleğe alınmaktan kurtuluyor ;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <head> <meta forua="true" http_equiv="cache-control" content="must-revalidate" />

<meta forua="true" http_equiv="cache-control" content="no-cache" /> </head> <card id="anasayfa" ontimer="borsa_durum.wml" title="Borsadan Haberler">

<timer value="30" /> <p align="center"> Borsada son durum vs vs ...!

</p> </card></wml>

WMLSCRIPT

BAŞLIYORUZ !

WMLScript konusuna kadar gelmiş olduğumuza göre artık bayaa ilerlemişiz demektir. Sizi bu azminizden dolayı tebrik ediyorum. Bu hızla giderseniz yakında gerçek WAP uzmanları olacağınızdan eminim...WMLScript kullanıcı taraflı çalışan bir dildir. Bunun anlamı şudur; WMLScript sunucuda çalışmaz, kullanıcının WAP tarayıcısında çalışır. Javascript'e aşina olanlar bu konuyu öğrenirken fazla zorluk yaşamayacaklardır, çünkü WMLScript ve Javascript arasında büyük benzerlikler bulunmaktadır.WMLScript ile birtakım hesaplamalar ve işlemler yapabilirsiniz. Mesela kullanıcının girdiği yazının formatının uygun olup olmadığını kontrol edebilirsiniz, veya kullanıcının girdiği sayıları işleme sokabilirsiniz. Şu ana kadar kullanıcının girdiği iki sayının nasıl toplanacağını öğrenmemiştik. Aslında bunu sunucu tarafında PHP, ASP, PERL vs… gibi dillerle de halledebilirsiniz, fakat sunucu tarafında yaptığınız her işlem sunucuya ek bir yük bindirecektir, ayrıca durmadan sunucudan veri almaya çalışmak bağlantı masraflarını arttıracaktır. Bu nedenle WMLScript’i bazı durumlarda kullanmanız gerekebilir.

Şimdi örneklere geçebiliriz. Önce normal WML sayfamızı oluşturalım;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="anasayfa" title="İlk WMLScript Örneği"> <p> <a href="ilk.wmls#merhabaDunya()">WMLScript'i çalıştır !</a><br/> $(mesaj) </p> </card></wml>

Gördüğünüz gibi gayet hoş bir WML sayfası bu, <a> elemanının “href “ özelliğine “ilk.wmls# merhabaDunya()”diye bir değer vermişiz. Burada “ilk.wmls” bizim WMLScript dosyamızın ismidir. WMLScript dosyalarının uzantısı “.wmls” şeklinde olur. Bu dosyadaki bir fonksiyona (fonksiyonları daha sonra öğreneceğiz) ulaşmak için “#” karakterinden sonra fonksiyonun ismi yazılır. Bir de $(mesaj) isimli bir değişkenimiz var, bunu sırası gelince açıklayacağız.Bu sayfayı istediğiniz bir isimle kaydedin. Sıra WMLScript sayfamızda;

extern function merhabaDunya(){ WMLBrowser.setVar("mesaj","Surpriiizzz :))"); WMLBrowser.refresh(); // Fonksiyonumuz hazır…}

Yukarıdaki kodları “ilk.wmls” ismiyle kaydedin. Az önceki WML sayfasıyla aynı dizinde olması gerektiğine dikkat edin. Merak etmeyin, birazdan kodların anlamlarını öğreneceksiniz. Şimdi sayfamızı simülatörümüzden çalıştıralım;


TEMEL KURALLAR

WMLScript kodlarımızı yazarken dikkat etmemiz gereken bazı kurallar vardır. Bunları aşağıdaki gibi özetleyebiliriz;

• Her ifadeden sonra “;” karakterini kullanmalıyız. Javascript’i biliyorsanız o dilde ifadelerin sonundaki “;” karakterinin ihmal edilebileceğini de bilirsiniz. Fakat WMLScript’te bu söz konusu değildir.

WMLBrowser.setVar("mesaj","Surpriiizzz :))") ;WMLBrowser.refresh() ;

Gördüğünüz gibi ifadelerin sonuna noktalı virgül’ü eklememiz şarttır.

• Kodumuzu yazarken istediğimiz gibi yazım şekli kullanabiliriz. Mesela;

extern function merhabaDunya() { WMLBrowser.setVar("mesaj","Surpriiizzz :))"); WMLBrowser.refresh(); // Fonksiyonumuz hazır…} gibi bir yazım da doğrudur, fakat okunaklı kod yazmanın önemini bildiğiniz için böyle bir yazımI tercih etmeyeceğinizi biliyorum.

• Fonksiyon isimlerinden sonra parantezleri koymayı unutmayın. Ayrıca fonksiyon içeriğini süslü parantezler içinde yazmanız gerektiğini unutmayın.

function topla ( ) { ... // Kodlar buraya yazılır... }

WMLSCRIPT FONKSİYONLARI

Fonksiyon Tanımlama

Fonksiyonlar, WMLScript’in (ve diğer programlama dillerinin) en önemli unsurlarıdır. WML sayfalarından WMLScript sayfalarındaki kodlara sadece fonksiyonlarla ulaşılır. Programınızda kullanıcının girdiği iki sayıyı toplayarak sonucu ekrana yazmak istediğinizi düşünün. Bunu yapmak için biraz kod yazmanız yeterli olacaktır. Fakat bunu her kartta yapmanız gerektiğini düşünün. Durmadan aynı kod satırlarını yazmak işkence olmaz mıydı? Bir de yaptığınız işlemin toplama yapmak kadar basit olmadığını, daha ağır işlemler yapmanız gerektiğini düşünün. O zaman hayat çekilmez olabilirdi…İşte fonksiyonlar burada sahneye çıkar ve bize hayatı yaşanabilir kılarlar. Yapmak istediğiniz işlemi bir fonksiyon bloğu içinde tanımlarsınız ve ihtiyaç duyduğunuz zaman sadece o fonksiyonun adını yazarak onu çağırırsınız. Aslında fonksiyonun tanımını yapmak onu kullanmaktan daha zor. Bu nedenle kafanızı karıştırmayı bırakıp örnekler üzerinden hareket etmek daha iyi olacak sanırım…Az önceki WMLScript kodlarına geri dönelim;


Fonksiyonu “function” kelimesini yazarak tanımlarsınız. Bu kelimeden sonra da fonksiyona verdiğiniz ismi yazmanız gerekir. Bizim buradaki fonksiyonumuzun ismi “merhabaDunya”. Hemen ardından “(” ve “)” karakterlerini yazmalısınız. Fonksiyonun içindeki kodları da “{” ve “}” karakterleri arasına yazmalısınız. En genel haliyle bir fonksiyonun görünümü aşağıdaki gibidir;

function deneme(){ ... }

Fonksiyonunuzu isimlendirirken aşağıdaki kurallara dikkat etmelisiniz;

• Fonksiyon isimleri büyük-küçük harf duyarlıdır. “merhaba()” ile “Merhaba()” aynı fonksiyonu göstermez..

• Fonksiyonun ismi sadece harf veya “_” karakteriyle başlamalıdır. Diğer karakterler sayısal da olabilir.

• İsmin içinde noktalama işaretleri olmamalıdır.

“extern” anahtar kelimesi

Örnek kodumuzda bir de “extern” ifadesi var. Bu ifade fonksiyonun dışarıdan çağırılıp çağırılamayacağını belirler. Eğer fonksiyonunuza dışarıdan erişmek isterseniz (mesela biz örneğimizde bir WML sayfasından eriştik) bu ifadeyi kullanmalısınız. Aksi takdirde fonksiyona sadece aynı dosyadaki diğer fonksiyonlardan erişebilirsiniz.

Şimdi kodlarımızı açıklamaya devam edelim.

WMLBrowser.setVar("mesaj","Surpriiizzz :))");

Örnek kodumuzdaki satırlardan ilki bu. Biraz düşününce size hiç de yabancı gelmediğini farkedeceksiniz. setVar() fonksiyonunu daha önce “Değişkenler” konusunda görmüştük. Değişken tanımlamaya yarıyordu. Peki önündeki “WMLBrowser” ifadesi nedir diyeceksiniz. Aslında bu dili geliştirenler bizden önce birtakım fonksiyonlar oluşturup onları belirli başlıklar altına yerleştirmişler ve bu genel başlıklara “kütüphane” ismini vermişler. İşte “WMLBrowser” WMLScript’teki kütüphanelerden biridir. Bu kütüphanede tanımlı birkaç fonksiyon vardır ve biz zamanı gelince hem bu fonksiyonları, hem de diğer kütüphanelerdeki fonksiyonları öğreneceğiz. Şimdiden bir tanesini öğrendik bile. Buradaki setVar() fonksiyonuyla “mesaj” isminde bir değişken yaratıp buna “Surpriiizzz :))” değerini veriyoruz.

WMLBrowser.refresh();

Bu satırda da WMLBrowser kütüphanesindeki “refresh ()” fonksiyonunu kullanıyoruz, bu, daha önce WML’de öğrendiğimiz <refresh> elemanıyla aynı işleve sahip, yani sayfayı güncellemeye yarıyor.Her zaman kütüphane ismi ile fonksiyon ismi arasında “.” (nokta) karakteri bulunması gerektiğini unutmayın.

Açıklama Satırları

Kodumuzdaki satırlardan biri de şöyle;

// Fonksiyonumuz hazır…

Bu satır WAP tarayıcı tarafından görmezlikten gelinecektir. Daha önce WML konusunda da işlediğimiz açıklama satırları, burada “//” ve “/* … */” işaretleriyle tanımlanırlar.

// Tek satırlık açıklama

/* Çoksatırlıaçıklama */

Değişken Kullanımı

Şimdi ilk baştaki örneğimize tekrar geri dönebiliriz. Hatırlarsanız örneğimizdeki WML sayfasında aşağıdaki satırlar bulunmaktaydı;

<a href="ilk.wmls#merhabaDunya()">WMLScript'i çalıştır !</a><br/> $(mesaj)

Burada “mesaj” isimli bir değişkenin kullanıldığını görüyorsunuz. Peki bu değişken nerede tanımlanmış? Tabii ki “ilk.wmls” dosyasındaki “merhabaDunya()” isimli fonksiyonun içinde. Bu fonksiyonda aşağıdaki gibi bir satır bulunmakta;

WMLBrowser.setVar("mesaj","Surpriiizzz :))");

setVar() fonksiyonuyla tanımladığımız “mesaj” değişkeni, WML sayfamızda da aynı adla kullanılabiliyor. Artık bir WML dosyasından WMLScript dosyasına ulaşmayı ve hatta oradaki değişkenleri kullanmayı genel mantık olarak biliyoruz. Eğer ben hala anlamadım diyorsanız merak etmeyin, yakında çok çok iyi anlayacaksınız.

Karakter Katarları (String İfadeler)

WMLScript’te karakter katarlarını (String) çift tırnak (“...”) veya tek tırnak (‘...’) karakterleri arasında tanımlarsınız. Az önceki örnek satırımızı hatırlayalım;

WMLBrowser.setVar("mesaj","Surpriiizzz :))") ;

Burada bu kelimeyi yazmak için “Surpriiizzz :))” yazımını kullanabileceğimiz gibi ‘Surpriiizzz :))’ yazımını da tercih edebilirsiniz. Boş bir katar yaratmak için ard arda iki çift tırnak (“”) veya iki tek tırnak (‘’) yazabilirsiniz.Bazen hem çift tırnak hem de tek tırnak kullanma ihtiyacınız doğabilir. Örneğin aşağıdaki ifadeyi hem çift tırnak, hem de tek tırnak içinde nasıl yazabileceğimizi görelim;

Ana Metin : Bir de Aylin’in şu huyu olmasa...Çift tırnak içinde: “Bir de Aylin’ in şu huyu olmasa...” Tek tırnak içinde: ‘Bir de Aylin\’ in şu huyu olmasa...’

Gördüğünüz gibi çift tırnak içinde farklı bir yazım yoktur, normal bir şekilde metin yazılmıştır. Fakat tek tırnak içindeki yazımda normal bir yazım şekli hataya neden olacaktır. Çünkü ana metinde de bir tek tırnak karakteri bulunmaktadır ve tarayıcı kesme işaretini katarın bittiği yer olarak algılayacaktır. Bu hatanın önüne geçmek için tek tırnak içindeki yazımda ana metindeki tek tırnak karakterinin önüne “\” karakteri eklenmiştir. Bu karaktere (\) “kaçış karakteri” adı verilir. Bu karakterle birleştirilerek oluşturulan özel karakterleri metninize eklemek istediğinizde aşağıdaki tablodan faydalanabilirsiniz.

Asıl Karakter Kaçış karakteri Normal Metin Örnek Kullanım

‘ \’ Ali’nin Ali\’nin

“ \” “Hayvanlar Alemi” \”Hayvanlar Alemi\”

\ \\ No:4\12 No:4\\12

Aslında bunlardan başka karakterlerle de kaçış karakterini kullanabilirsiniz. Fakat şimdilik bunlar bize gerekli değildir.

WML Fonksiyon Argümanları

Argümanlar fonksiyona bazı değerleri yollamak için kullanılır. Değerler değişkenler yardımıyla yollanır, böylece fonksiyonumuz çok daha kullanışlı hale gelir. Aşağıda argümansız ve argümanlı fonksiyon şablonları verilmiştir;

function topla ( ) function topla (a,b){ {... ...} }

Sol taraftaki fonksiyon herhangi bir değer almamıştır, dolayısıyla toplama yapmak gibi bir işlem için fazla kullanışlı değildir, fakat sağdaki fonksiyon iki değer alabilir ve bu iki değeri içinde hesaplayarak sonucu bize bildirir. Bu da demektir ki biz istediğimiz iki değeri bu fonksiyona göndererek işlem yaptırabiliriz. Mesela topla (16,9) bize 16 ve 9 ‘un toplamını, topla (4,8) bize 4 ve 8 in toplamını verir. Gördüğünüz gibi tek bir fonksiyonla istediğimiz sayı çiftinin toplamını elde edebiliyoruz. İşte fonksiyonların en büyük güçlerinden biri budur. Şimdi baştaki örneğimizdeki bir fonksiyonu tekrar yazalım;

WMLBrowser.setVar("mesaj","Surpriiizzz :))") ;

Buradaki setVar() fonksiyonunun iki argüman aldığına dikkat edin. Hatırlarsanız bu fonksiyon değişken oluşturmaya yarıyordu. Fonksiyon iki parametreyle çalışıyor, ilki değişkenin ismini belirlemek için, ikincisi aldığı değeri belirlemek için kullanılıyor. WMLScript’i öğrendikçe bu tür fonksiyonları bizler de oluşturacağız, hiç endişeniz olmasın, yakında birer fonksiyon canavarı olacaksınız

return ifadesi

Az önce iki sayıyı toplamak için bir fonksiyon şablonu yazmıştık. Peki buradan dönecek değeri nasıl kullanırız ? Şimdi fonksiyonumuzu biraz daha ciddi bir şekilde yazalım;

function topla(a,b) { return (a+b);}

“return” ifadesi fonksiyondan geriye bir değer döndürmek için kullanılır. Yukarıda “topla” fonksiyonu a ve b değişkenlerinin toplamını geriye döndürür. Şimdi bu fonksiyonu başka bir yerde kullanalım;

değeri oluyordu. Burada değişkene ismini normal bir şekilde çift tırnak içinde vermişiz, fakat değerini verirken biraz değişik bir yöntem kullanmışız. Çift tırnak içinde sabit bir değer vereceğimize “topla()” fonksiyonunu çağırmışız. Fonksiyona parametre olarak 4 ve 13 değerlerini vermişiz. Burdan dönen değer 17 olacaktır ve 17 değeri “toplam” isimli değişkene aktarılacaktır. Herşey bu kadar basit işte... “toplam” değişkeni de WML sayfasında görüntülendiğinde sayfada “17” rakamının görünmesi lazım, bakalım görünecek mi?

Bağlantıyı Seçince Şekil 2-3 Şekil 2-4

Eğer 17 rakamından farklı bir değer elde etmek isterseniz tek yapmanız gereken “topla()” fonksiyonuna yolladığınız 4 ve 13 parametrelerini değiştirmek. Dikkat etmeniz gereken tek şey fonksiyonu çift tırnak karakterleri arasına yazmamak...

Bir Fonksiyondan Diğer Fonksiyona Erişmek

Az önceki örneğimizde farkında olmadan aynı dosya içindeki iki fonksiyonun birbiriyle nasıl haberleştiğini öğrendik. Aslında biz WMLScript konusu ile ilgili verdiğimiz ilk örnekten beri fonksiyonlar arasında hep iletişim kurduk. İlk baştaki WMLScript kodlarını tekrar inceleyelim isterseniz;


merhabaDunya() isimli fonksiyonda iki farklı fonksiyonu çağırmışız, biri WMLBrowser kütüphanesindeki setVar() fonksiyonu, diğeri aynı kütüphanedeki refresh() fonksiyonu. Şaşırtıcı , değil mi? Farkında olmadan fonksiyon içinde fonksiyon kullanmışız. Bir önceki konuda da aynı WMLScript dosyasındaki iki fonksiyon birbiriyle haberleşiyordu, bunlardan toplamaYap() fonksiyonu topla() fonksiyonuna parametre göndererek onu çağırıyor ve kullanıyordu. Peki sınırlarımız sadece bu kadar mı? Hayır...İstersek başka bir WMLScript sayfasındaki fonksiyona da erişebiliriz. Örneğimizi inceleyin;

BURAYA YAZI EKLENECEK

Fonksiyonlara Kart’lardan Ulaşmak

Bu konuda öğreneceğimiz konuyu biz zaten örneklemiştik. Fakat şimdi olayın biraz daha detayına ineeğiz...WMLScript’in en büyük görevi WML sayfalarına hizmet etmektir. Dolayısıyla WML sayfalarından WMLScript sayfalarına nasıl ulaşacağımızı bilmemiz gerekir. İlk örneğimizi hatırlayalım;

<?xml version="1.0" encoding='ISO-8859-9'?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml> <card id="anasayfa" title="İlk WMLScript Örneği"> <p> <a href="ilk.wmls#merhabaDunya()">WMLScript'i çalıştır !</a><br/> $(mesaj) </p> </card></wml>

Gördüğünüz gibi WMLScript sayfasına ulaşmak için dosyanın adını ve içinde ulaşmak istediğimiz fonksiyonun ismini yazıyoruz. Bu ikisinin arasına “#” karakterini koymayı unutmamalıyız. Ulaşmak istediğimiz dosyanın ismini yazarken göreceli bir yol yazabileceğimiz gibi tam bir adres de yazabiliriz. Örneğin;

<a href="http://www.sihirlibolge.com/wmlscriptler/ilk.wmls#merhabaDunya()">

gibi bir adres tanımlamamız da mümkündür. Eğer WML dosyası ve WMLScript dosyası aynı dizindeyse bizim örneğimizdeki gibi uzun uzun adres yazmadan dosyaya ulaşmamız mümkündür.Yukarıdaki örnekte WMLScript sayfasına bir bağlantı aracılığıyla (<a> elemanını kullanarak) ulaştık. İstersek bunu olaylar yardımıyla da yapabiliriz. Mesela bir <timer /> elemanı ve “ontimer” olayı ile de WMLScript dosyasına ulaşmak isteyebiliriz. O zaman aşağıdaki gibi bir yapı kullanmalısınız;

<onevent type="ontimer"> <go href="ilk.wmls#merhabaDunya()"/></onevent><timer value="60"/>Yukarıdaki yazımda 60 sn sonra WMLScript dosyamızdaki merhabaDunya() fonksiyonu çağrılacaktır. Benzeri şekilde “onenterforward”, “onenterbackward” veya “onpick” gibi bir olayı da kullanarak WMLScript dosyalarına erişebilirsiniz.WMLScript Fonksiyonlarına Argüman YollamaNasıl ki WMLScript sayfalarından WML sayfalarına ulaşabiliyorsak, WML sayfalarından da WMLScript sayfalarındaki fonksiyonlara ulaşmak ve onlara parametreler göndermek mümkündür. Örneğin kullanıcının girdiği iki sayıyı toplamak istediğimizi ve ekrana sonucu yazmak istediğimizi farz edelim. Bunu yapmak için WMLScript sayfasına kullanıcının girdiği değerleri yollayabilmemiz lazımdır. Buna benzer bir toplama işlemini daha önce yapmıştık, fakat orada kendi istediğimiz sayıları toplayarak ekrana yazdırıyorduk. Aşağıdaki örnekte bunu nasıl yapabileceğimizi göreceğiz;

extern function topla(a,b) { WMLBrowser.setVar("toplam",a+b); WMLBrowser.refresh();}

Yukarıdaki sayfayı “toplamaYap.wmls” adıyla kaydedin. Burada iki argüman alarak (a ve b) bunların toplamını “toplam” isimli bir değişkene aktaran bir fonksiyonumuz var. Şimdi sıra asıl WML sayfamızda;


<wml> <card id="anasayfa" title="Dört İşlem"> <p> Sayıları giriniz: <br/> <input name="sayi1" maxlength="5"/>

<input name="sayi2" maxlength="5"/> <a href="toplamaYap.wmls#topla($(sayi1),$(sayi2))">Topla</a><br/> Toplam: $(toplam)

</p> </card></wml>

Yukarıdaki sayfayı da WMLScript sayfasıyla aynı dizine kaydedin. Fonksiyona parametre yollamanın ne kadar basit olduğunu siz de fark etmişsinizdir Sadece fonksiyonun parantezlerinin içine değişken isimlerini yazıyoruz. Birden fazla değişken yolluyorsak aralarına “,” koymalıyız. Kullanıcının girdiği değerleri topla() fonksiyonuna yolluyoruz. Bu fonksiyon zaten iki parametre alıyordu (a ve b), bizim yolladığımız $(sayi1) değişkeni “a“ parametresine, $(sayi2) değişkeni “b“ parametresine gidecek ve bu ikisinin toplamı “toplam” değişkenine aktarılarak WML sayfamıza geri dönecektir. Bakalım kodumuz nasıl çalışmış ;

Bağlantıyı seçinceŞekil 2-5 Şekil 2-6

Yavaş yavaş bir hesap makinesi yapmaya başladık bile Burada dikkat etmeniz gereken bir konu var; Eğer fonksiyona aktaracağımız değer sayısal bir ifadeyse yukarıdaki yazım yapılır, fakat bir karakter katarıysa (mesela “Merhaba...” gibi), o zaman değişkeni tırnak içine alarak yollamalısınız. Eğer örneğimizdeki WML sayfasından parametre gönderirken parametreleri aşağıdaki gibi tırnak içine alırsanız, giden değerler sadece karakter katarı olarak işlem görecektir.

<a href="toplamaYap.wmls#topla( ‘$(sayi1)’ , ’$(sayi2)’ )">Topla</a><br/>

Bakalım bu şekilde bir parametre aktarımında karşımıza ne çıkacak?

Şekil 2-7

topla() fonksiyonuna parametreler tırnak içinde geldiğinden ( topla(‘12’,’45’) şeklinde ) karakter katarı şeklinde işlem görülmüş ve bu karakter katarları sadece uç uca eklenerek geri gönderilmiştir. İlerleyen konularda (+) operatörünü daha yakından tanıyacağız, ama şimdiden onun hakkında şunu öğrensek iyi olacaktır; Eğer değişkenler sayısal ifadelerse (+) operatörü matematiksel toplama işlemini yapar, fakat tırnak içindeki değişkenler karakter katarı muamelesi görür ve (+) operatörü bu katarları sadece uç uca ekler. Zaten “12” ve “45” rakamlarının birbirine eklenmiş ve “1245” ifadesini oluşturmuş halini yukarıdaki ekran görüntüsünden de görebilirsiniz.

WMLSCRIPT DEĞİŞKENLERİ

Bir değişkenin veri depolamak için kullanıldığını, bu veriyi istediğimiz zaman okuyabileceğimizi veya değiştirebileğimizi biliyorsunuz. Değişkenler WMLScript’te de kullanılmaktadır. Aşağıda WMLScript’te nasıl değişken tanımlanabileceğini görüyorsunuz;

var x = 156 ; var y;var atasozu = “Sakla samanı, gelir zamanı” ;

Değişkeni tanımlamak için önüne “var” bildirimi gelir. Sonra isteğe bağlı olarak “=” işaretiyle hemen bir değer verebilirsiniz. Yukarıda “x” ve “atasozu” değişkenlerine onları oluşturur oluşturmaz değer vermişiz. Fakat “y” değişkenine henüz bir değer verilmemiş.Değişkenlere sayısal değer verilirken normal bir yazım yaparsınız, fakat kelime, cümle gibi karakterlerden oluşan bir değer verilecekse (string-karakter katarı da denir), bu değeri tırnak içinde yazmak gerekir. Birden fazla değişken tanımlanacaksa değişkenlerin arasına “,” konularak aşağıdaki gibi bir yazım kullanılabilir;

var x,y,z ;

İsterseniz bir örnek verelim;

extern function topla(){ var x,y; x=21;

y=29; WMLBrowser.setVar(“toplam”,x+y); WMLBrowser.refresh();}

İsterseniz gerisini de siz getirmeyi deneyin, WML sayfasını siz hazırlayın. Yukarıdaki WMLScript sayfasına istediğiniz ismi verin ve WML sayfasından yukarıdaki foksiyonu çağırın. WML sayfasından $(toplam) değişkenini çağırdığınızda ekrana “50” yazdığını göreceksiniz. Yaptığımız işlem çok basit, önce x ve y değişkenleri tanımlıyoruz, sonra onlara değer atıyoruz. Sonrada “toplam” değişkenine bu değişkenlerin toplamını atıyoruz.

WMLScript ‘te genel kullanımı olan bir değişken (global değişken) kullanımı yoktur, yani bir fonksiyonda tanımladığınız değişken sadece o fonksiyonda kullanılabilir. Javascript’le uğraşmışsanız orada sayfanın başında tanımladığınız bir değişkenin tüm fonksiyonlardan ulaşılabilir olduğunu biliyorsunuzdur. Fakat bu özellik WMLScipt’te desteklenmemektedir.

Değişkeninizi isimlendirirken aşağıdaki kurallara dikkat etmelisiniz;

• Değişken isimleri büyük-küçük harf duyarlıdır. “deg1” ile “Deg1” aynı değişkeni göstermez..

• Değişkenin ismi sadece harf veya “_” karakteriyle başlamalıdır. Diğer karakterler sayısal da olabilir.

• İsmin içinde noktalama işaretleri olmamalıdır.

WMLScript Veri Tipleri

Bir önceki konudaki örneklerde gördüğünüz gibi , değişken tanımlarken onun hangi tipte olduğunu belirtmeyiz. Sadece önüne “var” bildirimini yazarız, olur biter. O değişken sayı mıdır, karakter katarı mıdır, belirsizdir, ta ki biz ona bir değer atayana kadar. Bu da WMLScript’in Javascript gibi zayıf tip tanımlı olmasından kaynaklanır. Diğer programlama dillerinin çoğunda değişkeni tanımlarken ona hangi değeri vereceğimizi de önceden bilir ve tipini ona göre bildiririz. Bu durum WMLScript’te geçerli değildir.Yine de WMLScript değişkenleri aslında 5 farklı veri tipi cinsinde işlem görür. Bunlar aşağıda listelenmiştir;

String :

“String” tipindeki değişkenler içinde karakter katarı barındırır. “Kaç defadır ‘katar’ diyorsun, o ne peki?” dediğinizi biliyorum ve size bir türkçe sözlük edinmenizi tavsiye ediyorum . Karakter katarı , içinde birtakım karakterler barındırır ve sayısal işlem görmez. Yani “merhaba” , “F16 Uçağı” gibi ifadeler hep karakter katarıdır. Hatta bir adım ileri gidip “516” ifadesinin de karakter katarı olduğunu ve sayısal işlem görmeyeceğini belirtmek isterim-ki bunu daha önce örneklemiştik.. Değişkenin alacağı değerin sayısal işleme girebilmesi için tırnak işaretleri arasına alınmaması gerekir. var a = “145” ; // Sayısal bir ifade değildir, sayısal işleme sokulamaz. var b = 145 ; // Sayısal bir ifadedir . Sayısal işlem yapılabilir.

Yukarıdaki “a” değişkeni bir karakter katarıdır, çünkü tırnak içine alınmıştır. Halbuki “b” değişkeni ile toplama , çıkarma gibi işlemler yapabilirsiniz.

Integer :

“Integer” tipindeki değişkenler sayısal ifadelerdir ve –2147483648 ile 2147483648 sayıları arasında değer alabilirler. Örneğin;

var b = 145 ; var c = 946584 ;

Float :

“Float” tipindeki değişkenler de sayısal ifadelerdir . Desteklenen en yüksek değer 3.40282347E+38 dir. Minimum pozitif değer ise 1.17549435E-38 dir. Burada dikkat etmeniz gereken nokta, bazı cihazların bu tipteki değerleri desteklemediğidir. İleride öğreneceğimiz “float()” fonksiyonuyla cihazın bu tipi destekleyip desteklemediğini öğrenebiliriz. Aşağıda örnekleri göreceksiniz;

var x = 11.8 ; var y = - 4.9 ;

Boolean :

“Boolean” tipli değişkenler sadece iki değer alabilir; “true” veya “false”. Bu tipteki değişkenleri koşullu ifadelerle çalışırken (ileride öğreneceğiz) kullanmanız gerekebilir. “true” değeri “doğru” anlamında, “false” değeri “yanlış” anlamında kullanılır. var konus = “false” ; var dinle = “true” ;

Invalid :

Bazen yaptığımız işlemler sonucu değişkenimiz geçersiz bir değer kazanır. Örneğin; var a = 15 / 0 ;

gibi bir ifade geçersiz olacaktır, çünkü bir sayı sıfıra bölünemez. Bu gibi durumlarda değişken “invalid” değerini taşır. Daha sonra öğreneceğimiz “isvalid” operatörü yardımıyla değişkenin değerinin “invalid” olup olmadığını öğrenebiliriz.

setVar() ve getVar() Fonksiyonları

Şu ana kadar öğrendiğimiz WML değişkenleri ve WMLScript değişkenlerinin birbirinden farklı şeyler olduğunu unutmayınız. WML değişkenleri WML’in kendi içinde desteklediği değişkenlerdir ve <setvar> gibi bir elemanla tanımlanabilirler. Kullanırken “$(degisken)” gibi bir yapıda kullanılırlar.WMLScript değişkenleri ise WMLScript dosyalarında bulunur ve “var” bildirimi ile tanımlanır.

WMLScript’teki “setVar()” fonksiyonu WML’de değişken tanımlamaya yarar. Bu fonksiyon ve kullanımını daha önce görmüştük. Aşağıdaki gibi bir yapıda kullanılıyordu;

WMLBrowser.setVar(“mesaj”, “Merhaba...”);

Burada “mesaj” isimli bir değişken tanımlanmış ve bu değişkene “Merhaba...” değeri verilmiştir.setVar() fonksiyonu aşağıdaki değerlerden birini döndürür;

Eğer fonksiyon başarılı bir şekilde çalışmışsa “true” değerini döndürür.

Eğer değer değişkene aktarılamadıysa “false” değerini döndürür.Eğer değişken ismi veya değer yanlış bir sözdizimine sahipse, veya noktalama işaretleri gibi isimlendirmede kullanılması yasak karakterler kullanılmışsa “invalid” değerini döndürür.

Bu bilgileri yakında öğreneceğimiz koşullu ifadelerde kullanabiliriz.

Peki WML sayfasında tanımladığımız değişkene WMLScript dosyasından nasıl ulaşabiliriz? Daha önce bu tarz bir problemi WML sayfasından WMLScript sayfasındaki fonksiyona parametre yollayarak çözmüştük.

<a href="toplamaYap.wmls#topla($(sayi1),$(sayi2))">Topla</a><br/>

Hatırladınız, değil mi? Burada WMLScript sayfamızdaki fonksiyona parametre olarak bizim WML sayfamızdaki değişkenleri yollamıştık. Şimdi biraz daha değişik bir yöntemle aynı değişkenlere nasıl ulaşacağımızı göreceğiz. Bu konuda bize WMLScript’in getVar() fonksiyonu yardımcı olacak. Aşağıdaki örneği inceleyiniz;


<wml> <card id="anasayfa" title="Kelime İşlem"> <p> Sözcükleri Giriniz :<br/> <input name="soz1" maxlength="15"/>

<input name="soz2" maxlength="15"/> <a href="sozcukBirlestir.wmls#birlestir()">Birleştir</a><br/> Cümle: $(cumle)

</p> </card></wml>

Yukarıdaki WML sayfasını istediğiniz bir isimle kaydedin. Bu sayfada size yabancı gelen hiçbirşey olmadığını tahmin ediyorum. Şimdi de WMLScript sayfamızı yazalım;

extern function birlestir() { var a,b; a=WMLBrowser.getVar("soz1"); b=WMLBrowser.getVar("soz2"); WMLBrowser.setVar("cumle",a+" "+b); WMLBrowser.refresh();}

Burada “a” ve “b” isimli iki değişken tanımladık ve bunlara değerlerini WMLBrowser kütüphanesindeki getVar() fonksiyonuyla verdik. Dikkat ederseniz “soz1” ve “soz2” parametreleri WML sayfamızdan geliyor. Sonra da a ve b değişkenlerini setVar() fonksiyonu içinde “+” operatörünü kullanarak birleştirdik ve “cumle” değişkenine aktardık. Birleştirirken arada boş bir “ ” ifadesi bırakmamızın nedeni, kelimelerin birbirine bitişik olmasını önlemek. Aslında ikinci kelimeyi girerken önce bir boşluk bırakarak yazsaydınız, veya ilk kelimenin sonuna fazladan bir boşluk koysaydınız da aynı etki olurdu. Fakat size değişik bir yazım şekli göstermek istedim.

Aşağıda ekran görüntülerini görebilirsiniz;


Hala mı? Bu nasıl bir sevgidir böyle ?

WMLSRIPT OPERATÖRLERİ

Farkında mısınız bilmiyorum ama, siz hep bu kitaptan bir adım önde gidiyorsunuz. Bir konuya başladığımızda siz o konu hakkında çoktan örnekler yapmış ve bir önbilgiye sahip vaziyette başlıyorsunuz. Bu konu içinde bu durum geçerli. Daha önce örneğin (+) operatörünü kullanarak nasıl iki sayıyı toplayabileceğimizi öğrenmiştik. Veya “=” operatörü ile bir değişkene nasıl değer atayabileceğimizi öğrenmiştik. WMLScript oldukça fazla sayıda operatörü destekler. Daha önce diğer programlama dilleriyle uğraşmışsanız bu operatörleri zaten öğrenmişsinizdir. Fakat yine de ben hiçbirşey bilmediğinizi kabul ederek hareket edeceğim.

Aritmetik Operatörler

Bu operatörler matematiksel işlemleri yapmamızda yardımcı olurlar.

“+” operatörü : Toplama işlemi yapar. Örn; var a = 3 + 7 (a’nın değeri 10 olur.)“-“ operatörü : Çıkarma işlemi yapar. Örn; var a = 14-3 (a’nın değeri 11 olur.)“*” operatörü : Çarpma işlemi yapar. Örn; var a = 2*6 (a’nın değeri 12 olur.)“/” operatörü : Bölme işlemi yapar. Örn; var a = 5/2 (a’nın değeri 2.5 olur.)“div” operatörü : Bölme işlemi yapar. Bölümün sadece tamsayı kısmını alır. Örn; var a = 5 div 2 (a’nın değeri 2 olur.)“%” operatörü : Mod alma işlemi yapar (Sayıların bölümünden kalan sayıyı bulur). Örn; var a = 5%2 (a’nın değeri 1 olur.)“++”operatörü : Değişkenin önüne veya arkasına gelerek değerini bir arttırır. Önüne gelirse (++a gibi) önce değerini bir arttırır, sonra işleme sokar. Arkasına gelirse (a++ gibi) önce işleme sokar, sonra değerini bir arttırır. “a++” veya “++a” ifadesi “a=a+1” ile aynı şeydir.Örn; var a =10; var b = a++; // İşlem sonunda a =11, b= 10 dur.Örn; var a =10; var b = ++a; // İşlem sonunda a =11, b= 11 dir.

“--“operatörü : Değişkenin önüne veya arkasına gelerek değerini bir azaltır. Önüne gelirse (--a gibi) önce değerini bir azaltır, sonra işleme sokar. Arkasına gelirse (a-- gibi) önce işleme sokar, sonra değerini bir arttırır. “a--” veya “--a” ifadesi “a=a-1” ile aynı şeydir.Örn; var a =10; var b = a--; // İşlem sonunda a =9, b= 10 dur.Örn; var a =10; var b = --a; // İşlem sonunda a =9, b= 9 dur.

Atama Operatörleri

Bu operatörler değişkenlere değer atamamızda yardımcı olurlar.

“=” operatörü : Eşitliğin sağındaki değeri eşitliğin solundaki değişkene atar.

Örn; var a = 3 (a’nın değeri 3 olur.)

“+=” operatörü : a+= 3 ifadesiyle a=a+3 ifadesi aynı anlama gelir. Kısaltılmış bir yazı biçimidir.

Örn; var a=7; a+=2; (a’nın değeri 9 olur) “-=” operatörü : a-= 3 ifadesiyle a=a-3 ifadesi aynı anlama gelir.

Örn; var a=7; a-=2; (a’nın değeri 5 olur)

“*=” operatörü : a*= 3 ifadesiyle a=a*3 ifadesi aynı anlama gelir.

Örn; var a=7; a*=2; (a’nın değeri 14 olur) “/=” operatörü : a/= 3 ifadesiyle a=a/3 ifadesi aynı anlama gelir.

Örn; var a=7; a/=2; (a’nın değeri 3.5 olur)

“div=” operatörü : a div= 3 ifadesiyle a=a div 3 ifadesi aynı anlama gelir.

Örn; var a=7; a div=2; (a’nın değeri 3 olur)

“%=” operatörü : a%= 3 ifadesiyle a=a%3 ifadesi aynı anlama gelir.

Örn; var a=7; a%=2; (a’nın değeri 1 olur) Bitsel operatörlerle ilgili de kısa yazım kullanılabilir (a&=4 gibi). Fakat bitsel operatörler bizim bir sonraki konumuz olduğundan burada diğer kısa yazım şekillerini vermeyeceğim.

Bitsel Operatörler

Bu operatörler bit bazında işlem yapmamızda yardımcı olurlar. Bit bazında işlemler ikilik sayma sisteminde yapılır. “AND”, “OR”, “XOR” gibi işlemler hakkında bildiklerinizi unuttuysanız , bu konuları anlatan bir kitaptan bilgilerinizi tazelemenizde fayda var.

“&” operatörü : Bit bazında “AND” işlemi yapar.

Örn; var a = 4&5 ;

4’ün ikilik düzendenki değeri 100, 5’inki 101 dir. Bu sayıların “AND” işlemine girmiş hali 100 sonucunu verir- ki bu da onluk düzende 4 sayısıdır. Bu nedenle burada “a” değişkeni 4 değerini taşır. “ | ” operatörü : Bit bazında “OR” işlemi yapar.

Örn; var a = 4 | 5 ;

4’ün ikilik düzendenki değeri 100, 5’inki 101 dir. Bu sayıların “OR” işlemine girmiş hali 101 sonucunu verir- ki bu da onluk düzende 5 sayısıdır. Bu nedenle burada “a” değişkeni 5 değerini taşır.

“ ^ ” operatörü : Bit bazında “XOR” işlemi yapar.

Örn; var a = 4 ^ 5 ;

4’ün ikilik düzendenki değeri 100, 5’inki 101 dir. Bu sayıların “XOR” işlemine girmiş hali 001 sonucunu verir- ki bu da onluk düzende 1 sayısıdır. Bu nedenle burada “a” değişkeni 1 değerini taşır.

“ ~ ” operatörü : Bit bazında “NOT” işlemi yapar.

Örn; var a = ~4 ;

4’ün ikilik düzende 32 bit şeklinde gösterim şekli 00000000000000000000000000000100 dir. Bu sayının “XOR” işlemine girmiş hali 11111111111111111111111111111011 sonucunu verir- ki bu da onluk düzende -5 sayısıdır. Bu nedenle burada “a” değişkeni -5 değerini taşır.

“ << ” operatörü : Bit bazında sola kaydırma işlemi yapar. Meydana gelen boşlukları “0” ile doldurur.

Örn; var a= -2147483646 << 1;

-2147483646 ‘nın ikilik düzende 32 bit şeklinde gösterimi 10000000000000000000000000000010 şeklindedir. Örneğimizde “<<” operatörünün sağında “1” olduğundan sadece 1 bit sola kaydırma işlemi olacak ve sayının sağında ortaya çıkacak boşluğa 0 konulacaktır. Böylece yeni ifade 00000000000000000000000000000100 şeklinde olacaktır ki bu da onluk düzende 4 sayısıdır. Bu nedenle burada “a” değişkeni 4 değerini taşır.

“ >> ” operatörü : Bit bazında sağa kaydırma işlemi yapar. Meydana gelen boşlukları işaret bitindeki değerle (en soldaki bit) doldurur.

Örn; var a= -2147483646 >> 1;

-2147483646 ‘nın ikilik düzende 32 bit şeklinde gösterimi 10000000000000000000000000000010 şeklindedir. Örneğimizde “>>” operatörünün sağında “1” olduğundan sadece 1 bit sağa kaydırma işlemi olacak ve sayının solunda ortaya çıkacak boşluğa işaret bitindeki değer olan 1 konulacaktır. Böylece yeni ifade 11000000000000000000000000000001 şeklinde olacaktır ki bu da onluk düzende -1073741823 sayısıdır. Bu nedenle burada “a” değişkeni -1073741823 değerini taşır.

“ >>> ” operatörü : Bit bazında sağa kaydırma işlemi yapar. “>>” operatöründen tek farkı meydana gelen boşlukları “0” ile doldurmasıdır.

Örn; var a= -2147483646 >>> 1;

-2147483646 ‘nın ikilik düzende 32 bit şeklinde gösterimi 10000000000000000000000000000010 şeklindedir. Örneğimizde “>>>” operatörünün sağında “1” olduğundan sadece 1 bit sağa kaydırma işlemi olacak ve sayının solunda ortaya çıkacak boşluğa 0 konulacaktır. Böylece yeni ifade 01000000000000000000000000000001şeklinde olacaktır ki bu da onluk düzende 1073741825 sayısıdır. Bu nedenle burada “a” değişkeni 1073741825 değerini taşır.

Mantıksal Operatörler

Bu operatörler mantıksal işlemleri yapmamızda bize yardımcı olurlar. WMLScript’te “ve”, “veya” ve “değil” mantıksal işlemleri desteklenir. Bu operatörler koşullu ifadelerle , karşılaştırma operatörleriyle bazı karar verme durumlarında kullanılırlar.

“ ! ” operatörü : Mantıksal bir ifadenin “değil”ini verir, yani ifadeyi mantıksal olarak tersine çevirerek ifade eğer doğruysa yanlışa, yanlışsa doğruya dönüştürür.Örn ; x = true; y = !x ;

“true” değeri WMLScript’te doğruyu, “false” değeri yanlışı ifade eder. Örnekte x değişkenine “true” değeri verilmiş, y değişkenine ise x’in “değil”i atanmıştır. Böylece y nin değeri “false” olur.

“ && ” operatörü : Mantıksal ifadeyi “ve” işlemine sokar. Geçmiş bilgilerinizden de hatırlayabileceğiniz gibi “ve” işlemine sokulmuş iki ifade , sadece iki ifadenin de doğru olduğu durumda doğru değerini, diğer durumlarda yanlış değerini döndürüyordu.

Örn; x = true; y = true; z = false; a= x&&y; b= z&&y; Örnekte a değişkeni “true”, b değişkeni “false” değerini taşır.

“ || ” operatörü : Mantıksal ifadeyi “veya” işlemine sokar. “veya” işlemine sokulmuş iki ifade , sadece iki ifadenin de yanlış olduğu durumda yanlış değerini, diğer durumlarda doğru değerini döndürür.

Örn;

x = true; y = false; z = false; a= x||y; b= z||y; Örnekte a değişkeni “true”, b değişkeni “false” değerini taşır. Karşılaştırma Operatörleri

Karşılaştırma operatörleri iki değeri belli kriterlere göre karşılaştırarak “true” veya “false” değeri döndürür. İleride öğreneceğimiz koşullu ifadelerle koşulu ifade ederken en çok bu operatörler kullanılır.

“= =”operatörü : Değerlerin birbirine eşit olma durumlarını kontrol eder. Eşitlerse “true”, değillerse “false” değeri döndürür.

Örn; 4 == 4; // true döndürür, 4==6 ; // false döndürür “Merhaba”==”Merhaba” // true döndürür

“ != ” operatörü : Değerlerin birbirine eşit olmama durumlarını kontrol eder. Eşitlerse “false”, değillerse “true” değeri döndürür.

Örn; 8 != 4; // true döndürür , 6!=6 ; // false döndürür “Merhaba”!=”merhaba” // true döndürür (çünkü büyük-küçük harf duyarlılığı vardır)

“ < ” operatörü : Sağına yazılan değerin solundakinden küçük olması durumunu kontrol eder. Küçükse “true”, değilse “false” değeri döndürür.

Örn; 4 < 14; // true döndürür, 14<6 ; // false döndürür

“ <= ” operatörü : Sağına yazılan değerin solundakinden küçük veya eşit olması durumunu kontrol eder. Küçük veya eşitse “true”, değilse “false” değeri döndürür.Örn; 4 <=4; // true döndürür, 4<=2 ; // false döndürür

“ > ” operatörü : Sağına yazılan değerin solundakinden büyük olması durumunu kontrol eder. Büyükse“true”, değilse “false” değeri döndürür.

Örn; 4 >2; // true döndürür, 4>6 ; // false döndürür

“ >= ” operatörü : Sağına yazılan değerin solundakinden büyük veya eşit olması durumunu kontrol eder. Büyük veya eşitse “true”, değilse “false” değeri döndürür.

Örn; 4 >=2; // true döndürür, 4>=6 ; // false döndürür Karakter Katarı (String) Operatörleri

“+” operatörü WMLScript’te sadece matematiksel işlem yapmak için kullanılmaz, karakter katarları üzerinde de işlem yapmak için kullanılır. Bundan başka karakter katarları üzerinde işlem yapan diğer operatör de “+=” operatörüdür.

“+” operatörü : Karakter katarlarını birbirine ekler.

Örn; var a = “Adın”+” ne?”;

Burada a’nın değeri “Adın ne?”olur.

“+=” operatörü : Karakter katarlarını birbirine ekler. Daha önce öğrendiğimizden farklı bir etkisi yoktur, kısaltılmış bir yazım şeklidir.

Örn; var a = “Adım”; a+=” Didem.”;

Burada a’nın değeri “Adım Didem.” olur.

Biraz düşününce ilginç bir toplama işlemi yapabileceğimizi fark edebiliriz. Sizce aşağıdaki toplama işlemi ne sonuç verir ;

var a = 4 + “8” ;

Burada 4 sayısı ile “8” karakteri toplanmaya çalışmaktadır. Böyle bir durumda WAP tarayıcısı sayıyı da karakter kabul edecek ve iki karakteri birbirine ekleyecektir. Burada a’nın değeri “48” olur.

typeof operatörü

Daha önce de bahsettiğimiz gibi aslında değişkenler 5 farklı veri tipinde değerlendirilirler. Fakat biz normal şartlarda onların hangi tipte olduğunu bilemeyiz. “typeof” operatörü bu nedenle vardır ve bize değişkenin o anki tipini sayı olarak gösterir. Aşağıdaki tablo hangi sayının hangi veri tipine karşılık geldiğinigöstermektedir;

WMLScript veri tipi typeof operatöründen dönen değer

Integer 0

Float 1

String 2

Boolean 3

Invalid 4

Örn;

var a = 13,6 ; var b = “Asla, asla deme!”; var c = typeof a; var d = typeof b; var e = typeof (34/0);

Burada c’nin değeri 1, d’nin değeri 2, e’nin değeri 4 olur.

isvalid operatörü

“isvalid” operatörü “invalid” veri tipindeki değişkenleri tespit etmek için kullanılır. Böylece bir değişkenle işlem yapmadan önce yapılabilecek hatanın önüne geçilebilir. Eğer sayı geçersizse “isvalid” operatörü “false” değerini döndürür.

Örn; var a = 25; var b = 12/0; var c = isvalid a; var d = isvalid b; var e = isvalid (34/0); Örnekte c değişkeni “true”, d ve e değişkenleri “false” değerini döndürür.

WMLSCRIPT KOŞULLU İFADELERİ

Koşullu ifadeler sizin program akışına müdahale etmenizi, hangi kodun çalıştırılıp hangisinin çalıştırılmayacağına karar vermenizi sağlar. Mesela kullanıcının girdiği değer 20’den büyükse ekrana hata mesajı getir, değilse devam et gibi mantıksal bir ifadeyi bu tip ifadelerle sağlarsınız.

if deyimi

“ if ” kelimesinin türkçedeki karşılığı “eğer” dir. Az önce bahsettiğimiz gibi bir durumu, yani “eğer sayı 20’den büyükse, şunu yap… ” gibi bir ifadeyi “if” deyimiyle uygularız. Aşağıdaki gibi bir söz dizimine sahiptir;

if (koşul) { // koşula uyuyorsa yapılacaklar…}else if (diğer koşul){ // diğer koşula uyuyorsa yapılacaklar…}else{ // hiçbir koşula uymuyorsa yapılacaklar…}

Biraz karışık mı duruyor? Meraklanmayın, aslında o kadar basit ki, yakında siz bile şaşıracaksınız. Öncelikle “if” deyiminin koşulunun parantez içinde “(…)” şeklinde yazılacağını bilmeliyiz. Ve bu koşula uyan durumlarda yapılacak işlemi de süslü parantezler içinde ( “{…}” gibi ) yazarız. En basit “if” bloğu aşağıdaki gibidir;if (…){ …} İlk yazımdaki “else” ifadesi size yabancı geldi, ama birazdan öğreneceğiz. Şimdi ifadeleri bir örnekle açıklayalım. Diyelim kullanıcının cinsiyetini öğrenmek isteyorsunuz. Ona hitap şeklinizi bu ekrana göre belirleyeceksiniz. Kullanıcı eğer erkekse ona “Bay …” diye, erkek değil de eğer bayan ise ona “Bayan …” diye, diğer durumlarda da “Sayın…” diye hitap etmek istiyorsunuz. İşte aşağıda bunun

kodla yazım şekli verilmiştir;

// kullanıcının cinsiyetinin “cinsiyet” değişkeninde tutulduğunu farzediyorumif (cinsiyet = = “Erkek”) // eğer kullanıcı erkekse{ hitap=”Bay”;}else if (cinsiyet = = “Bayan”) // erkek değil de eğer bayan ise{ hitap=”Bayan”;}else // diğer durumlarda{ hitap=”Sayın”;}

Gördünüz mü, bu kadar basit bir mantığı var işte. “else” ifadesi “diğer” durumu ifade eder ve isteğe bağlı olarak kullanılır. Yani “kullanıcı erkekse şunu şunu yap, diğer durumlar benim için önemli değil” diyorsanız, yukarıdaki ifadeyi aşağıdaki gibi yazabiliriz;

if (cinsiyet = = “Erkek”) // eğer kullanıcı erkekse{ hitap=”Vayy, kardeşim benim…”;}

Veya “kullanıcı erkekse şöyle, değilse böyle yap ” da diyebilirsiniz. O zaman da aşağıdaki gibi kodumuzu değiştirmelisiniz;

if (cinsiyet = = “Erkek”) // eğer kullanıcı erkekse{ hitap=” Vayy, kardeşim benim…”;}else // diğer durumlarda{ hitap=”Kıraathanemize sadece erkekler girebilir…”;}

Farkettiyseniz programın akış mantığı tamamen size kalmış, istediğiniz kadar “else” ifadesi ekleyebilir veya çıkarabilirsiniz. “if” deyimi gerçekten çok güçlüdür, ve programlama yaparken belki de en çok kullanılan deyimdir. Bu nedenle bu deyimi ve kullanımını iyi öğrenmenizi ve bol pratik yapmanızı tavsiye ederim.

Koşul operatörü

Aslında “Operatörler” başlığı altında işlemem gereken bir konu olmasına rağmen bu konuyu burada işlemenin daha doğru olacağını sanıyorum. Çünkü bu operatörün kullanımı mantık olarak “if” deyiminkiyle aynı. Aşağıdaki örneği inceleyin;

if (cinsiyet = = “Erkek”) { hitap=” Vayy, kardeşim benim…”;}

else // diğer durumlarda{ hitap=”Kıraathanemize sadece erkekler girebilir…”;}

WMLScript dilini oluşturanlar bu şekildeki bir ifade için daha kısa bir yazım şekli tanımlamışlar. Yukarıdaki ifadenin yeni yazım şekli aşağıdaki gibidir;

hitap = (cinsiyet = = “Erkek”) ? “Vayy, kardeşim benim…” : “Kıraathanemize sadece erkekler girebilir…” ;

Koşul operatörü “?” ve “:” karakterlerinden oluşur. Önce “cinsiyet” değişkeninin “Erkek” değerine ayarlı olup olmadığı kontrol ediliyor, koşulumuz bu. Koşulu parantez içinde yazmamız gerekir. “?” karakterinden sonra parantez içindeki koşulun sağlanması durumunda çalıştırılacak ifadeyi yazmalıyız. Yani bizim örneğimiz için eğer “cinsiyet” değişkeni “Erkek” değerine ayarlıysa “?” işaretinden sonraki ilk ifade çalıştırılacaktır. “:” karakterinden sonraki ifade ise koşulun sağlanmadığı durumlarda çalıştırılır. Yani eğer “cinsiyet” değişkeni “Erkek” se, “hitap” değişkeni “Vayy, kardeşim benim…”, değilse “Kıraathanemize sadece erkekler girebilir…” olarak ayarlanır.Bu operatör sayısal ifadelerle de kullanılabilir. Mesela;

x = (a <0) ? -a : a ;

Eğer “a” değişkeni 0’dan küçükse “x” e a’nın pozitif değeri, değilse a değeri aktarılıyor. Yani bir başka deyişle a’nın mutlak değeri alınıyor.

WMLSCRIPT DÖNGÜ İFADELERİ

Bazen bir ifadeyi birden fazla defa çalıştırmak isteyebilirsiniz. Mesela 1 den 3 e kadar olan sayıları toplamak isteyebilirsiniz. Bunun için aşağıdaki gibi bir yazım işe yarayacaktır;

var toplam=0;toplam +=1; // toplam =1 olurtoplam +=2; // toplam =3 olurtoplam +=3; // toplam =6 olur

“6” sonucuna ulaşmamız fazla zamanımızı almadı, fakat ya bizden istenen 1’den 100’e kadar olan sayıların toplamı olsaydı? Gözünüzü kararttınız ve 100 kere yukarıdaki yazımı yaptınız diyelim, fakat şimdi de sizden acımasızca 1’den 20000 e kadar olan sayıların toplamını istiyorum. Lütfen göz yaşlarınızı silin ve bu gibi durumlar için döngü ifadelerinin nasıl kullanıldığını öğrenmeye çalışın…

while deyimi

while deyimi bir ifadenin birden fazla defa çalıştırıldığı durumlarda can simidi görevi görür. Sizin belirlediğiniz bir koşula uyduğu sürece “while” bloğu içindeki ifadeler çalıştırılır. Koşul parantezler içinde, blok süslü parantezler içinde belirtilir. Aşağıdaki gibi bir yazıma sahiptir;

while ( koşul ){ //koşula uyduğu sürece bu bloktaki ifadeler çalışır}

Belirlediğiniz koşula uymadığı zaman “while” bloğundan çıkılır ve program akışı devam eder. Şimdi daha önce bizim ağlamamıza neden olan örneği rahatlıkla çözebiliriz. Aşağıda 1 den 20000 e kadar olan sayıların nasıl toplanacağı gösterilmiştir;

var toplam=0; // toplamı bu değişkende tutacağızvar i=1; // Bu değişken bize sayaç görevi yapacak

while (i<=20000) //sayaç 20000’den küçük veya eşit olduğu sürece koşula uygundur.{

toplam+=i;i++;

}

Yukarıda yaptığımız işlemin çok basit olduğunu siz de farkettiniz sanırım. Önce iki değişken tanımlıyoruz, “toplam” değişkeninde sayıların toplamını tutacağız, “i” değişkeni ise bize 20000’ e ulaşıp ulaşmadığımızı göstermek için sayaç görevi yapacak. “toplam” değişkenini durmadan kendisiyle ve “i” değişkeniyle toplayarak sayacın o anki değerine kadar olan sayıların toplamını bulacağız. Bloktan çıkmadan önce “i” nin değerini bir arttırarak sayaç olarak çalışmasını sağlayacağız. Şimdi döngüyü adım adım inceleyelim;

Adım 1;

var toplam=0; var i=1; while (i<=20000) // i burada henüz “1” değerine sahiptir, blok çalışır {

toplam+=i; //toplamın değeri 1 oluri++; // i’nin değeri bir artar ve 2 olur

}

Adım 2; while (i<=20000) // i burada “2” değerine sahiptir, blok çalışır {

toplam+=i; //toplamın değeri 3 olur (1+2)i++; // i’nin değeri bir artar ve 3 olur

}

Adım 3; while (i<=20000) // i burada “3” değerine sahiptir, blok çalışır {

toplam+=i; //toplamın değeri 6 olur (3+3)i++; // i’nin değeri bir artar ve 4 olur

}.....Adım 20000;

while (i<=20000) // i burada “20000” değerine sahiptir, blok çalışır {

toplam+=i; //toplamın değeri 200010000 olur i++; // i’nin değeri bir artar ve 20001 olur

}

Adım 20001; while (i<=20000) // i burada “20001” değerine sahiptir, blok çalışmaz! {

toplam+=i; i++;

}

Evet, döngümüz i’nin değeri 20001 olana kadar çalıştı. 20001 olduğunda ise koşula uymadığı için döngüye girmedi ve program “while” bloğunun bittiği yerden devam etti. Eğer ekranda bu değişkenlerin değerini görmek istersek “toplam”ın 200010000, “i” nin 20001 değerine sahip olduğunu görürüz.

for deyimi

“for” deyimi de “while” deyimi gibi döngü oluşturur. Aşağıdaki gibi bir yazıma sahiptir;

for ( ifade1 ; ifade2 ; ifade3 ){ …….}

Bloğa sahip diğer ifadelerdeki gibi “for” deyiminin de koşul ifadeleri parantez içinde, bloğu süslü parantez içinde oluşturulur. “for” deyimi içine üç ifade alabilir, bu ifadeler “;” karakteriyle birbirlerinden ayrılırlar. Bunların ne işe yaradıklarını öğrenelim;

ifade1; Bu ifade içinde değişken tanımlanır ve ona ilk değeri verilir. Mesela “var i=0;” gibi…Bu ifade sadece döngünün ilk başında bir kere çalıştırılır.ifade2; Bu ifadede koşul belirtilir. Mesela “i<=20000” gibi. Her döngüden sonra diğer döngüye başlamadan koşul kontrolü yapılır. Eğer koşula uymuyorsa döngüden çıkılır.ifade3; Bu ifadede her döngüden sonra çalıştırılması istenen kod belirtilir. Hatırlarsanız “while” döngüsünde her döngünün sonunda sayacı bir arttırmak istiyorduk. Burada bu işlemi bu ifadede “i++” şeklinde belirtebiliriz.

Şimdi 1 den 20000 e kadar olan sayıların toplamını bir de “for” döngüsüyle bulalım;

var toplam=0;

for (var i=0 ; i<=20000 ; i++){ toplam+=i;}

Sizce de daha basit bir yazımı var, değil mi?

break deyimi

break deyimi “for” veya “while” döngüleriyle kullanılır ve döngüden çıkmak istediğinizi belirtir. Bu deyimi “for” ve “while” döngüleri dışında kullanmaya çalışmak hataya yol açacaktır.

var toplam;for (var i=0;i<=20000;i++){

if (i= =10){ break;} toplam+=i;

}

Örneğimizde döngü bloğu her çalıştığında sayacın ( “i”nin) değerinin 10 a eşit olup olmadığını kontrol ediyoruz. Eğer “i” 10 a eşitse “break” deyimiyle döngüden çıkıyoruz. Döngüden çıktığımızda “i” nin değeri 10, “toplam” ın değeri 45 olacaktır.

continue deyimi

continue deyimi de döngü bloklarında çalıştırılır . Mesela 8 sayısı haricindeki 1 den 10 a kadar olan sayıların toplamını istiyoruz. “continue” deyimi burada işe yarar , bizim bu elemanı yerleştirdiğimiz yerden itibaren program döngü bloğunun başına gider, bloktaki diğer ifadeler çalıştırılmaz. Aşağıdaki örnek sizi biraz daha aydınlatacaktır;

toplam=0;for (var i=0;i<=10;i++){ if (i= =8) { continue; } toplam+=i;}

“i” nin değeri 8 olduğu an “continue” deyimi çalıştırılacak ve program döngünün başına giderek “toplam” değişkenine “i” değeri eklenmeyecektir. Bir konuya dikkat etmelisiniz; Bu ifadenin kullanıldığı yerden sonra döngü başına gidilir, fakat hemen sonra eğer koşul sağlanıyorsa tekrar döngü devam eder. Yani döngüden çıkmak diye bir şey söz konusu değildir. Bu nedenle “i” değeri 8 olduğunda döngünün başına gidilir, i’nin değeri bir arttırılır ve döngüye devam edilir. Böylece 9 ve 10 sayıları da “toplam” değişkenine eklenir. “toplam” değişkeninin değeri döngü bitiminde 47 dir.

WMLSCRIPT STANDART KÜTÜPHANELERİ

Daha önce kütüphanenin ne olduğunu öğrenmiştik, fakat siz de benim gibi unutkan bir yapıya sahipsinizdir düşüncesiyle burada bir kere daha ne olduğunu anlatacağım; Kütüphane, içinde mantıksal olarak birbiriyle ilişkili fonksiyonları barındıran isimlendirilmiş koleksiyondur. Kütüphanenin içinde barındırdığı fonksiyonları bizim yerimize bu dilin üreticileri tanımlamış ve kullanımımıza sunmuştur. Bu fonksiyonlarla hayatımızın ne kadar kolaylaştığını sadece onları kullanırken fark edebilirsiniz. Bu nedenle onları iyi öğrenmeliyiz.

Şunu da belirtmekte fayda var ki, WMLScript’in standart kütüphaneleri WAP spesifikasyonunda tanımlanmıştır. Bu nedenle WMLScript’i destekleyen her taşınabilir cihazın bu kütüphaneleri de

desteklemesi gerekir. Fakat üreticiler bazen bu fonksiyonlarla yetinmeyip kendi kütüphanelerini de oluşturmuşlardır. Biz yine de sadece her taşınabilir cihazda bulunması gereken standart kütüphaneleri kullanmaya çalışmalıyız ki, WAP sayfalarımız tüm cihazlarda sorunsuzca çalışabilsin.

Kütüphanelerdeki fonksiyonlara ulaşmak için kütüphane ismi ve fonksiyon arasına “.” (nokta) karakteri konulur. Biz zaten şu ana kadar WMLBrowser kütüphanesinden bazı fonksiyonları kullandığımız için kütüphanelerdeki fonksiyonların kullanımına yabancı değilsiniz. Şimdi bu kütüphaneleri daha yakından inceleyelim.

WMLBrowser KÜTÜPHANESİ

Bu kütüphanede toplam 7 fonksiyon bulunur. Bu fonksiyonlar WAP tarayıcısını kontrol etmek ve onunla veri alışverişi yapmak için kullanılır.

getCurrentCard( ) Fonksiyonu

Bu fonksiyon o an görüntülenmekte olan kartın URL adresini öğrenmek için kullanılır. Örn;

extern function adres() { WMLBrowser.setVar("adres", WMLBrowser.getCurrentCard()); WMLBrowser.refresh(); }

Yukarıdaki WMLScript sayfasında getCurrentCard() fonksiyonunun döndürdüğü değeri “adres” ismindeki değişkene atıyoruz. Bu adres göreceli bir adres olabileceği gibi yabancı adresteki bir kartı görüntülüyorsak tam bir adres yazımı da olabilir. WML sayfasından (ismi deneme.wml olsun ve WMLScript sayfasıyla aynı dizinde olsun) “adres” değişkenini çağırırsak “deneme.wml#anasayfa” değerine ulaşırız, tabii kartımıza “anasayfa” ismini vermişsek.

getVar( ) Fonksiyonu

Daha önce de incelediğimiz getVar() fonksiyonu WML sayfasındaki değişkenlere WMLScript sayfasından ulaşmak için kullanılır. Yazımını bir daha hatırlayalım;Örn;

extern function degerBul() { var a=WMLBrowser.getVar(“isim”); }

WMLScript sayfamızdaki “a” adındaki değişkene WML sayfamızdaki “isim” adlı değişkenin değerini veriyoruz.

go( ) Fonksiyonu

Bu fonksiyonun amacı WML ‘deki <go> elemanlanıyla aynıdır. Ekranı istediğimiz bir WML sayfasına yönlendirmek için kullanılır. Örn;

extern function git() { WMLBrowser.go(“fazlaUzagaGitme.wml"); }

Burada WAP tarayıcısı “fazlaUzagaGitme.wml” isimli bir sayfaya yönlendiriliyor.

newContext( ) Fonksiyonu

Bu fonksiyon WML tarayıcısındaki bütün değişkenler ve geçmiş sayfa bilgilerini siler. Hatırlarsanız <card> elemanın da aynı isimli bir özelliği vardı. Örn;

extern function temizle() { WMLBrowser.newContext(); }

prev( ) Fonksiyonu

WML ‘deki <prev/> elemanıyla aynı etkiye sahiptir. WAP tarayıcıda görüntülenen aktif sayfadan bir önce görüntülenmiş sayfaya yönlendirme yaptırır.Örn;

extern function geriGit() { WMLBrowser.prev(); }

refresh( ) Fonksiyonu

WML’deki <refresh /> elemanıyla aynı etkiye sahiptir. Aktif sayfayı yeniden yükleyerek sayfadaki bilgileri tazeler.Örn;

extern function tazele() { WMLBrowser.refresh(); }

setVar( ) Fonksiyonu

Daha önce de defalarca kullandığımız bu fonksiyon WML sayfasına değişken aktarmak için kullanılır. Örn;

extern function degerAktar() { WMLBrowser.setVar(“mesaj”, “İyi uykular…”); WMLBrowser.refresh(); }

Burada “İyi uykular...” değeri “mesaj” değişkenine aktarılmıştır.

Dialogs KÜTÜPHANESİ

Dialogs kütüphanesinde 3 fonksiyon bulunur ve bu fonksiyonlar kullanıcı ile aramızdaki iletişimi güçlendirmeye yarar. Bu fonksiyonlar sayesinde ona uyarılar verebilir, veya bazı bilgileri onaylamasını isteyebiliriz. Farzedelim ki kullanıcının girdiği bir sayı değerinin 0’dan küçük, 1000’den büyük olmaması lazım. İşte bu kütüphanedeki fonksiyonları kullanarak kullanıcıyla etkileşime geçebilir ve onu yönlendirebilirsiniz. Aslında uyarı verme veya kullanıcıya bir takım bilgileri onaylatma gibi işlemleri onu başka WML sayfalarına yönlendirerek de yapabilirsiniz. Mesela aşağıdaki gibi bir WMLScript sayfası oluşturduğunuzu farz edelim;

extern function sayiKontrol(sayi){ if (sayi < 0) WMLBrowser.go("cokKucuk.wml"); else if (sayi > 1000) WMLBrowser.go("cokBuyuk.wml"); else WMLBrowser.go("anasayfa.wml");}Yukarıdaki WMLScript sayfamızda kullanıcının girdiği bir sayıyı kontrol ediyoruz ve 0’dan küçükse onu “cokKucuk.wml” isimli bir sayfaya, 1000’den büyükse “cokBuyuk.wml” isimli bir sayfaya yönlendiriyoruz. Bu sayfalarda ona gereken uyarıyı yaparak onu tekrar anasayfaya yönlendirebilirsiniz. Bu da kullanıcıyla etkileşimin bir metodudur, fakat WMLScript’in mucitleri bizler için çok daha kullanışlı yapılar bulmuşlardır. Dilerseniz bu yapıları öğrenmeye başlayalım...

alert( ) Fonksiyonu

alert( ) fonksiyonuyla kullanıcıyı bir konuda uyarmak için ekrana mesaj çıkartabilirsiniz. Kullanıcı uyarıyı okuduktan sonra “OK” gibi bir tuşa basarak alarm ekranından çıkabilir. Bu fonksiyon sadece bir parametre alır, o da kullanıcıya verilecek mesajı gösterir. Şimdi kullanıcının girdiği sayı aralığını kontrol eden WMLScript sayfamızı tekrar yazabiliriz.


<wml> <card id="anasayfa" title="Kelime İşlem"> <p> 0 ile 1000 arasında bir sayı giriniz :<br/> <input name="sayi"/>

<a href="sayiKontrol.wmls#kontrolEt($(sayi))">Kontrol et</a><br/> Sayı: $(sayi)

</p> </card></wml>

Yukarıdaki WML sayfamızda kullanıcının istediği değeri gireceği bir alan oluşturuyoruz. Bu değerin 0 ile 1000 arasında olmasını istemişiz. Bunun kontrolünü de aşağıdaki WMLScript

sayfamızda yapıyoruz;

extern function kontrolEt(a) {

if (a>1000){ Dialogs.alert("Dikkat! 1000'den buyuk sayi girdiniz : "+a);

}else if (a<0)

{ Dialogs.alert("Dikkat! 0'dan kucuk sayi girdiniz : "+a);

}

WMLBrowser.setVar("sayi",a); WMLBrowser.refresh();}Yukarıdaki sayfamızı “sayiKontrol.wmls” ismiyle WML dosyamıza kaydedin. Aslında ne yaptığımız açıkça ortada. “kontrolEt()” fonksiyonu “a” parametresini alarak kendi içinde sayının 1000 ve 0 aralığında olup olmadığını kontrol ediyor, eğer sayı büyükse kullanıcıyı 1000’den büyük sayı girdiğine dair uyarıyoruz. Bunu yaparken alert() fonksiyonunu nasıl kullandığımıza dikkat edin. alert() fonksiyonu sadece bir parametre alır. Fonksiyonun kullanımındaki yazım şekli kafanızı karıştırmasın, fonksiyonda sadece bir parametre var, ve o da "Dikkat! 1000'den buyuk sayi girdiniz : " mesajı ile dışarıdan gelen “a” parametresinin toplamı. Hatırlarsanız karakter katarı ile sayı toplandığı zaman sonuç karakter katarı cinsinden oluyordu. Bu nedenle buradaki sonuç kullanıcının girdiği değerle birleştirilmiş bir mesaj olacaktır. Bu mesajın nasıl göründüğünü birazdan ekran görüntüsünde siz de göreceksiniz. Aynı şekilde “a” parametresinin 0’dan küçük olup olmadığını da kontrol ediyoruz ve eğer küçükse yine alert() fonksiyonuyla kullanıcıya durumu bildiriyoruz. WMLScript sayfamızın en altında da ekranda girdiğimiz sayıyı göstermek için “sayi” değişkenine “a” parametresinden gelen değeri aktarıyoruz. Şimdi ekran görüntülerini görelim;


Şekil 2-10 da görüldüğü gibi sayı istediğimiz aralıktaysa problemsiz olarak ekranın altında sayıyı görebiliyoruz. Fakat sayının 1000’den büyük veya 0’dan küçük girilmesi sonucu kullanıcıyı Şekil 2-11’deki veya Şekil 2-12’deki ekranlarla uyarıyoruz.

confirm() Fonksiyonu

Bilgisayar kullanırken bazen ekrana “şunu yapmak üzeresiniz...Devam etmek istiyor musunuz?” gibi bazı mesajlar gelir. Bunlar sizin birşeyleri onaylamanız için ekrana getirilen mesajlardır. Örneğin kullanıcı birisine para havale ediyorsa, ona ekrana yazdığı para miktarını, yolladığı kişinin hesap no.sunu vs... tekrar hatırlatmak ve onaylatmak gerekir. Böylece kullanıcı hata yapmaktan kurtulur. İşte bizim confirm() fonksiyonumuzun da mantığı ve işleyişi bu mesajlar gibidir. confirm() fonksiyonu 3 parametre alır. İlki mesajı, ikincisi onay yazısını, üçüncüsü iptal yazısını oluşturur. Bir örnekle daha iyi anlayabiliriz;


<wml> <card id="anasayfa" title="Sayı Kontrol"> <p> Ne kadar para yatırmak istiyorsunuz?<br/> <input name="miktar"/>

<a href="miktarOnay.wmls#onaylat($(miktar))">Yolla</a><br/> Miktar: $(miktar)

</p> </card></wml>

Aşağıdaki WMLScript sayfasını miktarOnay.wmls ismiyle WML sayfasıyla aynı dizine kaydedin.

extern function onaylat(a) { Dialogs.confirm("Girdiginiz miktar : "+a+" YTL" , "Tamam", "Iptal"); WMLBrowser.setVar("miktar",a); WMLBrowser.refresh();}

confirm() fonksiyonunun aldığı ilk parametre (ilk virgüle kadar olan kısım) , kullanıcıya gösterilecek mesajdır. Burada biz kullanıcının <input/> elemanına girdiği para miktarını kullanıcıya tekrar göstererek onaylamasını istiyoruz. İkinci parametre kullanıcının miktarı onaylaması halinde basacağı tuşun başlığını, üçüncü parametre miktarın iptalini isteyeceği durumda basacağı tuşun başlığını belirler. Biz burada kullanıcının onaylaması için “Tamam”, miktarın iptali için “Iptal” yazılı başlıklar belirledik, fakat siz kendi başlığınızı kendiniz belirleyebilirsiniz. Aşağıda ekran görüntüsünü göreceksiniz;


9500 YTL mi ?! Bence yollamadan önce bir daha düşünün

prompt() Fonksiyonu

prompt() fonksiyonu kullanıcıdan bilgi almak için kullanılır. Aslında <input/> elemanı gibi bir etkisi vardır. İki parametre alır, ilki kullanıcıya gösterilecek mesajı, ikincisi ise veri giriş ekranına varsayılan olarak gelecek mesajı bildirir. Lütfen örneği inceleyin;

String KÜTÜPHANESİ

Bu kütüphanedeki fonksiyonlar karakter katarları ile ilgili işlemler yapmaya yöneliktir. Kütüphane içindeki 16 fonksiyon, karakter katarlarına yönelik birçok işlem ihtiyacımızı karşılar.

charAt( ) Fonksiyonu

charAt() fonksiyonuyla bir karakter katarındaki belirli bir karakteri indeks numarasını kullanarak elde edebilirsiniz. Bir karakter katarındaki her bir karakterin bir indeks numarası bulunmaktadır. İlk karakterin indeks numarası 0 dır. Diğer numaralar birer artarak devam eder. Yani “Merhaba” karakter katarındaki “M” harfinin indeks numarası 0, “b” karakterinin indeks numarası 5 tir.CharAt fonksiyonu iki parametre alır. İlk parametre içinde karakter aranacak karakter katarını,ikincisi indeks numarasını belirtir. Şimdi fonksiyonu nasıl kullanabileceğimizi örneklerle görelim;

var a = String.charAt(“Unutulanlar”,6);

a değişkeni “a” değerini alır, çünkü “Unutulanlar” karakter katarındaki 6 numaralı karakter “a” karakteridir.

a = String.charAt(“Unutulanlar”,169);

a değişkeni boş bir değer (“”) barındırır. Çünkü istenilen indekste bir karakter bulunmamaktadır.a = String.charAt(“Unutulanlar”,”2”);

a değişkeni “invalid” değerini barındırır yani geçersizdir. Çünkü fonksiyona girilen ikinci parametre sayısal değildir, tırnak işaretleri arasında girilmiştir.

compare( ) Fonksiyonu

Bu fonksiyon iki karakter katarını harflerin alfabetik sıralanışı açısından kıyaslar. İki parametre alır, ve kıyaslamanın sonucu olarak -1,0 veya 1 değerini döndürür. Aşağıdaki örneği inceleyin;

var a = String.compare(“Aylin”,”Doğuş”);

Yukarıda a değişkeninin alacağı değer -1 olacaktır. İkinci parametre “B” harfi ile başladığından ve alfabetik sıralama olarak “A” harfiyle başlayan “Araba” parametresinden sonra geleceğinden fonksiyon “-1” değerini döndürmüştür. Eğer tam tersi olsaydı, yani ilk parametre sıralamada ikinciden sonra geliyor olsaydı fonksiyon “1” değerini döndürecekti. Eğer iki parametredeki değerler birbirine eşitse o zaman fonksiyondan “0” değeri dönecektir.

var a = String.compare(“Gamze”,”Doğukan”);

“Gamze” kelimesi daha alfabetik sıralamada daha sonra geleceğinden a değişkeninin değeri 1 olacaktır.

var a = String.compare(“Okan”,”Okan”);

Her iki parametredeki değerler de aynı olduğundan a değişkeni 0 değerini alacaktır.

elementAt( ) Fonksiyonu

Bir karakter katarını belirli bir kritere göre parçalara böldüğünüzü ve 2 numaralı parçayı istediğinizi düşünün. Mesela “Kal benimle,gitme uzaklara…” katarını “,” karakterini baz alarak bölmeye çalışırsak sadece 2 parçaya bölebiliriz. İlk parça “Kal benimle”, ikinci parça “gitme uzaklara…” olacaktır. İşte elementAt() fonksiyonu bu tür bir yaklaşım için tasarlanmıştır. Üç parametre alır, ilk parametre karakter katarını belirtir. İkinci parametre bölünmüş parçalardan kaç numaralı parçayı istediğimizi gösterir. Üçüncü parametre ise katarı neye göre bölmek istediğimizi gösterir. Aşağıdaki örneği inceleyin;

var a = String.elementAt(“Muzikle ugrasmak cok zevkli!”, 1 , ” ”);

Fonksiyonun ilk parametresi üzerinde işlem yapılacak katarı gösteriyor. Üçüncü parametre, katarı “ ” (boşluk karakteri) karakterine göre bölmek istediğimizi gösteriyor. Böyle bir bölünme sonucu katar “Muzikle”, “ugrasmak”, “cok” ve “zevkli” şeklinde dört parçaya ayrılır. Biz burada 1 numaralı indeksteki değeri istemişiz. Aslında sizin fonksiyondan dönmesini beklediğiniz değer “Muzikle” olabilir. Fakat indekslemeye genel bir kural olarak 0 dan itibaren başlandığı için 1 numaralı değer “ugrasmak” olacaktır. Sonuç olarak a değişkenine “ugrasmak” değeri atanır.

var a = String.elementAt(“Kucuk beyinler insanlarla ugrasir.”, 16 , ”.”);

Burada katarı “.” Karakterine göre ikiye bölmek istemişiz. İlk parça “Küçük beyinliler insanlarla uğraşır” olacaktır. İkinci parça ise “.” Karakterinden sonra gelen karakterdir. ”.” karakterinden sonra karakter olmadığına göre bu “” şeklinde içi boş bir katar olarak kabul edilir. Bunun boşluk karakteri “ “ ile aynı şey olmadığına dikkat edin. Fonksiyonda 16 numaralı parça istenmiş, fakat bu kadar parça olmadığından en yakın numaradaki parça, yani “” parçası alınacaktır. Dolayısıyla a değişkenine “” değeri aktarılır.

Eğer fonksiyona verdiğiniz 3. parametre boş bir katarsa ( “” ) veya bir hata meydana gelirse a değişkenine invalid değeri aktarılacaktır.

elements( ) Fonksiyonu

Bu fonksiyonun kullanımı, elementAt() fonksiyonunun kullanımı ile hemen hemen aynıdır. İki parametre alır, ilki karakter katarını, ikincisi ise bu katarı hangi karaktere göre bölmek istediğimizi tanımlar. Amacı ise katar bölündükten sonra kaç parça oluşacağını bulmaktır.

var a = String.elements(“Orta beyinler olaylarla ugrasir.” , ”.”);

Karakter katarı “.” karakterine göre bölündüğü için “Orta beyinliler olaylarla uğraşır” ve “” olmak üzere 2 parçaya bölünecektir. Böylece a değişkenine atanacak değer “2” olacaktır.

var a = String.elements(“Buyuk beyinler sistemlerle ugrasir.” , ” ”);

Burada “ “ (boşluk karakteri) karakterine göre bölüm yapıldığı için karakter katarı 4 arçaya ayrılacağından a değişkenine 4 değeri atanır.

Eğer fonksiyona verdiğiniz 2. parametre boş bir katarsa ( “” ) veya bir hata meydana gelirse a değişkenine invalid değeri aktarılacaktır.

find( ) Fonksiyonu

find() fonksiyonu Bir karakter katarının içinde bir metin aradığınız zaman kullanabileceğiniz bir fonksiyondur. 2 parametre alır.İlk parametre karakter katarını, ikinci parametre aramak istediğimiz metni tanımlar. Eğer aranan metni bulursa bu metnin ilk başladığı yerin indeks numarasını döndürür. Bulamazsa -1 değerini döndürür.

var a = String.find("Sanirim gozum bozuldu..." , "boz");

“boz “ kelimesi 15inci karakterden itibaren başladığı için a ‘nın değeri 15 olacaktır.

var a = String.find("Arayan mevlasini da bulur…" , "belasini da.");

“belasini da.” metni karakter katarında bulunmadığı için a değişkenine -1 değeri atanacaktır.

insertAt( ) Fonksiyonu

insertAt() fonksiyonunu kullanarak bir karakter katarına istediğiniz bir metni ekleyebilirsiniz. Bu fonksiyon 4 parametre alır, ilk parametre karakter katarının kendisidir, ikinci parametre eklenmek istenen metindir, üçüncü parametre metni nereye eklemek istediğinizi belirler ve dördüncü parametre eklenen metinle ana metin arasına ayırıcı bir karakter koymak için kullanılır. Ayrıca bu parametre ana metnin kaç nasıl parçalanacağına da karar verir. Fonksiyon karakter katarının yeni halini döndürür.

var a = String.insertAt("Benimle gelir misin?", "sinemaya", 1 , " ");

Yukarıdaki örnekte “Benimle gelir misin?” ifadesi önce dördüncü parametre olan “ ” (boşluk karakteri) karakterine göre “Benimle”, “gelir”, “misin?” şeklinde parçalanır. Biz ilk parçadan sonra metne yerleştirilmesini istediğimiz için yeni metin şu hale gelir;”Benimle sinemaya gelir misin?”. Dolayısıyla a değişkenine bu değer atanır.

var a = String.insertAt("gitar,davul çalarım.", "piyano",0 , ",");

İfade 0 indeks numarasından başlayarak metne yerleştirileceği için a değişkeni “piyano,gitar,davul çalarım.” Değerini alır.

isEmpty( ) Fonksiyonu

isEmpty() fonksiyonu sadece bir parametre alır ve içindeki karakter katarının boş bir değere sahip olup olmadığını kontrol eder. Eğer boşsa “true”, değilse “false” değerini döndürür.

var a = String.isEmpty(“Boş değil”);

a değişkeni “false” değerini alır, çünkü fonksiyondaki karakter katarı “Boş değil” değerini içermektedir.

var a = String.isEmpty(“”);

a değişkeni “true” değerini alır, çünkü fonksiyondaki karakter katarı “” değerini içermektedir, yani boştur.

length( ) Fonksiyonu

length() fonksiyonu karakter katarında kaç karakter olduğunu bulmaya yarar. Bir parametre alır ve geriye içindeki karakter sayısını döndürür.

var a = String.length(“26”);

Her ne kadar fonksiyonda “26” yazıyorsa da siz aldanmayın, aslında bu karakter katarı sadece 2 karakterden oluşur ve bu nedenle a değişkenine “2” değeri atanır.

removeAt( ) Fonksiyonu

removeAt() fonksiyonu ile bir karakter katarının belirli bir yerinden istediğimiz bir parçasını çıkarabiliriz. Aldığı üç parametreden ilki karakter katarını, ikincisi hangi parçanın çıkarılmasının istendiğini, üçüncüsü ise karakter katarının hangi karaktere göre parçalanması gerektiğini belirler.

var a =String.removeAt("Hayatimdan sigarayi cikarmak istiyorum",1," ");

Karakter katarı “Hayatimdan”, “sigarayi”, “cikarmak”, “istiyorum” olmak üzere 4 parçaya ayrılacaktır. Bu parçalardan 1 numaralı parça “sigarayi” parçasıdır ve onu çıkardığımız için a değişkeni “Hayatimdan cikarmak istiyorum” değerini alır.

var a =String.removeAt("beni aramaktan yorulmadin mi?",0," ");

Karakter katarı parçalara ayrıldığında 0 indeks numaralı ilk parça “beni” kelimesi olur. A değişkenine geriye kalan ifade, yani “aramaktan yorulmadin mi?” değeri eklenir.

replace( ) Fonksiyonu

replace() fonksiyonunu kullanarak bir karakter katarından istediğiniz bir ifadeyi başka bir ifadeyle değiştirebilirsiniz. Fonksiyon üç parametre alır. İlk parametre karakter katarını, ikinci parametre karakter katarındaki değişmesini istediğiniz ifadeyi, üçüncü parametre ise değişecek ifadenin yerine gelecek ifadeyi belirler.

var a =String.replace(“Ahmet’e selam soyle.”, ”Ahmet”,”Mehmet”);

a değişkeninin değeri “Mehmet’e selam soyle.” şeklinde olur.

replaceAt( ) Fonksiyonu

replaceAt() fonksiyonu da replace() fonksiyonu ile aynı amaçla kullanılır fakat kullanım şekli biraz farklıdır. 4 parametre alır. İlk parametre karakter katarını tanımlar. İkinci parametre karakter katarına eklenecek ifadeyi belirler. Üçüncü parametre karakter katarından çıkmasını istediğimiz ifadenin indeks numarasıdır. Dördüncü parametre ise karakter katarını hangi karaktere göre parçalamak istediğimizi belirler.

var a =String.replaceAt(“Ahmet'e selam soyle.”, “Mehmet”,0,”'”);

replace() fonksiyonunda verdiğimiz örneğin aynısını bu fonksiyonla da yaptık. İlk parametredeki karakter katarı, dördüncü parametrede belirtilen “ ‘ ” (üst kesme) karakterine göre “Ahmet” ve “e selam söyle” şeklinde iki parçaya bölünür. Bizim burada çıkmasını istediğimiz ifade üçüncü parametrede belirttiğimiz 0 indeks numaralı ilk parçadır. Bunun yerine gelecek olan ifade ise ikinci parametredeki “Mehmet” ifadesidir. Böylece a değişkenine atanacak değer “Mehmet’e selam soyle.” olur.

squeeze( ) Fonksiyonu

squeeze fonksiyonu , bir karakter katarındaki iki sözcük arasında birden fazla boşluk karakteri varsa bunu tek boşluk karakteri haline getirir. Aslında bu fonksiyonun etkisini görmek için örneği incelemeniz daha faydalı olacaktır;

var a = string.squeeze(“Burada çok boşluk var.”);

a değişkeninin değeri “Burada çok boşluk var.” olacaktır. Birden fazla boşluk karakteri olan yerlerde fazlalık boşluklar kesilecek ve tek boşluğa indirilecektir.

subString( ) Fonksiyonu

subString() fonksiyonu, bir karakter katarının belirli bir değerini elde etmek için kullanılır. Üç parametre alır. İlk parametre karakter katarını, ikinci parametre başlangıç indeks numarasını, üçüncü parametre ise başlama noktasından itibaren kaç karakterin istendiğini belirler.

var a = string.subString(“Denizin ortasında ney var?”,18,3);

Karakter katarında 18inci karakterden sonra üç karakter alınıyor. Böylece kadim bir sorunun da cevabını bulmuş oluyoruz. a değişkeninin değeri “ney” olarak ayarlanıyor.

toString( ) Fonksiyonu

toString() fonksiyonu parametre olarak aldığı bir sayı veya “true”, “false” gibi bir ifadeyi karakter katarı haline dönüştürür.

var a = string.toString(24);

a değişkeninin değeri “24” olarak atanır, fakat artık bu değer sayısal bir değer değildir.

trim( ) Fonksiyonu

trim() fonksiyonu parametre olarak aldığı karakter katarının başındaki ve sonundaki boşluk karakterlerini atmaya yarar.

var a = String.trim(" Uzerimde bir agirlik var sanki... ");

a değişkenine “Uzerimde bir agirlik var sanki...” değeri atanır.

Lang KÜTÜPHANESİ

Lang kütüphanesi matematiksel bazı işlemleri yapabilmek, rasgele sayı üretmek, tip dönüşümleri yapmak için birçok yararlı fonksiyon içerir.

abort( ) Fonksiyonu

abort() fonksiyonu programınızın devam etmesi halinde ciddi bir hata oluşabileceğini tespit ettiğiniz zaman programın anormal bir şekilde durdurulmasını istediğiniz durumlarda kullanılır. Kontrolü tekrar WAP tarayıcıya vererek hata mesajı döndürür.

Lang.abort(“Hata: ”+errVal);

Burada “errVal” değeri hatanın açıklamasını verecektir.

abs( ) Fonksiyonu

abs() fonksiyonu sayıların mutlak değerini almak için kullanılır.

var a = -7;var b = Lang.abs(a);b değişkeninin değeri 7 olacaktır.

characterSet( ) Fonksiyonu

WAP tarayıcı tarafından desteklenen karakter setini bulmaya yarar. IANA ( Internet Assigned Numbers Authority ) tarafından tanımlanmış bir MIBEnum değeri, yani bir sayı döndürür.

var a = Lang.characterSet();

MIBEnum değerlerini http://www.iana.org/assignments/character-sets adresinde bulabilirsiniz.

exit( ) Fonksiyonu

exit() fonksiyonu kullanıldığı noktadan sonraki WMLScript kodunun çalışmasını normal bir şekilde durdurarak kontrolü tekrar WAP tarayıcıya verir. WMLScript kodunun daha fazla çalışmasına gerek kalmadığı durumlarda kullanılabilir.

Lang.exit(“Hata: ”+errVal);

float( ) Fonksiyonu

http://www.iana.org/assignments/character-sets

Bazı cihazlar float tipinde değer alabilen değişken yapısını desteklemezler. Cihazın bu tip bir desteği sağlayıp sağlamadığını öğrenmek için bu fonksiyonu kullanabilirsiniz. Eğer cihaz float tipi değişkenleri destekliyorsa fonksiyon true, desteklemiyorsa false döndürecektir.

var a = Lang.float();

Cihazın float tipini desteklediği bir cihazda a değişkeninin değeri “true” olacaktır.

isFloat( ) Fonksiyonu

isFloat() fonksiyonu kendisine parametre olarak verilen değerin float tipine parseFloat() fonksiyonuyla (daha sonra öğreneceğiz) dönüştürülüp dönüştürülemeyeceğini kontrol eder. Değer float tipine dönüştürülebilecekse “true”, aksi takdirde “false” değerini döndürür. Eğer bu fonksiyon float tipini desteklenmeyen bir cihazda kullanılıyorsa “invalid” değerini döndürür.

var a = Lang.isFloat(“165.43”);

a değişkeni “true” değerini alır.var a = Lang.isFloat(“nasilsin?”);a değişkeni “false”değerini alır.

isInt( ) Fonksiyonu

isInt() fonksiyonu kendisine parametre olarak verilen değerin integer tipine parseInt() fonksiyonuyla (daha sonra öğreneceğiz) dönüştürülüp dönüştürülemeyeceğini kontrol eder. Değer integer tipine dönüştürülebilecekse “true”, aksi takdirde “false” değerini döndürür.

var a = Lang.isInt(“35”);

a değişkeni “true” değerini alır.

var a = Lang.isInt(“iyiyim, ya sen?”);

a değişkeni “false”değerini alır.

max( ) Fonksiyonu

max() fonksiyonu aldığı integer veya float tipindeki iki parametreden hangisinin büyük olduğunu bulmak için kullanılır. Sayılar eşitse ilk parametreyi, değilse büyük olan sayıyı döndürür.var a = Lang.max (14 , 45);

a değişkeni 45 değerini alır.

var a = Lang.max (56.23 , 56);

a değişkeni 56.34 değerini alır.

maxInt( ) Fonksiyonu

maxInt() fonksiyonu, taşınabilir cihaz tarafından desteklenen en büyük sayıyı bulur ve bu değeri döndürür.

var a = Lang.maxInt();

a değişkeninin değeri cihaza göre değişecektir.

min( ) Fonksiyonu

min() fonksiyonu aldığı integer veya float tipindeki iki parametreden hangisinin küçük olduğunu bulmak için kullanılır. Sayılar eşitse ilk parametreyi, değilse küçük olan sayıyı döndürür.var a = Lang.min (14 , 45);a değişkeni 14 değerini alır.

var a = Lang.max (56.23 , 56);


minInt( ) Fonksiyonu

minInt() fonksiyonu, taşınabilir cihaz tarafından desteklenen en küçük sayıyı bulur ve bu değeri döndürür.

var a = Lang.minInt();


parseFloat( ) Fonksiyonu

parseFloat() fonksiyonu parametre olarak string tipinde bir değer alır ve geriye float tipinde bir değer döndürür. Bir anlamda bu iki tip arasında dönüştürücü rol oynar. Böylece float tipine dönüşen değer kullanılarak sayısal işlem yapılabilir. Eğer string olarak verilen değer float tipine dönüşemeyecek bir değerse veya cihaz float tipi değişkenleri desteklemiyorsa fonksiyon geriye “invalid” değeri döndürür.

var a = Lang.parseFloat(“34.45”);var b = a+4;

a değişkeni 34.45 değerini alacaktır. b değişkeni ise 38.45 değerini alır.

var a = Lang.parseFloat(“olur mu ki?”);

a değişkeni “invalid” değerini alacaktır.

parseInt( ) Fonksiyonu

parseInt() fonksiyonu parametre olarak string tipinde bir değer alır ve geriye integer tipinde bir değer döndürür. Bir anlamda bu iki tip arasında dönüştürücü rol oynar. Böylece integer tipine dönüşen değer kullanılarak sayısal işlem yapılabilir. Eğer string olarak verilen değer float tipine dönüşemeyecek bir değerse fonksiyon geriye “invalid” değeri döndürür.

var a = Lang.parseInt(“38”);var b = a+2;

a değişkeni 38değerini alacaktır. b değişkeni ise 40 değerini alır.

var a = Lang.parseInt(“olur mu ki?”);


random( ) Fonksiyonu

random() fonksiyonu rastgele sayı üretmek için kullanılır. Bir parametre alır ve bu parametrenin değeri ile 0 arasında rastgele tam sayı üretir Eğer girilen parametre 0’a eşitse ürettiği sayı da 0 olur. Parametre 0’dan küçükse fonksiyon “invalid” değeri döndürür. Eğer girilen değer float tipinde ondalıklı bir değerse sayının sadece tam olan kısmı alınarak işlem yapılır.

var a = Lang.random(15);

a değişkeni 0 ile 15 arasında herhangi bir değer alabilir.

var a = Lang.random(“Mavi rengi severim…”);


seed( ) Fonksiyonu

seed() fonksiyonu, random() fonksiyonu ile birlikte kullanılır ve oluşturulacak rastgele sayı sıralamasını belirler. Bir parametre alır, eğer parametre 0 veya 0’dan büyükse kendini tekrarlayan bir sayı dizisi oluşturur, eğer parametre 0’dan küçükse kendini tekrarlamayan bir sayı dizisi oluşturur. Fonksiyon başarılı olursa geriye boş bir karakter katarı (“”) döndürür, eğer hata oluşursa “invalid” değeri döndürür.

var a = Lang.seed(15); var b = Lang.random(10);

a değişkeni “” değerini alır ve b değişkeni 0 ile 10 arasında herhangi bir değer alabilir. Burada dikkat etmemiz gereken nokta b değişkeninin bundan sonra alacağı değerlerin de ilk aldığı değerle aynı olacağıdır. Yani sayfayı yeniden güncellediğimizde b’nin farklı bir değer almadığını görürüz.

var a = Lang.seed(-1); var b = Lang.random(10);

Yukarıdaki kullanım şeklinde ise b değişkeni 0-10 aralığında rastgele bir sayı alır ve bu sayı her seferinde farklı bir sayı olacaktır.

Float KÜTÜPHANESİ

Float kütüphanesi, uygulamalarda ondalıklı sayılarla ilgili sık kullanılan bazı fonksiyonları içerir. Bazı cihazlar ondalıklı sayıları desteklemediğinden fonksiyonların dönüş değerlerinden birisi “invalid”dir.

ceil( ) Fonksiyonu

ceil() fonksiyonu parametre olarak aldığı değere bu değerden küçük olmamak şartıyla en yakın tamsayı değeri döndürür.

var a = Float.ceil(4.85);


var a = Float.ceil(-1.6);

a değişkeni -1 değerini alır.

floor( ) Fonksiyonu

floor() fonksiyonu parametre olarak aldığı değere bu değerden büyük olmamak şartıyla en yakın tamsayı değeri döndürür.

var a = Float.floor(4.85);


var a = Float.floor(-1.6);


int( ) Fonksiyonu

int() fonksiyonu parametre olarak aldığı değerin tamsayı kısmını döndürür.

var a = Float.int(4.85);


var a = Float.ceil(-1.6);


maxFloat( ) Fonksiyonu

maxFloat() fonksiyonu cihazın desteklediği en büyük ondalıklı sayı değerini döndürür.

var a = Float. maxFloat();


minFloat( ) Fonksiyonu

minFloat() fonksiyonu cihazın desteklediği en küçük ondalıklı sayı değerini döndürür.

var a = Float. minFloat();


pow( ) Fonksiyonu

pow() fonksiyonu iki parametre alır ve ilk parametrenin kendisiyle ikinci parametre kadar çarpılmış sonucunu verir, yani üssünü alır.

var a = Float.pow(4,2);


var a = Float.pow(4 , 2.2);


var a = Float.pow(-3 , 3);

a değişkeni -27.0 değerini alır.

round( ) Fonksiyonu

round() fonksiyonu parametre olarak aldığı değere en yakın tamsayı değeri döndürür. Eğer sayı alttaki ve üstteki değere eşit uzaklıktaysa büyük olan değer alınır.

var a = Float. round (4.2);


var a = Float. round (3.5);


var a = Float. round (-3.5);


sqrt( ) Fonksiyonu

sqrt() fonksiyonu parametre olarak aldığı değerin karekökünü verir. Parametre sıfırdan küçük olmamalıdır.

var a = Float. sqrt (9);


var a = Float. sqrt (3.5);


URL KÜTÜPHANESİ

URL kütüphanesi göreceli ve gerçek URL’ler ile ilgili işlemler yapabilmemiz için kullanışlı fonksiyonlar içerir.

escapeString( ) Fonksiyonu

escapeString() fonksiyonu parametre olarak aldığı değerdeki ?,#,%,& gibi özel karakterleri belirli kurallara göre başka değerlerle değiştirir ve sonucu döndürür.

var a = URL.escapeString (“Yemek mi?Tamam!”);

a değişkeni “Yemek%20mi%3FTamam!” değerini alır.

var a = URL.escapeString (“http://www.haydabree.com”);

a değişkeni “http%3A%2F%2Fwww.haydabree.com” değerini alır.

getBase( ) Fonksiyonu

getBase() fonksiyonu WML dosyasının bulunduğu yolu tam ve gerçek haliyle döndürür.

var a = URL.getBase();

WML dosyamızın “wmlscript/denemeler/” yolu altında bulunduğunu ve sunucunun “www.edvardotatilde.com” ismine sahip olduğunu farzedelim. a değişkeni bu durumda “http://www.edvardotatilde.com/wmlscript/denemeler/deneme1.wmls” gibi bir değer alır.

getFragment( ) Fonksiyonu

getFragment() fonksiyonu parametre olarak aldığı URL’de “#” karakterinden sonraki kısmı verir.

var a = URL.getFragment(“http://www.caydemi.net/demli.wml#deneme”);

a değişkeninin değeri “deneme” olacaktır.

getHost( ) Fonksiyonu

getHost() fonksiyonu parametre olarak aldığı URL değerinde sunucu alan ismini döndürür.

var a = URL. getHost(“http://www.caydemi.net/demli.wml#deneme”);

a değişkeni “www.caydemi.net” değerini alır.

getPath( ) Fonksiyonu

getPath() fonksiyonu parametre olarak aldığı URL değerinde dosyanın yolunu döndürür.

var a = URL. getPath(“http://www.caydemi.net/ornekler/demli.wml”);

a değişkeni “/ornekler/demli.wml” değerini alır.

getPort( ) Fonksiyonu

getPort() fonksiyonu parametre olarak aldığı URL değerindeki port numarasını döndürür. Varsayılan olarak 80 numaralı porttan bağlanılmasına rağmen, biz kendimiz de hangi porttan bağlanacağımızı belirleyebiliriz. Bunu yapmak için alan isminden sonra “:” karakteri ve port

numarası belirtilir.

var a = URL. getPort(“http://www.caydemi.net:80/ornekler/demli.wml”);

a değişkeni “80” değerini alır.

getQuery( ) Fonksiyonu

getQuery() fonksiyonu parametre olarak aldığı URL değerinde “?” karakterinden sonraki kısmı döndürür.

var a = URL. getQuery(“http://www.caydemi.net/demli.php?x=3&y=4”);

a değişkeni “x=3&y=4” değerini alır.

getReferer( ) Fonksiyonu

getReferer() fonksiyonu o anki dosyaya ulaşmak için çağrı yapan kaynağın en küçük göreceli URL değerini verir.

var a = URL. getReferer();

Fonksiyonu “deneme.wml” isimli bir dosyanın “anakart” isimli kartından çağırdığımızı farzedersek, a değişkeni “deneme.wml#anakart” değerini alır.

getScheme( ) Fonksiyonu

getScheme() fonksiyonu parametre olarak aldığı URL değerinde “:” karakterinden önceki kısmı döndürür.var a = URL. getScheme(“http://www.caydemi.com”);

a değişkeni “http” değerini alır.

isValid( ) Fonksiyonu

isValid() fonksiyonu parametre olarak aldığı URL değerinin doğru bir yazımı olup olmadığını kontrol eder. Yazım şekli doğruysa “true”, yanlışsa “false” değerini döndürür.

var a = URL. isValid(“http://www.caydemi.com/caylaaarr.wml”);

a değişkeni “true” değerini alır.

var a = URL. isValid(“http://www.caydemi.com##/caylaaarrr.wml”);

a değişkeni “false” değerini alır.

resolve( ) Fonksiyonu

resolve() fonksiyonu parametre olarak aldığı iki değeri birleştirerek tam bir URL adresi oluşturur. var a = URL. resolve(“http://www.caydemi.com/deneme/”, “caylaaarrr.wml”);

a değişkeni “http://www.caydemi.com/deneme/caylaaarrr.wml” değerini alır.

unescapeString( ) Fonksiyonu

unescapeString() fonksiyonu daha önce öğrendiğimiz escapeString() fonksiyonunun tersi bir işlem yapar, yani özel kodlanmış değerleri normal yazım hallerine dönüştürür..

var a = URL. unescapeString(“http%3A%2F%2Fwww.haydabree.com”);

a değişkeni “http://www.haydabree.com” değerini alır.

XHTML ve XHTML MP

İnternet uzmanları internetteki sayfaları hazırlamak için kullanılan HTML dilinin zaman içinde yetersiz kaldığını farkederek yeni bir dil geliştirdiler. Bu dile günümüzün popüler teknolojilerinden XML’i de ekleyerek XHTML’i oluşturdular. Böylece internetten kötü ve eksik kodlanmış sayfaları arındıracaklardı.Aslında HTML ile XHTML birbirine oldukça benzerdir. Fakat açılan etiketin mutlaka kapanması gibi XML’den miras alınan bazı kurallar sayfaları daha düzenli ve anlaşılması basit kılar. Ayrıca XHTML bir internet standardıdır, yani gün geçtikçe değeri artmaktadır. Eğer hala HTML kullanarak web sayfaları hazırlıyorsanız bu alışkanlığınızdan çabucak vazgeçmenizi öneririm.

XHTML MP’NİN WML’E GÖRE AVANTAJLARI

• XHTML MP’nin getirdiği en büyük avantaj, aynı teknolojiyle yazılan sayfaların hem internette, hem de taşınabilir cihazda görüntülenebilmesidir. Eğer XHTML kullanarak internet sayfaları hazırlıyorsanız, aynı kodlarla bir WAP sitesi de hazırlamaya başlayabilirsiniz. Eğer XHTML kelimesi sizin için hiçbir şey ifade etmiyorsa bu kitabı tamamen okumanız gerekecek

• Aynı teknolojiyle hem internet, hem WAP sayfaları hazırlayabildiğimiz için yeni teknolojiler öğrenmemiz gerekmez, bu bize zaman ve maliyet tasarrufu sağlar.

• XHTML MP, içeriğin ve sunumun birbirinden ayrılmasına imkan veren WAP CSS’i (WCSS) de destekler. Bu, içeriği bir kere kodladıktan sonra farklı ortamlarda görüntülenmek üzere görünümü şekillendirebileceğiniz anlamına gelir. Yani aynı XHTML sayfasını hem bilgisayarınızdan, hem de cep telefonunuzdan ekrana tam oturmuş ve karakter boyutları ayarlanmış şekilde izleyebilirsiniz.

• WAP CSS (WCSS) bizim karakter renkleri, boyutları, stilleri, arka plan renkleri gibi bir çok konuda hakimiyet kurmamıza izin verir. Hatırlarsanız bu gibi özellikleri WML’de değiştiremiyorduk.

XHTML MP’NİN WML’E GÖRE DEZAVANTAJLARI

• XHTML MP kartları ve desteleri desteklemez.

Hatırlarsanız WML sayfalarımız kartlardan ve destelerden oluşuyordu. Bir destenin içinde birden fazla kart bulunabiliyordu ve deste cihaza yüklendiği zaman kartlar arasındaki geçiş çabucak gerçekleşebiliyordu.XHTML MP’de benzer bir etkiyi sayfanın belli yerlerine <a /> elemanları tanımlayarak elde edebilirsiniz. Bunun nasıl yapılacağını daha sonra öğreneceğiz.

• XHTML MP zamanlayıcıları desteklemez.

WML’deki <timer /> elemanı bizim bir zamanlama olayı kurgulamamıza imkan veriyordu. Belli bir zaman sonra gerçekleşmesini istediğimiz bir olayı bu eleman sayesinde gerçekleştirebiliyorduk.XHTML MP’de ne <timer /> elemanı, ne de “ontimer” olayı desteklenir. Bunun yerine HTTP güncellemesi kullanabilirsiniz. İleriki konularda bunu öğreneceğiz.

• XHTML MP olayları desteklemez.

WML’de ontimer, onenterforward, onenterbackward ve onpick olayları desteklenmektedir. Fakat bu olayların kullanımı XHTML MP’de bulunmamaktadır. “ontimer” olayının benzeri bir etki HTTP güncellemesiyle yapılabilmektedir. Fakat diğer olayların alternatifleri XHTML MP’de yoktur. Eğer bu olayların kullanımı sizin tasarladığınız sayfa açısından önemliyse WML kullanmalısınız.

• XHTML MP değişkenleri desteklemez.

WML’de bir değişken oluşturarak ona değerler aktarabiliyorduk. Böylelikle mesela kullanıcının bazı bilgilerini sonraki kartlarda da kullanabiliyorduk. Fakat değişkenler XHTML MP’de desteklenmemektedir. Buna benzer bir etkiyi sunucuya veri göndererek ve sunucudan veri alarak oluşturabilirsiniz. İleriki konularda bunu öğreneceğiz.

• XHTML MP kullanıcı taraflı kodlamayı desteklemez.

WML tarafından desteklenen WMLScript diliyle kullanıcının cihazında çalışan kodlar yazabiliyorduk. WMLScript bizim bazı işlemler yapmamızı veya kullanıcının girdilerini kontrol etmemizi sağlıyordu.WMLScript XHTML MP’de desteklenmemektedir. Bunun yerine verileri sunucuda kontrol edebilir, işlemleri sunucuda yapabilirsiniz. Bunların nasıl olabileceğini ileride öğreneceğiz.Aslında WMLScript benzeri bir dilin gelecekte XHTML MP ile kullanılması planlanmaktadır. Fakat bu dili destekleyen cihazların piyasada hakimiyet kurmasının epey zaman gerektireceğini düşünüyorum.

• XHTML MP programlanabilir tuşları desteklemez.

WML’deki <do> elemanı yardımıyla cihazdak bazı tuşları isimlendirebiliyor, onlara istediğimiz işlemi yaptırabiliyorduk.XHTML MP’de tuşlara işlemler atayamazsınız. Benzeri bir etkiyi “accesskey” özelliğini veya WAP CSS’i kullanarak elde edebilirsiniz. İleride bu konuları öğreneceğiz.

• XHTML MP <u> etiketini desteklemez.

WML’de <u> elemanı yardımıyla yazıları altı çizili bir şekilde görüntüleyebiliyorduk. XHTML MP’de bu eleman bulunmaz, fakat WAP CSS yardımıyla bu sorun kolaylıkla halledilebilir.

• XHTML MP girdi alanları için format özelliğini desteklemez.

WML’de <input /> elemanı yardımıyla kullanıcıdan veri alabiliyor ve bu elemanın “format” özelliğiyle kullanıcının girdisini denetleyebiliyorduk.XHTML MP’de bu tip bir yapı bulunmaz. WAP CSS yardımıyla aynı etkiyi oluşturabilsek

de bu her tarayıcıda desteklenmez.

• XHTML MP <anchor> elemanıyla sunucuya veri gönderilmesini desteklemez.

WML’deki <anchor> elemanı ve bunun içindeki <go>, <postfield> gibi elemanları yardımıyla kullanıcının girdiği veriyi sunucuya gönderebiliyorduk.XHTML bu yöntemi desteklemez, bunun yerine bu iş için özel tasarlanmış yapılar içerir. İlerleyen konularda bunu öğreneceğiz.

Gördüğünüz gibi WML’den kaybolan özellikler için XHTML’e benzer yapılar getirilmiştir. Zaten WAP 2.0 daha önceki versiyonlarla uyumluluk gösterir, yani WAP 2.0 destekleyen cihazların eski WML sayfalarını da sorunsuzca çalıştırması gerekir. Fakat sizin oluşturmaya çalıştığınız sayfada WML’deki özelliklerden biri gerekiyorsa, o zaman sayfanızı WML ile yazmalısınız.

BAŞLIYORUZ!

Eveeet…Şimdi yavaş yavaş XHTML MP’nin derinliklerine inmeye başlayalım. Aşağıdaki kodları herhangi bir metin editöründe yazarak ilk.html ismiyle kaydedin. XHTML MP dosyalarının uzantısı .htm,.html veya .xhtml şeklinde olabilir.

<?xml version="1.0"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Merhaba</title> </head> <body>  <p>Bu benim ilk XHTML MP sayfam :)</p> </body></html>

Aşağıda ekran görüntüsünü göreceksiniz;

Şekil 3-1

Kodların anlamını öğrenmeden önce kod yazımında dikkat etmeniz gereken noktaları inceleyelim;

XHTML MP’NİN DİL ÖZELLİKLERİ

XHTML MP, XHTML’den türetildiği için dildeki kurallar XHTML’dekilerle aynıdır. Aslında bu kuralar size hiç de yabancı gelmeyecektir, çünkü daha önce öğrendiğimiz WML dilinde de aynı kurallar mevcuttur. Bunun da asıl nedeni hem XHTML’in, hem WML ‘in kökeninde yatan XML’dir. Aşağıda uymanız gereken kurallar listelenmiştir;

• Etiketler düzgün bir şekilde kapatılmalıdır.

XHTML MP’de açtığımız her etiketi mutlaka kapatmalıyız. Kapatmak için kapanış etiketine fazladan bir “/” karakteri geleceğini WML konusundan da biliyoruz. Burada da aynı kural geçerlidir. Örneğin aşağıdaki yazım yanlıştır;

<p>Bu bir paragraftır.

Doğru yazım aşağıdaki gibi olmalıdır;

<p>Bu bir paragraftır.</p>

• Etiketler ve özellikleri küçük harflerle yazılmalıdır.

Elemanları ve özelliklerini tanımlarken WML’deki gibi küçük harf kullanımına dikkat etmeliyiz. Aşağıdaki yazım yanlıştır;

<P ALIGN=”left”>Bu bir paragraftır. </P>


<p align=”left”>Bu bir paragraftır.</p>

• Özelliklere verilen değerler tırnak işaretleri arasında yazılmalıdır.

WML’den de hatırladığınız gibi elemanlara ait bazı özellikler olabilir, bu özelliklere verdiğimiz değerleri tırnak içinde yazmamız gerekir. Aşağıdaki yazım yanlıştır;

<p align=left>Bu bir paragraftır. </p>


<p align=”left”>Bu bir paragraftır.</p>

Tek tırnak kullanmamız da mümkündür;

<p align=’left’>Bu bir paragraftır.</p>

• Özellikler kısaltılmış biçimde yazılmamalıdır.

HTML’de bazı kısaltılmış yazım tekniklerine göz yumulur, çünkü bazı özelliklere ait sadece tek bir değer bulunmaktadır. Fakat XML’den miras alınan katı kurallı bir kodlama tekniği nedeniyle XHTML ve dolayısıyla XHTML MP’de buna izin verilmemiştir. Aşağıdaki yazımlar yanlıştır;

<input type=”checkbox” checked /><option selected>Seçimini yap…</option>

Doğru yazımlar aşağıdaki gibi olmalıdır;

<input type=”checkbox” checked=”checked” /><option selected=”selected”>Seçimini yap…</option>

• Etiketler düzgün sıralamayla kapatılmalıdır.

WML’den de hatırlayabileceğiniz gibi iç içe eleman kullanımında etiketlerin açılış ve kapanış sırasına dikkat etmemiz gerekir. İlk açtığımız etiketi en sonda kapatmaya, aynı şekilde son açtığımız etiketi ilk başta kapatmaya dikkat etmemiz gerekir. Aşağıdaki yazım yanlıştır;

<a> <b> …. </a></b>


<a> <b> …. </b></a>

XHTML MP DÖKÜMAN YAPISI

Örneğimizde ilk satırdaki “<?xml version="1.0"?>” ifadesiyle WML konusundan hatırlayacağınız gibi XML versiyonu tanımlaması yapılmıştır. XHTML MP’de bu tanımlamayı yapmak zorunda değilsiniz, fakat yapmadığınız zaman bazı WAP tarayıcılarla problem yaşayabileceğinizden size bu satırı ihmal etmemenizi tavsiye ederim.İkinci ve üçüncü satırlarda DOCTYPE bildirisi tanımlanmıştır. Hatırlarsanız bu bildiri sayfanızı hazırlarken kullanacağınız dilin özelliklerini belirliyordu. Her XHTML MP sayfasında bu bildiri tanımlanmak zorundadır.Siz basitçe her sayfanın başına bu üç satırı koyun. Bu arada birşeye daha dikkatinizi çekmek isterim; ilk üç satırdaki elemanlar XHTML MP elemanı olmadıklarından kapanış etiketleri yoktur. Şu ana kadar her şey tıpkı daha önce WML konusunda öğrendiğimiz gibi…

<html> elemanı

Örneğimizde dördüncü satırda “<html xmlns="http://www.w3.org/1999/xhtml">” ifadesi bulunmaktadır. <html> elemanı XHTML MP sayfalarının kök elemanıdır. Diğer bütün elemanlar bu elemanın içinde yazılmalıdır. Bu elemana ait “xmlns” özelliği, XHTML MP için ad uzayı tanımlamakta kullanılır. Bu özelliği belirtmeseniz de sayfanız çalışabilir, fakat size belirtmenizi tavsiye ederim. Bu özelliğe vereceğiniz değer de aynen örnekteki gibi “http://www.w3.org/1999/xhtml“ değeri olmalıdır. Ad uzayları hakkında ayrıntılı bilgi edinmek için XML teknolojisini öğreten bir kaynaktan yararlanmalısınız.

<head> elemanı

Örneğimizde beşinci satırda görebileceğiniz <head> elemanı sayfanız hakkındaki bazı bilgileri içeren elemanları barındırır. <meta>, <title>, <link> gibi elemanlar (bunları yakında öğreneceğiz) <head> elemanının içine yerleştirilirler.<head> elemanı XHTML MP sayfasının yapıtaşlarından biridir.

<title> elemanı

Örneğimizde altıncı satırdaki <title> elemanı <head> elemanının etiketleri arasına yerleştirilir ve sayfanın başlığını belirler. WML sayfalarında bulunan <card> elemanına ait “title” özelliği ile aynı etkisi vardır. Bu eleman <head> elemanının etiketleri arasında tanımlanır.

<body> elemanı

Cihazda görüntülenecek olan yazılar ve şekillerin tanımlandığı yer <body> elemanının içidir ve sayfanın gövdesini oluşturur. XHTML MP sayfasının temel yapılarındandır ve paragraf elemanları, liste elemanları, tablolar gibi birçok elemanı içinde barındırır. Bir XHTML MP sayfasında sadece bir <body> elemanı olabilir.<body> elemanı içinde metin barındıramaz, metinleri <p>, <h1>, <li> (bu elemanları akında öğreneceğiz) gibi elemanların içine yazabilirsiniz. Örneğin aşağıdaki ifade yanlıştır;

<body> Bu benim ilk XHTML MP sayfam :)</body>

Bu yanlışlığı gidermek için yukarıdaki metni <p> gibi bir elemanın içine yerleştirmeliyiz;<body> <p> Bu benim ilk XHTML MP sayfam :)</p></body>


WML’deki gibi XHTML MP’de de açıklama satırları “” etiketleri arasına yazılır. Bu etiketler arasındaki ifadeler WAP tarayıcı tarafından dikkate alınmaz.

 

GÖRÜNTÜ VE METİN BİÇİMLENDİRME ELEMANLARI

<p> elemanı

<p> elemanı WML’de öğrendiğimizdeki halinden farksızdır. Bu eleman paragraf oluşturmak için kullanılır. İçinde metin, resim gibi öğeler bulundurabilir.<p> elemanının “align” özelliği XHTML MP’de kaldırılmıştır. WAP CSS ‘deki “text-align” özelliği ile <p> elemanındaki metin hizalaması yapılabilir.

<hr /> elemanı

<hr /> elemanı ekranda yatay bir çizgi çizmek için kullanılır. Örneğimizi inceleyin;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>"hr" elemani</title> </head> <body> <p>Lütfen...</p> <hr /> <p>Burada sigara içmeyiniz...</p> <hr /> </body></html>

<hr /> elemanını <p> elemanının içinde kullanmamalısınız. Aşağıda ekran görüntüsünü görebilirsiniz;

Şekil 3-2

<br /> elemanı

<br /> elemanı,tıpkı WML’deki gibi bu elemanı yerleştirdiğiniz noktadan itibaren metni keser ve alt satırdan devam ettirir.

Başlık elemanları

WML’de <h1>, <h2>, <h3>, <h4>, <h5> ve <h6> elemanları başlık elemanları olarak bilinir ve başlık oluşturmak için kullanılırlar. Bu elemanların her biri farklı boyutta ve stilde başlık oluşturur. <h1> en büyük başlığı, <h6> en küçük başlığı oluşturur. Fakat elemanların oluşturduğu başlığın şekli cihazdan cihaza farklılık gösterir. Örneğimizi inceleyin;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>"h" elemani</title>

</head> <body> <p>

<h6>Sesim geliyor mu?</h6><h5>Sesim geliyor mu?</h5><h4>Sesim geliyor mu?</h4><h3>Sesim geliyor mu?</h3><h2>Sesim geliyor mu?</h2><h1>Sesim geliyor mu?</h1>

</p> </body></html>

Aşağıda ekran görüntüsünü görebilirsiniz.

Şekil 3-3

<b> ve <i> elemanları

WML’den de tanıdığımız bu elemanlar karakter stillendirmek için kullanılırlar. Örneğimizi inceleyin;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>"i" ve "b" elemanlari</title> </head> <body> <p>

<b>Belki görürüm...</b><br /> <i>Belki görmem...</i><br /> <b><i>Kime ne!</i></b> </p>

</body></html>

Şekil 3-4

WML’de metinlerin altını çizmek için kullandığımız <u> elemanı XHTML MP’de kullanılmamaktadır. Kelimeleri altı çizili şekilde yansıtmak için WAP CSS’den faydalanılır.

<pre> elemanı

XHTML MP’de metindeki boşluk karakteri birden fazla olursa bu bir boşluk karakteri olarak kabul edilir. Örneği inceleyin;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>"pre" elemani</title> </head> <body> <p>Duy, gör ve

hisset! </p>

</body></html>

Bu kodların çıktısı şekildeki gibidir;

Şekil 3-5

Gördüğünüz gibi fazladan boşluklar dikkate alınmamış ve sanki br boşluk karakteri gibi işlenmiş. Fakat bizim bu durumun önüne geçmek gibi bir şansımız var;<pre> elemanı. <pre> elemanı kullanılarak yazılmış metinlerde bütün boşluklar aynen çıktıya yansıtılır;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>"pre" elemani</title> </head> <body> <p>

<pre> Duy, gör

vehisset!

</pre> </p>

</body></html>

Aşağıda ekran görüntüsünü görebilirsiniz;

Şekil 3-6

<ul>, <ol> ve <li> elemanları

XHTML MP’de liste oluşturmak için <ul>, <ol> ve <li> elemanlarından faydalanılır. <ul> elemanı ile başlarına işaret konulmuş listeler yapılırken, <ol> elemanıyla başlarında numara bulunan listeler hazırlanır. <li> elemanı ise bu iki elemanın altında maddeleri belirtmek için kullanılır. Örneğimizi inceleyin;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>"ol" elemani</title> </head> <body> <p>

<b>Baharat Listesi:</b> <ol>

<li>Keklik</li> <li>Biber</li> <li>Nane</li>

</ol> </p>

</body></html>

Örneğimizde numaralı bir liste kullandık. Aşağıda ekran görüntüsünü görebilirsiniz;

Şekil 3-7

Gerekirse <ol> elemanının “start” özelliğinden faydalanarak numaralamaya hangi sayıdan başlamak istediğinizi belirleyebilirsiniz;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>"ol" elemani</title> </head> <body> <p>

<b>Baharat Listesi:</b> <ol start=”3”>


</ol> </p>

</body></html>

Burada numaralandırmaya 3 sayısından itibaren başlamak istediğimizi belirtmişiz. Aşağıda ekran görüntüsünü görebilirsiniz;

Şekil 3-8

Şimdi de aynı örneğin <ul> elemanı kullanılarak yazılmış halini inceleyelim;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>"ul" elemani</title> </head> <body> <p>

<b>Baharat Listesi:</b> <ul>


</ul> </p>

</body></html>


Şekil 3-9

Yakında öğreneceğimiz WAP CSS ile listeler üzerinde daha iyi bir hakimiyet kurabileceğiz.

<img /> elemanı

<img /> elemanı WML’deki görevinin aynısını XHTML MP’de de yaparak sayfalarımıza resim ekler. “alt” özelliği ile resmin yüklenmesinde problem yaşandığı durumlarda ekranda gösterilecek mesaj belirlenir. “src” özelliği resmin konumunu belirler, buraya yazacağınız ifade resmin bulunduğu tam adres olabileceği gibi göreceli bir adres de olabilir. “width” ve “height” özellikleri ile resmin ekrandaki genişliği ve yüksekliği ayarlanabilir. XHTML MP’yi destekleyen cihazlar WBMP resim formatı haricindeki GIF, JPG gibi popüler resim formatlarını da desteklerler, fakat bu durum cihazdan cihaza farkılık gösterebilir.Şimdi bir örnek inceleyelim;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>"img" elemani</title> </head> <body> <p>

<img src="papatya.gif" alt="papatya" width="50" height="50" /><br /> Hava çok güzel :) </p>

</body></html>

Şekil 3-10

Bir konuya dikkat etmeniz gerekir; “height” ve “width” özellikleri sadece kullanıcının ekranındaki resmin boyutlarını ayarlar, eğer yükleyeceğiniz resim 300x300 boyutlarındaysa bunun ekrandaki görünümünü 50x50 diye değiştirebilirsiniz, fakat cihaza yüklenen resim yine 300x300 boyutundaki resimdir, yani yüklenmesi uzun sürebilir. Bu nedenle resmin sunucunuzdaki boyutları ile cihazda görünmesini istediğiniz boyutlarının aynı olmasına dikkat etmelisiniz, böylece hız ve maliyet kazancınız olur.

<table> elemanı

<table> elemanını WML’den de tanıyoruz; bu eleman ile tablo oluşturulur. <table> elemanının içine yerleştirilen <td> elemanının etiketleri arasına veriler yazılır, ve aynı satırdaki <td> elemanları <tr> elemanının etiketleri arasına yerleştirilir. Örneğimizi inceleyin;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>"table" elemani</title> </head> <body> <table>

<tr> <td>O</td> <td>X</td> <td>X</td></tr><tr> <td>X</td> <td>O</td> <td>O</td></tr><tr> <td>X</td> <td>X</td> <td>X</td></tr>

</table> </body></html>

Şekil 3-11

Örneğimizde üç satır ve üç sütundan oluşan bir tablo oluşturduk. Yakında öğreneceğimiz WAP CSS ile tablodaki elemanlara arka plan renkleri vermek, çerçeve içine almak gibi stiller verebiliriz. Örneğin aşağıdaki gibi bir tabloyu WAP CSS’i öğrendikten sonra hazırlayabileceğiz.

Şekil 3-12

<td> elemanına ait “rowspan” ve “colspan” özellikleri ile hücreleri birleştirmemiz mümkündür. “colspan” özelliği hücreleri yan yana, “rowspan” özelliği ise alt alta birleştirir. Aşağıdaki örneği inceleyin;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>"table" elemani</title> </head> <body> <table >

<tr> <td colspan="2">O</td> <td>X</td></tr><tr> <td rowspan="2">X</td> <td>O</td> <td>O</td></tr><tr> <td>X</td> <td>X</td></tr>

</table> </body></html>

“rowspan” ve “colspan” özelliklerine verdiğiniz değerler kaç hücreyi birleştirmek istediğinizi belirtir. Biz ikişer hücreyi birleştirmişiz. Bu arada, şimdilik kafanız karışmasın diye örnek kodumuzda WAP CSS kodları olmasına rağmen onları size göstermiyorum. Yani normalde yukarıdaki kodun ekran görüntüsü aşağıdaki gibi olmayacaktır, fakat hücre birleşmesini daha iyi görmenizi istedim;

Şekil 3-13

BAĞLANTI ELEMANLARI

<a> elemanı

<a> elemanı WML’de de olduğu gibi başka sayfalara veya aynı sayfa içinde değişik noktalara bağlantı oluşturmaya yarar. Bu elemanın “href” özelliği ile bağlantı kurmak istediğimiz URL adresini belirleyebiliriz. “href” özelliğine vereceğimiz değer tam yol adresi veya göreceli bir adres olabilir.

Aynı Sayfada Başka Bir Noktaya Bağlanma

<a> elemanın “id” özelliği ile sayfanızdaki bir noktayı işaretleyebilir ve sonradan sayfanın başka bir yerinden bu noktayla bağlantı kurabilirsiniz. “id” özelliği XHTML MP elemanlarının hemen hemen hepsinde bulunmaktadır ve o elemanın ismi gibidir ,fakat aynı isimde başka bir eleman olmamalıdır. Bu özellikten daha sonra da çok faydalanacağız, fakat şimdi bu özelliği <a> elemanı ile nasıl kullanabileceğimizi görelim;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>"a" elemani</title> </head> <body> <p> <a id="baslangic"> <b> Minik Bir Masal </b> </a> <br /><br/> Bir zamanlar minik bir peri sol elini incitmis.

Bunu gören prens hemencecik kosarak minik perinin yanina gelmis ve onu doktora goturmus...<br /> ...<br/>

<a href="#baslangic">Basa dön</a> </p> </body></html>

Örneğimizde ilk <a> elemanının “id” özelliğine “baslangic” ismini vermişiz. Bu elemanın hiçbir

yerle bağlantısını kurmamışız. Daha sonra metnin en altında kullanıcının kolaylıkla başa dönebilmesi için bir bağlantı oluşturmuşuz. Buradaki <a> elemanının “href” özelliğine ilk baştaki <a> elemanının “id” özelliğine verdiğimiz değeri, yani baştaki <a> elemanının ismini vermişiz. Burada bu değeri yazmadan önce başına “#” karakteri koyduğumuza dikkat edin. Şimdi yazı ne kadar uzun olursa olsun, yazının en başına dönmemiz çok basit olacak. Aşağıda ekranları görebilirsiniz;

Bağlantıyı seçince Şekil 3-14 Şekil 3-15 Bazı telefonlarda aynı sayfadaki başka bir noktaya bu metodla ulaşma imkanı bulunmamaktadır. Yani buradaki bağlantı metodumuz eski model telefonlarda çalışmayabilir.

Başka Sayfalara Bağlanma

<a> elemanının “href” özelliğine başka sayfaların yol adreslerini verirseniz bu sayfalara ulaşabilirsiniz. Vereceğiniz adres tam veya göreceli bir adres olabilir. Az önceki örneğimizi yeniden düzenleyelim;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>"a" elemani</title> </head> <body> <p> <a id="baslangic"> <b> Minik Bir Masal </b> </a> <br /><br/> Bir zamanlar minik bir peri sol elini incitmis.

Bunu gören prens hemencecik kosarak minik perinin yanina gelmis ve onu doktora götürmüs...<br /> ...<br/>

<a href="#baslangic">Basa dön</a> <a href="sayfa2.html">Devam Et</a> </p> </body></html>

Ve sayfa2.html’deki kodlarımız da aşağıdaki gibi olsun;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>"a" elemani</title> </head> <body> <p> ...<br />

Masal da burda bitmis...Gökten üç elma yagmis, biri bana, biri sana, biri de bu kitabi okuyan herkeseee...<br />

<a href="sayfa1.html">Geri Dön</a><br /> <a href="http://www.masaldiyari.com">Daha Fazla Masal</a>

</p> </body></html>

Gördüğünüz gibi <a> elemanının “href” özelliğine URL adresi de verilebilmektedir. Aşağıda ekran görüntülerin görebilirsiniz;


Resimli Bağlantılar Oluşturma

WML’de olduğu gibi, XHTML MP’de de resimli bağlantılar oluşturulabilir. WML’den de hatırlayacağınız gibi bunu yapmak için <img> elemanını <a> elemanının etiketleri arasına yerleştirmek yeterlidir. Örneği inceleyin;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mistik Dünya...</title> </head>

<body> <p>

Çocuklar için Zen Dünyasi'na hos geldiniz...<br />Giris için resmi seçiniz. </p> <p align="center"> <a href="www.zendunyasi.com"><img src="resimler/zen.gif" alt="zen"></a> </p> </body></html>

Şekil 3-18

Bağlantıları Cep Telefonu Tuşlarına Atama

<a> elemanının “accesskey” özelliğine vereceğiniz değerle cep telefonunuzdaki 0,1,2,3,4,5,6,7,8,9,# ve * tuşlarını kullanarak bağlantıyı seçebilirsiniz. Aşağıdaki örneği inceleyin;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>idolüm ve ben...</title> </head> <body> <p>

Sizce en iyi gitarist hangisi?<br /> <a href="www.gitaristdunyasi.com/stevevai.html" accesskey="1">1- Steve

Vai</a><br /> <a href="www.gitaristdunyasi.com/jbecker.html" accesskey="2">2-J. Becker</a><br />

<a href="www.gitaristdunyasi.com/mfriedman.html" accesskey="3">3-M. Friedman</a><br /> </p> </body></html>

Burada kullanıcı 1, 2 veya 3 tuşunu tıklayarak bağlantıyı seçebilir ve sevdiği gitaristin sayfasına kolayca ulaşabilir. Aşağıda ekran görüntüsünü görebilirsiniz;

Şekil 3-19

Aynı etkiyi resimli bağlantılarla da oluşturabilirsiniz… Burada ilginizi çekebilecek bir nokta şudur; bilgisayarınızda yukarıdaki örnek sayfayı Firefox veya Internet Explorer gibi bir tarayıcıdan açarsanız “Alt+1” gibi bir tuş kombinasyonunda bağlantınız aktif hale gelecektir.

Seçenek Listeleri

XHTML MP’de de WML’deki gibi <select> elemanı yardımıyla seçenek listeleri tanımlanır. <option> elemanıyla da listedeki elemanlar oluşturulur.<select> elemanına ait “name” özelliği ile <select> elemanına isim verilir ve eğer seçilen seçenek sunucuya gönderilmişse, sunucuda seçenek listesine bu isim sayesinde ulaşılır. Sunucuya veriyi yollamak için <select> elemanı <form> elemanının içine yerleştirilmelidir (Daha sonra bu elemanı daha detaylı olarak inceleyeceğiz.)<option> elemanına ait “value” özelliği ise o seçeneğin değerini belirtir.

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Yemekler</title> </head> <body> <form action=”www.yemeklerimiz.com/secenek.php”> <p>

<select name="yemek"><option value="fasulye">Fasulye</option><option value="makarna">Makarna</option><option value="patlican">Patlican</option><option value="pilav">Pilav</option>

</select> </p> </form> </body></html>

Listeyi seçince Şekil 3-20 Şekil 3-21

Eğer seçenek listemizde birden fazla seçeneğin işaretlenmesine izin vermek istiyorsanız <select> elemanının “multiple” özelliğine “multiple” değerini vermeniz gerekir. Az önceki örneği aşağıdaki gibi değiştirelim;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Yemekler</title> </head> <body> <form action=”www.yemeklerimiz.com/secenek.php”> <p>

<select name="yemek" multiple=”multiple”><option value="fasulye">Fasulye</option><option value="makarna">Makarna</option><option value="patlican">Patlican</option><option value="pilav">Pilav</option>

</select> </p> </form> </body></html>

Şekil 3-22

<optgroup> elemanı

WML’den de hatırlayacağınız <optgroup> elemanı seçenek listesindeki seçenekleri gruplamak için kullanılır. Birden fazla seçenek listesinin olduğu sayfalara düzenli bir görünüm kazandırır. Bu elemana ait “label” özelliği gruplara isim verir. Aşağıdaki örneği inceleyin;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Yemekler</title> </head> <body>

<form action="www.yemeklerimiz.com/secenek.php"> <p>Hangi yemegi tercih edersiniz?<br />

<select name="yemek"><optgroup label="Sulu Yemekler"> <option value="fasulye">Fasulye</option> <option value="patlican">Patlican</option></optgroup><optgroup label="Diger Yemekler"> <option value="pilav">Pilav</option> <option value="makarna">Makarna</option></optgroup>

</select> </p>

</form> </body></html>

Şekil 3-23

<input /> elemanı

WML’den de hatırladığınız <input /> elemanı kullanıcı ile etkileşimimizi artırarak ondan bilgi almamızı sağlar. Sunucu tarafında bu elemandan gelecek verileri işlemek için onu <form> elemanının etiketleri arasına yerleştirmeliyiz. Ayrıca < input /> elemanının “name” özelliği ona sunucuda ulaşmamızı sağlar. Bu konuları daha sonra öğreneceğiz. WML’den farklı olarak XHTML MP bizim daha çeşitli <input /> türleriyle çalışmamızı sağlar. <input /> elemanının “type” özelliğine verdiğimiz değer, bu elemanın türünü belirleyecektir. Aşağıda XHTML MP’de desteklenen <input /> elemanı türleri sıralanmıştır;

1. Metin Girdi Alanları:

Kullanıcıdan bilgi alabilmek için kullanılırlar. Kullanabilmek için <input /> elemanının “type” özelliğine “text” değeri verilmelidir. “maxlength” özelliği ile kullanıcının girebileceği maksimum karakter sayısı belirlenebilir. Yine bu elemanın “value” özelliğine vereceğiniz değer ekranda kendiliğinden görünecek değeri belirtir. Ne yazık ki XHTML MP’deki <input /> elemanı, WML’deki gibi “format” özelliğine sahip değildir. Fakat ileride öğreneceğimiz WAP CSS ile kullanıcının metin kutusuna girdiği değeri bizim istediğimiz formatta girmesini sağlayabiliriz.

<?xml version="1.0" encoding="ISO8859_9"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>"input" elemani</title> </head> <body>

<form action="isimgiris.php"> <p>

isminiz?<br /> <input type="text" maxlength="20" value="Ali"> </p>

</form> </body> </html>

Şekil 3-24

2. Parola Girdi Alanları:

Metin girdi alanından farklı olarak, parola alanlarında karakterler “*” karakteriyle gösterilir, yani kullanıcının girdiği değer ekranda gözükmez. Parola alanını kullanabilmek için <input /> elemanının “type” özelliğine “password” değerini vermelisiniz.


<form action="isimgiris.php"> <p>

isminiz?<br /> <input type="text" maxlength="20" value="Ali"><br /> parola?<br /> <input type="password" maxlength="20"> </p>

</form> </body> </html>

Şekil 3-25

3. Onay Kutuları:

Web sayfalarından da tanıdığımız onay kutularını <input /> elemanının “type” özelliğine vereceğiniz “checkbox” değeriyle XHTML MP’de de görebiliriz. “checkbox” özelliğine vereceğiniz “checked” değeri sayesinde istediğiniz onay kutusunun kendiliğinden işaretli olmasını sağlayabilirsiniz. “value” özelliği onay kutusunun değerini belirtir ve daha sonra sunucuda onaylı kutuların değerini bu özellik sayesinde öğreniriz.


<form action="soru.php"> <p>

Hangileri rakamdir?<br /> <input name=”cevap” type="checkbox" value="1"

checked="checked">1<br /> <input name=”cevap” type="checkbox" value="i">i<br /> <input name=”cevap” type="checkbox" value="k">K<br /> <input name=”cevap” type="checkbox" value="2">2<br />

</p> </form>

</body> </html>

Şekil 3-26

4. Radyo Düğmeleri:

Yine web sayfalarından aşina olduğumuz radyo düğmelerini XHTML MP’deki <input /> elemanının “type” özelliğine “radio” değeri vererek elde edebilirsiniz. “checkbox” özelliğine vereceğiniz “checked” değeri sayesinde istediğiniz radyo düğmesinin kendiliğinden işaretli olmasını sağlayabilirsiniz. “value” özelliği radyo düğmesinin değerini belirtir ve daha sonra sunucuda seçili radyo düğmesinin değerini bu özellik sayesinde öğreniriz.Radyo düğmelerinde dikkat etmeniz gereken bir nokta, bütün elemanların “name” özelliğine aynı ismi vermeniz gerektiğidir.



Hangisi rakamdir?<br /> <input name=”cevap” type="radio" value="1"

checked="checked">1<br /> <input name=”cevap” type="radio" value="i">i<br /> <input name=”cevap” type="radio" value="k">K<br /> <input name=”cevap” type="radio" value="2">2<br />

</p> </form>

</body> </html>

Şekil 3-27

5. Gizli Alanlar:

Gizli alanlar, cihazın ekranında görünmeyen ve uygulamanız için gerekli bazı verileri depolayabileceğiniz alanlardır. Kullanıcının bilmesine gerek olmayan fakat sizin için önemli bilgileri bu alanlarda depolayabilir ve sunucuya yollayabilirsiniz.



isminiz?<br /> <input type="text" name="isim"> <input type="hidden" name="deger" value="123" >

</p> </form>

</body> </html>

Yukarıdaki alanlardan “isim” alanı ekranda gözükecek, fakat “deger” alanı ekranda gözükmeyecektir. Ekran görüntüsünü inceleyin;

Şekil 3-28

Form Bilgilerini Sunucuya Göndermek

XHTML MP’de verileri sunucuya ulaştırmak için <form> elemanı ve “Submit” tuşuna ihtiyaç duyarsınız. Bu nedenle önce bu elemanları daha yakından tanıyalım;

• <form> elemanı:

<form> elemanı, <input>, <select> gibi sunucuya ulaştırılmak istenecek elemanları içinde barındırır. Bir başka deyişle bu elemanları ancak <form> elemanının içinde kullanarak sunucuya veri yollayabilirsiniz. Yalnız dikkat etmeniz gereken önemli bir nokta, bu elemanların doğrudan <form> elemanı içinde kullanılamayacağı, arada bir <p> bloğu olması gerektiğidir.

<form> <p> <input …> <select …> </p></form>

<form> elemanına ait “method” özelliği formdaki bilgilerin sunucuya nasıl ulaştırılacağını belirler. Bu özelliğin varsayılan değeri “get”tir. Bu değer verildiği zaman bilgi URL’nin sonuna eklenerek sonuna eklenerek sunucuya yollanır, fakat bu şekilde yollanabilecek bilgi miktarı kısıtlıdır. Verilebilecek diğer bir değer “post”tur, bu değer verilirse bilgiler sunucuya yollanan isteğin mesaj gövdesine yerleştirilerek yollanır. Sunucuya yollayacağınız veri miktarı büyükse bu yöntemi tercih etmelisiniz.<form> elemanının “action” özelliği ile verilerin hangi adrese yollanacağını belirlersiniz.

<form action=”veri_kaydet.php” method=”post”> ….</form>

Yukarıda verilerimizi veri_kaydet.php isimli bir dosyaya yolluyoruz, fakat buraya “http://www.kaydedilmisveriler.com/veri_kaydet.php” gibi tam bir URL adresi de yazabilirdik.

• “Submit” Tuşu:

XHTML MP’de sunucuya veri yollamak için “submit” tuşundan faydalanılır. Bu tuşu oluşturmak için <input> elemanının “type” özelliğine “submit” değeri verilir ve bu tuşa basıldığı zaman formdaki elemanlar sunucuya yollanır. Bu tuşun üzerinde varsayılan olarak “Submit” yazısı bulunur, fakat <input> elemanının “value” özelliğine vereceğiniz değerle bu yazı değişebilir.



isminiz?<br /> <input type="text" name="isim"><br /> <input type="submit" value="Yolla!" >

</p> </form>

</body> </html>

Şekil 3-29

• “Reset” Tuşu:

“Reset” tuşu ile forma girilen bilgiler temizlenir. Bu sayede kullanıcının bilgilerin girişinde hata yapması durumunda uzun uzun onları silmekle uğraşmasına gerek kalmaz, “Reset” tuşu bunu onların adına yapar. Bu tuşu <input> elemanının “type” özelliğine “reset” değerini vererek elde edebilirsiniz. Varsayılan olarak tuşun üzerinde “Reset” yazar, fakat <input> elemanının “value” özelliğine vereceğiniz değerle bu yazı değişebilir.

<?xml version="1.0" encoding="ISO8859_9"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>"input" elemani</title> </head> <body>


isminiz?<br /> <input type="text" name="isim"><br /> <input type="reset" value="Temizle" >

</p> </form>

</body> </html>

Şekil 3-30

Gördüğünüz gibi verileri sunucuya yollamak için en önemli iki eleman <form> elemanı ve “Submit” tuşudur. Şimdi bir örnek yapalım;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN""http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Anket</title> </head> <body>

<form action="www.anketci.com/form_kayit.php"> <p> isminiz?<br /> <input type="text" name="isim"><br /> parola?<br /> <input type="password" name="parola"><br /> ülke? <select name="ulke"> <option value="tr">Türkiye</option> <option value="de">Almanya</option> <option value="fr">Fransa</option>

</select> Sizce hangisi?<br />

<input type="radio" name="secim" value=”formula1”>Formula 1<br /> <input type="radio" name="secim" value=”universiade“>Universiade<br />

<input type="submit" value="Yolla!"> <input type="reset" value="Temizle!"> </p></form>

</body></html>

İşte size güzel bir form örneği, ekran görüntüleri de aşağıdaki gibidir;


Sunucu Taraflı Programlama

Sunucu tarafında kullanacağınız PHP, ASP, JSP, PERL vs… gibi bir programlama diliyle sunucuya gelen verileri işleyebilirsiniz. Ben örneğimiz için PHP dilini tercih ettim. <input> ve <select> elemanlarının “name” özelliklerine verdiğimiz değerler sayesinde onlara sunucuda ulaşmamız mümkün olur. Şimdi bir önceki konuda verdiğimiz örneğimizden gelen verileri sunucuda nasıl işleyebileceğimizi görelim;

<?php header('Content-type: application/vnd.wap.xhtml+xml); echo '<?xml version="1.0" encoding="ISO8859_9"?>'; ?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Anket</title> </head> <body> <p> Sunucuya erisen veriler:<br/> isim: <?php echo $_POST["isim"]; ?><br/> parola :<?php echo $_POST["parola"]; ?><br/>

ülke :<?php echo $_POST["ulke"]; ?><br/> seçim :<?php echo $_POST["secim"]; ?><br/> </p> </body></html>

Bu dosyayı sunucunuzda ayarladığınız kök dizine kaydetmeniz gerektiğine dikkat edin. Kodumuzun ilk başında başlık bilgisi olarak dökümanımızın “mime” tipini yolluyoruz, bu bilgi sayesinde cihaz dökümanımızın ne tip bir içeriğe sahip olduğunu anlıyor. XHTML MP için ayarlanabilecek “Mime” tipi değerlerini bir sonraki başlıkta öğreneceğiz.Daha sonraki sayfa içeriğinde PHP’nin $_POST() fonksiyonunu kullanarak sunucuya yolladığımız “isim”, “parola”, “ulke” ve “secim” isimli değişkenleri arıyoruz. Bizim sayfamız gerçekten çok basit, yaptığı tek şey bu değerleri ekranda göstermek. Fakat siz belki bu değerleri sunucuda daha karmaşık işlemlere sokarak örneğin MySQL, SQL Server, Oracle gibi bir veritabanında saklamak isteyebilirsiniz. Bu tamamen sizin isteğinize bağlı… Aşağıda ekran görüntüsünü görebilirsiniz;

Şekil 3-33

XHTML MP için Mime Tipleri

XHTML MP için üç tip “mime” tipi ayarlanabilir;

1. application/vnd.wap.xhtml+xml : Bu tip, OMA(Open Mobile Alliance) tarafından tanımlanmıştır. Bazı WAP tarayıcıları bu tip tanımı yapılmamışsa içeriği çaıştırmaz.

2. application/xhtml+xml : Bu tip, XHTML dökümanları için yapılan tanımlama şeklidir.

3. text/html : Bu tip, normal HTML dökümanları için yapılan tanımdır. Fakat bu tanımlama şeklinde sayfanız bir XML dökümanı gibi ele alınmaz. Bazı eski internet tarayıcılarının (İnternet Explorer gibi) tanıdığı tip şeklidir.

Yazdığınız XHTML MP sayfasının internet tarayıcıları tarafından da görüntülenebildiğini biliyorsunuz. Fakat bizim bir önceki konuda yaptığımız örneğimizin internette görüntülenme şansı

oldukça düşüktür, çünkü “Opera” tarayıcısı haricideki tarayıcılar “application/vnd.wap.xhtml+xml” tip tanımını desteklememekte, dolayısıyla sayfamız çoğu insan tarafından görüntülenememektedir. Fakat bizim bu durumun üstesinden gelme şansımız var, “Mime” tipini dinamik olarak seçerek, yani tarayıcının desteklediği “Mime” tipine göre tanım yollayarak bu işi halledebiliriz. Biraz karışık geldi, değil mi? Aslında çok basit, örneğimizi yeni haliyle ekrar inceleyin, fakat programlama mantığını bilmiyorsanız ve http protokolü hakkında hiçbir bilginiz yoksa aşağıdaki kodlardan tam olarak faydalanamayacaksınız;

<?php if (stristr($_SERVER["HTTP_ACCEPT"], "application/vnd.wap.xhtml+xml")) { header("Content-Type: application/vnd.wap.xhtml+xml"); } else if (stristr($_SERVER["HTTP_ACCEPT"], "application/xhtml+xml")) { header("Content-Type: application/xhtml+xml"); } else { header("Content-Type: text/html"); }echo("<?xml version=\"1.0\" encoding=\"ISO8859_9\"?>");?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Anket</title> </head> <body> <p> Sunucuya erisen veriler:<br/> isim: <?php echo $_POST["isim"]; ?><br/> parola :<?php echo $_POST["parola"]; ?><br/>

ülke :<?php echo $_POST["ulke"]; ?><br/> seçim :<?php echo $_POST["secim"]; ?><br/> </p> </body></html>

HTTP isteğinin “accept” başlığında tarayıcı tarafından desteklenen bütün “Mime” türleri bulunur. Biz basitçe bu türlerden bizim istediklerimizi sırasıyla kontrol ettik. İlk başta “application/vnd.wap.xhtml+xml” tipine baktık, eğer bu tip “accept” başlığında varsa kullanıcı sayfamızı bir WAP tarayıcıdan görüntülemeye çalışıyor demektir, o zaman biz de başlığı “Content-Type: application/vnd.wap.xhtml+xml” olacak şekilde ayarladık.Bu başlık bulunamazsa “application/xhtml+xml” tipine baktık , “Firefox” gibi internet tarayıcıları bu tip başlığı desteklemektedir ve bu tip bir tarayıcıdan gelen isteğe göre tanımlamamızı yaptık.Eğer bu başlık da bulunamazsa içeriği “Content-Type: text/html” şeklinde ayarlayarak “İnternet Explorer” gibi bir tarayıcıdan gelecek bir isteğe de cevap verebildik.Bir başka deyişle şu an sayfamız “Mime” tipi tanımlamasını tarayıcıya göre değiştirmekte, dolayısıyla XHTML MP sayfamız oldukça geniş bir kitle tarafından görüntülenebilmektedir. Sizce de harika değil mi?

Hatırlarsanız WML’de <timer /> elemanı sayesinde bir zamanlama olayı kurgulayabiliyor ve örneğin sayfamızın belli bir süre sonra kendisini güncellemesini ve bu sayede kullanıcının sürekli güncel bilgilerden haberdar olmasını sağlayabiliyorduk. Maalesef <timer /> elemanı XHTML MP tarafından desteklenmemektedir, fakat bizim şansımıza http protokolünün böyle bir özelliği bulunmaktadır ve sayfanın belli peryotlarla kendini yenilemesini sağlayabiliriz. Aşağıda bunu yapabilen örneği görüyorsunuz;

<?xml version="1.0" encoding="ISO8859_9"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Borsa Bilgileri</title>

<meta http-equiv="Cache-Control" content="no-cache"/> <meta http-equiv="refresh" content="15"/> </head> <body> <p> Bugün piyasalardaki… </p> </body></html>

“http-equiv” özelliğine “refresh” değeri ve “content” özelliğine “15” değerini vererek sayfamızın 15 saniyede bir tekrar yüklenmesini istiyoruz. Şimdi kullanıcı sadece “cache” derdinden kurtulmakla kalmayacak, aynı zamanda sayfanın kendini otomatik olarak güncellemesi sayesinde en güncel bilgileri de gözlemliyor olacak. Bu faydalı özelliği belli bir süre sonra başka bir sayfayı yüklemek için de kullanmak isteyebilirsiniz. Bunun için aşağıdaki gibi bir yapı kullanmalısınız:

<meta http-equiv="refresh" content="15;URL=haberler.html"/>

Yaptığımız tek şey “content” özelliğindeki saniye değerinden sonra noktalı virgül koymak ve “URL=…” gibi bir yazımla gitmek istediğimiz adresi belirtmek oldu.

CSS ve WCSS

WCSS (WAP CSS), XHTML MP sayfalarına stil vermek için kullanılan bir dildir. Daha önce internet sayfası hazırladıysanız size hiç de yabancı gelmeyecektir, çünkü temelinde CSS vardır. XHTML MP gibi WCSS de WAP 2.0 spesifikasyonunda tanımlanmıştır.Dediğimiz gibi, WCSS, internet sayfalarına stil vermek için kullanılan CSS’in bir alt kümesidir, başka bir deyişle taşınabilir cihazlar için tasarlanmış halidir. CSS, internet sayfalarında içeriği ve ekrana sunumu birbirinden ayırmak için oluşturulmuş bir dildir. Yani siz içerikte en ufak bir değişiklik yapmadan CSS yardımıyla koskoca bir internet sitesindeki bütün sayfaların görünümünü değiştirebilirsiniz- ki inanın, bu oldukça faydalı bir özelliktir. WCSS ‘de ise küçük ekranlar düşünülerek ufak tefek değişiklikler yapılmıştır, yani CSS’den pek farklı değildir. Bu nedenle CSS biliyorsanız WCSS’i öğrenmek sizin için çocuk oyuncağı olacaktır, ama bilmiyorsanız üzülmeyin, burada WCSS’i güzelce öğreneceksiniz…Taşınabilir cihazlar için XHTML MP kullanılarak hazırlanan sayfalarda, XHTML MP’nin sayfaların görünümü üzerindeki etkisinin fazla olmadığını biliyoruz. Hatırlarsanız bir tablo hücresini renklendiremiyorduk, veya ekrandaki yazıların stilini değiştiremiyorduk.

Bu durum normaldir, çünkü XHTML MP sadece sayfaların içeriğini tanımlamak için tasarlanmıştır. WCSS ise, XHTML MP sayfalarının ekranda nasıl sunulacağını tanımlamak için tasarlanmıştır.WAP 2.0 öncesinde uygulama geliştiriciler, bir WAP sayfası hazırlamak için WML ve WMLScript kullanıyorlardı, ve internet sitesi geliştirmek için HTML-XHTML/CSS kullanıyorlardı. Fakat şu an uygulama geliştiriciler artık XHTML MP ve WCSS kullanarak aynı anda hem cep telefonu gibi taşınabilir cihazlar için, hem de evdeki bilgisayarlarımız için internet sayfaları hazırlıyorlar.

WCSS’in Avantajları

• WCSS ile sayfanızın görünümü üstünde daha etkin bir kontrolünüz olur, çünkü WCSS ile arka plan renkleri, karakter tipleri, çerçeveler gibi elemanlara ulaşabilirsiniz.

• WCSS’i öğrenmeniz takdirinde (ve XHTML MP’yi de öğrenmişseniz) cep telefonuna yönelik bir WAP sitesini ve bir internet sitesini hazırlamak için aynı teknolojiyi kullanırsınız: XHTML MP ve WCSS. Çünkü XHTML MP XHTML’in, WCSS de CSS’in alt kümesidir ve bu nedenle bilgisayarlarımızın tarayıcılarında da rahatlıkla görüntülenebilirler. Bu sayede bir taşla iki kuş vurmuş olursunuz .

• WCSS, XHTML MP sayfalarının cihazın ekranında nasıl görüntüleneceğini belirler. Yani içerik ve sunum birbirinden ayrılır. Bu sayede farklı ekran boyutları için içeriği değiştirmezsiniz, yapmanız gereken tek şey farklı WCSS dosyaları hazırlamaktır. Böylece aynı sayfayı hem bilgisayar, hem PDA hem de farklı cep telefonu modellerinin ekranlarında uygun bir şekilde görüntülenmek üzere programlayabilirsiniz. Sayfanızın içeriğini değiştirmenize gerek yoktur.

• Zamandan ve işgücünden kazanırsınız! Piyasaya yeni bir telefon modeli gelirse yapmanız gereken tek şey o modele uygun bir WCSS sayfası hazırlamak olur.

• Sayfalarınızın görünümünden sıkılırsanız veya patronunuz yeni bir sayfa tasarımı isterse WCSS sayfanızda yapacağınız basit değişikliklerle bütün sitenizi çabucak güncelleyebilir, maaşınıza güzel bir zammı hakedebilirsiniz.

• İnternet siteniz için bir WCSS dosyası hazırlarsanız, bu dosya cihaza yüklendikten sonra önbelleğe alınır, böylece ziyaretçi sitenize bir daha geldiğinde aynı WCSS dosyası bir daha yüklenmeyerek bağlantı masrafından tasarruf edilir.

• İçerik ve sunum birbirinden ayrıldığı için XHTML MP sayfanız daha küçük olur, bu da ziyaretçinin cihazına daha çabuk yükleneceği anlamına gelir (Fakat bu durum ziyaretçi sayfanızı ilk defa yüklüyorsa geçerli değildir.)

WCSS’in Dezavantajları

• Maalesef her WAP tarayıcı XHTML MP ve WCSS’i desteklemez, ayrıca destekleyen cihazlar da WCSS’deki her özelliği desteklemez. Yani örneğin WCSS’deki arka plan rengini değiştirme özelliği bir cihazda kullanılabilirken, bir diğerinde kullanılmıyor olabilir.

• Kullanıcı sayfanızı ilk defa ziyaret ediyorsa sayfanızın yüklenme süresi biraz uzun olabilir, çünkü WAP tarayıcı önce XHTML MP sayfasını , ardından WCSS sayfasını yükler ve her seferinde sunucuya birer istek yollar. Bu nedenle ilk yükleme süresi biraz uzun olacaktır. Fakat daha sonra WCSS dosyası önbelleğe alınacağından sonraki yüklemeler çok daha çabuk olacaktır.

BAŞLIYORUZ!

Daha önce de bahsettiğimiz gibi, CSS deneyiminiz varsa WCSS öğrenmeniz çok basit olacaktır, çünkü WCSS sadece CSS’in alt küme halidir. Fakat “CSS de ne olaki?“ gibi bir soru sorduysanız da korkmayın, çünkü WCSS’in ne kadar basit olduğunu görünce şaşırabilirsiniz . Şimdi vakit kaybetmeden ilk örneğimize geçelim. Önce herhangi bir metin editörü açın ve içine şu satırı yazın:

p { text-align:right ; color:blue } /* acaba çalışacak mı? */

Şimdi bunu herhangi bir dizine ilkStil.css adıyla kaydedin. Merak etmeyin anlamını sonradan öğreneceğiz. Sonra da aşağıdaki XHTML MP sayfasını oluşturun ve CSS dosyanızla aynı dizine kaydedin.

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>

<link href="ilkStil.css" rel="stylesheet" type="text/css" /> <title>Mavi bir dünya</title> </head> <body>

<p> Mavi rengi severim...

</p> </body></html>

Dikkat ettiyseniz gayet normal bir XHTML MP sayfası hazırlamışız, sadece <head> elemanı içine fazladan bir eleman yerleştirmişiz. Şimdi ekran görüntüsünü görelim;

Şekil 4-1

“Fakat nasıl olur? Biz <p> elemanına böyle bir özellik tanımlamadık fakat içindeki yazı hem sağa dayalı, hem de mavi renkli!” dediğinizi duyar gibi oluyorum, ama daha durun, bu daha başlangıç! WCSS gerçekten oldukça güçlü bir stil tanımlama dilidir ve sayfaların görünümü üzerindeki hakimiyetini gördükçe daha da şaşıracaksınız…

WCSS’İN DİL ÖZELLİKLERİ

Bir WCSS ifadesi bir selektör(seçici), bir özellik ve bir özellik değerinden oluşur. Aşağıdaki örnek basit bir WCSS ifadesidir;

p { text-align : right }

selektör özellik değer

Gördüğünüz gibi önce selektör yazılır. Özellik ve özellik değeri “{“ ve “}” karakterleri arasında yazılır ve aralarında “:” karakteri bulunur.Eğer aynı selektör için birden fazla özelliğe değer verilmek isteniyorsa özellik ve değer grupları “;” karakteriyle birbirlerinden ayrılır.

p { text-align:right ; color:blue }

İstenirse birden fazla selektör için aynı tanımlamalar yapılabilir, bu durumda selektörler birbirlerinden “,” karakteriyle ayrılır.

p , h1 { text-align : right }


WCSS’de açıklama satırları “/*” ve “*/” ifadeleri arasına yazılır. Bu aralıkta yazdığınız herşey tarayıcı tarafından görmezlikten gelinecektir.

/* Tek satırlık bir açıklama satırı *//* Çok satırlı bir açıklama satırı*/

XHTML MP VE WCSS’İ İLİŞKİLENDİRME

XHTML MP sayfalarımızı WCSS ile ilişkilendirmenin üç yolu vardır;

• Dışarıdaki bir WCSS sayfası ile bağlantı kurmak• WCSS stillerini XHTML MP sayfasının <head> kısmında tanımlamak• XHTML MP elemanlarının “style” özelliğinden faydalanmak

Bunlardan ilk metot en popüler olanıdır, çünkü içerik ve sunumun birbirinden ayrılmasına olanak sağlayan tek seçenek odur. Ayrıca bu yöntemde aynı WCSS sayfasını birden fazla XHTML MP sayfası kullanabilir, hatta koca bir site için tek bir WCSS sayfası tanımlayarak ve bu sayfayı bütün XHTML MP sayfalarına bağlayarak site şekillendirilebilir.Şimdi sırasıyla bu metodları öğrenelim;

Dışarıdaki bir WCSS sayfası ile bağlantı kurmak

Dışarıdaki bir WCSS sayfasıyla bağlantı kurmak için XHTML MP’nin <link /> elemanından faydalanılır. Bu elemanın “href” özelliğine bağlantı kurmak istediğimiz WCSS sayfasının göreceli veya tam adresi girilir. Örneğimizde WCSS sayfası ve XHTML MP sayfası aynı dizinde olduğu için sadece dosya ismini yazmamız yeterli oldu. <link /> elemanının “rel” özelliğine verdiğimiz değer dışarıdan bağlanan sayfanın XHTML MP ile ilişkisini tanımlar, WCSS sayfaları için bu değer “stylesheet” olmalıdır.“type” özelliği ise dışarıdan bağlanan sayfanın “Mime” tipini gösterir, WCSS sayfalarının “Mime” tipi “text/css” şeklindedir.Bir XHTML MP sayfasına dışarıdan birden fazla WCSS sayfası yüklenebilir, bunu yapabilmek için basitçe birden fazla <link /> elemanı tanımlanır.

<head> <link href="stil1.css" rel="stylesheet" type="text/css" /> <link href="stil2.css" rel="stylesheet" type="text/css" /> …</head>

WCSS stillerini XHTML MP sayfasının <head> kısmında tanımlamak

XHTML MP’deki <style> elemanı yardımıyla WCSS stilleri XHTML MP sayfasının <head> kısmında tanımlanabilir. Bu şekildeki bir yazımda WCSS stili sadece içinde bulunduğu XHTML MP sayfası için geçerli olacaktır. Örneğimizi inceleyin;


<style type=”text/css”> p {text-align:right;color:blue}

</style> <title>Mavi bir dünya</title> </head> <body>

<p> Mavi rengi severim...

</p> </body></html>

Gördüğünüz gibi WCSS stilleri <style> elemanının etiketleri arasına tanımlanmış. Bu elemana ait “type” özelliğine ise “Mime” değeri verilir ve WCSS tanımları için bu değer “text/css” şeklindedir. Ekran görüntüsü Şekil 4-1’dekinin aynısıdır.

XHTML MP elemanlarının “style” özelliğinden faydalanmak

XHTML MP elemanlarının çoğunda “style” özelliği bulunur ve bu özellikten faydalanarak tek bir elemana stil vermemiz mümkün olur. WCSS stilleri bu özelliğe değer olarak verilir. Örneği inceleyin;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mavi bir dünya</title> </head> <body>

<p style=”text-align:right ; color:blue”> Mavi rengi severim...

</p> </body>

</html>

Burada <p> elemanının “style” özelliğinden faydalanarak WCSS tanımlamalarını yapmışız. Ekran görüntüsü Şekil 4-1’dekinin aynısıdır.Şunu belirtmeliyim ki, bu kullanımı pek tercih etmemelisiniz, sonuçta XHTML MP elemanının özelliği yardımıyla stil tanımlamaktansa, stilleri ayrı bir yerde tanımlamak hem sayfa düzeni açısından, hem de WCSS’in genel mantığı açısından daha akıllıca bir yaklaşım olacaktır.

SELEKTÖR TİPLERİ

Selektörler, WCSS stillerinin XHTML MP’deki hangi elemanlara uygulanacağını belirlemek için kullanılırlar. Selektörlere verilen isimler, XHTML MP sayfalarındaki eleman isimleriyle genelde aynıdır. İlk örneğimizdeki WCSS kodunu bir daha hatırlayalım:

p { text-align:right ; color:blue }

Burada selektörümüzün ismi “p”. Bu demek oluyor ki, bu WCSS sayfasının ilişkilendirildiği XHTML MP sayfalarında bütün <p> elemanlarındaki metinler sağa dayalı ve renkleri mavi olarak görünecekler (Neden böyle olduğunu daha sonra öğreneceğiz). Bir başka deyişle buradaki WCSS stilleri bütün <p> elemanları için geçerlidir. Aslında selektör tanımlamak için dört farklı metod vardır:

1. Tip selektörleri2. Sınıf Selektörleri3. ID Selektörleri4. Genel Selektörler

Şimdi sırasıyla bu konuları inceleyelim:

Tip Selektörleri

Tip selektörlerini elde etmek için şu ana kadar örneklerimizde yaptığımız gibi direkmen XHTML MP elemanının ismini tanımlarız. Yani <h1> elemanının selektörü “h1”, <a> elemanının selektörü “a”, <p> elemanının selektörü “p” vs… gibi tanımlanır. Burada büyük-küçük harf duyarlılığı olduğunu unutmamalısınız. Yani <a> elemanına ait selektörün ismi “A” olamaz.

Sınıf Selektörleri

Sınıf selektörleri, XHTML MP elemanlarının “class” özelliğine verilen değerle ulaşılan selektörlerdir. Elemanın ismini direkmen almazlar, isimlendirmeyi istediğiniz gibi yapabilirsiniz. Örneği inceleyin;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type=”text/css”>

p {color:blue}.yesil {color:Green}

</style>

<title>Rengarenk bir dünya</title> </head> <body>

<p>Ben maviyim!

</p> <p class="yesil">

Bense yesil! </p> <h4 class="yesil">Ben de yesilim!</h4>

</body></html>

Sınıf selektörlerini tanımlarken önüne “.” karakteri konur, sonra da isimlendirmeyi yaparız. Daha sonra bu stile XHTML MP elemanlarından ulaşmak için elemanların “class” özelliğine sınıf selektörünün ismini veririz (“.” karakterini katmadan) . Böylelikle örneğimizde olduğu gibi aynı sınıftan farklı elemanlar tanımlayabiliriz. Aşağıda ekran görüntüsünü inceleyebilirsiniz:

Şekil 4-2

Sınıf selektörlerini tanımlarken sadece belli bir XHTML MP elemanına özgü bir tanımlama da yapabilirsiniz. Bunun için aşağıdaki gibi “.” karakterinden önce elemanın ismini yazmalısınız;

p.mavi {color:blue}

Bu sayede bu sınıf sadece <p> elemanına uygulanabilir olacaktır, diğer elemanların “class” özelliklerine bu sınıfın ismini verseniz de WCSS stili uygulanmayacaktır.

<p class="mavi">Ben maviyim !!!

</p>

ID Selektörleri

ID selektörleri XHTML MP elemanların ait “id” özelliğiyle ilişkilendirilmek için kullanılırlar. XHTML MP’de aynı “id” değerinde birden fazla eleman olmamalıdır. Bu sayede sadece bir elemana ait bir stil tanımlaması yapılabilir. Örneğimizi inceleyin;

<?xml version="1.0" encoding="ISO8859_9"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type=”text/css”>

p {color:blue}#p2 {color:Green}

</style> <title>Rengarenk bir dünya</title> </head> <body>

<p id=”p1”>Ben maviyim!

</p> <p id="p2">

Bense yesil! </p>

</body></html>

Örneğimizde iki <p> elemanı var, birinin “id”si “p1”, diğerinin “p2”. id’si “p2” olan eleman için bir WCSS stili tanımlanmış olduğundan bu eleman ekranda yeşil görünecektir . “id” selektörü tanımlarken elemanın “id” isminden önce “#” karakteri geldiğine dikkat edin. Aşağıda ekran çıktısını görebilirsiniz;

Şekil 4-3

Genel Selektörler

Bir XHTML MP sayfasındaki bütün elemanlara ulaşmak ve onlara stil vermek isterseniz genel selektörlerden faydalanırsınız. Örneği inceleyin;


* { font-style: italic; }

</style> <title>Mavi bir dünya</title> </head> <body>

<p> Metin 1</p><h4> Metin 2</h4><a href="www.italikdunya.com"> Metin 3</a>

</body></html>

Genel bir selektör “*” karakteriyle tanımlanır. Tanımladığınız stil, sayfadaki tüm elemanlar için geçerli olacaktır. Aşağıda ekran görüntüsünü görebilirsiniz;

Şekil 4-4

<div> ve <span> elemanları

XHTML MP’de bulunan <div> ve <span> elemanları sayesinde WCSS stillerini XHTML MP sayfasının belli bir bölgesine uygulayabilirsiniz. Mesela belli bir bölgedeki <p> elemanlarının rengi mavi olsun isteyebilirsiniz veya bir metinde bulunan bir sözcüğü renklendirmek isteyebilirsiniz. Bu gibi durumlarda <div> ve <span> elemanları oldukça kullanışlı olabilir.

1. <div> elemanı:

<div> elemanı belli WCSS stillerini sayfadaki belli bölgelere uygulamak istediğinizde oldukça kullanışlı olur. Elemanları <div> elemanının içine yerleştirir ve <div> elemanına stil verirseniz bu stil <div> elemanındaki bütün elemanlar için geçerli olacaktır. Örneğimizi inceleyin;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

<head> <style type=”text/css”>

div.italik { font-style: italic; } </style> <title>”div” elemani</title> </head> <body>

<div class=”italik”> <p>

Metin 1 </p> <h4>

Metin 2 </h4></div>

<h4> Metin 3</h4>

</body></html>

Dikkat ederseniz <div> elemanı içindeki <p> ve <h4> elemanına stil vermemişiz. Bakalım ekran görüntüsü nasıl olacak;

Şekil 4-5

Gördüğünüz gibi <div> elemanı içindeki elemanlar stilden etkilenmiş, fakat dışarıdaki <h4> elemanı hala aynı yazı biçiminde.

2. <span> elemanı:

<span> elemanı bir metindeki belli bir bölümü stillendirmek istediğinizde kullanışlı olacaktır. Örneğimizi inceleyin;


} </style> <title>”div” elemani</title> </head> <body>

<p> <span class="ozel" style=” font-style: normal;”>"Galiba onu

seviyorum"</span> diye düsündü Edvardo...

</p> </body></html>

Örnekte <span> elemanı için “ozel” isminde bir sınıf tanımlanarak eleman stillendirilmiştir. Bu stile göre karakterlerin italik ve yeşil renkli görülmesi gerekir. Bakalım öyle mi;

Şekil 4-7

Öyle değil, çünkü <span> elemanı içinde “style” özelliği yardımıyla tanımlanan stil sayesinde karakterler normal yazılmış, italik yazım ortadan kalkmıştır. Fakat burada dikkat etmeniz gereken bir nokta var; <style> elemanında tanımlanan stil sınıf selektöründe tanımlı stillerden sadece “font-style” stilini geçersiz kılmıştır (bu stilleri yakında öğreneceğiz), diğer stil olan “color” stili halen geçerlidir ve metin yeşil renkli görünecektir.

STİL ÖZELLİK VE DEĞERLERİ

Artık şu stillere verdiğimiz özellikleri, değerleri de öğrenmenin zamanı geldi, böylece örneklerimizde kullandığımız “color: blue” veya “font-style: italic” gibi ifadelerin ne anlama geldiğini anlayabileceğiz.Burada iki şeye dikkatinizi çekmek istiyorum. Birincisi, burada anlatacağım özelliklerin her cihazda desteklenmiyor olabileceğini aklınızdan çıkarmayın. İkincisi WCSS’de bir çok özellik ve bu özelliklere verilebilecek bir çok değer vardır. Hatta sadece bu konuları anlatarak bir kitap yazılabilir. Bu nedenle size burada elimden geldiğince önemli kısımları anlatacağım. Lütfen buradaki özellikleri ve değerleri ezberlemeye çalışmayın, sadece “Aaa, demek WCSS ile bu da yapılabiliyormuş...” diye düşünmenizi istiyorum. Önemli gördüğünüz kısımları bir kenara not alabilirsiniz. Belli bir süre kullanınca ister istemez ezberleyeceksiniz zaten. Hatta “Topstyle” gibi bazı özel editör programları kullanırsanız işiniz çok kolaylaşacaktır. Ayrıca ezberci bir eğitim sistemine de oldum olası karşı olmuşumdur

Genel Birimler

WCSS ‘de birçok özellik aynı değerleri alır. Örneğin karakter renkleri, arka plan renkleri, kenarlık genişlikleri , çerçeve genişlikleri gibi… Bu nedenle öncelikle bu genel birimleri öğrenmeliyiz;

• Uzunluk Ölçüleri: Genişlikler ve yüksekliklere değer verirken WCSS’deki uzunluk ölçülerinden faydalanırız. Bunlar tabloda verilmiştir;

Mutlak Birimler pt cm mm in

Göreceli Birimler px em

%

nokta (1 pt=1/72 inç) santimetre milimetre inç (1 inç=2.54 cm)

piksel kullanılan fonttaki “m” harfinin genişliği kadar yüzde birimi

p {margin : 15%} table {border-width: 2px}

• Renk Değerleri : Arka plan renkleri, metin renkleri gibi değerleri belirlerken renk değerlerinden faydalanırınız. Bu değerler ve nasıl kullanılacakları aşağıda listelenmiştir:

o rgb() fonksiyonuyla: Bu yöntemde kırmızı (r), yeşil (g) ve mavi(b) tonlarını yüzde olarak veya 0-255 aralığında bir sayı vererek istediğiniz rengi tanımlayabilirsiniz.

p{ color: rgb(100%,100%,100%)} beyaz rengi verirp{ background-color: rgb(0,0,255)} mavi rengi verir

o Heksadesimal kodla: Bu yöntemde renklerin heksadesimal kod değerleri yazılarak istediğiniz rengi tanımlayabilirsiniz. Bu değeri yazarken önüne “#” karakteri koymalısınız.

p{ border-color: #ff0000)} kırmızı rengi verir

o Renk ismiyle : Bu yöntemi kullanarak daha önceden tanımlı 16 rengin ingilizce isimleri de “color” özelliğine değer olarak atanabilir. Aşağıda bu isimler ve türkçe karşılıkları verilmiştir:

Aqua - Açık MaviBlack - SiyahBlue - MaviFuchsia - PembeGray - GriGreen -YeşilLime - Fosforlu YeşilMaroon - Bordo

Navy - LacivertOlive - HakiPurple - MorRed - KırmızıSilver - GümüşTeal - Petrol YeşiliWhite - BeyazYellow - Sarı

p{ color: silver)} gümüş rengi verir

Renklerle Çalışmak

WCSS sayesinde birçok elemanın renklerinde değişiklikler yapabileceğimizi zaten biliyoruz. Şimdi birçok elemanda ortak olarak bulunan bazı renk özelliklerini öğreneceğiz. Önce özellikleri ve ne anlama geldiklerini bir tabloda inceleyelim;

color Renkbackground-color Arka plan rengiborder-color Kenarlık rengi

6. “color” özelliği : “color” özelliği elemanlara renk vermek için kullanılır. Şu ana kadar örneklerimizin çoğunda bu özelliği gördük . Birçok XHTML MP elemanına bu özellikle renk verebiliriz.

p{ color: rgb(0,0,255) } 7. “background-color” özelliği : “background-color” özelliği ile bazı XHTML MP

elemanlarının arka plan renklerini değiştirebiliriz.

p{ background-color: #ccffcc }

• “border-color” özelliği : “border-color” özelliği bazı XHTML MP elemanlarına eklenen kenarlıkların rengini tanımlamak için kullanılır. Kenarlıkları daha sonra ayrıca öğreneceğiz.

p{ border-color: rgb(100%,10%,50%)}



span.ozel {

color: rgb(0,0,255);border-style: solid;

border-color: rgb(100%,10%,50%); background-color: #ccffcc; }

</style> <title>Sevgi çemberi</title> </head> <body>

<p> <span class="ozel"> “Seni seviyorum”</span> diye seslendi Edvardo... </p>

</body></html>

Ve ekran çıktısı aşağıdaki gibi olacaktır;

Şekil 4-8

Karakter ve Metinlerle Çalışmak

WCSS bize karakter ve metinlerle çalışmak için oldukça geniş imkanlar sunar. Aslında XHTML MP’de de <b>, <i> gibi elemanlar yardımıyla metinlerin görünümünü değiştirebiliyorduk, fakat daha önce dediğimiz gibi, bu, WCSS’in ruhuna aykırıdır, çünkü içerik ve sunumu birbirine karıştıran bir yöntemdir. Bu nedenle görsel olaylar tasarlarken WCSS’i tercih etmelisiniz.Şimdi WCSS’de karakter ve metinlerle ilgili ne gibi özellikler tanımlandığını bir tabloda görelim;

font-family Yazı tipifont-size Yazı büyüklüğüfont-style Yazı stilifont-weight Yazı kalınlığıtext-align Yazı hizalamasıtext-decoration Yazıyı altı çizili-çizgisiz göstermetext-transform Yazıyı büyük-küçük harf yapmafloat Yazı konumlama

1. “font-family” özelliği : “font-family” özelliğiyle yazı tipini ayarlayabilirsiniz. Eğer yazı tipi birden fazla kelimeden oluşuyorsa tırnak içinde yazmalısınız.

p { font-family : Arial}h2 { font-family : “Times New Roman”}

Araya “,” karakteri koyarak değişik yazı tipleri tanımlayabilirsiniz. Bu durumda tarayıcı önce ilk yazı tipini, onu desteklemiyorsa ikincisini, onu desteklemiyorsa diğerini diye ayarlama yapar. Verdiğiniz değerdeki yazı tiplerinden hiçbirini desteklemiyorsa kendisi bir atama yapar.

p { Verdana, Geneva, Arial, Helvetica, sans-serif }

2. “font-size” özelliği : “font-size” özelliğiyle karakter boyutlarını ayarlayabilirsiniz.

p { font-size : 12px }p { font-size : 10% }

3. “font-style” özelliği : “font-style” özelliği ile karakterleri ve metinleri italik yazı biçiminde gösterebilirsiniz. Bu özellik “normal”, “italic” veya “oblique” değerlerinden birini alır. En popüler değeri metinleri italik yazı stilinde gösteren “italic” değeridir. XHTML MP elemanlarından <i> ile aynı etkiye sahiptir.

p { font-style : italic }

4. “font-weight” özelliği : “font-weight” özelliği ile karakterleri ve metinleri daha koyu gösterebilirsiniz. “lighter”, “bolder”, “normal” vs… gibi değerler alabilmesine karşın en popüler değeri metinleri koyu gösteren “bold” değeridir. XHTML MP elemanlarından <b> ile aynı etkiye sahiptir.

p { font-weight : bold }

5. “text-align” özelliği : “text-align” özelliği ile metnin sola, sağa veya ortaya hizalanması sağlanır. Metni “left” değeri ile sola, “center” değeri ile ortaya, “right” değeri ile sağa dayalı olarak gösterir.

p { text-align: right }

6. “text-decoration” özelliği : “text-decoration” özelliği ile metni altı çizili bir şekilde gösterebilirsiniz. “none” değeri alırsa metnin altında çizgi görüntülenmez, “underline” değeri alırsa metni altı çizgili olarak gösterir.

p { text-decoration: underline }

7. “text-transform” özelliği : “text-transform” özelliği ile metnin bütün harflerini büyük, ya da küçük gösterebilirsiniz. “capitalize” değeri alırsa metindeki sözcüklerin ilk harflerini büyük gösterir. “uppercase” değeri alırsa metindeki harfleri büyük harfli, “lowercase” değerini alırsa küçük harfli gösterir.

p { text-transform: uppercase }

8. “float” özelliği : “float” özelliği ile metni bir resmin veya tablo gibi bir XHTML MP elemanının sol veya sağ tarafına konumlandırabilirsiniz. Böylece yazı resmin etrafından akıp gidecektir. “left” değeri verirseniz resmi sola, “right” değeri verirseniz resmi sağa yerleştirecek ve metni resmin etrafına yazacaktır.

img { float: right }



span.ozel {

font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: italic; font-weight: bold; text-decoration: underline; text-transform: uppercase; }

img { float: left } </style> <title>Dr.Dogukan</title> </head> <body>

<p> <img src="doktor.gif" alt="doktor" /> Dr.Dogukan iyice sinirlenmisti.<span class="ozel">"maydanoz yeme!"</span>

diye üstüne basa basa tembih etmesine ragmen adam sözünü dinlememis ve dört tutam maydanoz yemisti... </p> </body></html>

Ve ekran görüntüsü aşağıdaki gibidir;

Şekil 4-9

Dikkat ettiyseniz “maydanoz yeme!” yazısı normalde küçük harflerle yazılmış, fakat verdiğimiz stil sayesinde onu büyük harflerle göstermişiz.

Listelerle Çalışmak

WCSS sayesinde XHTML MP’deki <ul> ve <ol> elemanlarını kullanarak oluşturduğumuz liste görünümleri üzerinde daha fazla kontrolümüz olur.

list-style-type Liste şeklilist-style-image

Liste resmi

1. “list-style-type” özelliği : “list-style-type” özelliği sayesinde listelemek için kullanılan şekilleri değiştirebilirsiniz. <ul> ile hazırlanmış listelerde “disc”, “square”, “circle” değerlerinden birini alırken, <ol> ile hazırlanmış listelerde “decimal”, “upper-alpha”, “lower-alpha”, “upper-roman” veya “lower-roman” değerlerinden birini alabilir.

ul { list-style-type: square }ol { list-style-type: lower-roman }

2. “list-style-image” özelliği : “list-style-image” özelliği sayesinde listelemek için kullanılan şekillerin yerine bir resim ekleyebilirsiniz. Resmi eklemek için “url()” fonksiyonundan yararlanılır. Bu fonksiyon ile resmin göreceli veya tam adresi belirtilerek tanımlama yapılabilir.

ul { list-style-image: url(resimler/ok.gif) }

Şimdi <ul> listeleri için bir örnek yapalım;


ul { list-style-type: circle; } li.kare { list-style-type: square; } </style>

<title>Edvardo ve maceralari</title> </head> <body>

<p> Edvardo çabuk karar vermeliydi! <ul>

<li>Otele gidecek miydi?</li> <li class="kare">Yoksa gitmeyecek miydi?</li>

</ul> </p> </body></html>

Şekil 4-10

Gördüğünüz gibi aynı listedeki iki elemanın şeklini bile farklı yapabiliyoruz. Şimdi de <ol> listeleri için bir örnek yapalım;


ol { list-style-type: lower-roman; } li.resimli { list-style-image: url(resimler/ok.gif); } </style>

<title>Edvardo ve maceralari</title> </head> <body>

<p> Eger otele giderse… <ol>

<li>yemek yiyebilirdi</li> <li>dayak yiyebilirdi</li> <li class="resimli">hiçbir sey yemeyebilirdi...</li>

</ol> </p> </body></html>

Şekil 4-11

Aslında yukarıdaki iki örnek de biraz tuhaf oldu, normalde bir listedeki bütün şıklarda aynı işaretin bulunması daha mantıklı olur. Fakat ben sadece bir-iki örnekle olabildiğince çok liste şekli göstermeye çalıştım. Siz kendi listeleriniz için en beğendiğiniz şekli kullanabilirsiniz.

Kenarlıklarla Çalışma

Hatırlarsanız XHTML MP konusunda <table> elemanını işlerken bir örnekte bazı WCSS kodlarını kafanız karışmasın diye çıkardığımdan bahsetmiştim. İşte bizim o örneğimizde aslında tablonun hücrelerini daha iyi farkedebilmeniz için kenarlık kullanmıştım. Hatırlamadınız mı? Neyse, boşverin… Zaten birazdan öğreneceğiz…Kenarlıklar sayesinde tablodaki hücreleri daha iyi gösterebilir, veya bir yazıyı çerçeve içine alabilirsiniz. WCSS ile kenarlıkların genişliğini, rengini ve şeklini belirleyebilirsiniz.

border-style Kenarlık şekliborder-color Kenarlık rengiborder-width

Kenarlık genişliği

border Kenarlık

Aslında WCSS biraz ileri giderek bir çerçevedeki her bir kenara hükmetmenize olanak verir. Yani siz çerçevemin üst kenarı yeşil, alt kenarı mavi olsun diyebilirsiniz. Yukarıdaki özelliklerde “border” kelimesi ile “style” , “color” veya “width” kelimesi arasına aşağıdaki kelimelerden birini ekleyerek tek tek bütün kenarları kontrol edebilirsiniz.

• left : Sol kenarı temsil eder. (border-left-color veya border-left-style gibi…)• right : Sağ kenarı temsil eder. (border-right-width veya border-right-color gibi…)• top : Üst kenarı temsil eder. (border-top-color veya border-top-width gibi…)• bottom : Alt kenarı temsil eder. (border-bottom-color veya border-bottom-style gibi…)

Şimdi özellikleri öğrenelim, fakat ben sadece bütün kenarlıkları aynı anda kontrol eden özellikleri yazacağım, eğer siz tek bir kenara ulaşmak isterseniz yukarıdakiler gibi yazımı tercih etmelisiniz.

4. “border-style” özelliği : “border-style” özelliği ile kenalığın şeklini belirleyebilirsiniz. CSS’de birkaç farklı kenarlık çeşidi desteklenmesine karşın, WCSS’de sadece “solid” değerini kullanmanızı tavsiye ederim, çünkü birçok WAP tarayıcısı tarafından sadece bu tip desteklenir. Verebileceğiniz diğer bir değer de “none” dır, fakat bu değeri verirseniz ekranda

kenarlık görmek istemediğiniz anlamına gelir.

p { border-style: solid}

5. “border-color” özelliği : “border-color” özelliği ile kenarlığın rengini belirleyebilirsiniz. Bu özelliğe daha önce öğrendiğimiz renk değerlerini verebiliriz.

p { border-color: gray}p { border-color: #ff0f00}

6. “border-width” özelliği : “border-width” özelliği ile kenarlığın genişliğini belirleyebilirsiniz. Bu özelliğe daha önce öğrendiğimiz uzunluk değerlerini verebiliriz.

p { border-width: 3px}p { border-width: %10 }

7. “border” özelliği : Aslında WCSS’de yukarıdaki özellikleri tek tek belirtmenize gerek yoktur, “border” özelliği sayesinde bütün bu özellikleri tek bir ifadede belirtebiliriz. Herhangi bir sıralama koşulu yoktur, fakat size “genişlik-şekil-renk” sıralamasını tavsiye ederim.

p { border: 1px solid blue}



span.ozel {

border-color: black;border-right-color : #99cc99;

border-style: solid; border-width: 3px;}span.tek{ border: 1px solid green ; }

</style> <title>Çerçeveler alemi</title> </head> <body>

<p> <span class="ozel">Benim çerçevem var!</span><br /><br />

<span class="tek">Benim de var!</span> </p> </body></html>

Ekran görüntüsü aşağıdaki gibidir;

Şekil 4-12

Ekran görüntüsünden verdiğimiz stilin görünümü nasıl etkilediğini görebiliyorsunuz…Şimdi de tablolardaki kenarlıklarla ilgili bir örnek yapalım;


table{ border: 2px solid red ; } td {

text-align: center; border: 1px solid red ; }

td.yenen{ background-color : #66ccff; }

</style> <title>Oyun</title> </head> <body>

<p> <table>

<tr> <td>o</td> <td>x</td> <td class="yenen">x</td> </tr> <tr> <td>x</td> <td class="yenen">x</td> <td>o</td> </tr> <tr> <td class="yenen">x</td> <td>o</td> <td>o</td> </tr>

</table><br /> Ben yendim :)

</p> </body></html>

Her örneğimiz gibi bu da çok basit, önce tablomuzun sonra bütün hücrelerin etrafına bir çerçeve çizmişiz, sonra da özel bir sınıf belirleyerek yenen tarafın hücrelerinin arka planlarını değiştirmişiz. Ekran görüntüsü aşağıdaki gibidir;

Şekil 4-13

WCSS’E ÖZEL EKLENTİLER

WCSS taşınabilir cihazlar için tasarlananan bir stil verme dili olduğu için , CSS’den türemesine rağmen kendine ait birkaç eklentiye sahiptir. Bu eklentiler CSS’de bulunmaz, fakat cep telefonları gibi taşınabilir cihazlar için oldukça faydalı olabilirler. Şimdi bu özel eklentileri inceleyelim;

BU KONU NOKİA DA DESTEKLENMİYOR GALİBA!Erişim Tuşları

WCSS’deki “-wap-accesskey” özelliği sayesinde XHTML MP elemanlarına ulaşmak için özel tuşlar tanımlayabilirsiniz. Kullanım şekli aşağıdaki gibidir;

Yazı Formatlama

Hatırlarsanız WML’de <input /> elemanının “format” ve “emptyok” özellikleri vardı ve bu özelliklerle girdi alanına girilen yazının formatını belirtebiliyor veya o alanın boş geçilip geçilemeyeceğini tanımlayabiliyorduk.XHTML MP’de <input /> elemanının böyle bir özelliği bulunmamaktadır, fakat WCSS ile de girdi alanlarında aynı etkiyi sağlayabiliriz. Yazıları formatlamak için “-wap-input-format” özelliğinden, girdi alanının boş geçilip geçilemeyeceğini belirtmek için “-wap-input-required” özelliğinden faydalanırız. Şimdi bu iki özelliği inceleyelim;

-wap-input-format Girdi formatı-wap-input-required Girdi alanının boş geçilip

geçilemeyeceği

• -wap-input-format :

“ -wap-input-format ” özelliği ile girdi alanlarına girilen yazının sizin kriterlerinize uymasını sağlayabilirsiniz. WML’deki <input /> elemanında bulunan “format” özelliği ile etkisi aynıdır. Aşağıda bu özelliğe verebileceğiniz değerlerin listesi verilmiştir;

a Küçük harf veya sembolik karakterA Büyük harf veya sembolik karaktern Sayısal veya sembolik karakterN Sayısal karakterx Küçük harf, sayısal veya sembolik karakterX Büyük harf, sayısal veya sembolik karakterm Herhangi bir karakter (WAP tarayıcı küçük harf

modundadır, fakat kullanıcı bunu değiştirebilir)M Herhangi bir karakter (WAP tarayıcı büyük harf

modundadır, fakat kullanıcı bunu değiştirebilir)

Mesela ziyaretçiye yaşını sordunuz, size “kırk iki” gibi yazıyla cevap vermesini istemiyorsanız aşağıdaki gibi bir formatlama yapmalısınız;

<input type="text" style=’ -wap-input-format: “NN” ’ />

Ben burada daha rahat gösterebilmek için stili elemanın içinde ekledim, fakat siz <style> elemanının içinde tanımlamayı veya dışarıdan ekleme metodunu tercih ederseniz daha akıllıca olacaktır.Örnekteki alana ziyaretçi sadece sayısal karakter girebilecektir. Ziyaretçinin sadece iki sayısal karakter girmesine izin verdiğimiz için yaşı 10’dan küçük ve 99’dan büyük ziyaretçileriniz bu duruma itiraz edebilirler .Örnekte dikkatinizi bir şey daha çekmiş olmalı; özelliğe değeri verirken değer çift tırnak içine alınmıştır. Bunun nedeni bazı WAP tarayıcılarının sadece bu şekil bir yazımı desteklemesidir, yani “-wap-input-format“ özelliğine verdiğiniz değeri daima çift tırnak içine almalısınız. Bu nedenle “style” özelliğinin değerini normaldeki yazım şeklimizden farklı olarak tek tırnak içinde belirtmek zorunda kaldık. Fakat az önce dediğimiz gibi, eğer siz stil özelliğini elemanın içinde değil de dışarıdan belirtirseniz bu hem daha akıllıca olacak, hem de tek tırnak-çift tırnak olayıyla boğuşmaktan kurtulmuş olacaksınız.Aslına bakarsanız bazı eski tarayıcılar “-wap-input-format” özelliğini desteklemezler, bu durumda <input /> elemanını tanımlarken onun format özelliğini de belirtebilirsiniz, böylece eski tarayıcılarla da probleminiz kalmaz. Aşağıdaki gibi bir yazım en garanti yol olacaktır;…<style> … input.yas {-wap-input-format : “NN”}</style>… <input type=”text” class =”yas” format=”NN”/>…

Bu yazımda eski tarayıcılar <input /> elemanında belirttiğiniz “format” özelliğini, daha yenileri ise WCSS ile belirttiğiniz özelliği dikkate alacaktır.

Şimdi birkaç örnek daha yapalım, mesela girdi alanımıza sadece sayıların girilmesini istersek aşağıdaki yazımı yapmalıyız;

<input type=”text” style=’ -wap-input-format: “*N” ’ />

“*” karakteri önüne geldiği format elemanından sonsuz sayıda yazılmasına izin verir. Bu karakteri kullanarak değişik formatlar elde edebilirsiniz, örneğin aşağıdaki örnekte kullanıcı ilk harfi büyük, diğerlerini küçük girmek zorunda kalacaktır.

<input type="text" style=’ -wap-input-format: “A*a” ’ />

Aşağıdaki örnekte kullanıcıdan belli bir formata göre (16-09-2005 gibi) tarih girmesini istiyoruz;

<input type="text" style=’ -wap-input-format: “NN\\-NN\\-NNNN” ’ />

Burada “NN-NN-NNNN” gibi bir ifade yazmadığımıza dikkat edin. Özel karakterleri format alanına eklemek isterseniz “ \\ ” karakterlerinden sonra yazmalısınız (Bazı tarayıcılarda “\” karakteri geçerlidir). Bu karakterlere “kaçış karakterleri” denir. Mesela kullanıcının saati “13:25” gibi bir formatta girmesini istiyorsanız aşağıdaki yazımı kullanmalısınız:

<input type="text" style=’ -wap-input-format: “NN\\:NN” ’ />

• -wap-input-required :

“-wap-input-required” özelliği ile girdi alanınızın boş geçilip geçilemeyeceğini belirtirsiniz. WML’deki <input /> elemanının “emptyok” özelliği ile aynı etkiye sahiptir. “true” ve “false” olmak üzere iki değer alır. “true” değeri alırsa girdi alanı boş geçilemez, “false” değeri alırsa geçilebilir. Bu değerleri tırnak içinde yazmak zorunda değilsiniz.

<input type=”text” style=“ -wap-input-required: true ” />

Yukarıdaki alan boş geçilemeyecektir. Bazen “-wap-input-required” özelliği ile “-wap-input-format” özelliği zıt anlamlar ifade edebilir. Mesela;

<input type=”text” style=’-wap-input-format: “a”; -wap-input-required: false ‘ />

gibi bir ifadede girdi alanına hem bir harf girilmesini şart koşuyoruz, hem de bu alanın boş geçilebileceğini belirtiyoruz. Bu gibi bir durumda “-wap-input-required” özelliği baskın gelecek ve girdi alanımız boş geçilebilecektir.

Kayma Efekti

WCSS’deki oldukça faydalı özelliklerden birisi de yazı, resim, bağlantı gibi elemanların ekrandan kayarak geçmesine izin vermesidir. Böylece oldukça güzel bir animasyonla ziyaretçileri etkileyebilir, veya ekrana sığmayan resimleri kaydırarak gösterebilirsiniz. Fakat bazı WAP tarayıcıları tarafından sadece yazıların kaymasına izin verilir, bu nedenle bu özelliği resimler veya bağlantılar için kullanırken bu durumu da göz önüne almalısınız.Kayma efekti için beş özellikten faydalanılır. Bu özelliklere verilen değerlerle kaymanın ne yöne yapılacağı, hızı , şekli gibi efektler belirlenebilir. Şimdi bunları öğrenelim;

display Görüntü

-wap-marquee-dir Efekt yönü-wap-marquee-loop Efekt tekrarı-wap-marquee-speed Efekt hızı-wap-marquee-style Efekt şekli

• display :

“display” özelliği, kaydırma efektin başlatmak için kullanılır. Bu özelliğe verilen “-wap-marquee” değeri ile kaydırma efekti başlar. Örnekte nasıl kullanılması gerektiğini görebilirsiniz;

<?xml version="1.0" encoding="ISO8859_9"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type=”text/css”> p.kay { display: -wap-marquee; }

</style> <title>Bilmeceler alemi</title> </head> <body>

<p class=”kay”> Bilmece bildirmece,el üstünde kaydirmaca... </p> </body></html>


Şekil 4-14

• -wap-marquee-dir :

“-wap-marquee-dir” özelliği, kayma efektinin yönünü belirler. Bu özelliğe vereceğiniz “ltr” değeriyle objeler soldan sağa, “rtl” değeriyle sağdan sola kayar. Bu özelliği tanımlamadığınız takdirde varsayılan değer sağdan-sola şeklindedir. Aşağıda örnek kullanımı gösterilmiştir;

- “slide” değerinde obje önce ekranda görünmez, eğer yazı ekran genişliğinden küçükse obje ekranın diğer kenarına çarptığında animasyon biter, eğer obje ekran genişliğinden büyükse objenin son bloğu (örneğin bir metnin son kelimeleri) ekranda göründüğünde animasyon biter. “-wap-marquee-loop” özelliği 1’den büyükse aynı animasyon tekrarlanır.

- “alternate” değerinde obje ekranda gözüküyordur, eğer yazı ekran genişliğinden küçükse obje ekranın diğer kenarına çarptığında animasyon biter, eğer obje ekran genişliğinden büyükse objenin son bloğu (örneğin bir metnin son kelimeleri) ekranda göründüğünde animasyon biter. “-wap-marquee-loop” özelliği 1’den büyükse aynı animasyon ters yönde tekrarlanır.

Bu özellikleri kullanarak güzel bir animasyon örneği yapmak isterdim, fakat kitaptaki ekran görüntüleriyle bu özellikleri tam anlayamayacağınızdan eminim. Bu nedenle size bu özelliklere farklı değerler vererek denemeler yapmanızı ve kendi animasyonlarınızı yaratmanızı tavsiye ederim.

FARKLI TARAYICILARLA ÇALIŞMA

Daha önce de söylediğimiz gibi, WCSS’in en büyük avantajı içerik ve sunumu birbirinden ayırıyor olmasıdır. Her ne kadar şu ana kadarki örneklerimizde örneğin daha iyi anlaşılması için WCSS içeriğini ayrı dosyalarda saklamadıysak da, aslında yapılması gereken bu yöntemdir, böylece sunumla ilgili içerik bir merkezden idare edilebilecektir. Sunumun bir merkezden idare edilmesi bize birçok önemli avantaj sunar. En basitinden düşünürsek, görüntüyle ilgili bir olayı nerden değiştireceğimizi rahatlıkla biliriz. Biraz daha derine inersek, bütün bir sitenin görünümünü birkaç kodla değiştirebiliriz. Ve daha da derine inersek, her tarayıcı için farklı bir sunum hazırlayarak sitemizin her ekranda mükemmelen görüntülenmesini sağlayabiliriz. Peki bir tarayıcıyı diğerinden nasıl ayırt ederiz? O an sitemizin hangi tarayıcı tarafından görüntülendiğini nasıl anlayabiliriz ? Bunu bir sonraki konumuzda öğreneceğiz…

Tarayıcıyı Bulma

Tarayıcının cinsini belirlemek için HTTP başlıklarından yararlanılır ( HTTP hakkında daha fazla bilgiyi bu konuyla ilgili bir kitapta bulabilirsiniz ). Hatırlarsanız daha önce de http başlıklarından faydalanarak işlemler gerçekleştirmiştik. Şimdi yapacağımız şey de farklı değil, sadece bu başlıklarda bazı sihirli kelimeleri arayacağız. HTTP başlıklarından “profile” veya “user-agent” başlığının içinde aradığımız bilgiyi bulabiliriz. Bu başlıklarda “Nokia” kelimesini bulursak, bu, ziyaretçinin “Nokia” markalı bir cihazla sayfamıza ulaşmak istediği anlamına gelir. “SonyEricsson” kelimesini bulursak, “Sony Ericsson” markalı bir telefonla sayfamız görüntülenmek isteniyordur. “Mozilla” kelimesini bulursak, sayfamız büyük olasılıkla masaüstü tarayıcılardan biri tarafından görüntülenmek isteniyordur. Fakat bu kadar geniş bir tarayıcı kitlesine hitap etmek istiyorsanız daha önce XHTML MP konusunda öğrendiğimiz tarayıcının “Mime” tipini tespit etme işini de ihmal etmemelisiniz. Öncelikle aşağıdaki satırları sunucunuzun kök dizininde “nokia.css” ismiyle kaydediniz;

h4 { font-style:italic; font-size : 18px;}Şimdi aynı yere aşağıdaki dosyayı “firefox.css” ismiyle kaydedin;

h4 {

text-align: center; text-decoration:underline;}Ve son olarak aşağıdaki dosyayı aynı dizine “iexplorer.css” ismiyle kaydedin;

h4 { background-color: gray; color: white;}

Şimdi sıra asıl ayrım noktasında, burada HTTP başlıklarını incelemeliyiz. Bunun için PHP, ASP, JSP, PERL gibi sunucu taraflı programlama dillerinden istediğinizi kullanabilirsiniz. Ben burada PHP dilini tercih ediyorum, aşağıdaki dosyayı sunucunun kök dizinine istediğiniz bir isimle kaydedin;

<?php if (stristr($_SERVER["HTTP_ACCEPT"], "application/vnd.wap.xhtml+xml")) { header("Content-Type: application/vnd.wap.xhtml+xml"); } else if (stristr($_SERVER["HTTP_ACCEPT"], "application/xhtml+xml")) { header("Content-Type: application/xhtml+xml"); } else { header("Content-Type: text/html"); }echo("<?xml version=\"1.0\" encoding=\"ISO8859_9\"?>");?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <?php if (stristr($_SERVER["HTTP_USER_AGENT"], "Nokia")) { $dosya="nokia.css"; } else if (stristr($_SERVER["HTTP_USER_AGENT"], "Firefox")) { $dosya="firefox.css"; } else if (stristr($_SERVER["HTTP_USER_AGENT"], "Mozilla")) { $dosya="iexplorer.css"; }

echo "<link href=\"".$dosya."\" rel=\"stylesheet\" type=\"text/css\" />"; ?> <title>Yer Tespiti</title> </head> <body> <p> <h4>Nerdeyim ben?! Ne oluyor burada?!</h4> </p>

</body></html>

İlk baştaki satırları daha önce de XHTML MP konusunda kullanmıştık ve hatırlarsanız amacı Mime tipini tanımlamaktı. Bizim için asıl önemli olan satırlar koyu renkli olanlar, ve burada sunucudan gelen bilgiler içinde http başlıklarından “user-agent”i inceliyoruz. PHP fonksiyonlarından “$_SERVER[“HTTP_USER_AGENT”]” bize bu konuda yardımcı oluyor ve “user-agent” bilgisini getiriyor. Biz de yine PHP fonksiyonlarından “stristr()” fonksiyonunu kullanarak “user-agent” bilgisi içinde “Nokia” kelimesini, sonra “Firefox” kelimesini en sonda da “Mozilla” kelimesini arıyoruz. En sonuncu durumda tarayıcının “İnternet Explorer” olduğunu farzediyoruz. Burada sorgulama sırasını önce WAP tarayıcıları ve alta doğru masaüstü tarayıcıları şeklinde ayarlamanız akıllıca olur. Hatta “Mozilla” kelimesini aratacaksanız onu sıralamanın en altında yapmalısınız, çünkü bazı WAP tarayıcılarda da “Mozilla” değeri bulunmaktadır.Bizim örneğimiz tabii ki pek de detaylı bir sorgulama yapmıyor, daha ciddi bir site hazırlamak istiyorsanız “Sony Ericsson” ve “Openwave” gibi WAP tarayıcılarını ve “Opera” gibi masaüstü tarayıcılarını da göz önüne almalısınız. Fakat önemli olan mantığı anlamanız, sonra istediğiniz dili kullanarak istediğiniz kadar sorgulama yapabilirsiniz. Örneğimizde bundan sonrası gayet basit, tarayıcı cinsine göre bir dosya ismi tanımlıyoruz ve bunu <link /> elemanı içinde “href” özelliğine değer olarak atıyoruz. Ve de böylece her tarayıda <h4> elemanı için farklı bir stil tanımlanmış oluyor. Tabii ki bizim örneğimizdeki stil sayfaları da sadece <h4> elemanına stil verdiği için çok basit, siz ciddi işler için diğer elemanlara da stil vermelisiniz. Aşağıda ekran çıktılarını görebilirsiniz;

Şekil 4-15

Şekil 4-16

Şekil 4-17

Bence harika görünüyor, sizce?

wap - wml - xhtml mp

Documents