文章导读

JSF/XHTML中正确处理UI组件与后端Bean交互的教程

作者 2025年9月3日 12

本教程旨在解决JSF/Xhtml页面中，HTML原生元素与JSF后端Bean交互的常见误区。我们将深入探讨如何使用JSF组件（如和)来正确绑定数据、触发后端方法，并结合展示数据，确保应用程序能够通过Facelets和JSF生命周期与Java后端逻辑无缝集成。

1. JSF与原生html元素的交互机制

在JSF (JavaServer Faces) 应用中，Facelets作为默认的视图技术，允许开发者使用xml语法构建用户界面。然而，初学者常犯的一个错误是将JSF的表达式语言 (EL) 直接应用于原生的HTML元素，期望它们能像JSF组件一样与后端Java Bean进行交互。

例如，在提供的代码片段中：

<input type="text" action="#{InternetBean.entity.ilink}"/> <button type="button" action="#{InternetBean.create}">Create</button>

这里尝试将EL表达式#{InternetBean.entity.ilink}和#{InternetBean.create}分别绑定到原生HTML 和

2. 正确使用JSF组件进行数据展示

对于数据的展示，JSF提供了强大的组件和Facelets标签。在提供的代码中，使用来遍历并展示数据是正确的实践：

立即学习“前端免费学习笔记（深入）”；

<ui:repeat value="#{InternetBean.list}" var="e">     <tr>         <td>#{e.id}</td>         <td>#{e.ilink}</td>         <td>#{e.idescription}</td>         <td>#{e.createdate}</td>     </tr> </ui:repeat>

这里，是一个Facelets标签，它能够识别并处理value属性中的EL表达式#{InternetBean.list}，从而迭代后端Bean中名为list的集合。在每次迭代中，var=”e”将当前元素绑定到变量e，其属性（如e.id、e.ilink等）可以通过EL表达式在HTML表格中正确显示。这是因为本身就是JSF/Facelets生态系统的一部分，它知道如何与JSF生命周期协同工作。

3. 正确使用JSF组件处理表单输入与动作

要实现用户输入和触发后端方法，必须使用JSF提供的UI组件。

3.1 JSF表单组件：

所有需要与JSF后端Bean交互的输入组件和命令组件（按钮）都必须被包裹在

<h:form>     <!-- JSF输入和命令组件将放在这里 --> </h:form>

3.2 JSF输入组件：

对于文本输入，应使用组件。它的value属性用于双向绑定后端Bean的属性。

<label>Not Link</label> <h:inputText value="#{InternetBean.entity.ilink}"/> <label>Açıklama</label> <h:inputText value="#{InternetBean.entity.idescription}"/>

在这里，value=”#{InternetBean.entity.ilink}”表示当用户在输入框中输入内容时，该值会自动更新到InternetBean对象的entity属性的ilink字段；反之，如果InternetBean.entity.ilink有值，它也会显示在输入框中。

3.3 JSF命令组件：

对于触发后端方法的按钮，应使用组件。它的action属性用于指定一个方法表达式，当按钮被点击时，JSF会调用该方法。

<h:commandButton action="#{InternetBean.create}" value="Create"/> <h:commandButton action="#{InternetBean.update}" value="Update"/> <h:commandButton action="#{InternetBean.delete}" value="Delete"/>

这里的action=”#{InternetBean.create}”表示当“Create”按钮被点击时，JSF将调用InternetBean中名为create的方法。value属性则定义了按钮上显示的文本。

3.4 后端Bean的命名约定

在JSF中，后端Bean通常通过@Named注解进行管理。如果@Named注解没有指定value属性（例如@Named），那么JSF会默认将类名的首字母小写作为其在EL表达式中引用的名称。例如，如果你的类是InternetBean.java，并且注解为@Named，那么在EL中应使用#{internetBean.create}（小写i）。如果指定了value，例如@Named(“MyInternetBean”)，则应使用#{MyInternetBean.create}。

示例： 如果你的后端Bean类定义如下：

import javax.inject.Named; import javax.enterprise.context.RequestScoped; // 或 @ViewScoped  @Named("InternetBean") // 明确指定名称，与EL表达式匹配 @RequestScoped // 选择合适的Scope public class InternetBean {     private Entity entity = new Entity(); // 假设Entity是你的数据模型     private List<Entity> list; // 假设这是用于表格展示的数据列表      // Getter和Setter for entity     public Entity getEntity() {         return entity;     }      public void setEntity(Entity entity) {         this.entity = entity;     }      // Getter for list (通常从数据库加载)     public List<Entity> getList() {         // 示例：实际应从数据库加载         if (list == null) {             list = new ArrayList<>();             list.add(new Entity(1, "link1", "desc1", new Date()));             list.add(new Entity(2, "link2", "desc2", new Date()));         }         return list;     }      public String create() {         // 实现创建逻辑，例如保存entity到数据库         System.out.println("Creating: " + entity.getIlink() + " - " + entity.getIdescription());         // 可以在这里添加数据库插入逻辑         return null; // 返回null表示停留在当前页面     }      public String update() {         // 实现更新逻辑         System.out.println("Updating: " + entity.getIlink() + " - " + entity.getIdescription());         return null;     }      public String delete() {         // 实现删除逻辑         System.out.println("Deleting entity with ID: " + entity.getId());         return null;     }      // 假设的Entity类     public static class Entity {         private Integer id;         private String ilink;         private String idescription;         private Date createdate;          public Entity() {}          public Entity(Integer id, String ilink, String idescription, Date createdate) {             this.id = id;             this.ilink = ilink;             this.idescription = idescription;             this.createdate = createdate;         }          // Getters and Setters for all properties         public Integer getId() { return id; }         public void setId(Integer id) { this.id = id; }         public String getIlink() { return ilink; }         public void setIlink(String ilink) { this.ilink = ilink; }         public String getIdescription() { return idescription; }         public void setIdescription(String idescription) { this.idescription = idescription; }         public Date getCreatedate() { return createdate; }         public void setCreatedate(Date createdate) { this.createdate = createdate; }     } }

在这种情况下，EL表达式#{InternetBean.create}是正确的。

4. 完整的修正后的xhtml代码示例

结合上述说明，以下是修正后的https://www.php.cn/link/cdd7da5c0696e931cef4d22f7b0cb58c代码片段，展示了如何正确地使用JSF组件：

<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"       xmlns:h="http://xmlns.jcp.org/jsf/html"       xmlns:ui="http://xmlns.jcp.org/jsf/facelets">     <h:head>         <h:outputStylesheet library="css" name="bootstrap.min.cc"/>         <title>İnternet Programcılığı</title>         <meta name="viewport" content="width=device-width, initial-scale=1.0"/>     </h:head>     <h:body>         <div id="container">             <div id="lesson">                 <h1 id="dersler"> <a href="https://www.php.cn/link/b29c5090440079d0121f4973000eeba5">Dersler</a></h1>                 <ol>                     <li> <a href="https://www.php.cn/link/cdd7da5c0696e931cef4d22f7b0cb58c">İnternet Programcılığı</a></li>                     <li> <a href="https://www.php.cn/link/bf96708cdf085ba206fc100ee802b4bb">Siber Güvenlik</a></li>                     <li> <a href="https://www.php.cn/link/de6fa2e6abc1e244d7dc3534d3c81e2a">Programlama Dilleri</a></li>                 </ol>             </div>             <div id="content">                 <!-- 数据展示部分 - 保持不变，因为ui:repeat是Facelets标签，处理EL正确 -->                 <h:form> <!-- 建议将表格也放入h:form中，如果未来有交互需求 -->                     <table border="3" width="100%" cellpadding="5" id="ipveri">                         <thead>                             <tr>                                 <th>ID</th>                                 <th>NOT LİNK</th>                                 <th>AÇIKLAMA</th>                                 <th>TARİH</th>                                </tr>                         </thead>                         <tbody>                             <ui:repeat value="#{InternetBean.list}" var="e">                                 <tr>                                     <td>#{e.id}</td>                                     <td>#{e.ilink}</td>                                     <td>#{e.idescription}</td>                                     <td>#{e.createdate}</td>                                 </tr>                             </ui:repeat>                         </tbody>                     </table>                 </h:form>                  <div>                     <!-- 输入和动作部分 - 使用JSF组件 -->                     <h:form>                         <label>Not Link</label>                         <h:inputText value="#{InternetBean.entity.ilink}"/>                         <br/>                         <label>Açıklama</label>                         <h:inputText value="#{InternetBean.entity.idescription}"/>                         <br/>                          <h:commandButton action="#{InternetBean.create}" value="Create"/>                         <!-- 更新和删除按钮通常需要一个已选择的实体ID，这里假设entity.id不为空时显示 -->                         <h:commandButton rendered="#{InternetBean.entity.id != null}"                                           action="#{InternetBean.update}" value="Update"/>                         <h:commandButton rendered="#{InternetBean.entity.id != null}"                                           action="#{InternetBean.delete}" value="Delete"/>                     </h:form>                 </div>             </div>         </div>     </h:body> </html>

5. 注意事项与总结

JSF组件与原生HTML： 始终记住，当需要与JSF后端Bean进行数据绑定或方法调用时，必须使用JSF提供的组件（如、、等），而不是原生HTML元素。原生HTML元素不会触发JSF生命周期。
的重要性：

所有需要提交数据或触发后端方法的JSF组件都必须包含在

标签内。
EL表达式： EL表达式#{…}用于访问后端Bean的属性（值表达式）或调用其方法（方法表达式）。
Bean命名： 确保EL表达式中引用的Bean名称与@Named注解中定义的名称（或默认的小写类名）完全匹配。
作用域： 后端Bean需要定义合适的作用域（如@RequestScoped, @ViewScoped, @SessionScoped等），以管理其生命周期和数据持久性。对于简单的表单提交，@RequestScoped通常足够；如果需要跨ajax请求或在单个页面视图内保持状态，@ViewScoped可能更合适。

通过遵循这些原则，您可以在JSF/XHTML应用程序中有效地构建交互式用户界面，并与后端Java逻辑进行可靠的通信。

评论（已关闭）

评论已关闭

Hello! 欢迎来到悠悠畅享网！