Archive for April, 2007

Building a Module for sitefinity (part 4) : Creating mock-ups

Posted on April 10, 2007. Filed under: Building a pluggable module, Projects |

In this post we’ll only cover the mock-ups for the admin area of our module. Later on, we’ll get to the mock-ups for the public controls.

Since the contacts module we are building is pretty simple and straightforward, we really need just the mock-ups for two different screens in our admin area. One is the default screen with our contacts in the RadGrid (you could just as well use standard GridView control), while other one is the screen for inserting new or editing already existing contacts.

View Mode

The mode in which contacts are listed in the grid we’ll call View mode. Take a look at the following image to see how it should look like. Click on the thumbnail to enlarge it.
Contacts module > View mode

As you can see on the right side in CommandPanel we have a link that will show all contacts in case we want to cancel the filtering or we want to come back to the default screen.

Just under that we have a RadTreeview that manages different deparments. One can add, delete, edit or reorder those deparments. By clicking on any of the deparments user gets only contacts that belong to that department.

Under that we have the ability to show only contacts that start with a particular letter.

On the right side we have a RadGrid with all the contacts. We can click on the “Add new contact” link to add a new contact. In the grid we can sort contacts, delete contacts or edit them.

Which brings us to our second screen. The one that will be used as an insert/edit screen for a particular contact.

Insert/Edit mode

In this mode we can edit or insert (depending on how we got to this screen) a particular contact. Take a look at the mock-up to see what kind of information we’ll be storing about each contact. Click on the thumbnail to enlarge it.

Contacts module > Insert / edit mode

As you can see here we have some pretty basic contact info about each person inside of an organization. We can save that info or cancel.

And that’s all. In the posts to come we’ll be building the just described functionality, so stay tuned…

Advertisements
Read Full Post | Make a Comment ( None so far )

Building a Module for sitefinity (part 3) : Setting up the project

Posted on April 4, 2007. Filed under: Building a pluggable module, Projects |

WorkingAfter we have explained the basic concepts behind every Sitefinity module the time has come to leave the theory behind us, roll up our sleeves and do some building.

In order to create a module you need to create a new C# project and in it’s most rudimentary version, you need three files inside of this project. The module class, and two web control classes (for command panel and control panel). To ease this process for you, you can download the project to get you started. Regardless of what kind of module you are about to build you will needed these files.

HERE YOU CAN DOWNLOAD THE BAREBONES PROJECT

In addition to this, you’ll need to reference following assemblies in your project :

  • System
  • System.Data
  • System.Drawing
  • System.Web
  • System.Xml
  • Telerik.Framework
  • Telerik.Security
  • Telerik.Cms.Web.UI

To put some kind of perspective, the sample module that will be built during this series of posts is “Contacts” module. This is a very simple module which will allow user to enter all relevant contacts across the organization (for example : CEO, sales, technical support…) with their names, emails, phone numbers, working hours and so on. More about this project you’ll be able to read in the next post. So, now that we know that we are building “Contacts” module we can continue with a little more clarity.

The first file in our project is the ContactsModule class. This is our module class and it has to inherit from Telerik.WebModule class in order to be used as a Sitefinity module. Apart from several properties that describe this module (such as name and description) there are two important methods here : CreateControlPanel and CreateToolBoxControls. The CreateControlPanel method returns any Control that will be used as a ControlPanel control (the one on the rigth side). The CreateToolBoxControls returns an IList<IToolboxItem> object, which in turn contains all controls you want to appear in the command panel (the one on the left side).

As you can imagine, the two other files that you’ll need are ControlPanel class (of type CompositeControl) and CommandPanel class (of type CompositeControl, but this class also needs to implement IControlPanelCommand interface).

This all fits together in the previously mentioned ContactsModule class. Namely, in CreateControlPanel method you create a new instance of ControlPanel class and return it, while in CreateToolBoxControls you create a new instance of CommandPanel class and add it to the IControlPanelCommand array.

And this is all that you really need to get our Contacts module work. In ControlPanel and Command panel class you can overwrite the CreateChildControls method and add just some arbitraly controls (e.g. I’ve added the labels in the attached project) to see what happens.

In the next post I’ll write some brief specs for the Contacts module and attach few mockups just so that we are all on the same page.

Read Full Post | Make a Comment ( None so far )

Liked it here?
Why not try sites on the blogroll...