Projects

Building a Module for Sitefinity (part 5) : Module structure

Posted on May 16, 2007. Filed under: Building a pluggable module, Projects |

The Contacts pluggable module will be made of two assemblies : Sample.Contacts and Sample.Contacts.Data

The business logic and UI will be implemented in Sample.Contacts module, while the data access we’ll be done through the Sample.Contacts.Data assembly. Take a look at the following diagram to see the big picture :

Contacts module diagram

Sample.Contacts assembly

There are five main parts of this assembly :

  • Web controlsAdmin web controls that will provide a way for authorized users to work with contacts and Public controls that will display the contacts on the pages.
  • Contacts Manager – Web controls will work exclusively with Contacts Manager when manipulating data.
  • Contacts ProviderContacts manager will call the methods inside of a provider class. Since there can be more than one provider (Sql and XML for example) the Contacts Provider is an abstract class that the actual provider classes need to derive from. In addition to this, the Contacts Provider class will be used to retrieve various settings from web.config used by the module (like paths to external templates and such).
  • Both, Contacts Manager and Contacts Provider classes will get the needed settings from web.config by using Configuration classes.
  • Finally, we have Resources where all the messages and labels will be stored in case we decide to localize our module at later stage.

Sample.Contacts.Data assembly

There are four main parts of this assembly :

  • Contact (dbclass) – Nolics class that will define the database object for storing contacts and it’s Contact partial class that we’ll use to add some additional functionality
  • Department (dbclass) – Nolics class that will define the database object for storing departments and it’s Department partial class that we’ll use to add some additional functionality
  • Default Provider – This class derives from Contacts Provider abstract class and will actually implement all the data manipulation methods (such as inserting a new job, deleting a department etc.)
  • Resources – here mostly to hold error and exception messages in case we decide to localize the application at later stage

In the next post I’ll provide the link for the latest version of the project and describe briefly what’s been done. If you have qustions or suggestions, don’t hesitate to leave the comment 🙂

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

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…

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 )

Building a Module for sitefinity (part 2) : The concept

Posted on March 7, 2007. Filed under: Building a pluggable module, Projects |

Module is integrated in Sitefinity modules section as an assembly. This means that in order to create your own module you need to create a new C# project (Class library). The core class in this module you will name any way that you find suitable (for example : ListModule, MyModule…), but the important thing here is that this class needs to inherit Telerik.WebModule class.

In order to appear on the modules page and be usable, module needs to be registered in the web.config file.

The resulting .dll file you will obviously put in the bin folder of your website.

The module itself has two fundamental sides : administrative and public. The administrative side is the one you see in the modules part of Sitefinity, while the public side consists of the controls that users can drag onto the page in order to take advantage of your module. Take a look at the image below to get a better understanding of this distinction.Administrative and Public side of a module

In this post, I will concentrate mostly on the Administrative side of the module. The public part will be dealt with in one of the coming posts. The administrative side of the module furthermore can be divided into two more sections. The Command Panel and Control Panel. To understand this separation better, you can think of the command panel as the “left side” and control panel as the “right side” of the screen. In essence, Command Panel (left side) is there really just to facilitate the Control panel (right panel) with some kind of sub navigation. Take a look at this image to get a clearer picture.

Administrative side of the module

So the idea here is that you use the core class of a module (the one that inherits from a WebModule class) as some kind of container to hold the two other controls you will create : the CommandPanel and ControlPanel controls. What will those two classes do is completely up to you and depends on what your module is supposed to do.

Here you can download a template project to get you up to speed. [Need to create this project and post a link for download]

In the next post we’ll dig deeper into the code and create the two basic controls, namely CommandPanel and ControlPanel controls.

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

Building a Module for sitefinity (part 1)

Posted on March 2, 2007. Filed under: Building a pluggable module, Projects |

What is a Sitefinity Module?

Modules are quite probably the most powerful feature of Sitefinity. They allow you to extend Sitefinity in any way you need it to be extended. Need a image gallery on your site? How about blog aggregation tool? Or maybe product catalog? All this you can do by taking advantage of Sitefinity. Now, to see why is this so cool, think for a moment : You already have everything done except that particular functionality (e.g. blog aggregation tool). You don’t have to worry about the site navigation (already done), you don’t need to create an admin area (already done), you don’t need to worry about approval system (already done) etc.

Asp.NET practices

So, at this point you may think, that’s all nice and dandy… but it’ll take forever to learn how integrate my functionality into Sitefinity. Not so. I’m the best proof of that, since I’ve joined Sitefinity team just few weeks ago and I’m already building a module, heck… I’m blogging on how to do it. Namely, the architecture of modules is following all the best practices of for Asp.NET so most of the things will come natural to you. In addition to that, well tought architecture will simply (and unknowlingly) force you in building easy-to-maintain-and-extend modules. Take my word on this…

Now, to avoid risk of sounding like yet another marketer trying to sell you an idea, I’ll admit that you do need to understand some fundamental ideas of Sitefinity Modules. I had few problems on my own, and therefore I’m writing this series in hope to help you avoid these problems in the beginning.

Conclusion

This series will probably be extensive since I’ll try to cover as much of the process along the way, however at the end I’ll distill it into a “quick start” type of article. In the next blog post I’ll describe the basic concepts and ideas that you need to understand about any module. Then I’ll start to build a sampe module and provide you with some source code. So stay tuned…

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

Project #1 – Image gallery User Control (Part 2)

Posted on February 21, 2007. Filed under: Projects |

NOTE : This post is a part of a series. Read first part if you’ve missed it.

[VB.NET example]

So, after we have uploaded the images, now it’s time to create a user control that will display them. In case you are unfamiliar with using User Controls in Sitefinity consult Developer Manual on that subject. You can also check this post out to see how to work with a “live user control”.

To start with we’ll add four properties to our User Control.

  1. GalleryTitle – string value representing the title of the gallery
  2. RepeatColumns – integer value representing how many columns should gallery have
  3. MaxThumbWidth – integer value representing maximum width of a thumbnail in pixels
  4. GalleryFolder – string value representing the relative path to folder which contains the image files for the gallery (this is how we determine which gallery will be represented)

Next thing we are going to do is to declare a new class MyImage, which will represent a particular image inside of the gallery. This class contains only 5 properties and no methods.

  1. ImageUrl – the full url to the image
  2. ActualWidth – the actual width of an image in pixels
  3. ActualHeight – the actual height of an image in pixels
  4. ThumbWidth – the width of a thumbnail image in pixels
  5. ThumbHeight – the height of a thumbnail image in pixels

Now what’s left is to find all the image files inside of the Gallery Folder, create objects of type MyImage for each of them and bind the DataList control to the Array List containing these MyImage objects. All this will do in Page_Load method. Below is the link for the full source of the User Control code file.

OPEN THE CODE IN NEW WINDOW

Here you can take a look at the User Control source :

OPEN THE CODE IN NEW WINDOW

Let’s examine the User Control source a bit. First we have a label which displays the title of the gallery. Than there is our Data List and in the template you can see that each image we surround with a link that triggers the JavaScript function OpenImage. This JavaScript function opens the rad window, part of award-winning rad controls that come with Sitefinity.

So that’s all there is to it. One more thing should be noted though. The thumbnail resizing is done with HTML width and height attributes, which is obviously not a true resizing. This means that the actual size of file (in kb) is same as for the large image. This is not an optimal solution, but it will do for this example.

If you decide that you want to use actual thumbnails there are three different approaches that you can take :

  1. Manually create thumbnail images with free software such as Picasa and upload them together with the original images. You would need to modify the code a bit to look for thumbnail images as well as for the originals.
  2. Secon option you have is to map image files (.jpg and .gif) to Asp.NET engine and write a http handler that would dynamically resize images.
  3. Third option would be to dynamically create thumbnails and save them in a separate folder. This approach is actually a mix of first two approaches.

The true resizing is actually beyond the scope of this post so I won’t elaborate any more on that, but if you are persistant engouh we just may make a project out of it and write a tutorial on dynamic resizing with Sitefinity 🙂

I hope you’ll find a use of this project.

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

Project #1 – Image gallery User Control (Part 1)

Posted on February 21, 2007. Filed under: Projects |

Note : The images in this project are taken from www.sxc.hu and are ownership of their respective authors. I’ve used animals because the constraints for using actual people are a bit more complex.

For the first project I’ve chose something simple yet very useful: an Image gallery User Control. The scenario is very common. Let’s say you run a web site for a local chamber of commerce. So, here and there members of this chamber go to conventions, trips, throw parties and stuff like that. They shoot tons of pictures while there and they want this pictures to accompine the report from the event.

Image gallery intro

The plan of action

If we think of this on a very abstract level, there are three basic functionalities we need to provide for Image Gallery.

  1. Upload images / manage galaries
  2. Display thumbnails for chosen gallery on the page
  3. Pop up a new window with actual size of an image when user clicks on the thumbnail

Now, the good news is that we’ll take advantage of Sitefinity’s built in features and will have to do on our own just the bullet #2 from the list.

Upload images / manage galleries

You are probably aware of the fact that one of the core modules of Sitefinity is File Manager. Yeah, now it’s pretty obvious… hehe. So open the File Manager in Sitefinity and create one folder where you will hold all the galleries. Let’s be excentric and call it “ImageGalleries”. Inside of this folder you would then create folders that represent particular gallery (like in my example, there is “Animal” gallery and “Flowers” gallery). The last thing you need to do is upload the images inside of the gallery folder (you see files animal1.jpg through animal6.jpg in my screenshot). And that’s it… the “Image and Gallery Managment System” 🙂 is done.

File manager screenshot

In part 2 of this series we are going to create a user control that will display thumbnails on the page provide the pop up functionality which will display the real size image in a new window.

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

Welcome to the “Projects” category

Posted on February 19, 2007. Filed under: Projects |

Learning by an example is probably the oldest method of teaching and since it’s been around for such a long time, it’s surely one of the better methods. In this category we’ll every so often take apart particular project into pieces and describe how it is built in series of posts.

Projects may include simple projects, such as building a particular functionality with User Controls or more complex projects such as decomposing a pluggable module.

The goal of this section is to show you the ropes and later on it is only your imagination that will limit you. That last sentence sounded so pathetic… like if I was writing a self-help book 🙂

The concept of these series will be to start with the basic idea, project outline, features and mock up. Then, we’ll build upon it. We’ll try to provide you with the source code along the way, but perhaps sometimes source code will be available for download at the end of post series.

Make sure to visit this section. This is the fun part!

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

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