Sun中国技术社区- Sun Developer Network (SDN) Home

* 要利用 NetBeans IDE 6.0 的 Java EE 5 功能，我们需要使用一个与 Java EE 5 规范完全兼容的应用服务器，比如说 Sun Java System Application Server 9（GlassFish 项目）。

本教程专用于 Sun Java Application Server PE 9.0 更新版本 1。如果您使用不同的服务器，请参阅发行说明和常见问题获取有关常见问题和应对措施的信息。有关支持的服务器和 Java EE 平台的详细信息，请参阅发行说明。

创建应用程序

<div id="container">
<div id="header">
Header
</div>
<div id="leftBar">
Left Bar
</div>
<div id="content">
Main Content
</div>
<div id="rightBar">
Right Bar
</div>
<div id="footer">
Footer
</div>
</div>

添加 Header 内容

添加左侧边栏内容

添加右侧边栏内容

与左侧边栏一样，使右侧边栏的内容也保持简单。让我们添加一些文本和图片。

从 Palette 的 Layout 区域，拖放一个 Group Panel 组件到 rightBar <div> 。
- 注意：像其他面板一样，Group Panel 组件的默认大小也是 128 x 128 像素。一旦组件被添加的到 Group Panel，其初始大小就会被抛弃。
在 JSP Editor 中，删除 rightBar <div> 中的内容 Right Bar。
从 Palette 的 Basic 区域中，拖放一个 StaticText 组件，并在 Properties 窗口中更改其 text 属性。
- 注意：也可以添加 HTML 作为文本。确保取消选择 StaticText 组件的 escape 属性。
从 Palette 的 Basic 区域中，拖放一个 Image 组件到 Group Panel。在 Properties 窗口中，将 url 属性设置为到任何图片。如果您没有图片，您可以从此处下载。
运行应用程序。结果应该类似于图 5。

图 5：具有左边侧栏和右边侧栏的已部署页面

添加页脚内容

现在我们向位于中间的 footer 面板添加一些超链接。

从 Palette 的 Layout 区域，拖放一个 Group Panel 组件到 footer div。
在 JSP Editor 中，删除 footer <div> 中的内容 Footer。
从 Palette 的 Basic 区域，拖放几个 HyperLink 组件到 footer 面板。在 Properties 窗口中更改其 text 属性。
选择 Visual Designer 中的 Group Panel。在 Properties 窗口中，将 separator text 属性设置为“|”。
运行该应用程序并查看结果。该应用程序应该类似于图 6。

图 6：具有页脚的已部署页面

向 Main Content 菜单添加内容

最后的这一步非常重要。现在我们添加主要内容的面板。

从 Palette 的 Layout 区域，拖放一个 Layout Panel 组件到 content div。
在 JSP Editor 中，删除 content <div> 中的内容 Main Content。
在 Layout Panel 的属性页中，将宽度设置为 100%。现在 Layout Panel 应该覆盖整个 Main Content <div>。
在 Properties 窗口中，将 Page Layout 模式设置为 Grid Layout，以便在 Visual Designer 中放置组件。
握住 Layout Panel 组件底部的重设大小柄，重设 Layout Panel 的大小为您的内容可以占据的最大面积。按下 Refresh Designer 按钮。
- 注意：如果您希望主内容面板随着内容总量而增长，则使用 Group Panel 组件，而不是 Layout Panel 组件。但是，Group Panel 组件不支持 Grid Layout 模式，您应该在 Flow Layout 模式下使用其他 Layout 组件来放置组件。
运行应用程序。结果应该类似于图 7。

图 7：已部署应用程序

结束语

在本教程中，使用基于 CSS 的固定页面布局创建了一个 Web 应用程序。您也可以使用 Style Editor 更改基本和布局组件的属性。