本文将探讨在JSF/Xhtml应用中，如何正确使用JSF组件来处理表单提交、数据绑定和方法调用，而非直接依赖原生html元素。我们将重点讲解<h:commandButton>和<h:inputText>等JSF标签与Java EE Managed Bean的集成，以实现功能完善的用户交互，并纠正常见的错误用法。
在javaserver faces (jsf) 开发中，尤其是在使用xhtml作为视图层时，开发者常遇到的一个误区是将原生html元素与jsf的表达式语言 (el) 混用，期望它们能像jsf组件一样自动处理数据绑定和方法调用。然而，jsf框架的核心在于其组件模型和生命周期，原生html元素并不能直接参与其中。
JSF组件与原生HTML元素的区别
JSF提供了一套丰富的ui组件库，如<h:commandButton>、<h:inputText>、<h:datatable>等。这些组件在服务器端由JSF框架管理，它们能够理解并处理EL表达式（如#{bean.Property}或#{bean.method}），从而实现数据绑定、事件处理和验证等功能。当JSF页面被渲染时，这些JSF组件会被转换为相应的原生HTML元素发送到客户端浏览器。
相反，原生HTML元素（如<button>、<input type=”text”>、<table>）仅仅是静态的标记，它们不会被JSF框架在服务器端进行特殊处理。这意味着，像action=”#{InternetBean.create}”这样的EL表达式如果直接应用于原生HTML元素的action属性，将不会被JSF解析和执行，从而导致预期的服务器端方法无法触发。
正确处理表单提交：使用<h:commandButton>
要触发JSF Managed Bean中的方法，例如在点击按钮时执行数据创建、更新或删除操作，必须使用JSF提供的命令组件，最常见的是<h:commandButton>。
错误示例：
立即学习“前端免费学习笔记（深入）”；
<button type="button" action="#{InternetBean.create}">Create</button>
此处的action属性是原生HTML <button> 元素的属性，JSF不会对其进行解析以调用Managed Bean方法。
正确做法：
使用<h:commandButton>组件，并将其action属性绑定到Managed Bean的方法。
<h:commandButton value="Create" action="#{InternetBean.create}" /> <h:commandButton value="Update" action="#{InternetBean.update}" rendered="#{InternetBean.entity.id != null}" /> <h:commandButton value="Delete" action="#{InternetBean.delete}" rendered="#{InternetBean.entity.id != null}" />
注意事项：
- <h:commandButton>通常需要放置在<h:form>标签内才能正确提交数据并触发action。
- value属性用于设置按钮上显示的文本。
- action属性指向Managed Bean中一个无参数或返回String（用于导航）的方法。
- rendered属性可用于根据条件控制组件的显示，例如在编辑模式下才显示“更新”和“删除”按钮。
正确处理输入数据绑定：使用<h:inputText>
对于用户输入的数据，要将其绑定到Managed Bean的属性上，也需要使用JSF的输入组件，如<h:inputText>。
错误示例：
立即学习“前端免费学习笔记（深入）”；
<input type="text" action="#{InternetBean.entity.ilink}"/> <input type="text" action="#{InternetBean.entity.idescription}"/>
这里的action属性被错误地用作数据绑定。原生HTML <input> 元素没有JSF的value属性来支持EL表达式的数据绑定。
正确做法：
使用<h:inputText>组件，并将其value属性绑定到Managed Bean的属性。
<h:outputLabel for="noteLink">Not Link</h:outputLabel> <h:inputText id="noteLink" value="#{InternetBean.entity.ilink}" /> <h:outputLabel for="description">Açıklama</h:outputLabel> <h:inputText id="description" value="#{InternetBean.entity.idescription}" />
注意事项：
- <h:inputText>的value属性支持双向绑定，即既可以显示Bean属性的值，也可以在表单提交时将用户输入的值更新到Bean属性。
- 通常会配合<h:outputLabel>使用，通过for属性关联输入框，提升可访问性。
- 输入组件也应包含在<h:form>标签内。
关于Managed Bean的命名约定
JSF通过EL表达式查找Managed Bean。Managed Bean的名称通常由其类名决定，或者通过@Named注解的value属性明确指定。
- 如果一个Managed Bean类（例如InternetBean.java）使用了@Named注解但没有指定value，那么它的EL名称通常是类名首字母小写，例如internetBean。
- 如果@Named(“MyCustomBean”)，那么EL名称就是myCustomBean。
- 在您的代码中，如果Managed Bean类名为InternetBean且没有指定@Named的value，那么正确的EL表达式应该是#{internetBean.create}（小写开头）。如果指定了@Named(“InternetBean”)，那么#{InternetBean.create}才是正确的。请根据您的Managed Bean定义进行核对。
修正后的xhtml代码示例
结合上述原则，以下是修正后的internetprog.xhtml片段，展示了如何正确使用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" xmlns:f="http://xmlns.jcp.org/jsf/core"> <!-- 添加f命名空间用于可能的转换器/验证器 --> <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="../index.xhtml">Dersler</a></h1> <ol> <li> <a href="internetprog.xhtml">İnternet Programcılığı</a></li> <li> <a href="siber.xhtml">Siber Güvenlik</a></li> <li> <a href="programlama.xhtml">Programlama Dilleri</a></li> </ol> </div> <div id="content"> <!-- 表格部分，ui:repeat用于数据显示，EL表达式 #{e.id} 等通常工作正常 --> <h:form> <!-- 表格也应包含在h:form中，如果需要与后端交互，例如选择行 --> <h:dataTable value="#{InternetBean.list}" var="e" border="3" style="width:100%" cellpadding="5" id="ipveri"> <h:column> <f:facet name="header">ID</f:facet> #{e.id} </h:column> <h:column> <f:facet name="header">NOT LİNK</f:facet> #{e.ilink} </h:column> <h:column> <f:facet name="header">AÇIKLAMA</f:facet> #{e.idescription} </h:column> <h:column> <f:facet name="header">TARİH</f:facet> #{e.createdate} </h:column> </h:dataTable> </h:form> <div> <h:form> <!-- 每个需要提交数据的表单都应该是一个h:form --> <h:outputLabel for="noteLinkInput">Not Link</h:outputLabel> <h:inputText id="noteLinkInput" value="#{InternetBean.entity.ilink}"/> <h:outputLabel for="descriptionInput">Açıklama</h:outputLabel> <h:inputText id="descriptionInput" value="#{InternetBean.entity.idescription}"/> <h:commandButton value="Create" action="#{InternetBean.create}"/> <!-- 假设update和delete需要一个ID来操作，这里简化处理 --> <h:commandButton value="Update" action="#{InternetBean.update}" rendered="#{InternetBean.entity.id != null}"/> <h:commandButton value="Delete" action="#{InternetBean.delete}" rendered="#{InternetBean.entity.id != null}"/> </h:form> </div> </div> </div> </h:body> </html>
关于ui:repeat和<h:dataTable>： 虽然原始代码中的ui:repeat结合原生<table>可以用于数据显示，但JSF提供了更强大的<h:dataTable>组件，它能更好地集成JSF的特性，例如自动生成表头、支持分页、排序等。在上面的修正代码中，我将<table>替换为<h:dataTable>以展示更专业的JSF用法。
总结与最佳实践
- 使用JSF组件： 始终使用JSF提供的组件（如<h:commandButton>、<h:inputText>、<h:outputLabel>等）来处理用户交互、数据输入和显示，以便充分利用JSF的组件模型和生命周期。
- EL表达式： EL表达式#{…}是JSF与Managed Bean通信的桥梁，它必须应用于JSF组件的相应属性（如action、value），而非原生HTML元素的属性。
- <h:form>的重要性： 所有需要提交数据或触发Managed Bean方法的JSF组件都必须包含在<h:form>标签内。一个页面可以有多个<h:form>。
- Managed Bean命名： 确保EL表达式中引用的Managed Bean名称与@Named注解或JSF默认命名规则一致。
- 清晰的结构： 保持XHTML代码结构清晰，合理使用JSF组件可以使页面逻辑更易于理解和维护。
遵循这些原则将帮助您构建健壮且功能完善的JSF应用程序，避免因混淆原生HTML与JSF组件而导致的常见问题。
评论（已关闭）
评论已关闭