在Orchard CMS Theme 用代码定义布局Widgets

    因为公司业务需要，经过本人几个月尝试，使用Orchard CMS 开发一个简单的企业门户(地址是http://www.ubof.cn)。在刚开始接触Orchard CMS，对于个性化的网页布局不知道怎么定义，通过google的帮助终于找到比较符合Orchard的二次开发方法的解决方案，就是在Theme定义布局Widgets Layout。需要注意的是，因为要在Theme写C#代码，所以要用Orchard 命令提示创建Theme的解决方案(命令:codegen theme <theme-name> /CreateProject:true）。

     当Theme的解决方案方案建立好后我们就可以开始定义自己的Widgets Layout，在这里我以自己网站上首页的一个产品展示Widgets为例子说明（此为新开发没有同步到发布站点），最后实现好的效果如下：

       

    下面开始介绍代码的编写，第一步需要在刚建好的Theme的解决方案里，新建名称为Providers的文件夹，第二步在建好Providers文件里新建ProductsListLayoutForms的类，它必须实现Orchard里的 IFormProvider 接口，这个类主要作用是为Widgets 中HTML DOM的Id，class 提供配置表单，为以后修改class和id提供方便，具体代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Orchard.DisplayManagement;
using Orchard.Forms.Services;
using Orchard.Localization;

namespace UBOfficeTheme.Providers.Layouts
{
    public class ProductsListLayoutForms : IFormProvider
    {
        protected dynamic Shape { get; set; }
        public Localizer T { get; set; }

        public ProductsListLayoutForms(IShapeFactory shapeFactory)
        {
            Shape = shapeFactory;
            T = NullLocalizer.Instance;
        }

        public void Describe(DescribeContext context)
        {
            Func<IShapeFactory, object> form =
            shape =>
            {
                var f = Shape.Form(
                        Id: "ProductsListLayout",
                         _HtmlProperties: Shape.Fieldset(
                           Title: T("Html properties"),
                              _ListId: Shape.TextBox(
                                    Id: "culture-id",
                                    Name: "CultureId",
                                    Title: T("culture id"),
                                    Description: T("The id to provide on the culture div element."),
                                    Classes: new[] { "textMedium", "tokenized" }
                               ),
                               _ListClass: Shape.TextBox(
                                    Id: "culture-classes",
                                    Name: "CultureClasses",
                                    Title: T("culture classes"),
                                    Description: T("The class to provide on the culture div element."),
                                    Classes: new[] { "textMedium", "tokenized" }
                               ),
                               _CultureTitle: Shape.TextBox(
                                    Id: "culturetitle-classes",
                                    Name: "CultureTitleClasses",
                                    Title: T("culture title classes"),
                                    Description: T("The class to provide on the culturetitle div element."),
                                    Classes: new[] { "textMedium", "tokenized" }
                               ),
                               _ProductsId:Shape.TextBox(
                                    Id: "products-id",
                                    Name: "ProductsId",
                                    Title: T("products id"),
                                    Description: T("The id to provide on the products div element."),
                                    Classes: new[] { "textMedium", "tokenized" }
                               ),
                               _ProductsClass:Shape.TextBox(
                                    Id: "products-classes",
                                    Name: "ProductsClasses",
                                    Title: T("products classes"),
                                    Description: T("The class to provide on the products div element."),
                                    Classes: new[] { "textMedium", "tokenized" }
                               )
                         )
                    );

                return f;
            };
            context.Form("ProductsListLayout", form);
        }
    }
}

 第三步需要新建一个ProductsListLayout的类，此类必须实现Orchard里ILayoutProvider接口，此类的作用有两点，第一：为Projections（后面章节有说明）选择布局供时提供布名称和说明，第二：调用构造具体布局的实现，并提供class 和 id传参，具体代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Orchard.ContentManagement;
using Orchard.DisplayManagement;
using Orchard.Localization;
using Orchard.Projections.Descriptors.Layout;
using Orchard.Projections.Models;
using Orchard.Projections.Services;

namespace UBOfficeTheme.Providers.Layouts
{
    public class ProductsListLayout : ILayoutProvider
    {
        private readonly IContentManager _contentManager;
        protected dynamic Shape { get; set; }
        public Localizer T { get; set; }

        public ProductsListLayout(IShapeFactory shapeFactory, IContentManager contentManager)
        {
            _contentManager = contentManager;
            Shape = shapeFactory;
            T = NullLocalizer.Instance;
        }

        public void Describe(DescribeLayoutContext describe)
        {
            describe.For("Html", T("Html"), T("Html Layouts"))
             .Element("ProductsList", T("ProductsList"), T("Organizes content items in a ProductsList."),
                     DisplayLayout,
                     RenderLayout,
                     "ProductsListLayout"
                    );
        }

        public dynamic RenderLayout(LayoutContext context, IEnumerable<LayoutComponentResult> layoutComponentResults)
        {
            string cultureId = context.State.CultureId;
            string cultureClasses = context.State.CultureClasses;
            string culturetitleClasses = context.State.CultureTitleClasses;
            string productsId = context.State.ProductsId;
            string productsClasses = context.State.ProductsClasses;

            IEnumerable<dynamic> shapes =
                               context.LayoutRecord.Display == (int)LayoutRecord.Displays.Content
                               ? layoutComponentResults.Select(x => _contentManager.BuildDisplay(x.ContentItem, context.LayoutRecord.DisplayType))
                               : layoutComponentResults.Select(x => x.Properties);

            return Shape.ProductsList(
                     Id: cultureId,
                     Items: shapes,
                     pcultureClasses: new[] { cultureClasses },
                     pculturetitleClasses: new[] { culturetitleClasses },
                     productsClasses: new[] { productsClasses },
                     productsId : productsId
                );
        }

        public Func<LayoutContext, LocalizedString> DisplayLayout { get; set; }
    }
}

 第四步新建一个LayoutShapes 此类必须实现Orchard里IDependency接口，此类的作用为本Theme解决方案里的所有自定义布局提供具体实现，定义布局方法是有三点需要注意，第一：在方法前必须要加上 [Shape]的属性，第二点：方法名称必须和ProductsListLayout类中的RenderLayout方法返回语句中Shape调用名称相同。第三点：定义的方法参数除去dynamic Display, TextWriter Output, HtmlHelper Html由Orchard本身框架提供，其余一部由ProductsListLayout类中的RenderLayout方法返回语句中的Shape调用方法传递，一部是自己定义给class使用的字典集合。具体代码如下：

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Mvc;
using Orchard;
using Orchard.Autoroute.Models;
using Orchard.ContentManagement;
using Orchard.DisplayManagement;
using Orchard.Localization;
using Orchard.UB.Portal.Models;
using Orchard.UI.Resources;

namespace UBOfficeTheme.Providers.Layouts
{
    public class LayoutShapes : IDependency
    {
        private readonly IWorkContextAccessor _workContextAccessor;
        private readonly IContentManager _contentManager;
        private readonly IOrchardServices _orchardServices;

        public Localizer T { get; set; }

        public LayoutShapes(IOrchardServices orchardServices,
            IWorkContextAccessor workContextAccessor, IContentManager contentManager)
        {
            _workContextAccessor = workContextAccessor;
            T = NullLocalizer.Instance;
            _contentManager = contentManager;
            _orchardServices = orchardServices;
        }


        [Shape]
        public void ProductsList(dynamic Display, TextWriter Output, HtmlHelper Html, string Id,
            IEnumerable<dynamic> Items, 
            IEnumerable<string> pcultureClasses,
            IDictionary<string, string> pcultureAttr,
            IEnumerable<string> pculturetitleClasses,
            IDictionary<string, string> pculturetitleAttr,
            IEnumerable<string> productsClasses,
            IDictionary<string, string> productsAttr,
            string productsId)
        {
            if (Items == null) return;

            var items = Items.ToList();
            var itemsCount = items.Count;
            if (itemsCount < 1) return;

            string baseUrl = _workContextAccessor.GetContext().CurrentSite.BaseUrl;
            var cultureDivTag = GetTagBuilder("div", Id, pcultureClasses, pcultureAttr);
            var cultureDivTitleTag = GetTagBuilder("div", string.Empty, pculturetitleClasses, pculturetitleAttr);

            var proddetailDivTag = GetTagBuilder("div", productsId, productsClasses, productsAttr);
            var proddetailUlTag = GetTagBuilder("ul", productsId, productsClasses, productsAttr);

            Output.Write(cultureDivTag.ToString(TagRenderMode.StartTag));
            Output.Write(cultureDivTitleTag.ToString(TagRenderMode.StartTag));
            Output.Write("<h6 class='fl'><strong></strong>新品推荐<span>NEW PRODUCTS</span></h6>");
            Output.Write(string.Format("<a href='{0}/{1}' class='fr'></a>", baseUrl, "executivedesk"));
            Output.Write(cultureDivTitleTag.ToString(TagRenderMode.EndTag));
            Output.Write("<div>");
            Output.Write(proddetailDivTag.ToString(TagRenderMode.StartTag));
            Output.Write("<a href="javascript:void(0)" id="prev" ></a>");
            Output.Write("<div>");
               Output.Write(proddetailUlTag.ToString(TagRenderMode.StartTag));
               for (int i = 0; i < items.Count; i++)
               {
                   var pictureField = ((Orchard.ContentManagement.ContentItem)items[i].ContentItem).Parts.SelectMany(p => p.Fields).Where(f => f.Name.Contains("picture")).SingleOrDefault();
                   var imglist = ((Orchard.MediaLibrary.Fields.MediaLibraryPickerField)pictureField).MediaParts.OrderBy(c => c.AlternateText).ToList();
                   foreach (var item in imglist)
                   {
                       Output.Write("<li><a href='{2}/{3}'><img src='{0}' alt='优比家具-{1}'/></a></li>", item.MediaUrl, item.Title, baseUrl,item.Caption);
                   }
               }
               Output.Write(proddetailUlTag.ToString(TagRenderMode.EndTag));
            Output.Write("</div>");
            Output.Write("<a href="javascript:void(0)" id="next" ></a>");

            Output.Write(proddetailDivTag.ToString(TagRenderMode.EndTag));
            Output.Write(cultureDivTag.ToString(TagRenderMode.EndTag));

        }

        static TagBuilder GetTagBuilder(string tagName, string id, IEnumerable<string> classes, IDictionary<string, string> attributes)
        {
            var tagBuilder = new TagBuilder(tagName);
            tagBuilder.MergeAttributes(attributes, false);
            foreach (var cssClass in classes ?? Enumerable.Empty<string>())
                tagBuilder.AddCssClass(cssClass);
            if (!string.IsNullOrWhiteSpace(id))
                tagBuilder.GenerateId(id);
            return tagBuilder;
        }
    }
}

 到这里代码编写全部完成。下一篇介绍配置。