Dave Burke : Freelance .NET Web Developer specializing in Online Communities

CSBlogs : Abbreviated post list display with Expanded Panel

I don't like the default full text post list display.  If approaching a blog as a content management system, full-text display is very inefficient.  It's extremely inefficient when displaying search results, as is the CS default.  So I changed my default full-text entry list display to show only the first two lines of the post's opening text and make the full text available as an expanded panel, using CS's ExpandedPanel Control for the job.

This is a compromise in several respects.  First, what I personally prefer is a title-only display like on my site home page.  To me displaying titles is the speediest and most efficient way to display multiple posts.  But it is also nice to provide a sample of the post text, which is why I added the post's first two lines.  Another reason this new UI is a compromise is because I wanted to hide the post introductory text when the panel was expanded.  This proved problematic, since the CS ExpandedPanel (that I'm assuming was built by Andy Smith for CS) doesn't support distinct Collapsed and Expanded controls (via ITemplate) like his MetaBuilder ExpandingPanel control does. 

I initially went with the MetaBuilder panel just so I could hide the introductory text. It worked great when hiding the raw search results in the 0.96 dotText control I implemented pre-CS.  The MB expanded panel also worked great in CS and I was happy...until I tested with Firefox, which spit out a .NET runtime Object Reference error when I tried to expand a post.  All I can observe in comparing MBXP in dotText search with MBXP with the CS EntryList is that both were used in a Repeater control, but the MB panel on the dotText searching control was wired in the OnCreate() and in EntryList, OnItemDataBound().  Wiring to the OnCreate() EntryList control caused reference problems to the WeblogPost data, and to OnItemDataBound() caused reference problems to the e.Item.Findcontrol "ExpandedButton" control.  I would really like to explore this further and hide the intro text (minor UI issues like this drive me nuts), but I knew I had a sure thing with the CS ExpandedPanel so went with it instead. 

The MetaBuilder ExpandingPanel / CS ExpandedPanel implementation aside, I needed to do a few things to make a summary display happen.  One was to extend the HTMLScrubber by adding a MakeIntroSummary method and adding a parameter to the constructors.  I also added a DBVTMarkUp communityserver.config section with empty globalAttributes and html elements because I ended up stripping all HTML.  Better ways of stripping HTML probably, but this was my approach staying in the HTMLScrubber logic.

public static string MakeIntroSummary(string html, bool encodeExceptions,  bool filterScripts)
{
 if(Globals.IsNullorEmpty(html))
  return html;

 HtmlScrubber f = new HtmlScrubber(html,encodeExceptions, filterScripts, true);
 return f.Clean();
}

public HtmlScrubber(string html, bool encodeRuleExceptions, bool removeScripts, bool makeIntroSummary)
{
 string CacheKeyName = makeIntroSummary ? "HtmlScrubberSummary" : "HtmlScrubber";
 string ConfigSectionName = makeIntroSummary ? "CommunityServer/DBVTMarkUp" : "CommunityServer/MarkUp";
 .....
}

Then to the EntryList.cs control class:

if(Body != null)
{
 // DBVT Summary Panel display
 ExpanderPanel PostBodyPanel = e.Item.FindControl("PostBodyPanel") as ExpanderPanel;
 PostBodyPanel.Collapsed = true;
 PostBodyPanel.ControlToToggle = "PostBody";
 PostBodyPanel.CssClass = "Summary";
 string summary = HtmlScrubber.MakeIntroSummary(entry.FormattedBody, false, true);
 try
 {
  summary = summary.Substring(0, 170).Trim() + "...";
 }
 catch
 {
  summary = summary.Substring(0, summary.IndexOf(".")+1) + "..";
 }
 PostBodyPanel.Text = summary;
 Body.Text = entry.FormattedBody;
}

To skin-entrylist.ascx

<cs:ExpanderPanel runat="server" ButtonImage="/Themes/default/images/expand-closed.gif"
 ButtonImageCollapsed="/Themes/default/images/expand-open.gif" TextAlign="Right" ID="PostBodyPanel" />
<div id="PostBody" runat="server">
 <asp:Literal ID="Body" Runat="server" />
</div>

Like I said, I'm not sure if I like this new Post List format or not, but I had to try to economize the UI somehow.  I'll be adding a titles-only display option (for me if no one else) and maybe an optional full-text display as well.  A fella's blog has got to evolve.

Comments (2) | Post RSS RSS comment feed

Posted on 4/11/2005 5:09:00 AM by Dave Burke
Categories: Community Server
Tags: No tags for this post

Related posts

Comments

4/13/2005 10:03:16 PM Permalink

Just wondering, where do you put that first block of code? What file does it go under? Thanks...

audio |

4/13/2005 10:06:29 PM Permalink

Audio, I generate it dynamically using a modification of the CS HTMLScrubber component, stripping all HTML.  So its not stored anywhere.  Thanks for your question!

daveburke |

Comments are closed

This site was built with the Sueetie .NET Open Source Community Framework. Learn more about Sueetie at Sueetie.com.