目录   -  关于页面片段 -  设计包含页面片段的页 -  创建页眉片段 -  创建导航片段 -  将片段添加到另一页 -  禁用当前页的链接 -  执行更多操作：添加页脚片段 -  使用页面片段的提示

关于页面片段

设计包含页面片段的页

1. 创建一个新的 Web 应用程序项目，并将其命名为 FragmentExample。
   
   图 1 显示了将在以下步骤中创建的页。
   
   

   图 1：应用程序的主页

    
   
2. 将一个“页面片段框”组件从组件面板的“布局”类别拖动到页面的左上角。
   
   将打开“选择页面片段”对话框。
   
   
3. 单击“创建新的页面片段”。在“名称”字段中键入 CompanyLogo，然后单击“确定”。
   
   该页面片段将出现在页面上。此外，该页面片段还将被添加到“项目”窗口中和“概要”窗口内的 <div> 块中。
   
   
4. 单击“关闭”以关闭“选择页面片段”对话框。
   
   可视设计器中的虚线显示页面片段的大小。缺省大小是 400 像素（宽）x 200 像素（高）。
   
   
5. 将另一个“页面片段框”组件放置在页面的左侧，使其位于页面片段 CompanyLogo 的下方。将此页面片段命名为 Navigation。
   
   
6. 将一个“静态文本”组件从组件面板的“基本”类别拖动到页面上，并将其放在页面片段 Navigation 的右侧。请确保将该组件放在页面上而不是页面片段上。将此组件的 text 属性更改为 Welcome to Sky Company。

创建页眉片段

图 2：CompanyLogo 页面片段

1. 请将公司徽标样例 JPEG 文件保存到文件系统（如果您尚未这样做）。
   
   
2. 在可视设计器中，通过双击组件打开 CompanyLogo 片段。
   
   白色背景显示页面片段的大小。
   
   
3. 在“属性”窗口中，将其高度属性设置为 120px，并将宽度属性设置为 720px。
   
   
4. 将“图像”组件从组件面板的“基本”类别拖动到左上角的页面片段中。
   
   
5. 在“属性”窗口中，单击“图像”组件的 url 属性的省略号 (...) 按钮。将公司徽标添加到页面片段，如下所示：
   
   
   1. 在对话框中单击“添加文件”。
   2. 找到存储公司徽标的文件夹并选择该图像。
   3. 单击“添加文件”。IDE 会将该图像复制到项目的 resources 目录。
   4. 单击“确定”。
      
      
6. 单击 "Page1" 标签以查看对 CompanyLogo 片段的更新。根据需要调整页面上的组件布局。

创建导航片段

图 3：Navigation 片段

1. 在可视设计器中，通过双击组件打开 Navigation 片段。
   
   
2. 在“属性”窗口中，将其高度属性设置为 100px，并将宽度属性设置为 150px。
   
   
3. 将一个“超级链接”组件从组件面板的“基本”类别拖放到页面片段中。将此组件的 text 属性设置为 Home。
   
   
4. 在“属性”窗口中，将此“超级链接”组件的 id 属性设置为 homeLink，并将其 url 属性设置为 /faces/Page1.jsp。
   
   
5. 将另一个“超级链接”组件拖动到页面片段中。将此组件的 text 属性设置为 Company News。
   
   
6. 将此“超级链接”组件的 id 属性设置为 newsLink，并将其 url 属性设置为 /faces/News.jsp。
   
   在下一部分中，将创建 News 页。

将片段添加到另一页

1. 在“项目”窗口中，右键单击 "FragmentExample" >“Web 页”节点，然后选择“新建”>“页”。键入 News 作为页面的名称，然后单击“完成”。
   
   News 页将在可视设计器中打开。按图 4 所示设计该页。
   
   

   图 4：News 页

    
   
2. 单击 "Page1" 标签。将“页面片段”和“静态文本”组件从此页复制到 News 页。
   
   
3. 在“概要”窗口中，按住 Ctrl 键选择两个 div 元素和“静态文本”组件。请确保选择 div 元素本身，而不是仅选择其 jsp:directive.include 子元素。
   
   
4. 右键单击选定的内容，然后从弹出式菜单中选择“复制”。
   
   
5. 单击 "News" 标签。
   
   
6. 在可视设计器中单击鼠标右键，然后从弹出式菜单中选择“粘贴”。根据需要调整页面上的组件布局。
   
   
7. 将“静态文本”组件的 text 属性更改为 We have a new Chief Executive Officer。
   
   
8. 单击 News 页中的空白处。在“属性”窗口中，单击背景属性的省略号 (...) 按钮，然后使用颜色选择器将颜色设置为浅黄色。
   
   CompanyLogo 片段和 Navigation 片段将继承 News 页的背景色。

禁用当前页的链接

1. 单击 "Page1" 标签，然后打开该页的 Java 源代码。
   
   
2. 将以下代码添加到 prerender 方法：
   
   

   代码样例 1：用于禁用当前页的链接的代码

   public void prerender() { Navigation navigationFragmentBean = (Navigation)getBean("Navigation"); Hyperlink homeLink = navigationFragmentBean.getHomeLink(); homeLink.setDisabled(true); }

    
   
3. 在 Java 编辑器中单击鼠标右键，然后选择“修复导入”。
   
   
4. 单击 "News" 标签，然后打开该页的 Java 源代码。
   
   
5. 将以下代码添加到 prerender 方法：
   
   

   代码样例 2：用于禁用当前页的链接的代码

   public void prerender() { Navigation navigationFragmentBean = (Navigation)getBean("Navigation"); Hyperlink newsLink = navigationFragmentBean.getNewsLink(); newsLink.setDisabled(true); }

    
   
6. 在 Java 编辑器中单击鼠标右键，然后选择“修复导入”。
   
   
7. 运行应用程序。
   
   验证 Home 和 Company News 链接是否能够正常使用。

执行更多操作：添加页脚片段

使用页面片段的提示

• 本教程中的示例使用的是“超级链接”组件，且对其 url 属性进行了设置。建议使用此方法是出于其简易性，因为它不要求设置 immediate 属性或设置页面导航。另一种方法是创建一个包含“按钮”或“超级链接”组件的页面片段，并且对组件的 action 属性进行设置。在这种情况下，您必须设置 immediate 属性，并且还必须为使用该片段的每个页面设置页面导航。如果您具有大量页面，而且“按钮”或“超级链接”组件的导航结果对于每个页面都是相同的，则可以选择编辑页面导航源文件，而不使用页面导航编辑器。要执行此操作，请单击“页面导航”工具栏中的“源”按钮。在源代码编辑器中，将 <from-view-id> 标记后的特定页面名称（例如 /Page1.jsp）替换为通配符值（如 /*）。
  
  
• 通常，页面片段将继承包含它的页面的样式设置。页面的样式表定义了这些设置。页面片段内的组件可以使用在此样式表中定义的样式类。通常可以将任何 Java Studio Creator 组件与在样式表中定义的样式类关联。
  
  
• 如果使用的是最新版本的 Java Studio Creator IDE，则设计时对页面片段进行的更新将被自动重新装入包含它们的页面。如果使用的是早期版本的 IDE，则需要更新页面，方法是：单击鼠标右键，然后选择上下文菜单中的“刷新”。
  
  
• 页面片段内不支持虚拟表单。要配置对页面片段中的组件进行选择性处理，必须将这些组件的 immediate 属性设置为 True。此解决方案足以适合许多用例；但是，它在一定程度上仍具有局限性，因为它只能配置对一组组件进行选择性处理。
  
  
• 有关使用“布局”类别的组件在页面上布置页面片段和其他组件的示例，请参见 Winston Prakash 的有关 CSS 布局技术的博客文章。
  
  
• 如本教程所示，最好使用像素（例如 100px）来设置页面片段的高度和宽度。百分比（例如 100%）可在 Firefox Web 浏览器中正常地起作用，但在 Internet Explorer 6.0 中则无效。

• 将样式添加到组件
• 使用虚拟表单