Dropthings 创建一个客户端的Widget。
也就是说不会是传统的.net数据的传输和绑定等。Omar设计时使用的使用ajax来调用web service来实现的。整个架构比较复杂。有兴趣可以去研究下。
首先是创建一个widget,2.5版本中创建widget的方法可以参考我这篇文章:
http://www.n-pei.com/dropthings/droptings-2.5.5%E4%B8%AD%E5%A6%82%E4%BD%95%E6%96%B0%E5%A2%9E%E4%B8%80%E4%B8%AAwidget
当创建好一个widget时,接着需要写一个javascript文件来调用webservice。
如下图:
我要在这个widget中通过使用google的图形报表包来展示数据。如果你需要创建一个dashboard,使用google的chart和dropthings来实现很不错的。
先来看看web control中的代码:
两个panel控件,后面那个panel完全就是空的,我们一会使用javascript通过id来给它绑定数据。
后台cs代码主要是注意regist script这部分:
通过上面的代码,当我们添加此widget到页面时,就把此widget调用web service的js文件也load到客户端。
需要注意的是:1。为每个function加上Host.ID后缀是为了避免同一个页面相同widget时javascript函数混乱。而clientID传过去就是为了让我们在客户端自动的找到这个控件的ID。
接下来我们需要写javascript文件了。
具体的drawChart代码我就不贴了,直接是使用google给的方法。这里的data是从服务器端拿过来的数据。而GetChart就是拿数据的Web Service:
下面的图说明了在哪里创建这个web service的方法:
运行结果:
点击edit后:
可以选择你需要的形状:
下面再来个LienChart:
最后是google报表的接口:
http://code.google.com/apis/visualization/documentation/gallery.html