一．Dropthings创建自定义Widget

首先，这个是从Dropthings网站视频翻译过来的，方便一下不太喜欢听英语的同学。另外这个文档是基础入门的，我也刚开始学，Dropthings的中文资料还是不太多的，记录下来一是帮助同样有需要的同学，二是自己顺便留个记录。请[大家]包容。

 

1.  Dropthings的源码可以从 http://code.google.com/p/dropthings/downloads/list下载。如何安装相信大家都可以。按照源码中的Readme.txt操作就可以了。

 

2.  安装好运行，正常的话，是可以看到这个界面的：

 

3.  下面我们一步步来操作，怎么创建并添加自己的Widget到这个Default.aspx页面。

 

首先，需要创建自己的Widget。我们在项目Dropthing/Widgets/ 下，新建 MyWidget目录，然后新建 MyWidget.ascs 用户控件。新建后的目录结构：

 

然后，打开MyWidget.ascx页面编辑，添加一个Html文本框和按钮。这里实现一个基础功能，就是点击按钮，弹出文本框的内容。编辑后的页面如图：

 

切换到Html源页面，如图：

这里代码大家都可以看清楚。Javascript用的jQuery，因为Dropthings外层页面已经引用了jQuery，所以这里直接调用jQuery方法就好了。

 

另外，页面包含了一个 <asp:PanelID=”SettingPanel” >, 这个是每个Widget都要有的，作用就是可以在这里面提供一些控制这个Widget内容的设置功能。当然也可以不用。这里我们写上”This dose notsupport Edit !”来标记这块，等会儿在页面就能看到效果。

 

页面内容好了，下面看视图代码怎么写。每个Widget的视图代码都要继承和实现：System.Web.UI.UserControl,IWidget。因为我们的视图比较简单，所以代码的内容基本都是空的。代码示例：

这里可以看到，为了显示SettingPanel效果，我们 HidSettings 和 ShowSettings 两个方法控制了一下这个panel的显示/隐藏效果。

 

好了。到这里，我们的Widget已经做好了。下面就是怎么添加到我们的页面中，让用户可以引入MyWidget.

首先，打开Asp.net配置，添加一个 admin 的角色

 

打开后，添加 admin 角色，如图：

然后在用户管理中，创建admin用户，设置 admin 角色。这样，我们就可以用 admin 登陆 Dropthings的管理界面，来管理所有的Widget了。

 

这些工作做完了，就可以进入后台Widget管理页面，路径为：

http://localhost:8000/Dropthings/Admin/ManageWidgets.aspx，首先我们要用刚刚的admin用户登陆。登陆进去后的页面内容为：

 

然后点击 Add New，填写好我们自定义的MyWidget：

这里要注意Url项，就是MyWidget.ascx的目录路径。这里为：~/Widgets/MyWidget/MyWidget.ascx。点击Save就好了。

 

下面，来到我们的Dropthings页面前台。

 

看到了我们的 MyWidget。点击一下，就加入了。然后试试效果：

 

试试点击edit :

 

搞定！一个简单的自定义Widget就做好了。

 

 

 

 

 

说明：

文档为个人从网站http://code.google.com/p/dropthings/w/list视频翻译下来。谢谢。

 

2012-6-11