Tabbed blog controls

Tabbed blog controls

January 21, 2010 0 Comments

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

The bellow blog post will guide you how to create a control to display blog authors, blog archive and blog tags in a fashion similar to the one on the Sitefinity Blogs.

 

What we have to do is to create a custom control and a template for this control. This custom control will wrap in the functionality of the existing BloggersList, BlogArchive and TagsList controls. We will use a RadTabStrip control and a RadMultiPage to put each of the first three controls in a different tab. Lets start by creating the template for our control:

<%@ Control Language="C#" %> 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<%@ Register Assembly="Telerik.Blogs" Namespace="Telerik.Blogs.WebControls" TagPrefix="sfWeb" %> 
<%@ Register Assembly="Telerik.Cms.Engine" Namespace="Telerik.Cms.Engine.WebControls.Tags" TagPrefix="sfWeb" %> 
<telerik:RadTabStrip ID="TabStrip1" runat="server" Skin="Vista" SelectedIndex="0" MultiPageID="MultiPage1"
    <Tabs> 
        <telerik:RadTab Text="Bloggers"
        </telerik:RadTab> 
        <telerik:RadTab Text="Archive"
        </telerik:RadTab> 
        <telerik:RadTab Text="Tags"
        </telerik:RadTab> 
    </Tabs> 
</telerik:RadTabStrip> 
<telerik:RadMultiPage ID="MultiPage1" runat="server" SelectedIndex="0"
    <telerik:RadPageView ID="BloggersView" runat="server"
        <sfWeb:BloggersList ID="BloggersList1" 
            runat="server" ProviderName="Blogs">     
            <LayoutTemplate> 
                <h2> 
                    <asp:Literal ID="controlTitle" runat="server"></asp:Literal> 
                </h2> 
                <!-- bulleted list mode --> 
                <asp:BulletedList ID="bulletedList" runat="server"
                </asp:BulletedList> 
                <!-- dropdown list mode --> 
                <p><telerik:OptgroupDropDownList ID="dropDownList" runat="server"
                </telerik:OptgroupDropDownList></p
            </LayoutTemplate>         
        </sfWeb:BloggersList> 
    </telerik:RadPageView> 
    <telerik:RadPageView ID="ArchiveView" runat="server"
        <sfWeb:BlogArchive ID="BlogArchive1" runat="server"
            <LayoutTemplate> 
                <!-- bulleted list mode --> 
                <telerik:RadTreeView ID="archiveTreeView" ShowLineImages="false" runat="server"></telerik:RadTreeView> 
                <!-- dropdown list mode --> 
                <p><telerik:OptgroupDropDownList ID="dropDownList" runat="server"
                </telerik:OptgroupDropDownList></p
            </LayoutTemplate> 
        </sfWeb:BlogArchive> 
    </telerik:RadPageView> 
    <telerik:RadPageView ID="TagsView" runat="server"
        <sfWeb:TagsList ID="BlogTagsList1" runat="server" ProviderName="Blogs"
            <LayoutTemplate> 
                <p> 
                    <asp:Literal ID="lblDisplayAs" runat="server" Text="Display as"></asp:Literal> : 
                    <asp:LinkButton ID="displayCloudLink" runat="server" Text="cloud"></asp:LinkButton> | 
                    <asp:LinkButton ID="displayListLink" runat="server" Text="list"></asp:LinkButton> 
                </p> 
 
                <asp:Repeater ID="tagsRepeaterCloud" runat="server"
                    <HeaderTemplate><ul class="tagCloud"></HeaderTemplate> 
                    <ItemTemplate> 
                        <li><asp:HyperLink ID="tagLink" runat="server" CssClass="tagCloudItem"></asp:HyperLink></li
                    </ItemTemplate> 
                    <FooterTemplate></ul></FooterTemplate> 
                </asp:Repeater> 
 
                <asp:Repeater ID="tagsRepeaterList" runat="server"
                    <HeaderTemplate><ul></HeaderTemplate> 
                    <ItemTemplate> 
                        <li> 
                            <asp:HyperLink ID="tagLink" runat="server"></asp:HyperLink> 
                            (<asp:Label ID="taggedContentCount" runat="server"></asp:Label>
                        </li> 
                    </ItemTemplate> 
                    <FooterTemplate></ul></FooterTemplate> 
                </asp:Repeater> 
            </LayoutTemplate> 
        </sfWeb:TagsList> 
    </telerik:RadPageView> 
</telerik:RadMultiPage> 

 

On the back-end of the control we do not have to do a lot of coding. We only need to expose a few properties so that we can edit our control setting through the UI of the CMS. We will set the LayoutTemplatePath property to point to the template we have just created, and will expose the BloggersList, BlogArchive, and TagsList control as editable properties:
    public class BlogMultiView : SimpleControl 
    { 
        #region Public Properties 
        [WebEditor("Telerik.FileManager.UrlWebEditor, Telerik.FileManager"), Category("Appearance")] 
        public override string LayoutTemplatePath 
        { 
            get 
            { 
                return "~/CustomControls/ControlTemplates/BlogMultiView.ascx"
            } 
            set 
            { 
                base.LayoutTemplatePath = value; 
            } 
        } 
        public BloggersList BloggersList 
        { 
            get 
            { 
                return base.Container.GetControl<BloggersList>("BloggersList1"false, Telerik.Framework.Web.TraverseMethod.BreadthFirst); 
                 
            } 
            set 
            { 
                this.BloggersList = value; 
            } 
        } 
 
        public BlogArchive BlogArchive 
        { 
            get 
            { 
                return base.Container.GetControl<BlogArchive>("BlogArchive1"false, Telerik.Framework.Web.TraverseMethod.BreadthFirst); 
            } 
            set 
            { 
                this.BlogArchive = value; 
            } 
        } 
        public TagsList BlogTagsList 
        { 
            get 
            { 
                return base.Container.GetControl<TagsList>("BlogTagsList1"false, Telerik.Framework.Web.TraverseMethod.BreadthFirst); 
            } 
            set 
            { 
                this.BlogTagsList = value; 
            } 
        } 

 

In order to save your users some time navigating from one control property editor to the other, you can directly expose some of the properties of the controls wrapped in:

        [Category("Blog Tags List")] 
        public string ProviderName 
        { 
            get 
            { 
                return this.BlogTagsList.ProviderName; 
            } 
            set  
            { 
                this.BlogTagsList.ProviderName = value; 
            } 
        } 

 

This will let users directly set the ProviderName property of the TagsList control. See bellow image for reference:

 

In order to add this control to your toolbox just use insert the bellow snippet in your web.config, and all what's left to do will be to stylize it mach your desired look and feel:

   <toolboxControls> 
    <clear /> 
    <add name="Blog Multi View" type="Telerik.Samples.Blogs.WebControls.BlogMultiView, App_Code" section="Custom Controls"/> 
   </toolboxControls> 

 

You can download the complete source code and markup from this link: BlogMultiView


progress-logo

The Progress Team

View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

Comments
Comments are disabled in preview mode.
Topics
 
 
Latest Stories in
Your Inbox
Subscribe
More From Progress
New_Mobile_Dev_Ebook_Progress_Website_Thumbail
The New Mobile Development Landscape
Download Whitepaper
 
IDC Spotlight Sitefinity Thumbnail
Choosing the Right Digital Experience Platform to Improve Business Outcomes
Download Whitepaper
 
TheFastestWayToBuildMobileAppsArtboard-2
The Fastest Way to Build Mobile Apps With Cloud Data
Watch Webinar