meteorWJ's Home—Floating clound
02-05 4429
下面使用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文件中. 通常日历会放在左侧栏或者右侧栏中. 这个例子中放在
6. 修改index.jsp 中”yahoo.dataTable”的内容
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下加入 以下代码
meteorWJ's Home—Floating clound
02-05 4429
陈万洲的专栏
06-07 5563
12-19 1714
ice_fire2008的专栏
05-08 791
LisenYang的专栏
07-07 2423
u014114709的博客
05-13 1891
xinyuan的专栏
12-26 9061
weixin_30883311的博客
05-28 206
yhh345814509的专栏
07-11 3387
当当当当
07-16 2726
Rock的专栏
11-26 5284
sinat_32972877的博客
03-02 2540
小红帽
08-05 2972
weixin_30394251的博客
09-26 35
01-04 315
weixin_30595035的博客
07-02 216
wusiye_123456的博客
05-22 141