Quick Link – VS 2010 Dark Styling

So after a long day of working outside, I came in to code… Only to be greeted by a large white screen…

OH EM GEE… My eyes were killing me… And I thought… I AM GOING BLIND…

Then I thought, oh crap, maybe Sean was onto something…

So I went Googling around and found the Son of Obsidian and all I can say so far is, damn, my eyes don’t hurt and Sean was right… but we don’t need to tell him that.

Check out this link (http://studiostyl.es/schemes/son-of-obsidian-with-resharper) for a dark theme that works with Resharper AND Razor (and XAML can come too).

THE END

Get your own “Tool” blog!

Have you ever thought about writing your own blog?  Well now you can have it! And for only $5!  NetDevInc.com (The brains of this operation, not the comedy) has teamed up with FiveRR.com to bring you the Deal of the Year!

You get:

  • Help setting up your domain name
  • Web hosting for 3 months
  • WordPress Installed
  • Free themes and useful plug-ins
  • And MORE !!!

Check out our offer at http://bit.ly/WordPressForFiveDollars

Connect Your Web App To Twitter Using Hammock & C-Sharp

The Challenge

Hammock LogoRecently I was challenged with the task of connecting a web application to Twitter and sending out a tweet. This article will focus on the connection to Twitter, saving the talk about sending out a tweet for another article.  Having used TweetSharp last year, I thought I would check for an updated version of it and be on my way.  When I got to CodePlex, I learned that support for TweetSharp had pretty much stopped in May and the developers had moved onto Hammock.

After reading their explanation, and suggestions for future development, I decided to use Hammock to connect my web application to Twitter.  What is Hammock you ask, in their own words, it is a REST library for .NET that greatly simplifies consuming and wrapping RESTful services.  In plain English, it makes integrating REST APIs a snap.  If you want an explanation of what REST is, please check out Wikipedia.

I have to give credit to ColinM, author of this forum post on CodePlex, for giving me the basis of this code.

Before The Code

Before you can connect your web application (or desktop application) to Twitter, you need to register with Twitter.  This is not the same as creating a new Twitter account, which you will need, instead this is telling Twitter that your application is going to want to interact with it.  To do this, go to http://twitter.com/apps/new.

Adding A New Twitter App

Let’s talk about some of the settings you will need to configure when you register your application.

  • Application Type – For this example, choose Browser (Web).  If you choose Client (Desktop), you will see the Callback URL option go away.
  • Callback URL – This is the URL Twitter will send your users to after they Allow or Deny your request to connect your application to Twitter.  I would recommend entering this as your production URL.  In this article I will show you how to override this setting in your code.
  • Default Access type – If your application is only going to consume data from Twitter, you can leave it at Read-only, but if you intend on posting tweets you will need to select Read & Write
  • Use Twitter for login – If you want to allow users to authenticate via Twitter, check this box.

After you register your application, Twitter will give you the information you need to connect.  You will need to take note of your Consumer key and Consumer secret.  This key/secret combination is unique to your application.  The Request token URL, Access token URL and Authorize URL are the same for pretty much everyone.  Now that we’ve established your secret identity with Twitter, we can get started.

A Four Step Process

To make my example as simple as can be, I broke it down into four steps.  Also, I set up this example using two web forms.  Steps One and Two are called from GetTwitterRequest.aspx and Steps Three and Four are called from ProcessTwitterResponse.aspx.  You can do this from the same form if you wish.  If you’re not into web forms, you can call it from an ASP.NET MVC View as well.

For simplicity, I have setup a couple of private strings called CONSUMER_KEY & CONSUMER_SECRET.  Yeah, you guessed it, those are the values we needed from Twitter.  You can store these in a database, in your web.config, or hard code them right in your C# code, that’s all up to you.

For the purpose of making a fast, lightweight example, I used Session to store certain information.  You will probably want to store the  accessKey and accessSecret in a database.  You will want to associate these values with your user in your system.  We will talk about each key later on.

Here are the related “usings”:

using System.Net;

using Hammock;
using Hammock.Authentication.OAuth;
using Hammock.Web;

Also, many developers have found the need to include the following line of code when talking to Twitter. I can’t explain why.

ServicePointManager.Expect100Continue = false;

Step One: Identify Your Application

var credentials = new OAuthCredentials
{
	Type = OAuthType.RequestToken,
	SignatureMethod = OAuthSignatureMethod.HmacSha1,
	ParameterHandling = OAuthParameterHandling.HttpAuthorizationHeader,
	ConsumerKey = CONSUMER_KEY,
	ConsumerSecret = CONSUMER_SECRET,
	CallbackUrl = "YOUR_CALLBACK_URL_GOES_HERE/ProcessTwitterResponse.aspx",
};

var client = new RestClient
{
	Authority = "http://twitter.com/oauth",
	Credentials = credentials
};

var request = new RestRequest
{
	Path = "/request_token"
};

RestResponse response = client.Request(request);

Before you can connect your application with Twitter, you need your application to identify itself.  Above you will find a pretty standard piece of code that you can use to do that.  You won’t have to change much of this code to get it working with your application.

First, you need to instantiate your credentials.  To do this, you’ll need to provide your CONSUMER_KEY, CONSUMER_SECRET, and Callback URL. Use your key/secret combination provided by Twitter. Your Callback URL is the URL of the page you want to process the response from Twitter.  As a note, Twitter only supports hmac-sha1 signatures.  After you’ve created your credentials, you’ll need to instantiate a RestClient and RestRequest.

In short, the RestClient uses your Credentials to execute your RestRequest.  When you execute your RestRequest you will need to capture the RestResponse for use in Step Two.

Step Two: Ask For Permission To Connect

var collection = HttpUtility.ParseQueryString(response.Content);
Session["requestSecret"] = collection[1];
Response.Redirect("http://twitter.com/oauth/authorize?oauth_token=" + collection[0]);

In step two, we are going to parse the RestResponse from our RestRequest in Step One.  If Twitter recognizes your application, you will receive a temporary key/secret combination that we’ll call requestKey and requestSecret. This key/secret combination will be used to request authorization to connect your application to your user’s Twitter account.  It is important to note that this combination is good for one request.  Once you use them, you’ll have to get a new requestKey and requestSecret to make new authorization requests.

I used HttpUtility.ParseQueryString to break apart the querystring in the RestResponse.  The first part is going to be your requestKey, and the second part is your requestSecret.  To actually make the request, you are going to send your requestKey back to Twitter.  You will want to store your requestSecret for use in Step Three.  For this example I stored the requestSecret in Session.  You can store this in a database if you want, but due to it’s temporary nature, storing it in Session or a Cookie should work just as well.

When you redirect your user to Twitter for authorization to connect your app to their Twitter account, they should see a screen similar to the one below.

Create A Twitter Connection - Deny or Allow

Step Three: Wait For Twitter’s Response

var requestToken = (String)Request.QueryString["oauth_token"];
var requestSecret = (String)Session["requestSecret"];
var requestVerifier = (String)Request.QueryString["oauth_verifier"];

var credentials2 = new OAuthCredentials
{
	Type = OAuthType.AccessToken,
	SignatureMethod = OAuthSignatureMethod.HmacSha1,
	ParameterHandling = OAuthParameterHandling.HttpAuthorizationHeader,
	ConsumerKey = CONSUMER_KEY,
	ConsumerSecret = CONSUMER_SECRET,
	Token = requestToken,
	TokenSecret = requestSecret,
	Verifier = requestVerifier
};

var client2 = new RestClient()
{
	Authority = "http://twitter.com/oauth",
	Credentials = credentials2
};

var request2 = new RestRequest
{
	Path = "/access_token"
};

RestResponse response2 = client2.Request(request2);

At this point, your application will be waiting for Twiiter to send back a response. It will do so by redirecting the user to the URL you sent Twitter in Step Two. This step is very similar to Step One, with the exception that we will be sending more data. Besides your CONSUMER_KEY and CONSUMER_SECRET, you will need to provide your requestToken and requestVerifier, which you get from Twitter’s call to your Callback URL. You will also need your requestSecret which you stored in Step Two.

Again you will use a RestClient to execute your RestRequest.  When you execute your RestRequest you will need to capture the RestResponse for use in Step Four.

Step Four: Remember Your Secret Handshake

Now all we need to do is parse the response from Twitter and save the token and secret they return.

var accessResponseCollection = HttpUtility.ParseQueryString(response2.Content);

Session["accessToken"] = accessResponseCollection["oauth_token"];
Session["accessSecret"] = accessResponseCollection["oauth_token_secret"];

Twitter will respond, if the user allowed the connection, with a permanent accessToken and accessSecret. This IS your secret handshake with Twitter. You will want to store the accessToken and accessSecret in your database.  I know I stored it in Session, but that’s because I was too lazy to wire this example to a database.  Using you accessToken and accessSecret in future Twitter API calls is how you connect to your user’s Twitter account to your application. This token and token secret do not expire unless the user removes the connection to your application via the Twitter web site.

In closing, all this article really does is help you connect with Twitter, you will have to find something to do with this connection.  It should also give you a light understanding of REST API calls as well as some insight on the OAuth authentication process.  There will be future articles to help you tweet from your application or get data from Twitter to display.


To find out more about the technologies in this article, check out the following links.

Hammock – http://hammock.codeplex.com/

OAuth – http://oauth.net/

Twitter API – http://apiwiki.twitter.com/

ByATool.com Is Looking For Writers

Yeah, you read that right.  ByATool.com is looking to add one or two writers with various IT backgrounds.  This is not a job, it is simply an avenue for you to get your work read.  We want to know what YOU want to write about.  It’s no fun to be given a topic to write about when your passion lies elsewhere. Please contact us at the address listed below so we can discuss this one-on-one!

What we need from you:
Name:
E-Mail:
What would you like to write about:
How often would you like to write:

Please submit this simple information, along with an example blog post to iwanttowrite [at] byatool [dot] com

ByATool.com gets a shiny new tool!

A while back, we put up an offer to write for our blog.  Only one has risen to the top as someone having both the technical know-how and the razor sharp wit required to write on a site such as this.

ByATool.com Readers… Amy.

Amy… ByATool.com Readers.

Amy is a magnificent geek and almost 10 year veteran of server administration and software development. She has worked at IBM, Concurrent Technologies Corporation, and University of Pittsburgh Medical Center. Currently, she is doing custom SharePoint development connected with Team Foundation Server and the ASP.NET MVC framework development using the Entity Framework, C#, and jQuery. She is currently living in Pittsburgh and not happy at all about commuting into a city with 3 rivers because of the many bridges and no serious commuter subway systems… Who plans this stuff?

Welcome Amy!

Website Spotlight: Iconshock.com

Website: Iconshock ( http://www.iconshock.com/ )
Description: From their website – Iconshock offers the largest icon collection over the internet, with nearly 500,000 unique icons (they don’t include sizes or file types in this estimation, only different and unique icons) with the highest quality and most of them including source files to allow you to make your own changes. All those icons are included in about 200 different collections with different design styles to choose from according to your application GUI.

Icons & Logos
Iconshock.com offers great looking icons and logos for reasonable prices. Both their icons and logos are of very high quality. Source files are also included so that you can modify them as needed. Personally, I am a fan of the Super Vista and Lumina sets. Iconshock offers the ability to purchase single sets or create your own bundle of sets to purchase at a reduced price. You can also subscribe and get all the icons they offer plus any new icons added during your subscription. The website is quick and easy to navigate. If you need a custom logo or icons created specifically for you, Iconshock can do that as well. I have been a web developer for over 10 years, and their portfolio of custom work is AMAZING!

Example Logo
Example Logo

The Community
What sets Iconshock apart from their competition is a community portal which rewards people for their participation. Each week, Iconshock allows users to vote on which free set of icons the community receives. Users can collect free icon sets by swapping with other members. Free sets can also be unlocked by earning points by simply logging in or posting in their forums. You can join the community on their website or by searching Twitter for #Iconshock. Recently, community members were recognized for their participation when they were awarded full icon sets. You can read more about these awards on the Iconshock Blog.

You can browse through some of their icons below:

Icon Set Specifics
Sizes

  • Normal: 256×256, 128×128, 72×72, 64×64, 48×48, 32×32, 24×24, 16×16 pixels (available in png only)
  • Hot: 128×128, 48×48, 32×32, 24×24, 16×16 pixels (available in png only)
  • Disable:128×128, 48×48, 32×32, 24×24, 16×16 pixels (available in png only)
  • ico:256×256, 128×128, 48×48, 32×32, 24×24, 16×16 pixels
  • gif :128×128, 48×48, 32×32, 24×24, 16×16 pixels
  • bmp:128×128, 48×48, 32×32, 24×24, 16×16 pixels

Color States

  • Normal: Normal color
  • Hot: Contrasted Colors, useful in rollovers, active buttons
  • Disabled: Gray Scale colors, useful in inactive buttons

Formats

  • PNG
  • GIF
  • ICO
  • BMP

My jQuery Primer

So you have been reading about jQuery and want to dive in and try some? I recently attended the MSDN Dev Conference in Detroit where jQuery integration and client-side programming were very hot topics. With Microsoft’s acceptance of the open source library, I figured I would give it a try. This is what I have learned so far. Before I can show you what you can do with jQuery, I think I should probably show you how to get a reference to jQuery into your code. In ASP.NET you can add your reference directly to your Script Manager

<asp:scriptmanager id="pageScriptManager" runat="server">
<scripts>
<asp:scriptreference path="/client/jquery-1.3.1.min.js" />
</scripts>
</asp:scriptmanager>

What does jQuery have to offer? First and foremost, jQuery has given me power over the Document Object Model (DOM)! jQuery Selectors are the greatest thing since sliced bread, no lie. Being able to EASILY find an object or group of objects in the DOM by ID, CSS Class, or by HTML Tag is something web developers have long needed. To select an object from the DOM by ID would look like this:

$('#ID_Goes_Here')

To select an object from the DOM by CSS Class would look like this:

$('.CSS_Class_Name_Goes_Here')

To select an object from the DOM by HTML Tag would look like this:

$('<tag_goes_here>')

With jQuery Selectors being so simple, it allows the developer to easily select an object or a group of objects. Now that we can select objects, what can we do with them? This is where the power of Selectors really builds into what else you can do. In a web application, round trips to the server to manage UI is wasteful. I avoid JavaScript like the plague because it’s a pain in the ass. jQuery makes client-side UI management feel like climbing the rope in gym class. For example, if I have a label that I want to be rendered but not visible I could create the label.

<asp:label id="Label4" runat="server" cssclass="myLabel" text="This is " />

And later on in jQuery I can hide it like this.

$('#Label4').css('display', 'none');

It’s nice to be able to easily select an object and modify it, but what if you have a whole group of items you want to modify? With jQuery, you can EASILY loop through a collection of objects. In this example I have a group of labels.

<asp:label id="Label1" runat="server" cssclass="myLabel" text="This is " />
<asp:label id="Label2" runat="server" cssclass="myLabel" text="This is " />
<asp:label id="Label3" runat="server" cssclass="myLabel" text="This is " />
<asp:label id="Label4" runat="server" cssclass="myLabel" text="This is " />

Now I want to update the text of each label to include its ID. I am going to loop through each object in the DOM with a CSS Class of .myLabel.

$('.myLabel').each(function() { $(this).append(this.id); });

What the jQuery code above does is execute a function that will append the object’s ID to its text value. Notice the Selector inside the function $(this). The syntax is used to find the loop’s current object in the DOM. I do a lot of web work where I create controls on the fly. For my last example, I just wanted to show a way to quickly insert some HTML into a container object. I will start with a Panel AKA a DIV.

<asp:panel id="Panel1" runat="server" />

Now I am going to use jQuery to select my DIV and add some HTML to it.

$("#Panel1").html("<ul><li>Item One</li><li>Item 2</li></ul>");

Now I have shown you some snippets here and there, let me show you what my page actually looks like.

<!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>jQuery Examples</title>
	<link href="/style/jQuery.css" rel="Stylesheet" type="text/css" />

	<script type="text/javascript">  function pageLoad() { $('.myLabel').each(function() { $(this).append(this.id); }); $('.myLabel').css('color', '#FFFFFF').css('font-size', '30px'); $('#Label4').css('display', 'none'); $("#Panel1").html("<ul><li>Item One</li><li>Item 2</li></ul>"); } </script>

</head>
<body>
	<form id=	<form id="pageForm" runat="server">
	<asp:scriptmanager id="pageScriptManager" runat="server">  <scripts>  <asp:scriptreference path="/client/jquery-1.3.1.min.js" />  </scripts>  </asp:scriptmanager>
	<asp:label id="Label1" runat="server" cssclass="myLabel" text="This is " />
	<br />
	<asp:label id="Label2" runat="server" cssclass="myLabel" text="This is " />
	<br />
	<asp:label id="Label3" runat="server" cssclass="myLabel" text="This is " />
	<br />
	<asp:label id="Label4" runat="server" cssclass="myLabel" text="This is " />
	<br />
	<asp:panel id="Panel1" runat="server" />
	<br />
	</form>
</body>
</html>

Links
jQuery: http://www.jQuery.com/
Object Model: http://en.wikipedhttp://en.wikipedia.org/wiki/Document_Object_Model