JSF Ders28 - Döngü Kullanımı (ui:repeat) ve Koşullu Çıktı Üretimi
Döngü Kullanımı
JSF'de döngü kullanımı ui:repeat ögesiyle yapılır. ui:repeat ögesinin örnek bir kullanımı aşağıda belirtilmiştir.
<ui:repeat var=”i” value=”#{sinifIsmi.degiskenIsmi}”>
#{i} </ui:repeat> |
Örneğin, value kısmında bir dizi tutulduğu varsayıldığında yukarıdaki kod bu dizinin her bir elemanının tek tek yazdıracaktır.
ui:repeat ögesinin kullanılabilmesi için aşağdaki isim uzayını .xhtml dosyasına eklemeyi unutmayın.
- xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
ui:repeat ogesinin alabileceği bir çok parametre vardır. Bunlar aşağıda listelenmiştir.
- varStatus : last,first,even,odd gibi özel argüman geçirilebilen parametre.
- offset : Döngünün başlayacağı indisi belirtir.
- size : Döngünün toplam adım sayısını belirtir.
- step : Döngünün kaçar adımla ilerleyeceğini belirtir.
Bir çıktının koşula bağlı olarak üretilmesi için birçok seçenek vardır. Bu seçenekler aşağıda listelenmiştir.
2. <h:outputText value="#{....}" rendered="#{....kosul}"/> 3. <ui:fragment rendered="#{....kosul}"> <!-- yazdirilacak cikti--> </ui:fragment> |
Bunların tamamını içeren bir örnek aşağıda verilmiştir.
Test.java
package test; import javax.faces.bean.ManagedBean; @ManagedBean public class Test { private String[]sayilar; public Test(){ sayilar=new String[20]; for(int i=0;i<20;i++){ sayilar[i]=String.valueOf(i+1); } } public String[] getSayilar() { return sayilar; } public void setSayilar(String[] sayilar) { this.sayilar = sayilar; } }
index.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"> <h:head> <title>index.xhtml</title> <h:outputStylesheet library="css" name="stil.css"/> </h:head> <h:body> <div class="p1"> <h1>ui:repeat</h1> <p class="red">1-20 arasi sayilar</p> <ui:repeat var="sayi" value="#{test.sayilar}"> #{sayi} </ui:repeat> <br/><hr/><br/> <p class="red">5-20 arasi sayilar (offset)</p> <ui:repeat var="sayi" offset="4" value="#{test.sayilar}"> #{sayi} </ui:repeat> <br/><hr/><br/> <p class="red">1-20 arasi tek sayilar (step)</p> <ui:repeat var="sayi" step="2" value="#{test.sayilar}"> #{sayi} </ui:repeat> <br/><hr/><br/> <p class="red">1-10 arasi sayilar (size)</p> <ui:repeat var="sayi" size="10" value="#{test.sayilar}"> #{sayi} </ui:repeat> <br/><hr/><br/> <p class="red">1-20 arasi sayilar (varStatus)</p> <ui:repeat var="sayi" varStatus="status" value="#{test.sayilar}"> #{sayi} <h:outputText value="," rendered="#{!status.last}"/> <h:outputText value="." rendered="#{status.last}"/> </ui:repeat> <br/><hr/><br/> </div> <div class="p2"> <h1>ui:fragment</h1> <p class="red">1-20 arasi çift sayilar</p> <ui:repeat var="sayi" varStatus="status" value="#{test.sayilar}"> <ui:fragment rendered="#{status.odd}" > #{sayi} </ui:fragment> </ui:repeat> <br/><hr/><br/> <h1>\#{..} ? .. : ..</h1> <p class="red">1-20 arasi renkli sayilar</p> <ui:repeat var="sayi" varStatus="status" value="#{test.sayilar}"> <h:outputText class="#{status.odd ? 'red':'blue'}" value="#{sayi} " /> </ui:repeat> <br/><hr/><br/> <h1>outputText rendered</h1> <h:outputText value="1 2 3 4 " rendered="#{9>0}" escape="false"/> </div> </h:body> </html>
stil.css
@CHARSET "UTF-8"; .red { color: red; } .blue{ color:blue; } .p1,.p2{ display:inline-block; vertical-align:top; border:5px dotted blue; padding:10px; padding-left:20px; padding-right:20px; }
Yorumlar
Yorum Gönder