java中的sever窗口_构建您的第一个 JavaServer 页面 (JSP)

构建您的第一个 JavaServer 页面 (JSP)

构建您的第一个 JSP 页面

目的

本教程的主要目的是为新用户提供构建简单 JSP 页面的基本技术。该课程介绍了如何使用 JDeveloper 10g 的可视化 JSP 和 HTML 编辑环境，并引导用户完成一组通用 Web 应用程序设计步骤，如格式化 HTML，使用图像、CSS、HTML 表 Form 元素以及如何在可视化编辑器中使用定制 JSP 标记。

所需时间

大约 1 小时。

主题

本课程将讨论以下主题：

概述

本教程将介绍 JDeveloper 10g 的 JSP 和 HTML 可视化编辑环境，并将引导用户逐步完成使用通用 HTML 和 JSP 元素(包括 HTML 格式化)以及使用图像、CSS、HTML 表和表单的基本步骤。本教程还将提供对 JSP 标记和元素用法的基本介绍，但不需要 Java 方面的知识。

前提条件

为使本课程顺利进行，您需要先完成以下准备工作：

1.

安装 Oracle JDeveloper 10g。

查看屏幕截图

将鼠标移到该图标上可以显示所有屏幕截图。还可以将鼠标移到特定的图标上来查看相关的屏幕截图。注意：如果您打开所有屏幕截图，在网速较慢时，响应时间可能会比较长。

HTML 格式化

首先，该步骤将引导用户构建一个工作空间、项目和一个初始 JSP。然后，将演示如何执行通用的 HTML 格式化，如添加粗体、更改字体颜色以及对齐等。

创建一个新的工作空间、项目和 JSP

1.

在 Applications Navigator 中，右键单击 Applications 并从上下文菜单中选择 New Application Workspace。

2.

在 Create Application Workspace 对话框中，将应用程序名称设置为 simple_jsp。将 Application Package Prefix 保留为空，对 Application Template 选择 No Template [ All Technologies ]。单击 Ok 生成 Application Workspace 和空项目。

您现在拥有一个新的 Application Workspace 和空项目。

3.

在 Navigator 中，右键单击新的空项目，并选择 New... 调用 New Gallery。在 New Gallery 中，打开 Web Tier 节点，选择 JavaServer Pages (JSP) 类别并双击 JSP Page项。

4.

将 JSP 文件命名为 simple.jsp，并单击 Ok 生成一个空的 JSP 页面。

在 JSP 可视化编辑器中将显示您的新 JSP 页面。

5.

注意，JSP/HTML 可视化编辑环境实际上是可视化编辑器和源编辑器的组合，左下方的 Structure Pane 用于对页面中的所有元素进行分层访问，右下方的 Property Inspector 用于进行属性设置，右上方的 Component Palette 用于在 JSP/HTML 页面中插入新标记/元素。

6.

可选择拆分编辑器视图以同时显示可视化编辑器和源代码视图。在编辑器顶部的 simple.jsp 选项卡上，右键单击并选择 Split Document。JDeveloper 随后将同时显示 JSP 的可视化视图和源视图。

既可以选择 Unsplit Document 以返回到全可视化编辑，也使源视图保持打开状态并同时编辑 JSP。

Html 格式化

1.

单击 JSP 可视化编辑器，然后输入一些文本。例如，Intro to JSP Visual Editing。

2.

输入文本后，单击顶部工具栏上的左下拉菜单，并选择 Heading 2 对文本应用 H2 格式。

选择后，文本将立即以新的 H2 格式显示。

3.

输入回车符，并将格式切换回段落。然后，输入一段任意文本。

可以将以下文本复制和粘贴到编辑器中：

This is a paragraph of random text.This text will be used to demonstrate how to format HTML in the JSP/HTML visual editor .This is a paragraph of random text.This text will be used to demonstrate how to format HTML in the JSP/HTML visual editor.

4.

使用鼠标选择一部分文本，然后单击工具栏上的 B 按钮将其设置为粗体。

5.

选择文本的另一部分文本，然后单击 I 按钮将该文本设置为斜体。

6.

选择其他文本并选择字体 Times New Roman，应用字体格式，然后指定大小为 5。

7.

现在，应用某种颜色格式。再次选择一些文本，然后单击 Foreground Color，选择一种颜色将其应用于该文本。

可以随意尝试不同的格式组合。

8.

现在，我们将应用某种对齐格式。选择整个段落，并单击工具栏中的 Align Right 按钮。

选择其他对齐，并在应用它们时查看源代码的变化。

对列表应用格式

1.

在前面编辑的段落下，在每个单独的段落中输入以下文本：one, two, three.(在每个单词之后输入一个回车符。)选择所有三个段落，然后单击工具栏上的 unordered 列表按钮。

查看代码视图中的代码变化。

2.

现在，输入其他列表元素：four, five.查看可视化编辑器如何应用列表格式。

3.

在可视化编辑器或 Structure Pane 中，再次选择整个列表。单击工具栏上的 ordered 列表按钮。

4.

选择列表元素的子集，然后单击工具栏上的缩进按钮对这些元素进行缩进操作。将子列表更改为无序列表。

进一步尝试缩进和伸出列表项。

添加链接

1.

下面说明如何将链接(带 uri 的锚点)关联到某个现有文本。

使用鼠标在 JSP 中选择一部分文本或单个单词。例如，在文本段落中选择单词 visual editor。

在 Component Palette 中，从顶部的下拉列表中选择 HTML 模板页面。然后，单击模板上的 Link 元素。将显示一个对话框，可以在其中输入 URL:。输入一个有效 URL，如：http://oracle.com。

单击 OK 插入链接信息后，您将看到选定的文本在编辑器中呈现为一个链接。

2.

还可以将文本和关联链接同时插入到页面中，而不必使用原先存在的文本。为此，可以将 List 元素从 Component Palette 中拖放到页面中的任何区域，然后输入链接的 URL和text。

使用图像

本教程部分将说明如何在 JDeveloper 10g 中使用图像。

1.

将 Oracle 图像：

从浏览器拖放到 JDeveloper 中的 JSP 中。回答 Yes 将图像保存到应用程序的 Document Root 中。

可以直接从 Windows 桌面和浏览器中拖放图像。

2.

通过拖动图像右下方的一个抓点来调整 Oracle 图像的大小。

3.

右键单击图像并选择 Reset Size 将图像恢复为原始大小。

注意，您还可以通过使用 Property Inspector 中的任务链接 Reset Link 来重置大小。

4.

作为一个可选步骤，使用 Component Palette 添加一个图像。在 Component Palette 上，选择下拉列表上的 HTML。这将显示 HTML 元素。现在，将 Image 元素拖放到 JSP 页面中。在此对话框中，找到同一 Oracle 图像，并将其插入到该页面中。

5.

将该图像移动到页面中的不同位置，方法是首先单击它以选中它，然后将其拖动到其他位置。

还可以尝试在可视化编辑器中复制、粘贴和剪切/删除该图像。

使用 CSS

这些步骤介绍了如何在 JDeveloper 10g 中使用 CSS。

应用 CSS 样式并进行定制。

1.

将 CSS 样式添加到 JSP，方法是首先将 Component Palette 切换到 CSS，然后将 jdeveloper 样式拖动到页面。查看页面的外观变化。切换到 Source 视图，并观察代码变化。

2.

注意，导航器中添加了一个新文件 css/ jdeveloper.css。双击该文件，对其进行编辑。注意代码编辑器中的高亮显示的颜色。还要注意 Structure Pane 中的 CSS 结构。

3.

更改 CSS 文件中的 H2 项的 color 属性。在 Structure Pane 中，单击 H2 并在 Property Inspector 中更新 color 值。使用颜色选择器选择一种其他颜色。

4.

返回到 JSP 可视化编辑器，单击 refresh 按钮查看变化。

将 CSS 添加到 Component Palette

1.

右键单击 Component Palette 并选择 Add Component。

使用文件浏览器找到任易的 CSS 文件，添加到模板。如果没有不同的 CSS，则只需选择同一样式表 jdeveloper.css(位于 public_html/css 子目录中)，然后使用一个不同的名称。

HTML 表

这些步骤介绍了如何在 JSP/HTML 可视化编辑器中使用 HTML 表。

1.

将 HTML 表添加到 JSP，方法是从 HTML Component Palette 页面中拖放一个 table 元素。在该对话框中，接受默认设置并单击 OK。

2.

在 HTML 单元格输入一些 HTML 内容。

3.

单击右下方单元格并输入一个 Tab ，添加一个新行。表底部将显示一个新行。

4.

选择整个第二行，使用 Ctrl-C 复制内容，然后单击新空行，使用 Ctrl-V 粘贴内容。

注意：要选择整个行，既可以从行首到行尾拖动鼠标选择该行，也可以将光标置于行中，然后右键单击并选择：Table-> Select Row。

5.

进一步试用 Table 上下文菜单选项。插入并删除列和行。拆分和合并单元格等。

HTML 表单

这些步骤介绍了如何使用 HTML 表单元素。

1.

在同一页上，添加一个文本字段，方法是从 HTML Component Palette 页面拖放 Text Field 元素。注意 JDeveloper 如何帮助添加所需的表单元素。单击 Yes 继续输入文本字段。使用 Property Inspector，将 size 属性设置为 30，并将 name 属性设置为 name。

注意，显示的表单元素为一个由红色点线围绕着的文本字段。在该字段的左侧添加提示，文本为 Name:。

2.

将光标置于文本字段的右侧，然后输入一个新段落(回车符)。在下一行中，添加文本 Address:，然后添加来自于 Component Palette 的 Text Area 元素。使用 Property Inspector，设置 cols 属性为 30，并将 name 设置为 address。

3.

在文本域下方输入一个新行，并将 DropDown 元素拖放到页面中，添加一个下拉列表。下拉列表出现后，双击它，调用 ComboBox 编辑器。

将 name 设置为 country，并将 size 设置为 1。(不要选中 Allow Multiple Selections 复选框。)

单击 New 按钮在列表中添加一个新 Options:。将 Value 和 Caption 字段分别编辑为 us 和 United States。单击 New 按钮并编辑值和标题，添加其他国家选项。(可以使用：uk 和 United Kingdom，fr和 france。)

4.

添加提交按钮，定义表单动作前，我们将创建一个 JSP 页面，作为表单提交的目标。采用与之前的步骤 1 相同的操作方法，创建一个名称为 results.jsp 的新 JSP。我们稍后将在步骤 6 中编辑此页面。

5.

返回到表单所在的原始页面，添加一个 HTML 的 Submit Button 按键，然后将其置于国家选择控制下的表单内部。

6.

现在，我们将设置 HTML 表单的 action 属性。要在可视化编辑器中选择表单，在表单内单击，然后右健单击并选择 Form -> Select Form Tag。选择表单后，可以在 Property Inspector 中将 action 属性设置为 results.jsp。如果从下拉列表中获取 results.jsp 值，则需要删除添加到 results.jsp 操作名称的“/”字符。

JSP 标记

这些最后的步骤介绍了如何在可视化编辑器中使用基本的 JSP 标记。

1.

在新的 results.jsp 页面中，我们将首先添加一个 JSP 表达式，以显示从上一页中的表单中传来的 name 参数。在 Component Palette 中，选择 JSP 页面。将 Expression 元素拖放到该页面。您应在可视化编辑器中看到一个表示 JSP 表达式的图标。双击该图标，编辑它的值。

在编辑器对话框中输入以下内容：request.getParameter("name")。单击 OK 关闭该对话框。在测试该页面之前，可以在表达式之前添加一些文本，如：Name parameter is:。

保存页面 results.jsp。

通常，所有 JSP 标准动作和定制标记在可视化编辑器中的都以图标表示。插入到页面中之后，可以使用 Property Inspector 或双击该图标以编辑它的属性。

2.

测试表单和结果页面，方法是运行原始页面 simple.jsp，右键单击该页面并选择 Run方法，。当表单显示时，在 Name:字段中输入名称并单击 submit。随后，将显示 results.jsp 页面，其中显示您的名称值。

在下一步中，我们将改用定制标记库显示请求参数值。

3.

在 results.jsp 页面中，我们将添加来自 JavaServer Pages 标准标记库 (JSTL) 中的一个定制标记，用来显示表单中的其他参数值。在 JSP 表达式之后输入一个回车符，并添加一个新提示：Country:。

将 Component Palette 页切换到 JSTL Core，然后将 out 标记拖放到页面中，放在 Country: 提示后。将 value 属性设置为：${param.country}。显示时，这将显示国家参数值。

可以随意添加另一个 out 标记以显示 address 参数。

保存 results.jsp。

JSTL 是第一个使用表达式语言 (EL) 显示参数数据的 JSP 标记库。EL 提供了一个简洁和容易的方法来显示 Web 应用程序数据(包括请求参数值)并与其进行交互。JSP (2.0) 的下一个版本还将支持 EL，且不需使用 out 标记。用户将能够将 EL 表达式直接输入到 JSP，它们将在运行时显示。

4.

再次运行原始表单页面 simple.jsp，将值输入到表单中，并查看 results.jsp 页面如何显示传递的参数。

到这里，我们就完成了一个简单的 JSP 教程。

总结

本课程通过涵盖可视化编辑 HTML/JSP 页的基础知识的练习，介绍了 JDeveloper 10g 的新可视化 JSP/HTML 编辑环境。

相关主题

将鼠标移到该图标上可以隐藏所有屏幕截图