JSF/XHTML中正确处理表单提交与数据绑定的教程-html教程-PHP中文网

JSF/XHTML中正确处理表单提交与数据绑定的教程

本文将探讨在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>。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

错误示例：

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

<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组件而导致的常见问题。

以上就是JSF/XHTML中正确处理表单提交与数据绑定的教程的详细内容，更多请关注php中文网其它相关文章！