< 上一课 | 下一课 >

第 5 课:创建 Web 页面

在本课中,您将以 Faces JSP 文件的形式创建 Web 页面。在下一课中,您将使用在上一课中创建的数据部件和函数将数据添加至此页面。完成页面时,该页面将显示数据库中每个记录的列表。
本教程使用 JavaServer Faces(JSF)技术。JSF 提供用于为 Web 应用程序开发用户接口的框架。JSF 中的 Web 页面是 JavaServer Pages (JSP)。JSP 包含 JavaServer 控件,这些控件可用来将 Java 代码嵌入到页面中以提供动态内容。

通过模板创建 JSP 文件

  1. 在“企业资源管理器”视图中,右键单击 EGLWeb 项目中的 WebContent 文件夹,然后单击新建 > Web 页面 应选择要放置新文件的位置;否则新文件可能不会出现在您希望放置的位置。 “新建 Web 页面”窗口将打开。
  2. 文件名字段中,输入以下文件名(包括扩展名):
    allcustomers.jsp
  3. 确保文件夹字段列示了 /EGLWeb/WebContent 文件夹。
  4. 模板列表中,展开样本模板并单击系列 A(无导航) 此类别中的简单 Web 页面模板将显示在预览框中。
  5. 预览框中,单击 A_gray.htpl 模板。
  6. 确保已选中将页面链接至模板复选框。

    “新建 Web 页面”窗口如下所示:

    “新建 Faces JSP 文件”屏幕

  7. 单击完成 新的 Faces JSP 文件将在编辑器中打开。
  8. 单击设计以在完整编辑器窗口中显示设计视图。 您可能会看到位于编辑器窗口右边的“JSF 跟踪”视图。缺省情况下,Eclipse 将创建此视图,此视图与“选用板”视图和其他视图共享空间。在本教程中,您不需要使用“JSF 跟踪”视图。可以通过单击选项卡中的 X 来关闭此视图。
    “JSF 跟踪”视图可能显示了一个黄色的警告三角形。
    通常,您想要在此视图中显示选用板。您可能需要单击小的双箭头,并从菜单中选择“选用板”视图:
    选择“选用板”视图。
  9. 在新的 allcustomers.jsp 文件中,除去缺省文本“请在此处输入页面内容”,并将其替换为以下文本:
    所有客户的列表
  10. Enter 键三次以插入空白行。 这些行保留了供您在下一课向此页面添加内容的空间。

    该页面如下所示:

    页面的外观

  11. 保存该文件。

服务器上的 Web 页面的预览

Web 页面上还没有任何来自数据库的数据,但您可在 web 应用程序服务器上运行 JSP 文件并查看至今为止页面的外观。这是一个重要步骤;它可在页面变得复杂之前确保应用程序服务器正常工作。
  1. 确保应用程序服务器已启动。服务器名称应在服务器视图中可视(缺省情况下位于“编辑器”视图下)。服务器应在名称后面显示用方括号括起来的两个词语:已启动已同步。否则,请右键单击服务器名称并单击启动。完成启动过程可能要花几分钟。
    WebSphere Application Server 已启动并同步
  2. 在“企业资源管理器”视图中,必要时请展开 EGLWeb/WebContent 文件夹。右键单击 allcustomers.jsp 文件,然后单击运行方式 > 在服务器上运行 “定义新的服务器”窗口将打开。
  3. 在“定义新的服务器”窗口中,选择服务器。
  4. 选中运行此项目时始终使用此服务器复选框。
    已选择服务器。
  5. 单击完成

该 Web 页面将在工作台内的 Web 浏览器中打开。该页面如下所示:

内部 Web 浏览器中的该页面的外观

如果您发现 HTTP 404 错误消息(找不到页面),请重新启动服务器并刷新浏览器窗口。

如果愿意使用外部 Web 浏览器,那么可复制工作台内 Web 浏览器中的 URL 并将其粘贴到外部 Web 浏览器地址字段中。

Eclipse 可能会再次显示“JSF 跟踪”视图。您可以采用以下方法永久除去此视图:向下滚动,直到发现一个链接的内容是请勿再次打开,单击该链接。
用于处理“JSF 跟踪”视图的选项。

此页面上还没有任何数据。在下一课中,您会使用 EGL 向此页面添加数据。

< 上一课 | 下一课 >

反馈