JSF与后端Bean交互教程详解

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 <input> 和 元素的 action 属性上。然而，原生HTML元素的 action 属性是用于指定表单提交的目标URL或按钮的客户端行为，它们并不会被JSF框架解析以触发后端Java Bean的方法或进行数据绑定。JSF的EL表达式只有在JSF组件（如、等）的特定属性上才会被JSF生命周期处理。

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交互的输入组件和命令组件（按钮）都必须被包裹在标签内。是JSF表单的核心，它负责处理表单提交、数据转换、验证和更新模型值等JSF生命周期阶段。

<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代码示例

结合上述说明，以下是修正后的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">
    <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是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逻辑进行可靠的通信。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~