2012-04-18 88 views
4

我想为我的用户提供一个编辑JSON对象的界面。JSON对象GUI

比如我有一个用下面的选项调用谷歌图表一个JavaScript:

var options={ 
    chartType: "Pie", 
    title:"Chart title", 
    is3D:false, 
    width:500, 
    height:300, 
}; 

我的理想用户应该能够修改选项本身,而不必寻找到的代码。他们将与来自对象,其中自动建立一个UI呈现:

  • 图图表是一个选择(饼图,折线图,条形图)
  • 标题文本输入
  • is3D是一个复选框
  • 等等

是否有这样的库?如果不是,有什么建议可以开始?

我当然可以手动构建表单,但想法是有一个适用于任何对象的通用解决方案。

+1

参见:http://stackoverflow.com/questions/998832/gui-based-or -web-based-json-editor-that-works-like-property-explorer – dreftymac 2012-10-04 21:55:58

回答

2

我发现与约定此链接描述JSON:http://www.json-schema.org/

搜索“JSON模式”带我到了一些解决方案,特别是这篇文章:

GUI-based or Web-based JSON editor that works like property explorer

这是两年前开始,但显然有良好的记录和保持最新。

此外,从2012年4月在IBM网站上的一个帖子:

http://www.ibm.com/developerworks/library/wa-jsonschema/index.html?cmp=dw&cpb=dwwdv&ct=dwnew&cr=dwnen&ccy=zz&csr=040512

0

编写一个webform来检测服务的参数。 获得参数后,根据可用参数生成表单。 提交表单并获取JSON结果。

+0

它是有道理的,但我正在寻找更通用的解决方案。我的一些对象甚至没有链接到服务,它们只是由我的脚本直接使用。 – Christophe 2012-04-18 22:51:36

+0

查看Fiddler如何拦截JSON – Har 2012-04-19 14:16:20

0

娜,你需要自己构建表单。 HTML表单只是一种描述属性(请求的)要求的方式,而且它们的序列化只会返回所需的对象。在您的例子这将是

<select name="chartType"><option value="Pie"/><option value="Line" />...</select> 
<input type="text" name="title" /> 
<input type="checkbox" name="is3D" /> 
<input type="number" name="width" /> 

等形式也让你描述的模式,最小/最大值,默认值和一切这样的库会处理。你可能会发现,原来简单的

{ 
    chartType: ["Pie", "Line", "Bar"], 
    title:"string", 
    is3D:"boolean", 
    width:"number" 
} 

到上面的HTML,并提供一个跨浏览器的序列化功能,但是当它变得更为复杂库(如预选“线”,有一个默认的标题等),你会回来的到html(或它的js表示)。

+0

thx,您的对象描述就是我所寻找的。我希望为此找到一个图书馆,或者至少了解一些惯例(例如如何描述下拉与单选按钮)。 – Christophe 2012-04-18 21:02:24

+0

不,那是html。选择列表,下拉选择列表,单选按钮?你只是说你想在选项之间做出选择。 – Bergi 2012-04-18 22:06:56

+0

我确实发现了一些东西,我需要看看它:http://www.json-schema.org/。 – Christophe 2012-04-18 22:41:52

1

问题

如何提供构建任意JSON结构的一个用户友好的方式,其中:

  • 用户界面直观,灵活,并且无需开发人员级技术人员即可使用iency
  • 用户界面可以从JSON
  • 修改用户界面需要很少或不需要显影剂介入
  • 修改底层JSON结构可自动地触发修改相应的用户界面的结构来推断

解决方案

如果这是问题的基本前提,这种方法确实出现使用任何的不同是可能的在“MVVM”命名法下(这显然是“MVC”模式的变体)。

实例

http://knockoutjs.com/examples/cartEditor.html http://en.wikipedia.org/wiki/Model_View_ViewModel#Open_source_MVVM_frameworks

参见

GUI-based or Web-based JSON editor that works like property explorer