Spring4 Webflow Thymeleaf2 Tiles Ajax:一切正常,除了

时间:2015-09-01 23:49:07

标签: ajax spring spring-webflow thymeleaf tiles

除了最后一步,我的Spring4 Thymeleaf2 Tiles和Ajax配置正在运行。我的html页面没有刷新。我知道调用该方法,结果从我的服务方法返回。我认为我的错误是我对待" id"在helloworld tile中。

我将展示我的整个配置,因为网上有很少的xml配置示例,而one of them是错误的。

对最后一步的帮助将深表感谢。

配置的关键部分:

WebFlow配置



<!-- Webflow Config-->

<webflow:flow-registry id="flowRegistry"
		base-path="/WEB-INF/flows/admin" flow-builder-services="flowBuilderServices">
		<webflow:flow-location id="testflow" path="testflow.xml" />
		<webflow:flow-location id="xzcreatetesttype" path="xzcreatetesttype.xml" />
	</webflow:flow-registry>


	<webflow:flow-executor id="flowExecutor"
		flow-registry="flowRegistry" />

	<webflow:flow-builder-services id="flowBuilderServices"
		view-factory-creator="mvcViewFactoryCreator" validator="validator" development="true" />
	
   
	<bean class="org.springframework.webflow.mvc.servlet.FlowHandlerAdapter">
		<property name="flowExecutor" ref="flowExecutor" />
		<property name="saveOutputToFlashScopeOnRedirect" value="true" />
	</bean>
		

	<bean class="org.springframework.webflow.mvc.servlet.FlowHandlerMapping">
		<property name="flowRegistry" ref="flowRegistry" />
		<property name="order" value="-1" />
	</bean>
&#13;
&#13;
&#13;

观看配置

&#13;
&#13;
<!-- views config-->

	<bean id="templateResolver"
		class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
		<property name="prefix" value="/WEB-INF/html/" />
		<property name="suffix" value=".html" />
		<property name="templateMode" value="HTML5" />
		<property name="cacheable" value="false" />
		<property name="order" value="0"></property>
	</bean>


	<!-- Thymeleaf Template Engine -->
	<bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
		<property name="templateResolver" ref="templateResolver" />
		<property name="additionalDialects">
			<set>
				<bean class="org.thymeleaf.extras.tiles2.dialect.TilesDialect" />
			</set>
		</property>
	</bean>

	<!-- Resolves logical view names returned by Controllers to Tiles; a view 
		name to resolve is treated as the name of a tiles definition -->


	<bean id="tilesViewResolver" class="org.thymeleaf.spring4.view.AjaxThymeleafViewResolver">
		<property name="viewClass"
			value="org.thymeleaf.extras.tiles2.spring4.web.view.FlowAjaxThymeleafTilesView" />
		<property name="templateEngine" ref="templateEngine" />
		<property name="order" value="1" />
		<property name="characterEncoding" value="UTF-8" />
	</bean>
	
	<bean id="tilesConfigurer"
		class="org.thymeleaf.extras.tiles2.spring4.web.configurer.ThymeleafTilesConfigurer">
		<property name="definitions">
			<list>
				<value>/WEB-INF/**/views.xml</value>
			</list>
		</property>
	</bean>
&#13;
&#13;
&#13;

服务配置

&#13;
&#13;
<!--the businesservice and auservice are not relevant to the current problem. Not used-->

    <bean id="adminUserViewService" class="jake.prototype2.service.user.AdminUserViewServiceImpl">
		<property name="businessService" ref="businessService" />
		<property name="auService" ref="auService" />
	</bean>
&#13;
&#13;
&#13;

Javascript配置

&#13;
&#13;
<!--general config-->
<!-- The  following is required to  access the javascript libraries required for ajax calls-->
	<mvc:resources mapping="/resources/**" location="/, classpath:/META-INF/web-resources/" />
	<mvc:annotation-driven />
	<mvc:default-servlet-handler />
&#13;
&#13;
&#13;

&#13;
&#13;
<!---WebFlow Flow config-->


<flow xmlns="http://www.springframework.org/schema/webflow"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/webflow 
      http://www.springframework.org/schema/webflow/spring-webflow-2.4.xsd">

<!-- Here I instantiate a bean that just has  get and set date methods and a java.util.date field-->
<var name="mydate"
		class="jake.prototype2.controller.viewwrapper.ViewWrapperHelloWorld" />

	<!-- called the first view through a controller but I could set up in xml config  -->
	<view-state id="hellotlv1">
		
		<transition on="next" to="standard" />
	</view-state>

     <!-- This confirms that tiles are working. Two tiles are integrated onto a template  -->
	<view-state id="standard">	
		<transition on="next" to="standardext" />
	</view-state>
	
	<!--  This is where we call an ajax method. First we update the mydate bean, then we render as an ajax fragment -->
	<view-state id="standardext">
		
		<transition on="next" to="xzlogin" />
		<transition on="doHelloWorld">
		<!--  I update the date. I have used this design before and it works, i.e., passing variable in as an argument, 
		updating value and returning to view via webflow -->
		<evaluate expression="adminUserViewService.doHelloWorld(mydate,flowRequestContext)"
				result="mydate" />
			<render fragments="helloworld" />
		</transition>

	</view-state>

..........
&#13;
&#13;
&#13; Tiles配置

&#13;
&#13;
<!--Tiles Config-->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
	"-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"
	"http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
	
<tiles-definitions>
	
	
		<!-- If just using tiles view resolver all pages must be defined in view regardless of whether or not they use tiles
		The path to the tiles is the path over and ablve the path specified in templateResolver configuration. Hence since template configuration
		specifies WEB-INF/html and since there is a single view.xml and all html files (templates and fragments) in the html folder, no further 
		path specification is required in this case. Webflow will be looking for the definition name as the "to" value of a transition -->
		<definition name="hellotl" template="hellotl" templateType="thymeleaf"/>
		<definition name="hellotlv1" template="hellotlv1" templateType="thymeleaf"/>
		
		
	     <!-- standard.html is a template. hw and hw2 are tiles inserted into the template. Note there is no need to specify a suffix .html here -->
		<definition name="standard" template="standard" templateType="thymeleaf">
		<put-attribute name="testa" value="hw :: content" type="thymeleaf"/>	
		<put-attribute name="testb" value="hw2 :: test"  type="thymeleaf"/>
		<put-attribute name="helloworld" value="hw :: helloworld"  type="thymeleaf"/>
		</definition>
	
	<!--  standardext is where we attempt an ajax call.  -->
	<definition name="standardext" extends="standard" templateType="thymeleaf">
		<put-attribute name="testa" value="hw3 :: content" type="thymeleaf"/>		
		<put-attribute name="testb" value="hw2 :: blank"/>	
		<put-attribute name="helloworld" value="hw3 :: helloworld"/>		
	</definition>

	
</tiles-definitions>
&#13;
&#13;
&#13;

** HTML模板**

&#13;
&#13;
<!--this is the template for tiles-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:th="http://www.thymeleaf.org"
      xmlns:tiles="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org"
      lang="en">
     
      
<head>

<title>test layout</title>


</head>

<body >

<div tiles:include="testa">dodododo</div>

		This text appears everywhere
<div tiles:include="testb">kkkkkkk</div>

<div tiles:include="helloworld">hello world</div>



</body>


</html>
&#13;
&#13;
&#13;

** Ajax的HTML平铺**

&#13;
&#13;
  <!-these are the two tiles used for the Ajax call>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:tiles="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org" lang="en">
    <head>
    </head>
    <body>
	<div tiles:fragment="content">

		<script type="text/javascript" th:src="@{/resources/dojo/dojo.js}"></script>
		<script type="text/javascript" th:src="@{/resources/spring/Spring.js}"></script>
		<script type="text/javascript"
			th:src="@{/resources/spring/Spring-Dojo.js}"></script>

		<form id="triggerform" method="post" action="">
			<input type="submit" id="helloWorld" name="_eventId_doHelloWorld"
				value="Update now!" />
		</form>

		<script type="text/javascript">
			Spring.addDecoration(new Spring.AjaxEventDecoration({
				formId : 'triggerform',
				elementId : 'helloWorld',
				event : 'onclick'
			}));
		</script>
	</div>
	
	
	<!--If I do not include a tiles:fragment, I get an excetion from apache tiles-->
	<div id="data"  tiles:fragment="helloworld"> <span th:text="${mydate}? ${mydate.date}">
	<!--because the date is initialized with the bean, I always see the date here, but it does not update-->
		the date goes here</span></div>
    </body>
    </html>
&#13;
&#13;
&#13; **服务方法**

import java.util.Date;
import java.util.HashMap;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.webflow.execution.RequestContext;
import jake.prototype2.controller.utilities.SessionAndRequestParameters;
import jake.prototype2.controller.viewwrapper.ViewWrapperHelloWorld;
import jake.prototype2.controller.viewwrapper.ViewWrapperUserAdminLogin;
import jake.prototype2.controller.welcome.*;
import jake.prototype2.model.business.Business;
import jake.prototype2.model.user.UserAdmin;
import jake.prototype2.model.user.UserStructureException;

public class AdminUserViewServiceImpl implements AdminUserViewService
{   
/**The autowired beans are not required for the hello wrld function**/
@Autowired
private BusinessService businessService;    
@Autowired
private AdminUserService auService; 
/*******service methods************/
/**The method takes a bean declared in test flow as an argument and returns it as the return object. 
 * I cannot guarantee this is the best design as I don't know how webflow deals with objects. 
 * (In theory, it should be returning the same reference)
 * RequestContext is not needed in this example, but it is a helpful tool in many methods if you need access to
 * webflow or servlet environment objects. Note, this is webflows, request context
 * org.springframework.webflow.execution.RequestContext**/
public ViewWrapperHelloWorld doHelloWorld(ViewWrapperHelloWorld mydate, RequestContext ctx)
{       
    SS.getLogger().debug("\n\n\nReturning with new date");
    mydate.setDate(new Date(System.currentTimeMillis()));       
    return mydate;
}

1 个答案:

答案 0 :(得分:0)

知道了!

Thymeleaf sandbox tiles非常有用,因为this post(线程底部)

我做了一些改变。

  1. 我把ajax片段作为一个独立的html文件,hw4.html。注意:我在此测试中将日期称为两次。一旦直接通过百里香(确认瓷砖刷新)和一次从豆(确认豆在范围和刷新)。通过这种方式,我可以确认这不是我的bean或范围问题。
  2. <div id="data"> <h3 th:text="${#dates.createNow()}"></h3>
    	<span  th:text="${mydate}? ${mydate.date}">
    		the date goes here</span></div>
    	

    另请注意,没有th:fragment或tiles:fragment。这不再是必要的。

    views.xml如下所示:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE tiles-definitions PUBLIC
    	"-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"
    	"http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
    	
    <tiles-definitions>
    	
    	
    		<!-- If just using tiles view resolver all pages must be defined in view regardless of whether or not they use tiles
    		The path to the tiles is the path over and ablve the path specified in templateResolver configuration. Hence since template configuration
    		specifies WEB-INF/html and since there is a single view.xml and all html files (templates and fragments) in the html folder, no further 
    		path specification is required in this case. Webflow will be looking for the definition name as the "to" value of a transition -->
    		<definition name="hellotl" template="hellotl" templateType="thymeleaf"/>
    		<definition name="hellotlv1" template="hellotlv1" templateType="thymeleaf"/>
    		
    		
    	     <!-- standard.html is a template. hw and hw2 are tiles inserted into the template. Note there is no need to specify a suffix .html here -->
    		<definition name="standard" template="standard" templateType="thymeleaf">
    		<put-attribute name="testa" value="hw :: content" type="thymeleaf"/>	
    		<put-attribute name="testb" value="hw2 :: test"  type="thymeleaf"/>
    		<put-attribute name="helloworld" value="hw :: helloworld"  type="thymeleaf"/> 
    		</definition>
    	
    	<!--  standardext is where we attempt an ajax call.  -->
    	<definition name="standardext" extends="standard" templateType="thymeleaf">
    		<put-attribute name="testa" value="hw3 :: content" type="thymeleaf"/>		
    		<put-attribute name="testb" value="hw2 :: blank" type="thymeleaf"/>	
    	   <put-attribute name="helloworld" value="hw4"  type="thymeleaf"/> 
    	</definition>
    
    	
    </tiles-definitions>

    图块模板应使用图块:替换

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" 
          xmlns:th="http://www.thymeleaf.org"
          xmlns:tiles="http://www.thymeleaf.org"
          xmlns:sec="http://www.thymeleaf.org"
          lang="en">
         
          
    <head>
    
    <title>test layout</title>
    
    
    </head>
    
    <body >
    
    <div tiles:include="testa">dodododo</div>
    
    		This text appears everywhere
    <div tiles:include="testb">kkkkkkk</div>
    
    <div tiles:replace="helloworld">hello world</div>  
    
    
    
    </body>
    
    
    </html>

    表单图块几乎没有变化:

    <div tiles:fragment="content">
    
    		<script type="text/javascript" th:src="@{/resources/dojo/dojo.js}"></script>
    		<script type="text/javascript" th:src="@{/resources/spring/Spring.js}"></script>
    		<script type="text/javascript"
    			th:src="@{/resources/spring/Spring-Dojo.js}"></script>
    
    		<form id="triggerform" method="post" action="">
    			<input type="submit" id="helloWorld" name="_eventId_doHelloWorld"
    				value="Update now!" />
    		</form>
    
    		<script type="text/javascript">
    			Spring.addDecoration(new Spring.AjaxEventDecoration({
    				formId : 'triggerform',
    				elementId : 'helloWorld',
    				event : 'onclick'
    			}));
    		</script>
    		
    		
    	</div>

    其余几乎与问题相同。我没有对应用程序上下文进行更改。

    所以,这很有效。我花了一个星期的时间来研究百里香和阿贾克斯。希望这篇文章能让后续的其他人更容易。

    我应该强调这是一种新手的努力。欢迎专家在这篇文章中提供建议的改进或错误