Welcome to my blog. If you like my posts, please subscribe to my feed and if you want to keep in touch, follow me on twitter! Happy reading!

HTML5 Support In Visual Studio 2010

I was trying to play around with HTML5 assuming that VS 2010 had shipped with HTML5 support but to my dismay it was not the case. Bummer! So I did a bit of homework and came up with an easy workaround. If you try googling for html5 visual studio 2010, the first link that you will see is HTML 5 Intellisense for Visual Studio 2010 and 2008. But unfortunately, the patch provided over there doesn’t seem to work. (DO I HAVE TO DO EVERYTHING!!)

So here’s how I got it to work.

  1. Download this archive and extract the contents to your desktop.
  2. Copy/Move html_5.xsd to D:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\Packages\schemas\html. The path may vary depending on where you installed VS 2010 or Visual Web Developer 2010. vs2010folder
  3. From the extracted contents, run the appropriate registry file. In my case, it was VS-2010-x64.reg
  4. Now fire up Visual Studio 2010 (or VWD) and navigate to Tools > Options > Text Editor HTML > Validation. On the right panel, select HTML 5 as the Target. vs2010ValOption
  5. Now restart VS 2010 and you should be able to code valid HTML5. Enjoy! vs2010html5demo

ASP.NET SlidingMessage Control

The SlidingMessage server control is the ASP.NET version of the excellent jQuery SlidingMessage plugin by Henrik Joreteg. The control is very easy to use with minimal setup – all you have to do is drag and drop the control into your page and voila! you’re ready to go. The binary includes all the necessary javascript inlcuding jquery so you don’t even have to include them separately in your page.

Here’s how you invoke the sliding message, assuming SlidingMessage1 is the ID of the control:

SlidingMessage1.Text = "Congratulations. This works!";
SlidingMessage1.BackColor = System.Drawing.ColorTranslator.FromHtml("#0DFF00");
SlidingMessage1.IncludeJquery = false; //It’s included by default
SlidingMessage1.Show();

And as usual the whole thing is open source so knock yourself out! The source code and a demo is hosted at http://code.google.com/p/slidingmessage/

Happy Programming!

Discovering MSBuild – Part One

Background

This series is all about me trying to learn the dark art of MSBuild. Ever since I started developing .NET applications, I was aware of the existence of this strange tool but I could never harness its true potential. So lets begin our adventure!

Introduction

An MSBuild file typically known as an MSBuild Project File contains instructions on how to build your application step by step – neat stuff! This innovative tool from Microsoft helps you to take control over every aspect of the build process thereby helping you to automate the build and deployment process.

Overview

An MSBuild project file is basically an XML file. This XML document is defined by two XSD documents Microsoft.Build.CommonTypes.xsd and Microsoft.Buid.Core.xsd. Both these files are located in the %WINDIR%\Microsoft.NET\Framework\vXXXX\MSBuild folder. The basic structure of an MSBuild project file looks like this:

<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
</Project>

This structure is comprised of Properties, Items, Targets. Confused? You should be. ;) Put it simply, items are the files that are going to be built and properties are the build parameters ex. Configuration or OutputPath.

Project Properties

Properties are nothing but Key-Value pairs and apparently there two different types of Properties – Static, Dynamic. What I know about static properties is that they must be contained within a PropertyGroup element which is declared directly under the project element. A project element may contain multiple PropertyGroup elements.

<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
    <PropertyGroup>
        <ApplicationName>MyDemoApp</ApplicationName>
        <WhyAmICrazy>I Have No Idea</WhyAmICrazy>
    </PropertyGroup>
</Project>

In the above example, ApplicationName is the key and MyDemoApp is the value(DUH!!). Can values contain spaces? I have no idea – so lets find out. Paste the above code in notepad and save it with a *.proj extension, fire up the Visual Studio Command Prompt, and execute the script.

Noname

Oppsss! Look’s like we are missing something called Targets? Not to worry, let’s dig deeper.

Tasks & Targets

Targets are the work horses of the MSBuild file so without them the file would be literally useless. Properties are utilized within these targets. A task is the smallest unit of work and a target is a sequential set of tasks. The MSBuild tool ships with a predefined set of tasks like Copy, Csc(wow haven’t used this baby in a while!), Move, Exec, etc. Tasks are invoked using parameters which are just XML attributes with values. The attributes may vary from task to task. For our example we will try out the Message task.

<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
    <PropertyGroup>
        <ApplicationName>MyDemoApp</ApplicationName>
        <WhyAmICrazy>I Have No Idea</WhyAmICrazy>
    </PropertyGroup>
    <Target Name="HelloWorld">
        <Message Text="This is my first MSBuild Application" />
    </Target>
</Project>

To build this project the command should be of the format

msbuild FILE_NAME /t:TARGET_NAME

For our example the command would look like

msbuild Sample1.proj /t:HelloWorld

You will see that the build succeeds without any errors! We may have won the battle but not the war ;)

A more complicated example for you adrenaline junkies out there:

<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
    <PropertyGroup>
        <ApplicationName>MyDemoApp</ApplicationName>
        <WhyAmICrazy>I Have No Idea</WhyAmICrazy>
    </PropertyGroup>
    <Target Name="HelloWorld">
        <Message Text="This is my first MSBuild Application and $(WhyAmICrazy) why I love .NET" />
    </Target>
</Project>

 

Until the next episode..

Create Twitter Counter Badge using CodeIgniter

I know this is one of those “re-inventing the wheel’” kind of tutorials but I had nothing better to do during my Eid vacation :-P

Things you will need

1. Download and install the excellent CodeIgniter Curl Library

2. You will need an image which will contain your follower count.

The Code

In your Controller class add the following methods

function MyTwitterCounterBadge($username)
{
    $this->load->library('image_lib');
    $config['source_image'] = './images/YOUR_BUTTON_IMAGE.gif';
    $config['wm_text'] = $this->_getTwitterCounter($username);
    $config['wm_type'] = 'text';
    $config['wm_font_path'] = './system/fonts/arlrdbld.ttf';
    $config['wm_font_size'] = '12';
    $config['wm_font_color'] = 'ffffff';
    $config['wm_vrt_alignment'] = 'top';
    $config['wm_hor_alignment'] = 'center';
    $config['wm_hor_offset'] = '10';
    $config['wm_vrt_offset'] = '10';
    $config['dynamic_output'] = 'TRUE'; // DO NOT CHANGE

    $this->image_lib->initialize($config);

    $this->image_lib->watermark();
}

function _getTwitterCounter($username)
{
    $count = 0;
    $this->load->library('curl');

    $json = $this->curl->simple_get("http://twitter.com/users/show/$username.json");
    if( $json )
    {
        $obj = json_decode($json);
        $count = $obj -> {'followers_count'};
    }

    return $count;
}

 

Change the values of wm_font_path, wm_font_size, wm_font_color, wm_vrt_alignment, wm_hor_alignment, wm_hor_offset and wm_vrt_offset to fit your needs. Please refer to the CodeIgniter user guide to know more about these settings.

Now all you have to do is include an image tag in your view page that points to the controller function above

<img src="<?=BASE_URL?>CONTROLLER_NAME/MyTwitterCounterBadge/TWITTER_USER_NAME">

 

And that’s all there is to it. Now you have your own personalized twitter counter badge!

Happy Programming!

Using MsSqlSpatial with Google Maps

One of the many .NET open-source projects that don’t get the attention they deserve is MsSqlSpatial. This project provides spatial extensions to SQL Server 2005 – meaning you can perform various spatial calculations right in your T-SQL queries! Cool eh? But, this project lacks documentation which is a problem for us developers. I’m sure they are working their ass off to make one but in the mean time we have to play around with the code to understand its inner workings.

Since Google Maps is very popular among developers, and my personal favorite, I thought why not give out some tips.

Spatial Reference Identifiers (SRIDs)

Most of their functions, require this as a parameter. If your GIS application uses Google Maps then you should use 4326.

Code Examples

Convert a Point on the map from a Well-Known-Text(WKT) format to a Well-Known-Binary Format:

SELECT ST.PointFromText('POINT(-87.6673250 41.9489650)', 4326)

The Point should be of the format POINT( longitude latitude ).

Polygon to text:

SELECT [Bloggernate].[ST].[PolygonFromText] (
   'POLYGON((-87.71956443786621 41.96727630029047, 
             -87.64369010925293 41.96765920367816, 
             -87.6309871673584 41.920672548686824, 
             -87.72522926330566 41.91939525416699, 
             -87.71956443786621 41.96727630029047))'
   ,4326)

The polygon must be a closed one otherwise you’ll receive an exception.

Check if a polygon contains a specified point:

SELECT [ST].[Contains] (YOUR_WKB_POLYGON, YOUR_WKB_POINT)

I hope this provides a good starting point for those daring to step into the unknown ;)

Happy Programming!

Using Jquery Grid with ASP.NET MVC

This excellent article from Phil Haack shows you how you can use the excellent JGrid plugin with ASP.NET MVC.

Thanks Phil!

http://haacked.com/archive/2009/04/14/using-jquery-grid-with-asp.net-mvc.aspx

ASP.NET Maintenance Mode Module

AM3Web developers at times need to put their web applications in an offline mode so as to prevent visitors from accessing the site while they are updating it. The classic way to do this would be to upload an app_offline.html file to the root of the web application. The limitation of this technique is that even the developer cannot visit the site! A developer might need to ensure if everything is working fine and at the same time prevent other users from accessing the web site.

So I created an HTTP module that helps overcome this issue. Just place a few lines in your web.config file and you are ready to go!

 

The following are the main features of this module:

1. Turn on/off the maintenance mode using a setting in the web.config file.

2. Specify the path to the landing page that will be shown to visitors.

3. Specify path to the login page if available.

4. Specify the allowed user roles.

5. Specify the allowed users.

Since the module is in its primary stage, please report any issues that you may find.

Resources

FireFox+Firebug vs IE8 Developer Toolbar

The first time I used Firebug (back then there was no IE8 Dev toolbar) I fell in love with it and as a Web Developer, life without it is unimaginable. This excellent article by Chris Brandsma tells you why its so. Check it out here.

How to add a tooltip to an ASP.NET DropdownList item

If you want to set a common tooltip for all the items in a DropDownList then you can just set the Title attribute for each item like so:

foreach(ListItem item in ddlScorecards.Items)
    item.Attributes.Add("Title", "YOUR TOOLTIP TEXT");

But if you want to set unique tooltips for each item then you have wrap the text value of the items in a DIV.

foreach(ListItem item in ddlScorecards.Items)
  item.Text = String.Format("<div title='{0}'>{1}</div>", "YOUR_TOOLTIP", item.Text);

Happy Programming!

Programmatically extract body of a web page

The technique used in this article can be used to display the contents of an HTML page inside your ASP.NET pages instead of using IFRAMES.

System.Net.WebRequest req = System.Net.WebRequest.Create(Request.QueryString["url"]);
System.Net.HttpWebResponse resp = (System.Net.HttpWebResponse)req.GetResponse();
System.IO.Stream respStream = resp.GetResponseStream();
System.IO.StreamReader sr = new System.IO.StreamReader(respStream);
string responseFromServer = sr.ReadToEnd();
System.Text.RegularExpressions.Regex bodyRegex = new System.Text.RegularExpressions.Regex(@"(]*>[\u0000-\uFFFF]+?)");
System.Text.RegularExpressions.Match bodyMatch = bodyRegex.Match(responseFromServer);
Literal1.Text = bodyMatch.Result("$0");
sr.Close();
respStream.Close();
resp.Close();

Thanks to ClayCo at the ASP.NET Forums for his help. Here is the link to the original thread http://forums.asp.net/t/1023144.aspx