SusuCMS开发创建Widget
SusuCMS的Widget开发非常简单。或许其他CMS那种复杂而且艰难的开发模式已经让你感到疲惫和恐惧，
但是用SusuCMS你不需要创建一个新项目，只需要一个目录几个文件就可以搞定。
这里我们举CMS中已经有的RichText这个widget来说明。RichText可以帮助用户在页面添加一些富文本。
在项目的根目录Widgets我们可以看到一个RichText的文件夹，放在根目录Widgets下的的Widget都是属于系统级的Widget的，可以被所有的站点使用。
站点模版下也可以放置Widget供使用这个站点模版的站点使用。
一、Widget后台。
RichText目录下的Admin.cshtml可以使用户可以在后台添加富文本。效果如下图所示。
好了，打开一个Dialog这些代码我们不需要写，我们只需要Admin.cshtml再插入一些简单的代码就好了。
@inherits SusuCMS.Web.WidgetAdminPageBase
<tr>
<th>
@Html.Label( " Content " , Localize( " Content " ))
</th>
<td>
@TelerikHelper.Editor( " Content " , i => { i.HtmlAttributes( new { style = " height:420px " }); })
<script type= " text/javascript " >
function getData() {
return { Content: $( ' #Content ' ).data( ' tEditor ' ).value() };
}
function setData(data) {
if (data != null ) {
$( ' #Content ' ).data( ' tEditor ' ).value(data.Content);
}
}
</script>
</td>
</tr>
Admin.cshtml必须继承于SusuCMS.Web.WidgetAdminPageBase这个类。
1. 多语言
我们只需要调用Localize("Content")就可以了，Content的中文翻译我们存储在当前Widget目录下的Resources/Admin.zh-CN.resx文件里面，文件名和目录名我们都约定好了。
2. 初始化数据
初始化数据有2中方式，一种是用js来初始化，另一种就是服务器端代码。
用js来初始化数据，我们必须在代码里面实现setData 这个方法。data就是我们已经存储好的对象。
用服务器端代码初始化数据。Model就是Widget类型。GetData方法返回一个dynamic对象。
@{
var data = Model.GetData();
if (data != null )
{
ViewBag.Content = data.Content;
}
}
3. 保存数据。
保存数据只有一种方式，那就是实现js的getData方法。
关于Widget.Config的说明
<? xml version="1.0" ?>
< WidgetInfo >
< DisplayName > Rich text </ DisplayName >
< Description > A widget allow you to place html code. </ Description >
< AdminWindowHeight > 540 </ AdminWindowHeight >
< AdminWindowWidth > 1080 </ AdminWindowWidth >
</ WidgetInfo >
DisplayName是指Widget在后台添加的时候显示的类型文本。
Description是Widget描述信息，暂时没有用。
AdminWindowWidth和 AdminWindowHeight用来设置后台Dialog弹出窗口的大小。
二 、前台显示。
前台显示由Widget.cshtml来处理。这个文件必须继承与SusuCMS.Web.WidgetPageBase。
@inherits SusuCMS.Web.WidgetPageBase
@{
FrontHtml.ClientScript.jQuery( true );
var data = CurrentWidget.GetData();
if (data != null )
{
@Html.Raw(data.Content)
}
}
1. 获取数据。
后台设置的数据可以通过CurrentWidget.GetData()来获取，也是dynamic类型。如果是其他数据，如文章我们可以用其他方式获取数据。
如下代码所示。所以获取数据还是非常自由和随意的。
@{
var dataContext = BlogWorkContext.GetDataContext();
var list = dataContext.Articles.WithSiteId(CurrentSite.Id);
}
2. 引入js文件。
如果改widget需要jQuery支持，则只需调用FrontHtml.ClientScript.jQuery(true);就可以了。
如果需要注册js文件的话。我们也可以调用
FrontHtml.ClientScript.RegisterScript( " ~/Scripts/codeMirror/codemirror.js " );
页面解析的时候会将js统一在压缩，不会有重复的js引用。
3. Label的使用。
在Widget中我们可以使用WidgetLabel来实现文本在后台可修改。当然PageLabel和SiteLabel在此也是可以用的。
<h2>@WidgetLabel( " JavaScript minify " )</h2>
4. 表单提交与验证。
详细请看 http://susucms.svn.sourceforge.net/viewvc/susucms/SusuCMS.Web/Widgets/Blog.Contact/Widget.cshtml?revision=343&view=markup
分类: Web开发
标签: SusuCMS , Widget
源码在 http://sourceforge.net/projects/susucms 上，可以直接通过svn checkout，保证源码是最新的。
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于SusuCMS开发创建Widget的详细内容...