AJAX框架 jMaki (三) – 用日历(Calendar)和表格(Table)实现的Blog首页

<iframe align="top" marginwidth="0" marginheight="0" src="http://www.zealware.com/46860.html" frameborder="0" width="468" scrolling="no" height="60"></iframe>

下面使用jMaki中的Yahoo Calendar和Yahoo DataTable 来建立一个迷你Blog首页。这个小程序可以在选择日历的某个日期后，Data Table中只列出这个日期所发表的文章。

jMaki中的Yahoo Calendar和Yahoo DataTable 都是Yahoo UI Library 中的控间, jMaki的作用只是在现有的控件之上作了一些包装(wrapper), 这样,这些Widget可以通过jMaki框架进行通讯,通过很少的代码或者配置就可以完成一个功能丰富的应用程序,也就是通常所说的mashup.

使用NetBeans开发迷你Blog首页的步骤

1. NetBeans 菜单”文件”-”新建项目”.在出现的”新建项目”窗口中,”类别”选择”Web”, 项目选择”Web应用程序”.点击”下一步”

2. 在”新建项目窗口中”, “项目名称”中输入”jMakiCalendarTable”项目. 点击”下一步”

3. 在”框架”窗口中,选择”jMaki Ajax Framework” . 点击”完成”.

4. NetBeans 中出现 jMakiCalendarTable 项目的同时,也会出现在”组件面板”中出现jMaki的Widgets, 包括Dojo, Flickr, Google, Yahoo等中的一些Widgets. 如果没有出现”组件面板”, 选择菜单”窗口”-> “组件面板”.

5. 在netBeans中, 用鼠标直接把”jMaki Yahoo”下的Calendar拖到 jMakiCalendarDemo 项目中的index.jsp文件中. 通常日历会放在左侧栏或者右侧栏中. 这个例子中放在

中．把“ jMaki Yahoo“下的” Data Table”拖到“ Main Content Area”下。

6. 修改index.jsp 中”yahoo.dataTable”的内容

<widget name="yahoo.dataTable"></widget> value="{columns : [ { label : 'Post Date', id : 'postdate'}, { label : 'Title', id : 'title'}, { label : 'Author', id : 'author'} ], rows : [ { postdate : '2007/09/07', title : 'NetBeans New and Cool', author : 'Tim Boudreau'}, { postdate : '2007/09/07', title : 'NetBeans Mobility', author : 'Ada Li'}, { postdate : '2007/09/07', title : 'Creating Web 2.0 Rich Internet Applications', author : 'Michael Li'}, { postdate : '2007/09/08', title : 'AJAX and JSF', author : 'Ada Li'}, { postdate : '2007/09/09', title : 'Ruby on Rails in the Enterprise', author : 'Liang Ye'}, { postdate : '2007/09/09', title : 'Beans Binding and the Swing Application Framework', author : 'Joey Shen'} ] }" />

7. 初始运行jMakiCalendarTable 结果如下：

8. 要完成这个迷你Blog首页，要做以下几部分工作

• 获得Calendar的日期

• 日期发送给服务器端

• 服务器端返回给客户端列表，列表只包含对应日期的信息

• 返回的列表信息更新到DataTable

要获得Calendar的日期，根据之前介绍的“发布/订阅机制(publish/subscribe machnism)”， 在index.jsp 的calendar Widget下加入 以下代码代码

divclass="leftSidebar">
SidebarContentHere
a:widgetname="yahoo.calendar"/>
divid="selected_date">div>
script>...
functionselectCallBack(_req)...{
vartmp=_req.responseText;
varobj=eval("("+tmp+")");
jmaki.log("tmp"+obj);
jmaki.publish("/table/topic/clear",...{});
jmaki.publish("/table/topic/addRows",obj);
}

functioncalendarListener(item)...{
vartargetDiv=document.getElementById("selected_date");
varselectedDateStr=item.value.getFullYear()
+"/"+(item.value.getMonth()+1)
+"/"+item.value.getDate();
targetDiv.innerHTML=selectedDateStr;
varbackEndUrl="BlogServlet?date="+selectedDateStr;

jmaki.doAjax(...{method:"POST",url:backEndUrl,callback:selectCallBack});
}

jmaki.subscribe("/yahoo/calendar/onSelect",calendarListener);
script>
div><!--</span><span style="COLOR: #008000">leftSidebar</span><span style="COLOR: #008000">-->

因为在web/resources/yahoo/calendar/compenent.js中已经发布(publish)了”/yahoo/calendar/onSelect”, 因此在这段JavaScript中可以直接订阅(subscribe)“/yahoo/calendar/onSelect” topic, 这样在选择Calendar的某个日期时，调用函数calendarListener().

函数calendarListener()完成两件事情, 一个是得到Calendar下显示选中的日期，日期格式为“yyyy/mm/dd”,并显示在定义好的

中 , 一个是向服务器端发送 AJAX 请求 , 是用 jmaki.doAjax() 函数实现的 .

SelectCallBack()函数是AJAX请求返回的回调函数, 得到服务器端返回的信息后, 发布(publish) “"/table/topic/clear"和”/table/topic/addRows”, 并传递了相关参数. 相应地在 yahoo.dataTable 中订阅(subscribe)这些”

topic”

修改dataTable Widget为：

a:widgetname="yahoo.dataTable"subscribe="/table/topic"
value="{columns:[
{label:'PostDate',id:'postdate'},
{label:'Title',id:'title'},
{label:'Author',id:'author'}
],
rows:[]
}"
/>

DataTable中 rows内容为空,下面要把这部分信息放在服务器端的Servlet中,

9. 修改后的index.jsp的源代码如下:

@taglibprefix="a"uri="http://jmaki/v1.0/jsp"%>
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html>
head>
linkrel="stylesheet"href="jmaki-standard.css"type="text/css">link>
title>PageTitletitle>
metahttp-equiv="Content-Type"content="text/html;charset=iso-8859-1"/>
head>
body>
divclass="outerBorder">

divclass="header">
divclass="banner">ApplicationNamediv>

divclass="subheader">

div>
ahref="mailto:feedback@youraddress">Feedbacka>|
ahref="#">SiteMapa>|
ahref="#">Homea>
div>

div><!--</span><span style="COLOR: #000000">sub</span><span style="COLOR: #000000">-</span><span style="COLOR: #000000">header</span><span style="COLOR: #000000">-->
div><!--</span><span style="COLOR: #000000">header</span><span style="COLOR: #000000">-->

divclass="main">
divclass="leftSidebar">
SidebarContentHere
a:widgetname="yahoo.calendar"/>
divid="selected_date">div>
script>
functionselectCallBack(_req)...{
vartmp=_req.responseText;
varobj=eval("("+tmp+")");
jmaki.log("tmp"+obj);
jmaki.publish("/table/topic/clear",...{});
jmaki.publish("/table/topic/addRows",obj);
}

functioncalendarListener(item)...{
vartargetDiv=document.getElementById("selected_date");
varselectedDateStr=item.value.getFullYear()
+"/"+(item.value.getMonth()+1)
+"/"+item.value.getDate();
targetDiv.innerHTML=selectedDateStr;
varbackEndUrl="BlogServlet?date="+selectedDateStr;

jmaki.doAjax(...{method:"POST",url:backEndUrl,callback:selectCallBack});
}

jmaki.subscribe("/yahoo/calendar/onSelect",calendarListener);
script>
div><!--</span><span style="COLOR: #000000">leftSidebar</span><span style="COLOR: #000000">-->

divclass="content"style="height:400px">

MainContentArea

a:widgetname="yahoo.dataTable"subscribe="/table/topic"
value="{columns:[
...{label:'PostDate',id:'postdate'},
...{label:'Title',id:'title'},
...{label:'Author',id:'author'}
],
rows:[]
}"

/>
div><!--</span><span style="COLOR: #000000">content</span><span style="COLOR: #000000">-->

div><!--</span><span style="COLOR: #000000">main</span><span style="COLOR: #000000">-->
div><!--</span><span style="COLOR: #000000">outerborder</span><span style="COLOR: #000000">-->
body>
html>

10. 新建BlogServlet, 作为服务器端接受,处理信息以及返回信息的类. 鼠标右键盘选择项目＂jMakiCalendarTable＂, 选择＂新建＂－＞＂Servlet＂，

类名：BlogServlet

包：com.sun.sdn.demo.jmaki

点击＂下一步＂

下一个＂配置Servlet部署＂窗口不做修改, 点击”完成”

修改BlogServlet中protected void processRequest()方法, 内容如下

protected void processRequest(HttpServletRequestrequest,HttpServletResponseresponse)
throws ServletException,IOException ... {
String[][]blogList=...{
...{"2007/09/07","NetBeansNewandCool","TimBoudreau"},
...{"2007/09/07","NetBeansMobility","AdaLi"},
...{"2007/09/07","CreatingWeb2.0RichInternetApplications","MichaelLi"},
...{"2007/09/08","AJAXandJSF","AdaLi"},
border-right: #808080 1px solid; border-top: #808080 1px solid; display: none; border-left: #808080 1px solid;

分享到：

AJAX框架 jMaki (一) - 介绍及安装 | 用Java EE 5实现的网上书店实例

• 2007-12-18 22:37
• 浏览 178
• 评论(0)
• 相关推荐

评论

发表评论

您还没有登录,请您登录后再发表评论

happmaoo

• 浏览: 1291406 次
• 性别:
• 来自: 杭州
• 

最近访客 更多访客>>

J__linux

wanggod

dar24992554

adyfang

文章分类

• 全部博客 (6459)
• 软件应用 (17)
• 生活休闲 (4)
• 系统相关 (2)
• 编程开发 (9)

社区版块

• 我的资讯 (0)
• 我的论坛 (0)
• 我的问答 (0)

存档分类

• 2013-06 (10)
• 2012-01 (29)
• 2011-12 (23)
• 更多存档...

最新评论

• netkongjian： 不错的软件知识，感谢分享！
  软件加密方式
• norce： 效果不错~
  JS实现图片幻灯片效果
• zxbear： 链接已失效
  《jQuery基础教程：第2版》PDF
• 架构师： 在技术领域方面Java还是世界上最好的，而且有很多第三方控件的 ...
  专访：Ruby能否成为第二个Java
• freddie： 如何拖动表格边框调整行高和列宽？
  可编辑的表格(JavaScript)

---

声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。若作者同意转载，必须以超链接形式标明文章原始出处和作者。
© 2003-2015 ITeye.com. All rights reserved. [ 京ICP证110151号 京公网安备110105010620 ]