如何在子流中包含一个弹出对话框 [英] How to include a pop-up dialog box in subflow

问题描述

所以当子流结束时（关闭后）弹出对话框），然后可以更新父流程（当前页面）。

我试图通过子流程来实现类似下面的图片： p>

更新：

最后，我在Webflow中使用以下代码动态生成对话框：

 < render fragments =dialogContent/> 
  

解决方案

我不认为webflow父 - >子流过渡被设计为这样一个问题。 Web流程假定您正在从页面 - >页面转换。最好的方法是在弹出窗口初始化到父/主流中定义的特定转换时进行ajax / javascript调用，并放置要在转换中执行的逻辑。您可以将Spring Webflow配置为返回仅由JavaScript代码呈现的html片段。

这是我的一个项目的一个例子。

 < view-state id =editview =flows / s /＃{flowScope.modelPathName} / v /编辑model =modelObj> 
<！ - 注意：继承流必须实现自己的特定绑定
< binder> 
< binding property =name/> 
< binding property =description/> 
< / binder> 
  - > 
 
< transition on =saveModelto =chkLocalmodelObjDiff/> 
< transition on =cancelSaveto =cancelEditbind =false/> 
< transition on =objUnlink> 
< set name =flashScope.viewResponsevalue =pbmService.removeObjRelationship（requestParameters.objId，requestParameters.objName，modelObj）/> 
 
< render fragments =view_response_msg/> 
< / transition> 
  

所以在上面的例子中在我们的主/主流。 objUnlink转换可以由html链接触发，看起来像这样。

（sudo code url）：

  $ {flowExecutionUrl}？_ eventId ='objUnlink'& someOtherParam = 2 
  

必需的PARAM到触发器转换是：_ eventId = objUnlink

或通过ajax调用，其中url的结构如下：

（sudo code url）：

  $ {flowExecutionUrl}？ _eventId ='objUnlink'& someOtherParam = 2& ajaxSource = true 
  

必需的PARAM以触发转换ajax是：
_ eventId = objUnlink和ajaxSource = true

 < render fragments =view_response_msg/> 
  

触发任一个url只会渲染视图中定义的view_response_msg片段。在我的情况下，我使用百里香作为我的视图框架，view_response_msg被定义为百里香的片段。

因此，在发送请求并执行转换后，我的响应主体将仅包含在我的'view_response_msg'（而不是整个页面）中定义的呈现的html。

所以对于您的用例，您应该：

1. 定义一个您的视图框架中的片段只会渲染弹出窗口的内容。要保持与我们的示例保持一致，将称之为'view_response_msg'




2. 然后通过AJAX调用父/主流的特定转换。再次保持一致会将它称为'objUnlink'




3. 然后将这部分呈现的html响应存储在javascript变量中（记住我们称之为ajax调用的转换）和然后在弹出窗口中显示它。




4. 如果要在某些关闭弹出窗口时更新父/主流，使用相同的概念并创建另一个ajax调用 - > transition - > fragment渲染。记住我们还没有离开主流。

对于长的答案抱歉，这不是一个微不足道的问题:)

注意：必须将Spring Web Flow EXPRICITLY配置为处理ajax请求。请参阅文档。此外，您的特定视图框架可能（例如百里香）具有自己的特定配置/实现，用于Web Flow处理ajax请求和渲染片段。

Is there a way to call a dialog box inside subflow state so that the background(current flow) becomes disabled?

So that when the subflow ends (after closing the pop-up dialog box), it can then update the parent flow (current page).

I am trying to achieve something like the picture below with subflow:

Update:

At the end I used the following code in webflow to dynamically generate dialog box on the go:

<render fragments="dialogContent"/>

解决方案

I don't think webflow parent -> subflow transitions were design for such a problem. Web flow assumes you are transitioning from page -> page. Your best bet is to make ajax/javascript call while the pop up window is initializing to a specific transition defined in your parent/main flow and place the logic you want to execute inside the transition. You can configure Spring Webflow to return fragments of html that will only be rendered by your javascript code.

Here is an example from one of my projects.

  <view-state id="edit" view="flows/s/#{flowScope.modelPathName}/v/edit" model="modelObj">              
        <!--  NOTE: Inheriting flow must implement its own specific binding
        <binder>
            <binding property="name" /> 
            <binding property="description" />
        </binder> 
         -->

        <transition on="saveModel" to="chkLocalmodelObjDiff"/>
        <transition on="cancelSave" to="cancelEdit" bind="false"/> 
        <transition on="objUnlink">
            <set name="flashScope.viewResponse" value="pbmService.removeObjRelationship(requestParameters.objId,requestParameters.objName,modelObj)"/>

            <render fragments="view_response_msg" />
        </transition>

so in the example above we are in our "parent/main" flow. the "objUnlink" transition can be triggered by either an html link that looks like this.

(sudo code url):

${flowExecutionUrl}?_eventId='objUnlink'&someOtherParam=2

Required PARAM to Trigger the transition is: "_eventId=objUnlink"

or via ajax call where the url is structured like this:

(sudo code url):

${flowExecutionUrl}?_eventId='objUnlink'&someOtherParam=2&ajaxSource=true

Required PARAMs to Trigger the transition via ajax are: "_eventId=objUnlink" and "ajaxSource=true"

Because we have the:

<render fragments="view_response_msg" />

Triggering either url will only render the 'view_response_msg' fragment as defined by your view. In my case I am using thymeleaf as my view framework and 'view_response_msg' is defined as a fragment in thymeleaf.

So after sending the request and executing the transition my response body will only consist of the rendered html that was defined in my 'view_response_msg' (and not the entire page).

So for your use case you should:

1. Define a fragment in your view framework that will only render the contents of the pop up window. To stay consistent with our example will call it 'view_response_msg'

2. Then call a specific transition on the parent/main flow via AJAX. Again to stay consistent will call it 'objUnlink'

3. Then store this partially rendered html response in a javascript variable (remember we called this transition from ajax call) and then display it inside your pop up.

4. If you want to update the parent/main flow when some one closes the pop up use the same concept and create another ajax call -> transition -> fragment render. Remember we have not left the main flow.

Sorry for the long answer but it is not a trivial problem :)

Note: Spring Web Flow must be EXPLICITLY configured to handle ajax requests. See the documentation. Moreover, your specific view framework might (e.g thymeleaf) has it's own specific configuration/implementation for Web Flow to handle ajax requests and for rendering fragments.

这篇关于如何在子流中包含一个弹出对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！