www.fooberry.com

I hate regions in Visual Studio. I don’t like the fact you can hide code from my incremental search and scanning eyes. If it is unimportant to me at the moment, give me a mechanism to jump over it.

#region "collapse me"
    // you’ll never see me if I’m collapsed.
#endregion

I don’t like that I can’t CTRL+I through them nor CTRL+F will skip them unless you tell them otherwise.

While Visual Studio gives your the ability to skip to the method directly via a dropdown.

The dropdown is nice and all, but the members are in alphabetical order, not the order they are in file. Alphabetical may make sense in some cases, but I usually have related members near each other in the source. When I go look for them in the dropdown, why aren’t they the same.

Xcode does things a bit differently. They line up everything with the order of the members in the file. Also, they let you give clues to the IDE to format the dropdown into sections. Brilliant.

Notice the following lines of source and their related markup of the dropdown.

#pragma mark -
#pragma mark Picker DataSource Methods

Pretty awesome huh? The best part is as you move the code around, the markup and members move in the dropdown. A+

In true web forms style, what should be simple is more difficult than it should be, at least in my opinion. Today I needed the following simple UI.

Simple enough right? Pick something from the list or type your own text. The JavaScript to enable and disable the controls wasn’t too bad. It’s pretty un-interesting, so I’ll just skip over it. What I found surprising was the validators were still firing even though the controls were disabled. I wasn’t expecting it, but oh well. Now to turn off the control’s validators.

I found a lot of examples that looked like the following:

var myVal = document.getElementById('somevalidatorid');
ValidatorEnable(myVal, false); 

That’s nice, but I really don’t want to have to know each and every validator id for each control. It would also make the generic enable/disable code really tightly coupled to the controls we’re trying to disable.

Luckily, we can just find all the validators manually. jQuery can help us out, but isn’t really required.

function enableAllValidatorsFor(control,shouldEnable){
    var validators  = $.grep(Page_Validators,
				function(validator,i){
                                	return validator.controltovalidate == control.id;
                                });
    $.each(validators,  function(i,validator) {
                            ValidatorEnable(validator,shouldEnable);
                        });    

    // the validator callout leaves the error
    // class on the control after the validator gets
    // disabled, so we have to clean that up.
    if(!shouldEnable){
        $(control).removeClass("error");
    }
}        

The last little bit of code removes a CSS class that is set via a validator callout. It is tightly coupled with our pages, so you probably won’t need it, or will need a different class name. However, even though it is tightly coupled, it’s couple to all the pages and not the instance of the control it is disabling. We probably could find the validtor callouts used by the validator controls being disabled and remove any of the error classes they apply, but that didn’t seem necessary right now.

Something else interesting is the inconsistency of the jQuery API in this case. In the “grep” and “each” method the order of the arguments is reversed in the callback.

For grep you have:

function grepCallback(item, index){}

..and for each you have:

function eachCallback(index,item){}

Let me preface this with accolades for Hulu. It is an amazing site, with terrific content and amazing usability…except for this one little thing. When I want to subscribe to a new channel, I find a convenient “Subscribe” link on the channel landing page.

What a great show! I want to be sure and get new content in my queue, so I’ll subscribe to it.

Yea, that sounds good. I want full episodes to appear in my queue. Submit!

…uh….yea. I clicked submit. What are you asking me now? Submit again? Do I click cancel to close the dialog? Will that remove the subscription? Maybe I should click the “x”? I don’t know!

Why didn’t it just close the dialog and change the page to something like this?

I’m really surprised that they missed the mark on that one.

I know how to run JavaScript after every postback, but on occasion I want to run some JS after a specific postback (i.e. show a flash message message that says the processing completed successfully). This hasn’t been as simple as I thought it should be. I even posted to StackOverflow to see if there was something I was missing or if it really is this messy. The only answer I’ve received to date suggested the method I already had in mind when posting the question, so I thought I would work out the full example and show you how it looks.

Background: First a little background. I have a UserControl that I use to display a nice status and/or error message on all my pages. It’s in the master page and has some really convenient JavaScript to show it. For all the ajaxy stuff we do it works great. It flashes in and fades out; however, we can’t show it on the partial postback events…yet. We need to run some JS on the client side after the postback is done to either show the error message or success message.

Overview: Basically, we are going to put a hidden field on the page and register an event handler to run after partial postback to see if there is any JavaScript in it, and execute there is. Pretty simple.

I created a user control to hold all the hidden fields and JS to register the postback events. It is going to get reused in a lot of places so it makes sense to make it reusable. It could be made into a server control, but I’ll forgo that for now.

There isn’t much to the user control.

<%@ Control Language="C#"
    AutoEventWireup ="true"
    CodeFile        ="DoAfterPostback.ascx.cs"
    Inherits        ="DoAfterPostback" %>        

<asp:HiddenField ID="DoAfterPostbackJavaScriptHiddenField" runat="server"
    EnableViewState="false" />

It’ll need some code to create a property to access the JavaScript we want to run and register the event handlers.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class DoAfterPostback : System.Web.UI.UserControl
{
    public string DoAfterPostbackJavaScript { get; set; }

    protected void Page_Load(object sender, EventArgs e)
    {
        Page.ClientScript.RegisterStartupScript(
            this.GetType(),
            "DoAfterPostbackJavaScriptEngine",
            @"
                var prm = Sys.WebForms.PageRequestManager.getInstance();
                prm.add_endRequest(function(s, e) {
                    $('[id$=_DoAfterPostbackJavaScriptHiddenField]').each(doPostbackJS);
                }); 

                function doPostbackJS(i){
                    eval(this.value);
                }

            ",true);
    }

    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);
        DoAfterPostbackJavaScriptHiddenField.Value = DoAfterPostbackJavaScript;
    }
}

We probably don’t need jQuery in there, but we’re already using it so I continued to use it here.

Now let’s get to using it. We’ll need a page for that.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register src="DoAfterPostback.ascx" tagname="DoAfterPostback" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        function showMsg(s) {
            alert(s);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <uc1:DoAfterPostback ID="DoAfterPostback1" runat="server" />
                    <asp:TextBox ID="TextBox1" runat="server" />
                    <asp:Button ID="Button1" runat="server"
                        Text    ="Button"
                        OnClick ="ButtonClicked" /><br />
                    <asp:Label ID="Label1" runat="server"
                        Text    ="Label" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

We have a textbox, button and a label inside an UpdatePanel. We also have our user control in there. This will let the hidden field value change on partial postback and the new value to show up in our event handler. In addition, there is a trivial JavaScript function on the page for us to call after the postback:showMsg . Technically we could just throw the alert right in our control, but this more closely mimics how we’re going to do for real.

Finally we need some code on the server side to put some JS in our hidden field.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void ButtonClicked(object sender, EventArgs e)
    {
        var s = TextBox1.Text;
        if (string.IsNullOrEmpty(s)) return;

        Label1.Text = string.Format("The user says {0}.", s);
        DoAfterPostback1.DoAfterPostbackJavaScript = "showMsg('" + s + "');";
    }
}

That should be it. Now we can enter text, hit the button and see both our server side processing take place and the client side JavaScript execute after the postback as completed.

The week is coming to an end, and I have a few more mental notes to make about training in general. For the first two, see the previous post.

3. Bring your own coffee mug and water bottle.  Not only is it nice to have a little bit of home with you on the road (my favorite coffee mug has special meaning to me), but it beats the tiny styrofoam cups they provided at our training. Ignoring the environmental impacts  of using a lot of toxic cups throughout the week, it is a pain to keep getting up to refill my coffee. Also, as one of my odd observations, the more coffee I drink in these cups, the faster it gets cold, so the faster I have to drink it, etc.

4. Get there early on the first day. As programmers, we might not be the most social kids on the playground. What I’ve found is there are either predefined cliques (e.g. coworkers) or defacto cliques (e.g. those sitting immediately next to you. After the first day, you know those people, your machine is setup just the way you like it, so you’re likely to sit there every day that week. Not just you though, everyone will most likely do the same. So if you arrive late, or even on time as I did, the first day, you’ll most likely be stuck in the back. You might not be able to read the text in the presentations or see over the heads and monitors of those in front of you.

5. Export your settings and tools to the web. This is a great trick for more than even training. I was lucky enough that my post before coming here was about my new IDE colors and I included my settings file. I was able to bring it down and now my IDE here looks exactly like the one at home. If I would have exported a few more settings, all the keystrokes would be the same as well. Beyond just the settings, any tools you might use can come in handy. This also helps if you leave your company, or get a new PC or log in somewhere else. Having those things in a central place is nice. I’ve even seen people store their settings files on Google Code so they can keep a history of them, or just for a central storage location.

6. Bring a storage device. Some of the labs, PDF’s etc are nice to have. They usually give you this as a download, but being able to take what you’ve worked on in class, back to the hotel room is pretty handy.

I should probably get started on the morning lab. Hopefully this weekend, or next week I can provide a quick review of my class.

This is going to be short. This week, my company has sent me half way across the country (everything is half way across the country when you are in the mid-west) to SharePoint MOSS Development training in Tampa, Florida. I’ve been wanting to compile a day-by-day review of the course, in the spirit of Ferverent Coder’s review of the Nothin’ but .Net Developer Boot Camp NBDNDBC (I guess acronyms don’t always work). He has a wonderful review of a training seminar I’ve been wanting to go to for a while now, and his review further solidified my desire to attend. Anyway, I want to do the same thing, but don’t have the energy at the end of the day, and my days aren’t nearly as long as his.

I did want to pass along some travel tips and tricks I’ve learned in the past few days that might make your trip more pleasant than mine.

1. Fly direct. When you have to get from point A to point B, the weather in point C should not be of your concern, unless of course point C is Chicago, Atlanta, Denver, or one of the few other air plane magnets in the country. I didn’t have a choice in booking my travel, which could have been booked direct through Southwest, so instead I had a scheduled itinerary of 10 hours, but after delays because of weather half way across the country, it took 15. Google tells me I could have driven the entire length of the journey in 16 hours and Southwest could have brought me there in two. So lesson one, fly direct…or move to a hub city. Programming lesson: Tight coupling is bad.

2. Bring headphones. When attending a lecture/lab style training session. It would have been nice to have head phones to drown out the chatter of everyone else or question you don’t care to hear answered. Programming lesson: Law of Demeter.

Class is starting, so more later.

I’ve been a long time supporter to dark IDE settings. After recently spending some more time in TextMate, and seeing some presentations given in Visual Studio with a setting that more closely matches my favorite TM theme, and seeing HippoEDIT ships with the same theme, I’ve decided to tweak my current dark theme to be a little close to TM.

Here is what it currently looks like for C# code.

Here is some XML.

Some CSS:

And some HTML.

Something interesting here is that I’ve given different styles to inline HTML elements (e.g. label) vs block HTML elements (e.g. div, p). You can do this by going to Tools | Options | Text Editor | HTML | Format | Tag Specific Options…

The biggest bummer here is for ASP.Net controls you can only style the leading control prefix.

I’m not a closet fan of JetBrain’s products. ReSharper is a dream and I can’t imagine hate coding anything without it. Recently, I’ve been using the RubyMine Beta as JavaScript editor. I’ve really liked it, and it far exceeds Visual Studio with only the fact it doesn’t keep shifting my JavaScript around while it auto indents, un-indents, then re-indents. It does many more things better than Visual Studio, but this was the madding factor that made me search for something new.

The more I use it for JavaScript, the more I find myself editing other file types in RM as well. Most recently, I was working in one of our Stylesheets and found it’s UI for editing colors far exceeded the VS equivalent. Let’s take the following example. Let’s say I want to edit the following CSS class.

.note-type-Glitch-Active{
    background-color:#D3262E;
    color:White;
}

VS will let me right click inside the class, and click “Build Style”. I get a nice dialog window to edit the style.

Nice huh? There are lots of switch to flip and buttons to click. My complaint is you took me from something succinct, and cluttered it with a bunch of options I don’t care about. Do I really need to click a checkbox to make it blink? I clicked on “background-color”, chances are I want to edit that.

OK, I’m being picky, but I really do want to change the background color. So, I click Background, and then swatch color, and then the custom dialog, because how often do you pick from their swatch pallet?

I finally end up here.

What glorious color picker dialog? I swear this thing hasn’t changed since Windows 3.1. It is really pitiful. I’ve complained about this color picker before, but I don’t mind doing it again. I can’t make slider adjustments to the RGB values individually. I can’t adjust saturation via a slider, and go ahead and try to make use of that customer colors palette. It is near impossible. Yuck!.

You can make your change, OK all the way out and you’ve got your new color.

Now let’s look at RubyMine.

Hey! Is that a swatch right there in the editor? That’s pretty nice. Single click it and we get a nice picker.

It still starts out with a swatch palette, but the preview is pretty nice. Also, the recent color palette is much easier to use.. Click over to HSB.

Hue, saturation and luminance adjustments via a slider! Nice! Naturally the RGB gives you exactly what you would expect: RGB adjustments for each component via sliders.

I click once and I’m out of the dialog with the new color.

In my opinion, this is a much more usable color picker. I’m sure I’ll be back with more things RubyMine does better than Visual Studio.

Don’t get me wrong. I love Visual Studio, but there are something other tools do better.

I know I’m wasting my 24” widescreen monitor, but I don’t like the layout of the following markup.

<asp:TextBox runat="server" ID="txtPasswordExisting"
   TextMode="Password" />
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator2"
   CssClass="error" ControlToValidate="txtPasswordExisting"
    Display="Dynamic" Text="Username is required." ValidationGroup="AssociateAccount" />
<cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender7" runat="server" TargetControlID="RequiredFieldValidator2"
    HighlightCssClass ="error" CssClass ="validatorCallout" />

I would prefer this.

<asp:TextBox runat="server" ID="txtPasswordExisting"
    TextMode    ="Password" />
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator2"
    CssClass            ="error"
    ControlToValidate   ="txtPasswordExisting"
    Display             ="Dynamic"
    Text                ="Username is required."
    ValidationGroup     ="AssociateAccount" />
<cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender7" runat="server"
    TargetControlID     ="RequiredFieldValidator2"
    HighlightCssClass   ="error"
    CssClass            ="validatorCallout" />

…OK. It doesn’t display nicely in the syntax highlighter because of the proportional width font, but you get the idea.

I’m sure in most people’s mind it is wasted vertical space, but it makes doing diffs so much easier and my eyes easily see the grouping of controls and their attributes.

The other night, at the most unexpected time, I got a crash course in usability and design. It was about 2 a.m. and I was sound asleep when I heard “BEEP”. I probably didn’t hear that, but I felt the dog shake the bed as she popped her head up from her night’s sleep. I definitely heard the next “BEEP”, followed but another a few moments later. 

There was no fire, thankfully, but the smoke alarm was telling me the battery was low, and if I wasn’t too busy I should think about changing it. I dragged myself out of bed, trying to find the alarm that was complaining. Check the one in our room, and it has a green light. That must be good, right? Next room, green. Next room, green, too. Next room, also green. The hallway, blinking red. This must be it right? Thank goodness, since I can just reach up and grab this one, and the other three are at the top of vaulted ceilings and would mean I would have to drag the ladder up from the garage. In the hallway, however, I can just reach up and take down the detector, and put in a new battery. I did, and the light changed to green and I was back to bed. Not bad. 5 minutes 0f disrupted sleep.

…Beep.

What the hell? I changed it. Now, the alarms all have a green light, so I spend the next 15 minutes standing in each room trying to figure out which room has the low battery, until I finally just shut all the doors and put the pillow over my head.

Where did my logic fail me? The light was red, which surely means something bad, and I made it green, which means something good, right?  What would I have done if I was color blind? What did it mean when that light went from red to green? I never heard a beep while I was fixing it so maybe that alarm was never the problem.

Since reading The Design of Everyday Things, my girlfriend fiance gets annoyed when I point out how poorly designed a door is. This time she just had to listen the poor design described in very colorful language. Luckily, she was half asleep.