基本思想只是面向对象设计的扩展:分离程序的关注点。与您可以制作几个不同的 PERL 脚本并将它们串在一起工作的方式相同,我们将制作几个不同的 JSF 组件并将它们串在一起工作。
我们以一个简单的注册表单为例。我想知道你的姓名、出生日期、地址,并将这些都提交到后端进行工作。
我们需要做的第一件事就是将您的表单分解为符合逻辑的部分。如果我们知道我们将在很多不同的地方重复使用这个精确的表格,也许这个表格本身就是一个合乎逻辑的部分。在这种情况下,我们可以创建一个组件来呈现整个表单并将其绑定到一个像“Contact”这样的 bean。这样,任何时候您需要使用该表单,您都可以将其转储,将其绑定到 Contact bean(具体方式取决于您的框架),然后从那里开始。但这会使这成为一个相当乏味的例子。 :)
据我估计,我将姓名、出生日期和地址视为三个独立的逻辑单元。名字可能很简单。只是一个标准的文本输入。所以我们可以使用 h:inputText 元素,或者您的框架的首选版本,并将其与您的 bean 的名称字段联系起来。
第二,我们有出生日期。最简单的方法是,我们可以创建一个 h:inputText 字段并添加一个 f:converter 元素,这样当我们将它绑定到 bean 时,它就会出现一个日期。您可以将其扩展为一个完全交互式的日历小部件,包括 Java Script 等等。查看 IceFaces 和 RichFaces 以获得一些很好的示例。但同样的核心概念仍然存在:您将绑定到日期对象的单个组件。
第三,我们有地址。这对于组件来说是一个很好的选择,因为您可能需要知道许多不同页面中的地址。它也比单个输入复杂得多。你需要结合多个输入、验证和有趣的 ajaxy 东西来制作一个单一的有凝聚力的单元。但是,使用它的开发人员希望只需要使用
<foo:address value="#{BarBean.address}"/>
可能还有其他几个选项。
这种关注点的分离不仅是基于组件的网页设计的核心,也是面向对象编程本身的核心。还有很多工具可以让这更容易! Facelets 就是一个很好的例子。您可以将基本布局分离到自己的工作表中,只需通过 ui:define 元素注入有用的内容。您可以创建组合组件,让您无需深入研究 JSF 组件框架即可快速创建更多有用的组件;使用 Facelets 组合组件,地址示例将非常简单。 IceFaces 是另一个很好的例子。它处理各种 AJAXy 类型的输入、重绘和更新,而我不必担心它是如何工作的(在大多数情况下。;)让我专注于表单要完成的内容,而不是如何完成表单。
这只是表面问题,但最广泛的笔触类似于任何大型程序:确定最小的、符合逻辑的部分并在使用它们构建更大的部分之前构建它们。