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，保证源码是最新的。