HACETTEPE ÜNĠVERSĠTESĠ BĠLGĠSAYAR MÜHENDĠSLĠĞĠ BÖLÜMÜ BĠL447 YAZILIM MÜHENDĠSLĠĞĠ LABORATUVARI MAKALE

Transkript

1 HACETTEPE ÜNĠVERSĠTESĠ BĠLGĠSAYAR MÜHENDĠSLĠĞĠ BÖLÜMÜ BĠL447 YAZILIM MÜHENDĠSLĠĞĠ LABORATUVARI MAKALE AraĢtırma Konusu : ZK Öğrenci No : Öğrencinin Adı : Serkan Öğrencinin Soyadı : Özal e-posta : serkanozal86@hotmail.com 1

2 1. Ġçindekiler 1. İÇİNDEKİLER YAZAR HAKKINDA ÖNSÖZ AJAX Ajax Nedir? Ajax Neden Gerekli ve Ne İşe Yarar? Ajax ın Mimarisi ZK YA GİRİŞ ZK Nedir? ZK Neden Gerekli Görüldü? ZK Ne İşe Yarar? ZK Gerçekten İlgili Sorunları Çözdü mü? Avantajları ZK NIN MİMARİSİ ZK nın Tasarımı ZK nın Çalışma Mantığı ZK YI DESTEKLEYENLER Destekleyen Web Tarayıcılar ve Sunucular Destekleyen Framework ler ve Teklonojiler Destekleyen Araçlar Destekleyen Programlama Dilleri ZK YI KULLANANLAR Kimler Kullanıyor? Neden Kullanıyorlar? Kullananlar ZK dan Memnun mu? ZK KODLAMA Pencere Form Üst Menü Yan Menü Hareketli Menü SONUÇ

3 11. TUTORIAL Örnek Uygulama a. Uygulama Ortamı b. Uygulamanın Tanımı c. Uygulamanın Gerçekleştirimi Örnek Uygulama a. Uygulama Ortamı b. Uygulamanın Tanımı c. Uygulamanın Gerçekleştirimi KAYNAKLAR

4 2. Yazar Hakkında 2.1. KiĢisel Bilgiler 15 Eylül 1986, Çankırı doğumluyum. İlköğretimi Kastamonu nun Ġnebolu ilçesinde, ortaöğretimi ise Kastamonu Mustafa Kaya Anadolu Lisesi nde yaptım yılında Hacettepe Bilgisayar Bilimleri Mühendisliği Bölümü nü kazandım. 1 yıl hazırlık eğitimi aldıktan sonra 2005 yılında bölümüme başladım. Şu an 4. sınıftayım Teknik Bilgiler Başlangıç Düzeyi : Orta Düzey : İyi Düzey : Programlama Dilleri Araçlar 2.3. ĠletiĢim C C++ Java Assembly ShellScript ADA PHP SQL HTML DHTML CSS JavaScript XML ZUML JSP ANTLR JSTL Struts 1/2 Hibernate ZK OpenJPA serkanozal86@hotmail.com 4

5 3. Önsöz Bu makale Ajax ın yeni bir framework ü olan ZK yı tanıtmak, incelemek, değerlendirmek, küçük örneklerle pekiştirmek ve çok kapsamlı olmayan küçük bir proje ile bilgileri bütünleştirmek amacıyla yazılmıştır. Bu makale yazılırken sürümü dikkate alınmıştır. ZK ; Tasarmının sağlam olması, Ajax gibi sağlam bir mimariyi temel alması, Java gibi güçlü, kolay ve etkin bir dil kullanması, Açık kaynak kodlu olması sayesinde kolay ve hızlı gelişen bir yapıdadır. Konunun daha rahat anlaşılması için konu bütünlüğü dikkate alınarak belirli konulara ayrılmış, konunun dağılmasını önlemek amacıyla her konu içinde fazlaca ayrıntıya girilmemiş, konu genel hatlarıyla anlatılıp gerekli yerlerde küçük örnekler verilmiştir. Anlaşıldığı üzere bu makale ZK için bir el kitabı şeklinde düşünülmemiştir. Ayrıntılı olarak öğrenmek için başka kaynaklara bakılmalıdır. Bunun için şu anda en iyi kaynak ZK nın resmi web sitesidir ( ZK ile uygulama geliştirmek için şu anda çeşitli geliştirme ortamları için (Eclipse, NetBeans IDE,..) için araçlar geliştirilmiştir ve geliştirilmeye devam etmektedir. Bu araçları kullanarak uygulamalar daha rahat bir şekilde gerçekleştirilebilir. Bu makelenin sizlere ZK yı iyi bir şekilde anlatıp öğretmesi dileğiyle 5

6 4. AJAX 4.1. AJAX Nedir? Ajax, web uygulamaları için yeni bir yaklaşımdır. Asynchronous JavaScript and XML'in kısaltması olan Ajax; bu yöntemi kullanan topluluklar tarafından verilmiş isimdir. Ajax: XHTML+CSS, XMLHTTPRequest, DOM (Document Object Model), JavaScript teknolojilerini kullanarak, klasik web uygulamalarına karşı bir alternatif olarak sunuluyor. Aslında ajax : bir dil kütüphane bir program veya bir geliştirme ortamı indirilebilir bir şey değildir. Ajax : bir yaklaşımdır. bir kısaltmadır. bir web teknolojileri ve standartları ortak kullanımıdır. etkileşimli zengin web arayüzleri oluşturulmasına imkan sağlar. web geliştirme tekniği ve konseptidir. * Fakat günümüzde AJAX tekniğinin uygulama içinde kullanımını kolaylaştıracak hatta yaygınlaştıracak çatılar (framework) ortaya çıkmıştır. Bunların tümünün sadece javascript kodu yazmayı gereksiz kılan javascript kodlarının yaptığı işleri arkaplanda JSP kodunun içine gömülmüş şekilde TAG kütüphaneleri ile gerçekleştirdiklerini bilmeliyiz. Bu makalenin amacı ise AJAX ı bir konsept olarak sunup ilkelerini herhangi bir çatı kullanmadan olduğu gibi anlatmaktır. Bu çerçevede ne makalenin içinde ne de makalenin sonunda verilen örnek uygulamada herhangi bir framework kullanılmamıştır. Çünkü bizce AJAX tekniğini kavrayabilmiş, javascript yazımını benimsemiş bir web programcısı için mevcut çatılardan kendisi için en uygun olanı seçmesi ve kullanması daha doğru bir yöntemdir. 6

7 4.2. AJAX Neden Gerekli ve Ne ĠĢe Yarar? Doğru kullanıldığı zaman sunucu (server) tabanlı teknolojilerden çok daha hızlı kullanıcının isteklerine cevap verebilen daha interaktif çözümler, bu yeni yaklaşım sayesinde üretilebilmektedir. Bunun yanında klasik web uygulamalarının sade kullanıcı arayüzü yerine daha canlı ve yetenekli arayüzlerin oluşturulmasını mümkün kılar. Bu özellikleri ile Ajax web uygulamalarında en çok şikayet konusu olan yavaşlık ve arayüzün çirkin ya da masaüstü uygulamaları ile karşılaştırılacak olursa "kullanışsız" olması sorununa iyi bir çözüm olmaktadır. 4.2.a. Ajax neden gerekli görüldü? Klasik web uygulamalarındaki kullanıcı ile uygulama arasındaki etkileşimi hatırlarsak: Kullanıcı web tarayıcısı aracılığıyla bir istekte bulunur, web uygulaması bu isteğe bir cevap (HTML) oluşturur. Bu esnada kullanıcı sayfanın yüklenmesini bekler. Ajax'da ise kullanıcı isteklerine daha kısa zamanda (neredeyse anında) cevap verilir. Sunucu (server) tabanlı web uygulamalarında sunucu (server) kullanıcı tarafından gönderilen isteklere her kullanıcı bir istek gönderdiğinde cevap vermek zorunda olduğundan, yazılımın cevap verme hızı, web sunucunun (server) hızıyla doğru orantılıydı. Web sunucunun (server) hızlı cevap veremediği zamanlarda da kullanıcının web uygulamalarından aldığı verim büyük oranlarda düşebiliyordu. İşte bu noktada giderilmesi gereken bir sorun vardı ve getirilen çözüm Ajax tı. 4.2.b. Ajax ne iģe yarar? AJAX kullanımında tarayıcıyla (browser) web sunucu (server) arasındaki veri alışverişi dramatik oranda azaltır ve aynı zamanda da web sunucunun (server) işlem gücü bu tür işlemler için kullanılmamış olur. Ajaxın bu ozelliği çok sık karşılaştığımız bir soruna çözüm olmaktadır. AJAX sayesinde kullanılan web uygulamalarında sunucuya (server) form gönderme ve cevap bekleme kısmı tamamen ortadan kaldırılmıştır. Yukarıda anlatılanları günlük hayattan bir örnek Google Maps'teki yakınlaştırma (zoom) özelliği(sayfa yeniden yükleme (reload) gerektirmiyor), Google Suggest'te siz klavyenizle birşeyler girdikçe sayfayı yenilemeden (refresh) yeni önerilerin size sunulması ve bunun gibi bir çok örnek... 7

8 4.3. AJAX ın Mimarisi? AJAX uygulamalarında temel çalışma mantığı ve işlem sırası aşağıdaki gibidir: Sayfada varolan işlemlerden biri tetiklenince, sayfada hazırda bekleyen javascript fonksiyonlarıyla xmlhttprequest nesnesi oluşturulur. Bu nesne arka planda gönderdiği bir http talebiyle, istenen işlem için sunucu tarafında bulunan ve sunucu tabanlı bir dille yazılmış ilgili dosyadan o işlemin yapılmasını talep eder ve bu dosyanın çıktısını alarak kullanıcı tarafında işlenmesi ve istenen şekilde sunulması için diğer bileşenlere aktarır. Bu işlem akışı sırasında, bir Ajax uygulamasını tetiklemek için HTML ve JS, XMLHTTPREQUEST nesnesini oluşturmak için JS, arkaplanda sunucuya asenkron (eşzamanlı olmayan/gerçek zamanlı) HTTP talebi göndermek için XMLHTTPREQUEST nesnesi, sunucu tarafında yapılması istenen işlem için PHP, ASP/.NET, JSP/JAVA vb. sunucu tabanlı bir dil, sunucu tarafında üretilen çıktıyı almak için gene XMLHTTPREQUEST nesnesi, elde edilen bu çıktıyı işlemek ve sayfada istenen alana yerleştirmek için DOM, DHTML ve JS, işlenmiş çıktının renk, çizgi vb. şekilsel sunumu için de (X)HTML ve CSS kullanılmaktadır. ġekil 1: AJAX da Response-Request İlişkisi 8

9 ġekil 2: AJAX da Client-Server ilişkisi 9

10 ġekil 3: Geleneksel web uygulamaları ile AJAX yaklaşımının karşılaştırılması 10

11 ġekil 4: Klasik web uygulamalarındaki senkron etkileşimle AJAX yaklaşımındaki asenkron etkileşim karşılaştırması 11

12 5. ZK ya GiriĢ 5.1. ZK Nedir? Günümüzde AJAX tekniğinin uygulama içinde kullanımını kolaylaştıracak hatta yaygınlaştıracak çatılar (framework) ortaya çıkmıştır. Bunların tümünün sadece JavaScript kodu yazmayı gereksiz kılan JavaScript kodlarının yaptığı işleri arkaplanda JSP kodunun içine gömülmüş şekilde TAG kütüphaneleri ile gerçekleştirmektedir. AJAX 'ın iki büyük örneği Google Map ve Google Suggest'tir. AJAX web uygulamalarını masaüstü uygulamaları gibi etkileşimin aynı seviyede olmasından kurtararak, web uygulamalarına rahat bir nefes aldırdı. Bununla birlikte Applet'ların ve Flash uygulamalarının tersine standart web tarayıcılar tarafından JavaScript gibi çalıştırılabilir ve ek bir araca veya eklentiye gerek duymaz. AJAX bir çeşit yeni nesil dinamik HTML(DHTML) çatısıdır. Bu yüzden kullanıcı tarafından tetiklenen ve görüntü üstünde işlemler olayları dinlemek konusunda JavaScript tabanlıdır. AJAX uygulamaları ve web sayfaları ZK çatısı ile kolayca birleştirebilir. Diğer AJAX çatılarının tersine, ZK ile web uygulamaları geliştirmek için JavaScript konusunda bilgi sahibi olmaya gerek yoktur. Çünkü ZK Engine, JavaScript kodunu otomatik olarak üretir. ZK ile web uygulaması geliştirmek için biraz HTML bilgisine ihtiyaç vardır. Basit bir şekilde web uygulaması geliştirmek için ZK geliştirme takımı aynı zamanda ZK User Interface Markup Language (ZUML) dilini tanımladı. Bu dil ile ZK uygulamaları HTML formatında olduğu gibi basit bir şekilde tag açıp kapatarak gerçekleştirilebilir. ZK web uygulamalarına zengin kullanıcı arayüzü sağlamak için olay ve bileşen tabanlı olarak tasarlanmıştır. ZK, AJAX'ın olay yönetim motorunu, zengin bir XML User Interface Language (XUL) kümesini, XHTML bileşenlerini ve aradaki gösterim tarzını kapatan ZK, User Interface Markup Language (ZUML)'yi içermektedir. ZK ile uygulamalar zengin özellikli XUL and XHTML bileşenleri içinde sunulabilir ve bu bileşenler kullanıcı tarafında tetiklenen olaylar ile işlenebilir. ZK zengin AJAX uygulamalarını aşağıdaki şekillerde basitleştirir: Olay yönetim motoru web uygulaması geliştirenlere masaüstü uygulaması geliştirmek gibi uygulama geliştirme imkanı sunmaktadır. XUL ve XHTML bileşenleri katmanlar arasındaki blokları kaldırarak web uygulamalarının zenginleşmesini sağlar. ZUML dili zengin kullanıcı arayüzlerinin basit HTML sayfaları gibi tasarlanıp gerçekleştirilmesini sağlar. 12

13 XHTML XHTML Extensible HyperText Markup Language in kısaltmasıdır. XHTML HTML e çok benzer. Kısaca XHTML XML sözdüzüminde yazılan HTML dir. Aşağıdaki noktalar en önemli farkları göstermektedir. Bir elemanın veya özelliğin gösterimi(küçük harf ve büyük harf duyarlılığı) HTML nin tersine XHTML de önemlidir. Örneğin içeriği olmayan elemanlar(örn. <br>) XHTML de mutlaka kapatılmalıdır(örn. <br />). Örnek kod: <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" lang="en" xml:lang="en"> <head> <title>a XHTML example</title> </head> <body> <h1>testpage</h1> <p>a paragraph</p> <p> Another <br /> Paragraph </p> </body> </html> 13

14 XUL XUL XML User Interface Markup Language in kısaltmasıdır. Bu dil ZK takımı tarafından bulunmuş bir dil değildir. Mozilla takımı tarafında tanımlanmış bir dildir. XUL nin proje sayfası Bu dil platformdan bağımsız olarak kullanıcı arayüzü tanımlamamızı sağlar. Bu yüzden ZK geliştiricileri bu dili kullandılar. Örnek kod: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id ="findfile-window" title ="Find Files" orient ="horizontal" xmlns =" /there.is.only.xul"> <button id="find-button" label="find"/> <button id="cancel-button" label="cancel"/> </window> ZUML ZUML ZK User Interface Markup Language in kısaltmasıdır. ZUML XUL tabanlıdır. Fakat ZUML de XUL standartlarıan bazı ekler yapılmıştır. Örneğin gömülü programlama gibi: <window title="hello" border="normal"> Hello World! </window> Kullanıcı için web uygulaması aynı masaüstü uygulamasıdır. Geliştirici için ise bağımsız bir uygulama programlama gibidir. ZK olay tabanlı çalışır ve istek ve cevapları web uygulamasından soyutlar. Teknik altyapı ZK tarafından sağlanmaktadır. Bu yüzden tarayıcı tarafı için JavaScript kodu yazmaya gerek yoktur. ZK framework u bazı JavaScript kütüphanelerini içerir ve kullanıcı için JavaScrip kodu üretir. Bu yüzden uygulama geliştiricilerin JavaScript ile ilgili bir şey bilmeye ihtiyacı yoktur. ZK framework sadece UI framework un yapması gereken şeyleri yapar. Yani tüm problemleri çözen bir framework henüz yoktur. Bu yüzden Persistance gibi işler başka framework ler ile yapılmadır. Bununla birlikte birçok framework ZK ya entegre edilebilir. (Örn. Hibernate, 14

15 5.2. ZK Neden Gerekli Görüldü? Günümüzde Web uygulaması geliştirmek için bir sürü framework var. Fakat ZK onlardan neden farklıdır diye düşünürsek yanıt çok basittir. Çünkü diğer framework ler zengin kullanıcı arayüzü konusunda sınırlıdır, uygulama geliştirmek çok maliyetli ve karmaşıktır yılında ZK yı geliştiren ekip tarafında zapp ve OWL den esinlenilerek Window için bir hesap(account) uygulaması için bir altyapı geliştirildi yılında aynı ekip Struct ve WebWorks den esinlenerek J2EE ile Windows üstünde diğer bir hesap(account) uygulaması için bir altyapı geliştirildi. Her iki sistemin geliştirilmesini de incelediğimizde görebiliriz ki Web uygulaması geliştirmek sadece yüksek seviyede bir programlama bilgisi gerektirmekle kalmaz aynı zamanda yüksek bir maliyet gerektirir. Geriye dönüp 1990 lı yıllardaki masaüstü uygulamalarına başarısına baktığımızda bileşen ve olay tabanlı modelin önemli bir rol oynadığını görürüz. Aynı model ZK ile web uygulamalarına uygulandığında web uygulaması geliştirmedeki çıkan sorunlara çözüm bulunmuştur. ZK projesinin amaçları nelerdir? Masaüstü uygulamalarıyla aynı veya daha yüksek seviyede kullanıcı arayüzlü Web uygulaması geliştirmek. Masaüstü uygulamalarıyla aynı veya daha yüksek basitlikle web uygulaması geliştirmek. İyi bir mimari ve birlik ile işbirliğine teşvik etmek için ZK Ne ĠĢe Yarar? Masaüstü uygulamalarıyla aynı veya daha yüksek seviyede kullanıcı arayüzlü Web uygulaması geliştirmeye imkan sağlar. Masaüstü uygulamalarıyla aynı veya daha yüksek basitlikle web uygulaması geliştirmeye imkan sağlar. İyi bir mimari ve birlik ile işbirliğine teşvik eder ZK Gerçekten Ġlgili Sorunları Çözdü mü? Birçok ülkede birçok kuruluş tarafından kullanılıyor olması, ZK için sürekli yeni plug-in ve framework geliştirilmesi, ZK ile yapılan Web uygulamalarının gerçekten zengin kullanıcı arayüzü ile kullanıcılar tarafından ilgi görmesi, Yüksek düzeyde Web programlaması bilmeyenlerin bile ZK ile kolayca zengin kullanıcı arayüzlü Web uygulaması geliştirebilmesi, ZK nın gerçekten ilgili sorunları çözdüğünü gösterir. 15

16 5.5. Avantajları Zengin Kullanıcı Deneyimi Artık günümüzde web uygulaması geliştiren kişiler JavaScript ve HTML dillerine yabancı olmayan, AJAX konusunda bilgi ve deneyim sahibi olan, web uygulamaları ile Java arasındaki bağı anlamış kişilerden oluşmaktadır. ZK da bu kişileri hedef almıştır ve böylelikle kokay bir şekilde öğrenilip yaygınlık kazanmıştır. Direct RIA ZK yazılım geliştiricileri kullanıcı arayüzü, veri tabanı ve diğer kaynakların yönetimini programcıdan soyutlayarak desteklemektedir. Direct RIA ile programlama ile yazılım geliştiriciler sanki bir masaüstü uygulaması geliştiriyormuş gibi web uygulaması geliştirebilmektedirler. Açık Kaynak Olması (Open Source) ZK açık kaynak kodlu bir Ajax + Mobile framework üdür. ZK hakkında 20+ dilde çeviri, 100+ makale/blog, 100,000+ satır kod ve 190+ ülkeden 800,000+ indirme ile internet ortamında henüz yeni olmasına rağmen önemli bir yere sahiptir. Standards-based ZK temelde birçok standarda dayandığı için web programlama konusuna yabancı olmayanlar için öğrenmesi çok kolaydır. Ayrıca standart haline gelmiş birçok programlama dili (XUL, HTML, JSP, JSF, Portlet, Java EE, ) ve framework(struts, Hibernate, JSTL, ) ile uyumlu olduğu için öğrenilmesi ve geliştirilmesi kolaydır. Sözdizim Biçimi ve Betik Dilleri (Markup and Script Languages) ZK içinde diğer programlama dilleri kullanılabildiği gibi ZK kütüphanesi diğer programlama dillerinde de (Java, Ruby, ) kullanılarak masaüstü uygulaması geliştirir gibi uygulama geliştirilebilir. Ayrıca ZK Tag library diğer tagliblerde (JSTL, Struts) olduğu gibi birçok kolaylık sağlamaktadır. Ayrıca ZK HTML, XUL gibi web uygulaması için standart hale gelmiş dilleri de desteklemektedir. Direct Push ZK güvenilir ve sağlam bir Direct Push mekanizması ile Direct Push ile hızlı ve etkin yanıt veren, dinamik bir yapıya sahip olan web uygulamaları kolay bir şekilde minimum maliyetle gerçekleştirilebilir. 16

17 GeliĢtirilebilirlik ve Geleneksellik (Extensibility and Customizability) ZK nın standart, esnek, kolayca geliştirilmeye ve anlaşılmaya uygun bir mimarisi vardır. CSS, şablon tabanlı ve macro bileşenler ile görünüş ve davranış uygulamaya değiştirmeden kolayca değiştirilebilir. Pluggable UI (Kullanıcı arayüzü) motoru ile UI(Kullanıcı arayüzü) kullanıcıdan bağımsız olabilir ve bir veri tabanından veya başka bir kaynaktan yüklenebilir. Güvenlik (Security) ZK en baştan güvenlik ön planda tutularak tasarlanmıştır. ZK sunucuyu bağlanmak isteyen script lerden ve JavaScript/SQL virüslerinden korur. Ayrıca business logic ve business data kısmını internet üstünden koruma altına alır. Ölçeklenebilirlik, Kümeleme ve Hatalara KarĢı Dayanıklılık (Scalability, Clustering and Failover) ZK zengin arayüzü ve hatalara karşı karaklılığı ile yüksek bir ölçeklenebilirlik ve uygulanabilirlik sağlar. Eğer bir sunucuda ZK ile ilgili bir hata meydana gelirse(zk Loader veya ZK Engine ile ilgili), hata tespit edilir ve başka bir ZK bileşeni ile (ZK Loader veya ZK Engine) hata kullanıcıdan gizlenerek ve soyutlanarak işlemlere devam edilir. Ayrıca modern uygulama sunucuları ile de uyumlu şekilde çalışabilmektedir. Mobil EriĢim (Mobile Access) ZK yaklaşık 1 milyon mobil araç için Internet uygulamalarına erişimi minimum maliyetle olanaklı kılmıştır. ZK Java Mobile, Android ve çeşitli mobil tarayıcıları desteklemektedir. Destekleyen ġirketler ve KuruluĢlar (Enterprise Support) ZK nın teknik servisi geliştirme zamanını kurtarmak yüksek seviyede kullanıcı deneyimi, üretkenlik ve performans ile birçok kuruluşa erişmek ve bu kuruluşlar tarafından erişilebilmek için tasarlanmıştır. Neticesinde Sun Microsystems, Swiss Re, Unisys, MMC da kapsayan birçok önemli kuruluş ZK yı doğrudan desteklemektedir. 17

18 6.1. ZK nın Tasarımı 6. ZK nın Mimarisi ġekil 5: ZK nın mimarisi ZK nın 2 tip kullanıcısı vardır: Uygulama GeliĢtirici (Developer) : Basit programa bilgisi ve tecrübesiyle Web uygulaması geliştirebilir. Son Kullanıcı (End User) : Kullandığı Web uygulamaları çok zengin bir kullanıcı arayüzüne sahiptir ZK altyapı olarak AJAX ve Mobile teklonojilerini kullanır. Bu teklonojileri kullanırken Google Maps, Yahoo! UI, DOJO, ZK Spreadsheet, Web Services ve Versatile Plugins den yararlanır. 18

19 6.2. ZK nın ÇalıĢma Mantığı ZK'nın AJAX tabanlı mekanizması Şekil'de gösterilen 3 önemli kısım tarafından gerçekleştirilmektedir: ZK Loader, ZK AU (asynchronous update) Engine, ve ZK Client Engine. ZK Loader ve ZK AU Engine kısımları bir grup Java Servlet'ın bileşiminden oluşmaktadır. ZK Client ise JavaScript kodlarının birleşiminden oluşmaktadır. Şekil ZK Loader ilk kez istem aldığı zaman oluşan mekanizmayı göstermektedir. ġekil 6: ZK nın çalışma mantığı 19

20 Yukarıda gösterilen mekanizma şu şekilde çalışmaktadır: 1. ZK Loader gelen URL istemini yorumlar ve ilgili HTML sayfasını HTML, CSS, JavaScript kodlarını ve ilgili ZK bileşenlerini kullanarak üretir. 2. ZK Loader üretilen HTML sayfasını istemciye ve ZK Client Engine'a gönderir. ZK Client Engine ise tarayıcıdaki JavaScript olaylarını izleyip biriktirmek için istemci tarafına yerleştirilir. Not : ZK Client Engine olayları dinleyen ve ona göre web sayfasının içeriğini değiştiren birçok JavaScript'in birleşimidir. 3. Eğer herhangi bir JavaScript olayı tetiklenirse, ZK Client Engine tetiklenen olayı veya olayları sunucu tarafındaki ZK AU Engine'e gönderir. 4. ZK AU Engine Ajax istemlerini alır, ilgili ZK bileşenlerinin özelliklerini günler ve gereken cevabı istemci tarafına göndererek istemci tarafındaki bileşenleri günler. 5. ZK Client Engine sunucu tarafında gönderilen karşılıkları alır ve ilgili tarayıcının Document Object Model (DOM) ağacındaki ilgili içeriği günler. Bu işlem URL kullanıcı tarafından kullanılmayıncaya kadar devam eder. 20

21 A Presentation Layer (Sunum Katmanı) ZK tabaka olarak mümkün olduğunca ince tasarlanmıştır. Bu yüzden ZK sadece sunum katmanına odaklanmıştır. ZK çalışması için alt ve üst katmanlar açısından başka teklonojilere ihtiyaç duymamaktadır. Java Database Connectivity (JDBC), Hibernate, Java Mail, Enterprise Java Beans (EJBs) ve Java Message Service (JMS) uygulamaları ve araçları ZK ile uyumlu şekilde çalışabilmektedir. Bu sayede web uygulaması geliştiren kişiler bildikleri teklonojileri kullanarak ZK ile web uygulaması geliştirebilirler. A Server-centric Event-Driven Framework (Sunucu Merkezli Olay Yönetim Çatısı) Birçok Ajax çatısında sunucunun rolü pasiftir. Sunucu sadece istemciden istemleri aldıktan sonra gerekli veriyi sağlamak ve almaktan sorumludur. Bileşenler arasındaki oldukça karışıktır ve birçok JavaScript programına ihtiyaç duyar. Fakat ZK da durum tam tersidir. Tüm bileşenler sunucu tarafında yaratılır ki bu bileşenler arasındaki iletişimi kolaylaştırır ve kullanıcı sunucudaki bileşenlere doğrudan erişir. Bundan başka bileşenler arasındaki iletişimin bir diğer yolu da olay tabanlıdır. İstemci tarafında kullanıcı tarafından bir etkileşim tetiklenir ya da olaylar diğer bileşenlere yollanır. Sonuç olarak ZK sunucuları kullanıcılara masaüstü uygulaması geliştirir gibi web uygulaması geliştirme imkanı sağlar. Böylece kullanıcılar daha etkileşimli uygulamaları daha az sorumlulukla gerçekleştirebilirler. A Component-Based GUI Toolkit (BileĢen Tabanlı GUI Aracı) ZK bileşen tabanlı bir grafiksel kullanıcı arayüzü aracıdır. ZK 70 den fazla XUL tabanlı ve 80 den fazla XHTML tabanlı bileşenlerini ve kullanıcı arayüzü tasarımı için ZUML dilini destekler. Programcılar kendi uygulama sayfalarını XUL/XHTML bileşenlerinin zengin özellüklerini kullanarak tasarlarlar. Böylece uygulamanın son kullanıcı tarafında tetiklenen olayların üstünde yönetimini sağlar. Bu masaüstünde çalışan GUI tabanlı uygumalara benzer. 21

22 7. ZK yı Destekleyenler 7.1. Destekleyen Web Tarayıcılar ve Sunucular 7.1.a. Web Tarayıcılar Simge Tarayıcı Sürümle Internet Explorer 6+/7 Netscape 8+/9 Firefox 1+ Safari 2+ Mozilla 1+ Opera 9+ Camino b. Web Sunucular Servlet 2.3+ ve JVM 1.4+ destekleyen Web sunucular 7.2. Destekleyen Framework ler ve Teklonojiler Simge Framework / Teklonoji MVC Performance Optimization Spring Webflow Spring Security JSF JSP Seam Data Binding Chart JasperReports JDBC Hibernate JPA Google Map 22

23 7.3. Destekleyen Araçlar 7.3.a. Eclipse Çevrimiçi Yükleme 1. Eclipse açılır ve [Help] menüsü altında select [Software Updates] > [Find and Install...] seçilir ġekil 7: Eclipse nin update seçeneğinin seçilmesi 23

24 2. [Search for new features to install] seçilir ve [Next] tıklanır. ġekil 8: Update için yeni özelliklerin (plug-in) aranması 24

25 3. Buradan [New Remote Site...] tıklanır. Karşımıza gelen pencerede name kısmına ZK Studio, URL kısmına yazılararak [OK] butonuna tıklanır. ġekil 9: Yüklenecek özelliğin (plug-in) yerinin seçilmesi 25

26 Böylece eklenen update sitesi seçilir ve [Finish] butonuna basılır. ġekil 10: Yüklenecek özelliğin (plug-in) seçilmesi 26

27 4. Daha sonra ZK Studio için yükleme paketi seçilir ve [Next] butonuna tıklanır. ġekil 11: Seçilen özelliğin (plug-in) onaylanması 27

28 5. Bundan sonra karşımıza lisans onaylama kısmı çıkar. "I select the terms in the license agreement" seçilerek [Next] butonuna tıklanır. ġekil 12: Lisans anlaşmasının kabul edilmesi 28

29 6. [Finish] butonuna tıklayarak yükleme onaylanmış olur. ġekil 13: Yüklemenin başlatılması ġekil 14: Özelliğin (plug-in) yüklenmesi 29

30 Eğer yükleme sırasında veya sonrasında Verification penceresi çıkarsa, [Install All] butonuna basılarak devam edilir. ġekil 15: Yüklemenin doğrulanması 7. En sonnda karşımıza çıkan onay penceresinden [Yes] butonu basılarak Eclipse nin yeniden başlaması sağlanır ve yeni eklentimiz aktif duruma gelir. ġekil 16: Eclipse nin yeniden başlatılması 30

31 Çevrimdışı Yükleme 1. ZK Studio için yükleme paketi adresinden yüklenir. 2. Eclipse açılır ve [Help] menüsü altında select [Software Updates] > [Find and Install...] seçilir 3. [Search for new features to install] seçilir ve [Next] tıklanır. 4. Buradan [New Archived Site] butonu tıklanır. ġekil 17: Yüklenecek özellik (plug-in) için yer seçme istemi 31

32 5. Karşımıza çıkan pencereden indirdiğimiz yükleme paketi seçilir ve [Open] butonuna basılır. ġekil 18: Yüklenecek özelliğin (plug-in) seçilmesi Daha sonra [OK] butonuna basılarak yükleme paketi seçimi onaylanır. ġekil 19: Seçilen özelliğin (plug-in) yerinin onaylanması 32

33 6. Böylece eklenen paket seçilir ve [Finish] butonuna basılarak yükleme başlatılır. ġekil 20: Yüklemenin onaylanması 7. Geri kalan adımlar çevrim için yükleme kısmında olduğu gibi 4. Adımdan itibaren aynıdır. 33

34 7.3.b. Netbeans Gereksinimler 1. NetBeans 5.5+/ ZK kütüpanesinin son sürümleri. 3. Bir uygulama sunucusu. Bu örnekte JBoss kullanılmıştır. Uygulanacak Adımlar 1. NetBeans IDE başlatılır. 2. Yeni bir proje açılır ([File] > [New Project]) ve Web Application kategorisi seçilir ([Web] > [Web Application]). ġekil 21: Proje için Web uygulaması türünün seçimi 34

35 3. Projenin ismi verilir (örneğin helloworld), projenin dizini ve uygulama sunucusu seçilir. En son olarak [Finish] butonuna basılır. ġekil 22: Proje isminin girilerek projenin oluşturulması 35

36 4. [Web Pages] > [WEB-INF] dizini altındaki web.xml dosyası açılır ve içeriği aşağıdakiler ile günlenir. ġekil 23.a / 23.b: web.xml dosyasının seçimi ve içeriği <?xml version="1.0" encoding="utf-8"?> <web-app Id ="WebApp_ID" version="2.4" Xmlns =" xmlns:xsi =" xsi:schemalocation =" > <display-name>helloworld</display-name> <servlet> <description> <![CDATA[The servlet loads the DSP pages.]]> </description> <servlet-name> dsploader </servlet-name> <servlet-class> org.zkoss.web.servlet.dsp.interpreterservlet </servlet-class> </servlet> <servlet-mapping> <servlet-name> dsploader </servlet-name> <url-pattern> *.dsp </url-pattern> </servlet-mapping> <listener> <description> Used to cleanup when a session destroyed </description> <display-name> ZK Session Cleaner </display-name> <listener-class> org.zkoss.zk.ui.http.httpsessionlistener </listener-class> </listener> <servlet> <description> ZK loader for ZUML pages </description> <servlet-name> zkloader </servlet-name> <servlet-class> org.zkoss.zk.ui.http.dhtmllayoutservlet </servlet-class> <init-param> <param-name> update-uri </param-name> <param-value> /zkau </param-value> </init-param> <load-on-startup> 1 </load-on-startup> </servlet> <servlet-mapping> <servlet-name> zkloader </servlet-name> <url-pattern> *.zul </url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name> zkloader </servlet-name> <url-pattern> *.zhtml </url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name> auengine </servlet-name> <url-pattern> /zkau/* </url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file> index.htm </welcome-file> <welcome-file> index.jsp </welcome-file> <welcome-file> default.html </welcome-file> <welcome-file> default.htm </welcome-file> <welcome-file> default.jsp </welcome-file> </welcome-file-list> </web-app> 36

37 5. [Library] klasörüne sağ tuş ile basılır ve [Add JAR/Folder...] seçilir. ġekil 24: Gerekli kütüphanelerin eklenmesi ZK-X.X.X/dist/lib/ ve ZK-X.X.X/dist/lib/ext dizinleri altındaki tüm Jar dosyaları bu kütüphane içine eklenir. ġekil 25: ZK ile ilgili kütüphaneler 37

38 6. Artık ilk zul dosyamızı oluşturmak için gerekli tüm işlemleri yapmış bulunmaktayız. Web Pages dosyasına sağ tuş ile basılır ve [New] > [File/Folder] seçilir. ġekil 26: Projede yeni dosya oluşturulması [Other] > [Empty File] seçilir. ġekil 27: Boş bir dosya oluşturma istemi Dosya adına "helloworld.zul" verilir ve [Finish] butonuna basılır. 38

39 7. helloworld.zul dosyasına aşağıdakiler yazılır <?xml version="1.0" encoding="utf-8"?> 10. <?page title="zk::hello World!"?> 11. <window title="my First window" border="normal" width="200px"> 12. Hello, World! 13. </window> ġekil 28: Helloworld uygulamasının içeriği 8. Artık projeyi çalıştırabiliriz. ġekil 29: Projenin çalıştırılması 39

40 7.4. Destekleyen Programlama Dilleri Script in Java <window id="win" title="script in Java" width="100%" border="normal"> <zscript language="java"> FCKeditor fck = new FCKeditor(); fck.setcustomconfigurationspath("/userguide/macros/fckconfig.js"); fck.setvalue("hello Java"); fck.setparent(win); fck.addeventlistener ( Events.ON_CHANGE, new EventListener() { public void onevent(event event) throws Exception { alert(((inputevent)event).getvalue()); } } ); </zscript> </window> ġekil 30: Java nın ZK da kullanım örneği ġekil 31: Java nın ZK da kullanımı ile yapılan uygulama 40

41 Script in Groovy <window id="win" title="script in Groovy" width="100%" border="normal"> <zscript language="groovy"> import org.zkforge.fckez.fckeditor; def hello = "Hello Groovy"; def fck = new FCKeditor(); fck.setcustomconfigurationspath("/userguide/macros/fckconfig.js"); fck.setvalue(hello); fck.setparent(win); </zscript> </window> ġekil 32: Groovy nin ZK da kullanım örneği ġekil 33: Groovy nin ZK da kullanımı ile yapılan uygulama 41

42 Script in Ruby <window id="win" title="script in Ruby" width="100%" border="normal"> <zscript language="ruby"> require 'java' include_class 'org.zkforge.fckez.fckeditor' def sayhello () return "Hello Ruby" end fck = FCKeditor.new() fck.setcustomconfigurationspath("/userguide/macros/fckconfig.js") fck.setvalue(sayhello()) fck.parent = $win </zscript> </window> ġekil 34: Ruby nin ZK da kullanım örneği ġekil 35: Ruby nin ZK da kullanımı ile yapılan uygulama 42

43 Script in JavaScript <window id="win" title="script in JavaScript" width="100%" border="normal"> <zscript language="javascript"> var fck = new org.zkforge.fckez.fckeditor(); fck.setcustomconfigurationspath("/userguide/macros/fckconfig.js"); fck.setparent(win); fck.setvalue(sayhello()); function sayhello() { return 'Hello JavaScript'; } </zscript> </window> ġekil 36: JavaScript in ZK da kullanım örneği ġekil 37: JavaScript in ZK da kullanımı ile yapılan uygulama 43

44 Script in Python <window id="win" title="script in Python" width="100%" border="normal"> <zscript language="python"> from org.zkforge.fckez import FCKeditor def sayhello(): return "Hello Python" fck = FCKeditor() fck.customconfigurationspath = "/userguide/macros/fckconfig.js" fck.value = sayhello() fck.parent = win </zscript> </window> ġekil 38: Python un ZK da kullanım örneği ġekil 39: Python un ZK da kullanımı ile yapılan uygulama 44

45 8.1. Kimler Kullanıyor? 8. ZK yı Kullananlar University of Oxford University of Vermont The University of Manchester Intellectual Property Limited (UMIP) The United States Army Research Institute of Environmental Medicine Institute for Information Industry National Health Research Institutes Sun Microsystems, Inc. Alcatel-Lucent Bank's soft systems The Turkish Statistical Institute The Ministry of Public Works and Settlement EN-UYGUN.COM ġekil 40: ZK yı kullanan kuruluşlar Ve daha birçok üniversite, kamu kuruluşu, özel kuruluş, şirket, 45

46 8.2. Neden Kullanıyor? ZK yı kullanan üniversiteler, şirketler, kamu veya özel kuruluşlar doğal olarak ihtiyaçları doğrultusunda ZK nın kendilerine faydalı olabileceğini düşündükleri için kullanmaya başlamışlardır. ZK dan elde ettikleri fayda ZK nın getirdiği avantajlarla gelmektedir. Dolayısıyla bu avantajlar ZK yı kullanan kuruluşların ihtiyaçlarına piyasadaki diğer framework ve araçlardan daha iyi cevap vermektedir. ZK yı piyasadaki diğer framework ve araçlardan üstün kılan özellikleri : Masaüstü uygulaması geliştiriyor gibi web uygulaması gerçekleştirilebilir. Zengin kullanıcı arayüz desteği sağlaması ve bunları sağlarken uygulama geliştiriciyi birçok zorluklardan soyutlayarak uygulama geliştiriciye hazır birimler sağlar. JavaScript tabanlıdır. XML, XHTML, gibi standart web dillerini destekler ve kendi dili olan ZUML in bu diller temel alınarak geliştirilmiştir. İstemci tarafında çalışması için ek bir araç veya uygulamaya ihtiyaç duymayıp işlemlerin ve olayların ele alınması sunucu tarafında yapılması sebebiyle istemci tarafında sadece görüntüleme kısmı yapılmaktadır. Sunucu tarafında çalışması için ek bir araç veya uygulamaya ihtiyaç duymayıp sadece gerekli ayarlamaların yapılmasının ve gerekli kütüphanelerin tanıtılmasının yeterlidir. Açık kaynaktır. Ücretsizdir. Web kütüphanesi olmakla birlikte masaüstü uygulamalarında da kütüphane olarak kullanılabilir. Birçok programlama ve script dilini desteklemekte ve bu diller tarafından desteklenmektedir. Dolayısıyla kuruluşlar müşterilerine, üyelerine veya ziyaretçilerine Daha güzel, zengin ve etkin bir arayüz sunmak, Web uygulaması geliştirmek için gereken işgücü ve zaman maliyetini azaltmak, Kullanım hakkı için gereken hukuki ve maddi sorumlulukları çok aza indirmek, Var olan sistemlerini en az maliyet ve müdahaleyle daha yeni ve etkin bir sisteme çevirmek için ZK yı kullanmaktadırlar. 46

47 8.3. Kullananlar ZK dan Memnun mu? Zaman zaman SourceForge.net de aktif olan projelere bakarım. Şimdiye kadar FileZilla ve GAIM gibi birçok değerli projeye rastlamıştım. Son zamanlarda ise bunlara ZK eklendi. Guy Bowerman, Senior Software Engineer of IBM Son yıllarda geliştirilen birçok AJAX framework ile deneyimim oldu. ZK da bu deneyimlerinde biri ve pazarlama çizgisini "Basit and Zengin" anlayışıyla üst seviyelere çekti. Max Kiesler, Strategic Desinger, co-founder and principle of Ideacodes Herşeyden önce bu framework bize programlama konusunda eğlence ve neşe getirdi. UML makes ekleme, günleme, silme, vb. gibi birçok işi kolaylaştırıyor. ZUML programcı olmayanlar için gerçekten çok ideal. ZUML ile bir kullanıcı arayüzünü diğeriyle birleştirebilir veya değiştirebilirsiniz. Sürükle-bırak, eşzamanlı olmayan günleme, vb. gibi özellikleri ve bileşenleri programcı olmayanların bile karışık kullanıcı arayüzlerini kolayca gerçekleştirebilmelerini sağlıyor. Dietrich Kappe, Chief Technology Officer of Pathfinder ZK nın web sitesi ZK ile ilgili gerçekten çok harika dökümanlar sunuyor. En az maliyet ve çalışmayla iyi bir AJAX uygulaması geliştirmek için gerekli bilgi ve deneyimi oradaki dökümanlarda bulabilirsin. Michael Klaene, Senior Consultant of Sogeti LLC Gerçekten çok basit bir AJAX framework ü. Sadece temel HTML bilgisine ihtiyaç duyuyor. Cagdas, StumbleUpon ZK Java için bildiğim en iyi XUL aracıdır. Sunucu tarafında AJAX ın yetenekleri ile DHTML hizmeti sunan çok güçlü bir framework dür. Chanwit Kaewkasi, CK's Blog JAVA uygulaması geliştirenler için çok ilginç bir projedir. ZK gelişmiş AJAX uygulamaları geliştirmek için çok yardımcı olabilir ve benim düşünceme göre XUL nin kullanılması ZK yı daha güçlü bir hale getiriyor. Hatem, Ajax Magazine ZK çok esnek gibi görünüyor ve XUL gibi birçok ilginç teklonojiye dayanıyor. İnanıyorum ki GWT ve ZK birlikte çok başarılı olabilirler. Carlos, Carlos' Binary Stuff 47

48 Bizim şirketteki yazılım geliştirme takımındaki üretkenliği arttırmanın bir yolunu bulmak için birçok farklı framework denedim. Gerçek şu ki ZK harika bir çalışma aracı olduğunu ve yazılım geliştirme için programcıya ilham verdiğini ispatladı. Bence sizde de ZK ile bir uygulama geliştirme potansiyeli var. İnanıyorum ki ZK ile tek limit gökyüzüdür. Chris Spiliotopoulos, creator of Zero Kode, Software Architect in Athens, Greece Tebrikler ürününüz harika... Birçok seçeneği değerlendirdikten sonra, birçom uygulamayı ZK ile geliştirmeye karar verdik. Gabriel Buades Rubio, Direcció General de Tecnologia i Comunicacions, Govern de les Illes Balears ZK çok ilginç. Son zamanlarda tam onun gibi bir şey arıyordum. ZK yı JSF, Spring ve Hibernate kullanarak yeni projeme eklemeyi düşünüyorum. Fernando de Leon, Sr. Software Web Developer in Queensland, Australia Size teşekkür etmek istiyorum çocuklar. ZK Java da gerçekten karmaşık uygulama geliştirmeyi çok basitleştiren ilk framework. Frans van Gool Son birkaç hafta içinde, bir grup güvenlik uzmanı benim ZK uygulamamı test etti. Söylediklerine göre benim uygulamam şirketteki en güvenilir uygulama imiş. Çok tebrik ediyorum. Harika bir iş çıkarmışsınız. Tommaso Fin, InfoCert Gerçekten ZK dan çok etkilendik, bu yüzden bizim form framework lerimizin sunum katmanınındaki kullanıcı arayüzü kodlarını ZK kodları ile değiştirerek bu katmanı ZK ile gerçekleştirmeye başladık. John Spackers Harika bir konu!!, Harika bir programlama ürünü!!... Benim açımdan pazarmalama bakımından en iyi AJAX framework ü. Bu şekilde devam edin!!! Rainer-Micahel Werner, IT Consultant in Germany Öncelikle çok ilginç bir framework! Harika bir iş! ZK yı tagler olmadan doğrudan masaüstü uygulaması geliştiriyor gibi kullandım ve daha önce Swing kullanarak yaptıklarıma benziyor. Eduard, Belgium 48

49 9. ZK Kodlama 9.1. Pencere ZK da pencere tanımlanması <window> </window> tagleri ile tanımlanır. Window tag i içinde tanımlı birçok değişken vardır. Bunlardan en önemlileri: <window title="my First Window" border="normal" width="200px"> Hello, World! </window> ġekil 41: ZK da pencere oluşturma için örnek kod ġekil 42: ZK dan oluşturulan örnek pencere id : Pencerenin isimdir. Bu isim sayesinde pencere tanımı dışından pencereye ulaşılabilir. title : Pencerenin başlığıdır. Pencerenin üst kısmında yazı olarak görünür. border : Pencere dışında çerçeve olup olmaması, varsa biçimi ile ilgilidir. width : Pencerenin genişliğidir. Pixel olarak (100px, 200px, ) veya geçerli sayfanın boyutuna göre oran (100%, 50%, ) olarak tanımlanabilir. height : Pencerenin yüksekliğidir. Pixel olarak (100px, 200px, ) veya geçerli sayfanın boyutuna göre oran (100%, 50%, ) olarak tanımlanabilir. left : Pencerenin geçerli sayfanın sol tarafından uzaklığıdır. Pixel olarak (100px, 200px, ) veya geçerli sayfanın boyutuna göre oran (100%, 50%, ) olarak tanımlanabilir. right : Pencerenin geçerli sayfanın sağ tarafından uzaklığıdır. Pixel olarak (100px, 200px, ) veya geçerli sayfanın boyutuna göre oran (100%, 50%, ) olarak tanımlanabilir. top : Pencerenin geçerli sayfanın üst tarafından uzaklığıdır. Pixel olarak (100px, 200px, ) veya geçerli sayfanın boyutuna göre oran (100%, 50%, ) olarak tanımlanabilir. style : Pencerenin biçimlendirilmesinde kullanılacak CSS dosyasının veya tanımının belirtilmesi için kullanılır. 49

50 9.2. Form <grid fixedlayout="true"> <columns> <column label="type" width="150px" /><column label="content" /> </columns> <rows> <row> <label value="kullanıcı Adı" width="150px" /> <textbox value="serkan" width="150px" /> </row> <row> Şifre: <textbox type="password" width="150px" /> </row> <row> Doğum Tarihi: <vbox><datebox width="150px" /></vbox></row> <row> <textbox width="150px" Geçerli bir mail adresi giriniz" /> </row> <row> Doğrulama <hbox> <vbox> <textbox value="qwasdf" width="150px" /> <captcha id="cpa" length="6" width="150px" height="50px" /> </vbox> <vbox> <button onclick="cpa.randomvalue(); val.value=cpa.value;" /> </vbox> </hbox> </row> </rows> </grid> ġekil 43: ZK da form oluşturma için örnek kod ġekil 44: ZK da oluşturulan örnek form 50

51 9.3. Üst Menu <zk> </zk> <menubar id="menubar" width="200px"> <menu label="project" src="/img/briefcase-16x16.png"> <menupopup> <menuitem src="/img/briefcasespark-16x16.png" label="new"onclick="alert(self.label)"/> <menuitem src="/img/briefcaseopen-16x16.png" label="open" onclick="alert(self.label)"/> <menuitem src="/img/disketteblack-16x16.png" label="save" onclick="alert(self.label)" /> <menuseparator /> <menuitem src="/img/dooropen-16x16.png" label="exit" onclick="alert(self.label)"/> </menupopup> </menu> <menu label="help" src="/img/questionmarkbutton-16x16.png"> <menupopup> <menuitem label="index" onclick="alert(self.label)" /> <menu label="about"> <menupopup> <menuitem label="about ZK" onclick="alert(self.label)" /> <menuitem label="about Potix" onclick="alert(self.label)" /> </menupopup> </menu> </menupopup> </menu> <menu src="/img/spyglass-16x16.png"> <menupopup><menuitem label="index" /></menupopup> </menu> </menubar> ġekil 45: ZK da üst menü oluşturma için örnek kod ġekil 46: ZK da oluşturulan örnek üst menü 51

52 9.4. Yan Menü <z:window title="otel Yöneticisi Paneli" border="normal"> <z:tabbox height="25%" width="100%" mold="accordion"> <z:tabs> <z:tab label="üyelik Bilgileri" /> <z:tab label="otel-oda İşlemleri" /> </z:tabs> <z:tabpanels> <z:tabpanel height="10%" > <z:vbox> <z:toolbarbutton label="üyelik Bilgilerim"/> <z:toolbarbutton label="üyelik Bilgilerimi Güncelle"/> <z:toolbarbutton label="oturumu Kapat"/> </z:vbox> </z:tabpanel> <z:tabpanel height="10%" > <z:vbox> <z:toolbarbutton label="odaları Göster"/> <z:toolbarbutton label="oda Ekle"/> <z:toolbarbutton label="otel Bilgileri Göster"/> <z:toolbarbutton label="otel Bilgileri Güncelle"/> </z:vbox> </z:tabpanel> </z:tabpanels> </z:tabbox> </z:window> ġekil 47: ZK da yan menü oluşturma için örnek kod ġekil 48: ZK da oluşturulan örnek yan menü 52

53 9.5. Hareketli Menu <zk> <div height="450px"> <fisheyebar id="fsb" style="position:absolute;margin:80px 150px;" attachedge="top" itemwidth="80" itemheight="80" itemmaxheight="160" itemmaxwidth="160" > <fisheye image="/img /FolderABlue-128x128.png" label="folder" onclick="alert(self.label)" /> <fisheye image="/img /ReadingGlass-128x128.png" label="reading Glasses" onclick="alert(self.label)" /> <fisheye image="/img /Briefcase-128x128.png" label="project" onclick="alert(self.label)" /> <fisheye image="/img /MailboxFlag-128x128.png" label=" " onclick="alert(self.label)" /> <fisheye image="/img /Globe-128x128.png" label="globe" onclick="alert(self.label)" /> <fisheye image="/img /Spyglass-128x128.png" label="spyglass" onclick="alert(self.label)" /> </fisheyebar> </div> </zk> ġekil 49: ZK da hareketli menü oluşturma için örnek kod ġekil 50: ZK da oluşturulan örnek hareketli menü 53

54 10. Sonuç CSS, JavaScript ve DOM bilgisine ihtiyaç duyan diğer Ajax çatılarının tersine ZK diğer teklonojileri öğrenmeden kolaylıkla Ajax tabanlı web uygulaması geliştirmenizi sağlar. Bunun için gerekli olan ZUML dili sadece biraz HTML bilgisine ihtiyaç duyar. ZK Engine geri kalan kısmı HTML, CSS ve JavaScript kodu üreterek ele alır ve yönetir. Ek olarak ZK web uygulamalarını masaüstü uygulamaları gibi geliştirmeye imkan sağlar. Çünkü tüm bileşenler sunucu tarafında yaratılıyor. Diğer bir deyişle istemci ve sunucu arasındaki bileşenler simetriktir. Ne zaman sunucuda çalışan bileşenler değişse sunucu tarafındaki tarayıcıda olan bileşenler de ZK Engine tarafından otomatik olarak günlenir. Bundan başka kullanıcı arayüzü bileşenlerinin davranışı kullanıcı işlemleri tarafından tetiklenir veya olaylar diğer bileşenlere gönderilip onlardan alınır. Bu sayade web uygulamaları daha anlaşılır hale gelir. 54

55 11. Tutorial Örnek Uygulama a. Uygulama ortamı Uygulamayı denemek için, Eclipse 3.4 (Ganymede), Apache Tomcat 6.0, Java 1.5+ / J2EE sisteminizde kurulu olmalıdır. Aslında örnek oldukça sade bir örnek olduğu için temelde elinizde herhangi bir JDK ve herhangi bir servlet container olması da yeterlidir. Ancak bundan sonraki anlatımlar Eclipse 3.4 ve Tomcat in kurulu olduğu varsayılacaktır b. Uygulamanın Tanımı Aşağıdaki uygulama herhangi bir dinamik web sayfasında ana sayfanın tasarımı için şablon niteliğindedir. Genelde anasayfalarda istenen sol tarafta bir üye giriş ekranı, üye giriş yaptıktan sonra o üyeye özgü bir menü, üst tarafta genel bir menü, orta kısımda ise işlem yapılmak üzere kullanıcıya sunulan sayfa gösterilecektir. Sayfalar arası geçiş esnasında yan taraftaki ve üst taraftaki menüler sabit kalıp sadece işlem yapılacak sayfalar değişecektir. Sayfanın sağ veya alt kısımlarına da benzer şekillerde başka menüler veya linkler eklenebilir. Sayfanın işleyişi şu şekildedir: 1. Kullanıcı sol taraftaki üye giriş panelinden kullanıcı adını, şifresini girerek sisteme giriş yapar. 2. Sisteme giriş yaptıktan sonra üye giriş menüsü kaybolup yerine kullanıcıya özgü bir menü gelir. 3. Kullanıcı kendine özgü menüdeki seçeneklerden işlem yapmak istediğini seçer. 4. Seçilen işleme uygun sayfa orta kısımda menülerden kalan yerde gösterilir. 5. Kullanıcı işlemini bu sayfa üstünden yapar. 55

56 11.1.c. Uygulamanın GerçekleĢtirimi page language="java" contenttype="text/html; charset=iso " pageencoding="iso " %> taglib uri=" prefix="zk"%> <jsp:usebean id="usernamekeeper" scope="session" class="java.lang.string" /> <jsp:scriptlet> session.setattribute( "Username", usernamekeeper ); </jsp:scriptlet> <html xmlns:z=" xmlns:xsi=" xsi:schemalocation=" > <head> <title>oturum Aç</title> </head> <body> <z:window width="100%" id="mainwindow" border="none" title=" Otel Rezervasyon Otomasyonu - OTROT" > <z:iframe style="position:absolute; left:24%; top:135px; height:100%; width:76%;" id="mainpanel" /> <z:window id="loginpanel" title=" Oturum Aç" border="normal" style="width:23%;" > 56

57 <form> <center> <z:captcha id="cpa" length="5" style="width:50%; height:100%;" /> <br/> <z:button label="yeniden Oluştur" width="100px" onclick="cpa.randomvalue();" /> </center> <z:separator bar="true"/> <table> <tr> <td> <z:label value="güvenlik Kodu"/> </td> <td> <z:textbox id="securitycode" cols = "10"/> </td> </tr> <tr> <td> <z:label value="kullanıcı Adı"/> </td> <td> <z:textbox constraint="/[a-za-z0-9]{2,10}/: Hata" id="username" name="username" cols="10" /> </td> 57

58 </tr> <tr> <td> <z:label value="şifre"/> </td> <td> <z:textbox constraint="/[a-za-z0-9]{2,10}/: Hata" id="password" cols = "10" /> </td> </tr> <tr> <td> <z:button id="loginbutton" label="oturum Aç"/> </td> </tr> </table> </form> <z:separator bar="true"/> <center> <br/> <z:button label="taşınabilir" width="100px" onclick="loginpanel.dooverlapped();" /> <z:button label="sabit" width="100px" onclick="loginpanel.doembedded();" /> </center> <z:caption image = "/Images/Login.jpg" /> 58

59 <zscript> import BusinessLogic.MemberService; import Action.LoginAction; import Form.LoginForm; private class LoginClickEventListener implements EventListener { public void onevent( Event event ) throws UiException { LoginAction loginaction = new LoginAction( ); LoginForm loginform = new LoginForm ( username.value, password.value, securitycode.value, cpa.value ); String panel = loginaction.execute( loginform ); usernamekeeper = username.value; loginpanel.visible memberpanel.visible = false; = false; } } session.setattribute( "Username", usernamekeeper ); if( panel.equals( "Member" ) ) memberpanel.visible = true; else loginpanel.visible = true; loginbutton.addeventlistener ( "onclick", new LoginClickEventListener( ) ); </zscript> </z:window> 59

60 <z:window id="memberpanel" title="üye Kullanıcı Paneli" style="position:absolute; width:200px;" border="normal" visible="false" > <z:tabbox height="25%" width="100%" mold="accordion"> <z:tabs> <z:tab selected="false" label="üyelik Bilgileri" /> <z:tab selected="false" label="rezervasyon" /> </z:tabs> <z:tabpanels> <z:tabpanel height="10%" > <z:vbox> <z:toolbarbutton label="üyelik Bilgilerim"> <attribute name="onclick"> { mainpanel.src = "ShowMember.jsp"; } </attribute> </z:toolbarbutton> <z:toolbarbutton label="üyelik Bilgilerimi Güncelle"> <attribute name="onclick"> { mainpanel.src = "UpdateMember.jsp"; } </attribute> </z:toolbarbutton> <z:toolbarbutton label="oturumu Kapat"> <attribute name="onclick"> { memberpanel.visible = false; loginpanel.visible = true; session.removeattribute( "Username" ); mainpanel.src = ""; } </attribute> </z:toolbarbutton> </z:vbox> 60

61 </z:tabpanel> <z:tabpanel height="10%" > <z:vbox> <z:toolbarbutton label="rezervasyon Yap"> <attribute name="onclick"> { mainpanel.src = "ShowHotelsForMember.jsp"; } </attribute> </z:toolbarbutton> <z:toolbarbutton label="rezervasyon Takip"> <attribute name="onclick"> { mainpanel.src = "ShowReservations.jsp"; } </attribute> </z:toolbarbutton> </z:vbox> </z:tabpanel> </z:tabpanels> </z:tabbox> </z:window> <z:caption image="/images/logo.jpg"/> </z:window> </body> </html> ġekil 51: ZK ile oluşturulan Örnek Uygulama-1 in kodu 61

62 ġekil 52: Ana sayfanın görünümü 62

63 ġekil 53: Taşınabilir kullanıcı giriş ekranı 63

64 ġekil 54: Kullanıcının giriş yapması 64

65 ġekil 55: Üst menülerin kullanımı 65

66 ġekil 56: Üye olma için kullanıcının doldurması gereken kayıt formu 66

67 ġekil 57: Üye olan kullanıcıya üyelik bilgilerinin gösterilmesi 67

68 ġekil 58: Üye olan kullanıcının üyelik bilgilerinin güncellenmesi 68

69 11.2. Örnek Uygulama a. Uygulama ortamı Uygulamayı denemek için, Eclipse 3.4 (Ganymede), Apache Tomcat 6.0, Java 1.5+ / J2EE sisteminizde kurulu olmalıdır. Aslında örnek oldukça sade bir örnek olduğu için temelde elinizde herhangi bir JDK ve herhangi bir servlet container olması da yeterlidir. Ancak bundan sonraki anlatımlar Eclipse 3.4 ve Tomcat in kurulu olduğu varsayılacaktır b. Uygulamanın Tanımı Aşağıdaki uygulama sisteme kayıtlı otelleri Google Map üstünden haritada göstermektedir. Oteller sisteme kayıt edilirken Dünya üzerindeki enlem ve boylam bakımından koordinatları ile belirtilir. Daha sonra bu koordinatlar kullanılarak oteller harita üstünde gösterilir. 69

70 11.2.c. Uygulamanın GerçekleĢtirimi page language="java" contenttype="text/html; charset=iso " pageencoding="iso " %> taglib prefix="zk" uri=" %> taglib prefix="s" uri="/struts-tags" %> taglib prefix ="bean" uri = "/WEB-INF/tags/struts-bean.tld" %> <%@ taglib prefix="html" uri="/web-inf/tags/struts-html.tld" %> <%@ taglib prefix="logic" uri="/web-inf/tags/struts-logic.tld" %> <html xmlns:z=" xmlns:xsi=" xsi:schemalocation=" > <head> <title>otel Ara</title> <script type="text/javascript" src= " DAbAumS9tV5fxTwM0brOpm-All5BF6PoaKBxRWWERSynObNOWSyMNmLGAMZAO1WkDUubA" > </script> </head> <body> <z:window id="searchhotel" title=" Otel Ara" border="normal"> <zscript> import BusinessLogic.GeneralUserService; import java.util.list; GeneralUserService generaluserservice = new GeneralUserService( ); List hotels = generaluserservice.gethotels( ); </zscript> <z:window title="otrot Harita" width="100%"> <center> 70

71 <z:div style="border: 1px solid red;margin-top:10px; margin-bottom:20px" if="${empty sessionscope.gmapskey}" > Lütfen rezervasyon yapmak istediğiniz oteli harita üstünden seçiniz. </z:div> <z:grid width="500px"> <z:rows> <z:row> <z:textbox width="400px" id="target"/> <z:button width="50px" label="ara"/> </z:row> </z:rows> </z:grid> </center> <z:vbox> <z:gmaps > id ="mymap" lat =" " lng =" " width ="500px" height ="500px" continuouszoom ="true" doubleclickzoom ="true" enablegooglebar ="true" draggable ="true" droppable ="true" focus ="true" showoverviewctrl ="true" showscalectrl ="true" showzoomctrl ="true" enabledragging ="true" scrollwheelzoom ="true" showsmallctrl ="true" showlargectrl ="true" showtypectrl ="true" <attribute name="onmapmove"> mylat.setvalue(self.getlat()); 71

72 mylng.setvalue(self.getlng()); </attribute> <attribute name="onmapzoom"> myzoom.setvalue(self.getzoom()); </attribute> <attribute name="onmapclick"> import org.zkoss.gmaps.*; import org.zkoss.gmaps.event.*; Gmarker gmarker = event.getgmarker(); if (gmarker!= null) gmarker.setopen(true); mylat.value = event.getlat(); mylng.value = event.getlng(); </attribute> <z:gmarker foreach="${hotels}" lat="${each.hotellocation.latitude}" lng="${each.hotellocation.longitude}" > <attribute name="content"> Teşekkürler, rezervasyon yeriniz seçildi. </attribute> </z:gmarker> </z:gmaps> </z:vbox> </center> </z:window> </z:window> </body> </html> ġekil 59: ZK ile oluşturulan Örnek Uygulama-2 nin kodu 72

73 ġekil 60: ZK ile oluşturulan Örnek Uygulama-2 73