用于定义 HTML 应用程序工作流的元语言

Question

我正在寻找一种方法来语言独立地表达 HTML 应用程序的工作流程。如果用户在表单中填写某些值，则应显示另一个表单。 此外，如果填写了值，则应在此子表单中显示这些子表单的新部分。

我想表达 HTML 表单之间的关系、这些表单中的 HTML 元素以及这些元素的值。

基于数据库信息，如表字段和表关系，我通过Doctrine进行管理，生成ExtJS表单。

现在我必须在我的 ExtJS 表单中引入一些流逻辑，这样我就不会直接使用 ExtJS (JavaScript) 代码对应用程序流进行硬编码。

我想根据预定义的配置文件在运行时生成适当的 JavaScript 代码。

例如：

我有 X 个表格

FORM 1. (displayed on startup)
 |
 |-> FROM 1.1 (only display after values have been inserted into FORM 1.)
 |
 |-> FROM 1.2 (only display after values have been inserted into FROM 1.1)
 |
FROM 2. (display when something inserted into FORM 1.)
 |
 |-> FROM 2.1 (layout and elements of this form depend upon what has been 
     inserted into FROM 1.)
 ....  

此外，如果用户在输入字段中填写内容，我只想显示部分表单

FORM 1. (displayed on startup)
 |
 |-> LAYER 1. (only display/activate after field <count> of FROM 1. 
 |   has been filled in)
 |
 |-> LAYER 2. (only display/activate after field <count> of LAYER 1. 
 |   has been filled in)
 |
 ....

然后我只想在用户填写表单元素的值时显示表单 通过预定义的条件

FORM 1 (displayed on startup)
 |
 |-> FROM 1.1 (only display if field <count> of FROM 1. is greater that 10
 |   count > 10)
 |
 |-> FROM 1.2 (if count < 10 display this form)
 |
 ....  

最后我想，根据用户在父表单中插入的值，为输入元素设置规则，以限制其输入范围（可能的值）

这是一个示例工作流程

是否已经有一种元语言来定义这样的关系？

你会用什么方法来实现这样的事情？

问候，

J.

Answer 1

我要做的是从在另一个域中使用类似设置的其他工具/项目开始，看看你是否可以将它的技术应用到你自己的域中。

例如，看看 Cucumber (http://cukes.info/)。 Cucumber 是一种行为驱动的开发工具，旨在对应用程序进行功能测试。它使用人类可读的测试语法。 另一种是 Selenium (http://seleniumhq.org/)，其中界面交互性以特定领域的语言描述。

希望这两个能给你一些解决方案的灵感，祝你好运

罗伯

Answer 2

首先感谢@Rob 的回答。我最终决定采用自定义解决方案。

因此，我查看了其他一些 javascript 流控制实现

即：

流程
https://github.com/bemson/Flow/wiki/Flow-Use-Cases

您可以在其中以预定义的语法定义应用程序流（javascript 函数调用顺序）。

我特别喜欢 Flow 中的前置条件和后置条件函数（_in 和 _out）的想法，这些函数在进入应用程序流的状态和退出状态之前执行。此外，将 _vars 数组附加到特定流状态的想法很有趣。

更多信息请参见https://github.com/bemson/Flow/wiki/Using-Flow#s3-1。

James Mc Parlane 用 Ja​​vaScript 开发了有限状态机 (FSM)，他用 XML 而非纯 JavaScript 来描述应用程序流。我发现这是个好主意，但他所做的是在客户端而不是服务器端解析 XML。这对我来说是个缺点。

无论如何。他描述了这样的状态

<fsm>
  <states>
    <state name="Start">
      <enter call="initApp();" />
      <exit call="exitApp();" />
      <to>
        <from state="" call="displayStartPage();" />
        <from state="loggedOut" call="showLogoutMessage();displayStartPage();" />
       </to>
    </state>
    <state name="loggedIn">
      <include state="authenticated" />
      <exclude state="loggedOut" />
      <negate state="loggedOut" />
    </state>       
  </states>
</fsm>

他使用了以下可能的标签

<fsm>       ... the root node of the fsm (I renamed it to better reflect the purpose)
<states>    ... a collection of possible states (a state can have sub-states)
<state>     ... a possible state
<exclude>   ... if a state is active excluded one should be inactive
<include>   ... if a state is active the included state should also be active
<require>   ... should check that a javascript condition is true
<unrequire> ... the negation of <require>
<negate>    ... negate a state if you enter another state
<affirm>    ... make another state active, if entering a specific state
<enter>     ... fire a trigger when state gets active
<exit>      ... fire a trigger when state gets in-active
<from>/<to> ... specify state transitions and actions according to these transitions
<lock>      ... lock state, until state machine is reset

此外，可能还需要一些便利功能。命名视图：

testState   ... to test the state of the FSM
negateState ... negate a state 
affirmState ... set a new state and issue according transition events
flipState   ... set state from active to inactive and vice versa 
determine   ... determine current state

见
http://blog.metawrap.com/2008/07/21/javascript-finite-state-machinetheorem-prover/
和
http://blog.metawrap.com/2008/09/25/practical-applications-of-finite-state-machines-in-web-development/
了解更多信息。

我从 Camilo Azula 找到的其他一些解决方案是观察者模式和命令模式之间的混合。

http://camiloazula.wordpress.com/2010/10/14/fsm/

他使用命名常量来定义状态并通知观察者状态变化。

Michael Schuerig，写过关于这个主题的文章，但不幸的是，他的来源不再在线。无论如何，他的概念是基于方法链接的，你可能从 jQuery 和其他 JS 框架中知道它。

最后，IBM 也有专门针对这个主题的教程

http://www.ibm.com/developerworks/library/wa-finitemach1/ http://www.ibm.com/developerworks/library/wa-finitemach2/ http://www.ibm.com/developerworks/library/wa-finitemach3/

但说实话，我不太喜欢它。

现在我正在研究 Spring 的 Web Flow，它使用 Springs 表达式语言，我觉得这很有趣。

无论如何，我的最终产品将基于类似于 James Mc Parlane 的流定义，但与他的方法相反，我将解析定义服务器端应用程序流的 XML。

基于此 XML，我将在包含相应应用程序流的每个页面（每个页面都有自己的 XML）上附加一个 javascript。因为我们的系统是基于 ExtJS 我将使用

http://docs.sencha.com/ext-js/4-0/#/api/Ext.EventManager-method-addListener

addListener 

根据用户事件引导应用程序流的功能。

我希望这对将来的人有所帮助。

问候

JS