Merhaba arkadaşlar,

Bu yazımızda sizlere JSF SetPropertyActionListener ve Primefaces autoComplete anlatacağım. Üzerinde çalışacağımız kodları bir inceleyelim öncelikle

index.xhtml

<?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"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Kodumun Dünyası</title>
    </h:head>
    <h:body>
        <p:growl id="msg" life="5000" showDetail="true" />

        <h:form>
            <p:panelGrid columns="2">
                <p:outputLabel value="Auto Complete :" />
                <p:autoComplete value="#{auto.text}" completeMethod="#{auto.textCmp}"  />
            </p:panelGrid>
            <p:commandButton action="#{auto.see()}" value="Tıkla" update=":msg" >
                <f:setPropertyActionListener target="#{auto.propery}" value="#{auto.text}" />
            </p:commandButton>
            </h:form>
    </h:body>
</html>

AutoCompleteClass.java

/*
 *
 * index.xhtml de kullandığımız bean
 *
 */
package com.edsoft.blogdeneme;

import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;

/**
 *
 * @author Yusuf ÖNDER
 */
@ManagedBean(name = "auto")
@ViewScoped
public class AutoCompleteClass {

    private String text;
    private String propery;

    public String getText() {
        return text;
    }

    public String getPropery() {
        return propery;
    }

    public void setText(String text) {
        this.text = text;
    }

    public void setPropery(String propery) {
        this.propery = propery;
    }

    public List<String> textCmp(String query) {
        List<String> list = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            list.add(query + i);
        }
        return list;
    }

    public void see() {
        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, propery, text));
    }
}

Şimdi index.xhtml üzerinden sırayla giderek ne yapacağımızı anlatalım. Amacımız kullanıcının girdiği bir değeri growl ile ona göstermek. Önceden de demiştim. Primefaces de inputText’in farklı versiyonları vardı.(InputMask, InputTextArea gibi) AutoComplete de bir inputText türevidir. Diğerlerinden farklı kılan temel özelliği completeMethod dur. Bu özellik, içinde List tipinde bir değişken döndüren bir method ile (bkz. autocompleteclass.java(textcmp metodu)) kullanıcıya olası tamamlanacak kelimeleri sunar. Keyup ile ilgili completeMethod tetiklenir ve sizin belirleyeceğiniz değerler döner. Biz bu örnekte kullanıcının girdiği değerin yanına 0 dan 10 a kadar sayılar koyarak geri dönüt vereceğiz. completeMethod tanımlanırken String query tipinde bir değer input olarak alınır. Buradaki query bizim girdiğimiz değeri temsil eder. Bu yüzden completeMethod tanımlanırken String tipinde bir değişken alınması gereklidir.

SetPropertyActionListener’a gelirsek bu bileşen bir jsf core üyesidir. Bu bileşen ile bean içerisinde bulunan bir değişkene bir değer ataması yaparız. target değerin atanacağı değişkeni, value ise değişkene atanacak değeri temsil eder. Biz burada butona tıklandığında autocomplete ile aldığımız text değişkenindeki değeri commandbutton tıklandığında propery değişkenine aktaracağız. Buton tıklandığında actionda tanımlı metot çalışacak ve bize growl ile ilgili bilgi dönecektir. Burada öncekilerden farklı olarak h:form dışında tanımlanmış bir growl bileşenine eriştik. h:form dışındaki bir bileşene erişmek için ya da h:form içerisinde fakat başka bir bileşen içerisindeki bir bileşene (dialog içindeki outputtext gibi) erişmek için “:” işareti kullanırız. Bu konuya ajax da değineceğim ama değinmemi beklemeden araştırabilirsiniz de 🙂

Evet arkadaşlar bu yazımı da böyle sonlandırıyorum umarım faydalı olmuştur bir daha ki yazımda görüşmek üzere esenlikle kalın.

NOT:Meraklı arkadaşlar için commandbuttondaki action u actionListener ile değiştirip çalıştırsınlar ve neyin neden değiştiğini inceleyip araştırsınlar 😉

Ekran Görüntüleri
Untitled

Untitled2

Facebook'dan yorumla