Monday, July 30, 2007

Standards-based layout saved my day!

I can always count on my clients for some last minute urgent changes - I’ve come to expect it - in fact, I even plan for it (similarly to how I tell all my late friends that things start an hour earlier than they actually do.) I had a change come up on Thursday afternoon that needed to be completed for Monday morning if possible. It involved a color scheme update, new menu items and a few additional design elements. My first reaction was “great, this is going to take a few days…” but after opening up the project to take a look at what actually needed to be changed I was pleasantly surprised – it didn’t look like I needed to make any markup changes (with the exception of changing a few words – Fundraising to Fundraise, that kind of stuff).


Four hours later (most of it spent in Photoshop slicing images and testing in various browsers), the update was complete. No HTML changes, just a bunch of new images and about 20 lines of CSS to change, amazing!


One thing that really saved me was having an extra wrappre-DIV around the main content.




This allowed me to easily add the circles that appear in the bottom right corner.



Without the wrapper-DIV I likely would have to either added it to the markup or gotten really creative with the CSS on the mainbody DIV. Not to say that it wouldn’t be possible to do, just that having it there (it wasn’t really necessary for the original design) made my life that much easier.


The final results:

Before:



After:



To top everything off, the homepage comes down in about 3.7kb of HTML markup which means it loads wicked-fast even on my Blackberry. And of course it gracefully renders to down-level clients without CSS support.

Unable to stop or use COM+ component

I just had a really bizzare issue on my home workstation. I was having trouble accessing a COM+ component that has always worked - the error was a standard issue Access Denied. All the permissions looked fine. I thought maybe it was having difficulty accessing a file or registry key so I pulled up Sysinternals ProcessExplorer and ProcessMonitor to take a look under the hood - and then I noticed something odd: The account it was running under was showing as . The only change I had made recently was to hide the account from the Windows login screen (HKLM\Software\Microsoft\Windows NT\Current version\Winlogon\SpecialAccounts\UserList) - sure enough, after I removed this entry it worked as expected.

Thursday, July 26, 2007

Visual Studio 2008 Beta 2 is released

Microsoft has just released Microsoft Visual Studio 2008 Beta 2 (in all flavors - standard, pro, team suite, and TFS). It can be downloaded here: http://msdn2.microsoft.com/en-us/vstudio/aa700831.aspx

MBC is a Microsoft Certified Partner!

MBC is now a Certified Member of the Microsoft Partner Program as of Tuesday July 3, 2007.

We have achieved our Networking Infrastructure Solutions Competency. By achieving this competency, MBC has proven that we have the ability to craft infrastructure solutions for small to midsize businesses that include Windows Server Solutions based on the Microsoft Windows Server 2003 or Windows 2000 Server operating system, or Microsoft Small Business Server 2000 and Windows Small Business Server 2003. These implementations may include crafting solutions that connect Windows-based servers, PC locations, and the Internet; installing a server farm; or building a Windows Small Business Server stand-alone solution that includes file/print capabilities.

Wednesday, July 25, 2007

A simple way to handle data collection in email submission forms

Frequently I get asked to create a simple web-form that collects a few peices of information and either stores it or sends it to someone as an email - pretty straight forward... Where it gets annoying is when someone asks for a change and you end up messing with a bulk of string concatenation code.

A really simple solution to this problem is to place all of your controls in a panel, and then loop through the panel's controls collection and create a NameValueCollection with all of the questions/answers - which can then easily be stored or emailed off.

The code looks something like:


NameValueCollection answers = new NameValueCollection();

answers.Add("Date", DateTime.Now.ToString());

foreach(Control c in panelName.Controls)
{
switch(c.GetType().Name)
{
case "TextBox":
answers.Add(c.ID, ((TextBox)c).Text.Trim());
break;
case "DropDownList":
answers.Add(c.ID, ((DropDownList)c).SelectedValue);
break;
case "RadioButton":
answers.Add(c.ID, ((RadioButton)c).Checked.ToString());
break;
case "RadioButtonList":
answers.Add(c.ID, ((RadioButtonList)c).SelectedValue);
break;
}
}

FormMailer.SendResponses(answers);

Tuesday, July 24, 2007

New version of Nikhil Kothari's Web Development Helper

If you haven't already used Nikhil Kothari's Web Development Helper IE plug-in for debugging and tracing web applications, it’s an indispensible app to have in your toolbox. It has been further updated to support class browsing of classes registered within MS AJAX.

You can read the related blog entry at http://www.nikhilk.net/Entry.aspx?id=168 or download it directly from http://projects.nikhilk.net/Projects/WebDevHelper.aspx

Friday, July 20, 2007

JavaScript Support in Visual Studio 2008 looks like its shaping up

Two of the features I'm looking forward to the most in Visual Studio 2008/Orcas is JavaScript Intelli-sense and debugging support.

Scott Guthrie has a few posts worth checking out by the most recent shows off some of the debugging features - http://weblogs.asp.net/scottgu/archive/2007/07/19/vs-2008-javascript-debugging.aspx

Thursday, July 19, 2007

Using Web Standards to Simplify Web Control Development

Introduction

I've been an advocate of web standards for some time now and I'm frequently surprised to find new ways to simplify seemingly unrelated tasks. This article discusses how web standards can be used in ASP.NET control development to simplify some development tasks, build lighter weight and accessible controls and increase layout flexibility.


Background

This article assumes that you have a basic understanding and knowledge of Web Standards. If you need a primer there are a ton of references out there – one of my favorite being A List Apart.


Typical Scenario

You've probably built a glorified sign in page before using nested tables and lots of spacer images to control layout (see Traditonal.aspx in source) and a handful of properties to control how it is rendered. It may have even looked something like this:



Your HTML code probably resembled this:


<table>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
<td></td>
<td>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>


Like all good developers, you built a web control to handle its functionality so you could reuse it across sites. I've added a property named LayoutDirection to control swapping the two boxes left and right positions.


When it comes to custom control rendering of such controls, you probably often find yourself with if-else blocks scattered throughout your rendering code.


private void BuildControlTree()
{
Controls.Add(new LiteralControl(@"
<table style=""width: 100%"" cellspacing=""0"" cellpadding=""0"">
<tr> <td style=""width: 45%"">"));

if(LayoutDirection == Direction.Standard)
BuildNewCustomers();
else
BuildExistingCustomers();

Controls.Add(new LiteralControl(@"</td> <td style=""width: 10%""> </td>
<td style=""width: 45%;text-align:right;"">"));

if(LayoutDirection == Direction.Standard)
BuildExistingCustomers();
else
BuildNewCustomers();

Controls.Add(new LiteralControl(@"</td></tr></table>"));
}


This has the following drawbacks:

  • Your code is cluttered with excess HTML


  • Making changes is prone to errors because you often have to cut up the fragments further and matching tags properly in a code view can be difficult


  • Adding properties to control the layout usually results in scattered if-else blocks.


  • Styling options are not very flexible without a property for each option


  • Difficult to navigate and use on mobile devices such as a Blackberry



Using Web Standards

I always like to start with a barebones structure and then apply styling afterwards. The goal is to keep the presentation near identical. All we need here is a DIV for each box and something to designate a title (I choose the H3 tag in this case).


Our final HTML markup should look something like (See Standards.cs and WebStandards_Bare.aspx):


<div>
<div id="signupdiv">
<h3>Sign Up</h3>
<p>New customers <a href="#">click here</a></p>
</div>
<div id="signindiv">
<h3>Sign In</h3>
<p>Existing Customers Sign In Below:</p>
Email: <input type="text" /><br />
Pass: <input type="text" /><br />
<input type="submit" value="Sign In" />
</div>
</div>


The rendered output looks like:



Now all we need to do is apply some styling to get it looking right. For simplicity I assigned each DIV an ID in the web control and referenced it in CSS by ID. In the real world you would probably want to expose properties to control the CSS class assigned to the DIV. Our final CSS looks like:



#signupdiv, #signindiv {
width: 45%;
border: 1px solid #000;
padding: 1px 1px 0 1px;
text-align:center;
height: 175px;
}
#signupdiv
{
float:left;
}

#signindiv
{
float:right;
}

#signupdiv h3, #signindiv h3
{
color: #fff;
background: #444;
text-align:center;
width: 100%;
height: 25px;
font-weight:normal;
}


Remember how in the traditional model I added a property named LayoutDirection to the web control so I could swap the left and right boxes? That's no longer needed thanks to the floating techniques available. Not only did we remove an entire property block from our code, we replaced it with two lines of external CSS code!



Side-By-Side Comparison



We've accomplished identical layouts using both techniques, so how do they stack up next to each other? For simple tasks like this I often like to look at two factors: number of lines of code, size of rendered output. I know that line counting isn't a practical measurement for most projects, but in this case I think it's a good gauge of simplicity.





















































 



Traditional




Standards Based



% Change



Web Control Lines of Code



128




55




-57%




Rendered HTML Page Size





1,899 bytes





1,224 bytes




-35%




Easily viewable on Blackberry handheld




No




Yes




N/A




Easily viewable without style sheet?




No




Yes




N/A





Points of Interest



If you have been paying attention you might point out that I've excluded the size of the external CSS document (which, by the way, is 361 bytes). The reason for this is that because it will be cached by the browser, it only needs to be downloaded once.

Unable to create bookmarks in IE7 - "Unspecified Error"

I just had a somewhat interesting security problem in Vista that I thought I’d share.

The problem was in Internet Explorer when creating a bookmark, I’d receive a message “Unable to create [URL]. Unspecified error”. The problem only occurred in protected mode websites which led me to believe it might have been a permissions issue. Indeed, trying to propagate my local account with full access generated an Access is Denied error, so I replaced ownership on the folder successfully, however the problem was still occurring. A bit of research later and here is what I discovered in a nutshell


- Windows Vista introduces a new concept called “Integrity Level”. Basically, along with every ACL, there is also a “class” – this defines what types of applications can modify a particular file.

- By default, all files allow “Medium” or higher applications to modified them, however Internet Explorer running Protected Mode runs at a “Low” integrity level (basically, IE can only directly write to files with a Low integrity level associated with them, otherwise, the write has to go through the protected mode broker process which runs as a medium level application)

- The icacls command line utility (introduced in W2K2 SP2 and Vista) includes a new switch that allows you to set the integrity level

To resolve the issue, navigate to c:\users\USERNAME and run the following command against the favorites folder:

icacls Favorites /setintegritylevel (OI)(CI)low

The (OI) and (CI) stand for “object inherit” and “container inherit” respectively (propagate permissions basically), and the low is pretty obviously assigning a low integrity level requirement to the file.

[Updated: June 19, 2008 - Step-by-step instructions due to popular demaind]

Step-by-step Instructions

 

  1. Choose Start -> Run
  2. Type "cmd" (without the quotes) and press OK
  3. Navigate to your user folder.  By default, this is c:\users\Username.  In my case:

    cd /d c:\users\steven
  4. Run icacls:

    icacls Favorites /setintegritylevel (OI)(CI)low

 

The sequence should look like this:

icacls