RichFaces - Temel Kavramlar
Bu bölümde, RichFaces'in bazı temel kavramlarını göreceğiz ve RichFaces'in AJAX isteklerinin ve diğer birçok işlevin işlenmesiyle nasıl başa çıktığını öğreneceğiz.
AJAX İsteği işleniyor
Daha önce belirtildiği gibi, RichFaces, herhangi bir AJAX kodu uygulamadan bile web uygulamasında AJAX işlevlerini etkinleştiren zengin UI bileşenleri sağlar. Tüm bu AJAX yetenekleri,a4:j etiket kitaplığı. <a4j:commandLink> , <a4j:commandButton>, <a4j:support>, ve <a4j:poll>geliştiricinin AJAX işlevlerini web uygulamasına eklemesine yardımcı olan dört etikettir. Sonraki bölümde etiket kitaplıkları hakkında daha fazla bilgi edineceğiz.
Kısmi Ağaç İşleme
Geleneksel bir AJAX uygulamasında, tüm giriş alanları bir ağacın farklı düğümleri olarak işlenir, ancak RichFaces'te ağaç düğümlerini kısmen gönderme ve gerekli alanları doğrulama seçeneğimiz vardır.
Bunu daha iyi anlamak için bir örnek ele alalım. HTML'de toplam beş öğe olduğunu varsayalım - "Ad", "Çalışan Kimliği", "Çalışan maaşı", "Çalışan Adresi" ve "Çalışan Departmanı". Artık yalnızca Çalışan kimliğini doğrulamak veya işlemek istiyorsunuz, bu RichFaces kullanılarak mümkün olabilir, ancak AJAX kullanılarak mümkün değildir. Tüm formu sunucuya göndermeniz gerekiyor. RichFaces, belirli bir bileşeni tanımlayabilen ve aynısını işleyebilen bir yürütme özelliği sağlar. Aşağıda, mevcut farklı yürütme öznitelik düzeyleri verilmiştir.
@all - Bu özellik tüm verilerinizi işleyecektir.
@none - Bu, herhangi bir veriyi işlemek istemediğinizde kullanılabilir.
@this - Bu, yalnızca talep eden bileşeni işleyecektir.
@form - Bu, talep eden bileşeni içeren tüm formu işleyecektir.
@region - Bu, bir web sayfasının belirli bir bölgesini işleyecektir.
Kısmi Görünüm Güncellemeleri
Giriş alanları gibi RichFaces, farklı görünümleri güncellemek için benzer seçenekler sunar. Geliştiriciler görünümü tercihlerine göre özelleştirebilirler. Execute özniteliği gibi, execute özniteliğine benzer şekilde çalışan bir render özniteliği vardır. Tüm bu özellikler, bir web sayfasının kimlik tanımlayıcısına göre çalışır.
Aşağıda, mevcut farklı render öznitelik düzeyleri verilmiştir.
@all - Bu, tüm bileşeni güncelleyecektir.
@none - Bu, hiçbir bileşeninizi güncellemeyecektir.
@this - Bu, yalnızca talep eden bileşeni güncelleyecektir.
@from - Bu, talep eden verileri içeren formu güncelleyecektir.
@region - Bu, web sayfasının belirli bir bölgesini güncelleyecektir.
Diğer a4j Etiketleri
Şimdiye kadar RichFaces uygulaması ile ilgili kavramsal özellikleri tartıştık. Bu bölümde, uygulamalı örneklerle ayrıntılı olarak öğreneceğiz.
<a4j: AJAX>
Bu, RichFaces'in sunduğu temel bileşenlerden biridir. Bu, JSF2.0 f: AJAX etiketinin genişleyen bir parçasından başka bir şey değildir. Bu etiket, web sayfalarında bir JS olayı meydana geldiğinde bir AJAX isteğini tetikler. Aşağıdaki örnek, bu etiket hakkında daha fazla bilgi vermektedir. Web sayfası klasörünün altında bir "xhtml" sayfası oluşturun ve bunu "a4jAJAXExample.xhtml" olarak adlandırın. Ardından, aşağıdaki kod parçasını yapıştırın.
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://xmlns.jcp.org/jsf/html"
xmlns:a4j = "http://richfaces.org/a4j">
<h:head>
<title>a4j:AJAX Tag Example</title>
</h:head>
<h:body>
<h:form id = "form">
<h:inputText value = "#{managedBean.message}">
<a4j:AJAX render = "ShowMessage" />
</h:inputText>
<h:outputText value = "#{managedBean.message}" id = "ShowMessage"
style = "animation-duration"/>
</h:form>
</h:body>
</html>Ayrıca, web sayfasından gelen girdileri tutmak için bir yönetilen fasulye oluşturmamız gerekiyor. Devam edin ve kaynak paket dizini altında bir java sınıfı oluşturun. Aşağıdakimanagedbean.java sınıf kodu.
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class managedBean {
String message;
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
}Her iki dosyayı da kaydedin ve çalıştırın, bu tarayıcıda aşağıdaki çıktıyı verecektir.
<a4j: param>
a4j: param, f: param etiketinin bir uzantısıdır. Bir özelliğe veya bir örnek değişkenine değer atamak için kullanılır. Bu etiket, değeri kalıcı olarak örnek değişkenine atayabilir. Aşağıda “a4jparamExample.html” kodu verilmiştir.
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://xmlns.jcp.org/jsf/html"
xmlns:a4j = "http://richfaces.org/a4j">
<h:head>
<title>Param tag example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0"/>
</h:head>
<h:body>
<h:form id = "form">
<h:panelGrid columns = "2">
<a4j:commandButton value = "TutorialsPoint" render = "rep">
<a4j:param value = "Tutorials point" assignTo = "#{managedBean.message}" />
</a4j:commandButton>
<a4j:commandButton value = "RichFace Tutorials" render = "rep">
<a4j:param value = "RichFace Tutorials" assignTo = "#{managedBean.message}" />
</a4j:commandButton>
</h:panelGrid>
<br />
<h:outputText id = "rep" value = "Selected Name:#{managedBean.message}" />
</h:form>
</h:body>
</html>Karşılık gelen yönetilen fasulye sınıfı kodu aşağıdadır.
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class managedBean {
String message;
public String getMessage() {
return message;
}
public void setMessage(String message) {
System.out.println("This method is getting called with"+message);
// we have added this line in order to check how the AJAX call
// happens to the class methods without any direct communication
this.message = message;
}
}Devam edin ve dosyayı çalıştırın. Tarayıcıdaki çıktı aşağıdadır.
Şimdi, sunucu konsolunda, örnek değişkenini çalışma zamanında ayarlamak için xhtml dosyasının yönetilen fasulye ile iletişim kurduğunu kanıtlayan aşağıdaki çıktıyı göreceksiniz.
<a4j: commandButton>
Önceki örneğimizde komut düğmesi etiketini zaten kullandık. Belirli bir isteği işlemek için AJAX motoru oluşturacak ve onunla iletişim kuracak bir xhtml sayfası içinde bir düğme oluşturmak için kullanılır. Bir girdi alır ve aynısını işler ve web tarayıcısında bir çıktı oluşturur.
Önceki örnekte, iki düğme oluşturduk - “TutorialsPoint” ve “RichFace Tutorials”. Komut düğmesi etiketimiz, yönetilen fasulye ile dahili olarak iletişim kurar ve gerekli örnek değişkenlerini ayarlar. Değeri ortaya çıkarmaktan da sorumludur.
<a4j: commandLink>
Komut bağlantısı, JSF 2.0'ın <h: commandlink> bileşeni gibi çalışır. Komut düğmesi, JS tıklama olayında komut bağlantısı her çalıştığında, gönderim tabanlı AJAX isteği oluşturur. Komut düğmesinde ve komut bağlantısında sahip olduğumuz tek fark budur. Aşağıdaki örnek, lib etiketini daha iyi anlamanıza yardımcı olacaktır. “A4jCommandLink.xhtml” dosyası oluşturun ve aşağıdaki kodu içine yapıştırın.
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://xmlns.jcp.org/jsf/html"
xmlns:a4j = "http://richfaces.org/a4j">
<h:head>
<title>Example of command Link</title>
</h:head>
<h:body>
<h:form id = "form">
<h:panelGrid columns = "3">
<h:outputText value = "Name:" />
<h:inputText value = "#{managedBean.message}" />
<a4j:commandLink value = "Click Me" render = "out" execute = "@form" />
</h:panelGrid>
</h:form>
<br />
<a4j:outputPanel id = "out">
<h:outputText value = "Welcome to #{managedBean.message} !" />
</a4j:outputPanel>
</h:body>
</html>Yönetilen fasulye sınıfında hiçbir şeyi değiştirmeye gerek yok. Bu dosyayı çalıştırın ve aşağıdaki tarayıcıda çıktı olacaktır.
<a4j: outputPanel>
Çıktı paneli, HTML sayfasının bir kapsamı olarak çalışır. Bir web sayfasının farklı bileşenlerini ayrı ayrı belirtmek yerine gruplamak için kullanılır. Önceki örnekte, giriş metin kutusunda sağlanan mesajı görüntülemek için çıktı panelini kullandık. Çıktı panelinin sözdizimi aşağıdadır.
<a4j:outputPanel id = "out">
<h:outputText value = "Welcome to #{managedBean.message} !" />
</a4j:outputPanel><a4j: bölge>
Bu, RichFaces'in web sayfasının bazı bölümlerini kaynak alanından işlemeye izin veren temel özelliğidir. Bu etiketi kullanarak, RichFaces'te kısmi ağaç işleme gerçekleşir. Esas olarak işleme sürecini artırmak için kullanılır. Aşağıdaki örnek, bunu ayrıntılı olarak anlamanıza yardımcı olacaktır. Lütfen aşağıdaki kodu kullanarak bir "a4jregionExample.xhtml" dosyası oluşturun.
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:a4j = "http://richfaces.org/a4j" >
<h:head>
<title>Region Example</title>
</h:head>
<h:body>
<h:form>
<h:inputText value = "#{managedBean.message}"/>
<h:inputText value = "#{managedBean.job}"/>
<a4j:commandLink id = "one" value = "one"/>
<a4j:region>
<h:inputText value = "#{managedBean.message}"/>
<a4j:commandLink id = "two" value = "two"/>
</a4j:region>
</h:form>
</h:body>
</html>Bu xhtml sayfasıyla birlikte, lütfen managedBean'imizi de buna göre güncelleyin.
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class managedBean {
String message;
String job;
public String getMessage() {
return message;
}
public void setMessage(String message) {
System.out.println("setMessage method is getting called with--"+message);
this.message = message;
}
public String getJob() {
return job;
}
public void setJob(String job) {
System.out.println("setJob method is getting called with--"+job);
this.job = job;
}
}Yukarıdaki kod parçası tarayıcıda aşağıdaki çıktıyı verecektir.
"Bir" komut bağlantısına tıklandığında, tüm formu işleyecektir, ancak, "iki" komut bağlantısını tıkladığımızda, yalnızca bir bölge etiketi içinde olduğu için ileti örneği işlenecektir. Benzer şekilde, 'bir' komut bağlantısını başka bir bölge etiketine eklersek, o zaman yalnızca ilk iki giriş parametresini işler. Aşağıda, "iki" komut bağlantısına tıklandığında sunucu konsolunun ekran görüntüsü verilmiştir.
"Bir" komut bağlantısına tıklandığında, aşağıdaki çıktı çıkacaktır.
<a4j: tekrar>
Tekrar etiketi, JSF'nin <ui: tekrar> etiketine tam olarak benzer şekilde çalışır. Web sayfasındaki bir listeyi yinelemeye yardımcı olur. Aşağıdaki “a4jRepeat.xhtml” dosyası örneğinde, yönetilen fasulye sınıfımızdaki bir listeyi yineliyoruz.
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:a4j = "http://richfaces.org/a4j">
<h:head></h:head>
<h:body>
<h:form id = "form">
<h:panelGrid columns = "1" style = "width: 640px">
<a4j:outputPanel id = "panel" layout = "block">
<a4j:repeat value = "#{managedBean.subjectList}" var = "sub">
<li>
<h:outputText value = "#{sub}"/>
</li>
</a4j:repeat>
</a4j:outputPanel>
</h:panelGrid>
</h:form>
</h:body>
</html>Bu belirli dosyayı tarayıcıda çalıştırdığınızda, aşağıdaki çıktıyı alacaksınız.
<a4j: durum>
Adından da anlaşılacağı gibi, bu etiket AJAX isteğinizin durumunu ön uçta görüntülemek istediğinizde kullanışlıdır. Seçiminize göre normal bir metin mesajı veya gif veya resim tabanlı durum ekleyebilirsiniz. Aşağıdaki gibi küçük bir uygulama için, ön uçtaki duruma bir göz atacaksınız, ancak karmaşık bir AJAX isteği çalıştırdığınızda, bu durum oldukça görünür. Lütfen "a4jregionExample.xhtml" dosyasını aşağıda gösterildiği gibi değiştirin.
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:a4j = "http://richfaces.org/a4j">
<h:head>
<title>Region Example</title>
</h:head>
<h:body>
<h:form>
<a4j:status startText = "Working..." />
<h:inputText value = "#{managedBean.message}"/>
<h:inputText value = "#{managedBean.job}"/>
<a4j:commandLink id = "one" value = "one"/>
<a4j:region>
<h:inputText value = "#{managedBean.message}"/>
<a4j:commandLink id = "two" value = "two"/>
</a4j:region>
<a4j:status startText = "Done" />
</h:form>
</h:body>
</html>Bu uygulamayı her çalıştırdığınızda, "çalışıyor ..." ve "Bitti" olmak üzere iki durumun bir anlık görüntüsünü görebilirsiniz. Bu durumlar, istek tamamlandığında otomatik olarak kaybolacaktır.
<a4j: include> / <a4j: keepAlive>
Dahil et ve keepAlive, her iki etiket de RichFaces 3.0'da tanıtıldı, ancak RichFaces 4'te bu etiketler, <ui: include> ve <ui: insert> gibi Facelets'de kullanılan farklı diğer etiketler kullanılarak kolayca elde edilebildiği için amortismana tabi tutuldu. Adından da anlaşılacağı gibi, bir sayfayı diğerine dahil etmek için include ve bir JSF sayfasıyla yönetilen fasulye ilişkilendirmesinin kapsamını kontrol etmek için keepAlive tanıtıldı. İş hedeflerine ulaşmak için herhangi bir yazılım API'sinin güncellenmiş sürümünü kullanmanız ve <UI> bileşenini ve "açıklama" uygulamasını kullanmanız önerilir.
<a4j: log>
Adından da anlaşılacağı gibi, bu a4j bileşeni, web tarayıcısında günlük bilgilerinin oluşturulmasına yardımcı olur. Aşağıdaki örnek, bu etiket hakkında daha fazlasını açıklamaktadır. “A4jregionExample.xhtml” dosyasını aşağıdaki şekilde düzenleyin.
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:a4j = "http://richfaces.org/a4j">
<h:head>
<title>Region Example</title>
</h:head>
<h:body>
<h:form>
<a4j:status startText = "Working..." />
<h:inputText value = "#{managedBean.message}"/>
<h:inputText value = "#{managedBean.job}"/>
<a4j:commandLink id = "one" value = "one"/>
<a4j:region>
<h:inputText value = "#{managedBean.message}"/>
<a4j:commandLink id = "two" value = "two"/>
</a4j:region>
<a4j:log></a4j:log>
<a4j:status startText = "Done" />
</h:form>
</h:body>
</html>Şimdi yukarıdaki kodu tarayıcıda çalıştırın ve aşağıdaki çıktı olacaktır. a4j: log, gerektiğinde tüm seviyelerin gerekli günlüklerini oluşturacaktır.
<a4j: jsFunction>
Bu, herhangi bir JavaScript kodu olmadan otomatik bir JS işlevinin oluşturulabildiği RichFaces'in en gelişmiş özelliğidir. CDK, herhangi bir JS olayına dayalı olarak otomatik bir JavaScript kodu oluşturacaktır.
Aşağıdaki örnekte, belirli bir değerin üzerine geldiğimizde çağrılacak bir JavaScript işlevi oluşturuyoruz.
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:a4j = "http://richfaces.org/a4j">
<h:head>
<title>Example of JS Function</title>
</h:head>
<h:body>
<table width = "500" border = "1">
<tbody>
<tr>
<td>
<span onmouseover = "showMySkill('core java,J2EE')"
onmouseout = "showMySkill('')">BackEnd developer</span>
</td>
<td>
<span onmouseover = "showMySkill('DB,RDBMS,unix')"
onmouseout = "showMySkill('')">Database Admin</span>
</td>
<td>
<span onmouseover = "showMySkill(
'JS frameworks,html,java scripts')"
onmouseout = "showMySkill('')">Front End Developer</span>
</td>
</tr>
<tr>
<td colspan = "3">You need to know:
<b><h:outputText id = "showSkillset" value = "#{managedBean.message}"/></b>
</td>
</tr>
</tbody>
</table>
<h:form id = "form">
<a4j:jsFunction name = "showMySkill" render = "showSkillset">
<a4j:param name = "name" assignTo = "#{managedBean.message}" />
</a4j:jsFunction>
</h:form>
</h:body>
</html>Yukarıdaki kod, tarayıcıda aşağıdaki çıktıyı üretecektir. JS olayına bağlı olarak CDK, "showMySkill ()" adlı yöntemi geçersiz kılar ve gerekli değerler tarayıcıda yazdırılır.
<a4j: AJAXListener>
Bu etiket, sonucu tarayıcıda oluşturmadan hemen önce belirli bir dinleyiciyi çalıştırmak istediğinizde kullanılır. Bu etiket RichFaces 4'te mevcut değildir çünkü aynı işlevsellik
<rich:panel>
<f:facet name = "header">Using a4j:actionListener</f:facet>
<a4j:commandButton value="Submit" reRender = "#{AJAXBean.areas}">
<a4j:AJAXListener binding = "#{AJAXBean.renderAreasListener}"/>
</a4j:commandButton>
</rich:panel>Yukarıdaki örnekte, "Gönder" düğmesine tıklandığında, bean sınıfı içinde uygulanan "alanlar" yöntemini çağıracak bir JS olayı oluşturulacak ve sonuç olarak ilgili sonuç oluşturulacaktır.