gdufo

 

Appfuse2.x学习-Ajax

AppFuse ships with a number of Ajax libraries [AppFuse装载了许多Ajax库]:

DWR is Easy Ajax for Java. It allows you to easily expose Java objects (including Spring beans) as JavaScript objects. It's one of the best available libraries for Ajax development. To learn more about DWR and how it works, see Developing AJAX Applications the Easy Way by Joe Walker.

DWR is Easy Ajax for Java。它允许你很容易地将JAVA对象(包含Spring beans)展现为JavaScript对象。它是最好的Ajax可利用开发库之一。要对DWR和它的运作机制了解更多,请看Joe Walker写的Developing AJAX Applications the Easy Way。

Prototype and Script.aculo.us are both libraries that simplify Ajax development. By using them, you won't have to worry as much about browser compatibility issues.

Prototype和Script.aculo.us都是能够简化Ajax开发的库。通过使用它们,你不用过多地担心浏览器兼容问题。

For good documentation about Prototype, see:

关于Prototype比较好的文档:

The best Script.aculo.us documentation is available on the Script.aculo.us Wiki.

最好的Script.aculo.us文档可从 Script.aculo.us Wiki上获得。

In addition to these libraries, Struts 2 and Tapestry both include Dojo. JSF and Spring MVC do not ship with any built-in Ajax libraries.

除了这些库以外,Struts 2 和Tapestry都包含Dojo。JSF和Spring MVC没有携带任何内建的Ajax库。

Here is a dojo example using Struts2. There is a normal action with a method save and a set method for the object EvenSpan which holds an id and a name.

下面是一个使用Struts2的dojo实例。对于一个包含id和名字的对象EvenSpan,有一个带有save和set方法的正常动作。

<script type="text/javascript">
djConfig = { isDebug: false };
</script>
<script type="text/javascript" src="../scripts/dojo/dojo.js"></script>

<script type="text/javascript">
dojo.require("dojo.event.*");
dojo.require("dojo.io.*");

function callback(type, data, evt){
if (type == 'error'){
alert('Error when retrieving data from the server!');
}
}

function doOnCellEdit(id,value){
dojo.io.bind({ url: 'eventSpan.html',
handler: callback,
content: {'method:save':true, 'eventSpan.name':value,'eventSpan.id':id }
});
return true;
}
</script>

---------------------------------------------------------------------------------------------------------
this part is an extension on the following fine tutorial:
http://cwiki.apache.org/S2WIKI/struts-2-spring-2-jpa-ajax.html
take care: the tutorial does not do anything apart from demonstrating the
working of ajax. the java code is prototype only.

这部分是指南http://cwiki.apache.org/S2WIKI/struts-2-spring-2-jpa-ajax.html的扩充。注意:指南除了阐述ajax的运作方式外不包含其它内容。java 代码只有prototype。

this tutorial misses out on 3 things:
1a) integration it within appfuse setup, taking care of the dojo files
1b) integration it within appfuse setup, taking care of the importing
order of the js files
2) getting it working with the decorator, or better without

该指南遗漏了三件事:

1)与appfuse的构建集成,注意dojo文件

2)与appfuse的构建集成,注意js文件的导入顺序

3)和decorator一起运作,当然,没有更好。

    a) the dojo files can't be run from the sturts.jar file.

      dojo文件不能在sturts.jar上运行。

to solve this open the struts2-core-2.0.6.jar
copy the dojo folder into
src/main/webapp/struts/dojo

解决这个问题,需打开struts2-core-2.0.6.jar,将dojo文件夹拷贝到 src/main/webapp/struts/dojo目录下。

open your web.xml and make sure the staticFIlter is including the right
folder:

打开Web.xml文件,确保staticFIlter包含正确的路径。

<filter>
<filter-name>staticFilter</filter-name>
<filter-class>org.appfuse.webapp.filter.StaticFilter</filter-class>
<init-param>
<param-name>includes</param-name>
<param-value>/struts/dojo/*</param-value>
</init-param>
</filter>

make sure the dojo files are imported first.

确保 dojo文件第一个被导入。

to do this open your /src/main/webapp/decoraters/default.jsp file and
add this line above! all other js imports:
<s:head theme="ajax" debug="true"/>

(otherwise it will conflict with atleast the scriptaculous.js)

打开/src/main/webapp/decoraters/default.jsp文件,在上面加入这一行导入其它全部js: <s:head theme="ajax" debug="true"/>

(否则,它至少和scriptaculous.js冲突)

2) make sure your ajax return string will not be decorated.
there are many option but i like to do this:
open your decorators.xml file:

    b)确保ajax返回字符串不会被修饰,要做到这点有很多选择,但我喜欢这样做:

打开decorators.xml文件:

<decorators defaultdir="/decorators">
<excludes>
<pattern>/*ajax=true*</pattern>
<pattern>/*decorate=false*</pattern>
<pattern>/struts/dojo/*</pattern> <!-- OK to remove if you're
not using Struts -->
<pattern>/resources/*</pattern>
</excludes>
<decorator name="default" page="default.jsp">
<pattern>/*</pattern>
</decorator>
</decorators>

i added the decorate=false part. urls with this parameter will not be
decorated.

加入“decorate=false”部分,带有这一参数的url不会被修饰。

so an example would be nice right:
below an ajaxTest.jsp page which will be the caller.
than an ajaxReturn.jsp page which will be the returned data.
i expect you can make an AjaxAction with the methods String ajax(),
getPersons() etc..by your self.
than this is connected by struts like this:

举例说明:下面的ajaxTest.jsp页是调用页面,ajaxReturn.jsp是返回页面。随意包含一个Ajax操作。像下面这样通过struts连接。

<action name="ajax" class="ajaxTest">
<result>/WEB-INF/pages/employee/ajaxTest.jsp</result>
<result
name="ajax">/WEB-INF/pages/employee/ajaxReturn.jsp</result>
</action>

the ajaxTest.jsp:

<%@ taglib prefix="s" uri="/struts-tags"%>
<head>
<script type="text/javascript">
dojo.event.topic.subscribe("/edit", function(data, type,
request) {
alert("type: "+type);
alert("data: "+data);
if(type="load"){
document.getElementById("result").innerHTML=data;
}

});
</script>
</head>

<!-- URL link to struts action-->
<s:url id="ajaxText" action="ajax" method="ajax" >
<s:param name="decorate" value="false" />
</s:url>

<!-- Div where content will be displayed -->
<s:div theme="ajax" id="weather" href="${ajaxText}">
loading content... from the ajax action the ajax method is called.
than the ajaxReturn.jsp is rendered here.
</s:div>


<p>Persons</p>
<s:if test="persons.size > 0">
<table>
<s:iterator value="persons">
<tr id="row_<s:property value="id"/>">
<td>
<s:property value="firstName" />
</td>
<td>
<s:property value="lastName" />
</td>
<td>
<!-- call the remove method on the ajax action no return-->
<s:url id="removeUrl" action="ajax" method="remove">
<s:param name="id" value="id" />
<s:param name="decorate" value="false" />
</s:url>
<s:a href="%{removeUrl}" theme="ajax" >Remove</s:a>

<!-- call the edit method an the ajax action. the
result (ajaxResult.jps)
will be handed to the edit javascript mothed
attached to dojo (above) -->
<s:url id="editUrl" action="ajax" method="ajax">
<s:param name="id" value="id" />
<s:param name="decorate" value="false" />
</s:url>
<s:a href="%{editUrl}" id="a_%{id}" theme="ajax"
notifyTopics="/edit">Edit</s:a>
</td>
<td>
<a href=ajax!remove.html?id=2>remove me no ajax</a>
</td>
</tr>
</s:iterator>
</table>
</s:if>

<hr>
<div id=result></div>

the ajaxResult.jsp:

<%@ taglib prefix="s" uri="/struts-tags"%>
Make some nice form here. Now show all persons.
<s:iterator value="persons">
<table><tr><td><s:property value="firstName" /></td>
<td><s:property value="lastName" /></td>
</tr>
</table>
</s:iterator>

ok here is my action to:

这是我的做法:

package nl.incipio.match.webapp.action;

import java.util.List;

import org.appfuse.model.User;

import com.opensymphony.xwork2.Preparable;

import nl.incipio.match.util.MyBaseAction;

public class AjaxTestAction extends MyBaseAction implements Preparable {
private static final long serialVersionUID = 378605805550104346L;

private List<User> persons;

private Long id;

@Override
public String execute() throws Exception {
log.debug("just getting the stuf");
persons = (List<User>) getRequest().getAttribute("persons");
if (persons == null) {
log.debug("just ones please");
persons = userManager.getUsers(null);
getRequest().setAttribute("persons", persons);
} else {
log.debug("persons" + persons.size());
}
return SUCCESS;
}

public List<User> getPersons() {
return persons;
}

public void setPersons(List<User> persons) {
this.persons = persons;
}

public String remove() throws Exception {
log.debug("do some removing here when i feel like it id:" + id);
if (persons != null) {
log.debug("before persons" + persons.size());
persons.remove((id.intValue() - 1));
log.debug("after persons" + persons.size());
}
return SUCCESS;
}

public String save() throws Exception {
log.debug("do some saving here when i feel like it");
return execute();
}

public String ajax() {
log.debug("ajax is doing something id:"+id);
return "ajax";
}

public String edit() throws Exception {
log.debug("do some editing here when i feel like it");
return execute();
}

public Long getId() {
return id;
}

public void setId(Long id) {
this.id = id;
}

public void prepare() throws Exception {
log.debug("i'm getting prepared!!!");

}
}

spring config in applicationContext.xml:

applicationContext.xml文件中的Spring配置:

<bean id="ajaxTest"
class="nl.incipio.match.webapp.action.AjaxTestAction">
<property name="userManager" ref="userManager"/>
</bean>

posted on 2008-08-09 08:35 gdufo 阅读(488) 评论(0)  编辑  收藏 所属分类: Appfuse

导航

统计

常用链接

留言簿(6)

随笔分类

随笔档案

文章分类

文章档案

收藏夹

Hibernate

友情链接

搜索

最新评论

阅读排行榜

评论排行榜