Waterford Family Bowl website (www.waterfordfamilybowl.com)

A little while ago, my aunt approached me- she needed a website for her bowling alley. “Sure,” I said. “Let’s go over what you want and we’ll build something that works for you.”  In the back of my mind, I was thinking “awesome! Perfect timing to flex my HTML5 muscles and try jQuery 1.4 in a production environment; will it work?”

The site’s now completed, and in production. Go ahead and check it out at http://www.waterfordfamilybowl.com (still waiting on a little alternate content ). I’m going to, over a series of 4 or 5 posts, go over how the site works- how and why I used PHP, jQuery, HTML 5, jQuery, WordPress, Picasa, Google Analytics and Webmaster tools, and Google Apps; and, how I merged them all to create a dynamic, easy to use and easy to edit website. I used principles from books like “The Design of Everyday Things” and “Don’t Make Me Think”, and I’ll explain how and where these came into play.   The process I took made even IE 6 compatibility a breeze!

Brief overview on how I plan to break it down:

1. Intro to series
2. Design - architecturally and graphically
3. Implementation of WordPress, Picasa, etc.
4. “Contact Us”, finishing touches
5. Google Analytics and Google Webmaster Tools overviews
6. Wrap-up (maybe?)

I wish I could call IE6 dead.

I’ve spent hundreds of man-hours doing CSS fixes for it, and every day, I check Google Analytics to see how close we are to its death… and every day, I’m disappointed.

Technically, it is dead. Most standards say the latest 2 versions (of course, that got really big when IE8 came out, excellent excuse to drop it), and it’s 6 years old by now, well past the average lifespan of any technology. But, the problem is, for all of my idealism and complaints and loss of efficiency, we still have over 30% of our users on the ancient mind-breaker. So, unfortunately, for all of my complaints, for all of my IE6 specific cde and CSS fixes.. it’s not dead. It’s not defined by age, but by users. So until the time comes when IE updates become mandatory, or our users finally move on… it’s still very alive, in my nightmares and in my everyday coding experiences.

More and more often, it becomes obvious to me how important an external API is. What better way is there to share your product, then to let people build on top of your service layer and customize their own interface? If someone doesn’t like the look of your program, or how it feels, they may leave; but a missed opportunity can quickly turn into another user when they find someone else’s implementation of your application. Or, other applications may pull your data into their product, giving you another revenue stream (or just more users), more popularity, your name thrown around more; it’s free advertising and a great testimony to your product that someone liked it so much that they included it in their product.

I recently looked into Flickr‘s API, for integration into a project I was working on, which spawned this thought. It is absolutely fantastic that I can call a URL with some credentials, and bam, I have the file I need. The user doesn’t have to upload (or worse, download from Flickr and reupload) to another photo-sharing application; they can just point out a url, and I can display it. It’s really awesome. Twitter has feeds, that I can pull into my blog; even my blog has an API that will allow other sites to post comments to me without ever loading my site. That’s pretty cool stuff.

For an information-hosting web app, this is one of the best things you can do to increase views and popularity. If you have a good service layer, expose some of it (with the right security, of course), let other people use your app. More users is never a bad thing.

I believe the key point of this is that it must not feel like work. You shouldn’t feel pressured, or dread doing something; you should do it because you want to do it. The great thing about  our profession is that we can get away and do several things, all subject to our whims; if we spent all day in a chair at a desk, and we want to get up, go to a meeting like the Day of .NET (Central Ohio this Saturday!) If you like to read, do that instead; it’s good to keep a bookshelf full of interesting books. Go into some kind of technical cross-training, such as learning a new language. Do design if you’re a devleoper, or develop if you’re a designer. Just do something.

In this way, we can continue to work on our skills, learn new things and keep from being bored. And, at least in my experience, you can bring new skills and solutions to problems you’re already facing at work.

If you haven’t delved into the realm of the .ascx, then let me briefly explain the two big benefits that have been relevant to me recently:

• Totally reusable code
• Emulate master pages; only with this, you can use the Ajax control toolkit to do it

On the first point, the reusable code point, this is the biggest. It’s the entire reason behind user controls. It lets you chunk out code that you use all over, and use it in several places; it’s a fundamental of object oriented development. Let’s do an example.

Say you have a piece of code that goes to the database and retrieves data on a member. That data is then put into a styled gridview, for the administration side of a website. But, you also have an area in a members section where a user can edit their own information (more like a formview); and, on the normal web display, casual users can browse through usernames and user roles in a paged gridview.

Don’t write the same code thrice! (or even twice!) Rather, make a user control to do all the work for you, and place it in each of your pages. This is how I’d do it:

For the sake of this article, I’m assuming you’re using a list of “Member” objects. Use whatever.

-Make a public class-level property in your control called “ReadOnly”, a bool.
-Make a public class-level method in your control called “Intialize”, which takes an IList of Member objects
-If the IList has one object, add a FormView to your control, and databind it. Otherwise, go the Gridview route (doing this all from the codebehind would keep your code cleaner and keep you from having an extra control rendered, although you could do this in the .ascx if you really wanted to; just set one to visible=”false” to the one you’re not using)
-Create all of the appropriate methods for your control for delete, update, insert, etc. and set up your formview or gridview accordingly (of course, only update for our member’s area FormView!)
-If ReadOnly is true, don’t add edit, insert, or delete buttons to your formview/gridview. (Easy enough; could set visible=”false” on the fields, or just not add them at all)

And, then, back on your three main pages, register and use your control.  Set the ReadOnly property (if it’s a bool, you should even get IntelliSense for true/false), and then on Page_Load, call Intialize on the control, passing through the IList of Members that you pulled down.

The reason we’re calling the data on the page, rather than the control, is so that the control can remain “dumb” and doesn’t need to know whether it’s a member, admin, or web display control. The less logic in the control, the better; just spit out the lowest common denominator.

Ok. Now that we’ve hit the reusable control side, let’s hit the fake-an-ajax-master-page part.

As you may or may not know, even if you wrap the ContentTemplate in a MasterPage, it still reloads every page change. This is because the MasterPage gets loaded after the rest of the page, and is treated like a control. So, if you change pages.. it loads the page, and then says afterwards, ‘oh, yeah, that was Ajax. Oh well.’

The cool thing you can do, is make one default page, and inside of that have user controls in place of your pages, something like this:

-Make your default.aspx page
-Create user controls; however, rather than logic in Page_Load of the control, put it all in a public class-level method you call Initialize.You’ll see why soon.
-Put all of your controls into your default.aspx page, with visible=”false”.
-On the onclick of your navigation buttons, run the Initialize on the control, and set it’s visible property to true, and all the others to false.. I might alternately suggest using Command and a single method rather than Onclick and seperate methods for each button, so you can pass through a CommandName, which you can then use in a switch statement and know what button you hit.

Ok. Now that we have our fancy Ajaxy page, you may be wondering: why not just visiblity? Why this Initialize thing?

This is because ASP.NET will fully render the controls, visible or not. Which means that if you have 10 pages, it will load those 10 pages and display one; which is a big performance hit on the server, especially if you’re loading database data into each of those 10. Having to explicitly call Initialize avoids this. It also allows you to pass through a common parameter to each of the controls (say, a title string that displays at the top of each control) .

Controls can certainly do much more than this; but these are the biggies for me. Have any .ascx uses of your own?