The Wiert Corner – irregular stream of stuff

Jeroen W. Pluimers on .NET, C#, Delphi, databases, and personal interests

  • My work

  • My badges

  • Twitter Updates

  • My Flickr Stream

    20140508-Delphi-2007--Project-Options--Cannot-Edit-Application-Title-HelpFile-Icon-Theming

    20140430-Fiddler-Filter-Actions-Button-Run-Filterset-now

    20140424-Windows-7-free-disk-space

    More Photos
  • Pages

  • All categories

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,329 other followers

.NET/C#: Generating a WordPress posting categories page – part 2

Posted by Jeroen Pluimers on 2012/08/22

In Generating a WordPress posting categories page – part 1, you learned how to

  1. get the HTML with all the category information from your WordPress.com blog,
  2. convert that to XHTML,
  3. generate an XSD for the XHTML,
  4. generate C# classes from that XSD

This episode, you will learn how the data read from the XHTML can be transformed to a simple tree in HTML suited for a posting categories page like mine.

In the final post, the same data will be transferred into a real category cloud with font sizes indicating the frequency of the category usage.

From there, you can go into other directions (for instance generating squarified treemaps from the data).

That’s the cool thing about data: there are many ways to visualize, and this series was meant – next to some groundwork on how to get the data – as inspiration into some forms of visualization.
Hope you had fun reading it!

Getting a HTML tree from the optionType items

                StringBuilder outputHtml = new StringBuilder();
                string rootUrl = args[1];
                foreach (optionType item in select.option)
                {
                    if (item.Level == optionType.RootLevel)
                        continue;

                    // <a style="font-size: 100.3986332574%; padding: 1px; margin: 1px;" title="XML/XSD (23)" href="http://wiert.me/category/development/xmlxsd/">XML/XSD</a>
                    string url = String.Format("{0}/category{1}", rootUrl, item.HtmlPath);
                    string prefix = new string('.', item.Level * 5);// optionType.NbspEscaped.Repeat(item.Level);
                    outputHtml.AppendFormat("{0}<a title="{2}" href="{1}">{2} ({3})</a>", prefix, url, item.Category, item.Count);
                    outputHtml.AppendLine();
                }

One way of generating an HTML tree, is to prefix every node with a series of dots corresponding with the level of that node. Not the most pretty sight, but it will suffice for this episode.

Inside each node, I want to show the Category and Count.

Since the optionType as generated from the XSD only contains the below properties, a major portion on this posting is how to decode the Value so we can generate HTML like this:

...............<a href='http://wiert.me/category/development/software-development/net/c-' title='C#'>C#&nbsp;(118)</a>
....................<a href='http://wiert.me/category/development/software-development/net/c-/c--2-0' title='C# 2.0'>C# 2.0&nbsp;(46)</a>
....................<a href='http://wiert.me/category/development/software-development/net/c-/c--3-0' title='C# 3.0'>C# 3.0&nbsp;(33)</a>
....................<a href='http://wiert.me/category/development/software-development/net/c-/c--4-0' title='C# 4.0'>C# 4.0&nbsp;(31)</a>
....................<a href='http://wiert.me/category/development/software-development/net/c-/c--5-0' title='C# 5.0'>C# 5.0&nbsp;(2)</a>

Decoding the optionType Value property

optionType only contains the these properties:

  1. class
    • the class used to reference the style in the stylesheet
    • example value: “level-4″
  2. value
    • internal unique WordPress ID for the category (this allows you to alter the Slug and Value without breaking the links between posts and categories
    • example value: “45149061”
  3. Value
    • string that WordPress uses to make the category combobox look like a tree structure
    • example value: “&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;C# 5.0&nbsp;&nbsp;(2)”

The extra properties needed for the HTML generation logic above are these:

  1. Category
    • the Value undone from leading non breaking space character escapes, and the trailing count information
    • example value: C# 5.0
  2. Count
    • the Value undone from leading non breaking space character escapes, Caption information, separator non breaking space character escapes, and surrounding parenthesis
    • example value: 2
  3. Level
    • the class undone from the level- prefix
    • example value: 4
  4. Slug
    • the category slug is the unique value for a category that WordPress uses to form category urls. It is auto-generated from the Category, but you can also edit it. I don’t, as it is not in the combobox HTML, so I derive it from the Category. Note there are also posting slugs used in the permalink of each post.
    • example value: c--5-0 (it consists of lowercase letters and hyphens derived from the Category)
  5. HtmlPath
  6. parent (used internally for making the HtmlPath code much easier

The really cool thing about XSD2Code is that it generated the optionType C# code as a partial class.
Which means we can extend the generated partial classes in a seperate C# file like the code fragments below (you can download it from the WordPressCategoriesDropDown.cs file at BeSharp.CodePlex.com)

    partial class optionType
    {
        public const int RootLevel = -1;

        private const string slash = "/";
        private const char hyphen = '-';
        public const string NbspEscaped = "&nbsp;";
        private const string emptyCountInParenthesis = "(-1)";

        public optionType parent { get; set; }

        public string Category
        {
            get
            {
                string result;
                string countInParenthesis;
                splitValue(out result, out countInParenthesis);
                return result;
            }
        }

        public int Count
        {
            get
            {
                string category;
                string countInParenthesis;
                splitValue(out category, out countInParenthesis);
                string count = countInParenthesis.Substring(1, countInParenthesis.Length - 2);
                int result = int.Parse(count);
                return result;
            }
        }

        public int Level
        {
            get
            {
                if (string.IsNullOrWhiteSpace(@class))
                    return RootLevel;
                string[] split = @class.Split(hyphen);
                string number = split[1];
                int result = int.Parse(number);
                return result;
            }
        }

        /// <summary>
        /// This is the HTML part that WordPress uses to reference a Category
        /// </summary>
        public string Slug
        {
            get
            {
                StringBuilder result = new StringBuilder();
                foreach (char item in Category)
                {
                    if (char.IsLetterOrDigit(item))
                        result.Append(item.ToString().ToLower());
                    else
                        if (result.Length > 0)
                            result.Append(hyphen);
                }
                return result.ToString();
            }
        }

        public string HtmlPath
        {
            get
            {
                if (RootLevel == Level)
                    return string.Empty;

                string result = Slug;
                if (null != parent)
                    result = parent.HtmlPath + slash + result;
                return result;
            }
        }

        private void splitValue(out string category, out string countInParenthesis)
        {
            // might want to do this using RegEx, but that is a write-only language http://wiert.me/category/development/software-development/regex/
            string result = Value;
            int nbspCountToStripFromLeftOfValue = Level * 3; // strip 3 &nbsp; for each Level
            for (int i = 0; i < nbspCountToStripFromLeftOfValue; i++)
            {
                int nbspEscapedLength = NbspEscaped.Length;
                if (result.StartsWith(NbspEscaped))
                    result = result.Substring(nbspEscapedLength, result.Length - nbspEscapedLength);
            }
            string doubleNbspEscaped = NbspEscaped + NbspEscaped;
            if (result.Contains(doubleNbspEscaped))
            {
                string[] separators = new string[] { doubleNbspEscaped };
                string[] split = result.Split(separators, StringSplitOptions.None);
                category = split[0];
                countInParenthesis = split[1];
            }
            else
            {
                category = result;
                countInParenthesis = emptyCountInParenthesis;
            }
        }

        public override string ToString()
        {
            string result = string.Format("Level {0}, Count {1}, Slug {2}, HtmlPath {3}, Category '{4}'", Level, Count, Slug, HtmlPath, Category);
            return result;
        }
    }

The bulk of the above code is in the splitValue method (that could have used RegEx, but I try to avoid RegEx when I can do without it).
Note that the HtmlPath propererty uses the parent property. Without it, the HtmlPath code would have been very complex. The value of the parent properties for all optionType instances is generated in the selectType.FixParents method below since the selectType instance contains all the optionType instances in its’ option property.

    partial class selectType
    {
        public void FixParents()
        {
            Stack<optionType> itemStack = new Stack<optionType>();
            optionType parent = null;
            int previousLevel = optionType.RootLevel;

            foreach (optionType item in option)
            {
                int itemLevel = item.Level;
                if (itemLevel == previousLevel)
                {
                    if (optionType.RootLevel != itemLevel)
                    {
                        itemStack.Pop();
                        item.parent = parent;
                    }
                    itemStack.Push(item);
                }
                else
                {
                    if (itemLevel > previousLevel)
                    {
                        parent = itemStack.Peek();
                    }
                    else
                    {
                        do
                        {
                            itemStack.Pop();
                            parent = itemStack.Peek();
                            previousLevel = parent.Level;
                        }
                        while (previousLevel >= itemLevel);
                    }
                    itemStack.Push(item);
                    item.parent = parent;
                    previousLevel = itemLevel;
                }
            }
        }
    }

–jeroen

3 Responses to “.NET/C#: Generating a WordPress posting categories page – part 2”

  1. Wouldn’t it be much easier to just self-host your WP site and edit a page template to emit the categories? ;>

    After all, that’s what your dropdown list in the right sidebar is doing.

    • jpluimers said

      I wrote this a long while ago. If I re-did it, I’d probably used the WordPress backup file. I didn’t know about it back then, and it should be a lot less hassle.

      I’m not so sure about self-hosting. You get a lot of control, but eeping stuff up-to-date is a royal pain.

  2. [...] Generating a WordPress posting categories page – part 2 « The Wiert Corner – irregular stream o…. Rate this:Share this:LinkedInTwitterFacebookStumbleUponDiggRedditEmailPrintLike this:LikeBe the [...]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 1,329 other followers

%d bloggers like this: