jsf用于页面判断的标签_JSF –在JSF视图页面中添加标签，图像，按钮和文本字段

最新推荐文章于 2024-09-14 18:46:05 发布

cunchi4221

最新推荐文章于 2024-09-14 18:46:05 发布

阅读量490

点赞数

文章标签： java vue html python css ViewUI

原文链接：https://www.journaldev.com/6543/jsf-adding-labels-image-button-and-text-field-in-jsf-view-pages

版权

jsf用于页面判断的标签

There are various UI components that JSF framework includes by default. Let us see some of the most useful ones to render a view. These are different from the traditional HTML tags.

默认情况下，JSF框架包含各种UI组件。让我们看一些最有用的渲染视图。这些与传统HTML标签不同。

标签组件 (Label Component)

The tag is used to add a label in the view page. The ‘for’ attribute in the tag is used to associate the field as form element when the for attribute value matches with the id of the element.

标签用于在视图页面中添加标签。当for属性值与元素的ID匹配时，标记中的'for'属性用于将字段与表单元素相关联。

Let’s add a label for the JSF page named label.xhtml
label.xhtml

让我们为JSF页面添加一个名为label.xhtml的标签。
label.xhtml

<?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>
</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}"></h:inputText>
<br /><br />
<h:outputLabel for="color">Car Color:</h:outputLabel>
<h:inputText id="color" value="#{car.color}"></h:inputText>
</h:panelGrid>
</h:form>

</h:body>
</html>

Here the tag is used to add label “CarName” and “CarColor” which is associated with cname,color attribute of the text field as specified in the for clause.

在这里，标签用于添加标签“ CarName”和“ CarColor” ，它们与for子句中指定的文本字段的cname，color属性相关联。

创建一个托管bean Car.java (Create a manged bean Car.java )

Car.java

package com.journaldev.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;
    }

}

To render a particular page after running the project, point the browser to the URL containing the xhtml page. For example , to render label.xhtml, run the project and then type in the complete url:

要在运行项目后呈现特定页面，请将浏览器指向包含xhtml页面的URL。例如，要渲染label.xhtml，请运行项目，然后键入完整的url：

localhost:8080/JSF_Labels/faces/label.xhtml

本地主机：8080 / JSF_Labels / faces / label.xhtml

Alternatively, you can also right click on the label.xhtml page and select “Run file” if you are using NetBeans IDE. This is a shown below.

另外，如果您使用的是NetBeans IDE，也可以右键单击label.xhtml页面并选择“运行文件” 。如下图所示。

Now run the application which displays the following output as shown below

现在运行显示以下输出的应用程序，如下所示

新增图片 (Adding Image)

The tag is used to render the image in the JSF view page. The url attribute tells the path from which the image should be picked up for display.

标签用于在JSF视图页面中渲染图像。 url属性告诉应该从中拾取图像进行显示的路径。

image.xhtml

<?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:body>
	
	<h3>Adding Images</h3>
	
		<h:graphicImage value="/car.jpg" />
	
</h:body>

</html>

Here the url attribute specifies the path of the image.

此处的url属性指定图像的路径。

Output:

输出：

新增按钮 (Adding Button)

The renders a submit button in the page where a user can enter the values with the associated text fields or UI elements and submit these to perform various operations.

呈现页面中的“提交”按钮，用户可以在其中输入带有关联文本字段或UI元素的值，然后提交这些值以执行各种操作。

button.xhtml

<?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://xmlns.jcp.org/jsf/html">
<h:head>
<title>Add a button</title>
</h:head>
<h:body>
<h:form>
<h:outputLabel for="cname">Car name</h:outputLabel>
<h:inputText id="cname" value="#{carLabel.cname}"></h:inputText>
<br /><br />
<h:commandButton id="submit" action="cardetails" value="Submit" />

</h:form>

</h:body>
</html>

Create the cardetails.xhtml page which displays the details of the car.

创建cardetails.xhtml页面，其中显示汽车的详细信息。

cardetails.xhtml

<?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>Car Details</title>
</h:head>
<h:body>
       #{car.cname}
</h:body>
</html>

Above defined Car.java class will work for this.

上面定义的Car.java类将为此工作。

Run the application after the above said changes and the below output is seen:

在上述更改之后运行应用程序，并看到以下输出：

添加文本字段 (Adding Text Fields)

JSF provides three varieties of text field tags.They include h:inputText – The tag adds a textbox next to the label field where user can enter the values.

JSF提供了三种文本字段标签。它们包括h：inputText –该标签在标签字段旁边添加了一个文本框，用户可以在其中输入值。

inputtext.xhtml

<?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>
</h:head>
<h:body>
<h:form>
<h3>Adding input Text</h3>
<h:panelGrid columns="3">
<h:outputLabel for="cname">Car Name:</h:outputLabel>
<h:inputText id="cname" value="#{car.cname}"></h:inputText>
<br /><br />
<h:outputLabel for="color">Color:</h:outputLabel>
<h:inputText id="color" value="#{car.color}"></h:inputText>
<br /><br />
</h:panelGrid>
</h:form>
</h:body>
</html>

After making the above said changes run the application which produces the following output in the browser as shown below:

完成上述更改后，运行应用程序，该应用程序将在浏览器中产生以下输出，如下所示：

h:inputSecret – This tag is used for password fields where the password entered is masked/hidden. The usage of this tag is as below.

h：inputSecret –此标记用于密码字段，其中输入的密码被屏蔽/隐藏。该标签的用法如下。

Create a Managed Bean named Login which validates the entered username and password
Login.java

创建一个名为Login的托管Bean，以验证输入的用户名和密码
Login.java

package com.journaldev.jsf.beans;

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

@ManagedBean
@SessionScoped
public class Login {

    private String uname;
     private String password;

    public String getUname() {
        return uname;
    }

    public void setUname(String uname) {
        this.uname = uname;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String UservalidOrnot() { 

       if(uname.equals("adam") && password.equals("adam")) {
           return "success";
       }  else {
           return "failure";
       }
    }

}

Create the JSF page for login page as;

创建JSF页面作为登录页面；

login.xhtml

<?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>Login </title>
</h:head>
<h:body>
<h3>Hiding Input text</h3>
<h:form id="login">
<h:panelGrid columns="3">
<h:outputLabel for="uname">UserName:</h:outputLabel>
<h:inputText id="uname" value="#{login.uname}" ></h:inputText>
<br /><br />
<h:outputLabel for="password">Password</h:outputLabel>
<h:inputSecret id="password" value="#{login.password}"></h:inputSecret>
<br /><br />
<h:commandButton value="Submit" action="#{login.UservalidOrnot}"></h:commandButton>
</h:panelGrid>
</h:form>
</h:body>
</html>

Now we create success and failure pages rendered respectively depending on the correct or incorrect username and password fields.

现在，我们根据正确或不正确的用户名和密码字段分别创建成功页面和失败页面。

success.xhtml

<?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>Facelet Title</title>
</h:head>
<h:body>
       Valid Username and Password
</h:body>
</html>

failure.xhtml

<?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>Facelet Title</title>
</h:head>
<h:body>
        UserName or password is invalid.Please Login with correct username and password.
</h:body>
</html>

Once we are done with the above said changes run the program.

完成上述更改后，请运行程序。

Here the password entered is hidden from other users.

在此输入的密码对其他用户隐藏。

h:inputtextarea – This tag allows user to add text of huge number of characters/lines that does not fit into a text field. Examples include area for writing email content, feedbacks, product review details etc.

h：inputtextarea –该标签允许用户添加大量字符/行的文本，这些文本不适合文本字段。示例包括用于编写电子邮件内容，反馈，产品评论详细信息等的区域。

textarea.xhtml

<?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>Facelet Title</title>
</h:head>
<h:body>
<h3> Text area</h3>
<h:form>
<h:panelGrid columns="3">
<h:outputLabel for="description">Description:</h:outputLabel>
<h:inputTextarea id="description" value="The number of characters are very huge.It keeps on increasing based on the requirement"></h:inputTextarea>
<br /><br />
</h:panelGrid>
</h:form>

</h:body>
</html>

Output:

输出：

The project structure looks as below:

项目结构如下：

This post is all about adding UI components in JSF Framework view pages. We will be looking into JSF Resource Bundle and Custom Messages in the coming tutorial. In the mean time, you can download the project from below link and play around with it to learn more.

这篇文章全部关于在JSF Framework视图页面中添加UI组件。在接下来的教程中，我们将研究JSF Resource Bundle和Custom Messages。同时，您可以从下面的链接下载该项目并进行试用以了解更多信息。

Download JSF UI Tags Project 下载JSF UI标签项目