JSF 2.2'de olabilecek en basit bir Hello World bileşeni yapalım. Bunun için bir bileşen içine temel özellikleri sağlayan UIComponentBase sınıfını extend etmemiz gereklidir :
import java.io.IOException;
import javax.faces.component.FacesComponent;
import javax.faces.component.UIComponentBase;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
@FacesComponent(value="components.HelloWorldComponent",
createTag=true, tagName="hello", namespace="http://www.fibiler.com/jsf")
public class HelloWorldComponent extends UIComponentBase{
@Override
public String getFamily() {
return "hello.world.component";
}
@Override
public void encodeBegin(FacesContext context) throws IOException {
ResponseWriter writer = context.getResponseWriter();
writer.write("Hello World!");
}
}
Bu bileşeni artık sayfalarda kullanabiliriz. Aşağıdaki gibi kullanalım :
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:t="http://www.fibiler.com/jsf">
<t:hello/>
</html>
Sayfa çalıştırıldığında Hello World! mesajı görülecektir.
Attribute'si olan ikinci bir bileşen yapalım:
import java.io.IOException;
import javax.faces.component.FacesComponent;
import javax.faces.component.UIComponentBase;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
@FacesComponent(value="components.HelloWorldComponent2",
createTag=true, tagName="hello2", namespace="http://www.fibiler.com/jsf")
public class HelloWorldComponent2 extends UIComponentBase{
@Override
public String getFamily() {
return "hello.world.component";
}
@Override
public void encodeBegin(FacesContext context) throws IOException {
String value = (String) getAttributes().get("value");
ResponseWriter writer = context.getResponseWriter();
writer.write("Hello " + value);
}
}
Bu bileşeni de aynı sayfaya ekleyelim :
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:t="http://www.fibiler.com/jsf">
<t:hello/>
<br/>
<t:hello2 value="Fibiler"/>
</html>
Artık sayfa çalıştığında Hello World! ve Hello Fibiler yazısını görebilirsiniz.
Tag (etiket) yaratmak için etiket dosyalarını ekleneceği tags klasörünü WEB-INF klasörü içine açılması gerekir. WEB-INF/tags klasörüne aşağıdaki gibi helloworld.xhtml dosyasını yaratalım :
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<div>
<h:outputLabel value="#{label}"></h:outputLabel>
<br/>
<ui:insert />
</div>
</ui:composition>
Burada label attribute'sini dışarıdan alacağımız belirtiyoruz.
ise elementimizin içeriğinin koyulacağı yerdir.
WEB-INF içinde my.taglib.xml dosyasını yaratıyoruz ve içeriğine yukarıda yarattığımız etiketin adresini veriyoruz :
<facelet-taglib version="2.0"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facelettaglibrary_2_0.xsd">
<namespace>http://www.fibiler.com/customtags</namespace>
<tag>
<tag-name>hello</tag-name>
<source>tags/helloworld.xhtml</source>
<attribute>
<name>label</name>
</attribute>
</tag>
</facelet-taglib>
Buradaki etiketlere kullanabbilmek için Web.xml'e aşağıdaki parametrenin eklenmesi gerekir :
<context-param>
<param-name>javax.faces.FACELETS_LIBRARIES</param-name>
<param-value>/WEB-INF/my.taglib.xml</param-value>
</context-param>
Artık etiketimizi bir sayfada kullanabiliriz:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:t="http://www.fibiler.com/customtags">
<t:hello label="Fibiler">
Bu bir custom tag testidir
</t:hello>
</html>
Sayfa çalıştırıldığında Fibiler başlığı ve altında Bu bir custom tag testidir yazısı görülecektir.
JSF 2 ile birlikte composite component yaratmak için http://java.sun.com/jsf/composite kullanılır. /ana kök (web content bölümü)/resource/fibiler klasörü içinde yaratılan bir xhtml içinde interface elementi ile bileşenin genel yapısı , implementation elementi ile de bileşen içeriği verilmektedir. Aşağıdaki gibi bir hello.xhtml yaratalım ve resource/fibiler klasörü içine hello.xhtml olarak koyalım :
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
<composite:attribute name="value" />
</composite:interface>
<composite:implementation>
<h:outputLabel value="Merhaba #{cc.attrs.value}"></h:outputLabel>
</composite:implementation>
</html>
composite:interface ile genel yapısı , implementation ile içeriği verilmiştir.
Bu bileşeni aşağıdaki gibi bir sayfada kullanabiliriz :
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:fb="http://java.sun.com/jsf/composite/fibiler">
<fb:hello value="Fibiler"></fb:hello>
</html>
Bu sayfası çağrıldığında ekranda Merhaba Fibiler yazısı gözükür.
