`
happmaoo
  • 浏览: 4465420 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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

Blog框架AjaxYahooNetbeans 
阅读更多
<iframe align="center" marginwidth="0" marginheight="0" src="http://www.zealware.com/csdnblog336280.html" frameborder="0" width="336" scrolling="no" height="280"></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()方法, 内容如下

protectedvoidprocessRequest(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,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: #808
分享到：
| GlassFish FAQ 
评论
发表评论

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

相关推荐

    yolov10预训练模型.rar

    在按照YOLOv10官网上的步骤进行时，运行app.py文件时，如果没有预训练模型的话会报错。解压压缩包里的内容到同级目录下（在requirements.txt文档下面），这样运行后就不会报错。

    Linux Socket编程、IO模型及进程间通信的完整实用案例

    在IT领域，Linux系统是广泛应用于服务器和嵌入式设备的操作系统。对于系统开发者和管理员，深入理解Linux的Socket编程、IO模型以及进程间通信（IPC）是至关重要的。本资料包提供了三个主要部分的学习资源：`process_comm`涉及进程间通信，`linux_socket`涵盖Socket编程，而`io_mode`则讨论Linux的IO模型。接下来，我们将详细探讨这些关键知识点。 让我们来看看**Linux Socket编程**。Socket是网络通信的基本接口，它允许两个或多个进程通过网络进行数据交换。在Linux中，Socket编程通常涉及到以下步骤：创建Socket，绑定IP地址和端口号，监听连接请求，接受连接，发送和接收数据，最后关闭Socket。`linux_socket`目录可能包含了示例代码，演示如何创建TCP或UDP Socket，处理并发连接，以及实现基本的错误处理机制。理解Socket编程有助于开发网络服务，如Web服务器、FTP服务器等。 我们来讨论**Linux IO模型**。在Linux中，有五种主要的IO模型：阻塞IO、非阻塞IO、IO复用（

    apsw-3.38.5.post1-cp310-cp310-win_amd64.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件，注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装，如果whl路径不在cmd窗口当前目录下，需要带上路径 WHL文件是以Wheel格式保存的Python安装包， Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包，WHL文件中包含了Python安装的py文件和元数据，以及经过编译的pyd文件， 这样就使得它可以在不具备编译环境的条件下，安装适合自己python版本的库文件。 如果要查看WHL文件的内容，可以把.whl后缀名改成.zip，使用解压软件（如WinRAR、WinZIP）解压打开即可查看。 为什么会用到whl文件来安装python库文件呢？ 在python的使用过程中，我们免不了要经常通过pip来安装自己所需要的包， 大部分的包基本都能正常安装，但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中（whl包下载）下载whl包来安装解决问题。

    aiohttp-3.6.2-cp35-cp35m-win32.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件，注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装，如果whl路径不在cmd窗口当前目录下，需要带上路径 WHL文件是以Wheel格式保存的Python安装包， Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包，WHL文件中包含了Python安装的py文件和元数据，以及经过编译的pyd文件， 这样就使得它可以在不具备编译环境的条件下，安装适合自己python版本的库文件。 如果要查看WHL文件的内容，可以把.whl后缀名改成.zip，使用解压软件（如WinRAR、WinZIP）解压打开即可查看。 为什么会用到whl文件来安装python库文件呢？ 在python的使用过程中，我们免不了要经常通过pip来安装自己所需要的包， 大部分的包基本都能正常安装，但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中（whl包下载）下载whl包来安装解决问题。

    课设毕设基于SpringBoot+Vue的大学生创业项目的信息管理系统源码可运行.zip

    本压缩包资源说明，你现在往下拉可以看到压缩包内容目录 我是批量上传的基于SpringBoot+Vue的项目，所以描述都一样；有源码有数据库脚本，系统都是测试过可运行的，看文件名即可区分项目~ ｜Java｜SpringBoot｜Vue｜前后端分离｜ 开发语言：Java 框架：SpringBoot，Vue JDK版本：JDK1.8 数据库：MySQL 5.7+（推荐5.7，8.0也可以） 数据库工具：Navicat 开发软件： idea/eclipse（推荐idea） Maven包：Maven3.3.9+ 系统环境：Windows/Mac

    计算机体系结构实验3 多cache一致性算法

    湖大计算机体系结构实验

    arctic-1.67.1-cp27-cp27m-win32.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件，注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装，如果whl路径不在cmd窗口当前目录下，需要带上路径 WHL文件是以Wheel格式保存的Python安装包， Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包，WHL文件中包含了Python安装的py文件和元数据，以及经过编译的pyd文件， 这样就使得它可以在不具备编译环境的条件下，安装适合自己python版本的库文件。 如果要查看WHL文件的内容，可以把.whl后缀名改成.zip，使用解压软件（如WinRAR、WinZIP）解压打开即可查看。 为什么会用到whl文件来安装python库文件呢？ 在python的使用过程中，我们免不了要经常通过pip来安装自己所需要的包， 大部分的包基本都能正常安装，但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中（whl包下载）下载whl包来安装解决问题。

    Toad Data Modeler：Toad中数据字典的创建与管理.docx

    Toad Data Modeler：Toad中数据字典的创建与管理.docx

    #-ssm-048-mysql-在线读书与分享论坛-.zip

    前台： 用户读书笔记，心得查看，并且可以支持调用第三方组建，进行实时聊天 在线图书阅读，一本书里，有多个章节，阅读到某个章节，可以保存阅读进度，比如阅读第一章了，点击提交，可以存储阅读进度，在个人后台查看阅读进度 用户注册 后台: 管理员: 管理员用户管理 注册用户管理 书籍类别管理 书籍信息管理 阅读进度管理 分享阅读心得，笔记管理 系统管理 注册用户： 个人资料修改 分享阅读心得，笔记（下拉表，选择类别） 个人阅读进度查看

    SolarWinds数据库性能分析器：高级功能：SQL分析与优化.docx

    SolarWinds数据库性能分析器：高级功能：SQL分析与优化.docx

    电子商务之价格优化算法：动态定价：价格战与市场动态.docx

    电子商务之价格优化算法：动态定价：价格战与市场动态.docx

    apsw-3.30.1.post1-cp35-cp35m-win32.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件，注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装，如果whl路径不在cmd窗口当前目录下，需要带上路径 WHL文件是以Wheel格式保存的Python安装包， Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包，WHL文件中包含了Python安装的py文件和元数据，以及经过编译的pyd文件， 这样就使得它可以在不具备编译环境的条件下，安装适合自己python版本的库文件。 如果要查看WHL文件的内容，可以把.whl后缀名改成.zip，使用解压软件（如WinRAR、WinZIP）解压打开即可查看。 为什么会用到whl文件来安装python库文件呢？ 在python的使用过程中，我们免不了要经常通过pip来安装自己所需要的包， 大部分的包基本都能正常安装，但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中（whl包下载）下载whl包来安装解决问题。

    VB程序实例-MMControl控件播放多媒体文件.zip

    基于VB的程序实例，可供参考学习使用

    基于java的旅游推荐系统设计与实现答辩PPT.pptx

    基于java的旅游推荐系统设计与实现答辩PPT.pptx

    原版atom-0.10.0-cp311-cp311-win_arm64.whl-下载即用直接pip安装.zip

    安装前的准备 1、安装Python：确保你的计算机上已经安装了Python。你可以在命令行中输入python --version或python3 --version来检查是否已安装以及安装的版本。 个人建议：在anaconda中自建不同python版本的环境，方法如下(其他版本照葫芦画瓢)： 比如创建python3.8环境，anaconda命令终端输入：conda create -n py38 python==3.8 2、安装pip：pip是Python的包管理工具，用于安装和管理Python包。你可以通过输入pip --version或pip3 --version来检查pip是否已安装。 安装WHL安装包 1、打开命令行(或打开anaconda命令行终端)： 在Windows上，你可以搜索“cmd”或“命令提示符”并打开它。 在macOS或Linux上，你可以打开“终端”。 2、cd到whl文件所在目录安装： 使用cd命令导航到你下载的whl文件所在的文件夹。 终端输入：pip install xxx.whl安装即可（xxx.whl指的是csdn下载解压出来的whl） 3、等待安装完成： 命令行会显示安装进度，并在安装完成后返回提示符。 以上是简单安装介绍，小白也能会，简单好用，从此再也不怕下载安装超时问题。 使用过程遇到问题可以私信，我可以帮你解决！ 收起

    astropy-5.0.4-cp38-cp38-win32.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件，注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装，如果whl路径不在cmd窗口当前目录下，需要带上路径 WHL文件是以Wheel格式保存的Python安装包， Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包，WHL文件中包含了Python安装的py文件和元数据，以及经过编译的pyd文件， 这样就使得它可以在不具备编译环境的条件下，安装适合自己python版本的库文件。 如果要查看WHL文件的内容，可以把.whl后缀名改成.zip，使用解压软件（如WinRAR、WinZIP）解压打开即可查看。 为什么会用到whl文件来安装python库文件呢？ 在python的使用过程中，我们免不了要经常通过pip来安装自己所需要的包， 大部分的包基本都能正常安装，但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中（whl包下载）下载whl包来安装解决问题。

    aggdraw-1.3.14-cp39-cp39-win_amd64.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件，注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装，如果whl路径不在cmd窗口当前目录下，需要带上路径 WHL文件是以Wheel格式保存的Python安装包， Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包，WHL文件中包含了Python安装的py文件和元数据，以及经过编译的pyd文件， 这样就使得它可以在不具备编译环境的条件下，安装适合自己python版本的库文件。 如果要查看WHL文件的内容，可以把.whl后缀名改成.zip，使用解压软件（如WinRAR、WinZIP）解压打开即可查看。 为什么会用到whl文件来安装python库文件呢？ 在python的使用过程中，我们免不了要经常通过pip来安装自己所需要的包， 大部分的包基本都能正常安装，但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中（whl包下载）下载whl包来安装解决问题。

    VB程序实例-控件随着窗口大小按比例变化.zip

    基于VB的程序实例，可供参考学习使用

    基于Java Swing实现的飞机大战游戏.zip

    《基于Java Swing实现的飞机大战游戏》是一份旨在帮助学习者掌握Java编程和游戏开发的资源。该资源通过一个完整的飞机大战游戏实例，展示了如何使用Java语言结合Swing库进行桌面应用程序开发。本资源不仅包含详细的源码，还提供了相关文档、课程设计报告及视频教程，适合作为计算机科学与技术、软件工程等专业的课程设计或毕业设计项目。游戏功能包括玩家控制飞机移动、自动发射子弹、敌机随机出现与移动、碰撞检测以及游戏得分计算等。此外，还加入了背景音乐和音效，增强了游戏体验。通过多线程技术确保游戏流畅运行，同时采用面向对象编程思想构建了清晰的项目结构。总之，《基于Java Swing实现的飞机大战游戏》是一个理想的学习工具，它能够帮助初学者深入理解Java GUI编程和事件处理机制，同时也为有经验的开发者提供了实战演练的机会。

    基于SpringBoot整合WebSoket完整源码分享给需要的同学

    **正文** 在现代Web开发中，实时通信是一个重要的需求，SpringBoot框架提供了与WebSocket的集成，使得开发者可以方便地在应用程序中实现双向通信。本文将深入探讨如何在SpringBoot项目中整合WebSocket，以及相关的概念和技术。 WebSocket协议是HTML5引入的一种在单个TCP连接上进行全双工通信的协议，它允许服务器主动向客户端推送数据，极大地提高了实时性。而SpringBoot作为Spring框架的轻量级版本，简化了配置和启动流程，使得开发WebSocket应用变得更加便捷。 我们需要在`pom.xml`中添加SpringBoot WebSocket的相关依赖。SpringBoot默认集成了Spring Websocket，我们只需要引入`spring-boot-starter-websocket`模块即可： ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId

Magicbox
Global site tag (gtag.js) - Google Analytics