finally the Sitefinity Developer blog has been moved over to Sitefinity. WordPress has been a really nice platform to kick-start this blog, but as my blog needs more and more flexibility I have decided to move it to Sitefinity. The new address of the blog is :

blogs.sitefinity.com

So please, update your bookmarks as well as RSS subscriptions. I hope you’ll enjoy the new blog.

So here it goes… registring the module with Sitefinty. In case you have not already downloaded the latest download of Contacts Module project, you can do it here. The zip file contains two projects : Sample.Contacts and Sample.Contacts.Data.

You need to add both of those projects to your existing project in Visual Studio in effect creating a solution. If you already have a solution, just add those two projects. Then add both projects as a reference to the WebSite project (Sitefinity website).

Now that you have that project, let’s see what we need to do to register it.

1. You should add the config section for contacts module to your web.config. So find in your web.config <configSections> element, and then inside if <sectionGroup name=”telerik”> element. Paste the underline line inside that element.

<configSections>
<sectionGroup name=“telerik“>
<section name=“contacts“ type=“Sample.Contacts.Configuration.SectionHandler, Sample.Contacts“ requirePermission=“false“/>
</sectionGroup>
</configSections>

Sample.Contacts is the name of the project. SectionHandler is the class inheriting the base class ConfigurationSection and contains the functionality for loading and accessing the contacts section information.

2. Add the contacts section inside of telerik section group.Your contacts section will allow you to set various settings required by Contacts module. So find the <telerik> element and past the underlined text somewhere inside it (be careful <telerik> element must be a immediate parent of <contacts> section here).

<telerik>
<contacts defaultProvider=“Sitefinity“>
<providers>
<clear/>
<add name=“Sitefinity“ securityProviderName=“” type=“Sample.Contacts.Data.DefaultProvider, Sample.Contacts.Data“ connectionStringName=“DefaultConnection“ visible=“true“ />
</providers>
</contacts>
</telerik>

As you can see the first and most rudimentary setting we need to set is the provider for this module. Sample.Contacts.Data is the data project for the Contacts module and DefaultProvider is the class providing an implementation for the provider model.

3. Finally, you have to register the module. The previous two steps were needed by the module, this last step actually registers the module with Sitefinity. Find the <framework> element and then <modules> element inside of it. Paste the underlined line inside of <module> element.

<framework>
<modules>
<add type=“ Sample.Contacts.ContactsModule, Sample.Contacts“/>
</modules>
</framework>

ContactsModule is the class, providing substantial information for your custom module. In my previous posts I’ve referred to this class as the main module class also. That’s the one inheriting WebModule class.

That’s all. Let me know if you need any other assistance.

As you may have noticed I’ve been rather quiet for the past several days. No, this blog is not slowing down and this will not become a practice. On the contrary! I’m in the process of moving the blog from WordPress to Sitefinity which will allow me to demonstrate the examples live on the new blog. I’m also creating a UserControl that will allow you to move any blog with RSS to Sitefinity (and demonstrate at the same time how to work with blogs and rss in Sitefinity!).

Once I move the blog I plan to extend it with different widgets which you will be able to download and use on your own blogs.

So as you can see, there is a lot of goodness coming your way, but I must ask you for a bit more patience.

Thank you all and see you soon on the spanking new Sitefinity blog!

Undoubtedly, it takes a programmer to write about dating and romance, while using diagrams, classes, methods… Furthermore, it is also only a programmer that won’t be considered pervert if writes about dating and titles one of the sections “Basic implementation idea”. So without further ado…

This post will describe how you can use Sitefinity to roll out your own dating site.

Basic idea

As complicated as it may sometimes seem, dating is nothing more than two people meeting each other. So that’s the premise we’ll use for our application as well. Each user that wishes to find a date through our site needs to create his/her own profile. Profile is a collection of arbitrarily important facts about that person (ranging from very important such as who is the person looking for – man or a woman – to trivial facts as preferred drink). For each profile we are going to create an actual web page, so each user can have a unique url.

We’ll create two templates that will be used for creating user pages. One for female users and one for male users.

All profiles will be accessible only to other users with other profiles and they will be able to filter out potential dates on certain criteria.

Short features list

• Each user creates a profile in order to participate in dating site
• Each profile has it’s own page
• To create a profile users need to supply following information :
  • First name ( required )
  • Sex ( required )
  • Sex of a person user is seeking ( required )
  • Birth date ( required )
  • Picture ( required )
  • Number of optional information : height, weight, body type, eye color, hair, smoking, drinking, education, employment status, marital status…
• Users will be able to send private messages to each other. That will be the only way for two users to get in contact, since no email addresses or phone numbers will be displayed.
• Users will be able to browse profiles of other users by filtering the preferences

Basic implementation idea

Similar to the Digg-clone application in this application we don’t need administrative controls, since users are doing all the work. Take a look at the simple diagram showing the components we’ll need to build in order to create dating site.

Let me start by explaining the web controls that we need to create.

• User Profile – this is a key web control of this web application. This control we will implement as a DetailsView control. The view mode will be accessible by all users who have their own Profile. The edit mode will be accessible only by the user that owns the profile. And the insert mode we will use when user is creating the profile for the very first time.
• User Messages – this is the control that will allow users to communicate among each other. To protect each user’s privacy we won’t display email or phone on the user profile and initial contact will be possible only through the User Messages control. This control has two modes : a) post a message and b) read / reply / delete messages. To the owner of a profile this control will appear in b) mode, while to other users it will appear in a) mode.
• All Profiles – this is a control that will display all the profiles in RadGrid control. Profiles can be sorted, filtered by specific criteria (such as age, sex, smoking etc.). By clicking on a particular profile user will be taken to the individual page of that profile.

Two other things we need to create are templates for a man profile and woman profile. In case you are unfamiliar with templates and how to create them you can consult a developer manual (I’ll write a blog post on this topic this week as well). So, when user creates a profile, we’ll create a new page in Sitefinity and assign appropriate template to that page based on the user’s sex.

Creating a data provider

Since we are working with a structured data (we can’t just let users type whatever they feel like, we need a very specific info about them) we need to create a data provider for user profiles. Consider the following diagram to see how are we going to work with data.

UserProfile.dbclass is a Nolics implementation of database table that will hold all information regarding a user profile. As you can see there is also a PageID field in this table. That field holds the id of Sitefinity page where this User profile will be located. But that will also gives us a reference other way around. When user opens a particular page we will simply search all the profiles to find a profile whose PageID matches the id of that page and load that profile in User Profile DetailsView control.

Note that all the pages will be exactly the same (they will look like a template). All the web controls will be added directly to the templates. Based on the page (and it’s id) we will just bind DetailsView (User Profile) and RadGrid (User Messages) to different data.

Since we can dynamically set the template of each page, when we create a page that will hold user’s profile we’ll take into account the sex of user and set the appropriate (man/woman) template for that page.

UserMessages.dbclass is a Nolics implementation of database table that will hold all the messages users exchange. All the fields are pretty obvious, except maybe ParentMessageID. This we’ll use for replies so that we can group messages and replies to be more user friendly.

And the very least thing we have on the diagram is Telerik.CMS namespace. This namespace we will use to create Sitefinity pages when user creates a profile and to set templates.

In case you are not sure how would you create Data Provider (it should be an assembly, .dll file) you can check how is Contacts.Data assembly implemented in following posts (there is also a link to download the project in the second post) :

• Building a Module for Sitefinity (part 5) : Module structure
• Building a module for Sitefinity (part 6) : Anatomy of a web control

Ideas for improving the application

• Implement “hot or not” voting on each profile
• Create an algorithm that will attempt to match “perfect” couples and give suggestions to users
• Provider users with an ability to post video clips on their profiles

List of Sitefinity API members and namespaces you should use to accomplish this task

Namespace : Telerik.CMS

• ICmsPage – interface that defines cms page
• IPage – more abstract page interface implemented by ICmsPage
• IPageBase – interface that descibes any page (not necessarily cms page) in Sitefinity. Implemented by IPage interface
• CmsManager – class with methods for working with pages and templates

Summary

If you are about to create this application you can learn a lot by examining the JobsIntraSite module that comes with Sitefinity. Obviously, you would not care about the ControlPanel and CommandPanel controls of JobsIntraSite module since you don’t need administrative access, but you can see how data provider (Telerik.Samples.Jobs.Data) is implemented there and also learn how to work with Nolics from declarative code which you will use for all of your web controls.

Good luck!

To show you how you can implement those complex property editors, I’ve created a short project called Quotes. The project has two controls :

1. QuoteList – public control that displays all quotes inside of one category of quotes (this control has a complex property Quotes, which can be edited in QuotesSelector control)
2. QuotesSelector – web editor control that let’s user select which category of quotes to display

Take a look at the following screenshots to get the idea of the functionality that’s being described :

Though the project is available for download and it is commented, let me just simply explain the concept.

You create a custom control as you would usually (same principle applies if your custom control is part of module as well) and then you set up a complex property just as any other you would. So my complex property is named Quotes and it’s of type string. The value of this property is the key of the dictionary that holds different categories of Quotes. Since users don’t know which categories of quotes are available I wanted to provide them with a new control that will let them choose among various Quote categories. In order to attach a Web Editor to a property I needed to add an attribute. This is how the property is defined in QuoteList control :

[WebEditor("Sample.Quotes.QuotesSelector, Sample.Quotes")]
public string Quotes
{
get
{
return this.selectedQuotesCategory;
}
set
{
this.selectedQuotesCategory = value;
}
}

As you can see I’ve added WebEditor attribute and set it to QuotesSelector control, the other control in my project.

QuotesSelector control is just another custom control where I can do whatever I please, but with one important property! The overriden Value property of WebUITypeEditor is the value that will be returned to the QuotesList Quote property when user clicks “I’m done” button. So, one central purpose of QuotesSelector control is to set the it’s Value property. How will this been done really doesn’t matter, though should be user-friendly as possible .

The Sample.Quotes project you can download here. (Note : I’ve used the fake data source which is implemented in QuotesDat.cs file)

p.s. when you upload Sample.Quotes.dll control through page editor Both controls will appear. Since you don’t want users to be able to drag QuotesSelector control, go to web config and delete QuotesSelector from toolboxControl section. Optionally set section of QuoteList to “Quotes”.

I’m sorry that I haven’t asked this question earlier, but better late than never…

Would like me to post some samples in VB.NET? So far it was only C#. Please leave a comment if you’d like some VB.NET samples. If you show the interest, I’d gladly provide you with VB.NET samples as well.

Thanks,
Ivan

There are two cornerstone ideas we have when we build any kind of control :

1. Appearance of control is defined through a template. To control it should make no difference how the template is created
2. Working with data is done through a manager class. It should make no difference to control how is data being stored, that’s up to provider.

Take a look at following diagram to get a high overview of how Web controls are built in Sitefinity.

Working with controls

On the left we have Web Control (blue) which represents ControlPanel in this example. This control acts as a wrapper control for the actual controls of ControlPanel. The child controls being (if you forgot how control panel should look like, take a look at this mockup Contacts module > View mode) :

1. Add new contact – when clicked Control panel should switch from list mode to insert mode
2. Contacts grid – Rad Grid that lists all the contacts
3. Contact Editor – this control serves a purpose of adding new contacts or editing existing contacts (if you forgot, this is how this control looks like Contacts module > Insert / edit mode)

In order to allow designer / user experience expert to modify the look and feel of the controls without messing with the code and recompiling we load controls from template. This is where the GenericContainer kicks in. We are always going to instantiate the template inside a class that inherits from GenericContainer. Generic Container class allows us to define controls that are absolutely necessary for ControlPanel to be working (required controls), but also allows us to define the controls that can be there, but are not necessary (optional controls). So if a template creator forgets to add a Button control with the id of “addNewContact” an exception we’ll be thrown saying that template is missing a required “addNewContact” button. By using GenericContainer class we have an easy way to make a contract between a programmer and designer.

Template creator has two options when it comes to creating a template without coding. One is to create an user control and set it’s path in the web.config provider or he can declaratively create template. Note that it is only possible to create declarative template if the ControlPanel is added to the page or user control declaratively as well (it’s obvious that if we add ControlPanel dynamically we can’t create template declaratively).

Third option for creating a template is default template, class that inherits from ITemplate. You should always implement default template because it is possible that Page object will not be accessible at one time or another (Design) and you don’t want the control to crash at that moment.

If all this sounds messy, take a look at the diagram once again, download the project and examine the code, and then reread it again. This whole idea is actually much simpler than it sounds.

Working with data

In order to keep our control as flexible as possible, all the work with data will be done through manager (ContactsManager) in this example. Depending on how you initialize manager (without the provider name it will use ‘DefaultProvider’ or with the actual name of the provider) manager will decide which provider to use to work with data.

This, for example, allows you to move your data from Sql Server to XML without ever modifying the Web controls. All you need to do is create a new Data provider and initialize manager with the name of new provider.

Few last words

I’ve just explained the logic behind creating the controls. Understanding this logic should ease your decisions regarding where to create controls, how to bind controls to data and such. The detailed explanation you can get by examining the project, since I’ve commented all the crucial parts. Once again, if you have any questions, don’t hesitate to ask. Nothing would make me more happier that a request from you to write a blog post on a topic that has not be understood cleary

Next steps

Since we’ve covered most of the topics so far, I won’t be explaining the project step-by-step anymore, but will point out important aspects. So from now on, I’ll be working more on the code and comments… while in posting I’ll let you know what has been added so you can see how to whole thing is rolling out.

YOU CAN DOWNLOAD THE PROJECT HERE

One more thing, once the module is completed I’ll make the entire solution (with Sitefinity Community Edition) available for download.

Sitefinity 3.0 is much more than just a CMS. It’s flexible, modular and open architecture let’s you build on top of Sitefinity virtually any kind of web application. In the first post of this series, I’ll discuss how could one approach building a Digg-clone web application. It’s actually much simpler than you may think. So… here we go.

Basic idea

In it’s most rudimentary form, this application let’s users submit links to web pages and describe the linked story with short description and a title. Other users then, have the option to vote for or against the submitted link / story. When story is first submitted it’s put on one page; we can call it “New stuff”. The very popular stories (stories a lot of users voted for) get on the other page; this page we can call “Popular stuff”. And that’s it… we’ll leave all the bells and whistles out for the moment being.

Short features list

• Users that will submit links, vote for or against the links and comment on stories need to be registered users
• Registered users have an ability to enter the title, short description (500 characters) and link to the story they’d like to submit
• Each submitted story should have a page of it’s own
• New stories are listed on the page “New Stuff”
• Popular stories are listed on the page “Popular stuff”
• Each story has buttons to vote for it or to vote against it. Only registered users can click on those buttons
• One user can vote only once for the story
• Users can comment on submitted stories on the story’s individual page
• Stories appear on the “Popular stuff” page when they reach 50% of the points that average (last 100) popular stories have and they are ordered by the date and time of “becoming popular”. So if last 100 stories have 10 votes on average, this means that when story gets 5 votes it becomes popular.
• At any time there can be only 1000 stories in “New Stuff”. If the page does not make it to be popular in the period when 1000 new stories are submitted it will be deleted.
• Stories with 100 negative votes will be treated as spam and deleted.

Basic implementation idea

Since we don’t need administration for this kind of web application (users are doing all the work), we can implement the application solely by using custom web controls. Here is a simple chart of controls needed for this application.

So as you can see, I’ve divided controls in three categories. First is the “Digg-clone” essential controls. These controls are required to achive the basic functionality of this application. We have :

• Submit story – this is a very basic form that lets user enter title of the story, description of the story and link to it. All we do here is save the story in the database and that’s all.
• Stories – this is a control that lists all the stories. By altering the datasource we can use this control to display stories on “New stuff” page or alternatively on “Popular stuff” page. Alongside each of the stories we’ll display the number of votes story received and buttons “Vote for” and “Vote against”. If vote is cast, we’ll save that to database.
• Single story – when user clicks on the story in the Stories control he’ll be redirected to a page which holds our Single story control. This control displays all the info on the story, the link to the actual story and list of comments user made on this story.
• Comments – very simple control which is basically a form that let’s user leave the comment on the story. Comments are stored in the database after user enters it. Sitefinity actually has CommentsList control which you can use to display list of all comments and as a form for entering a new comment. Take a look at Telerik.Cms.Engine.WebControls.CommentsList class. If you prefer, you can use that control instead of building your own.

Next we have membership controls, which are basically typical ASP.NET 2 controls. We do have to provide a way for users to register, log in and log out.

Finally, we have some optional controls for Digg-clone application. You can create those, but don’t really have to. It’s up to you.

• Top 10 – this control simply shows the top 10 stories that are currently most voted for. We could add a condition that top 10 stories cannot be older than 30 days just to make it more up to date.
• Voting Structure – this control has two modes or perspectives. One is to display all the users that voted for one story, other one is to display all the stories user voted for or against. Though not essential, it’s one of those hype social kind of things.

And here is the point where Sitefinity API kicks in! Take a look at following diagram that will show you that all you really need to do is extend Sitefinity with only one database table and several methods. Everything else is there for your convenience.

Because the submitted stories are nothing more than content we’ll treat them as such and use Telerik.Cms.Engine assembly which handles most of the work for GenericContent, Blogs and News modules. For the extra info (such as link to the original story, number of votes for and against the story) we’ll use powerful MetaData class which allows us to add arbitrary information related to the specific content (for example in News module that’s how we store “Source” information).

What you are left to do is implement the code to handle User Info data and create a Nolics dbclass for holding this info in database. In the User Info table we’ll hold data on which user voted for particular story and how did he vote.

So, in addition to creating web controls you’ll have to add assembly that will handle data. Let’s call that assembly Stories.Data

In this assembly you need classes UserInfo.dbclass and DefaultStoryProvider.cs. First class as I have said is responsible for persisting UserInfo data, while other class should inherit from Telerik.Cms.Engine.Data.Providers.DefaultProvider class. That way you’ll be able to access methods such as CreateContent, SaveContent, GetContent, GetMetaData etc. You would need to add only methods such as CreateUserInfo, UpdateUserInfo and such.

Ideas for improving the application

• Implement voting for or against the comments
• Create story categories
• Add tagging for stories
• Extend application to other medias (photos, videos, podcasts…)

List of Sitefinity API members and namespaces you should use to accomplish this task

Namespace : Telerik.Cms.Engine

• IContent – content interface
• IComment – comment interface
• IMetaData – meta data interface

Namespace : Telerik.Cms.Engine.Data

• Providers.DefaultProvider – use it to work with any content or comment related data
  • CreateContent – creates new content
  • SaveContent – saves new or updated content
  • DeleteContent – deletes content (use this to delete spam)
  • GetContent – various overloads for getting single content, list of content with paging, filtering sorting etc.
  • CreateComment – creates new comment
  • DeleteComment – deletes comment (spam for example)
  • GetComment – gets comments
  • SaveComment – saves new or updated comment
  • …

Namespace : Telerik.Security

• SecurityManager – use it to work with members (register, log in, log out)
  • Though you can use common ASP.NET way of dealing with security, by using SecurityManager you have an option to easily change Membership Provider at later stage. Also, there are several helper methods in this class.

Summary

So, let’s quickly review what we need to do to get our digg-clone application up and running.

1. Create needed web controls for user interface
2. Create Stories.Data project. Add classes UserInfo.dbclass and DefaultStoryProvider.cs which inherits from Telerik.Cms.Engine.Data.Providers.DefaultProvider
3. Register Stories provider (new cmsEngine provider) in web.config (you can take a look at the Blogs provider to see how this is being done)
4. Add metafields for your new Stories provider (you can also take a look at how is this done in case of blogs)
5. Drop the controls you’ve created on pages and voila!

If you have any questions, suggestions or advice regarding this post please leave the comment or drop me an email at iosmak@gmail.com

This, as I have already stated, will be yet another list (I’ve got hooked on lists after reading Nick Hornby’s High Fidelity).

Ten Web 2.0 apps you can build with Sitefinity

This is not a definite list, but I like number ten almost as much as creating lists. I also like popcorn, but that fact may be behind the scope of this post

So, here we go :

1. Digg-clone application
2. Dating site
3. Photos sharing site
4. Team collaboration application
5. Feed aggregator
6. Personal organizer ( TO-DO list + Calendar)
7. Blogging platform
8. Job board
9. Social networking site
10. Wiki

Now, don’t get me wrong. You will have to do some programming, but with Sitefinity you are more than half way done which ever of the listed applications you are about to build.

Every day, for the next ten days I will explain the rudimentary idea of how you could approach building one of the applications. For each application I will provide you with the (hehe… here we go with the lists again) :

• Basic idea
• Short features list
• Basic implementation idea (user controls, modules, web controls…)
• Ideas for improving the application
• List of Sitefinity API methods and namespaces you should use to accomplish the task
• Application diagram

So stay tuned, tomorrow I’ll kick it off with the Digg-clone app.

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 :

Sample.Contacts assembly

There are five main parts of this assembly :

• Web controls – Admin 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 Provider – Contacts 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

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.

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.

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…

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.

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.

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.

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.

ControlPanel ctrlPnl = (ControlPanel)this.NamingContainer.FindControl(this.ControlPanelID);

To some of you this may seem rather obvious, but I had to ask to figure this out. So to all you, mere mortals like me, here is how you do it

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…

How about building a module for importing content from an old site? Or hooking up Sitefinity with a web service… Obviously, I can’t come up with that many strange scenarios in the very first post, because I guess they wouldn’t be that strange than… but I’ll give my best in the time to come.

You are very welcome to express your strange desires (though strictly Sitefinity related ) on the comments in this category and we’ll see what can we come up with.

The posts in this category will show sample scenarios on how to use r.a.d.Controls inside of your website to, as the slogan quite well puts it, “deliver more than expected”.

The seamless integration of r.a.d.Controls with Sitefinity makes it an excellent choice for developing more complex UIs.

Let’s first take a look at the final result :

Step 1 : Creating a Master Page

First thing we need to do is to create a Master page. I won’t get into too many details here, because there are tons of resources on using Master Pages, but I’ll point out some pecularities that you need to take into account when creating a Master Page for Sitefinity. Note : Make sure you put the code in separate file when creating a Master Page. So, let’s take a look at the Master Page file source code first :

OPEN CODE IN NEW WINDOW

The first important thing is that you need to replace the standard form tag with the CmsForm tag. You’ll also need to register the Telerik.Cms.Web namespace. Second thing, that you need to pay attention to, is mandatory div element that wraps everything you plan to put on your master page. This div needs to have it’s class attribute set to “cmsWrapper”.

Everything else is pretty straightforward.

Step 2 : Creating the calendar navigation controls

We’ll put our calendar navigation inside of the left sidebar div. As you can see, all you need to do is create a rad Calendar control and asp:panel control that will hold the links dynamically created based on which date user selected. Few more notes regarding the rad Calendar : make sure you disable multi select property, provide the name of the method that will handle selection changed and turn on autopostback property.

Step 3 : Creating code file for the master page

In this step we need to provide our navigation system with two functionalities. First we need to find all the dates on our current calendar view on which one or more posts have been created and replace the template for this cell with our custom template. Our template will look like a blue colored panel with the day and number of posts that were made on that day. See the image below.

Second thing we need to take care of is the list of posts’ links. This list is dynamically created based on which date user selected. Take a look at the screenshot below to get a better idea.

Now that we know what we want to do, take a look at the code file that will take care of it.

OPEN CODE IN NEW WINDOW

Ahh.. where to start from? From the beginning, I guess.

First class in this file is the partial class for the Master Page. In the Page_Load method first thing we do is to determine the first and last date displayed currently on the calendar. Then we loop through those days and see if any of the pages have been created on any of these dates. In case we find a post that has been created on one of these days we add it to the numberOfPosts variable and keep going.

Then you can see that in case there are actually some posts written on that particular date we create a new instance of the PostsCell class, which is going to replace the standard calendar day cell. The PostsCell class inherits from a Control class and all we do there is add a panel and a label with modified display for the particular date (now it’s not just a date, but date with number of posts).

Back to our Page_Load method. The very last thing we do in this method is to create a new instance of a CalendarCellContentTemplate class and pass it the calendar instance, the date for which we want to create special day and instance of our PostsCell control. If you are unsure about this, you can find out more about it on telerik calendar reference (www.telerik.com) .

So we are only left with the calNavigation_SelectionChanged method. This method, oddly enough, handles the selection changed event of rad Calendar. As you can see from the code, we are doing something similar as in the Page_Load method. We loop through the pages and for all the pages that were created on the currently selected date we add a link to the pnlLinks control.

Pheww… I think that covers it pretty much.

Step 4 : Uploading the Master Page

This is simple. All you need to do is to go to Sitefinity and upload the newly created Master Page. In addition to this you could create new theme to go along with your Master Page, as I had, but that topic is beyond of the scope of this post. We’ll cover themes in one of the upcoming posts in this category.

Now apply the template created from the uploaded Master Page to any pages you wish and your done.

This was quite simple and straightforward, though I doubt that you will ever use it . Nevertheless I think it was a nice excercise.

To kick it off, I’ll start by a simple example of creating your own MasterPage to use as a template and we’ll then go ahead and do some funky stuff with the navigation menu.

Drop a comment if there are some particular topics you’d like us to talk about in this category.

[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.

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.

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.

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.

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!

In this category, we’ll try to point out the subjects you should get acquinted with in order to take full advantage of the Sitefinity. For example, did you know that Sitefinity’s Telerik.Cms.CmsSiteMapProvider class inherits from the System.Web.SiteMapProvider and in similar manner Telerik.Cms.CmsSiteMapNode class inherits from the System.Web.SiteMaNode? So, in one of the posts in this category we’ll cover the sitemap topic, which is really mostly knowledge that you can use in any Asp.NET project (and knowledge that you are probably already familiar with). We’ll explain basic concepts, provide you with further resources and tie all that together with Sitefinity related solutions.

Another example of a concept that you may want to dip your fingers in is DSL (Domain-specific programming language), because the whole data access part of Sitefinity is done with Nolics.net 2005 and its Dbclass language.

So, to wrap it up, we’ll try to provide you here with the list of concepts, products or features that are heavily used in Sitefinity and hopefully spare you that itchy feeling when you think something could be done, but have no clue where to look for it

The scenario

Well, except from the fact that one of the pillars of good parenthood is the ability to tell your own children from all the other kids, there are actually other (more practical and less formal) reasons why you may need to get the reference to all the child pages of any given page made with Sitefinity.

Let’s imagine following scenario. You ran a website for a local car dealership. The dealership strucks a deal with a monthly car fan magazine to be published online on their website. So, you go and create a page for the car magazine. This page then contains pages that each represent a monthly issue. Inside of these monthly issue pages, you then have pages like news, car tests, articles etc.

What you’d like to do is to show on the right side of the magazine front page description and link to all the cover stories from each issue.

Take a look at the screenshot to get an idea what am I talking about (click on the thumbnail to enlarge it).

Implementation

First create the page structure like described in the scenario : Magazine > Issue #1 > News, Articles… Create two issue pages just to see the point of the example.

For each “magazine issue” page set the page title to the cover story title and in description type the brief introduction of the cover story. Take a look at the screenshot to get an idea (click on the thumbnail to enlarge it).

It is important to set these values to reflect the cover story of the issue, since we will use the CmsPage.Title and CmsPage.Description properties to create our User Control with the cover stories.

Create CoverStories.ascx User Control

Once, you are done with that we’ll create a User Control that will display all Cover stories on the right side of magazine front page. The approach we’ll take here is to get the current node of the sitemap (magazine front page) and then loop through all of it immediate children (issue pages), extract page title and page description and create controls with those value. Take a look at the code bellow :

Open code in new window

Now, all that’s left is to upload the user control and add it to our magazine page. Consult the Developer Manual if you are unsure how to add User Control to Sitefinity page.

Hopefully, you’ll find some use of this

It’s hard to explain what are we going to write in this category without sounding trivial, nontheless here is my try

Once a week (I bet you’d never guess that!), we’ll write a short, very focused post on a subject that may not look obvious to developers outside of the Sitefinity team. In addition to that, if you come up with some neat solution for a particular problem, we encourage you to send it to us and if we like it we’ll publish it here and credit you for it (we’ve noticed on our forum some pretty cool input from you guys).

I was going to make the first sentence full of corporate slang niceties, but being a developer as you are, I know that we don’t care all that much about that. So, let’s get to the business.

How do we see this blog?

First of all, we’ll keep it casual . We’ll try to turn it into a idea generator / repository, with you and us taking different angles on Sitefinity and development related challanges. Hopefully, we’ll find many great solutions along the way that will make us all proud (and make you look good in the eyes of your clients, or bosses for that matter).

As a famous American writer and Nobel prize winner, John Steinback, put it : “Ideas are like rabbits. You get a couple and learn how to handle them, and pretty soon you have a dozen.”

What are we going to write about?

We’ve put a lot of effort into making the developers manual and API reference as useful as possible. However, living at the mind-boggling pace of web development enviroment, often it’ll be faster and simpler to post the ideas, examples, good practice solutions and things like that, here, on this blog.

We are fully aware of the fact that we simply must make mistakes and ocassionaly be a bit silly. So, whenever you spot ignorance, mistakes or simply feel the urge to show us a better way, please leave a comment. Your feedback is of a crucial importance to us and Sitefinity as a product.

Wrapping it up

Having all that said, I’d like to welcome you once again and invite you to visit us regulary on this blog. We’ll try to keep it regulary updated, as much as our time allows it.