AJAX框架 jMaki (三) – 用日历(Calendar)和表格(Table)实现的Blog首页
<iframe align="center" marginwidth="0" marginheight="0" src="http://www.zealware.com/csdnblog336280.html" frameborder="0" width="336" scrolling="no" height="280"></iframe><div class="postText">下面使用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文件中. 通常日历会放在左侧栏或者右侧栏中. 这个例子中放在<div class="leftSidebar">中．把“jMaki Yahoo“下的”Data Table”拖到“Main Content Area”下。http://p.blog.csdn.net/images/p_blog_csdn_net/adali/335014/o_project_calendar_table_drag.JPG
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 结果如下：
http://p.blog.csdn.net/images/p_blog_csdn_net/adali/335014/o_calendar_result_init.JPG
8. 要完成这个迷你Blog首页，要做以下几部分工作
[*] 获得Calendar的日期
[*] 日期发送给服务器端
[*] 服务器端返回给客户端列表，列表只包含对应日期的信息
[*] 返回的列表信息更新到DataTable
要获得Calendar的日期，根据之前介绍的“发布/订阅机制(publish/subscribe machnism)”， 在index.jsp 的calendar Widget下加入 以下代码代码
<div style="padding-right: 5.4pt; padding-left: 5.4pt; background: #e6e6e6; padding-bottom: 4px; width: 95%; padding-top: 4px;">http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gifdivclass="leftSidebar">
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gifSidebarContentHere
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gifa:widgetname="yahoo.calendar"/>
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gifdivid="selected_date">div>
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gifscript>...
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.giffunctionselectCallBack(_req)...{
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifvartmp=_req.responseText;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifvarobj=eval("("+tmp+")");
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifjmaki.log("tmp"+obj);
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gifjmaki.publish("/table/topic/clear",...{});
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifjmaki.publish("/table/topic/addRows",obj);
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif}
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.giffunctioncalendarListener(item)...{
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifvartargetDiv=document.getElementById("selected_date");
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifvarselectedDateStr=item.value.getFullYear()
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif+"/"+(item.value.getMonth()+1)
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif+"/"+item.value.getDate();
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.giftargetDiv.innerHTML=selectedDateStr;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifvarbackEndUrl="BlogServlet?date="+selectedDateStr;
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gifjmaki.doAjax(...{method:"POST",url:backEndUrl,callback:selectCallBack});
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif}
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifjmaki.subscribe("/yahoo/calendar/onSelect",calendarListener);
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gifscript>
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gifdiv><!--</span><span style="COLOR: #008000">leftSidebar</span><span style="COLOR: #008000">-->
页:
[1]