<!-- BEGIN CENTRAL COLUMN COMPONENTS --><!--startindex--><!-- ============ --><!-- MAIN CONTENT --><!-- ============ -->
<!-- BEGIN VCD4 BYLINE AND TOOLS -->
<!-- END VCD4 BYLINE AND TOOLS --><!-- BEGIN VCD1 OVERVIEW COMPONENT -->
本教程是 Netbeans Visual Web Pack 的快速指南,它向您介绍了如何使用 Visual Web Pack 功能对 Web 应用程序的各个典型阶段进行开发。
由于本教程的设计使然,因此您不必按任何特定的顺序来学习它。您可以快速地浏览本教程,然后在时间允许时返回学习各个部分。如果您希望阅读循序渐进的教程,则可以先尝试阅读
开发 Web 应用程序
。
|
<!-- END VCD1 OVERVIEW COMPONENT -->
<!-- BEGIN VCD5 ANCHOR LINKS COMPONENT -->
<!-- END VCD5 ANCHOR LINKS COMPONENT -->
本教程使用以下资源
NetBeans Visual Web Pack 5.5 可使用所有支持的服务器以及 Java EE 1.4 和 Java EE 5 平台。本教程向您介绍了 Visual Web Pack 功能,这些功能将使用下表中带有复选标记的资源。有关支持的服务器和 Java EE 平台的详细信息,请参见
NetBeans Visual Web Pack 5.5 安装说明
。
应用服务器
|
Sun Java System Application Server 9
Tomcat
JBoss
BEA WebLogic
|
JavaServer Faces 组件/
Java EE 平台
|
1.2/Java EE 5*
1.1/J2EE 1.4
|
Travel 数据库
|
对于某些部分来说是必需的
|
BluePrints AJAX 组件库
|
不是必需的
|
* 只有 Sun Java System Application Server 支持 Java EE 5
启动项目
项目相当于 Web 应用程序的工作环境。在 IDE 中创建 Visual Web 应用程序项目时,IDE 将为 JavaServer Faces (JSF) Web 应用程序建立基础架构。缺省情况下,IDE 将在符合 Java BluePrints Web 应用程序项目约定的目录结构内创建 JSF 1.2 Web 应用程序。
注意:
本教程中的所有步骤均基于缺省 Visual Web Pack 项目,该项目使用 JSF 1.2 和 Java EE 5。
要创建 Visual Web 应用程序项目,请从主菜单中选择“文件”>“新建项目”,选择 "Web" 类别,然后选择“Visual Web 应用程序”项目类型。
试试看
-
使用以下列表中的相应步骤来启动 IDE:
-
Windows。
双击 NetBeans 桌面图标。
-
Mac。
双击安装文件夹中的 NetBeans 图标。
-
Solaris 操作系统(SPARC 和 x86 平台版本)和 Linux。
导航至 NetBeans 安装的
bin
目录,键入
./netbeans
,然后按 Enter 键。
-
单击“运行环境”标签,或者从主菜单中选择“窗口”>“运行环境”将“运行环境”窗口置于前端。
-
通过从主菜单中选择“文件”>“新建项目”来创建一个项目。在“类别”窗格中选择 "Web",然后在“项目”窗格中选择“Visual Web 应用程序”。
-
单击“下一步”。
-
选择一个服务器,然后选择 Java EE 版本。
-
单击“完成”接受缺省的项目名称和位置。
缺省情况下,IDE 将在 home 目录下创建项目目录
<Web 应用程序名称>
。
-
浏览“项目”窗口。如下图所示,“项目”窗口将按类别对项进行分组。展开每个节点,查看各类别中有哪些类型的项。请注意在应用程序 Bean 节点旁边显示的标记。该标记表示需要对此文件进行编译。IDE 将在生成项目时自动编译这些文件。
<!-- BEGIN FIGURE COMPONENT -->
<!-- END FIGURE COMPONENT -->
-
“Web 页”节点的下方是 "Page1.jsp" 节点。缺省情况下,IDE 会创建此页并将其作为起始页。该节点旁边的箭头标记用于标识该页为起始页。如果要将其他页用作起始页,请右键单击该页的节点,然后从弹出式菜单中选择“设置为起始页”。
-
单击“文件”标题,或者从主菜单中选择“窗口”>“文件”将“文件”窗口置于前端。此窗口按各项的物理存储进行组织。展开节点可查看其结构。
<!-- BEGIN FIGURE COMPONENT -->
<!-- END FIGURE COMPONENT -->
-
在图 2 中,请注意 "WebApplication1" > "src" > "java" > "webapplication1" > "Page1.java" 节点。此 Java 类是 Page1.jsp 文件的
支持 Bean
。每当您将页面添加到项目时,IDE 都会为该页创建
.jsp
文件和
.java
文件。在下一部分,您将了解有关
.jsp
和
.java
文件的更多信息。
详细信息
-
从主菜单中选择“帮助”>“帮助内容”>“目录”> "Visual Web Pack" >“Visual Web 应用程序项目入门指南”>“关于 Visual Web 应用程序项目”。
创建 Web 页
对于 Visual Web 应用程序,应使用 JavaServer Pages (JSP) 和
页面
Bean(也称为支持 Bean)而不是 HTML 页。JSP 页是一个模板,服务器可通过它来生成要在浏览器(客户端)中显示的 HTML 响应。页面 Bean 包含服务器在生成 HTML 响应时执行的逻辑。页面 Bean 还包含服务器在用户提交页面后执行的逻辑。
在 Visual Web 应用程序中添加 Web 页时,IDE 将创建 JSP 文件和 Java 源文件。通常会使用可视设计器和“属性”窗口来开发 Web 页。IDE 将修改 JSP 代码和 Java 代码以实现您所设计的内容。其中的大部分工作都可以在可视设计器和“属性”窗口中完成。
注意:
IDE 生成的 JSP 页是 JSP 文档。JSP 文档是 XML 文档,因此必须
具有正确的格式
。尽管大多数 JSP 元素遵循 XML 语法,但还有某些元素不符合 XML 规范,如注释、声明、指令、表达式和 scriptlet。有关 JSP 文档语法的相关信息,请参见
JavaServer Pages 语法参考
。
试试看
-
在“项目”窗口中,右键单击“Web 页”节点,然后选择“新建”>“页”,如下图所示。
<!-- BEGIN FIGURE COMPONENT -->
<!-- END FIGURE COMPONENT -->
-
接受缺省名称 Page2,然后单击“完成”。IDE 将在可视编辑器中打开 Page2(位于编辑区域),如下图所示。
<!-- BEGIN FIGURE COMPONENT -->
<!-- END FIGURE COMPONENT -->
-
单击编辑工具栏中的 "Java" 按钮以查看页面 Bean 的源代码,如下图所示。当编辑区域显示 Java 源代码时,将出现“导航”窗口。此窗口列出了所有的成员字段和方法。请注意,页面的源代码具有访问应用程序 Bean、会话 Bean 和请求 Bean 的方法。有关这三种类型的 Bean 的说明,请参见本教程的
存储和传递数据
部分。
<!-- BEGIN FIGURE COMPONENT -->
<!-- END FIGURE COMPONENT -->
-
源代码还具有在某些生命周期事件过程中调用的方法,这些事件发生在请求页面之后、完成页面呈现之前的一段时间内。
提示:
在“导航”窗口中双击某个成员,插入点将定位在编辑区域中该成员声明的源代码上。您还可以在“导航”窗口中单击鼠标,然后开始键入成员名称的前几个字符以弹出“快速搜索”对话框。继续键入,直至 IDE 突出显示列表中的所需条目,然后按 Enter 键以定位到匹配成员声明的源代码,如下图所示。
<!-- BEGIN FIGURE COMPONENT -->
<!-- END FIGURE COMPONENT -->
-
单击编辑工具栏中的 "JSP" 按钮以查看页面的 JSP 代码,如下图所示。请注意 JSP 页是如何使用 JSP 文档语法的。
<!-- BEGIN FIGURE COMPONENT -->
<!-- END FIGURE COMPONENT -->
-
在编辑工具栏中单击“设计”按钮,可以切换到可视设计器,并在“概要”窗口中显示页面的表示形式,如下图所示。请注意 JSP 文件中的标记如何在“概要”窗口中表示为节点。
<!-- BEGIN FIGURE COMPONENT -->
<!-- END FIGURE COMPONENT -->
详细信息
将组件添加到 Web 页
通过将组件从“组件面板”窗口拖放到可视设计器中的 Web 页上,可以设计一个 Web 页。下图显示了 Page2,其中包含“按钮”、“文本字段”、“消息”、“下拉列表”和“单选按钮组”组件。所有这些组件都是从组件面板的“基本”类别中获得的,并且已经通过更改它们的属性进行了定制。您可以在本部分的后面部分了解有关属性的信息。
<!-- BEGIN FIGURE COMPONENT -->
<!-- END FIGURE COMPONENT -->
注意:
组件面板中提供的组件是 JSF 组件,已根据
设计时 API
对其进行了改进,因此在可视设计器和“属性”窗口中都具有这些属性。您可以在使用 IDE 构建的 Web 应用程序中使用其他组件,但无法在这些组件上使用 IDE 的交互式设计时功能,除非已根据设计时 API 要求对其进行了定制。如果将 Java EE 版本设置为 Java EE 5(缺省),则组件面板将提供 JSF 1.2 组件。如果在创建项目时将 Java EE 版本设置为 1.3 或 1.4,则组件面板将提供 JSF 1.1 组件。
您使用的大多数组件都位于“组件面板”窗口的“基本”、“布局”和“组合”类别中。以下各表显示了一些最常用的组件。
表 1:输入组件
组件 描述 组件面板类别
文本字段
|
单行文本的输入字段。
|
基本
|
文本区域
|
多行文本的输入字段。
|
基本
|
口令字段
|
输入字段,将输入字符回显为屏蔽输入内容的替换字符。
|
基本
|
日历
|
具有一个弹出式日历的输入字段,用户可以从弹出式日历中选择日期。
|
基本
|
下拉列表
|
下拉菜单,也称为组合框。
|
基本
|
列表框
|
用户可以从中选择一项或多项的列表,项选择的多少取决于组件的配置方式。
|
基本
|
复选框
|
单字符框,用户可以选中或取消选中它。
|
基本
|
单选按钮
|
用户可以选中单选按钮。
|
基本
|
添加删除列表
|
两个包含按钮的列表(一个显示可用选项,另一个显示选定选项),这些按钮用于在列表间移动选项并对选定选项进行排序。
|
组合
|
文件上载
|
该组件具有一个文本输入字段和一个“浏览”按钮(显示一个用于指定要上载的文件的文件选择器)。当用户提交页时,应用程序将上载指定的文件。
|
基本
|
表 2:显示组件
组件 描述 组件面板类别
静态文本
|
用于显示文本的字段。
|
基本
|
标签
|
可以与输入字段关联以及可以为其指定弱、中或强字体样式的文本字段。
|
基本
|
图像
|
内联图像。
|
基本
|
消息
|
链接到特定组件以显示有关该组件的验证错误和其他消息的文本字段。
|
基本
|
消息组
|
用于显示运行时错误消息、程序生成的错误消息以及(可选)有关页面上组件的验证错误和其他消息的文本字段。
|
基本
|
警报
|
显示一个图标以及信息性文本(如警告、错误或某个事件已成功完成)。
|
组合
|
页面警报
|
与“警报”组件类似,但是用于在单独的页面上显示图标和信息。
|
布局
|
表 3:分组组件
组件 描述 组件面板类别
复选框组
|
在网格布局中显示两个或两个以上的复选框。
|
基本
|
单选按钮组
|
在网格布局中显示两个或两个以上的单选按钮,并确保一次只能选中一个按钮。
|
基本
|
表、表行组和表列
|
显示复合数据类型的数据,如数据库表或数组。
|
基本
|
树和树节点
|
以树状结构呈现可展开的列表。
|
基本
|
标签集和标签
|
在同一页中显示不同的布局。也可以将其用作导航工具。
|
布局
|
网格面板
|
在行和列的布局内组织组件。
|
布局
|
组面板
|
以流布局模式将一组组件划分在一起。
|
布局
|
布局面板
|
以流布局模式或网格布局模式将一组组件划分在一起。
|
布局
|
属性表单、属性表单部分和属性
|
快速设置单列标签组件,并将组件进行分类。
|
布局
|
Breadcrumbs
|
设置一系列由右尖括号 (>) 分隔的链接组件布局。
|
组合
|
页面片段框
|
将始终显示在两个或多个页上的组件划分在一起。
|
布局
|
表 4:操作组件
组件 描述 组件面板类别
按钮
|
用于提交关联表单的按钮。
|
基本
|
超级链接
|
用于提交 URL 或表单的文本字段。
|
基本
|
图像超级链接
|
用于提交 URL 或表单的图像。
|
基本
|
树节点
|
树或树节点的子组件。(可选)叶树节点可以提交 URL 或表单。
|
基本
|
标签
|
标签集或标签的子组件。(可选)标签可以提交 URL 或表单。
|
组合
|
使用“属性”窗口中的组件属性表单,可以更改组件的外观和行为,将组件绑定到数据,以及将组件与事件处理程序关联。
下图显示了“列表框”组件的属性。
<!-- BEGIN FIGURE COMPONENT -->
<!-- END FIGURE COMPONENT -->
试试看
打开按照“创建 Web 页”部分中的
试试看
建议创建的 Page2,或者在必要时创建该页面。
从“组件面板”窗口的“基本”类别和“布局”类别中拖动各种组件,并试用其属性。例如,尝试执行以下步骤:
-
将一个“按钮”组件拖动到该页面上,键入
Click Me!
,然后按 Enter 键。在“属性”窗口中,请注意其
text
属性如何具有值
Click Me!
。在“属性”窗口中,选中
primary
属性的复选框,并注意按钮外观的变化。
-
将一个“文本字段”组件拖动到该页面上。接下来,将一个“标签”组件拖动到该页面上,键入
Name:
,然后按 Enter 键。按住 Ctrl-Shift 组合键在“标签”组件内部单击鼠标,并拖动一条连线到“文本字段”组件。请注意现在“标签”组件的
for
属性如何被设置为“文本字段”组件的
id
属性。将
labelLevel
设置为“强 (1)”。
-
将一个“消息”组件拖动到“文本字段”组件的右侧。按住 Ctrl-Shift 组合键,同时从“消息”组件拖动一条连线到“文本字段”组件。与“标签”组件一样,请注意现在“消息”组件的
for
属性如何被设置为“文本字段”组件的
id
属性。
-
将一个“下拉列表”组件拖动到该页面上,并将其
label
属性设置为
Color
。右键单击“下拉列表”组件,然后选择“配置缺省选项”以显示“选项定制器”。
-
按 Tab 键以进入“显示”列中“项 1”的编辑模式,然后键入
Blue
。按两次 Tab 键,将“项 2”更改为
White
。再按两次 Tab 键,将“项 3”更改为
Green
。单击“确定”,并请注意您的更改如何影响可视设计器中的组件。
-
使用与“下拉列表”组件类似的步骤,创建一个具有选项 Blue、White 和 Red 的“单选按钮组”组件。
此外,在“选项定制器”中选中“选择项”复选框,并在“选定”列中选中其中一个单选按钮,以设置其缺省选项。单击“确定”应用更改并关闭“选项定制器”。在“属性”窗口中,将 columns 属性设置为 3 以使单选按钮水平对齐而不是垂直对齐。
-
右键单击该页面中的空白处,然后选择“在浏览器中预览”以查看您的浏览器如何呈现组件。
详细信息
获取帮助
IDE 提供了一个“帮助”查看器,其中包含了有关 IDE 的帮助主题。此外,在窗口、对话框或组件面板组件上按 F1 键时,将出现“帮助”查看器,并显示有关该项的信息。要访问 Visual Web Pack 帮助主题(包括有关组件的帮助),请从主菜单中选择“帮助”>“帮助内容”,然后滚动到 Visual Web Pack。
IDE 还提供了一个“动态帮助”窗口,其中显示了指向当前窗口或对象的相关帮助主题的链接。在“动态帮助”窗口中双击链接时,IDE 将在相应的查看器中显示信息,如浏览器、“帮助”查看器或 Javadoc 查看器。
试试看
-
在可视设计器的页面中添加一个“标签”组件。请注意“动态帮助”窗口中的主题。
-
在页面中添加一个“下拉列表”组件。请注意“动态帮助”窗口中的新主题。
-
在“动态帮助”窗口中,双击“下拉列表组件”节点以在“帮助”查看器中查看主题。关闭“帮助”查看器。
-
在“下拉列表”组件的“属性”窗口中单击鼠标。按 F1 键查看有关“下拉列表”组件属性的主题。
-
在组件面板的“基本”类别中选择“文本字段”组件节点。按 F1 键查看有关“文本字段”组件的帮助主题。
生成并测试 Web 应用程序
当准备开始测试项目时,请按 F6 键,或者从主菜单中选择“运行”>“运行主项目”。IDE 将执行以下操作:
如果进行了大量的更改,删除了若干项,或者出现一些异常行为,则可以从主菜单中选择“生成”>“清理并生成主项目”。IDE 将清除项目的
build
目录和
dist
目录,并取消部署 Web 应用程序,然后生成并部署应用程序。
试试看
-
如果项目包含的页面少于两个,请右键单击“项目”窗口中的“Web 页”节点并选择“新建”>“页”来创建一个新页面。
-
在可视设计器中打开起始页(带有绿色箭头标记的页面)。
-
将一个“超级链接”组件拖动到页面上,键入
Next Page
,然后按 Enter 键。
-
在“超级链接”组件的“属性”窗口中,单击
url
属性的省略号按钮 (...),在项目中选择一个不同的页面,然后单击“确定”。请注意 IDE 如何将
url
属性设置为
/faces/
page-name
.jsp
。
-
按 F6 键以生成并运行 Web 应用程序。
-
在生成过程中,查看在“输出”窗口中显示的消息。还要注意,在服务器标签中显示了来自服务器日志的输出。
-
请注意 IDE 发送到浏览器的 URL。
-
当浏览器中出现起始页时,单击 "Next Page" 链接。
-
在“运行环境”窗口中,依次展开“服务器”、服务器节点、“应用程序”和“Web 应用程序”,您会注意到其中包含您的项目节点,如下图所示。
<!-- BEGIN FIGURE COMPONENT -->
<!-- END FIGURE COMPONENT -->
详细信息
-
从主菜单中选择“帮助”>“帮助内容”>“目录”> "Visual Web Pack" >“Visual Web 应用程序项目入门指南”>“构建和编译”>“构建 Visual Web 应用程序项目”。
连接 Web 页并处理用户操作
当用户键入 URL、单击链接或单击按钮时,浏览器会向服务器发送这些请求。服务器将该请求映射到 JSP 页,并使用此 JSP 页及其关联的页面 Bean 来呈现响应。
您可以使用以下两种方法之一来指定页面导航:
要访问页面导航编辑器,请在可视设计器中右键单击页面中的空白处,然后选择“页面导航”。页面导航编辑器将显示项目中所有页面的页面图标。在页面导航编辑器中单击某个页面图标时,将展开该页面,并显示其所有的操作组件(操作组件是具有 action 属性的组件,如“按钮”、“超级链接”或“标签”)。每个组件旁边有一个连线端口。通过将连线端口拖到页面图标上,可以在该操作的请求和要呈现为响应的页面之间创建映射。松开鼠标按钮时,IDE 将添加该连接的可视化表示,如下图中带有 nextPage 标签的连接所示。
<!-- BEGIN FIGURE COMPONENT -->
注意:
在提交页面时,Web 应用程序将在执行 action 方法之前执行转换和验证。如果转换或验证失败,则不会调用 action 方法。在开发过程中,您应该在页面上放置“消息组”组件,以便捕获任何意外的转换或验证错误,这些错误会阻止 action 方法的调用。
试试看
-
创建两个页面,并将它们分别命名为 LinkPage1 和 LinkPage2。将 LinkPage1 作为起始页。
-
将一个“超级链接”组件拖动到 LinkPage1 上,键入
Next
Page
,然后按 Enter 键。
-
将一个“按钮”组件拖动到 LinkPage2 上,键入
Go
,然后按 Enter 键。
-
双击“按钮”组件以访问按钮的 action 方法。
请注意,action 方法将返回 null。当 action 方法返回 null 时,应用程序将重新显示页面。
-
单击编辑区域中的“设计”以切换到可视设计器。
-
在可视设计器中,右键单击 LinkPage2 中的空白处,然后选择“页面导航”。
-
在页面导航编辑器中,单击 LinkPage1.jsp 图标以展开该页面图标,然后将 hyperlink1 组件的连线端口拖到 LinkPage2.jsp 图标上以创建一个链接。
-
双击 Case1 连线标签以变为编辑模式,双击 Case1 以选择该文本,键入
nextPage
,然后按 Enter 键。
-
使用类似的步骤,创建一个从 LinkPage2.jsp 上的按钮返回到 LinkPage1.jsp 的连线,并将该连线命名为
go
。
-
在编辑工具栏中单击 "XML" 以查看部署到服务器上的实际映射 XML,然后关闭页面导航编辑器;当系统询问您是否保存更改时,请单击“保存”。
-
在 LinkPage2 中,双击“按钮”组件以访问按钮的 action 方法。
请注意,现在 action 方法将返回字符串 "go",在页面导航编辑器中创建的映射指示服务器在 LinkPage2.jsp 返回 "go" 时显示 LinkPage1.jsp。
-
按 F6 键运行应用程序,然后试一试新的页面导航。
详细信息
-
设置页面导航
-
从主菜单中选择“帮助”>“帮助内容”>“目录”> "Visual Web Pack" >“参考”>“编辑器”>“关于页面导航编辑器”。
编辑 Java 代码
IDE 的 Java 编辑器包含用于简化编程过程的各种功能,其功能远不止在本基础教程中讨论的这些。下面的编辑功能示例列表仅仅是其中的一小部分。
-
代码完成。
通过代码完成,您可以键入几个字符,然后从可能的类、方法、变量等列表中进行选择以自动完成表达式。要显示代码完成框,请按 Ctrl-空格键。在包名、变量或方法调用后键入句点等待,也会出现代码完成框,如下图所示。
<!-- BEGIN FIGURE COMPONENT -->
<!-- END FIGURE COMPONENT -->
-
Javadoc。
代码完成功能还会显示任何相关的 Javadoc。此外,您可以右键单击类型、字段或方法,然后选择“显示 Javadoc”以查看该项的 Javadoc(如果有该 Javadoc)。要查看可用的 Javadoc,请选择“帮助”>“Javadoc 引用”。也可以按 Shift-F1 组合键以显示 Javadoc 索引搜索工具。
-
修复导入。
按 Alt-Shift-F 组合键可自动添加所需的 import 语句。
-
错误检测。
在不能编译的所有语句的左旁注处都将出现红色的错误框。将鼠标悬停在该错误框上可看到错误描述,如下图所示。IDE 还会在右旁注处显示错误带区。此带区表示整个文件,而不是只表示可见的代码行。错误带区中的红线用来标识代码中的错误。双击红线可跳到错误的语句。编译文件时,所有编译错误都将出现在“输出”窗口中。单击错误消息可在 Java 编辑器中显示错误代码。
<!-- BEGIN FIGURE COMPONENT -->
<!-- END FIGURE COMPONENT -->
-
Java 编辑器快捷键。
使用简单的键组合可以调用许多常见的编辑任务,如以下示例所示。要了解有关快捷键的详细信息,请从主菜单中选择“帮助”>“帮助内容”>“目录”>“IDE 基础知识”>“快捷键”>“编辑器快捷键”。
<!-- BEGIN VCD8 DATA TABLE COMPONENT -->
操作 快捷键
重新设置代码格式
|
Ctrl-Shift-F
|
删除当前行
|
Ctrl-E
|
将插入点移动到匹配的方括号
|
Ctrl-[
|
选择位于光标左侧的方括号所包含的块
|
Ctrl-Shift-[
|
词语匹配:向下和向上
|
Ctrl-L、Ctrl-K
|
-
缩写。
缩写是在按空格键时展开为完整的词或短语的简短字符组,如以下示例所示。要查看完整的缩写列表,请选择“工具”>“选项”>“高级选项”>“编辑”>“编辑器设置”>“Java 编辑器”,然后单击“缩写”属性旁边的省略号 (
...
) 按钮。
<!-- BEGIN VCD8 DATA TABLE COMPONENT -->
代码 缩写
for (Iterator it = collection.iterator(); it.hasNext();)
{Object elem = (Object) it.next();}
|
forc
|
for (int i = 0; i < arr.length; i++) {}
|
fori
|
try {|} catch (Exception ex)
{log("Error Description", ex); } finally {}
|
trycatch
|
-
代码片段。
打开 Java 源代码编辑器时,“组件面板”窗口将提供许多有用的代码片段,您可以将这些代码片段拖放到源文件上。在本版本中,不会为受管 Bean 源文件显示代码片段,如应用程序 Bean 或请求 Bean 的源文件。
-
自动注释工具。
选择“工具”>“自动注释”可打开用于添加 Javadoc 注释的对话框。
-
快速搜索。
如果您在“导航”窗口中单击并开始键入方法或字段的名称,将出现“快速搜索”对话框,并且 IDE 会突出显示列表中的第一个匹配条目。按 Enter 键可在 Java 源代码中定位该条目的声明。
试试看
注意:
以下练习要求您在
destroy
方法中键入代码。键入的代码是用来说明编辑功能的。通常是不需要按照上述操作在此方法中放置代码的。完成这些步骤后,请删除该代码。
-
创建一个页面或打开一个现有的页面。将一个“超级链接”组件拖放到该页面上。单击编辑工具栏中的 "Java" 以显示 Java 源代码。
-
在左旁注处单击鼠标右键,然后选择“显示行号”。在 Java 源代码中按 Ctrl-G 组合键,在“转至行”对话框中键入 50,然后按 Enter 键。在源代码中单击鼠标右键,然后从弹出式菜单中选择“转至”。请注意可以从子菜单中访问的操作。
-
在“导航”窗口中,双击
destroy()
以定位到该方法的源代码上。在
destroy()
方法中,键入
getSessionBean1().
,然后暂停。将出现代码完成框。键入
d
可看到该框将列表缩小为
destroy()
。按 Enter 键以使用该选择。键入
;
,然后按 Enter 键。现在,键入
this.getH
,等待代码完成框出现。如果没有出现代码完成框,请按 Ctrl-空格键以打开代码完成框。将光标向下移到
getHyperlink1()
,然后按 Enter 键。键入句点,等待代码完成框出现,然后键入
set
。在代码完成框将列表范围缩小为以
set
开头的所有方法后,键入
te
将列表范围缩小为
setText(Object text)
,然后按 Enter 键。IDE 将在句点后面插入
setText()
,并将光标停留在圆括号内。键入
"hello"
,按 End 键,然后键入
;
。
-
另起一行,键入
serr
,然后按空格键将该缩写展开为
System.err.println("")
。删除行尾的分号。按 F9 键以编译文件。“输出”窗口将显示几个指向错误的链接。单击该窗口中出现的第一个链接。IDE 将显示导致错误的语句。重新键入刚才删除的分号。
-
另起一行,键入
getSes
,然后按 Ctrl-K 组合键。IDE 将该字符串替换为当前行上面的源代码中第一个匹配的单词。
-
要清除代码,请将光标放置在
destroy
方法主体的第一行上,然后按 Ctrl-E 组合键删除该行。使用 Ctrl-E 组合键删除方法主体中的其余行。
-
将鼠标悬停在编辑工具栏中的图标上,并试用每个图标执行操作。
-
在 Java 源代码中单击鼠标右键,然后从弹出式菜单中选择“代码折叠”。尝试执行子菜单中的各种操作。
-
尝试从组件面板中拖动代码片段,以查看它们所提供的内容。
详细信息
-
从主菜单中选择“帮助”>“帮助内容”>“目录”>“Java 项目基础知识”>“编辑源文件”>“关于编辑源文件”。
-
从主菜单中选择“帮助”>“帮助内容”>“目录”>“IDE 基础知识”>“快捷键”>“编辑器快捷键”。
处理用户输入
IDE 提供了验证器和转换器对象,以帮助您检查输入和设置格式。在组件面板中,可以从这些对象各自所在的类别中找到它们。
通过将验证器拖放到输入组件(如“文本字段”组件)上,可以将验证器绑定到输入组件。例如,将一个“文本字段”组件添加到可视设计器中的页面上后,可以将一个“长度验证器”组件从组件面板的“验证器”类别拖放到该“文本字段”组件上。
或者,也可以将验证器拖放到页面上,然后将输入组件的
validator
属性设置为该验证器对象。例如,您可以将一个“长型范围验证器”组件拖放到页面上的空白处,这样会将 longRangeValidator1 添加到“概要”窗口。然后,您可以在可视设计器中选择一个输入组件(如“文本字段”组件),再从其
validatorExpression
属性的下拉列表中选择 longRangeValidator1。您可以将相同的验证器用于多个组件。
验证器与转换器的机制类似。您还可以将转换器与输出组件(如“静态文本”组件)关联。请注意,将组件绑定到数据提供器字段时,将自动完成转换过程。您可以在
连接数据库
部分了解有关绑定到数据提供器的信息。
使用验证器的“属性”窗口可以设置验证规则,如最小值和最大值,或最小长度和最大长度。同样,使用转换器的“属性”窗口可以设置转换规则,如值应该匹配的模式或进行验证而要调用的方法。“数值转换器”组件具有一个特殊向导,当您第一次将“数值转换器”组件拖放到页面上或可视组件上时将出现该向导。
组件面板的“基本”类别提供了“消息”组件和“消息组”组件,这些组件用于自动显示转换错误、验证错误和必填字段消息。“消息组”组件将显示全局错误消息、运行时错误和(可选)所有组件错误消息。“消息”组件仅显示它所绑定到的组件的消息。将“消息”组件绑定到其他组件有两种方法:设置“消息”组件的
for
属性,或者在“消息”组件上按住 Ctrl-Shift 组合键,同时将鼠标拖动到要绑定“消息”组件的组件。
通过在任何页面 Bean 中使用
error
、
warn
、
fatal
和
info
方法,可以用编程方式将定制错误消息发送到“消息组”组件。要了解有关这些方法的详细信息,请选择“工具”>“Javadoc 索引搜索”,在下拉列表的文本字段中键入
FacesBean
,然后单击“查找”。
试试看
-
创建一个页面,并将一个“按钮”组件拖动到该页面上。将按钮的 text 属性设置为
Go
。
-
将一个“文本字段”组件拖动到该页面上。在“文本字段”组件的“属性”窗口中,选中
required
属性的复选框。
-
将一个“标签”组件拖放到“文本字段”组件的上方,键入
Price:
,然后按 Enter 键。
-
在“标签”组件的“属性”窗口中,从
for
属性的下拉列表中选择 "textField1"。请注意可视设计器中的“标签”组件如何显示一个星号以指示其关联的“文本字段”组件是必需要输入的。
-
在组件面板中,展开“验证器”类别。将一个“双精度范围验证器”组件拖放到“文本字段”组件上。在“概要”窗口中,选择新创建的 "doubleRangeValidator1" 节点。在验证器的“属性”窗口中,将 maximum 属性设置为
10.0
,并将 minimum 属性设置为
1.0
,如下图所示。
<!-- BEGIN FIGURE COMPONENT -->
<!-- END FIGURE COMPONENT -->
-
在组件面板中,展开“转换器”类别。将一个“数值转换器”组件拖放到“文本字段”组件上。将出现“数字格式”对话框,如下图所示。从“类型”下拉列表中选择“货币”,从“语言环境”下拉列表中选择“英文 (美国)”,然后单击“确定”。
<!-- BEGIN FIGURE COMPONENT -->
<!-- END FIGURE COMPONENT -->
-
将一个“消息”组件添加到页面。在该组件上按住 Ctrl-Shift 组合键,同时从其拖动一条连线到“文本字段”组件。
请注意,IDE 将“消息”组件的
for
属性设置为“文本字段”组件的
id
属性。
-
将一个“消息组”组件添加到页面。
-
将该页设置为起始页,然后运行应用程序。尝试在下列情况下单击按钮:未输入任何价格、输入
1.5
、输入非数值以及输入大于 $10.00 的价格。最后,在文本字段中键入
$1.50
,然后单击按钮。
请注意应用程序是如何拒绝所有不符合数字格式的值以及不在指定范围内的值。请注意在“消息”和“消息组”组件中出现的不同消息。
-
请尝试设置“消息组”组件的
showGlobalOnly
复选框。
存储和传递数据
可以使用应用程序 Bean、会话 Bean 和请求 Bean 来存储信息以供其他页面使用。
-
可以使用应用程序 Bean 存储适用于所有用户会话的信息,如“下拉列表”组件的静态选项列表。
-
可以使用会话 Bean 存储在整个用户会话期间供其他页面使用的信息,如用户的登录名。
-
如果只需要供下一个页面使用的信息,则使用请求 Bean。
请求结束后,在请求 Bean 中存储的任何值都会消失。请求是指从客户端单向传输到服务器的 HTTP 请求以及对应的响应(可以是其他页面)。在大多数情况下,请求都以单击按钮或链接开始,并以呈现 HTML 页的响应作为结束。
注意:
仅当启动请求的页面在请求 Bean 属性中存储值时(如将输入组件绑定到请求 Bean 属性时,如下所述),才会实例化请求 Bean。
警告:
如果将
<redirect>
元素包含在导航规则的
<navigation-case>
元素中,则不能使用请求 Bean(在页面导航编辑器中单击“源”按钮时,可以看到这些规则)。提交页面时,
<redirect>
元素会重定向该页面并结束请求,接下来,后续的页面才能使用请求 Bean 中所存储的任何值。
要将属性添加到会话 Bean 中,请在“概要”窗口中右键单击 "SessionBean1" 节点,然后选择“添加”>“属性”。IDE 将为该属性添加声明、getter 方法和 setter 方法。该属性在“概要”窗口中显示为 "SessionBean1" 下面的子节点,但通常不会立即显示。也可以使用类似的步骤向请求 Bean 或应用程序 Bean 添加属性。
请注意,也可以将属性添加到页面 Bean(IDE 为每个页面创建的支持 Bean)中。要将属性添加到页面 Bean 中,请在可视设计器中的页面空白处单击鼠标右键,然后从弹出式菜单中选择“添加”>“属性”。但是,页面 Bean 的属性值仅在页面 Bean 实例化过程中有效。例如,当用户单击用于重新呈现页面的“按钮”组件(即,action 方法返回 null)时,将创建该页面 Bean 的一个新实例,并重新初始化页面 Bean 的属性值。如果要为传回操作传递值,您可以使用“隐藏字段”组件。
要将组件与 Bean 的属性关联,请右键单击该组件,然后选择“绑定到数据”。在“绑定到数据”对话框中,选择“绑定到对象”标签,然后选择 Bean 的属性,如下图所示。
<!-- BEGIN FIGURE COMPONENT -->
<!-- END FIGURE COMPONENT -->
注意:
对于大多数组件,弹出式菜单提供了两个绑定操作:“属性绑定”和“绑定到数据”。在“属性绑定”对话框中,您可以将组件的任何属性绑定到受管 Bean 属性或数据提供器字段。“绑定到数据”对话框是一种快捷方式,用于将组件包含值的属性绑定到受管 Bean 属性或数据提供器字段。通过使用“绑定到数据提供器”标签,可以绑定到已添加到页面或受管 Bean 中的任何数据提供器。通过使用“绑定到对象”标签,可以绑定到页面属性或受管 Bean 属性。
试试看
-
右键单击“概要”窗口中的 "RequestBean1" 节点,然后选择“添加”>“属性”。将属性命名为
parm
,将其类型设置为
String
,然后单击“确定”。
请注意,新添加的属性可能没有显示在“概要”窗口中。要显示该属性,请在可视设计器中单击鼠标右键,然后从弹出式菜单中选择“刷新”。也可以按照以下步骤所述,打开并保存 RequestBean1 源文件使该属性进行显示。
-
在“概要”窗口中,右键单击“请求 Bean”,然后从弹出式菜单中选择“编辑 Java 源代码”。
-
滚动到源文件底部以查看 IDE 为属性添加的
getParm
和
setParm
方法。
-
保存并关闭该文件。
-
创建一个名为 First 的页面,其中包含一个“按钮”组件和一个“文本字段”组件。
-
右键单击“文本字段”组件,然后从弹出式菜单中选择“绑定到数据”。单击“绑定到对象”标签,选择 "RequestBean1" > "parm",然后单击“确定”。
-
创建一个名为 Next 的页面。添加一个“按钮”组件和一个“静态文本”组件。
-
使用与 First 页上的“文本字段”组件相同的步骤,将 Next 页上的“静态文本”组件绑定到 "RequestBean1" > "parm"。
-
在源代码中单击鼠标右键,然后从弹出式菜单中选择“页面导航”。
-
在页面导航编辑器中,创建一个从 First 页上的“按钮”组件到 Next 页的连线。请单独保留 Next 页上的“按钮”组件,因为可以使用此按钮来重新显示 Next 页。
-
将 First.jsp 设置为起始页,然后运行应用程序。输入一个值,然后单击按钮。请注意,Next 页将显示您在 First 页上输入的值。在后台,一个 RequestBean1 实例被实例化,用于在 parm 属性中存储“文本字段”组件的值。随后为响应(Next 页的 HTML)检索该 parm 属性的值。呈现响应后,RequestBean1 实例就被销毁了。
-
单击 Next 页上的按钮可使 Next 页重新呈现自身。请注意“静态文本”组件将不再显示值。这是因为保存值的 RequestBean1 实例存在的时间仅与请求时间一样长,该请求在提交 First 页时开始,在将 Next 页的 HTML 发回客户端时结束。
连接数据库
“运行环境”窗口中包含一个“数据库”节点,该节点用于显示在 IDE 中注册的所有数据库,如下图所示。Visual Web Pack 提供了一个样例 TRAVEL 数据库,您将在本教程的其余部分使用该数据库。
<!-- BEGIN FIGURE COMPONENT -->
<!-- END FIGURE COMPONENT -->
在通过项目访问数据库之前,必须先将 IDE 连接到该数据库。每次启动 IDE 并打开连接到该数据库的项目时,您必须执行此操作。
如果数据库标记显示为连接中断,并且无法展开该数据库节点,则表明 IDE 未连接到该数据库。要连接到 TRAVEL 数据库,请在“运行环境”窗口中右键单击数据库节点,然后从弹出式菜单中选择“连接”。如果出现“连接”对话框,请输入
travel
作为口令,然后选中“在此会话期间记住口令”。如果没有看见 TRAVEL 数据库的 jdbc 节点,请参见 NetBeans Visual Web Pack 安装说明中的
Visual Web Pack 样例数据库
部分以了解如何为 IDE 提供可用的数据库。
注意:
如果 Web 应用程序使用的服务器不同于 Sun Java System Application Server,则必须将
derbyclient.jar
文件的副本放在服务器的库目录中。例如,如果要将 TRAVEL 数据库与 Tomcat 一起使用,请将
derbyclient.jar
文件复制到
netbeans-install-directory
/enterprise3/apache-tomcat-5.5.17/common/lib
中。您可以在 Sun Java System Application Server 安装目录下面的
javadb/lib/derbyclient.jar
中找到 derbyclient.jar 副本。
当打开现有项目时,可视设计器会显示一个错误屏幕。通常,这是因为可视设计器需要获取数据库中的信息,而 IDE 却没有连接到数据库。请尝试连接到数据库服务器,并单击错误屏幕中的“继续”按钮以解决该问题。
通过将表从数据源部分拖放到页面上的组件或页面上时,可以连接页面与数据库表。在您执行此操作时,IDE 会将数据提供器添加到页面,并将行集添加到 SessionBean1 类,如下图所示。
<!-- BEGIN FIGURE COMPONENT -->
<!-- END FIGURE COMPONENT -->
行集对象会建立数据库连接、执行查询以及管理结果集。数据提供器对象会提供一个公共接口,用于获取多种类型的复合数据,其中包括数据库表、ArrayList 对象以及 Enterprise JavaBeans 对象。通常,仅在需要设置查询参数时才使用行集对象。在大多数情况下,请使用数据提供器对象获取和处理数据。
将数据提供器添加到项目后,您可以将组件绑定到数据提供器,方法是:右键单击该组件,然后选择“绑定到数据”。在“绑定到数据”对话框中,单击“绑定到数据提供器”标签将其置于前端。“选择数据提供器”下拉列表中显示了项目的所有数据提供器,您可以从中选择要绑定到组件的数据提供器。选择数据提供器后,选择要绑定到组件的相应数据列。对于某些组件(如“下拉列表”组件),您必须对“值字段”和“显示字段”都进行选择。
可以使用行集对象的查询编辑器定义 SQL 查询来检索数据,如下图所示。
<!-- BEGIN FIGURE COMPONENT -->
<!-- END FIGURE COMPONENT -->
试试看
-
创建一个页面,将其作为起始页,并将一个“列表框”组件拖放到该页面上。
-
在“运行环境”窗口中,依次展开“数据库”、TRAVEL 数据库的 jdbc 节点和“表”节点。
-
将 TRIPTYPE 节点拖放到页面上。
如果 TRAVEL 数据库标记显示为连接中断,则无法展开该数据库节点,表明 IDE 未连接到该数据库。要连接 TRAVEL 数据库,请在“运行环境”窗口中右键单击数据库节点,然后从弹出式菜单中选择“连接”。如果出现“连接”对话框,请输入
travel
作为口令,选中“在此会话期间记住口令”,然后单击“确定”。
-
右键单击“列表框”组件,然后从弹出式菜单中选择“绑定到数据”。
-
在“绑定到数据”对话框中,单击“绑定到数据提供器”标签,并确保在下拉列表中选择了 "tripTypeDataProvider"。
-
将“值字段”设置为 TRIPTYPE.TRIPTYPEID(缺省选择),将“显示字段”设置为 TRIPTYPE.DESCRIPTION,然后单击“确定”。
-
运行应用程序以查看表数据是如何填充到列表框的。
-
在“概要”窗口中展开 "SessionBean1",然后双击 "triptypeRowSet" 节点以打开其查询编辑器。在网格面板的 DESCRIPTION 行中,从“排序类型”列的下拉列表中选择“升序”。
-
单击查询编辑器标签中的 X 以关闭查询编辑器,然后再次运行程序。请注意各项现在是如何按字母顺序显示的。
-
(可选)在页面 Java 源代码的
_init
方法中找到将数据提供器与行集关联的代码。缺省情况下,此方法处于折叠状态。要展开代码,请单击左旁注旁边的代码折叠框。
双击“项目”窗口中的“会话 Bean”节点以打开会话 Bean 的 Java 源代码。查看会话 Bean 的
_init
方法,以了解行集代码如何实现查询。右键单击数据提供器和行集方法,然后从弹出式菜单中选择“显示 Javadoc”以查看有关方法用途的文档。
-
(可选)选择“帮助”>“Javadoc 引用”>“数据提供器”和“帮助”>“Javadoc 引用”>“行集”以查看相关的 API。
详细信息
调试 Web 应用程序
IDE 具有一个可帮助您解决程序问题的内置调试器,如下图所示。您可以使用该调试器设置断点和监视、逐步执行代码以及运行至光标所在的代码语句。
通过在 Java 编辑器的左旁注处单击鼠标,可以设置断点。通过右键单击变量或表达式,然后选择“新建监视”,可以设置监视。要运行该调试器,请从主菜单中选择“运行”>“调试主项目”或“运行”>“运行至光标”。
<!-- BEGIN FIGURE COMPONENT -->
<!-- END FIGURE COMPONENT -->
提示:
下面还介绍了一些其他的功能,您可以使用这些功能来诊断并解决问题:
-
使用 HTTP 监视器可以监视客户端-服务器通信并重新显示 HTTP 请求。当页面包含若干个输入字段,并且您希望在不必填写所有字段的情况下重新创建 HTTP 请求,使用重新显示请求功能会很有帮助。
-
将一个“消息组”组件添加到页面,然后使用
error
、
warn
、
fatal
和
info
方法在组件中显示诊断消息。
-
使用
log
方法将诊断消息发送到服务器日志。
试试看
-
创建或重用一个起始页。添加一个“静态文本”组件,将其
text
属性设置为
Hello
,并将其
id
属性设置为
helloText
。
-
添加一个“按钮”组件。双击该“按钮”组件以访问其 action 方法 (
button1_action
),然后将方法的主体替换为以下代码:
<!-- BEGIN CODE SAMPLE COMPONENT -->
代码样例 1:button1_action 方法
|
String oldString = (String) this.helloText.getText();
this.helloText.setText("Good Bye");
String newString = (String) this.helloText.getText();
return null;
|
<!-- END CODE SAMPLE COMPONENT -->
-
右键单击 "oldString",选择“新建监视”,然后单击“确定”。对
newString
执行相同的操作。在左旁注处单击鼠标,为方法主体中的第一个语句设置一个断点。
-
从主菜单中选择“运行”>“调试主项目”。
-
当 Web 浏览器中显示页面时,单击按钮。当调试器在
button1_action
方法内中断时,单击“调试器”窗口中的“监视”标签,以查看
newString
和
oldString
的当前值。
-
从主菜单中选择“运行”>“越过”,或者单击工具栏中的“越过”按钮。查看“监视”标签。再越过代码两次,然后观察“监视”标签中的“值”列。
-
查看“局部变量”和“调用栈”标签。
-
选择“运行”>“完成调试器会话”关闭调试器会话。
详细信息
-
从主菜单中选择“帮助”>“帮助内容”>“目录”>“调试 Java 应用程序”。
-
从主菜单中选择“帮助”>“帮助内容”>“目录”>“服务器和数据库”>“HTTP 监视器”>“关于 HTTP 监视器”。
-
NetBeans IDE Web 应用程序教程中的
运行和监视应用程序
部分。
小结
-
您可以从创建 Visual Web 应用程序项目开始构建 Web 应用程序。
-
通过从“项目”窗口中选择“Web 页”>“新建”>“页”,可以添加页面。
-
将组件从组件面板拖动到可视设计器中的页面上,可以设计该页面。
-
单击主工具栏中的“运行主项目”按钮,可以保存、生成、部署并运行应用程序。
-
使用页面导航编辑器可以指定页面导航。您还可以将链接组件添加到页面,并设置其
url
属性的值。
-
将验证器和转换器对象拖放到组件上,可以指定格式设置和验证规则。
-
使用“消息”组件和“消息组”组件可以显示运行时错误消息。
-
使用 RequestBean1、SessionBean1 和 ApplicationBean1 类中的属性,可以存储页面上的值并在页面之间传递值。
-
要为数据库表创建数据提供器对象及其关联的行集,请将表从“运行环境”窗口中的“数据库”部分拖到页面或该页面的一个组件上。
-
使用“绑定到数据”菜单操作,可以将组件绑定到数据提供器字段,以及将组件绑定到 Bean 属性。
-
打开行集的查询编辑器,可以修改用于填充行集对象的 SQL 查询。
-
使用调试器、HTTP 监视器、服务器日志和“消息组”组件可以诊断运行时问题。
|