JSF - Kompozit Bileşenler
JSF, geliştiricilere, özel içerikleri oluşturmak için kullanılabilecek kendi özel bileşenlerini tanımlama konusunda güçlü bir yetenek sağlar.
Özel Bileşeni Tanımlayın
JSF'de özel bir bileşen tanımlamak, iki aşamalı bir işlemdir.
| Adım | Açıklama |
|---|---|
| 1 A | Kaynaklar klasörü oluşturun. Kaynaklar klasöründe bileşik bir ad alanına sahip bir xhtml dosyası oluşturun. |
| 1b | Bileşik bileşenin içeriğini tanımlamak için bileşik etiketler bileşik: arabirim, bileşik: öznitelik ve bileşik: uygulama kullanın. Kullanım cc.attrs içinde uygulanması: kompozit kullanılarak tanımlı değişken almak için öznitelik: kompozit içinde arayüzde: kompozit . |
Adım 1a: Özel Bileşen Oluşturun: loginComponent.xhtml
Kaynaklar klasöründe bir klasör öğretici noktası oluşturun ve içinde bir loginComponent.xhtml dosyası oluşturun.
Html başlığında bileşik ad alanı kullanın.
<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:composite = "http://java.sun.com/jsf/composite">
...
</html>Adım 1b: Bileşik Etiketler Kullanın: loginComponent.xhtml
Aşağıdaki tablo, bileşik etiketlerin kullanımını açıklamaktadır.
| S.No | Etiket ve Açıklama |
|---|---|
| 1 | composite:interface Bileşik: uygulamada kullanılacak yapılandırılabilir değerleri bildirir. |
| 2 | composite:attribute Yapılandırma değerleri bu etiket kullanılarak bildirilir. |
| 3 | composite:implementation JSF bileşenini bildirir. # {Cc.attrs.attribute-name} ifadesini kullanarak bileşik: arabiriminde tanımlanan yapılandırılabilir değerlere erişebilir. |
<composite:interface>
<composite:attribute name = "usernameLabel" />
<composite:attribute name = "usernameValue" />
</composite:interface>
<composite:implementation>
<h:form>
#{cc.attrs.usernameLabel} :
<h:inputText id = "username" value = "#{cc.attrs.usernameValue}" />
</h:form>Özel Bileşeni Kullan
JSF'de özel bir bileşen kullanmak basit bir işlemdir.
| Adım | Açıklama |
|---|---|
| 2a | Bir xhtml dosyası oluşturun ve özel bileşenin ad alanını kullanın. Ad alanı, http://java.sun.com/jsf/ <klasör-adı> olacaktır; burada klasör adı, özel bileşeni içeren kaynaklar dizinindeki klasördür |
| 2b | Özel bileşeni normal JSF etiketleri olarak kullanın |
Adım 2a: Özel Ad Alanı kullanın: home.xhtml
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:ui = "http://java.sun.com/jsf/facelets">
xmlns:tp = "http://java.sun.com/jsf/composite/tutorialspoint">Adım 2b: Özel Etiket Kullanın: home.xhtml ve Geçiş Değerleri
<h:form>
<tp:loginComponent
usernameLabel = "Enter User Name: "
usernameValue = "#{userData.name}" />
</h:form>Örnek Uygulama
Özel bileşeni JSF'de test etmek için bir test JSF uygulaması oluşturalım.
| Adım | Açıklama |
|---|---|
| 1 | JSF - First Application bölümünde açıklandığı gibi com.tutorialspoint.test paketinin altında helloworld adıyla bir proje oluşturun . |
| 2 | Src → ana klasör altında kaynaklar klasörü oluşturun . |
| 3 | Src → ana → kaynaklar klasörü altında öğretici nokta klasörü oluşturun . |
| 4 | Src → ana → kaynaklar → tutorialspoint klasörü altında loginComponent.xhtml dosyası oluşturun . |
| 5 | Değiştir UserData.java dosyası olarak aşağıda açıklanmıştır. |
| 6 | Home.xhtml'yi aşağıda açıklandığı gibi değiştirin . Dosyaların geri kalanını değiştirmeyin. |
| 7 | İş mantığının gereksinimlere göre çalıştığından emin olmak için uygulamayı derleyin ve çalıştırın. |
| 8 | Son olarak, uygulamayı savaş dosyası biçiminde oluşturun ve Apache Tomcat Web sunucusunda konuşlandırın. |
| 9 | Son adımda aşağıda açıklandığı gibi uygun URL'yi kullanarak web uygulamanızı başlatın. |
loginComponent.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://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:composite = "http://java.sun.com/jsf/composite">
<composite:interface>
<composite:attribute name = "usernameLabel" />
<composite:attribute name = "usernameValue" />
<composite:attribute name = "passwordLabel" />
<composite:attribute name = "passwordValue" />
<composite:attribute name = "loginButtonLabel" />
<composite:attribute name = "loginButtonAction"
method-signature = "java.lang.String login()" />
</composite:interface>
<composite:implementation>
<h:form>
<h:message for = "loginPanel" style = "color:red;" />
<h:panelGrid columns = "2" id = "loginPanel">
#{cc.attrs.usernameLabel} :
<h:inputText id = "username" value = "#{cc.attrs.usernameValue}" />
#{cc.attrs.passwordLabel} :
<h:inputSecret id = "password" value = "#{cc.attrs.passwordValue}" />
</h:panelGrid>
<h:commandButton action = "#{cc.attrs.loginButtonAction}"
value = "#{cc.attrs.loginButtonLabel}"/>
</h:form>
</composite:implementation>
</html>UserData.java
package com.tutorialspoint.test;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name = "userData", eager = true)
@SessionScoped
public class UserData implements Serializable {
private static final long serialVersionUID = 1L;
private String name;
private String password;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String login() {
return "result";
}
}home.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://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:tp = "http://java.sun.com/jsf/composite/tutorialspoint">
<h:head>
<title>JSF tutorial</title>
</h:head>
<h:body>
<h2>Custom Component Example</h2>
<h:form>
<tp:loginComponent
usernameLabel = "Enter User Name: "
usernameValue = "#{userData.name}"
passwordLabel = "Enter Password: "
passwordValue = "#{userData.password}"
loginButtonLabel = "Login"
loginButtonAction = "#{userData.login}" />
</h:form>
</h:body>
</html>Yapılan tüm değişikliklere hazır olduğunuzda, uygulamayı JSF - İlk Uygulama bölümünde yaptığımız gibi derleyip çalıştıralım. Başvurunuzla ilgili her şey yolundaysa, bu aşağıdaki sonucu verecektir.
