<< Can't establish a connection to the ASP.NET development server at localhost | Quick Tip: Make Windows Vista Remember Window Size and Position >>

Silverlight Live Comment Preview Control

April 17, 2009 11:38

The complete Silverlight Live Comment Preview series of posts:

Silverlight Live Comment Preview Control

Silverlight Live Comment Preview Control: Some Touch-up and Now on CodePlex

A short time ago I noticed a problem with the AJAX live comment scripting on my other site (it most likely occurred as a result of my latest BlogEngine.NET upgrade). This was preventing people who were leaving blog comments from being able to preview their comments and any formatting they might have applied before hitting "Save". Rather than fix the problem with the scripting, I looked at it instead as a great opportunity to re-implement the functionality as a Silverlight control.

The basic functionality of this control is this: take user input in real-time from an ASP.NET TextBox control and display it in a TextBlock hosted by the Silverlight control. The user has the option of using formatting tags: [b][/b] for bolded text, [q][/q] for quoted text (displayed in a different font than the other text; suitable for displaying blocks of code and such), [i][/i] for italicized text, and [u][/u] for underlined text.

The end result looks something like:

There were a couple of challenges in developing this control. First, how to get the user inputted text from the ASP.NET control to the Silverlight control? Turns out the solution is to build a JavaScript to Silverlight bridge. The second challenge was coming up with the algorithm to parse out the formatting tags as the user enters them. This wasn't a big deal for a single set of tags, but there's some special cases, including handling embedded tags (where the user might want text that is both bolded and italicized, for example), handling "stranded" opening or closing tags, and peculiarities such as when you have something like:

					   1: [u][b]here is some formatted text[/u][/b]
	
View Plain

where the opening and closing tags are entered out of order. I decided to support this scenario to enhance the customer experience. Of course, the parsing itself screams for recursion; that was how I did it.

Full source code is available at the bottom of this post.

The ASP.NET Hosting Page

Of course the control eventually made its way to my web site, but for testing I used the basic ASP.NET page set up when I created my new Silverlight project. That file is called LiveCommentPreviewTestPage.aspx. In it, you'll find the usual Silverlight reference at the top:

   1: <%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %>

View Plain

and the declaration of the Silverlight control itself:

<div style="height:100%;">

   <asp:Silverlight ID="slLivePreview" runat="server" Source="~/ClientBin/ItsCodingTime.LiveCommentPreview.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />

</div>

View Plain

The piece that carries the data from ASP.NET/JavaScript to the Silverlight control is this:

<script type="text/javascript">

 

function UpdateLivePreview ()

{

    var sl = document.getElementById ("slLivePreview")        // get silverlight app

    var str = document.getElementById ("TextBox1").value;    // get current text from textbox

 

    sl.content.JStoSLBridge.UpdateDisplay(str);

}

 

</script>

View Plain

I covered this bridging technique in a previous post, so I'll leave it to the reader to investigate this last aspect further.

Update: Just a note to help you avoid spending half a day wondering why your getElementById function call is not working when you know it should… Because of ASP.NET master page control id mangling, you might want to use:

function UpdateLivePreview()

{

    var sl = document.getElementById('<%=slLivePreview.ClientID%>')       // get silverlight app

    var str = document.getElementById('<%=TextBox1.ClientID%>').value;    // get current text from textbox

  

    sl.content.JStoSLBridge.UpdateDisplay(str);

}

View Plain

The 'ClientId' property will remain unmangled and match the Id you specified when you defined the control.

Page.xaml

The XAML is pretty straightforward:

<UserControl x:Class="ItsCodingTime.LiveCommentPreview.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.RowDefinitions>

            <RowDefinition></RowDefinition>

        </Grid.RowDefinitions>

  

        <Border Background="BlanchedAlmond" CornerRadius="0" BorderBrush="Azure" BorderThickness="1">

            <ScrollViewer x:Name="textScrollView" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto">

                <TextBlock x:Name="uxLivePreview" TextWrapping="Wrap" Grid.Row="0" FontSize="14"></TextBlock>

            </ScrollViewer>

        </Border>

    </Grid>

</UserControl>

View Plain

We have a Grid control that contains a Border, the TextBlock used to display the preview text, and a ScrollViewer so that if the text creeps beyond the view we can scroll down. We wrap text, so horizontal scrolling is not necessary.

Adding a "Run" to the TextBlock control

You add formatted (or unformatted) text to a TextBlock with a Run object. Properties on the Run define the extent of the formatting. For example, here I allocate a new Run object defining the text to display, a font weight of "normal", font style of "normal", and use "Arial" as the font:

var newRun = new Run

{

    Text = textForRun,

    FontWeight = FontWeights.Normal,

    FontStyle = FontStyles.Normal,

    FontFamily = new FontFamily ("Arial")

};

View Plain

You can then add this Run object to the TextBlock like this:

   1: uxLivePreview.Inlines.Add (newRun);

View Plain

where uxLivePreview is my TextBlock and Inlines is an InlineCollection of Run's belonging to that TextBlock control.

Of course, the above is going to add unformatted text to the TextBlock. Actual formatting options that we're concerned with here are FontWeights.Bold for bolding text and FontStyles.Italic for italicizing text. Also, I use two fonts: Arial for normal text and Courier New for quoted text. For underlining, do this:

   1: newRun.TextDecorations = TextDecorations.Underline;

View Plain

These formatting characteristics (all but underline, which is represented as a bool class member) are defined at class-scope as:

private FontWeight _fontWeight = FontWeights.Normal;

private FontStyle _fontStyle = FontStyles.Normal;

private readonly FontFamily _fontFamilyNormal = new FontFamily ("Arial");

private readonly FontFamily _fontFamilyQuote = new FontFamily ("Courier New");

View Plain

This way I use what's there as the defaults for unformatted text. As I'm parsing along, when I come upon an open/close tag, I modify the above members based on the type of tag. This approach comes in handy as I encounter nested tags where you need to apply more than one type of formatting to a block of text. As I encounter each closing tag, I then revert the particular style back to it's "normal" setting and move along.

Page.xaml.cs

The Page.xaml.cs file is where all the real work is done. There are a lot of utility methods in there. I won't spend any time on those since it's pretty obvious what each one does. I would like to spend a little time discussing the more significant methods, however.

UpdateDisplay

[ScriptableMember]

public void UpdateDisplay (string commentText)

{

    // if the text hasn't changed, we're done

    if (commentText == _previousText)

    {

        return;

    }

  

    _previousText = commentText;

  

    uxLivePreview.Inlines.Clear ();    // let's text start with a clean slate

    _textBlockRuns.Clear ();

  

#if DEBUG

    _completeText = commentText;

    Debug.WriteLine ("Complete text to parse [{0}]", _completeText);

#endif

  

    // scan input text for [b][/b], [i][/i], [u][/u], [q][/q] and replace with appropriate formatting

  

    var text = commentText;

    ParseText (ref text);

    if (!string.IsNullOrEmpty (text))

    {

        AddNewRun (text);    // add any remaining text

    }

  

    foreach (var r in _textBlockRuns)

    {

        uxLivePreview.Inlines.Add (r);

    }

  

    return;

}

View Plain

UpdateDisplay is exposed to JavaScript using the ScriptableMember attribute and is initiated from our aspx web page.

The first thing I do (lines 5-8) is examine the incoming text to see if it's changed from the previously saved text (line 10). If it hasn't, we're done. If it has changed, we keep going.

Next, I pave the way for new text content by clearing out the current content of the control as well as the collection I use to store Run objects (lines 12-13).

In debug code, I save and output the incoming text (lines 15-18).

Now, the good stuff. ParseText is where we dissect the incoming text, examine any formatting tags in place, create the formatted Run's, and add them to our Runs collection (_textBlockRuns). ParseText does this in recursive fashion. See below for a further breakdown of ParseText.

Last, after ParseText has added all of the Run's to _textBlockRuns, we iterate through the collection and add each Run to the TextBlock control (lines 29-32).

ParseText

public void ParseText (ref string text)

{

    if (string.IsNullOrEmpty (text))

    {

        return;

    }

  

    if ((!ContainsOpenTag (text)) && (!ContainsCloseTag (text)))

    {

        // if there's no formatting, then just return the whole string as the only TextBlock Run

        AddNewRun (text);

        text = string.Empty;

        return;

    }

  

    if ((ContainsOpenTag (text)) && (!ContainsCloseTag (text)))

    {

        AddNewRun (text);

        text = string.Empty;

        return;

    }

  

    int closeTagPosition;

  

    if ((!ContainsOpenTag (text)) && (ContainsCloseTag (text)))

    {

        closeTagPosition = FindFirstCloseTagPosition (text);

  

        var ft = GetFirstCloseTagType (text);

  

        if (((ft == FormattingType.Underline) && (_underlinePass))

            || ((ft == FormattingType.Quote) && (_quotePass))

            || ((ft == FormattingType.Bold) && (_fontWeight != FontWeights.Normal))

            || ((ft == FormattingType.Italics) && (_fontStyle != FontStyles.Normal))

        )

        {

            AddNewRun (text.Substring (0, closeTagPosition));

        }

        else

        {

            AddNewRun (text.Substring (0, closeTagPosition + 4));    // corresponding open tag not being processed, so output closing tag

        }

  

        text = text.Substring (closeTagPosition + 4);

  

        return;

    }

  

    // find any untagged text from the start of the string to the first open tag

    var openTagPosition = FindFirstOpenTagPosition (text);

    if (openTagPosition > 0)

    {

        AddNewRun (text.Substring (0, openTagPosition));

        text = text.Substring (openTagPosition);

    }

  

    openTagPosition = 0;

  

    var openTag = text.Substring (0, 3);    // should be guaranteed to always have an opening tag as the first characters

  

    if (openTag == _openTagCollection[(int) FormattingType.Bold])

    {

        var foundClosingTag = true;    // assume there is a corresponding closing tag for now

  

        closeTagPosition = text.IndexOf (_closeTagCollection[(int) FormattingType.Bold], openTagPosition + 3); // find the corresponding closing tag

  

        // only display with formatting if there is a corresponding closing tag

        if (closeTagPosition != -1)

        {

            _fontWeight = FontWeights.Bold;

        }

  

        if (closeTagPosition == -1)

        {

            foundClosingTag = false;

  

            // use end of string as closing tag location if we can't find one

            closeTagPosition = text.Length;

        }

  

        // look for nested open tag

        if (ContainsOpenTag (text.Substring (openTagPosition + 3, closeTagPosition - openTagPosition - 3)))

        {

            if (foundClosingTag)

            {

                text = text.Substring (openTagPosition + 3);

            }

            else

            {

                // get the position of the nested open tag

                var nestedOpenTagPosition = FindFirstOpenTagPosition (text.Substring (openTagPosition + 3));

                AddNewRun (text.Substring (openTagPosition, nestedOpenTagPosition - openTagPosition + 3));    // add the section up to the nested open tag

                text = text.Substring (nestedOpenTagPosition + 3);

            }

  

            ParseText (ref text);

        }

  

        if ((closeTagPosition = text.IndexOf (_closeTagCollection[(int) FormattingType.Bold], openTagPosition)) != -1)

        {

            text = GenerateAndAddNewRun (text, openTagPosition, closeTagPosition, _openTagCollection[(int) FormattingType.Bold]);

            _fontWeight = FontWeights.Normal;

            ParseText (ref text);

        }

  

        _fontWeight = FontWeights.Normal;

    }

    else if (openTag == _openTagCollection[(int) FormattingType.Italics])

    {

        var foundClosingTag = true;    // assume there is a corresponding closing tag for now

  

        closeTagPosition = text.IndexOf (_closeTagCollection[(int) FormattingType.Italics], openTagPosition + 3); // find the corresponding closing tag

  

        // only display with formatting if there is a corresponding closing tag

        if (closeTagPosition != -1)

        {

            _fontStyle = FontStyles.Italic;

        }

  

        if (closeTagPosition == -1)

        {

            foundClosingTag = false;

  

            // use end of string as closing tag location if we can't find one

            closeTagPosition = text.Length;

        }

  

        // look for nested open tag

        if (ContainsOpenTag (text.Substring (openTagPosition + 3, closeTagPosition - openTagPosition - 3)))

        {

            if (foundClosingTag)

            {

                text = text.Substring (openTagPosition + 3);

            }

            else

            {

                // get the position of the nested open tag

                var nestedOpenTagPosition = FindFirstOpenTagPosition (text.Substring (openTagPosition + 3));

                AddNewRun (text.Substring (openTagPosition, nestedOpenTagPosition - openTagPosition + 3));    // add the section up to the nested open tag

                text = text.Substring (nestedOpenTagPosition + 3);

            }

  

            ParseText (ref text);

        }

  

        if ((closeTagPosition = text.IndexOf (_closeTagCollection[(int) FormattingType.Italics], openTagPosition)) != -1)

        {

            text = GenerateAndAddNewRun (text, openTagPosition, closeTagPosition, _openTagCollection[(int) FormattingType.Italics]);

            _fontStyle = FontStyles.Normal;

            ParseText (ref text);

        }

  

        _fontStyle = FontStyles.Normal;

    }

    else if (openTag == _openTagCollection[(int) FormattingType.Underline])

    {

        var foundClosingTag = true;    // assume there is a corresponding closing tag for now

  

        closeTagPosition = text.IndexOf (_closeTagCollection[(int) FormattingType.Underline], openTagPosition + 3); // find the corresponding closing tag

  

        // only display with formatting if there is a corresponding closing tag

        if (closeTagPosition != -1)

        {

            _underlinePass = true;

        }

  

        if (closeTagPosition == -1)

        {

            foundClosingTag = false;

  

            // use end of string as closing tag location if we can't find one

            closeTagPosition = text.Length;

        }

  

        // look for nested open tag

        if (ContainsOpenTag (text.Substring (openTagPosition + 3, closeTagPosition - openTagPosition - 3)))

        {

            if (foundClosingTag)

            {

                text = text.Substring (openTagPosition + 3);

            }

            else

            {

                // get the position of the nested open tag

                var nestedOpenTagPosition = FindFirstOpenTagPosition (text.Substring (openTagPosition + 3));

                AddNewRun (text.Substring (openTagPosition, nestedOpenTagPosition - openTagPosition + 3));    // add the section up to the nested open tag

                text = text.Substring (nestedOpenTagPosition + 3);

            }

  

            ParseText (ref text);

        }

  

        if ((closeTagPosition = text.IndexOf (_closeTagCollection[(int) FormattingType.Underline], openTagPosition)) != -1)

        {

            text = GenerateAndAddNewRun (text, openTagPosition, closeTagPosition, _openTagCollection[(int) FormattingType.Underline]);

            _underlinePass = false;

            ParseText (ref text);

        }

  

        _underlinePass = false;

    }

    else if (openTag == _openTagCollection[(int) FormattingType.Quote])

    {

        var foundClosingTag = true;    // assume there is a corresponding closing tag for now

  

        closeTagPosition = text.IndexOf (_closeTagCollection[(int) FormattingType.Quote], openTagPosition + 3); // find the corresponding closing tag

  

        // only display with formatting if there is a corresponding closing tag

        if (closeTagPosition != -1)

        {

            _quotePass = true;

        }

  

        if (closeTagPosition == -1)

        {

            foundClosingTag = false;

  

            // use end of string as closing tag location if we can't find one

            closeTagPosition = text.Length;

        }

  

        // look for nested open tag

        if (ContainsOpenTag (text.Substring (openTagPosition + 3, closeTagPosition - openTagPosition - 3)))

        {

            if (foundClosingTag)

            {

                text = text.Substring (openTagPosition + 3);

            }

            else

            {

                // get the position of the nested open tag

                var nestedOpenTagPosition = FindFirstOpenTagPosition (text.Substring (openTagPosition + 3));

                AddNewRun (text.Substring (openTagPosition, nestedOpenTagPosition - openTagPosition + 3));    // add the section up to the nested open tag

                text = text.Substring (nestedOpenTagPosition + 3);

            }

  

            ParseText (ref text);

        }

  

        if ((closeTagPosition = text.IndexOf (_closeTagCollection[(int) FormattingType.Quote], openTagPosition)) != -1)

        {

            text = GenerateAndAddNewRun (text, openTagPosition, closeTagPosition, _openTagCollection[(int) FormattingType.Quote]);

            _quotePass = false;

            ParseText (ref text);

        }

  

        _quotePass = false;

    }

  

    return;

}

View Plain

ParseText is a recursive method that examines input text for open/close formatting tags and add new Run objects to a List collection based on those formatting tags, if any.

The method itself is rather long (about 250 lines), and I won't go through every bit of it. There is a fair amount of repetition in the general manner in which tags are searched for and acted upon. The difference really comes in which tag we're actively working on and what formatting needs to be applied based on that.

So, to break it down just a bit, we do some basic checking right at the beginning: if the string is null or empty (lines 3-6), there's not much we can do. Also, if the text contains no formatting tags, we add the whole thing as unformatted (lines 8-14). Easy, we're done. Another one is if there's only open tags but no closing tags. Last, because we're recursive, we have to consider that we're already working on an open tag, so we look for the case where the text only contains closing tags but no open tags (starting at line 25). From there, we look to see if we are in fact already acting on an open tag and add the text accordingly.

You'll notice that I have two bool's (_underlinePass, _quotePass) and two font attributes (_fontWeight, _fontStyle) that I use as flags to keep track of what formatting I'm currently working on.

Once we're through that, I look for the first open tag position (line 50). If it's not at position 0, then I add up to openTagPosition as an unformatted Run. The rest of the text requires further examination since we are now operating on an open tag.

I get the actual open tag (line 59), then determine which one it is. Let's assume it's a [b] tag and go from there. We enter the section of code begun on line 63 by first finding the first, corresponding close tag that appears after our open tag (line 65). We only display the text as bolded if we find a matching closing tag (lines 68-71). If we didn't find a matching close tag, we do some bookkeeping (lines 73-79). Then it's time to look for nested open tags where a user might want to apply more than one formatting attribute to some text (lines 82-97). Based on what we find, we break out that section of text and make a recursive call back into ParseText to handle just that bit of text. Once we're done with that, we check for a bold closing tag. It's possible to be left with something like "and here we have some bolded text[/b]", where we already acted on everything up to "and…" but just need to finish it up now (lines 99-104). Last, we reset the _fontWeight flag to Normal (line 106). We're done processing that bold run of text.

You'll notice that the recursion works by breaking off a section of text up to a certain point based on whether we find a nested open tag, a closing tag, or something else. It then processes each segment in a sort of serial fashion, using the four flags mentioned above to know what formatting is currently being processed. This seemed to be the most straightforward and intuitive way of processing runs of text from the main user input text.

The other blocks of code to handle each formatting type act pretty much the same. In fact, there's probably some room for simplification there since a good chunk of the code is duplicated, differing only by the type of tag we're acting on. I might come back and revisit at some point, but not now. ;-)

Conclusion

I found this a good lesson in how to effectively communicate information from an ASP.NET page to a Silverlight control while also re-enabling the live comment preview feature of my blog. Feel free to tweak or use as-is the code below.

Download: LiveCommentPreview.zip