| 免费下载:IBM® Cognos® Express V9.5 或者 Cognos® 8 Business Intelligence Developer Edition V8.4 试用版 |
|---|
| 下载更多的 IBM 软件试用版,并加入 IBM 软件下载与技术交流群组,参与在线交流。 |
本文档补充 IBM Cognos 10 的 Security and Administration Guide,提供定制登录页面的复杂示例。提供的示例会帮助读者了解这个新特性提供的可能性和灵活性。
示例是使用 IBM WebServer 7 (IHS7)、Mozilla 3.0.7 和 Microsoft Internet Explorer 7.0.6001 针对 IBM Cognos 10 (build 10.1.4707.541) 构建和测试的。
IBM Cognos 10 引入了定制 IBM Cognos 登录和注销行为的特性,这个特性不适用于以前的版本。
本文档希望读者熟悉 HTML 3.0 标记、AJAX、CSS 和 web 开发。
希望读者熟悉 Administration and Security Guide 的第 35 章中的 Customizing the IBM Cognos Connection Login Page 小节。
定制过程分为三个步骤。浏览器请求登录页面之后,IBM Cognos 10 服务器会提供准备好的基本内容(见图 1 中的 1.)。接下来,浏览器从 Cognos Gateway 获取一个 JavaScript 文件和样式表(见图 1 中的 2.)。在第三步中,浏览器使用 AJAX 请求定制的模板,然后通过 JavaScript 逻辑处理模板,最终组装出完整的定制登录页面。
图 1. 生成定制登录页面的步骤
这个示例中描述的示例模板使用 Asynchronous JavaScript and XML – AJAX (http://en.wikipedia.org/wiki/Ajax_%28programming%29) 从任意 URL 请求内容并在登录页面上显示它。这种技术使用 JavaScript 函数 customize(),这个函数允许在模板引擎应用 Administration and Security Guide 中描述的所有其他定制之后调用自己的 JavaScript 函数。
假定的使用场景是,由 IT 部门维护要在登录页面上显示的定制文本,从而向用户通知停机维护时间或其他重要信息。优点是文本的更新完全独立于 IBM Cognos 10 系统,不需要停止并重新启动服务器,不需要停机。
当然,这只是一个简单的使用场景。可以使用 AJAX 实现许多使用场景,应该很容易通过这个示例掌握这种技术。
在这个示例中,把模板命名为 ibm1.xhtml,在同一 web 服务器上用 AJAX 装载的文件名为 customText_en.txt。模板显示一个使用几个表的页面,通过 AJAX 从另一个文件获取要在表单元格中显示的文本。另外,通过 AJAX 在 HTML 中附加几个包含脚注的 <DIV> 元素。
下面是这个示例使用的 ibm1.xhtml 文件的内容。它包含一些 CSS、JavaScript 函数和用于登录页面布局的 HTML。
<style type="text/css">
img.logo {
margin-top:50px; margin-bottom:50px; opacity:0.5; filter:alpha(opacity=50)
}
.footnote { font-size:60%; color:#000000; }
body {
background-color: #FFFFFF;
}
</style>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr><td width="100%"/><td nowrap="nowrap"><a style="color:#3399cc;
font-weight:bold; font-size:70%" href="#"
onclick="javascript:executeHelpCommand();">Help</a></td></tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="30%"/>
<td width="40%">
<img src="../samples/images/cover2.jpg"/ class="logo">
<div id="customUsers"></div>
<div id="%CL_PROMPT%"></div>
<input type="submit" value="Login"
onclick="javascript:executeOKCommand();" />
<input type="button" value="Cancel"
onclick="javascript:executeCancelCommand();" />
</td>
<td id="customTXT" width="30%"/>
</tr>
</table>
<div id="%CL_PROMPT_namespace_label%">Namespace</div>
<div id="%CL_PROMPT_username_label%">User Name:</div>
<div id="%CL_PROMPT_password_label%">Password:</div>
<div id="%CL_PROMPT_oldPassword_label%">Old Password:</div>
<div id="%CL_PROMPT_newPassword_label%">New password:</div>
<div id="%CL_PROMPT_newPasswordConfirm_label%">Confirm old password:
<img style="vertical-align:middle"
src="../ps/portal/images/state_warning_lrg.gif"/>
</div>
<div id="%CL_PROMPT_selectNamespace_caption%">
<span style="color:gray">Please select a namespace.</span>
</div>
<div id="%CL_PROMPT_enterCredentials_caption%">
<span style="color:gray;">Enter your credentials. </span>
</div>
<div id="%CL_PROMPT_badCredentialsEntered_caption%">
<span style="color:red">The username or password you entered are not valid.</span>
</div>
<div id="%CL_PROMPT_passwordExpiry_caption%">
<span style="color:red">Your password has expired.</span>
</div>
<div id="%CL_PROMPT_general_caption%">
<span style="color:red">Authentication</span>
</div>
<script type="text/javascript">
var xhr;
var xhr2;
function customize() {
initCustom();
}
function initCustom(){
xhr = loadAJAX();
xhr.open("GET", "../ps/login/customText_en.txt", true);
xhr.onreadystatechange = renderCustomText;
xhr.send(null);
var msgen = "<p>Our documentation includes user guides, getting started
guides, new features guides, readmes, and other materials to meet the needs of our varied
audience. The following documents contain related information and may be referred to in
this document.</p>";
var div = document.createElement("div");
div.style.marginTop = "100px";
div.innerHTML = "<span class=\"footnote\">" + msgen + "</span>";
document.body.appendChild(div);
}
function loadAJAX() {
var http;
if (window.XMLHttpRequest) {
http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
http = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
http = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {
alert("Cannot load XMLHttpRequest\r\n"
+ e.description);
}
}
}
return http;
}
function renderCustomText(){
if(xhr.readyState == 4){
var ret = xhr.responseText;
var cstm = document.getElementById("customTXT");
cstm.innerHTML = ret;
}
}
</script>
|
请注意 HTML 中的占位元素 <td id="customTXT" width="30%"/>。将使用它显示定制的文本。
JavaScript 包含以下函数:
customize()
当装载页面时,自动地调用这个函数。请参见 Administration and Security Guide 的第 35 章中的 Customizing the IBM Cognos Connection Login Page 小节。
InitCustom()
这个函数启动 AJAX 请求并添加一个包含文本的 DIV 块。AJAX 请求完成之后,调用 renderCustomText() 函数。
renderCustomText()
这个函数把对 AJAX 请求的文本响应读入一个变量,并通过修改 DOM 在登录页面中添加此文本。
按以下步骤安装这个示例:
- 把这里提供的代码保存在 IBM Cognos 10 Gateway 的
./webcontent/ps/login文件夹中的ibm1.xhtml文件中。 - 按文档(Security and Administration Guide 的第 35 章 “Customizing the IBM Cognos Connection Login Page”)描述的步骤在 system.xml 文件中启用定制的登录,使用的 base-template-name 是 “ibm1”。
- 在
./webcontent/ps/login文件夹中创建文本文件customText_en.txt,添加要在登录页面上显示的文本。 - 停止并重新启动 IBM Cognos 10,访问 IBM Cognos 10 Gateway URI,就会看到新的登录页面。
图 2. 显示基于 AJAX 的定制登录页面的屏幕图
定制登录页面特性为地区提供内置的支持。解析模板的模板引擎会尝试装载其后缀与提交的浏览器地区对应的模板文件。在这个示例中,根据浏览器地区提供英语和法语的登录页面,从而展示此功能的非常基本的应用。
假设模板名为 login,浏览器地区是 EN。IBM Cognos 10 会首先检查定制登录页面 login_en.xhtml。如果此文件不存在,就会检查默认的 login.xhtml。默认文件包含英语文本,对于所有非法语浏览器都会返回它。如果浏览器地区是 FR,就首先装载模板 login_fr.xhtml。因为定制控制显示的整个网页,每个地区可以有自己的定制登录页面。注意,与地区相关的登录页面独立于系统地区和为 IBM Cognos 10 系统指定的地区。
这些示例很简单,它们创建与默认 IBM Cognos 10 登录页面相似的页面。
<style type="text/css">
.customWelcome { font-weight: bold; font-family: sans-serif; font-size: 14pt; }
</style>
<div id="loginBoxWithShadow">
<div id="loginBox" style="width:260px">
<div id="loginBoxInner">
<span class="customWelcome">Welcome to Cognos 10</span><br /><br />
<div id="%CL_PROMPT%"></div><br />
<input type="submit" value="Log In"
onclick="javascript:executeOKCommand();" />
<input type="button" value="Cancel"
onclick="javascript:executeCancelCommand();" />
<br />
<br />
<div id="%CL_PROMPT_namespace_label%">Namespace</div>
<div id="%CL_PROMPT_username_label%">User Name: </div>
<div id="%CL_PROMPT_password_label%">Password: </div>
<div id="%CL_PROMPT_oldPassword_label%">Old Password:</div>
<div id="%CL_PROMPT_newPassword_label%">New password:</div>
<div id="%CL_PROMPT_newPasswordConfirm_label%">Confirm old password:
<img style="vertical-align:middle"
src="../ps/portal/images/state_warning_lrg.gif"/>
</div>
<div id="%CL_PROMPT_selectNamespace_caption%">
<span style="color:gray">Please select a namespace.</span>
</div>
<div id="%CL_PROMPT_enterCredentials_caption%">
<span style="color:gray;">Enter your credentials.</span>
</div>
<div id="%CL_PROMPT_badCredentialsEntered_caption%">
<span style="color:red">The username or password
you entered are not valid.</span>
</div>
<div id="%CL_PROMPT_passwordExpiry_caption%">
<span style="color:red">Your password has expired.</span>
</div>
<div id="%CL_PROMPT_general_caption%">
<span style="color:red">Authentication</span>
</div>
</div>
</div></div>
|
<style type="text/css">
.customWelcome { font-weight: bold; font-family: sans-serif; font-size: 14pt; }
</style>
<div id="loginBoxWithShadow">
<div id="loginBox" style="width:260px">
<div id="loginBoxInner">
<span class="customWelcome">Bienvenue a Cognos 10</span><br /><br />
<div id="%CL_PROMPT%"></div><br />
<input type="submit" value="Log In"
onclick="javascript:executeOKCommand();" />
<input type="button" value="Cancel"
onclick="javascript:executeCancelCommand();" />
<br />
<br />
<div id="%CL_PROMPT_namespace_label%">Espace-noms:</div>
<div id="%CL_PROMPT_username_label%">Code d'utilisateur: </div>
<div id="%CL_PROMPT_password_label%">Mot de passe: </div>
<div id="%CL_PROMPT_oldPassword_label%">Mot de passe: </div>
<div id="%CL_PROMPT_newPassword_label%">Nouveau mot de passe:</div>
<div id="%CL_PROMPT_newPasswordConfirm_label%">Confirmer le mot de passe:
<img style="vertical-align:middle"
src="../ps/portal/images/state_warning_lrg.gif"/>
</div>
<div id="%CL_PROMPT_selectNamespace_caption%">
<span style="color:gray">Please select a namespace.</span></div>
<div id="%CL_PROMPT_enterCredentials_caption%">
<span style="color:gray;">Enter your credentials. </span></div>
<div id="%CL_PROMPT_badCredentialsEntered_caption%">
<span style="color:red">The username or password
you entered are not valid.</span></div>
<div id="%CL_PROMPT_passwordExpiry_caption%">
<span style="color:red">Your password has expired.</span></div>
<div id="%CL_PROMPT_general_caption%">
<span style="color:red">Authentication</span></div>
</div></div>
|
按以下步骤安装这个示例:
- 把这里提供的代码保存在 IBM Cognos 10 Gateway 的
./webcontent/ps/login文件夹中的 login.xthml 和 login_fr.xhtml 文件中。 - 按文档(Security and Administration Guide 的第 35 章 “Customizing the IBM Cognos Connection Login Page”)描述的步骤在 system.xml 文件中启用定制的登录,使用的 base-template-name 是 “login”。
- 停止并重新启动 IBM Cognos 10,把浏览器地区设置为 EN,访问 IBM Cognos 10 Gateway URI。应该会看到登录页面的英语版本。
- 把浏览器地区改为 FR,再次访问 IBM Cognos 10 Gateway URI。应该会看到登录页面的法语版本。
通过使用这两个简单的模板示例,在默认情况下所有法语用户都会看到登录页面的另一个版本,主要对话框文本是法语的,错误消息是英语的。
不使用法语浏览器或语言配置的用户会看到全英语的登录页面。
这个示例在登录页面中显示滚动的消息,从而警告用户或发出重要的公告。这里的登录页面向用户显示滚动字幕,通知他们由于需要重新引导系统在下午 5 点之后不可用。这是一种发送全局消息的方法,它不会增加大量的网络通信流。
下面是其显示效果,其中显示滚动字幕的方向(红色箭头)。
图 3. 显示使用滚动字幕的定制登录页面的屏幕图
定制过程如下:
- 在定制模板中添加以下 HTML 代码。这段 HTML 代码包含一个 <IFRAME> 元素,它显示一个静态 HTML 页面的 URL,页面包含在滚动字幕中动态显示的消息。
<table border="0" cellpadding="3" cellspacing="0" width="100%" ><tbody><tr><td> <iframe src="http://<server>/<C10_ALIAS>/ps/login/alerts.html" width="100%" height="40%" frameborder="no" scrolling="no"></iframe> </td></tr></tbody></table>
注意:必须把 <IFRAME> 使用的 URL 中的 <server> 添加到 IBM Cognos Configuration 中的可信主机和域中。<C10_ALIAS> 是用于访问 IBM Cognos 10 Gateway 的虚拟目录别名,例如/c10。 - 要在屏幕上滚过的消息文本放在另一个 HTML 文件中,这个文件应该包含以下 HTML 和 JavaScript 代码:
<html> <head> <script type="text/JavaScript"> <!-- function timedRefresh(timeoutPeriod) { setTimeout("location.reload(true);",timeoutPeriod); } // --> </script> </head> <body onload="JavaScript:timedRefresh(10000);"> <div align="center"><FONT color="#ffffff" size="+1"> <MARQUEE bgcolor="#000080" transparency=100 direction="left" loop="20" width="75%"> <STRONG>Announcement! System will be unavailable after 5pm due to a reboot.</STRONG> </MARQUEE> </FONT></DIV> </body> </html>
把上面的 HTML 代码保存在./webcontent/ps/login文件夹中的 alerts.html 文件中。
<MARQUEE> 标记包含将在屏幕上滚过的消息。在这个示例中,消息是 “Announcement! System will be unavailable after 5pm due to a reboot”。另外,以下 JavaScript 代码设置 HTML 页面的刷新以及时反映消息的变动,页面会在 10 秒内刷新。<script type="text/JavaScript"> <!-- function timedRefresh(timeoutPeriod) { setTimeout("location.reload(true);",timeoutPeriod); }
- 当浏览器显示 <IFRAME> 时,
<body onload=标记将指示浏览器调用刷新页面的函数,<IFRAME> 会在屏幕上显示滚动消息 “Announcement! System will be unavailable after 5pm due to a reboot.”。
在 Microsoft IIS7 上启用定制
在使用 Microsoft IIS7 web 服务器时,装载定制模板的 AJAX 请求会失败,定制效果不会出现。用户一直会看到默认的登录页面。
这个问题的原因是,IIS7 在默认情况下不知道如何处理扩展名为 .xhtml 的文件,因此阻塞它们。纠正方法是为 .xhtml 添加 MIME 类型映射 text/xml。
在 Internet Information Services Manager (IISM) 中,选择您的 IBM Cognos 10 web 别名(例如 /c10)的 Features View。
双击 MIME-Types。
图 4. IISM 中 /c10 别名的 Features View
接下来,单击右上角的 Add...。
为 .xhtml 扩展名添加新的 MIME 类型 text/xml。
图 5. 在 IISM 中为 xhtml 扩展名添加新的 MIME 类型
单击 OK 保存设置,再次访问登录页面。
学习
- 通过 developerWorks Information Management 专区:在这里可以学到更多关于 Information Management 的知识。还可以找到技术文档、how-to 文章、培训、下载、产品信息等。
- 通过 Information Management 专区 Cognos BI 专题,了解更多有关 Cognos BI 专题的产品和技术资源。
- 通过 商业智能入门以及 Cognos 产品介绍,了解 商业智能的基本概念和相关技术,并介绍了 Cognos 商业智能相关的产品。
- 关于 Cognos 的安装,请参照 Cognos 8 BI Server 在 Linux 上的安装及与 IHS、WAS、DB2 的配置,学习 Cognos 详细的安装过程。
- 通过访问 IBM Cognos 8 Business Intelligence,学习 IBM Cognos 8 Business Intelligence 产品的相关知识。
- 随时关注 developerWorks 技术活动 和 网络广播。
获得产品和技术
- 在线试用 IBM Cognos BI 试用版软件,了解 IBM Cognos BI 商业智能解决方案的最新版本新功能。
- 下载 IBM Cognos Express V9 试用版软件,了解 IBM 专为中型企业定制的集成商业智能和计划解决方案。
- 下载免费的 IBM Information Management 试用版软件,了解 IBM Information Management 软件的最新版本和特性。
讨论
- 参与 developerWorks
博客 并加入 developerWorks 中文社区,developerWorks 社区是一个面向全球 IT 专业人员,可以提供博客、书签、wiki、群组、联系、共享和协作等社区功能的专业社交网络社区。