Wiring the View up to the backend

In this tutorial we wire up the View to the database Repository, provide a Driver for the View, and tell Orchard where to position the gallery settings by providing a Placement.info file. We'll also need a few styles to make the interface look nice.

In the previous tutorial we created the Model and implemented the database. Now we can start wiring up the frontend administrator view to the backend database.

Orchard displays module settings using a very spread-out style where every label, edit control and hint is on a separate line. I find this ugly and difficult to read. So with the Gallery I've implemented a more compact interface, where the label and edit control are on the same line.

Wiring up the Repository

First we need to provide a connection to the repository. This is done as an event handler. Create a new folder for Handlers, and create a new class called CascadeGalleryHandler:

The class contains just a constructor that hooks up the repository like so:

using Cascade.Gallery.Models;
using Orchard.ContentManagement.Handlers;
using Orchard.Data;
 
namespace Cascade.Gallery.Handlers
{
    public class PixelGalleryHandler : ContentHandler
    {
        public PixelGalleryHandler(IRepository<CascadeGalleryRecord> repository)
        {
            Filters.Add(StorageFilter.For(repository));
        }
    }
}

Wiring up the Driver

Now we need to show the administrator view when the administrator selects it on the backend. For this we need a Driver, which is like a mini MVC Controller. Create a folder called Drivers and then create a class called CascadeGalleryDriver:

The CascadeGalleryDriver class should look like this:

using System.Web;
using Cascade.Gallery.Models;
using Cascade.Gallery.Services;
using Orchard.ContentManagement;
using Orchard.ContentManagement.Drivers;
 
namespace Cascade.Gallery.Drivers
{
    public class CascadeGalleryDriver : ContentPartDriver<CascadeGalleryPart>
    {
        // GET
        protected override DriverResult Editor(CascadeGalleryPart part, dynamic shapeHelper)
        {
            return ContentShape("Parts_CascadeGallery_Edit", () => shapeHelper.EditorTemplate(TemplateName: "Parts/CascadeGallery", Model: part, Prefix: Prefix));
        }
 
        // POST
        protected override DriverResult Editor(CascadeGalleryPart part, IUpdateModel updater, dynamic shapeHelper)
        {
            updater.TryUpdateModel<CascadeGalleryPart>(part, Prefix, null, null);
            return Editor(part, shapeHelper);
        }
 
    }
}

The driver overrides two methods that handle the get event associated with the CascadeGalleryPart, and the post event initiated by the submit. Later, we'll extend this class to display the gallery to the public viewer as well.

Setting the Placement

Finally, we need to provide a bit of magic glue to tell Orchard where to display the CascadeGalleryPart details. If we don't do this then the template will be ignored and nothing will display. Create a new file called Placement.info and add the following content:

<Placement>
  <Place Parts_CascadeGallery_Edit="Content:3"/>
</Placement>

This tells Orchard to display the CascadeGalleryPart in the middle of other content in the edit template. I found the value of 3 gave me a sensible layout by experimentation.

Styles

You'll need some styles if you want the output to look like mine. Styles for Orchard Modules are kept in the Styles folder. Create a new style sheet called CascadeGallery.css in the Styles folder and implement it like so:

/*
 * Cascade Gallery Admin 
 */
.sameLine
{
    margin: 20px 0px 0px 0px;
}
.sameLine label
{
    display: inline;
}
.narrow input, select
{
    width: 60px;
}
.medium input, select
{
    width: 120px;
}
.wide input, select
{
    width: 240px;
}
.field-validation-error
{
    color: #CC3300;
}
 
 
/* 
 * Cascade Gallery display 
 */
ul.cascade-image-list
{
    list-style-type: none;
}
li.cascade-image
{
    display: inline-block;
    margin: 20px;
    line-height: 20px;
}
li.cascade-image img
{
    box-shadow: 2px 2px 10px #555555;
}
.cascade-title
{
    font-size: 12px;
    font-style: italic;
}
.cascade-year
{
    font-size: 12px;
}
.cascade-artist
{
    font-size: 12px;
}

This has the styles for the administrator view as well as the display styles for the gallery, which we'll need shortly.

Testing the Administrator View

Now that we've wired everything up, the Admin side should work. Start up Orchard, log in to the backend and enable the Cascade.Gallery module to test it. Select Widgets from the Admin menu and Add a new widget to (say) the Featured zone on the Homepage. From the list of widgets choose the Cascade Gallery Widget. You should get something similar to the following:

If the widget is not displayed, check that you've enabled the CascadeGallery Module, and that there are no mistakes in the Migrations class. If the Widget is listed but is missing the Cascade Gallery fields then check that you have a Placements.info file in the root of the project (in the Cascade.Gallery folder) and that it's contents are correct.

At this point we have an Administrator View that saves to the database and fetches it back. The next step is to start work on the actual gallery display itself.

<<Part 2, Part 4>>