Kyle Kelin on .Net

Code: The Hidden Language of Computer Hardware and Software

2008-12-16T05:00:51Z

What a great title for a book uh? Code is a book that I recently finished that tells you how computers really work. Charles Petzold explains in great detail, technologies that have been buried underneath layers of abstraction for decades. The book starts you off with early logical systems like Braille and Morse code and the builds from there to simple switches and logical gates. Petzold then does a superb job of relating these technologies to microprocessors, memory, and machine code. In addition to the knowledge, Petzold does an excellent job of entertaining you with the history and evolution of the computer. The examples he uses are simple but effective. I can honestly say this was a fun book to read (except for some of the math). Many times while I was reading it I would think why had I not heard of this book years ago.

So I recommend this book to anyone who wants to better understand how computers work. For developers I know with today's modern language you aren't going to be writing machine code. But I strongly feel having a good understanding of computer architecture will allow you to take better advantage of the higher level languages you use on a daily basis. Don't you think?

Speaking on jQuery Tomorrow at Tulsa TechFest

2008-10-08T23:34:44Z

I will be speaking about jQuery tomorrow at Tulsa TechFest. The session starts at 1:00pm. I wrote up some examples that will allow me to write some jQuery code on the fly. Though I'm nervous about writing code in front of people.

Also don't forget the Beer and Code Meetup at Dirty's Tavern after the event!

Manipulating the DOM with jQuery

2008-10-06T02:02:04Z

In previous posts I talked about selecting DOM elements with jQuery. In this post I am going to discuss 5 ways you can manipulate the DOM with jQuery.

Setting the contents of an element
There are many situations where you want to add content dynamically to your page (eg. Error messages, ajax results). There are two ways to do this with jQuery, the first being the text(content) function. The syntax for this is pretty straightforward. The code below sets the text of the div with an id of someDiv.

$('#someDiv').text("the content we want to add");
The second way is the html(text) function . The difference between the html and text functions is the text is just the text of the elements and the html is the tags and the text.
Adding a new html element
I also use the appendTo() function to display content dynamically on pages. For example:

$('#validationSummary').appendTo('<div>invalid data</div>');
Removing content
One thing I like about jQuery is that the API is very obvious so to remove elements we call the remove() function. Take the following example:

$('#validationSummary').remove();

The above statement removes all elements inside the div with the id of validationSummary.
Setting css properties
Another common scenario in web development is dynamically change the look and feel of html using css properties. jQuery makes this super easy with the css() function. The following code will set the text of the div to red. This can be placed in some type of event handler.

$('#validationSummary').css("color","red");
Iterating over the matched set
Most jQuery functions work against the first element in the matched set. If you want to manipulate all elements in a matched text you must iterate over the matched set using the each() method.

    $('img'.each(function(){
        This.addClass("clickableImage');
    });

The example adds a class called clickableImage to every image on our page. In that css class we could set the border to 0.

Selecting DOM Elements with jQuery (Part 1)

2008-09-29T02:40:00Z

I promised a few people that I would write a few blog posts on jQuery. Plus I am also going to be speaking at Tulsa Techfest on jQuery so these blog posts will help me prepare for that talk. In this post I am going to focus on selectors in jQuery. Selectors are extremely powerful and really the first thing you need to know when starting with jQuery. Selectors allow you to select any element in the DOM. The problem in the past of trying to select values within the DOM is each browser has its own implementation. You then would have to liter your code with ugly switch statements but now jQuery abstracts out the browser differences without you having to worrying about it. jQuery selectors are similar to css selectors so let's start by reviewing css selectors.

Selectors in CSS

In css what does the following type selector do :
div {color: blue;}

If you said it makes the text in any div blue you would be right. And I'm sure everyone knows about class selectors so what does this do:
makered {color:red}

In this rule the anything that has its class attribute set to make red will have red font. And the last one is ID selectors:
#reddiv {color:red}

This rule will set the text to red inside the div that's id attribute is set to reddiv. There are several other types of selectors but for sake of brevity I am going to skip those. For more on these css selectors visit http://css.maxdesign.com.au/selectutorial/.

Selectors in jQuery

There are three types of basic selectors: element, id , and class. The following jQuery statement is an element selector that selects all div elements. The elements are called a matched set.
$("div")

The dollar sign is just a shortcut for writing JQuery which is the main class for all of this stuff. Now to add css to the matched set we say:
$("div").css("border","3px solid red");

This will give all divs in our html document a red border.

Now let's say we need to do a selection based on the element id:
$("#somediv").css("border","3px solid red");

This will give a red border to the div with the id of "somediv". Note: the # is important and must be there.

The final selector I am going to talk about in this post is the class selector. If we wanted to apply a red border to the following html element:
<div class="redBorderClass"/>

We would write the following jQuery selector:
$(".redBorderClass").css("border","3px solid red");

Easy stuff uh? It is but we are just scratching the surface on how you can use jQuery to select DOM elements. I'm going to do a part 2 of this post where I dive into some more advanced selectors. The documentation on jQuery is really great so for more info on selectors go here: http://docs.jquery.com/Selectors

First Tulsa SharePint Meeting

2008-09-23T22:10:00Z

Way back when I lived in New York I would attend technology meetups that were held at bars. There were meetups for everything you could think of including .NET, Java, Agile, XP, and SharePoint. Each varied a little in format but the basic idea is to gather people who share a common technology interest at a bar and then add beer. Sometimes the whole group debated while other times the conversations would splinter off into 2 or 3 person conversations.

So on Thursday October 16^th at 6:00pm Corey Roth and I will host the first SharePint (I'm spelling this wrong on purpose. It is sort of a pun) in Tulsa at Crawpappy's. Basically show up to have a beer or two and discuss SharePoint and whatever else is on your mind. We won't have speakers or agendas or topics planned though I do encourage everyone to come with a few conversation ideas. And if you don't know anything about SharePoint come anyway because you might find someone there to discuss Iron Python or Perl with.

Unfortunately at the moment you will have to furnish the pint in SharePint. I am hoping by the second meeting to get a recruiting company to buy the first two rounds for everyone in exchange for me handing out their business card. So if you are a recruiter or know one that wants to do that let me know.

So I hope to see all two of my readers there.

Disclaimer: Neither Corey or I will be driving anyone home. Since public transportation in Tulsa is virtually nonexistent either limit your alcohol consumption or make arrangements to get home without driving.

Directions to Crawpappy's

View Larger Map

Adding Your Own Search Box to Your Master Page

2008-09-23T19:04:00Z

Sometimes clients want to tweak the search box that usually appears at the top of a SharePoint page so much I just throw the whole thing out. The delegate control is used for search and just loads a user control so you can just replace that with your own user control. But today I had to do it using SPD. So here is how I did it with "no code".

Create a new web part page called CustomSearch (though the name doesn't matter). The drop the Search Core Results web part on it.
Now on your custom master page, delete the delegate control and move the PlaceHolderSearchArea control to the bottom of the page inside your hidden div. Don't delete it because many page layouts need that control present.
Next on your custom master page where the PlaceHolderSearchArea control was add a dropdown, textbox, and hyperlink. The dropdown box will be for scopes, the textbox is where the user will enter their search term, and the hyperlink will submit the search. Notice the values on the dropdown are just the part of our search string. Obviously you will need to customize this to match the scopes that your users want.

<SELECT name="scopes" id="scopes" class="ms-sbscopes">
<option value="cs=This%20Site&u=http%3A%2F%2Ffpportal.companyxyz.com%2FTestSite">This Site</option>
<option value="cs=This%20List&u=http%3A%2F%2Ffpportal.companyxyz.com%2FTestSite%2FLists%2FFaqs" >Faqs</option>
<option value="cs=This%20List&u=http%3A%2F%2Ffpportal.companyxyz.com%2FTestSite%2FReference%20Documents" >Reference Docs</option>
<option value="cs=This%20List&u=http%3A%2F%2Ffpportal.companyxyz.com%2FTestSite%2FPolicies%20And%20Project%20Information" >Policy Docs</option>
<option value="cs=This%20List&u=http%3A%2F%2Ffpportal.companyxyz.com%2FTestSite%2FChange%20Request%20Templates" >Forms</option>
<option value="s=All%20Sites">All Sites</option>
</SELECT>

<div class="ms-sbcell" style="display:block;float:left;border:1px gray solid; margin:0 2px 0 2px;"><input type="text" id="searchtext" class="ms-sbplain"/></div>
<a href="#" mce_href="#" onclick="SearchRedirect()" style="padding:0 2px 0 0"><img src="/_layouts/images/gosearch.gif" mce_src="/_layouts/images/gosearch.gif" alt="search"/></a>
Finally we need to add a javascript function to our master page that will build our url that contains our custom search page and then redirect the page to that url.

function SearchRedirect(){
var searchtext = document.getElementById('searchtext').value;
var control = document.getElementById('scopes');
var scope = control.options[control.selectedIndex].value;

window.location= '/TestSite/pages/CustomSearch.aspx/Results.aspx?k='+searchtext+'&'+scope;

}

Changing the Default Text of an Empty Document Library

2008-09-11T01:37:06Z

"To create a new item, click "New" or "Upload" above. There are no items to show in this view of the document library."

The above text is displayed when a Document Library is empty. Today I needed to change it. I had done this once before and forget so I'm blogging about it so I can find it next time. The text comes from the core.resx resource file, located in 12\RESOURCES. It's divided up into four resources; just open the resource file in any text editor and search for "noitemsinview_doclibrary", and you'll find the strings. Just replace the strings with your text or delete them all together.

Here a link explaining with more details.

http://social.technet.microsoft.com/forums/en-US/sharepointgeneral/thread/3511d93b-6e91-4f58-b6fb-3cf402425310/

Can You Do TDD on a SharePoint Project?

2008-08-28T21:07:12Z

Well SharePoint MVP Andrew Woodward thinks so. Check out his paper on doing test driven development with SharePoint. His paper walks you through building a Web Part the TDD way. I haven't had a chance to read It but I'm really interested in this.

Beginners Guide to Test Driven Web Part Development

How Come My Silverlight Application Won’t Load?

2008-08-28T21:03:54Z

So you have written your first Silverlight application and deployed it to IIS but when you hit the page nothing happens. No error, nothing. You are just sitting there staring at a blank web page. Chances are you haven't registered the Silverlight MIME type yet. Go into IIS and register the following MIME type: .xap to application/x-silverlight-app. I will leave it up to you to Google the details of how to do that.

DateTime serialization issue with .NET and JSON

2008-08-23T03:31:45Z

I was writing some client code that calls some .NET Web Services and getting a strange error. I wanted to post this just to warn people to watch out for the DateTime object and null values. I have two web services, one gets an array of Entity objects and the other takes an array of Entity objects. The array is being serialized into JSON. The get web method worked fine but when I tried to pass the array to the save web method I got the following error:

System.InvalidOperationException: SaveUserFavorites Web Service method name is not valid.

at System.Web.Services.Protocols.HttpServerProtocol.Initialize()

at System.Web.Services.Protocols.ServerProtocolFactory.Create(Type type, HttpContext context, HttpRequest

request, HttpResponse response, Boolean& abortProcessing)

Now what sucks about this error is it is pretty generic. It pretty much means that the Ajax class cannot find a web service method that matches. So first I double checked my method names and parameters and no problem there. I'm going to fast forward through my debugging problems because this error took me awhile. The issue is one of my properties on my Entity object was a DateTime. It seems that when I was getting the JOSN array .NET serializes it wrong and then cannot read it. I really didn't need the property so I commented it out. But I did some additional research for this post and found that null is not a valid JSON value so the parser failed.

More info - http://west-wind.net/weblog/posts/398970.aspx

Tip: Firebug is critical in debugging ajax calls.

Searching and Comma-Delimited Strings in SQL

2008-08-23T02:52:49Z

I recently needed to write a stored procedure that would take a search string from a web form and search three columns: name, description, and keywords. The keywords column and the input string can both be comma delimited. The key to the sproc is going to be the SQL IN operator. The IN operator can be used in a where clause to filter based on a list like so:

Where

id IN (1,4,6,10,13)

So what I needed was:

Where

id IN (@searchString)

But you can't do that so I needed to write a split function to split out @searchString. Note: I think there maybe be a split function in SQL Server 2005/2008 but I was using SQL Express.

Here is the final result:

ALTER FUNCTION dbo.Split

(

@List nvarchar(2000),

@SplitOn nvarchar(5)

)

RETURNS @RtnValue table

(

Id int identity(1,1),

Value nvarchar(100)

)

BEGIN

While (Charindex(@SplitOn,@List)>0)

Begin

Insert Into @RtnValue (value)

Select

Value = ltrim(rtrim(Substring(@List,1,Charindex(@SplitOn,@List)-1)))

Set @List = Substring(@List,Charindex(@SplitOn,@List)+len(@SplitOn),len(@List))

End

Insert Into @RtnValue (Value)

Select Value = ltrim(rtrim(@List))

Return

END

-------------------------------------------------------------------------------------

ALTER PROCEDURE SearchApplications

(

@searchWord varchar(100)

)

SELECT ID, [Name], Description FROM Applications

WHERE

[Keywords] IN (Select Value from dbo.Split(@searchWord,',')) or

[Name] IN (Select Value from dbo.Split(@searchWord,',')) or

[Name] = @searchWord or

[Description] IN (Select Value from dbo.Split(@searchWord,',')) or

[Description] = @searchWord

Why Is My Master Page Not Getting Applied to My Custom Page

2008-07-31T21:23:51Z

This post is going to assume that you already know how to create a custom master page for SharePoint. There are dozens of articles and posts explaining how to do this. This post is a quick tip about when you have already applied your master page to your site and it works but doesn't get applied to your custom pages. By custom pages I mean pages that you add via a site definition or feature. Open up the aspx page with VS or SPD and at the top of your aspx page you will need to change your masterpagefile property

From

<%@ Page MasterPageFile="~masterurl/default.master" Debug="true" …

<%@ Page MasterPageFile="~masterurl/custom.master" Debug="true" …

That is it. Now whatever master page you have applied to the site will be applied to this page as well.

Unobtrusive JavaScript

2008-07-30T03:49:00Z

My current project is a web part with a ton of that Web 2.0 goodness. The client wants a very rich user experience with lots of draggie droppie stuff. So my first thought was to do a quick prototype with ASP.NET AJAX and the AJAX Toolkit but I knew from past experiences the toolkit was very inflexible if it didn't do exactly what you wanted. And from talking to this client I knew they weren't going to scale down the requirements. So I downloaded and started using jQuery instead. I have been very pleased with what I have learned so far. First jQuery is just a JavaScript library and to include it in your project you just have to download the JavaScript file and include it on your page. So I liked that right away. The other cool thing is there are dozens of plugins (which are just more .js files) that you can add and leverage the functions in the plugin. You have the source so if you need to make modifications you can (flexibility). So I liked that as well.

Ok so now that the intro is out of the way one of the key principles in jQuery and Prototype is the concept of unobtrusive JavaScript. What this means is you don't mix JavaScript function calls within your html elements. The reasoning is similar to the reasons you don't or aren't supposed to mix inline styles in with your html. It is difficult to read and modify. So if we aren't suppose to do this then how do we create a click event on say a button. Take the following button:

Then of course in our script block or a .js file we would implement the DoSomething function. But what if we could wire the click event up when the page loads so we wouldn't even have to set the onclick property in our html. In jQuery (Note: you can also do this in Prototype and even plain old JavaScript) you can do this. Look at the following function that we would put in our script block:

$(document).ready(function(){

$("#MyButton").click(DoSomething);

)};

First what the hell does the dollar sign mean. The dollar sign, in JavaScript, usually represents a class. For jQuery, the $ represents the jQuery class which is a .js file that you will include in your page. You will see the $ used to start a selector a lot. The document.ready function gets called when a page loads. Then our button's id was MyButton so the #MyButton will select that element and wire the click event to call the function DoSomething.

I have several posts in the works over some jQuery concepts that include (I will post them here to motivate me to finish them) :

jQuery Basics – selectors and events
jQuery Links and Plugins Rollup
Mixing ASP.NET Controls with jQuery (or should you even try)
Ajax, WCF, and jQuery
Creating a Drag and Drop Sortable List inside a Modal Popup

Stay Tuned…

PortalSiteMapProvider was unable to fetch children for node

2008-06-06T16:04:45Z

I ran into a strange error today and thought it needed documenting. I have two WFE in a small farm. One server the navigation was fine but on the other server the navigation had an error. The Nodes where missing except for one code that said ERROR. When you mouse over it you got the followed exception and stack trace:

PortalSiteMapProvider was unable to fetch children for node at URL: /, message: Object reference not set to an instance of an object., stack trace: at Microsoft.SharePoint.Publishing.Navigation.PortalSiteMapNode.GetNavigationChildren(NodeTypes includedTypes, NodeTypes includedHiddenTypes, OrderingMethod ordering, AutomaticSortingMethod method, Boolean ascending, Int32 lcid) at Microsoft.SharePoint.Publishing.Navigation.PortalSiteMapNode.GetNavigationChildren(NodeTypes includedHiddenTypes) at Microsoft.SharePoint.Publishing.Navigation.PortalSiteMapProvider.GetChildNodes(PortalSiteMapNode node, NodeTypes includedHiddenTypes)

I fixed this by adding the second server to the Alternative Access Mappings (the first one was already in there). I apologize but I don't know the details of why this fixed the error. If I get time I will give into the details of the why.

Printing a List

2008-06-06T14:17:42Z

Have you ever tried to print a List in SharePoint. Well first you have to export it to Excel then print it. Yuck! Well there is a better way. Check out the link below.

http://www.sharepoint-tips.com/2007/01/how-to-add-print-list-option-to-list.html

This is basically a feature that installs a Print List link in the Action menu. The List then opens in a print preview mode. I do wish the author would have packaged it up as a wsp but the steps are pretty clear. In fact I've been doing some developer training on deployment lately and I might use this article to show what a wsp actually does when installing a feature.

Kyle