当前位置：文江博客话题详情

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

发布于 2024-11-04 18:45:37 字数 1618 浏览 0 评论 0原文

我正在寻找一种语言独立表达 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)
 |
 ....

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

这里是示例工作流程

在此处输入图像描述

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

你会采取什么方法来实现这样的目标？

问候，

原文

I'm searching for an way to language independently express the workflow of an HTML application. If a user fills in certain values in a form, another form should be displayed.
Further if values are filled in, in this child-forms new parts of these child-forms should be shown.

I want to express relationships between HTML forms, HTML elements in these forms and values of these elements.

Based on database information, like table fields and table relationships, I manage via Doctrine, I generate ExtJS forms.

Now I have to introduce some flow logic into my ExtJS forms, in a way that I don't hard code the application flow with ExtJS (JavaScript) code directly.

I want to generate the appropriate JavaScript code on runtime, based on a predefined configuration file.

For instance:

I have X forms

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.)
 ....

Furthermore I only want to display parts of the forms if the user filled something in an input field

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)
 |
 ....

Then I want to display forms only if the value the user filled in a form element
passes a predefined condition

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)
 |
 ....

Last I want, based on values the user inserted in a parent form, set rules for input elements to restrict their input range (possible values)

Here is a example workflow

enter image description here

Is there already a metalanguage to define relationships like that?

What would be your approach to realize something like that?

Regards,

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

对岸观火 2024-11-11 18:45:37

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

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

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

罗布

回复收藏 0 原文

北恋 2024-11-11 18:45:37

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

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

即：

Flow
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 用 JavaScript 开发了有限状态机 (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

函数根据用户事件引导应用程序流程。

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

问候

first of all thanks @Rob for your answer. I finally decided to go with a custom solution.

I therefore looked over some other javascript flow controll implementations

Namely:

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

Where you can define application flow (javascript function call order) in a predefined syntax.

I especially liked the idea of pre- and post-condition functions (_in and _out) in Flow that are executed before entering a state in the application flow, and exiting a state. Furthermore the idea of a _vars array attached to a specific flow state was kind of interesting.

See https://github.com/bemson/Flow/wiki/Using-Flow#s3-1 for more information.

James Mc Parlane, developed a Finite State Machine (FSM) in JavaScript where he described the application flow in XML rather than in plain JavaScript. I found this a good idea, but what he does is to parse XML on the client side rather than on the server side. Which is a downside for me.

Anyways. He describes states like this

<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>

He uses the following possible tags

<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

Furthermore some convenience functions could be necessary. To name a view:

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

See
http://blog.metawrap.com/2008/07/21/javascript-finite-state-machinetheorem-prover/
and
http://blog.metawrap.com/2008/09/25/practical-applications-of-finite-state-machines-in-web-development/
for more information.

Some other solution that I found from Camilo Azula, is kind off a mix between the observer and the command pattern.

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

Where he uses named constants to define the states and notify observers about state changes.

Michael Schuerig, wrote about this topic but unfortunately his sources are not online any more. Anyways his concept is based on method chaining how you probably know it from jQuery and other JS Frameworks.

Lastly IBM has also a tutorial concentrating on this topic

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

But to be honest I didn't like it so much.

Right now I'm diving into Spring's Web Flow, which uses Springs expression language, which I find very interesting.

Anyways my final product will be based on a flow definition similar to that of James Mc Parlane, but in contrast to his approach I will parse the XML that defines the application flow on the server side.

Based on this XML I will attach a javascript to each page (each page has its own XML) that contains the according application flow. Because our system is based on ExtJS I will use the

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