JSF提供了各种各样的ui组件标签以及广泛的属性。
今天，我们将研究最重要且使用最广泛的UI组件属性。

id属性

id属性唯一标识一个组件。
如果未指定id属性，那么JSF会自动生成一个id。
当我们要引用服务器端类的组件时，将使用id属性。
为了关联一个组件，我们将必须在JSF标记中使用for属性指定名称。
然后，可以使用for子句中的名称将其他映射到UI组件的id。

例如，我们可以将id声明为

<h:outputLabel for="cname">Car Name:</h:outputLabel>
<h:inputText id="cname" size="45"></h:inputText>

其中我们在inputText标签中用" cname"定义汽车名称字段的id属性。
每当我们想从JSF页面获取值时，我们都使用" cname"，其中包含用户为汽车名称字段输入的值。
由于我们为此字段定义了唯一的ID，因此可以进行这种映射。

值属性

为value属性分配了组件的当前值。
通用语法是bean名称，后跟字段名称。
例如，如果bean名称是car，而model是字段，我们可以将值指定为## car.model}。

考虑以下代码，以演示value属性的用法；

<h:inputText id="model"  value ="#{car.model}" ></h:inputText>

其中我们使用包含getter和setter方法的car bean将值设置为model属性，通过该方法可以设置用户输入的值。

car bean的代码如下。

package com.theitroad.jsf.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class Car {

private String model;

public String getModel() {
      return model;
  }

  public void setModel(String model) {
      this.model = model;
  }
}

style和styleClass属性

style属性用于为组件指定css属性，例如颜色，字体，对齐方式等。
styleClass指定要应用于组件CSS类名称。
例如，如果用户希望以红色查看错误消息，则用户在消息标签中将样式指定为color：red。

例如;

<h:message for="cname" style="color: red"></h:message>

其中我们将样式属性与红色的颜色规范一起使用，因此，用于cname字段的消息将以红色显示。

我们还可以在dataTable标记中指定类名称，该标记接受类名称属性。

<h:dataTable id ="cars"  styleClass="carTable" value="#{car.carlist}" ></h:dataTable>

我们在styleClass carTable中定义css样式，然后在输出中呈现这些样式。

渲染的属性

rendering属性指示是否应渲染组件。
呈现的属性限制用户使用只能读取数据但不能写回指定源组件的右值表达式。
表达式可以使用算术运算符，而可以使用rvalue的文字。

<h:commandLink id="car"
  rendered="#{car.carlist > 0}">
  <h:outputText
      value="#{car.CarCheck}"
</h:commandLink>

其中获取汽车并检查汽车数量是否大于0。
如果汽车数量大于0，则通过carCheck方法设置该值。

onblur属性

当失去对特定组件的关注时，onblur调用必须执行JavaScript函数。
例如，在诸如–的场景中，如果我们要验证元素失去焦点或者跳出时用户输入的数据。
下面的代码验证用户输入的名称字段数据。

<h：inputtext id =" name" onblur =" validatename()">

validatename javascript函数在name属性上调用。

validatename函数JavaScript代码为；

function validatename(cname) {
      var elem = cname.id;
      var name = document.getElementById(elem).value;
      var len = name.length;
      
         if(len < 4 ) {
          document.getElementById("mesg").textContent = "Car Name:Valid input";
      }    else {
          document.getElementById("mesg").textContent ="Car Name:Invalid input"
      }
  }

document.getElementById用于获取在字段中输入并存储在变量"名称"中的名称的值。
通过调用长度函数来检查"名称"的长度。
如果名称的长度小于4，则显示"汽车名称：有效输入"消息。
对于大于4的长度值，将打印" Car Name：Invalid input"。

onclick属性

当在组件上单击鼠标时，onclick调用要执行JavaScript函数。
在onclick属性中，我们指定必须调用JavaScript函数名称，并在jsf页面的标头部分中定义此函数，其中包含必须为触发的事件完成的功能。

可以如下所示执行onclick函数的调用

<h:commandButton id="submit"
 action="cardetails" value="Submit" onclick="validateInput()"

在命令按钮标签中，我们调用了validateInput javascript函数，该函数将在单击此按钮时触发。
validateInput函数可以定义为

function validateInput {
      var elem = cname.id;
      var name = document.getElementById(elem).value;
      var len = name.length;
      
         if(len == 4 ) {
          document.write( "Car Name:Matches the number of characters expected");
      }     
}

该函数查找长度为4个字符的字符串，并按照该函数中的指定打印消息。

立即属性

立即数属性是一个布尔标志，它接受true或者false值。
如果该标志设置为true，那么事件和验证将在JSF生命周期管理的应用请求值阶段中执行，而不是等待流程验证阶段。
例如，考虑一下汽车详细信息页面，用户可以其中输入汽车的详细信息，例如颜色，型号，名称等，然后单击提交按钮以保存输入的详细信息。
如果该字段的即时属性设置为true，则单击提交按钮后，即可处理在字段中输入的新值。
与该字段关联的所有事件验证都将立即处理，而不是生命周期的过程验证阶段。

必填属性

required属性是一个布尔值标志，值为true或者false，通常用于强制检查的字段。
如果required标志设置为true，则该字段变为必填字段，并且只有输入该值后，才会进行进一步处理。
例如，required标志可以在textArea标签中用作：

<h:inputText value="#{car.id}" id="Id" required="true"></h:inputText>

这里的'required =" true""表示汽车ID是必填字段，因此会向用户显示内置错误消息-"必填值"。

requiredMessage属性

requiredMessage属性允许用户为JSF页面中的字段指定自己的错误消息。
requiredMessage属性之前是required属性。

可以按如下所示调用requiredMessage属性。

<h:inputText value="#{car.id}" id="Id" required="true" requiredMessage="Car Id is mandatory"></h:inputText>

其中消息是在inputText标记的requiredMessage属性中指定的。

对于属性

for属性标识必须为其生成标签组件的组件。
可以声明for属性并将其与id关联为

<h:outputLabel for="cname">Car Name:</h:outputLabel>
 <h:inputText id="cname" value="#{carLabel.cname}"></h:inputText>

for属性指向标签旨在使用的id组件。

大小属性

size属性设置输入文本允许的字符的宽度。
可以如下所示指定字段的大小；

<h:inputText id="cname"  size="45"></h:inputText>

cname字段中允许的最大字符为45个字符。

JSF UI组件属性示例

考虑一个名为ASF的示例JSF页面，该页面显示了各种属性；

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:h="https://java.sun.com/jsf/html">
<h:head>
	<title>Adding a Label</title>

	<script type="text/javascript">
      function validatename(cname) {
      
      var elem = cname.id;
      
      var name = document.getElementById(elem).value;
       
      var len = name.length;
       
      if(len < 4 ) {
          document.getElementById("mesg").textContent = "Car Name:Valid input";
      }
      
      else {
          document.getElementById("mesg").textContent ="Car Name:Invalid input"
      }
  }
  </script>
</h:head>
<h:body>
	<h3>Adding a label</h3>
	<h:form>
		<h:panelGrid columns="3">
			<h:outputLabel for="cname">Car Name:</h:outputLabel>
			<h:inputText id="cname" value="#{car.cname}"
				onblur="validatename(this)"></h:inputText>
			<br 
			<br 
			<h:outputLabel for="color">Car Color:</h:outputLabel>
			<h:inputText id="color" value="#{car.color}" immediate="true"
				size="20" required="true" requiredMessage="Color is mandatory"
				style="color: aqua"></h:inputText>
		</h:panelGrid>
		<br 
		<br 
		<div id="mesg"></div>
		<h:commandButton value="Submit"></h:commandButton>
	</h:form>

</h:body>
</html>

现在，我们有一个Managed Bean Car.java，如下所示。

package com.theitroad.jsf.beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class Car {
  
  private String cname;
  private String color;

  public String getCname() {
      return cname;
  }

  public void setCname(String cname) {
      this.cname = cname;
  }

  public String getColor() {
      return color;
  }

  public void setColor(String color) {
      this.color = color;
  }
     
}