4

ユーザー インターフェイスは、多くの場合、ボタン、入力フィールド、ダイアログ ボックス、スライダーなどのさまざまな入力デバイスで構成されています。通常、イベントの順序によって予想される動作が決まります。この動作は、多くの場合、単純なルールでは簡単に把握できません。

この種の問題に対する一般的なアプローチはありますか?

インターフェイスがいかに簡単に複雑になるかを示す例として、3 つのトグル ボタンを備えたインターフェイスを取り上げます。ボタン クリックの動作が各ボタンの状態に依存する場合、2 ^ 3 * 3 = 24 のイベント ケースが可能です。動作がイベント履歴にも依存している場合、イベント ケースの数は指数関数的に増加します。

実際の例として、私が取り組んでいる wysiwyg テキスト エディターを見てください。エディターでフォーカス/ぼかしイベントを選択して、エディターを有効/無効にします。一部のボタン (ウィジェット) はフォーカスをエディターにすぐに戻しますが、他のボタンはダイアログを開きます。下の画像の矢印は、インターフェイス要素をクリックしたときにフォーカスが移動する場所を示しています。

ここでは、フォーカスの管理が難しい問題であり、望ましくない、または直感に反する動作を引き起こすことがよくあります。

ユーザー インターフェイス スケッチ

4

3 に答える 3

1

Mediator AKA Message Brokerパターンを使用して、UIコンポーネント（一般的にはあらゆるタイプのアプリケーションコンポーネント）を分離できます。ここでは、それに関する2つの記事を紹介します。

  1. Javascriptに適用されるメディエーターパターン
  2. メディエーターパターンjavascript
于 2012-06-02T10:26:54.283 に答える
1

私の質問を正しくすることは、答えの一部です。私の質問は、ウィジェットがデータの表現であるだけでなく、情報の共有部分の入力デバイスである特殊なケースに関するものです。

Matteo Migliore によって提案されたイベント ディスパッチャーには、別の用途があります。情報の流れがより直線的である場合に役立ちます。一方ではイベントを発生させることができる 1 つ以上のオブジェクトがあり、他方ではそれらのイベントをリッスンするオブジェクトです。

私の場合、イベントの管理だけでなく、ロジックの管理も一元化する必要があります。このロジックは、複数のアクチュエーターが同じデータソースに影響を与え、簡単にループを引き起こすという特徴があります。私の場合、このデータソースは次のとおりです。フォーカスはどこにあり、いつエディターをアクティブ化/非アクティブ化する必要がありますか。

ループを防ぐ解決策は、内部状態変数を使用し、各状態 + イベントの組み合わせをアクション + 新しい状態に変換するマッピングを慎重に設計することです。基本的な実装は次のようになります。

switch (eventdescription) {
  case 'click_in_txt':
    switch (state) {
      case 'inactive':
        activate();
        state = 'active';
        break;
      case 'plugin_has_focus';
        close_plugin();
        state = 'active'
        break;
      default:
        console.log('undefined situation ' + state + ' / ' + eventdescription);
    }
  ...
}

このアプローチにはまだ試行錯誤が必要ですが、どの状況がバグの原因であるかを簡単に確認できるため、その状況だけで動作を変更できます。また、console.log() 関数は、予期しない動作を引き起こす可能性のあるイベントの組み合わせを見落とした場所を示します。

イベント/状態のデシジョン テーブル

于 2012-06-02T11:44:53.760 に答える
0

私が想像できる最も一般的なアプローチは、イベント ツリーを描画することです。このイベント ツリーの単一のブランチの一般的な表現は次のようになります。

(start state) -> [event] -> <action> -> [event] -> <action> ...

各ポイントで異なるイベントが発生する可能性があるため、イベント ツリーは、観測された分岐が長くなるほど指数関数的に成長します。幸い、多くの場合、インターフェイスは過去の状態に戻ります。たとえば、ダイアログを閉じた後、開始状態に戻ります。

これらの戻り状態を見つけてモデル化することは、各アプリケーションに固有の創造的なプロセスです。これらの各状態に名前を付けると役立ちます。中間結果は、上でスケッチした状態/イベント/アクション ダイアグラムです。

于 2012-06-18T11:42:19.493 に答える