EGE ÜNİVERSİTESİ BİLGİSAYAR MÜHENDİSLİĞİ SUNUCU YAZILIM TEKNOLOJİLERİ LABORATUAR PROJESİ JAVA SERVER FACES

Transkript

1 EGE ÜNİVERSİTESİ BİLGİSAYAR MÜHENDİSLİĞİ SUNUCU YAZILIM TEKNOLOJİLERİ LABORATUAR PROJESİ JAVA SERVER FACES Öğretim Görevlisi: Rıza Cenk ERDUR Araştırma Görevlisi: Tahir Emre KALAYCI Grup Üyeleri Murat ÖZTÜRK Halit YURTSEVER Rahman Çağdaş TURHAN Mehmet Ali BİLİCİ Muhammet ÖZCAN Sinem TAKMAZ Pelin ALPAĞUT Pınar SOLAK Gizem YILMAZ Ege Üniversitesi 2010

2 İçindekiler JAVA SERVER FACES ANAÇATASI KULLANARAK BİR WEB UYGULAMA GELİŞTİRME Java Server Faces Tanımı Eclipse Ortamında JSF... 4 Kurulması Gereken Dosyalar... 4 Kurulum... 4 Konfigürasyon Uygulama Geliştirme Adımları Kaynaklar

3 JAVA SERVER FACES ANAÇATASI KULLANARAK 1. Java Server Faces Tanımı BİR WEB UYGULAMA GELİŞTİRME JavaServer Faces(JSF), güçlü ve dinamik web uygulamaları geliştirmeyi kolaylaştıran, web tabanlı ara yüzler hazırlamak için Model-View-Controller (MVC) yapısına uygun olarak geliştirilmiş bir anaçatıdır. MVC örüntüsünün uygulanmasının event mekanizması ile mantığı üzerine kurulmuş bir API' dir. JSF swing gibi bir takım standart bileşenler (butonlar, linkler, seçim kutuları gibi) ya da özelleştirilmiş bileşenler oluşturmak için model sunmasının yanında istemci taraflı olayların (event) işlenmesi için yöntemler sunar ve ayrıca tool kullanma desteği vardır. Java için birçok web arayüz anaçatıları bulunmasına karşın JavaServer Faces birçok sebepten dolayı öne çıkmaktadır. JSF java community standardıdır. JavaBean bileşenleri paradigmasının, web arayüz tasarımında kullanılmasına olanak verir. JSF, piyasadaki birçok frameworkün iyi yönleri alınarak tasarlanmıştır. JSF nin uygulamanın davranışı ile sunumu arasında net bir ayrım sağlaması web tabanlı uygulamaların geliştirilmesi için çok büyük bir avantaj sağlamıştır. Sadece Java Server Pages (JSP) teknolojisi kullanılarak bir dereceye kadar bu ayrımı sağlamak mümkün olsa da, JSP nin kullanıcı arayüzü nesnelerine özel HTTP çağrılarını yanıtlayamaması ya da durum (state) bilgisini kolayca koruyup yönetememesi gibi eksiklikleri nedeniyle JSP üstüne kurulu daha özelleşmiş bir çatıya gereksinim duyulmuştur. JSF sunucu-taraflı bir kullanıcı arayüzü olarak temelde aşağıdaki özellikleri sağlamaktadır: Kullanıcı arayüzü nesnelerinin sayfa üzerine basit tag lar ile kolayca yerleştirimi Bu nesneler tarafından üretilen olayların sunucu tarafında uygulama koduyla otomatik eşleştirimi Kullanıcı arayüzü içeriğinin sunucu-taraflı veriye bağlanması Nesnelerin durumunun sunucu istemlerinden daha uzun ömürlü olarak tutulabilmesinin sağlanması Kullanıcı girişlerinin geçerlenmesi konusunda geniş destek JSF, doğrudan Servlet API si üzerine inşa edilmiş bir çatı olarak JSP dışında başka herhangi bir sunum aracına da destek vermektedir. Hazır JSP Tag kütüphanesinin bulunması nedeniyle bu projede JSP arayüzü tercih edilmiştir. Genel hatlarıyla bakıldığında bir JSF uygulaması aşağıdaki öğelerden oluşmaktadır: JSP sayfaları Backing Beans Uygulama konfigürasyon kaynak dosyası (faces-config.xml) Deployment Descriptor (web.xml) Özel (Custom) nesneler (Bileşenler (Components), Geçerleyiciler (Validators), Dönüştürücüler (Converters), ve Dinleyiciler (Listeners)) Özel (Custom) etiketler (Tags) (Bileşenleri sayfa üzerinde gösterebilmek için) JSF,JSP ve Servlet ların üzerine kurulmuştur. Bu var olan teknolojilerle MVC yaklaşımını birleştirir. 2

4 JSF Mimarisi JSF yaşam döngüsüne bakıldığında, gelişmiş arayüz desteği nedeniyle basit bir JSP döngüsünden daha çok aşama içerdiği görülmektedir: JSF yaşam döngüsü JSF yaşam döngüsü esas olarak altı ana adımdan oluşmaktadır. Bir JSF sayfası ilk yüklendiğinde sadece Restore View ve Render Response aşamaları çalıştırılmaktadır. Sayfa üzerindeki işlemler sonucu sayfa yeniden çalıştırıldığında ise tüm aşamalar gerçekleştirilmektedir. 3

5 JSF de kullanıcı girdilerinin gerçerlemesi (validation) ayrı bir adımdır ve önceden tanımlanan geçerleme nesneleri ve kriterleri tarafından kontrol edilir. Geçerlemeden geçemeyen girdiler için hata mesajları otomatik olarak yaratılarak sayfa üzerinde nesneyle ilişkili olarak istenildiği gibi yerleştirilebilmektedir. JSF aynı zamanda hata veya başka bir nedenle sayfanın yenilenmesi durumunda form üzerindeki kullanıcı girdilerinin otomatik olarak eski durumlarını korumalarını sağlayarak geliştirmeye kolaylık kazandırmaktadır. Projemizde Java Server Faces çatısının birleştirici ve esnek modeli, geliştirme ortamının desteği ile birleştirilerek, geliştirme sürecinin tüm aşamaları boyunca harcanan emeğin azaltılması, kontrol akışının kolayca yönetilmesi ve ortak bir kullanıcı arayüzü modeli sunulabilmesi sağlanmıştır. 2. Eclipse Ortamında JSF Kurulması Gereken Dosyalar Java SE 6 SDK ( Eclipse IDE for Java EE Developers ( Apache Tomcat 6.0 ( JSTL 1.2 ( Mojarra 1.2 ( Not: Gerekli programlara yanlarında verilen linklerden ulaşabilirsiniz, ancak size verdiğimiz klasörde tümü mevcut olduğu için bu linklerden indirmenize şu an için gerek yoktur. Kurulum İndirdiğiniz klasör içindeki jdk-6u20-windows-i586.exe dosyası çalıştırılarak C:\Program Files\Java (default) klasörü içine kurulur. İndirdiğiniz klasör içindeki jstl-1.2.jar dosyası Apache Tomcat in kurulu olduğu dizindeki lib klasörü içine koyulur. Konfigürasyon 1) Eclipse klasörü içindeki eclipse.exe dosyası çalıştırılıp gerek görülen dizin workspace olarak seçilir. 2) Alt kısımdaki alandan Servers sekmesi seçilip alana sağ tıklayıp New -> Server seçilir. Açılan pencereden server type olarak Tomcat v6.0 Server seçilerek Next butonuna tıklanır. Sonraki sayfada Browse butonuna tıklanarak Apache Tomcat in kurulu olduğu dizin girilir (Mesela C:\Program Files\Java\apache-tomcat ) ve Finish butonuna tıklanır. Böylece Tomcat Eclipse e entegre edilmiş olur. 4

6 3) Servers sekmesinden Tomcat server a çift tıklanarak server konfigürasyonuna ulaşılır. Sol tarafta Server Locations altındaki Use Tomcat Installation seçeneği seçilir. Böylece Eclipse Tomcat üzerinde tam kontrol sağlar ve Eclipse içinden Tomcat Manager ile varsayılan Tomcat anasayfası olan adresine ulaşılabilir. Ayrıca Server options altındaki Publish module contexts to separate XML files seçeneği seçili olmalıdır. Sağ taraftaki Ports altında HTTP/1.1 portu(varsayılan 8080) olmalıdır. 5

7 4) Ctrl+S ile yapılan ayarları kaydettikten sonra Tomcat Server a sağ tıklayıp Start seçeneği seçilerek server çalıştırılır. Bu sırada güvenlik duvarı uyarılarında izin ver seçilir. 5) Tarayıcıdan adresine gidilir. Eğer Tomcat anasayfası açılıyorsa, Tomcat başarılı bir şekilde kurulmuştur demektir. 3. Uygulama Geliştirme Adımları 1) File -> New -> Dynamic Web Project diyoruz. 2) Şimdiki adım çok önemli. Öncelikli olarak projeye bir isim veriyoruz (BookShop). Target Runtime kısmı daha önce tanımladığımız server a ayarlanmış durumda olacaktır. Dynamic web module version u 2.5 olarak seçiyoruz. Configuration u da JavaServer Faces v1.2 Project olarak değiştirip Next diyoruz. 6

8 3) Sonraki iki ekranı da Next diyerek geçiyoruz. 4) Burası JSF Library lerini ekleyeceğimiz ekran. JSF Implementation Library alanında bulunan geniş metin alanının yanında üstte bulunan renkli butona tıklayıp New butonuna tıklıyoruz. Açılan kutucuktan JSF1.2 benzeri bir isim verip Ok diyoruz. Ardından Add JARs butonuna tıklayıp, indirmiş olduğumuz klasörden /mojarra-1.2_14-b01-fcs/lib yolunu izleyerek jsfapi.jar ve jsf-impl.jar jar larını ekleyip Ok diyoruz. 7

9 8

10 5) Sonraki ekrandan Include libraries with this application a da tik atıp Finish diyoruz. Böylece JSF projemiz oluşturulmuş oluyor. 9

11 6) Şu anda Project Explorer panelinde oluşturduğumuz BookShop adlı proje görünür durumda. 7) Şimdi örnek olması amacı ile projeye bir JSF sayfası ekliyoruz. Bunun için proje üzerinde sağ tıklayıp New > JSP diyoruz. 8) Açılan ekranda WebContent in seçili olduğundan emin olup dosya ismini de index olarak belirleyip Next diyoruz. 9) Bu ekrandan da JSF sayfamız için şablon olacak dosya yapısını seçmemiz gerekiyor. New JavaServer Faces (JSF) Page (html) i seçip (en üstteki) Finish diyoruz. 10

12 10) Açılan dosya içerisine (index.jsp) size verdiğimiz index.doc dosyasındaki kodları aynen kopyalayıp yapıştırıyoruz. Bu işlemi aşağıda görünen jsp uzantılı dosyalar için tekrarlıyoruz. 11

13 11) Proje içerisine size verdiğimiz klasördeki ilgili kod dosyalarını (shop paketinin tümü ve facesconfig.xml dosyası) yukarıdaki gibi uygun yerlere kopyalıyoruz. 12) Şimdi projede yer alan sınıfları inceleyelim: Book.java BookList.java Id, author, title, owner gibi özellikleri içeren sınıf. Kitapların tutulması için gerekli olan koleksiyonu barındıran sınıf. SampleDB.java Kitapların eklenmesi, ödünç verilmesi, silinmesi gibi işlemleri veritabanı düzeyinde ele alan sınıf. Projede veritabanı kullanılmadığı için gerekli işlemleri koleksiyon üzerinde gerçekleştiriyor. Veritabanı işlemlerini simule eden sınıf. User.java Kullanıcıyı temsil eden sınıf. Kullanıcı adını içeriyor. 13) Şimdi de ekranları inceleyelim. Index.jsp Admin.jsp EditBook.jsp AvailableBooks.jsp Info.jsp Karşılama ekranı. Kullanıcıdan kullanıcı adı isteniyor. Yeni bir kitap ekleme, var olan bir kitabı silme, değişiklik yapma gibi işlemlerin yapılabildiği admin paneli. Kitaplar üzerinde değişiklik yapan ekran. Kullanıcıya tüm kitapları listeleyen ekran. Kullanıcı bu ekranda ödünç alınmış olan kitapları görebilir ya da ödünç alma işlemini gerçekleştirebilir. Kullanıcıya ödünç alma durumu hakkında bilgi alan sınıf. 14) Şimdi aşağıdaki Book.java sınıfını inceleyelim. public void initbook(actionevent event) { } // init the book object this.setbook(new Book()); public void selectbook(actionevent event) { SampleDB sampledb = new SampleDB(); UIParameter component = (UIParameter) event.getcomponent().findcomponent("editid"); long id = Long.parseLong(component.getValue().toString()); 12

14 } this.setbook(sampledb.loadbookbyid(id)); public void savebook(actionevent event) { SampleDB sampledb = new SampleDB(); } sampledb.savetodb(this.getbook()); public void deletebook(actionevent event) { SampleDB sampledb = new SampleDB(); UIParameter component = (UIParameter) event.getcomponent().findcomponent("deleteid"); long id = Long.parseLong(component.getValue().toString()); sampledb.deletebookbyid(id); } public void oduncal(actionevent event) { SampleDB sampledb = new SampleDB(); UIParameter component = (UIParameter) event.getcomponent().findcomponent("borrowid"); UIParameter component2 = (UIParameter) event.getcomponent().findcomponent("user"); long id = Long.parseLong(component.getValue().toString()); String user = component2.getvalue().tostring(); } this.setbook(sampledb.loadbookbyid(id)); this.available = false; this.owner = user; savebook(event); 15) Bu metotlar görüldüğü üzere ActionEvent isimli bir nesneyi parametre olarak almakta. Bu nesneler ekranlarda tıklanan butonların oluşturduğu olay nesneleridir. Metotlara gönderilecek olan parametreler bu nesne üzerinde taşınmaktadır. UIParameter component = (UIParameter) event.getcomponent().findcomponent("borrowid"); Satırında görüldüğü gibi parametreler event nesnesinden elde edilmektedir. Yukarıdaki metotlarda ortak olaylar event nesnesinden gerekli parametrelerin elde edilmesi ve sonrasında bu parametreler ile klasik saklama, silme, değiştirme işlemlerinin gerçekleştirilmesidir. 16) Şimdi de navigasyon durumlarını inceleyelim. 13

15 <navigation-rule> <description>login</description> <from-view-id>/index.jsp</from-view-id> <navigation-case> <from-outcome>login</from-outcome> <to-view-id>/availablebooks.jsp</to-view-id> </navigation-case> </navigation-rule> <navigation-rule> <description>list of books</description> <from-view-id>/admin.jsp</from-view-id> <navigation-case> <from-outcome>editbook</from-outcome> <to-view-id>/editbook.jsp</to-view-id> </navigation-case> </navigation-rule> <navigation-rule> <description>add or edit a book</description> <from-view-id>/editbook.jsp</from-view-id> <navigation-case> <from-outcome>listbooks</from-outcome> <to-view-id>/admin.jsp</to-view-id> <redirect /> </navigation-case> </navigation-rule> <navigation-rule> <description>borrow book</description> <from-view-id>/availablebooks.jsp</from-view-id> <navigation-case> <from-outcome>info</from-outcome> <to-view-id>/info.jsp</to-view-id> <redirect /> </navigation-case> </navigation-rule> <navigation-rule> <description>back to home page</description> <from-view-id>/info.jsp</from-view-id> <navigation-case> <from-outcome>back</from-outcome> <to-view-id>/availablebooks.jsp</to-view-id> <redirect /> </navigation-case> </navigation-rule> 14

16 Görüldüğü gibi 5 adet navigasyon kuralı tanımlanmıştır. Bu kurallar faces-config.xml dosyasında yer alır ve jsp sayfalarının kendi aralarındaki yönlenme işlemlerini tanımlarlar. Örneğin ilk navigasyon kuralını ele alırsak; <navigation-rule> <description>login</description> <from-view-id>/index.jsp</from-view-id> <navigation-case> <from-outcome>login</from-outcome> <to-view-id>/availablebooks.jsp</to-view-id> </navigation-case> </navigation-rule> Burada anlatılan index.jsp sayfasında login isimli action oluşursa availablebooks.jsp sayfasına yönlenilmesi gerektiğidir. Bunun için index.jsp dosyasında aşağıdaki satır yer almaktadır. <h:commandbutton value="login" action="login"> Bu satırda anlatılmak istenen ise, Login butonuna basıldığında bir login action ı üretileceğidir. Sonuç olarak Login butonuna basıldığında availablebooks.jsp sayfasına yönlenilecektir. Diğer navigasyon kurallarını da aynı mantıkla kendiniz inceleyebilirsiniz. 17) Şimdi de örnek bir action metodunun nasıl tetiklendiğini görelim: Admin.jsp dosyasındaki <h:commandlink id="delete" action="listbooks" 15

17 actionlistener="#{bookbean.deletebook}"> <h:outputtext value="delete" /> <f:param id="deleteid" name="id" value="#{book.id}" /> </h:commandlink> Satırlarına bakacak olursak Delete linkine tıklandığında listbooks isimli action oluşacaktır. Daha sonra Book sınıfındaki deletebook metodu tetiklenir. Metoda parametre olarak silinecek kitabın id numarası geçirilmiştir. Metoda bakacak olursak; public void deletebook(actionevent event) { SampleDB sampledb = new SampleDB(); UIParameter component = (UIParameter) event.getcomponent().findcomponent("deleteid"); long id = Long.parseLong(component.getValue().toString()); sampledb.deletebookbyid(id);} Görüldüğü gibi event nesnesinden silinecek olan kitabın id numarası çekilir ve kitabın silinmesi için veritabanı işlemlerini gerçekleştiren sınıfta yer alan deletebookbyid metodu çağırılır. Sonuçta silme işlemi gerçekleştirilmiş olur. 18) SampleDB sınıfında kitapların koleksiyondan silinmesi ve eklenmesine yönelik klasik persistency işlemleri yer almaktadır. Bu metodları kendiniz inceleyebilirsiniz. 19) Şimdi programın çalıştırılmasına geçelim. Programın çalıştırılması için index.jsp dosyasına sağ tıklayarak Run On Server seçeneğini seçin. Karşınıza gelen ekrandan kullanıcı adınızı girip Login butonuna basın. 16

18 20) Görüldüğü gibi tüm kitaplar listelenmiştir. Durumu uygun olan kitaplardan biri için Borrow butonuna basın. Kitabı başarıyla ödünç aldığınıza dair bir bilgilendirme ekranı ile karşılaşacaksınız. 21) Şimdi admin.jsp sayfasını çalıştırın. Ekranda ödünç alınan kitapları kimlerin aldığını görecek, isterseniz yeni kitap ekleyip silebileceksiniz. Herhangi bir kitap için Edit e tıklayın. Gelen ekranda kitabın yazarını değiştirin ve Save butonuna basın. Yaptığınız değişikliği listede görebileceksiniz. 17

19 22) Şimdi aynı ekranda Add Book linkine tıklayın. Gelen ekranda istenen bilgileri doldurun ve Save butonuna basın. Eklediğiniz kitabın listeye eklendiğini göreceksiniz. 4. Kaynaklar