快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

澳门新葡亰在线视频观看:深入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:getSkinPath

imageName="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>

<tit澳门新葡亰在线视频观看le>

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并且由用户调用打印功能,等等。

四、 加入快算表功能

与打印亲昵相关的别的一项功能-也是商业用户最常常应用的一项功能,是操作表格数据。当然,在他们登录到你的portal的同时,你可以经由过程实现一些AJAX技术以容许他们以不合要领来不雅看数字,而且很可能你应该这样做。然则,当用户想取走你的数据并想在飞机上操作它们时,环境会若何呢?经由过程对全部澳门新葡亰在线视频观看portal加以缓冲而使他们陷于逆境,或者提示他们若何把数据复制到一个速算表(除非你有一项伟大年夜的技巧支持预算)中吗?最好不要这样。那么,你为什么不按他们想要的要领把数据给他们呢?

我们的实现思惟是,首先经由过程标签定义获得我们的portlet的一个句柄,然后用它构建一个速算表。

留意,现在你想要在自己的页面上创建一个暗藏的iFrame来接管页面(由于其结果是一个文件,而不是一个页面)。为此,你只需把下面内容添加到footer.jsp中:

<iframe id="scriptRender"

src=""

style="visibility:hidden;

height:0px; padding:0px;

margin:0px"></iframe>

然后,你要在你的jsp文件中建立一个类似于打印函数的新函数。不过这个新函数作了一些改变以暗藏被调用的页面并通报表格数据:

function excelPortlet(appPath, tableId, portletName){

var tableData = document.getElementById(tableId).outerHTML;

var pageString =appPath+'/resources/jsp/excelPage.jsp?tableData='+tableData+'&portletName='+portletName;

document.getElementById('scriptRender').src = pageString;

}

接下来,你要应用与前面操作打印图标类似的要领来把你的图标添加到对象栏上-当然现在你必须暗藏该图标(直到你想应用它并且参考你的表格而不是全部的portlet为止)。请参考如下代码:

<img src="<render:getSkinPath

imageName="excelIcon.gif" />"

id="<%=window.getDefinitionL澳门新葡亰在线视频观看abel()%>.excelIcon"

style="cursor:pointer;

position:relative; top:-2px;

visibility:hidden"

onclick= "excelPortlet('<%=request.getContextPath()%>',

'<%=window.getDefinitionLabel()%>.

excelTable', '<%= title %>')">

当然,为了应用该图标,你首先必要取消暗藏它。为此,你可以在portlet JSP本身实现-经由过程添加一个到Window高低文的参考,然后再调用你的标签定义的句柄,象下面这样:

<%@ page import="com.bea.netuix.servlets.controls.window.

WindowPresentationContext"%>

<澳门新葡亰在线视频观看%

WindowPresentationContext window =WindowPresentationContext.

getWindowPresentationContext(request);

%>

<script language="javascript">

document.getElementById('<%=window.getDefinitionLabel()%>.excelIcon')

.style.visibility = 'visible';

</script>

当然,你还要编写一个简短的JSP来天生你的速算表:

<%@ page language="java" contentType="text/html;charset=UTF-8"%>

<%

String tableData = request.getParameter("tableData");

response.reset();

response.setContentType("application/xls");

response.setHeader("Content-Disposition","attachment;filename=" +request.getParameter("portletName")

+".xls");

%>

<%=tableData%>

在暗藏的iFrame和相应变更这一光阴段内,用户只能看到下载部分,而不会看到屏幕后台的逻辑实现:

假如你在表格的标题行上应用了<th>标签,那么Excel将把它设置为一个标题行以便于可能的进一步排序。

假如你在一个portlet中有多张表,你可以应用澳门新葡亰在线视频观看相同的参考ID来打开该图标从而动态地设置脚本调用。

五、更新日期数据

现在,我们要实现更新日期的问题-向titlebar中添加portlet着末被更新的日期信息。当然,你可以把此信息放到portlet本身的设计中去;然则,经由过程这种要领将会节省屏幕空间。

由于BEA没有事先斟酌到这一点,以是你必要简单地改动一下titelbar.jsp-把声明移到天生高低文的外貌即可。然后,找到声明WindowPresentationContext的scriptlet部分并且把这一部分移动到<render:beginRender>标签的上面。现在,既然你能够从render范围的外部存取window工具,那么,让我们把下列语句添加到</tr>后面:

<tr><td colspan="3"

id="<%=window.getDefinitionLabel()%>.dateCell"></td></tr>

现在,让我们看一下所有你必要添加到你的portlet上的代码:

<% String myDate = "As of March 1, 2006"; %>

document.getElementById('<%=window.getDefinitionLabel()%>

.dateCell').innerHTML = '<%=myDate%>';

着末,你会获得如下一幅图像:

六、增添水温和垂直导航功能

加入了上面这些特性之后,你的portal将会更为盛行,而且用户可能会要求增添更多的portlet。更多portlet将导致更多的页面(这样会使得页面空间异常拥挤,更不用提速率的问题了)。假如页面数继承增长,你的portal将着末变得很难在越过屏幕范围的组件(更不用提令用户恼火的向左右卷动的组件了,见下图)之间进行导航。

标准的单级导航要领可以卷动,然则页面导航中的其它行将占居屏幕上方的空间。别的,你可以应用多级菜单规划,然则这将应用户为找到其目标增添更多的鼠标移动(只管在你的站点有大年夜量的页面时,这种环境也是难以避免的)。

要办理上面难堪的导航问题有一个异常酷的技术:除了原有的水平导航选项卡外,你可以再增添一种垂直导航。这样可以把你的可视化设计和页面数目扩展许多--险些越发原本单个页面的存取空间。

实现这种双领导航要领的关键是应用暗藏的页面设置。

标准的单级菜单代码象下面这样跳过暗藏的页面:

if (!pageCtx.isHidden() && pageCtx.isVisible())

你可以在单级菜单代码的后面为你的垂直菜单添加一个DIV区,然后应用相反的反省来运行相同的轮回:

if (pageCtx.isHidden())

我去除了对isVisible的反省--它是冗余的。

现在,经由过程应用一些简单的CSS技术,你就可以把这个菜单放到你想要放置的任何地方。在本文示例中,我选择把它放到右边:

<div id="verticalmenu"

style="position:absolute;

top:40px;

right:20px;

width:20px;">

至此,你用了不到10分钟实现了该页面的从新调用。

假如已经隐蔽了页面,那么就可以反省并应用你新加入的图标了。只管可以实现这种类型的导航,然则我更爱好应用图标要领。在我实现的portal中,选择水平的照样垂直的导航链接是由响应的页面类型抉择的。例如,在一个主要面对商业信息的portal中,常常存在一些与主要内容不相关的页面(例如事故日历和业界新闻),然则对你的主要用户来说可能仍旧具有必然参考代价。这些"对象"页面会把他们自然地导向其它不合的导航模型--它们自力于portal的中间内容。

在BEA WebLogic Portal service pack 4之前,在API中存在一处不太相宜的地方-pageCtx.isHidden()从不返回true,由于该框架能够从页面列表中提取暗藏的页面(在把该暗藏页面返回到预定的高低文之前)。不过,你仍旧能够应用暗藏的页面,然则你必须硬编码它们的值,而不是简单地经由过程增添更多暗藏的页面来动态地扩展你的垂直导航。是以,为了确保你的硬编码具有可移植性,请确保对链接应用了render标签,如下所示:

<a href="<render:pageUrl pageLabel=" hackinguiNews"/>">News</a>

总之,就算你的用户对你第一次宣布你的portal认为异常痛快,以致于从未要求过什么;然则,现在你可以经由过程仅付出一点点努力而带给他们一些额外的惊喜了。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: