JSF – 18 – JSF HTML Tag – 02 – Displaying Text & Images & Resources

Merhaba Arkadaslar.
Bu bolumde JSF HTML tag konusuna devam edecegiz. Text , image’lari gostermek ve resource dosyalarini (css , javascript) eklemek icin su componentleri kullaniriz.

  • h:outputText
  • h:outputFormat
  • h:graphicImage
  • h:outputStylesheet
  • h:outputScript

Oncelikle h:outputText component’i ile baslayalim. Daha onceki orneklerimizde bu component’i kullandik.

OutputBean.java

package _22.output;

import javax.faces.bean.ManagedBean;

@ManagedBean
public class OutputBean {

	public String plainText = "This is plain text!";
	public String htmlText = "<input size='20' type='text' />";

	//getters and setters
}

h:outputText
h:outputText component’i value attribute almaktadir. h:outputText herhangi bir HTML component’i olusturmayacaktir.
Eger style ya da styleClass attribute kullanirsak bu durumda HTML span component’i olusacaktir.

<h:outputText value="Hello outPutText" />

value attribute alaninda Expression Language kullanabiliriz.

<h:outputText value="#{outputBean.plainText}" />

Dikkat edecek olursak htmlText property’sinin String degeri bir HTML componentine karsilik gelmektedir. Bu degeri outputText ile yazdirdigimizda HTML component i olarak degerlendirilmez , kacis (escape) uygulanir. Eger HTML componenti olarak degerlendirilmesini istiyorsak bu durumda escape attribute’unu kullanabiliriz. Varsayilan olarak escape attribute degeri true dur.

<p>
	<h:outputText value="#{outputBean.htmlText}" />
</p>
 <p>#{outputBean.htmlText}</p>
<p>
	<h:outputText value="#{outputBean.htmlText}" escape="false" />
</p>

style attribute’unu kullanabiliriz;

<h:outputText value="this is blue" style="color:blue" />

Ornegimizi calistirdigimizda;

outputtext

h:outputFormat
h:outputFormat component’i parametre kullanmamiza izin verir.

<h:outputFormat value="Name: {0} Surname: {1}">
	<f:param value="Levent" />
	<f:param value="Erguder" />
</h:outputFormat>

outputformat

h:graphicImage
h:graphicImage component’i HTML img elemanina donusur.

<h:graphicImage value="java.png" />

java.png dosyamiz direkt olarak xhtml sayfamizla ayni dosyada yer almaktadir.

Eger farkli bir dizinde yer alirsa ilgili dizini gostermemiz gerekir ;

<h:graphicImage value="../resources/images/javacup.png" />

Bu sekilde path bilgisi vermek yerine library attribute’unu kullanabiliriz.
css , js , image dosyalari “resources” dosyasinda yer almalidir.
resources dosyasi altindaki dosyalara “library” adi verilir. library attribute’unu kullanarak bu library dizinlerine referansta bulunabiliriz.

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

library attribute olarak “images” dizinini gosterdik , images dizini resources dizini altinda yer aldigini ifade etmis olduk.

graphicimage

h:outputStylesheet
h:outputStylesheet component’i HTML link element’ine donusturulur. Benzer sekilde library attribute’unu kullanabiliriz.
resources dizini altinda css dizini yer alsin. library attribute olarak css dizinini belirtebiliriz.

<h:outputStylesheet library="css" name="style.css" />
<!--resources dizini altinda css dizini yer almaktadir. library attribute olarak css dizinini belirtebiliriz. -->
<p>
     <h:outputText value="red class'i style.css dosyasinda yer almaktadir."
			styleClass="red" />
</p>

Ornegimizi calistirdigimizda ;

outputstylesheet1

NOT : <h:outputStyleSheet> ‘i kullanabilmemiz icin <h:head> tagi xhtml sayfamizda yer almalidir.

h:outputScript
h:outputScript component’i HTML <script> element’ine donusturulur. Benzer sekilde library attribute’unu kullanabiliriz.

js klasorumuzuz resources dizini altinda olsun.  cool.js dosyamiz js klasoru altinda yer alsin.

cool.js

function callMe(){
	alert("this ic cool.js callMe function");
}

outputScript component’i ile js dosyamizi ekleyelim. onclick attribute ile image’a tikladigimizda callMe metodu calisacaktir.

	<h:outputScript library="js" name="cool.js" />

	<p>
		<h:graphicImage library="images" name="duke.png" onclick="callMe()" />
	</p>

Ornegimizi calistiralim ve image’a tiklayalim.

h:outputScript

Project Explorer’a bakacak olursak ;

project explorer

Kaynak kodlar : Injavawetrust.jsf
Yazimi burada sonlandiriyorum.
Herkese Bol Javali Gunler dilerim.
Be an oracle man , import java.*;
Levent Erguder
OCP, Java SE 6 Programmer
OCE, Java EE 6 Web Component Developer

Print Friendly, PDF & Email

Leave a Reply

Your email address will not be published. Required fields are marked *