Archive for February, 2007

Welcome to the “Pushing the envelope” category

Posted on February 23, 2007. Filed under: Pushing the envelope |

Ever wanted to do something really weired with Sitefinity? In this category we’ll post about not-so-common scenarios and solutions.

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.

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

Welcome to the “Sitefinity & rad Controls” category

Posted on February 23, 2007. Filed under: Sitefinity & rad Controls |

As you may already know, Sitefinity comes with award-winning rad Control suit. If, by some chance, you are unfamiliar with rad Controls you can get a pretty good idea here.

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.

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

Using your own Master Page and providing blog-like calendar navigation

Posted on February 22, 2007. Filed under: Looking good! |

This blog post will explain the basic procedure of creating your own Master Page for Sitefinity and, just to make it a bit less dull, we’ll make navigation in a blog-like calendar fashion. Personally, I don’t think this is a perfect way for providing navigation (heck, I don’t think it’s even good, let alone perfect), but every blog has it… so we’ll make one too :).

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

Blog-like calendar navigation

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.

Calendar custom templates

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.

Links list

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.

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

Welcome to the “Looking good!” category

Posted on February 22, 2007. Filed under: Looking good! |

…really, really, ridiculuosly good looking”Having a “really, really, ridiculuosly good looking” web site is important. In this category we’ll be posting tips, advice and tutorials how to make your site look good. In our quest to wow your visitors, we’ll be taking advantage of award-winning rad Controls suit which comes as a part of Sitefinity, but we’ll also show you how to make use of some of free JS libraries out there, such as YUI! and script.aculo.us.

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.

Read Full Post | Make a Comment ( None 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 )

Working on a live UserControl

Posted on February 20, 2007. Filed under: Gotchas |

In case you’ve wondered how to modify already uploaded user control without constantly uploading it through Sitefinity pages, it’s handy to know that Sitefinity creates a “UserControl” folder inside of the website’s root folder and stores there all uploaded user controls . Once you upload your control, you can open the user control file (.ascx) directly from that folder and make any adjustments there. That way, you’ll be working on, so to say, live user control.

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 )

Welcome to the “Concepts & Theory” category

Posted on February 18, 2007. Filed under: Concepts & Theory |

While developing Sitefinity, we are trying as much as possible, to avoid reinventing the wheel. Therefore, we strive to take advantage of best practices guidlines and when possible extend, not write from the scratch, already existing Asp.NET features.

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 🙂

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

Tip #1 : Finding child pages based upon a parent page

Posted on February 18, 2007. Filed under: Tip of the week |

 

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

Finding child pages based upon a parent page

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

Page properties

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 )

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

« Previous Entries

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