3

HTMLアプリケーションのワークフローを独立して表現する方法を探しています。ユーザーがフォームに特定の値を入力すると、別のフォームが表示されます。さらに、値が入力されている場合は、この子フォームにこれらの子フォームの新しい部分を表示する必要があります。

HTMLフォーム、これらのフォームのHTML要素、およびこれらの要素の値の間の関係を表現したいと思います。

テーブルフィールドやテーブルリレーションシップなどのデータベース情報に基づいて、Doctrineを介して管理し、ExtJSフォームを生成します。

ここで、ExtJS（JavaScript）コードを使用してアプリケーションフローを直接ハードコーディングしないように、ExtJSフォームにいくつかのフローロジックを導入する必要があります。

事前定義された構成ファイルに基づいて、実行時に適切な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。

4

2 に答える 2

1

私がすることは、別のドメインで同様の設定を使用する他のツール/プロジェクトから始めて、そのテクニックを自分のドメインに適用できるかどうかを確認することです.

たとえば、Cucumber (http://cukes.info/) を見てください。Cucumber は、アプリケーションの機能テストを目的とした動作駆動型の開発ツールです。人間が読めるテスト構文を使用します。もう 1 つは Selenium (http://seleniumhq.org/) で、インターフェイスの対話性がドメイン固有言語で記述されています。

これらの2つが解決策のインスピレーションを与えてくれることを願っています。幸運を祈ります

ロブ

于 2011-05-10T10:39:30.553 に答える
0

まず最初に、@Rob の回答に感謝します。最終的に、カスタム ソリューションを使用することにしました。

したがって、他のJavaScriptフロー制御の実装をいくつか調べました

すなわち：

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

定義済みの構文でアプリケーション フロー (JavaScript 関数の呼び出し順序) を定義できる場所。

私は特に、アプリケーション フローの状態に入る前、および状態を終了する前に実行されるフローの事前および事後条件関数 (_in および _out) のアイデアが気に入りました。さらに、特定のフロー状態にアタッチされた _vars 配列のアイデアは興味深いものでした。

詳細については、 https://github.com/bemson/Flow/wiki/Using-Flow#s3-1を参照してください。

James Mc Parlane は、JavaScript で有限状態マシン (FSM) を開発し、プレーンな JavaScript ではなく XML でアプリケーション フローを記述しました。これは良いアイデアだと思いましたが、彼が行っているのは、サーバー側ではなくクライアント側で 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 の式言語を使用する Spring の Web Flow に飛び込んでいますが、これは非常に興味深いと思います。

いずれにせよ、私の最終製品は、James Mc Parlane のフロー定義に似たフロー定義に基づいていますが、彼のアプローチとは対照的に、サーバー側でアプリケーション フローを定義する XML を解析します。

この XML に基づいて、対応するアプリケーション フローを含む各ページ (各ページには独自の XML があります) に JavaScript を添付します。私たちのシステムは ExtJS に基づいているため、

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

addListener

ユーザー イベントに基づいてアプリケーション フローを操作する関数。

これが将来誰かに役立つことを願っています。

よろしく

JS

于 2011-05-22T11:16:51.327 に答える