4

I know people have asked this question, but I don't seem to find a suitable response. So want to frame the Question again.

We need to build a responsive application, which will be used to create order by our customers.

I started looking into Spring4 Webflow and even created a sample pizza application [thanks to Spring in Action] works well as we need our application to be very scalable and this looks like a way to go.

The problem we have is - we are using AngularJS + Spring MVC/REST everywhere else in our applications. For WebFlow it looks like we need to use spring form i.e binding is done by Spring, plus other collisions between angularJS and Spring WebFlow. Is there a way to use Spring WebFlow + AngularJS together where we utilize angular full potential but still use WebFlow for mimicking conversational behaviour?

createPizza.jsp

<form:form commandName="pizza">
      <input type="hidden" name="_flowExecutionKey" 
          value="${flowExecutionKey}"/>

order-flow.xml

<view-state id="createPizza" model="flowScope.pizza">
        <on-entry>
          <set name="flowScope.pizza" 
              value="new com.springinaction.pizza.domain.Pizza()" />

          <evaluate result="viewScope.toppingsList" 
              expression="T(com.springinaction.pizza.domain.Topping).asList()" />
        </on-entry>
        <transition on="addPizza" to="showOrder">
          <evaluate expression="order.addPizza(flowScope.pizza)" />
        </transition>
        <transition on="cancel" to="showOrder" />
    </view-state>
AVI
  • 320
  • 1
  • 5
  • 19

2 Answers2

4

I don't think SWF was ever designed to be used as a SPA (Single Page Application). SWF 'state' tags always call the server and refresh the entire page to rerender the view. Which fundamentally conflicts with AngularJS.

Optionally, you could enable ajax requests in SWF and render only partial html fragments inside a single view-state tag. but the problem now is you will have all your business logic inside a single view-state tag which (in my opinion) significantly reduces the advantage(s) of using SWF and violates the SRP principle but the option exists.

see this example explaining in detail how SWF ajax requests work:

How to include a pop-up dialog box in subflow

Also, See the documentation for how to enable ajax requests/partial fragments:

http://docs.spring.io/spring-webflow/docs/current/reference/htmlsingle/#spring-js-ajax

Community
  • 1
  • 1
Selwyn
  • 3,118
  • 1
  • 26
  • 33
0

As of current version 2.5 (and maybe also a few older ones) it looks actually possible to use an Angular application in conjunction with a SWF (Spring Web Flow) application. By default SWF uses the post-redirect-get method to avoid the problem of back button in browser (such as confirmation of re-posting and idempotency of an operation) but you may override this default behaviour by adding the 

mode=embedded

parameter to all the Ajax requests targetting just the start state of a web flow.

As stated in the documentation:

When launched in "page embedded" mode a flow will not issue flow execution redirects during Ajax requests. The mode=embedded parameter only needs to be passed when launching the flow. Your only other concern is to use Ajax requests and to render only the content required to update the portion of the page displaying the flow.

More details here:

Chapter 11.7 of the release 2.5: Embedding A Flow On A Page

Daniele Cremonini
  • 63
  • 4