web-dev-qa-db-ja.com

柔軟な条件/フィルターエディターとしてのTreeTable

データ/リクエスト/イベント処理システムを開発する必要があるたびに、条件/フィルターエディターを作成するというタスクに直面しています。いつものように、普遍的で唯一の解決策はありません。

グーグルは多くの様々な例を示しています:

enter image description here

一部のソリューションは、短い論理演算のみを処理するように設計されており、より長い関数で爆発します(例1)。他のソリューションは、レイアウトと情報のノイズのために醜いです。率直に言って、いくつかのカスタムレイアウトとデフォルトのコントロールを使用したアプローチは、少し醜くて人工的なもののようです。

では、ユニバーサルエディタを作成できますか?

私の答えは:はい、確かに。構文を強調表示したシンプルなTextAreaは、汎用的で柔軟なエディターとして使用できます。コピー/貼り付け、無料編集、インフィックス表記法、簡略化されたナビゲーションなどを含むすべての操作を自然にサポートします。テンプレートとエラーの強調表示により、このようなアプローチがユーザーフレンドリーで簡単に開始できます。

無料のテキスト編集はほとんどの人にとって複雑に聞こえるため、このアプローチは完全には承認されませんでした。

ちなみに、同様の質問を探すのにも時間を費やしてきました。私の結果は:

最初は、ツリーのようなレイアウトとデフォルトのコンポーネントを持つフォームを使用することを提案しています。 2番目はLISPを発明しました。誤解しないでください。LISPはかなり好きですが、括弧で囲まれたポーランド語のプレフィックス表記は、通常のユーザーを最大5分で狂わせます。そこで私は、厳密な階層、インフィックス表記法を維持し、いくつかの微調整を行い、並行して無料のテキスト編集を利用できるようにすることを決めました。

初期の実装では、次のように表示できます。

enter image description here

だから質問は:

  • これは良いアプローチだと思いますか?
  • 条件編集について何を提案しますか?

Wiresharkフィルター は、解決されるタスクの例として使用できます。

(ip.src> = 192.168.1.0 && ip.src <= 192.168.1.255)|| (ip.dst> = 192.168.1.0 && ip.dst <= 192.168.1.255)

式は複雑になる可能性があり(Cのような形式で4、8 .. 16行)、単純なAND/ORの代わりに特定の関数(COMPARE_ALLなど)を使用できる場合があることに注意してください。

対象読者

アイデアは、経験豊富なユーザーを満足させ、初心者が自分の道を見つけられるようにすることです。

12
Renat Gilmanov

あなたの質問から提案された解決策はどれも非常に直感的ではありません。主な問題であるIMHOは、演算子とコンポーネントの非常に不自然な順序付けです。どこでも、「AND」が最初に表示されます。これは、コンポーネントがどのように属しているかというユーザーのモデルには適合しません。

解決策として、私はこのようなものを提案します:

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

分割アイコンをクリックすると、分割タイプを選択できます:andor、またはのいずれか...または(排他的OR)。

このソリューションでは、自然言語と同じように構造全体を読み取ることができます。

1
André

クロムを削除します。人々は足場のある家に住むのが好きではありません。同様に、すべてがボックスで囲まれ、いくつかのボタンがアタッチされている式を読むのは困難です。

一般的に、「この表現を記述できる最も理解しやすい形式は何ですか?」ホワイトボードを使用して、自分の状態を10歳または上司に説明しようとしているところを想像してみてください。

木を作る代わりに、私はおそらく実績のある標準的な数学的表記法を使用するでしょう:{は条件をANDで結合し、[はORを意味します:

mathematical-boolean formula

明らかに、この表現は編集用ではなく読み取り用に最適化されています。しかし、これは意図です。複雑な条件が読みやすい場合は、間違いを犯す可能性が低くなります。また、可能な場合は常に、不平等の連鎖を許可する必要があります。これは、不平等の考え方を反映しているためです。たとえば、A≤B <C≤D、A> B> C≥D、およびA = B≠C = Dを許可する必要があります。ただし、式A≠B≠Cはあいまいです(ユーザーの観点からA≠ Cも含まれます)。

編集は、テキストエディターと非常によく似た環境で実行できます。条件を追加すると、中かっこ/大かっこが自動的に展開されます。これは、MathType UIの動作に似ています。また、マウスでブレースを「サイズ変更」して、新しい条件のプレースホルダーを追加することもできます。また、暗黙の論理条件を示す各ブラケットのツールチップで初心者を支援します。

あなたが言及しなかった最後のブール条件はXORです。一連の演算子の場合、「条件の1つだけが真でなければならない」ことを意味します。そのための標準的な数学表記はありませんので、独自に作成してください。山かっこ〈多分?ツールチップを提供することを忘れないでください。これは、これがユーザーに初めて表示されるときに混乱するためです

5
Pasha