Custom Component - Kategori

> Bilim ve Teknoloji > Uygulamalı Bilimler ve Teknoloji > Bilgisayar ve İletişim > Yazılım > Programlama > Java > Web - Kurumsal - EE > Web - Web Servis - Rest > Framework - Kütüphane > Java Server Faces - JSF > Custom Component

Bu Kategoriye İçerik Girin. Soru Sorun

İçerikler :

@FacesComponent Basit Bir Composite Component Örneği Composite Component Custom Tag Hello World Örneği HelloWorld Bileşeni

Bu Sayfayı Paylaş:

Örnek

HelloWorld Bileşeni

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.

Kavram

@FacesComponent

Tanım: Bir sınıfı bir JSF bileşeni haline getiren annotation. createTag değeri true verilirse runtime'da bir etiket (tag) yaratılmaktadır.

Örnek

Custom Tag Hello World Örneği

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.

Kavram

Composite Component

Tanım: JSF 2 ile gelen bir veya daha fazla bileşenden oluşturulan bileşen. Ayrı bir xhtml dosyasına interface ile yapısı, implementation ile de bileşenin içeriği verilmektedir.

Örnek

Basit Bir Composite Component Örneği

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.

İçerikler :

Bu Sayfayı Paylaş:

Örnek

HelloWorld Bileşeni

Kavram

@FacesComponent

Örnek

Custom Tag Hello World Örneği

Kavram

Composite Component

Örnek

Basit Bir Composite Component Örneği

Bu Sayfayı Paylaş:

İletişim Bilgileri

Takip Et