如何使用dojo開發一個簡單的UI設計器？

Question

我想用dojo構建簡單的UI設計器，但需要一些關於我應該從哪裏開始的指導/建議。

基本上就是我想要做的是：

我有一個可以放入一個頁面帆布一些預先定義的UI組件（一些的dijits）。該頁面可以預先佈置爲兩列或三列。用戶可以選擇一個dijit並將其放入頁面。他可以移動dijits，通過拖動處理程序來調整大小，也可以將其放置到頁面中的其他位置。作爲一個總結，我需要開發兩件事： 1）一個UI調色板，用戶可以在其中查看所有可用的dijits。然後將其拖放到頁面中。 2）一個頁面畫布，其中可以插入dijits。用戶可以在頁面上移動dijits或調整它們的大小。

我需要一些建議，我應該從哪裏開始，以及我可以從dojo或一些有用的開源項目中使用哪些函數。

Answer 1

我已經做了一些類似的圖形工作流程編輯器。左側的狀態可以拖放到畫布上。用戶可以操縱他們，等

這裏是我的建議：

使用存儲來保存所有代表的形式佈局的數據。

• 你應該記錄一個將要使用的數據模型。
• 這是您發送回服務器的數據。
• 基於商店中的數據實例化小部件。
• 當用戶修改數據時，更新商店。
• 使用被通知的可觀察圖案時數據的變化在商店，並更新微件

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

利用阻力和道場的拖放功能。 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

Answer 2

你也可以看看開源的Maqetta項目，這是一個所見即所得的編輯器來構建dojo UI。 這是可以在這裏找到：

http://maqetta.org/

的源代碼的情況下，可你想知道更多關於它是如何工作的。