PrimeFaces-InPlace Kullanımı

Merhaba arkadaşlar. Bu yazımızda PrimeFaces’ın bir yazı üstüne tıklandığında değişiklik yapılmasını sağlayan bileşeni olan InPlace bileşeninin kullanımını öğreneceğiz. Bu bileşen ile birlikte PrimeFaces’ın input (girdi/bilgi girişi) bileşenlerini bitirmiş olacağız. Gelecek yazıda tüm input bileşenlerini kullanarak bir örnek yapacağız ve örneğimiz veri tabanına kayıt yapabiliyor olacak. Henüz karar veremedim ama o örneği şu sıralar uğraştığım Hibernate ya da JPA ile veri tabanına kayıt yapabiliyor şekilde yazmayı düşünüyorum.

InPlace bileşeni içinde JSF ve PrimeFaces’a ait form bileşenlerini kullanarak işlerimizi görebiliriz. Bu bileşen bizlere istediğimiz form bileşenini kullanma hakkını sunuyor. Şöyle ki az sonra yapacağımız örnek içinde inputText ve selectOneMenu bileşenlerini kullanabildiğimizi göreceksiniz. Şimdi örnek uygulamamızın kodlarına ve ekran çıktılarına bakalım. Bu bileşeni örneklendirmek için bir Java sınıfı yazmamıza gerek yok. Bu nedenle işimizi sadece xhtml ile bitireceğiz. Şimdi kodumuza ve ekran çıktımıza 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"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form>
            <h:panelGrid columns="2">
                
            <h:outputText value="Temel Kullanım  "/>
            <p:inplace id="temelKullanim" editor="true">
                <p:inputText value="#{inPlaceKullanimi.temelKullanim}"/>
            </p:inplace>
            
            <h:outputText value="Çift Tıklama İle Kullanım"/>
            <p:inplace id="ciftTiklama" label="Meşhur Mekanlar" event="dblclick">
                <p:selectOneMenu >
                    <f:selectItem itemLabel="Ayasofya" itemValue="Ayasofya"/>
                    <f:selectItem itemLabel="Sultan Ahmet" itemValue="Sultan Ahmet"/>
                    <f:selectItem itemLabel="Eyüp Sultan" itemValue="Eyüp Sultan"/>
                </p:selectOneMenu>
            </p:inplace>
            
            <h:outputText value="Resim Gösterme"/>
            <p:inplace editor="true" id="resim" label="Resmi Göster">
                <h:graphicImage name="PrimeFaces.png" library="images"/>
            </p:inplace>
            </h:panelGrid>
        </h:form>
    </h:body>
</html>

<?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>Facelet Title</title>

</h:head>

<h:body>

<h:form>

<h:panelGrid columns="2">

<h:outputText value="Temel Kullanım "/>

<p:inplace id="temelKullanim" editor="true">

<p:inputText value="#{inPlaceKullanimi.temelKullanim}"/>

</p:inplace>

<h:outputText value="Çift Tıklama İle Kullanım"/>

<p:inplace id="ciftTiklama" label="Meşhur Mekanlar" event="dblclick">

<p:selectOneMenu >

<f:selectItem itemLabel="Ayasofya" itemValue="Ayasofya"/>

<f:selectItem itemLabel="Sultan Ahmet" itemValue="Sultan Ahmet"/>

<f:selectItem itemLabel="Eyüp Sultan" itemValue="Eyüp Sultan"/>

</p:selectOneMenu>

</p:inplace>

<h:outputText value="Resim Gösterme"/>

<p:inplace editor="true" id="resim" label="Resmi Göster">

<h:graphicImage name="PrimeFaces.png" library="images"/>

</p:inplace>

</h:panelGrid>

</h:form>

</h:body>

</html>

Ekran Çıktıları

Uygulama çalıştığında bizi şöyle bir ekran karşılıyor.

Değiştirmek İçin Tıklayın yazısına tıkladığımızda bir inputText açılacak ve değerimizi girebileceğiz. Değer girişinin akabinde Tik işaretine tıklayarak girdiğimiz değeri kaydedicez. Çarpı işaretine tıkladığımızda ise girilen değer sıfırlanır.

Meşhur Mekanlar yazısına çift tıkladığımızda bize bir selectOneMenu listesi açılacak. Burada herhangi bir tik ya da çarpı işaretine ihtiyacımız yok. Seçilen değer direk kaydedilir.

Resmi Göster yazısına tıkladığımızda ise belirttiğimiz yoldaki resim açılacak. Tik ya da çarpı işaretine tıklayarak resmi kapatabiliriz. Resmi kapatabilmek için açıkçası bu yazıyı yazarken başka bir yol bulamadım. Eğer bulabilirsem sonraki yazılarımda çözümü sizlerle paylaşıcam.