Java之JSF框架案例详解

这是一个分为两部分的系列，其中我介绍了JSF 2及其如何适合Java EE生态系统。

在第1部分中，我将介绍JavaServer Pages（JSF）背后的基本思想 ，在第2部分中，将介绍Facelets声明语言 。

在构建Web应用程序时，我们为最终用户提供了一种与我们的应用程序进行交互的方式，这就是JSF所提供的。

我将向您介绍MVC设计模式以及如何使用它，并且您将发现Facelets视图语言及其使用方式，如何将数据和事件绑定到上下文以及如何通过表达语言来实现。

我将通过查看替代模板框架（例如Primefaces）来说明AJAX是如何本地支持的以及生态系统的可插入性。

应用结构

Java EE应用程序通常是分层应用程序 。 好吧，我在本文中谈论的层是表示层。 表示层负责访问者在访问您的网站时所看到的内容。

这是用户与您的网站进行交互的方式，应尽可能地方便用户使用 。 幸运的是，借助诸如JSF之类的Java EE API很难做到这一点。 在JSF API包括很多便利，使开发人员能够提供高品质的用户体验的开箱和用很少的设计知识。

MVC设计模式

让我们先来看一下Model View Controller设计模式，该模式也称为MVC。

MVC是用于实现用户界面的体系结构模式，该用户界面将Web应用程序分为三个逻辑连接的部分。 这样做是为了将数据的内部表示形式与数据的表示方式分开。

JSF实际上是古典意义上的MVC框架 ，其中使用Facelets声明语言构建视图，并且模型由CDI托管bean表示，控制器由JSF引擎本身负责。

在以后的文章中，我将对CDI托管bean及其扮演的角色有更深的了解。

查看：Facelets

Facelets是用于构建JSF视图和可重用复合组件的视图声明语言。 通常，通过组合复合组件，表达式语言和标签库，将视图构建为XHTML页面。

我们不会在标签库或复合组件的构造方面进行详细介绍。 这些超出了本课程的范围。 尽管如此，我们将研究如何使用表达式语言来绑定CDI bean和用来自应用程序内部层的数据替换视图中的值。

复合组件

复合组件是按给定方式运行的可重用代码段，例如接受用户输入的输入字段。 他们可以附加验证器，侦听器和其他元素，以提供更多有用的交互功能。

但是，Facelets不是我们工具包中仅有的模板语言。 实际上，围绕第三方组件库的社区非常繁忙。

可插拔库

可插拔的库（例如PrimeFaces ， Apache MyFaces和ICEFaces ）都提供了复合组件，这些组件为视图增加了实质性功能，从而增强了用户体验。 实际上，我们将在应用程序中使用PrimeFaces的组件，并且稍后将在本课程中看到其示例。

导航

Facelets使导航变得简单。 您可以仅将视图名称传递给组件的操作，而JSF引擎负责定位和呈现视图。

这是一个代码段，您可以在其中看到管理仪表板模板已传递到“取消”按钮的action属性。 这是单击按钮时将呈现的模板。

<p:commandButton value="Cancel" action="/admin/dashboard" />

型号：装订

CDI bean处理了模型部分，并且将它们绑定到视图的方式是通过表达语言。 数据和事件的绑定都是通过这种方式完成的，稍后我们将看到很多示例。

在这里，您可以看到数据绑定的示例。 我们正在做的是将帐户CDI bean的名称字段绑定到页面的上下文。 呈现后，名称字段的值将在视图中替换，并在屏幕上显示给最终用户。

Welcome <p>#{account.name}</p>

AJAX和HTML 5

通过使用内置JavaScript资源库，可以直接使用AJAX。 f：ajax标记无需任何编码即可将AJAX功能添加到任何UI组件。

此代码段显示了AJAX是为“提交”按钮上的鼠标单击事件触发的。

<h:commandButton id="submit" value="Submit"> 
    <f:ajax event="click" /> 
</h:commandButton>

现在，让我们继续使用Facelets声明语言本身。 语言语法基于标签的概念，其中每个标签代表某种功能，并通过一起使用这些标签来构造视图。