如何使用dojo开发一个简单的UI设计器？

Question

我想使用dojo构建简单的UI设计器，但需要一些关于我应该从哪里开始的指导/建议。

基本上我想做的是：

我有一些预定义的UI组件（一些dijits），可以放入页面画布。页面可以预先布局为两列或三列。用户可以选择一个dijit并将其放入页面。他可以移动dijits，通过拖动处理程序来调整它的大小，也可以将它放到页面中的其他位置。

总而言之，我需要开发两件事： 1）UI调色板，用户可以在其中查看所有可用的dijits。然后拖动一个并将其放入页面。 2）页面画布，可以放入dijits。并且用户可以在页面周围移动dijit或调整它们的大小。

我需要一些关于我应该从哪里开始的建议，以及我可以从dojo或一些有用的开源项目中利用哪些功能。

Answer 1

您还可以查看开源Maqetta项目，该项目是用于构建dojo UI的WYSIWYG编辑器。 它可以在这里找到：

http://maqetta.org/

如果您想了解更多有关工作原理的信息，可以使用源代码。

Answer 2

我用图形工作流编辑器做了类似的事情。左侧的状态可以拖放到画布上。用户可以操纵它们等等。

以下是我的建议：

使用商店保存代表表单布局的所有数据。

• 您应该记录将要使用的数据模型。
• 这是您发送回服务器的数据。
• 根据商店中的数据实例化小部件。
• 当用户修改数据时，请更新商店。
• 使用Observable模式在商店中的数据发生更改时收到通知，并更新小部件

http://dojotoolkit.org/reference-guide/1.7/dojo/store.html

利用Dojo的拖放功能。 http://dojotoolkit.org/reference-guide/1.7/dojo/dnd.html

如果可以，我会尽量避免使用dojo / gfx（SVG）。它会增加很多复杂性。 http://dojotoolkit.org/reference-guide/1.7/dojox/gfx.html#dojox-gfx

您可以调查Dojox MVC代码。我没有看过这段代码，所以我没有意见。 http://dojotoolkit.org/reference-guide/1.7/dojox/mvc.html#dojox-mvc