Uploaded image for project: 'Spring Web Flow'
  1. Spring Web Flow
  2. SWF-1390

Improve Ajax and modal dialog support in Web Flow to be more universally useful regardless of client-side technology




      Web Flow supports a popup attribute on a view state that causes the view to be rendered in a modal dialog. This works even with state transitions. However the feature is only available when making Ajax requests with Spring Faces components or with Spring JavaScript and Dojo. The purpose of this ticket is to make it easier to work with modal dialogs in Web Flow regardless of the client-side technology or JSF component library used.

      Background: by default Web Flow issues a client-side redirect to transition between states and that's regardless of whether the request is Ajax or not. For Ajax requests made with Spring JS (or Spring Faces components), Web Flow returns special response headers that are then processed browser-side (with the help of Spring JS) by following the redirect in a second Ajax request.

      A challenge with this approach is it requires client-side support to process instructions from the server sent in the form of custom response headers. This makes the feature unavailable for use with other JSF component libraries or where the client-side technologies other than Spring JS (and Dojo).

      There are also limitations on a few related scenarios:

      1. A modal dialog that transitions without full page refresh - a modal dialog transitions to other view states with a mandatory redirect and a full page refresh; that precludes bringing up a modal dialog to get some input and then returning to the underlying page without re-rendering in full

      2. A modal dialog over several transitions - a modal dialog can only be used with a single view; a transition to anther view having popup="true" results in a second modal dialog; hence it isn't possible to go through several views in one modal dialog

      3. Ajax flow embedded on a page - there is no way for a flow to work embedded on a page without causing updates to the entire page

      The following JIRA tickets have also been reported based on experience with the feature:
      SWF-686 specify popup on the transition element
      SWF-1197 improve popup use when "submit level" validation occurs in the popup
      SWF-1310 issue when having a pop-up on top of another one
      SWF-1325 WebFlow - bug when working with RichFaces components inside a popup
      SWF-991 Ajax web flow wizard
      SWF-1251 <view-state> tag - popup="true" should support expression language

      The key pieces of the improvement would be:

      1. View A makes an Ajax request and transitions to view B without a client-side redirect. That will remove the requirement for the client-side to deal with a redirect.

      2. View B does partial rendering. The <render fragments=".."/> action can be used to control what is rendered in combination with Tiles or JSF 1.2. For JSF 2, preliminary tests show that a partial response in view B can be generated based on a request initiated from view A.

      3. Client-side code processes the partial response and updates the DOM.

      4. Optionally a modal dialog is launched.

      Note that step 4 is easily achieved with JSF component libraries that commonly provide a modal dialog component. The technique involves defining the modal dialog component in view A with an empty placeholder inside it. Step 3 then replaces the empty placeholder inside the modal dialog and brings it up when the Ajax request completes. The contents of the modal dialog can be continuously updated over subsequent Ajax requests and view state transitions.

      Additional thought must be given to this feature in JSF environments since essentially the client-side DOM will contain content from two views and hence two component trees. I believe as long as partial rendering remains on the granularity of a form then each form on a given page can post back successfully to the view state it is associated with (as evidenced by use of Spring Faces Ajax requests in combination with transition to view state having popup="true").


        Issue Links



              rstoya05-aop Rossen Stoyanchev
              rstoya05-aop Rossen Stoyanchev
              4 Vote for this issue
              4 Start watching this issue