PrimeFaces – Otomatik Tamamlama (AutoComplete) ve InputTextArea Bileşeni

Merhaba arkadaşlar. Bu yazıda otomatik tamamlama ve InputTextArea bileşenini anlatmaya çalışacağım.

Otomatik Tamamlama(AutoComplete)

Otomatik tamamlama özelliğinden kasıt inputText bileşenine bir şey yazmaya başladığınızda karşınıza bazı önerilerin çıkmasıdır. Örneğin bir formda bildiği programlama dillerini kişiye sorduğumuzda kişi J’ye basınca Java, C’ye basınca C,C++,C# dilerinin çıkmasını sağlayabiliriz. Şimdi örneğimize bakalım.

index.xhtml Kodu

<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Otomatik Tamamlama Örneği</title>
    </h:head>
    <h:body>
        <h:form>
            <p:outputLabel value="Bildiğiniz programlama dilini giriniz: "/>
            <p:autoComplete value="#{tamamla.dil}" completeMethod="#{tamamla.diliTamamla}"/>
        </h:form>
    </h:body>
</html>

PrimeFaces’ta kullanıcıya öneriler çıkmasını sağlayan bileşenin ismi autoComplete‘tir. Bu bileşen ekrana bir inputText basar ve completeMethod ile verilen metotdan dönen listedeki verilerden uygun olanı öneri olarak bize sunar.

Tamamla.java Kodu

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import java.util.*;
@ManagedBean
@RequestScoped
public class Tamamla {
private static final String dilStringi="Java,C++,C#,C,Python";  
private static final String dilDizisi[]=dilStringi.split(",");
private String dil;

    public void setDil(String dil) {
        this.dil = dil;
    }

    public String getDil() {
        return dil;
    }

    public List<String> diliTamamla(String dilBaslangici)
    {
        List<String> eslesmeler=new ArrayList<String>();
        for(String muhtemelDil:dilDizisi)
        {
            if(muhtemelDil.toUpperCase().startsWith(dilBaslangici.toUpperCase()))
            {
            eslesmeler.add(muhtemelDil);
            }
        }
        return eslesmeler;
    }
}

Java kodumuz içinde inputText’e girilen verinin tutulacağı bir dil stringini tanımladık. İşlemi yapacak kodumuz ise diliTamamla metodumuz. Bu metot önce inputTexte girilen programlama dili isminin ilk harfini alıyor ve dilDizisi dizisi içindeki dillerin ilk harfleri ile karşılaştırıyor. Eşleşenleri eslemeler listesine alıyor ve return ederek ekrana öneri olarak çıkmasını sağlıyor.

Ekran çıktılarına da bakalım.

InputTextArea Bileşeni

JSF ile form oluşturduğumuzda kullanıcının adres bilgisini almak istediğimizde inputTextArea bileşenini kullanırız. PrimeFaces ile bize sunulmuş olan inputTextArea bileşeninde biz otomatik tamamlama özelliğini kullanabiliriz, boyutunun girilen yazıya göre değişmesini sağlayabiliriz, girilebilecek harf sayısnı sınırlayabiliriz. Örneğimizin kodları şu şekilde:

index.xhtml Kodu

<!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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"> 

<h:head>
<title>PrimeFaces Dersleri</title>
</h:head> 
<h:body> 
       <h:form>              
    <h3 style="margin-top: 0">AutoComplete</h3>
    <p>Following inputTextarea send a query for each word that has at least 4 characters to the complete method. Try typing "PrimeFaces".</p>
    <p:inputTextarea rows="10" cols="50" completeMethod="#{inputTextAreaView.completeArea}" />
    
    
    
    <h3>AutoResize</h3>
    <p:inputTextarea rows="6" cols="33" />
 
    <h3>Remaining Chars</h3>
    <p:inputTextarea rows="5" cols="30" counter="display" maxlength="10" counterTemplate="{0} characters remaining." autoResize="false" />
    <h:outputText id="display" />
       </h:form>
</h:body> 
</html>

index.xhtml kodu içinde ekrana 3 inputTextArea basan kod yazılı. Birinci inputTextArea otomatik tamamlama özelliğini göstermek için, ikinci inputTextArea değişken boyut özelliğini göstermek için, üçüncü inputTextArea ise girilen harf sayısının sınırlandırılabildiğini göstermek için yazılmıştır.

InputTextAreaView.java Kodu

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import java.util.ArrayList;
import java.util.List;
@ManagedBean
@RequestScoped
public class InputTextAreaView {
	public List<String> completeArea(String query) {
        List<String> results = new ArrayList<String>();
         
        if(query.equals("PrimeFaces")) {
            results.add("PrimeFaces Rocks!!!");
            results.add("PrimeFaces has 100+ components.");
            results.add("PrimeFaces is lightweight.");
            results.add("PrimeFaces is easy to use.");
            results.add("PrimeFaces is developed with passion!");
        }
        else {
            for(int i = 0; i < 10; i++) {
                results.add(query + i);
            }
        }
         
        return results;
        }
}

Sadece otomatik tamamlama özelliği için yazılan Java kodunda kullanıcı PrimaFaces yazısını girdiğinde ekrana PrimeFaces ile ilgili yazıların çıkmasını sağlandı.Aksi halde girilen yazıya bir takım eklemeler yapılarak öneri olarak ekrana çıkması sağlandı.

Bu yazımızla PrimaFaces teknolojisinde kod yazmaya başladık. Darısı bitirmenin başına olur inşaAllah 🙂 .

Gelecek yazıda görüşmek üzere hoşçakalın.

PrimeFaces – Otomatik Tamamlama (AutoComplete) ve InputTextArea Bileşeni

Yorum Ekle

Yorum Yap X

Benzer Yazılar

Yorum Ekle

Yorum Yap X