Bea Portal 布局样式设计参考文档.doc

识成果名称Bea Portal 布局样式设计所属目录研发类版本号V1.0Bea Portal 布局样式设计参考文档V1.0成果状态申报人及审核人日 期申 报谢兴林2008-10-22初 审苗宇2008-10-27终 审知识成果简要信息表成果名称Bea Portal 布局样式设计分类层次研发类关键字Bea Portal 布局 样式 主题 桌面适用范围Bea Portal 门户布局样式开发内容摘要Bea Portal 门户的体系结构Bea Portal 布局样式文件结构Bea Portal 布局样式样例Bea Portal 布局与样式的使用成果形式Word文档创建人谢兴林创建时间2008-10-22版本信息修订日期版本号说明作者2008-10-220.1提交知识成果文档谢兴林审核状态审核人通过审核日期审核意见初审苗宇2008-10-27内容详细，对BEA Portal整个的外观感觉的开发进行了很好的总结，也算是对于门户开发的一项技术经验的积累，对于其他人也是一篇很好的帮助文档。终审知识成果名称Bea Portal 布局样式设计所属目录研发类版本号V1.0目录1.文档概要12.Bea Portal门户的体系结构12.1.桌面12.2.外壳22.3.书册22.4.页面22.5.布局和占位符22.6.“门户渲染”组件和“外观及感觉”组件33.Bea Portal 布局样式文件结构33.1.整体结构33.2.markup目录53.3.Skeletons目录113.4.Skins 目录124.Bea Portal 布局样式样例134.1.布局设计样例134.2.主题样式设计样例175.Bea Portal布局与样式的使用185.1.布局的使用185.2.样式的使用196.总结21知识成果名称Bea Portal 布局样式设计所属目录研发类版本号V1.01. 文档概要本文档着重介绍了Bea Portal 门户的体系结构，布局样式的文件体系结构及布局样式的开发方法。通过门户的体系结构讲解了门户样式的组成，通过对布局样式文件的结构讲解了布局样式中各文件在布局样式设计中的用途及使用方法，最后通过布局和样式的样例讲解了布局和样式的设计及使用方法。适用于初学门户布局样式设计者使用。2. Bea Portal门户的体系结构下面对一些名词进行解释：2.1. 桌面桌面是门户组件的受众特定视图，它包含门户页眉、页脚和主体。主体包含大量门户内容：书册、页面、Portlet 和外观及感觉元素。一个门户可以支持一个或多个桌面。2.2. 外壳桌面的页眉和页脚，由门户外壳（.shell 文件）控制，通常是主体上方及下方的区域。这些区域通常显示诸如个性化内容、横幅图形、法律声明和相关链接等内容。2.3. 书册书册是提供高级内容组织和导航的组件。书册包含页面或其他书册，提供页面及内容的分层嵌套机制。书册由控件（如选项卡集）标识。2.4. 页面页面包含显示实际门户内容的 Portlet。门户的内容还可以包含书册及其他页面。页面由控件（如选项卡集）标识。2.5. 布局和占位符布局即一种 HTML 表定义，页面使用布局可确定页面中 Portlet 的物理位置。管理员和用户可以为页面选择不同的可用布局。占位符是布局中的各个单元，Portlet 放置在这些单元中。Portlet 是呈现应用程序、信息和业务流程的窗口。Portlet 可以包含任何内容：静态 HTML 内容、Java 控件、复杂 Web Service 和处理量很大的应用程序。Portlet 可以互相通信，并加入 Java 页面流，此页面流使用事件，通过应用程序确定用户路径。一个页面可以有多个 Portlet。您还可以拥有一个 Portlet 的多个实例。例如，可以将 Portlet 实例放在多个页面上；这样，如果用户没有查看具有此 Portlet 的某一页面的权限，则可以查看其他具有此 Portlet，并有权限查看的页面。Portlet 可以拥有不同模式，如可在标题栏中选择的最小化、最大化、编辑、删除、配置和帮助。 2.6. “门户渲染”组件和“外观及感觉”组件桌面的外观由“外观及感觉”确定。外观及感觉定义包含两种主要元素：外观和骨架。1) 外观 - 外观提供桌面界面的全部组件使用的总体颜色、图形及样式。外观是图形和层叠样式表 (CSS) 的集合，允许更改门户的外观及感觉，而无需直接修改门户组件。2) 骨架 - 外观及感觉文件还提供要使用的骨架目录的路径。每种类型的组件（从桌面到 Portlet 的标题栏）都具有相关的 JSP 文件（称为骨架文件），用于渲染组件。3. Bea Portal 布局样式文件结构3.1. 整体结构1. 首先新建一个Bea Portal工程，进入Portal视图。如图：2. 点击左边文档浏览窗口中的“Merged Projects”,可以看到如图所示的工程系统文件“framework”（以斜体显示都工程自动生成的系统文件或文件夹）。3. 在“framework”文件夹上右键，点击“Copy To Project ” ，将工程系统文件拷贝到项目中。4. 点击“Navigator”进入文档浏览器窗口打开“framework”文件夹可以看到如下图的文件结构：Framework目录下有三个样式所用目录：markup,skeletons,skins。Markup主要存放的样式，主题，感观，布局，菜单的XML定义文件。Skeletons主要为对应样式的骨架文件，即实现XML定义的相关文件的JSP；skins目录存放对应主题下的CSS文件，JS文件，主题图片文件。3.2. markup目录主要布局定义文件及布局示例图片，感观文件及示例图片，菜单栏定义文件，外壳文件，主题文件。文件结构如下图：1) layout目录布局定义文件及布局示例图片，每个布局包含以下红色标注的三个定义文件加上在“skeletons”文件夹下对应样式的实现相关的 JSP 文件（称为骨架文件），用于渲染组件，形成一个布局样式模型。 “layout”目录文件结构如下图：它用于设置“book”中内容的布局，布局列表如图：选中“book”后可通过布局列表选择如图所示的布局时，“book”中的内容布局如下图：a) *.html.txt文件布局模型文件，主要是用于表格或层实现的布局模型结构。代码如下： “portalLayout”，“thePortalLayout”，“placeholderTD”为框架文件的参数信息，在表格的对应地方按例子填写即可，其中“”中的“number”值从0开始自加一方式书写。b) *.layout文件布局描述文件，描述布局信息及设置布局显示样式的相关参数。如：宽度。代码如下：文件内容为一标准的XML文件格式。其中“markupDefinition”标签描述了一些XML的相关信息。在布局设计时无需修改，按照原样编写即可。“locale”标签设置语言类型，默认为英文，按默认即可。“layout”标签内的“title”为在“Layout Type”布局类型中显示的布局名称。“description”标签描述该布局的信息。“htmlLayoutUri”标签设置框架文件“*.html.txt”文件的路径。“iconUri”标签设置该布局的一个示意图片的路径。“markupType”标签描述该文件的类型。如“layout”为布局，“LookAndFeel”为感观。“markupName”标签为该描述文件名称。“placeholder”标签为在对应的框架文件“*.html.txt”文件中被替换的内容的相关信息，这组标签的定义顺序直接影响“book”中内容的样式设置。它的顺序是按照0，1，2，n，设计时根据对应的框架文件中的“placeholder”的“number”索引，按顺序设置信息。“title”标签为替换内容的标题。“width”标签为该部分内容显示时的宽度。c) *.gif文件布局示意图。2) Lookandfeel目录主要存放感观文件，目录结构如：图中标注的两个文件为为一个感观类型的文件，它包括感观描述文件和感观示意图片。a) *.gif文件感观文件示意图片。b) *.laf感观定义文件。主要代码说明： lookAndFeel标签主要用于描述感的属性。其中：title属性在感观列表中显示的名称。Description 属性感观描述。definitionLabel 属性定义标签的名称。Skin 属性对应皮肤名称。skinPath 属性对应皮肤文件路径。Skeleton 属性对应骨架文件名称。skeletonPath 属性对应骨架文件路径。markupType 属性为该类文件固定名称（LookAndFeel）。3) Menu目录存放定义菜单栏的文件，默认的为“multilevel.menu”，“singlelevel.menu”两个文件，对应默认到“skeleton”目录的对应样式文件下的“multilevel menu.jsp”，“singlelevelmenu.jsp”，默认为一级和多级菜单中的骨架文件。如果需要自定义菜单可以按默认文件格式设计。文件结构如图：示例代码： singleLevelMenu标签中title属性为菜单列表中显示的名称。skeletonUri属性 实现菜单栏的骨架文件，如果不写该标签会默认到对应样式的骨架文件(skeletons/default/*/)中找“singleLevelMenu ”中的“singlelevelmenu.jsp”如果你对菜单栏的样式有特殊的要求可以修改或设计对应该的样式的骨架文件。4) Shell目录该目录下为样式外壳类型文件，常见的外壳类型如：头部内容区底部；头部左边树形面板内容区底部。一般可以不用修改其中的文件，如果有特殊的需要，可以将“visitorTools.shell”文件复制将其中的“title”属性修改为自定义的名称即可，将文件修改即可。5) theme目录3.3. Skeletons目录本目录主要用于存放骨架文件，如：菜单栏的实现JSP文件，布局的实现JSP文件，文件结构如下图：以上结构中文件名中带“layout”的属于布局的骨架文件，带“menu”的为菜单骨架文件，titlebar.jsp为Portlet的标题栏骨架文件，带“button”的JSP文件为“titlebar”的Portlet操作对应的实现文件。其余的文件及文件夹只作了解。3.4. Skins 目录存放对应主题下的CSS文件，JS文件，主题图片文件，这几类文件是主题设计中经常使用要熟悉，其它文件只作了解。下面对目录中的文件进行说明。目录结构如图：其中css目录下主要文件结构如图：body.css 内容区的样式接口，包括header，footer,body的样式。book.css书页中的CSS样式接口，包括书页的字体，链接，边距等。button.cssPortlet上的按钮样式接口，如图片路径。form.css表单样式接口。可设置文本框，列表框的样式。layout.css布局样式接口，设置布局区域间的样式。portlet.cssPortlet样式接口，定义单个Portlet的内容样式。window.cssPortlet窗口样式接口，定义Portlet标题栏样式。css.css主要是自己在当前样式下所要使用的CSS，即自己定义CSS样式。4. Bea Portal 布局样式样例4.1. 布局设计样例下面我们设计一个如图所示的布局。在“layout”目录下按以下步骤操作。1. 创建“三列布局.html.txt”的布局原形文件。文件代码如下：其中“class=portalLayout， id=thePortalLayout，class=placeholderTD”为固定格式，“”为单元格内容，“number”的值是一个自增索引。2. 创建“三列布局.layout”文件。文件代码如下：3. 制作一个布局的原形图片，命名为“三列布局.gif”，图片的名称要与对应“*.layout”文件中的“iconUri”属性值相同即可。4. 创建一个名为“ForntPagelayout.jsp”的文件放到“skeletons”目录下所有主题目录下，以保证在使用其它主题时能够使用该布局。该文件名一定与对应“*.layout”文件中“type=ForntPage”的值连接上“layout”命名。文件结构如图：table render:writeAttribute name=id value= /render:writeAttribute name=class value= defaultValue=bea-portal-layout/render:writeAttribute name=style value=/ cellspacing=0%for (int i = 0; i td class=bea-portal-layout-placeholder-container rowspan=2render:writeAttribute name=width value=/render:renderChildpresentationContext= /render:renderChildpresentationContext= /td class=bea-portal-layout-placeholder-containerrender:writeAttribute name=width value=/render:renderChildpresentationContext= /注意：上面“get”方法的索引值从0开始。最大值为“layout”文件中“placeholder”标签的个数减1，该文件的HTML格式和对应的“*.html.txt”相同。4.2. 主题样式设计样例下面设计一个如图所示的主题样式。步骤如下：1、 在“markup” “lookandfeel”目录新建感观定义文件“blue.laf”,代码如下： 制作一个主题样式缩略图，文件名与感观定义文件名相同，放在相同目录下，以便在选择样式的时候可以看到对应样式的缩略样式。3、在/framework/skins/目录下新建“blue“目录（此处目录名要与第一步中skin=blue的值相同，否则样式无法应用），目录内容可以从当前目录下的“default”目录拷贝，然后修改目录中的“css”目录中的css文件，根据自己的需要修改CSS的内容，但css接口名称不要修改。可参考“样式布局文件结构”中的“skins”目录讲解进行CSS设计。4、在“skeletons”目录下新建一个“blue”目录（此处目录名要与第一步中skeleton=blue的值相同，否则样式无法应用），目录中的文件可以从“default”目录中拷贝，如果各样式都使用了统一的CSS名称，可以直接使用，如果样式的头部文件，底部和菜单栏有内容的变化或使用了自己定义的CSS样式名称，则需要修改其中的：header.jsp,footer.jsp, singlelevelmenu.jsp文件的内容，如果有自定义的菜单则需要修改对应菜单的骨架文件。5. Bea Portal布局与样式的使用5.1. 布局的使用1、 打开“.portal”文件，在需要修改布局的“page”边框线上点击，如图：2、在右侧如图所示的“属性”窗口中选择“Layout Type”在下拉列表中看到刚才新建的布局，名称为“title=三列布局”中的title的值。选中即可，在“.portal”文件中对应的“page”中看到如图所示的效果。建议：为了保证布局骨架文件的正确性，最好在选中设计的布局后，在地址栏里直接输入“http:/localhost:7001