使用页面片段- NetBeans IDE 6.5教程 - 编程入门网

白色背景显示出该页面片段的大小。

在 “属性”窗口中，把“宽度”属性设置为 “720px”，“高度”属性设置为“120px”。

从“组件面板”的“基本”区段，把一个“ 图像”组件拖到页面片段的左上角。

在“属性”窗口中 ，单击该图像的“url”属性对应的省略号按钮。如 下把公司标志添加到页面片段中：

在对话框中，单击“添加文件 ”。

导航到您保存公司标志 sky.jpg 的文件夹，并选中该图像。

单击“添加文件”。IDE 把该图像复制到项目的 resources 目录，并显示该图像的相对 URL。

单击“确定”。

如 有必要，单击并拖动 sky.jpg，把它定位到页面片段的边框内。

单击 “Page1”选项卡以查看对 CompanyLogo 页面片段的更新。如有必要 ，调整组件在页面上的布局。

使用页面片段- NetBeans IDE 6.5教程(3)

创建导航片段

下面您将定义如图 3 所示 的导航片段的内容。

图 3：导航片段

通过在可视设计器中双击组件来打开 Navigation 片段。

在“属性”窗口中，把“宽度 ”属性设置为“150px”，“高度”属性设置为 “100px”。

从“组件面板”的“基本 ”区段，把一个“超级链接”组件拖放到页面片段中。把该超级 链接的文本设置为“Home”。

在“属性”窗口中，

把第二个“超级链接”组件拖到页面片段中。把该组件的文本 设置为“Company News”。

把该超级链接的“id” 属性设置为“newLink”，“url”属性设置为 “/faces/News.jsp”。

You will create the News page in the next section. 您将在下一节中创建 News 页面。

把片段添加到第二 个页面

在本节中，您将创建另一个包括页眉和导航片段的页面。您将为该页面 设置背景色，以演示页面的样式设置是如何被页面片段继承的。

在 “项目”窗口中，右键单击 “FragmentExample”>“Web 页”节点，选择“ 新建”>“Visual Web JSF 页”。把新页面命名为 “News”，单击“完成”。

将在可视设计器中打开 News 页面。您将如下图所示来设计该页面。

图 4：News 页面

单击“Page1”选项卡。您将从该 页面把页面片段和静态文本组件复制到 News 页面。

从“Page1 - 导航”窗口，按住 Ctrl 键，选中两个 div 元素和静态文本组件。一定要 选中 div 元素本身，而不只是它们的 jsp:directive.include 子元素。

右键单击所选项，从弹出菜单中选择“复制”。

单击 “News”选项卡。

使用页面片段- NetBeans IDE 6.5教程(4)

在“导航”窗口中，展开 “News”>“page1”>“html1”>&ld quo;body1”节点。右键单击 form1 并选择“粘贴”。您从 Page1.jsp 复制的组件敬爱能够出现在可视设计器中。

把静态文本组件的 文本更改为“We have a new CEO.”。

在“News” 页面中的空白处单击。在“属性”窗口中，把“标题”属 性更改为“Sky Company News”。

单击“背景”属 性对应的省略号按钮，用 颜色选择器把颜色设置为浅黄。在运行时，您将能清楚地看到 Sky Company News

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!