JSF – 17 – JSF HTML Tag – 01 – Text Field & Text Area

Merhaba Arkadaslar
Bu bolumde JSF HTML tag library konusuna giris yapacagiz.
Aslinda JSFT HTML tag’larin bir kismini simdiye kadar kullandik.

JSF 2.0 ile birlikte 6 library ve 100 uzerinde tag mevcut hale geldi.

Bu taglar;

  • Core f:
  • HTML h:
  • Facelets ui:
  • Composite composite:
  • JSTL Core c:
  • JSTL Function fn:

Onceki bolumlerde JSTL Core , JSTL function taglarini incelemistik. Bir miktar Core (c:) ve HTML(h:)tagini da inceledik.

Bu bolumde HTML tag’larini incelemeye baslayalim. Oncelikle bildigimiz h:inputText ile baslayalim

Text Field & Text Area

Simdiye kadar ornek uygulamalarimizda bol miktar input alani kullandik. Burada biraz daha detayli olarak inceleyelim ;

  • h:inputText
  • h:inputSecret
  • h:inputTextarea
  • h:inputHIdden

Bu taglarla kullanabilecegimiz bir cok attribute vardir. Ornegin ; Buradan , h:inputText secilerek kullanabilecek attribute bilgisine ulasilabilir.

InputBean.java

package _21.input.text;

import javax.faces.bean.ManagedBean;
import javax.faces.component.UIInput;

@ManagedBean
public class InputBean {

	private String name;
	private String password;
	private UIInput backingBinding;
	//getters and setters
}

Basit olarak h:inputText component’ini simdiye kadar bir cok kere kullandik.

<tr>
	<td>InputText:</td>
	<td><h:inputText value="#{inputBean.name}" /></td>
</tr>

Daha once incelemistik h:inputText component’i HTML input text component’ine donusturulur.

<input type="text" name="j_idt7">

Benzer sekilde h:inputSecret component’i HTML input password component’ine donusturulur.

<tr>
	<td>InputSecret</td>
	<td><h:inputSecret value="#{inputBean.password}" /></td>
</tr>
<input type="password" name="j_idt9" value="">

Property olarak UIInput tipi kullandigimizda , binding attribute kullandik.

<tr>
	<td>Binding</td>
	<td><h:inputText binding="#{inputBean.backingBinding}" /></td>
</tr>

Kullanabilcegimiz bir kac attribute’e ornek olarak readonly ;

<tr>
	<td>Readonly:</td>
	<td><h:inputText value="I am readonly" readonly="true"/></td>
</tr>

disabled attribute ; disabled = true yaptigimizda component aktif olmayacaktir.

<tr>
	<td>Disabled:</td>
	<td><h:inputText value="I am disabled" disabled="true"/></td>
</tr>

maxlength , input alanina girilebilecek maximum karakteri temsil eder. size ile boyut bilgisi veriyoruz.

<tr>
	<td>MaxLength & Size:</td>
	<td><h:inputText maxlength="5"  size="8"/></td>
</tr>

Component’e css eklemek istersek bu durumda style attribute kullanabiliriz.

<tr>
	<td>Style:</td>
	<td><h:inputText style="color:blue"/></td>
</tr>

Eger css class eklemek istersek bu durumda styleClass attribute kullanabiliriz.

....
<style>
.myclass{
color:red
}
</style>		

...

<tr>
	<td>StyleClass:</td>
	<td><h:inputText styleClass="myclass"/></td>
</tr>

onclick , onblur gibi attribute’leri kullanarak javascript function cagirabiliriz.

...
<script>
function callMe(){
alert("Hello!");
}
</script>
...


<tr>
	<td>Call JS function:</td>
	<td><h:inputText  onblur="callMe()"/></td>
</tr>

h:inputTextarea component’ini inceledigimiz de ;rows ve columns attributelerini kullanabiliriz.
h:inputTextarea component’i HTML textarea component’ine donusturulur.

<tr>
	<td>InputTextArea:</td>
	<td><h:inputTextarea/></td>
</tr>
<tr>
	<td>Rows</td>
	<td><h:inputTextarea rows="3"/></td>
</tr>

<tr>
	<td>Cols</td>
	<td><h:inputTextarea cols="5"/></td>
</tr>
<textarea name="j_idt27" rows="5"></textarea>

Son olarak h:inputHidden component’ini de ekleyelim. h:inputHidden component’i HTML input hidden component’ine donusturulur.

<tr>
	<td>There is a hidden text</td>
	<td><h:inputHidden value="iam hidden!"/></td>
</tr>
<input type="hidden" name="j_idt31" value="iam hidden!">

Ornegimizi calistirip alanlari doldurdugumuzda ;

inputtext1

Chromeda F12 ile HTML kodlarini inceleyebiliriz;
Ekledigimiz h:inputHidden component’i hidden type olarak eklendi.

input hidden

Call JS Function da onblur durumunda popup alert cikacaktir ;

call js function

xhtml dosyamizin toplu hali ;

inputText.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">
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>InputText Components</title>
</h:head>

<style>
.myclass {
	color: red
}
</style>


<script>
	function callMe() {
		alert("Hello!");
	}
</script>

<h:body>

	<table>
		<tr>
			<td>InputText:</td>
			<td><h:inputText value="#{inputBean.name}" /></td>
		</tr>
		<tr>
			<td>InputSecret</td>
			<td><h:inputSecret value="#{inputBean.password}" /></td>
		</tr>

		<tr>
			<td>Binding</td>
			<td><h:inputText binding="#{inputBean.backingBinding}" /></td>
		</tr>

		<tr>
			<td>Readonly:</td>
			<td><h:inputText value="I am readonly" readonly="true" /></td>
		</tr>

		<tr>
			<td>Disabled:</td>
			<td><h:inputText value="I am disabled" disabled="true" /></td>
		</tr>

		<tr>
			<td>MaxLength & Size:</td>
			<td><h:inputText maxlength="5" size="8" /></td>
		</tr>

		<tr>
			<td>Style:</td>
			<td><h:inputText style="color:blue" /></td>
		</tr>

		<tr>
			<td>StyleClass:</td>
			<td><h:inputText styleClass="myclass" /></td>
		</tr>

		<tr>
			<td>Call JS function:</td>
			<td><h:inputText onblur="callMe()"/></td>
		</tr>

		<tr>
			<td>InputTextArea:</td>
			<td><h:inputTextarea /></td>
		</tr>
		<tr>
			<td>Rows</td>
			<td><h:inputTextarea rows="5" /></td>
		</tr>

		<tr>
			<td>Cols</td>
			<td><h:inputTextarea cols="5" /></td>
		</tr>

		<tr>
			<td>There is a hidden text</td>
			<td><h:inputHidden value="iam hidden!" /></td>
		</tr>

	</table>

</h:body>
</html>

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 *