深入WebLogic Portal UI编程

下载本文示例代码
　　提要 本文重点讨论如何利用BEA WebLogic portal所提供的新功能实现UI（titlebar）的定制开发。　　一、 引言　　也许，没有什么比发行你的第一个portal产品更让你激动的了。在经过长时间的努力后，你（和你的团队）所倾力开发的应用程序终于与用户见面了！然而，本文不是教给你如何进行基本的portal开发，而是探讨如何为你的现有portal加入新的功能。　　本文将描述有关BEA WebLogic portal的一些非常有用的新特征-你可以借助这些特征来扩展你的portal页面功能。　　二、 定制Titlebar　　如果你已经使用过所有内置的titlebar功能，那么你可以很容易地实现titlebar的定制--你仅需要把一些新图标放到其上即可。首先，让我们看一下BEA为portal开发在titlebar所提供的内置功能（分别对应四个图标）：　　· Minimize：如果页面上有相当多的portlet以至于用户想最小化其中的某些以便看清其它portlet，那么在设计初期可能把它们分解成独立的页面更好些。　　· Maximize：这在使用一种多列布局时非常有用，尽管通常情况下，许多用户更喜欢单列布局。　　· Delete：如果不进行编程，那么这个图标不会作为用户设置数据的一部分而存储起来；因此这有可能惹恼你的用户-每次必须返回。更不用提，如果他们真正想要返回的话，他们不得不开始一个新的会话。　　· Help：这项功能几乎是必须的。　　因此，对大多数用户来说，在titlebar中只放置一个图标就够了。然而，下面我们将详细讨论如何进一步定制titlebar-再添加两个用户常用图标。　　三、 加入打印图标　　我们知道，现在已经到了无纸办公时代。尽管如此，portal用户仍会使用打印图标。而实际上，除了昂贵的报告和旅行计划外，他们真正想要打印的其实只是该页面的一部分：单个的portlet。作为开发者，只要用户需要，我们就应该尽最大努力满足他们的要求。因此，下面我将向你介绍怎样打印单个的portlet。　　注意，本文中的例程实现与命名惯例有一定联系。但是，我们所使用的命名不会影响真正的实现机制。首先，让我们来看一下window.jsp文件中的下面一行代码： ＜render:writeAttribute name="id"value="＜%= window.getPresentationId() %＞"/＞　　在此，你仅需要把ID值改变为window.getDefinitionLabel()，因为它可由所有版本的portal从任何存在Window上下文的地方进行存取。　　现在，既然你已经有一个该portlet的句柄，那么你可以创建一个能够打开一个可打印页面的小脚本。 function printPortlet(appPath， portletId， portletName){　var pageString = appPath '/resources/jsp/　printPage.jsp?portletId=' portletId;　var printWindow = window.open(pageString， 'PrintPage'，"location=no，scrollbars=no，resizable");　printWindow.focus();}　　上面的脚本应该驻留在一个.js文件中，这样在每个页面上就可以只加载单个副本。　　然后，打开titlebar.jsp并且找到下面内容： ＜td class="bea-portal-window-titlebar-buttons"nowrap="nowrap"＞　　在这个空的td（填充了BEA图标）中，放入你的打印图标和一个对你的脚本的调用。为了实现可移植性，你要动态地传入参数： ＜img src="＜render:getSkinPathimageName="printerIcon.gif" /＞"style="cursor:pointer; position:relative; top:-2px"onclick="printPortlet('＜%=request.getContextPath()%＞'，'＜%=window.getDefinitionLabel()%＞')"＞　　这样就可以使你的新图标出现在你的用户titlebar中： 　　最后，你需要创建你自己的打印页面以使该图标做一些有用的事情。因为该页面不是portal上下文的一部分，所以你需要硬编码你的样式参考（style reference）。另外，由于在标准框架中的嵌套DIV的继承特点，所以你需要一些正式生成的HTML，后面再另上你的脚本生成和打印该portlet的部分代码： ＜%@ page language="java"contentType="text/html;charset=UTF-8"%＞＜%@ taglib uri="netui-tags-html.tld" prefix="netui"%＞＜netui:html＞＜head＞＜title＞Portlet Print Page＜/title＞＜meta name="bea-portal-meta-skin"content="/framework/skins/default"/＞＜meta name="bea-portal-meta-skin-images"content="/framework/skins/default/images"/＞＜link href="/snelsondemo/framework/skins/default/css/body.css"rel="stylesheet" type="text/css"/＞＜link href="/snelsondemo/framework/skins/default/css/button.css"rel="stylesheet"type="text/css"/＞＜link href="/snelsondemo/framework/skins/default/alert/css/window-alert.css"rel="stylesheet"type="text/css"/＞＜link href="/snelsondemo/framework/skins/default/css/window.css"rel="stylesheet"type="text/css"/＞＜link href="/snelsondemo/framework/skins/default/plain/css/window-plain.css"rel="stylesheet"type="text/css"/＞＜link href="/snelsondemo/framework/skins/default/css/portlet.css"rel="stylesheet"type="text/css"/＞＜link href="/snelsondemo/framework/skins/default/css/book.css"rel="stylesheet"/＞＜link href="/snelsondemo/framework/skins/default/css/layout.css"rel="stylesheet"type="text/css"/＞＜link href="/snelsondemo/framework/skins/default/css/form.css"rel="stylesheet"type="text/css"/＞＜script type="text/javascript"src="/snelsondemo/framework/skins/default/js/menu.js"＞＜/script＞＜script type="text/javascript"src="/snelsondemo/framework/skins/default/js/util.js"＞＜/script＞＜script type="text/javascript"src="/snelsondemo/framework/skins/default/js/delete.js"＞＜/script＞＜script type="text/javascript"src="/snelsondemo/framework/skins/default/js/float.js"＞＜/script＞＜script type="text/javascript"src="/snelsondemo/framework/skins/default/js/menufx.js"＞＜/script＞＜script type="text/javascript"src="/snelsondemo/framework/skins/default/js/skin.js"＞＜/script＞＜style type="text/css"＞.bea-portal-window-titlebar-title{font-weight:bold}＜/style＞＜/head＞＜body class="bea-portal-body"＞＜div class="bea-portal-book-primary"＞＜div class="bea-portal-book-primary-content"＞＜div class="bea-portal-book-primary-page"style="margin-right:10px"＞＜div id="portletHtml"class="bea-portal-window"＞＜/div＞＜/div＞＜/div＞＜/div＞＜script language="JavaScript"＞var portletId = '＜%=request.getParameter("portletId")%＞';document.getElementById('portletHtml').innerHTML =self.opener.document.getElementById(portletId).innerHTML;window.print();＜/script＞＜/body＞＜/netui:html＞　　阅读完上面的标注和代码后，你就会看到，我们已定义的标签现在可用于填充我们的弹出菜单-通过仅使用portlet实现，从而使该页面的其它空间用于实现打印，如下图所示： 　　当然，你还可以进一步修改这个打印页面，例如停用链接或把页面馈送到一个隐蔽的iFrame并且由用户调用打印功能，等等。共3页。 1 2 3 8 : 　　提要 本文重点讨论如何利用BEA WebLogic portal所提供的新功能实现UI（titlebar）的定制开发。　　一、 引言　　也许，没有什么比发行你的第一个portal产品更让你激动的了。在经过长时间的努力后，你（和你的团队）所倾力开发的应用程序终于与用户见面了！然而，本文不是教给你如何进行基本的portal开发，而是探讨如何为你的现有portal加入新的功能。　　本文将描述有关BEA WebLogic portal的一些非常有用的新特征-你可以借助这些特征来扩展你的portal页面功能。　　二、 定制Titlebar　　如果你已经使用过所有内置的titlebar功能，那么你可以很容易地实现titlebar的定制--你仅需要把一些新图标放到其上即可。首先，让我们看一下BEA为portal开发在titlebar所提供的内置功能（分别对应四个图标）：　　· Minimize：如果页面上有相当多的portlet以至于用户想最小化其中的某些以便看清其它portlet，那么在设计初期可能把它们分解成独立的页面更好些。　　· Maximize：这在使用一种多列布局时非常有用，尽管通常情况下，许多用户更喜欢单列布局。　　· Delete：如果不进行编程，那么这个图标不会作为用户设置数据的一部分而存储起来；因此这有可能惹恼你的用户-每次必须返回。更不用提，如果他们真正想要返回的话，他们不得不开始一个新的会话。　　· Help：这项功能几乎是必须的。　　因此，对大多数用户来说，在titlebar中只放置一个图标就够了。然而，下面我们将详细讨论如何进一步定制titlebar-再添加两个用户常用图标。　　三、 加入打印图标　　我们知道，现在已经到了无纸办公时代。尽管如此，portal用户仍会使用打印图标。而实际上，除了昂贵的报告和旅行计划外，他们真正想要打印的其实只是该页面的一部分：单个的portlet。作为开发者，只要用户需要，我们就应该尽最大努力满足他们的要求。因此，下面我将向你介绍怎样打印单个的portlet。　　注意，本文中的例程实现与命名惯例有一定联系。但是，我们所使用的命名不会影响真正的实现机制。首先，让我们来看一下window.jsp文件中的下面一行代码： ＜render:writeAttribute name="id"value="＜%= window.getPresentationId() %＞"/＞　　在此，你仅需要把ID值改变为window.getDefinitionLabel()，因为它可由所有版本的portal从任何存在Window上下文的地方进行存取。　　现在，既然你已经有一个该portlet的句柄，那么你可以创建一个能够打开一个可打印页面的小脚本。 function printPortlet(appPath， portletId， portletName){　var pageString = appPath '/resources/jsp/　printPage.jsp?portletId=' portletId;　var printWindow = window.open(pageString， 'PrintPage'，"location=no，scrollbars=no，resizable");　printWindow.focus();}　　上面的脚本应该驻留在一个.js文件中，这样在每个页面上就可以只加载单个副本。　　然后，打开titlebar.jsp并且找到下面内容： ＜td class="bea-portal-window-titlebar-buttons"nowrap="nowrap"＞　　在这个空的td（填充了BEA图标）中，放入你的打印图标和一个对你的脚本的调用。为了实现可移植性，你要动态地传入参数： ＜img src="＜render:getSkinPathimageName="printerIcon.gif" /＞"style="cursor:pointer; position:relative; top:-2px"onclick="printPortlet('＜%=request.getContextPath()%＞'，'＜%=window.getDefinitionLabel()%＞')"＞　　这样就可以使你的新图标出现在你的用户titlebar中： 　　最后，你需要创建你自己的打印页面以使该图标做一些有用的事情。因为该页面不是portal上下文的一部分，所以你需要硬编码你的样式参考（style reference）。另外，由于在标准框架中的嵌套DIV的继承特点，所以你需要一些正式生成的HTML，后面再另上你的脚本生成和打印该portlet的部分代码： ＜%@ page language="java"contentType="text/html;charset=UTF-8"%＞＜%@ taglib uri="netui-tags-html.tld" prefix="netui"%＞＜netui:html＞＜head＞＜title＞Portlet Print Page＜/title＞＜meta name="bea-portal-meta-skin"content="/framework/skins/default"/＞＜meta name="bea-portal-meta-skin-images"content="/framework/skins/default/images"/＞＜link href="/snelsondemo/framework/skins/default/css/body.css"rel="stylesheet" type="text/css"/＞＜link href="/snelsondemo/framework/skins/default/css/button.css"rel="stylesheet"type="text/css"/＞＜link href="/snelsondemo/framework/skins/default/alert/css/window-alert.css"rel="stylesheet"type="text/css"/＞＜link href="/snelsondemo/framework/skins/default/css/window.css"rel="stylesheet"type="text/css"/＞＜link href="/snelsondemo/framework/skins/default/plain/css/window-plain.css"rel="stylesheet"type="text/css"/＞＜link href="/snelsondemo/framework/skins/default/css/portlet.css"rel="stylesheet"type="text/css"/＞＜link href="/snelsondemo/framework/skins/default/css/book.css"rel="stylesheet"/＞＜link href="/snelsondemo/framework/skins/default/css/layout.css"rel="stylesheet"type="text/css"/＞＜link href="/snelsondemo/framework/skins/default/css/form.css"rel="stylesheet"type="text/css"/＞＜script type="text/javascript"src="/snelsondemo/framework/skins/default/js/menu.js"＞＜/script＞＜script type="text/javascript"src="/snelsondemo/framework/skins/default/js/util.js"＞＜/script＞＜script type="text/javascript"src="/snelsondemo/framework/skins/default/js/delete.js"＞＜/script＞＜script type="text/javascript"src="/snelsondemo/framework/skins/default/js/float.js"＞＜/script＞＜script type="text/javascript"src="/snelsondemo/framework/skins/default/js/menufx.js"＞＜/script＞＜script type="text/javascript"src="/snelsondemo/framework/skins/default/js/skin.js"＞＜/script＞＜style type="text/css"＞.bea-portal-window-titlebar-title{font-weight:bold}＜/style＞＜/head＞＜body class="bea-portal-body"＞＜div class="bea-portal-book-primary"＞＜div class="bea-portal-book-primary-content"＞＜div class="bea-portal-book-primary-page"style="margin-right:10px"＞＜div id="portletHtml"class="bea-portal-window"＞＜/div＞＜/div＞＜/div＞＜/div＞＜script language="JavaScript"＞var portletId = '＜%=request.getParameter("portletId")%＞';document.getElementById('portletHtml').innerHTML =self.opener.document.getElementById(portletId).innerHTML;window.print();＜/script＞＜/body＞＜/netui:html＞　　阅读完上面的标注和代码后，你就会看到，我们已定义的标签现在可用于填充我们的弹出菜单-通过仅使用portlet实现，从而使该页面的其它空间用于实现打印，如下图所示： 　　当然，你还可以进一步修改这个打印页面，例如停用链接或把页面馈送到一个隐蔽的iFrame并且由用户调用打印功能，等等。共3页。 1 2 3 8 : 下载本文示例代码


深入WebLogic Portal UI编程深入WebLogic Portal UI编程深入WebLogic Portal UI编程深入WebLogic Portal UI编程深入WebLogic Portal UI编程深入WebLogic Portal UI编程深入WebLogic Portal UI编程深入WebLogic Portal UI编程深入WebLogic Portal UI编程深入WebLogic Portal UI编程深入WebLogic Portal UI编程深入WebLogic Portal UI编程深入WebLogic Portal UI编程深入WebLogic Portal UI编程深入WebLogic Portal UI编程