在WebLogic Portal中创建Mashup Portlet

　　什么是Mashup

　　要了解什么是 mashup，就应该了解一下这个单词的起源：它源于流行音乐，mashup 是从两首不同的歌曲(通常属于不同的流派)中混合演唱和乐器的音轨而构成的一首新歌，例如很多歌曲都会有混音版本，和DJ版本。从更加通俗的角度来说：《夜宴》的预告片+陈凯歌、陈红共同出演的《和你在一起》的片段+早年王朔导演，冯小刚、徐帆一起出演的《我是你爸爸》的片段=恶搞影片《晚饭》。

　　根据 ProgrammableWeb定义,? mashup网站是? "a Web page or application that combines data from two or more external online sources. The external sources are typically other Web sites and their data may be obtained by the mashup developer in various ways, including, but not limited to APIs, XML feeds, and screenscraping."

　　Mashup 是一种令人兴奋的交互式 Web 应用程序，它利用了从外部数据源检索到的内容来创建一个全新的创新服务。例如，http://www.weatherbonk.com/ 是一个天气情况的网站，它的地图信息来自Google Map,天气信息来自于NOAA.com等等。它不仅仅能实时查看到各地的天气的文本信息，而且可以通过webcams(分布在各地的公告摄像头)在google map看到实时的影像资料。

　　

　　

　　Mashup与AJAX

　　其实Mashup与任何技术都没有绑定也没有任何限制和要求,这点和SOA颇为类似,它其实也是一种思想而已.但是Mashup出生就和AJAX紧密联系在一起的.现有的很多API,都是通过AJAX的方式提供出来的,例如Google MAP API，而且为大多数Mashup项目，都是要求不能刷新页面的，所以实际开发中经常要使用到Ajax技术。

　　已有的Mashup应用

　　事实上已经在我们身边已经又有上千个Mashup应用了，在http://www.programmableweb.com/mashups可以看到各种Mashup应用。

　　公式：(应用A+应用 B 或者更多) Mashup =应用C 。

　　BEA 与Google 共同携手Mashup

　　Google和BEA正在进行相关谈判，将联合实施一项计划，让企业能够在企业门户软件和Google Maps 等应用软件之间创建mashup。作为合作计划的一部分，BEA 将能够访问Google的一些尚未公开的API.开发人员能够利用BEA 的WebLogic Portal 中一项名为Adrenaline的新技术创建mashup。

　　Adrenaline使门户应用软件能够在门户框架之外的其它Web 网站上运行，但可以仍然象门户那样对它们进行管理。

　　BEA 的WebLogic Portal 高级产品经理索尔斯在接受Silicon.com 采访时说，它使客户能够在Web 2.0 客户端上运行门户应用软件，但仍然在门户环境中对它们进行管理。它们仍然在WebLogic Portal 服务器上运行，但客户可以以不同的风格表示它们。

　　索尔斯表示，BEA与Google进行了“2-3 周的谈判”，可以访问尚未公开的API。他说，BEA 还计划与雅虎进行类似的合作，但表示相关谈判还没有开始。

　　据索尔斯称，未来的WebLogic Portal 产品将包含有更多工具，以及RSS 等其它Web 2.0 技术。

　　BEA创始人、主席、首席执行官庄思浩在公司的一次会议上说，MySpace 风格的病毒式社区正在登陆企业。他说，新一代的通讯工具正在出现。对于企业能够采用这些新技术而言，面向服务的架构将是关键。

　　RedMonk 分析师詹姆斯表示，企业软件厂商无法承担不对Google等厂商带来的威胁作出响应造成的损失。他说，我们预计企业技术和消费者Web 站点将产生相同的体验生活。

　　企业软件将必须满足一些变化的预期，BEA 和其它企业软件厂商需要对Google等新兴厂商做出反应.

　　引用自：《Google携手BEA 企业门户消费网站间创建mashup》

　　http://www.cnetnews.com.cn/news/net/story/0,3800050307,39537990,00.htm

　　虽然对Adrenaline不得而知，但在oracle和ibm都推出各自的mashup方案后，BEA也一定不甘落后的。

　　可以遇见，今后BEA Portal开发人员一定会越来越多的Mashup的概念和应用。

　　在WebLogic Portal中创建Mashup Portlet

　　我会创建一个带地图功能的日程安排 Portlet，它有一个功能是在地图上标注出我的日程安排，比起传统的日程安排多了一个地图标注的功能，而且把这个日程共享给对方的时候对方可以清楚看到，例如:

　　2006年10月23日 上午9时到公司开会

　　2006年10月24日 下午3时到软件中心和客户做技术交流

　　2006年10月25日 上午9时到培训中心进行培训

　　2006年10月26日 下午3时到研发中心开研发会议

　　2006年10月27日 下午4时到机场接待重要客户

　　

　　

　　(PS:作为例子，地名和地标事件这里都是虚构的,由于暂时Google对中国地名支持不是很好，例子中我使用了美国的地名，受到现在google api限制原因)

　　进入google日程表如下：

　　

　　

　　Google Calendar　API

　　

　　

　　以上是Google Calendar? 的添加日程的图片，如图所示，一个日程包含了：内容，时间，地点，说明，重复频率等参数。

　　作为一名经常外出工作的人员，我认为这个功能对我非常合有用，不仅仅我的日程一目了然，而且我出门的线路我也可以在地图上很好的规划。而且把它共享给我的上司，省去了写工作报告的工作。

　　在这个Masup Portlet中我使用了两个Google API：Google Map 和Google Calendar可以在www.google.com/api网站上查看和下载它们。

　　根据Mashup公式：

　　Google Map+Google Calendar =带地图功能的日程安排 Portlet。

　　同样和我以前的很多AJAX文章一样,我还是使用了DWR作为我的AJAX框架。

　　首先，下载最新版本的BEA Portal 9.2，使用Config工具配置一个Portal Domain后，启动BEA WorkShop 。

　　

　　

　　接着，我们配置好我们的Portal Server，然后我们就可以开始创建项目了。 BEA WorkShop给我们带来最大的变化就是完全采用了eclipse平台来构建，对于熟悉eclipse开发的程序员来说是个福音，但是对于WorkShop开发人员可能需要一段时间来熟悉。

　　

　　

　　接着单击File->New菜单，创建一个EAR应用。

　　

　　

　　接着创建一个Portal Web Project,如下图所示：

　　

　　

　　首先导入所需要的jar文件，其中Dwr.jar是我们例子中Ajax框架所需要的包，其它三个都是Google API的Jar包，把它们都导入到Web-INF中的lib中即可。

　　

　　

　　配置DWR框架 .添加如下代码到web.xml文件中：

　　

　　dwr-invoker

　　uk.ltd.getahead.dwr.DWRServlet

　　

　　debug

　　true

　　

　　

　　

　　dwr-invoker

　　/dwr/*

　　

　　

　　单点登录Index.jsp:

　　<%

String requestUrl =

AuthSubUtil.getRequestUrl("http://localhost:7001/mashupPortlet/main.portal",

"http://www.google.com/calendar/feeds/",false,true);

String suggestAuthorization = "本程序需要您先登录Google服务器,

并授权我们使用您的Google服务,请点击<　　String requestUrl =

　　AuthSubUtil.getRequestUrl("http://localhost:7001/mashupPortlet/main.portal",

　　"http://www.google.com/calendar/feeds/",false,true);

　　String suggestAuthorization = "本程序需要您先登录Google服务器,

　　并授权我们使用您的Google服务,请点击此处登录:";

　　out.println(suggestAuthorization);

　　%>

　　

　　此处实际上是链接到Google的单点登录系统，凡是想要使用google服务的网站都需要跟google做一个单点登录。这是Google提供的，代码上没有什么好解释的。

　　创建一个GoogleCaledarAPI类，其中实现了调用GoogleCaledar 的API向GoogleCaledar 添加的能力。其中一个重要方法如下

　　public void AddEvent(String titleText,String contentText,String wh,String descrption,Date startDate,Date endDate,int startHour,int endHour,String x,String y ) throws Exception{

　　//这里需要做时区处理,简单起见这里我直接+8

　　startDate.setHours(startHour+8);

　　endDate.setHours(endHour+8);

　　DateTime startTime = new DateTime(startDate);

　　DateTime endTime = new DateTime(endDate);

　　// 这里可以添加共享人的email,把约会共享给其他人

　　Map attendees = new HashMap();

　　// 添加地址信息,其中包含了地理坐标

　　Where where =new Where();

　　where.setValueString(wh+"坐标为:"+"("+x+","+y+")");

　　// 调用具体的Google API来添加约会提醒

　　CalendarEventEntry event =insertEntry(titleText, contentText, null, null,startTime, endTime, null, where,attendees, 5);

　　}

　　

　　它需要约会提醒提供的一些参数如：标题，描述，约会地点，开始，结束时间，其中X，Y参数是值Google MAP中的地址坐标(经纬度)。

　　在Web-INF中创建dwr.xml文件，它包含一下内容：

　　

"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"

"http://www.getahead.ltd.uk/dwr/dwr10.dtd">　　"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"

　　"http://www.getahead.ltd.uk/dwr/dwr10.dtd">

　　

　　

　　

　　

　　

　　

　　

　　

　　它的作用就是把GoogleCaledarAPI类发布出来供AJAX方式调用。

　　创建mashup.html文件，在我们的主要功能都在这个页面上，由这个页面实现mashup Google Map ，Google Caledar 的工作。它上面有下列代码值得说明一下：

　　初始化

　　

　　function init() {

　　GoogleCaledarAPI.login();

　　dlg0 = dojo.widget.byId("dialog0");

　　if (GBrowserIsCompatible()) {

　　map = new GMap2(document.getElementById("map"));

　　GEvent.addListener(map, "moveend", function() {

　　var center = map.getCenter();

　　document.getElementById("message").innerHTML = center.toString();

　　});

　　GEvent.addListener(map, "click", function(marker, point) {

　　if (!marker) {

　　dlg0.show();

　　pt=point;

　　

　　}

　　});

　　map.addControl(new GSmallMapControl());

　　map.addControl(new GMapTypeControl());

　　map.setCenter(new GLatLng(37.4419, -122.1419), 13);

　　}

　　}

　　

　　它初始化了Google Map ，Google Caledar两个对象，并且在页面上显示了一个地图供用户操作。

　　接着是addEvent方法，它的作用是当用户在地图上点击一个位置，并且输入约会的一些信息之后，它实现了调用Google Caledar API，把约会信息和具体的地理位置保存到Google服务器上。

　　

　　function addEvent(){

　　//取得约会开始时间

　　var time =dojo.widget.byId("startTime");

　　var timeStr=time.datePicker.storedDate;

　　var d = new Date(timeStr.split("-")[0], timeStr.split("-")[1]-1, timeStr.split("-")[2]);

　　//取得约会结束

　　var time2 =dojo.widget.byId("endTime");

　　var timeStr2=time2.datePicker.storedDate;

　　var d2 = new Date(timeStr2.split("-")[0], timeStr2.split("-")[1]-1, timeStr2.split("-")[2]);

　　//取得约会详细信息，例如标题，内容，地点等

　　item.title=$("title").value;

　　item.content=$("content").value;

　　item.description=$("descrption").value;

　　item.where=$("where").value;

　　//添加到GoogleCaledar 服务器中,并且附带上地理坐标。pt为坐标对象，它有x，y两个属性分别表示经纬度。

　　GoogleCaledarAPI.AddEvent(item.title,item.content,item.where,item.description,d,d2,$("hour1").value,$("hour2").value,pt.x,pt.y);

　　//在地图上添加标识

　　map.addOverlay(new createMarker(pt));

　　}

　　

　　在mashup.html上点击右键选择创建Portlet，创建一个Portlet，如下图：

　　

　　

　　

　　

　　

　　

　　OK,大致的开发步骤和重要的代码我已经做出了说明，你可以运行一下本文带的代码看一下实际的效果。

　　Mashup 在Portal环境下的企业应用

　　在企业应用中，应用A开放其API -A

　　也可以有同样的公式：企业应用API-A+企业应用API -B=Mashup Portlet C。可以想象一下只要把我们上面的Google MAP和日历API替换为对应的企业的应用同样能创建出各种不同的Mashup应用来。。企业原有的IT投资得到了充分的利用，而且不需要多少投资形成新的应用。

　　Mashup Portlet 的优点：

　　1.部署方便，在BEA Portal环境中，MashUp Portlet 能轻松享受BEA Portal部署发布，权限管理个性化设置等等各种功能。

　　2.开发成本小，周期短。因为MashUp Portlet 是利用了已有的各种系统的API来完成自己的功能，自己自身的代码和功能非常少。

　　3.充分利用已有的系统。

　　总结

　　Mashup　是今后开发Web应用的一种重要方式，无论是企业应用开发人员，还是互联网应用的开发人员，都应该尽快学习和适应它，毋庸置疑Mashup将会大行其道。