web-dev-qa-db-ja.com

Key-Valueペアエディター（JSON）でのネスト、継承、オーバーライドの表現

要求事項

私のアプリケーションには、JSONプロパティを介して構成された階層コンテキストがあります。
これらは、単一のJSONプロパティファイルを作成するためにオーバーレイされます。
プロパティは、親子関係に基づいて継承またはオーバーライドできます。
ユーザーは、各コンテキスト内のプロパティを表示または編集できます。

親を持つコンテキストで作業する場合、ユーザーは継承またはオーバーライドされたプロパティを表示する必要があります。

プロパティファイルの例

ソースプロパティは、それぞれ独自のコンテキストで、次のようになります。

// Root
{
  "A": "init_a_value",
  "B": {
    "C": "init_c_value"
  }
}

// Child of Root
{
  "A": "override_a_value",
}

// Leaf of Root
{
  "B": {
    "D": "add_d_value"
  }
}

それがすべてまとめられる（または「構成される」）と、次の統合結果が得られます。

// Leaf Composed
{
  "A": "override_a_value",
  "B": {
    "C": "init_c_value",
    "D": "add_d_value"
  }
}

チャレンジ

ユーザーが各コンテキストのプロパティを編集しているとき…

これらの要素を明確にするにはどうすればよいですか？

  • 階層関係
  • 継承
  • オーバーライド

私たちが試したこと

1つのアイデア：

  • 親子関係をドットで区切られた表記に視覚的にフラット化します。
  • 2つのテーブルを表示：継承された（読み取り専用）プロパティと現在のコンテキストでの編集可能なプロパティ。

実際には、次のようになります。

+----------------------------------------+
# INHERITED                              #
+-----+---------------+------------------+
| KEY |  SOURCE       |   VALUE          |
+-----+---------------+------------------+
| A   | Child of Root | override_a_value |
| B.C | Root          | init_c_value     |
+-----+---------------+------------------+

+-------------------+
# EDITABLE          #
+-----+-------------+
| KEY | VALUE       |
+-----+-------------+
| B.D | add_d_value |
+-----+-------------+

[ + Add new property ]

また、既存のプロパティを追加することの副作用を示すために、現在のコンテキスト自体がオーバーライドする継承されたプロパティに取り消し線を引くこともできます。

ボトムライン

このデータを表示する明確な方法はありますか？
これが実際に動作している例を誰か知っていますか？

tablesinputtreeeditor
4
Basil

私が見た中で最も近いものは、階層のドット表記を効果的に使用するFirefox構成です。各プロパティは「ユーザーセット」または「デフォルト」です。

「ユーザー設定」の値は、それらに注意を引くために太字になっています。

Firefox config screen

https://support.mozilla.org/en-US/kb/about-config-editor-firefox

5
cmonkey

最終的に、Sublime Textがアプリケーションの設定を表示する方法から始めました。2つのJSONパネルで、左側は読み取り専用でデフォルトを表示し、右側はカスタマイズを表示しています。私たちの場合、左側は、より高いコンテキストからの合成された継承データを示しています。残念ながら、このビューは、どのコンテキスト固有のデータが最初から取得されたかを示すことを実際にはサポートしていません。おそらく後で、特定のキーをポイントするときにホバーテキストを追加して、そのキーのコンテキストを示すことができます。

Our side-by-side prototype

それは私が期待していたほど洗練されていませんが、初期費用が低いという利点があります。これをユーザーの前に表示して、ユーザーがそれをどのように使用しているかを確認し、さらに開発する方法をよりよく理解できます。

1
Basil