deap.nu released!

Please help me build my site at http://www.deap.nu. The personal homepage I started working on before christmas is finally released in its first version. Parts of it is in swedish but the "jQuery showing off" in the form of a silly word game ;-) is in english. Enjoy.

Causing a stackoverflowexception in the webserver(!)

The other day I was working on some coding at work and after adding quite an ordinary property (as follows) the browser went totally berserk, displaying some error message about "service unavailable" (in red, I might add ;-) and a while later the visual studio debugging prompt let me know that there was an stackoverflowexception in aspnet_wp.exe. That kind of behavior obviously sets one off, and after some misleading googling I finally spotted my fatal error, can you see it?:

private string myProperty;
public string _myProperty 
{
    get { return _myProperty; }
    set { myProperty = value; }
}

Well, what I accidentally did, as you can see above in the get block i return the property itself instead of the private member variable, causing an infinite loop... not good.

By the way, I prefer the following namingconvention when it comes to underscores and capitals, but thats not what goes at work. In the following example (with the same error!) I think the error is easier to spot:

private string _myProperty;
public string MyProperty 
{
    get { return MyProperty; } //Still wrong! Should be: return _myProperty;
    set { _myProperty = value; }
}

There are other reasons to the same error behavior, so google it if this isn't yours.

Implementing TinyMCE spellchecker with GoogleSpell in ASP.Net

A colleague and I spent a few hours this afternoon trying to find a way to implement spellchecking with the TinyMCE WYSIWYG editor. The editor has a spellchecking plugin, but according to the wiki documentation it requires PHP. However, one of the options in the spellchecking plugin is to use the Google Spelling web service and this should of course be possible to call through .net as well. Luckily we stumbled upon the "TinyMCE .Net package" before developing the solution ourselves. It really is strange that there is no comment about this on the TinyMCE Wiki. (I believe I will make one. ;-)

These are the steps you need to take to activate spellchecking in TinyMCE within a .Net website application: (this instruction assumes you have already implemented TinyMCE in your website)

1. Download the TinyMCE .Net Package.
2. In that download you will find a .dll-file - Moxiecode.TinyMCE.dll - add a reference to it from your website project.
3. Add the following tag in the HttpHandlers section in web.config:

   <add verb="GET,HEAD,POST" path="TinyMCE.ashx" type="Moxiecode.TinyMCE.Web.HttpHandler,Moxiecode.TinyMCE" />

4. Go to your javascript initialization code of your tinyMCE and add the bold parts of this snippet:

   tinyMCE.init({
       theme : "advanced",
       mode : "textareas",
       plugins : "spellchecker",
       theme_advanced_buttons3_add : "spellchecker",
       spellchecker_languages : "English=en,+Swedish=sv",
       spellchecker_rpc_url : "TinyMCE.ashx?module=SpellChecker"
   });

   Note that if you already are using the plugins setting, you only have to add "spellchecker" to the comma separated list, the same goes for your button configuring. If you omit the spellchecker_langugages you will get support for English, Danish, Dutch, Finnish, French, German, Italian, Polish, Portuguese, Spanish and Swedish out of the box, with english set as default. If you want to omit some languages use the format above for the languages you wish to support, and add a + in front of the one you want as default. The text before the = character is your custom label for the language and the text after is the ISO code for the language. Don't forget the spellchecker_rpc_url setting that will connect the spellchecking button with the Moxiecode.TinyMCE.dll which handles the call to the google spell service. For a sample of how the spell function looks, se this sample and click the sixth button in the last row (this sample might not use the google service, so the word suggestions etc might be different, but it will give you the look and feel of the spelling function).

I've had some trouble finding good documentation of the Google Spell Service and it seems as if it is no longer updated but still available to developers already using it (which should include the TinyMCE .Net package even though you haven't used it before). However, use at your own risk should Google decide to delete it. This is the only official documentation I can find and that isn't much...

Take control over your wizard

The following is common requirements when building a wizard:

• The first step should show some info before the wizard is actually starting thus the second step should not show a back button.
• The final step, after which saving/etc should occur should actually be the second last step so that the last step can show confirmation/thank you etc.

However, this is not the default behavior of the Wizard control in Asp.NET. The following aspx markup shows the desired behavior through it's content comments, but not through the code;

<asp:Wizard ID="Wizard1" runat="server" DisplaySideBar="false">
    <WizardSteps>
        <asp:WizardStep runat="server" title="Step 1">
            Welcome Step, information before wizard actually is started.
        </asp:WizardStep>
        <asp:WizardStep runat="server" title="Step 2">
            Start step, no going back button here.
        </asp:WizardStep>
        <!-- any number of steps here -->
        <asp:WizardStep runat="server" title="Step 3">
            Finish Step, finish button here so FinishButtonClick event 
            can be handled when going forward from here.
        </asp:WizardStep>
        <asp:WizardStep runat="server" title="Step 4">
            Thank You Step, no going back button here.
        </asp:WizardStep>
    </WizardSteps>
</asp:Wizard>

(Note: I almost always set DisplaySideBar to false, so that the user is forced to navigate the wizard in a linear way.)

The four steps now looks like this;

Step 1:

Step 2:

Step 3:

Step 4:

As you can see we need to manipulate the second, second last and last step to get the navigating buttons correct, and all we need to do is the following changes (bold);

<asp:Wizard ID="Wizard1" runat="server" DisplaySideBar="false"
    StartNextButtonText="Start">
    <WizardSteps>
        <asp:WizardStep runat="server" title="Step 1" AllowReturn="false">
            Welcome Step, information before wizard actually is started.
        </asp:WizardStep>
        <asp:WizardStep runat="server" title="Step 2">
            Start step, no going back button here.
        </asp:WizardStep>
        <!-- any number of steps here --> 
        <asp:WizardStep runat="server" title="Step 3" StepType="Finish">
            Finish Step, finish button here so FinishButtonClick event 
            can be handled when going forward from here.
        </asp:WizardStep>
        <asp:WizardStep runat="server" title="Step 4" StepType="Complete">
            Thank You Step, no going back button here.
        </asp:WizardStep>
    </WizardSteps>
</asp:Wizard>

And the steps now looks like this;

Step 1:

Step 2:

Step 3:

Step 4:

In the first step the forward button is still available, however the text of it is changed through the StartNextButtonText property of the Wizard control. Also the AllowReturn property of the first WizardStep is set to false, which causes the second step not to display a back button. For Step 3 the StepType is set to Finish, causing the rendering of a Finish button instead of a Next button, which should hint the user that after that there is no going back. In the final step StepType is set to Complete causing the wizard to not render any buttons at all.

Note that you can insert as many steps as you want between Step 2 and 3, and the user will be able to navigate back and forth between them. Also note that any saving or result calculations that should occur when the user finishes can be handled in the FinishButtonClick event of the Wizard control, and the final Complete step could be used to display the data given/results etc.