Monday, June 8, 2009

How not to use a user control

I am in the middle of a nice refactoring session, changing a setup dialog, which allowed you to edit 4 types of email templates. Since the data was the same I had a user control which was then placed on four different tabs.

We are going to tripple the number of types of emails that are going to be configured. So now my simple dialog of four tabs explodes into 12, and while I do not claim to be a UX expert by any means, and I am not able to design the latest slickest easiest to use interface; I can recognize a bad UI very easily.

I have decided to use a drop downlist paradigm where the user selects from the drop down the template they are going to work with, and then we present them this information.

During my refactoring I stripped out my tabs and added the drop down. I removed all but one instance of my user control. I have everything working except I'd like for drop down to line up better with the contents of the user control.

The html that gets rendered is like this:


    <div>

        Select a Template:

        <select>

            <option></option>

        </select>

        <!--This table comes my user control -->

        <table>

            <tbody>

                <tr>

                    <td>

                        Item 1:

                    </td>

                    <td>

                        <input>

                    </td>

                </tr>

            </tbody>

        </table>

    </div>




The problem is the select template doesn't line up with the rest of the labels. This lead me to the ahhahh moment that lead to this post. I do not recommend doing this in production code. I think it makes the code very unreadable.

Nothing says that the user control must render a valid html fragment. Using that to my advantage I modified the code so my aspx page looks like:


        <table>

            <tr>

                <td>

                    Select A Template:

                </td>

                <td>

                    <asp:DropDownList runat="server" ID="DropDownList1" AutoPostBack="true">

 

                    </asp:DropDownList>

                </td>

            </tr>

            <croixUser:emailConfig runat="server"  />




This is basically my entire, I never close the table in the page, I do that in the user control. While we shouldn't be able to do this it makes sense that Microsoft hasn't wasted any energy in blocking this. If you want to shoot your own foot off with convoluted code go ahead.

Now I must be off to refactor that user control to dev\null

1 comment:

John said...

The program was very very good, and easy to use. And now it has a option to disable startup with Windows.nice post for user guide.Thanks.
r4 revolution per ds