Thiago's Blog

My first time... with jQuery UI

2009-03-21T19:57:00Z

I've been working with jQuery for a while now, but only recently I started using one of its greatest child projects, jQuery UI. I think it's an amazing library and decided to make a few 'how to' posts about it.

If you don't know jQuery UI, it's a client library built on top of jQuery which provides some highly customizable, lightweight, cross-browser client side web controls. Currently on version 1.7, jQuery UI provides DateTimePicker, Tabs, Highlights, Slider among other things. I suggest you to visit the official web site and take a look on what you can do with it. Here's the official website.

The Sample

The sample I'm doing is pretty much a Hello World of the Slider control. I've created an application which changes the font-size attribute of a specific <div> element based on the Slider's value. Click on the image to download the sample.

I believe that as web developers, we have be concerned with the quality or our applications, but also with the user experience. There's nothing really fancy here, but using these controls, we can improve the user experience in a certain way as shown on the sample.

How does it work

The first thing you'll need to run jQuery UI controls is, obviously, to download the library. It already comes with the most recent version of jQuery, "minified". To download, go to http://www.jqueryui.com/download and select what you want. By default, everything is already pre-selected (Core, Interaction, Widgets and Effects). Once you figure which pieces you want, select the Theme and download. If you don't know what the theme look like, go to the themes page http://www.jqueryui.com/themeroller and play with the existing themes, select the one you want and click download, it will redirect you back to the download page, but now your theme will be already selected . You can even create your own theme by customizing an existing one at the themes page.

Once you download the package, note that it comes with all the JavaScript and CSS you'll need, as well as a sample page with all controls. Inside the "css" folder, you'll find a folder named after the theme you selected, and finally, inside this folder you'll find the css and the images you'll need to build your app. Note that it also comes with the a sample page named index.html and a folder named development-bundle, which is a pack of detailed documentation about all controls and more demos. All you'll need is what's inside the js and css folders to your app folder.

Since this sample is nothing but a slider, I won't really create an application folder or anything. I'll just delete the folder "development-bundle", add my own images folder, "img", and change all the markup of index.html file. Note on the code snipped below that I added the references to my scripts and the stylesheet, as well as setting the basic behaviour of the slider control

<link type="text/css" href="css/redmond/jquery-ui-1.7.custom.css" rel="stylesheet" />    
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.custom.min.js"></script>
<script type="text/javascript">

$(function(){
    $("#content_div").css('font-size', 14);
         
    $('#slider').slider({
        range: "min",
        min: 1,
        max: 5,
        value: 2,
        slide: function(event, ui) {
            $("#content_div").css('font-size', 10 + 2 * ui.value);
        }
    });
});

</script>

What the above code does is set a starting value to the text size of a specific <div>, named content_div, making a <div> named slider into the jQuery UI slider control, as well as setting the slider attributes such as min and max values, start value, direction and an event handler to the slide event. Whenever it sliders, it will set the size of the text inside content_div to the double of the selected value on the slider plus ten. In this case, when it's on position 2, the text size will be 14 pixels, if it's on 3, the text size is going to be 16 pixels and so on.

Now all I need is to place these <div> elements somewhere in the page body and the sample app is complete. I don't have to worry with stylesheets or anything since the jQuery UI script will apply all styles almost automatically by using the theme roller which I shall talk about in another post.

This sample shows how to create a web application with some pretty decent user experience with jQuery UI library.

Download the sample app

ASP.NET AJAX Tips and Tricks with Metro Toronto Users Group

2009-02-05T14:45:00Z

If you are in Toronto or GTA, this next Tuesday, February 10th, Rob Windsor from Object Sharp will be talking about ASP.NET Ajax in VS 2008 as well as jQuery Intellisense with VS2008. The event will take place at Manulife Financial on Yonge & Bloor at 6:00pm.

You can register here. For more information about this event, check the Metro Toronto Users Group webite, here.

See you there!

Using Inheritance with Generic Collection

2009-01-28T23:23:00Z

This is just a random tip about Generic Collections. Sometimes it’s common for me to create a class which can be used in a collection. In most cases I use a generic collection of this type as a data source and such things and instead of typing everywhere List<T> and replacing T with the type I just created; I create a new class which extends from this a generic collection of this type. Just a sample:

public class Subscriber {
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string EmailAddress { get; set; }
    public string IssueId { get; set; }
    public string FullName {
        get { return string.Format("{0} {1}", this.FirstName, this.LastName); }
    }
}

Now, every time I need to instantiate a collection of Subscriber I will have to type something like this:

List<Subscriber> list = new List<Subscriber>();

The idea here is simple. We can write a code as simple as this:

public class Subscribers : List<Subscriber> { }

And now I can use the following code to create an instance of our collection of Subscriber:

Subscribers list = new Subscribers();

In the end of the day, it’s just the same thing, but the advantage this is that with inheritance and polymorphism you can add other methods to your collection to handle the needs of your custom type. Of course there are other ways of to do this, however I just wanted to comment about this one, which is the one I use in most "quick" cases.

Tip of the Day #100 at ITTecture

2009-01-23T20:48:00Z

I'd like to congratulate my friend, Cirilo Meggiolaro, who posted last night the Tip of the Day #100 on his blog ITTecture. I'm really glad he achieved this mark and also impressed with such a good source of useful tips his blog has become to me, so I decided mentioning his achievement here.

His blog is really worth reading.

Mootools talk on Ajax Experience

2009-01-16T17:20:00Z

This is a great video by Aaron Newton from clientcide in which he talks about Mootools. He shows a great overview of a JavaScript Framework. Worth watching.

Here's a link to his blog post.

Adding a Guid Parameter into SqlCommand

2009-01-13T17:01:00Z

This is just a random Tip.

It seems like recently some people I know started to have problems passing a Guid objects as a parameter of a SqlCommand object. I already had this problem so I decided to post about it in case someone else is trying the same thing. Apparently it doesn't work if you pass the Guid directly as shown below:

Guid theGuid = new Guid();
SqlCommand command = new SqlCommand("select * from someTable where SomeField = @GuidParameter", someConnection);
command.Parameters.Add("@GuidParameter", SqlDbType.UniqueIdentifier).Value = theGuid;

When the Guid object is passed directly, it's not parsed and Sql Server cannot handle it. The correct way to pass a Guid object as a SqlParameter would be slightly different:

Guid theGuid = new Guid();
SqlCommand command = new SqlCommand("select * from someTable where SomeField = @GuidParameter", connection);
command.Parameters.Add("@GuidParameter", SqlDbType.UniqueIdentifier).Value = System.Data.SqlTypes.SqlGuid.Parse(theGuid.ToString());

Note that now, when passing the value, I'm converting the Guid to a string value and using SqlTypes.SqlGuid.Parse to perform the actual parse. The method parse returns a SqlGuid object, which is the right match for SqlDbType.UniqueIdentifier.

The alternative to Parse, would be creating a new instance of SqlGuid and pass this instance to the Value property of the SqlParameter, but then you would create one more object to do the exact same thing. In this case it would be something like this:

Guid theGuid = new Guid();
System.Data.SqlTypes.SqlGuid theSqlGuid = new System.Data.SqlTypes.SqlGuid(theGuid);
SqlCommand command = new SqlCommand("select * from someTable where SomeField = @GuidParameter", connection);
command.Parameters.Add("@GuidParameter", SqlDbType.UniqueIdentifier).Value = theSqlGuid;

Well, that's it. I hope it helps someone out there. Cheers.

ASP.NET MVC with Mootools

2009-01-05T16:02:00Z

I've been playing around with ASP.NET MVC for some time now and I'd say I'm in love with it. I've seen several blogs posts here and there about it as well. One of the many things which I got really amazed about was the fact that you can use JSON as your return action on the controller.

I’ve seen Steve Michelotti’s blog post about using jQuery to populate an html combo using JsonResult provided by MVC, and as I already said on this blog, I like Mootools JavaScript framework and I use it when I can. Then, just as a small sample, I’ll replicate what Steve did in his post, but I’ll replace jQuery by Mootools.

So, the first step is to download Mootools framework. Just point your brower to http://www.mootools.net/download and get the latest version. The "Moo Team" provides the framework in 2 compression types and also uncompressed. Download the one which is best for your needs. My suggestion would be to donwload the uncompressed and use it on debug/development time, and in production use one of the compressed types.

Now the idea of this sample is to use Mootools' Request.JSON class to assyncronously retrieve a JSON object from the server side application, which in this case will be a JsonResult in an MVC Controller. For those who are not familiar with MVC Controllers, the idea is to respond to a browser request. The response will be an action perfomed on server side. The action can be a ViewResult (displays a web page), EmptyResult (would be something as void method), RedirectResult, RedirectToRouteResult, JsonResult (Returns a JSON object) and ContentResult (returns, pretty much a text). I'm not going to details here about MVC, since there is already a lot of information available in so many places. I’m going to cover JsonResult on this post, and to get started, open Visual Studio and create a new ASP.NET MVC application by clicking File > New > Project. Then Select Web > ASP.NET MVC Web Application, name it what ever you want. For the sample I named it MvcMootools.

For this sample, I have removed all default scripts from the scripts folder, as well as the login feature (that means, the AccountController, AccountView, and the code which renders the LoginControl) from the project since we won't need login for this sample. Then I added Mootools framework, both the core and more. I have also created my own Master Page and my own CSS file and removed the existing ones.

What should this app do?

1) Get a list of Canadian provinces from a specified data source (xml)
2) Display the list of provinces in a html combo box
3) Get information of a specific province and display it in a panel
4) Do some sliding when displaying the panels

Model

I have created the model classes, which would be the definition of the province as a business object and the reader, which is going to retrieve data from our data source and populate the province object. I have created an Xml file which lists provinces from Canada and some (probably outdated) information about them. The province object attributes are: Code, Name, Population, Flag, Motto, Capital, Largest City and Language.

Controller

I have created my own HomeController which has 3 actions: Display the default view, retrieve the list of provinces in Json format and retrieve one single province in Json format.

View

I’ve created the view folder accordingly to the controller, and created the file Index.aspx to match with our default action in the Home controller, and then I added the JavaScript reference to it.

The Scripts

The JavaScript is really simple. All you have to do is populate the ComboBox and add the event handler for the ‘change’ event. So, what does happen here is that when the page loads, it will send a request to the server (/Home.GetProvinces) through Mootools’ Request.JSON class and populate the combo. And when a Province is selected, it sends another request to the server, but this time it passes the province code on the request. So if you select Ontario, it will send the request to the following Url: “/Home/GetProviceInfo/ON”.

// Using Mootools to add the 'load' and 'error' event handlers
// to the window/page
window.addEvents({
    'load': function() {

        // initializing comboBox and the path for the controllers
        ProvinceSource = "/Home/GetProvinces";
        ProvinceInfoSource = "/Home/GetProvinceInfo/{province}";
        ProvinceCombo = $("cboProvinces");

        FillProvincesCombo();

        // adds the event handler for 'change' event to the combo box
        ProvinceCombo.addEvent("change", function() {
        if(EMPTY != this.options[this.selectedIndex].value) {
            var ProvinceInfoURL = ProvinceInfoSource.replace("{province}",
             this.options[this.selectedIndex].value);
            var jsonThing = new Request.JSON({
                url: ProvinceInfoURL,
                onComplete: function(province) {
                    showResponse(province);
                }
            });
            jsonThing.send();
        } else {
            $("response_div").innerHTML = EMPTY;
        }
    });
    },
    'error': function() {
        alert('An error occured. Check your browser details.');
    }
});

// Fills the comboBox of the Provinces
var FillProvincesCombo = function() {
    var option = new Option("Please Select", EMPTY);
    ProvinceCombo.options.length = 0;
    // firefox doesn't like "ProvinceCombo.add(option);"
    ProvinceCombo.options[0] = option;
    var jsonRequest = new Request.JSON({
        url: ProvinceSource,
        onComplete: function(provinces) {
            // so I had to create this counter
            var c = 1;
            provinces.each(function(province) {
                var option = new Option(province.Name, province.Code);
                // and add each option to a specific index
                ProvinceCombo.options[c] = option;
                // and, of course, increse the value of the index
                c++;
            });
        }
    });
    jsonRequest.send();
}

I have also created a function to display the information of a selected province with an animation.

// does the div transition and displays the information
var showResponse = function(json) {
    var responseDiv = $("response_div");
    var slideHandler = new Fx.Slide('response_div', {
mode: 'horizontal', duration: 300
    });
    if(EMPTY != ProvinceCombo.options[ProvinceCombo.selectedIndex].value) {
     slideHandler.slideOut();
    }
    setTimeout(function() {
    slideHandler.slideIn();
    responseDiv.innerHTML = EMPTY;
    responseDiv.innerHTML = div_template
        .replace(/{code}/g, json.Code)
        .replace(/{name}/g, json.Name)
        .replace(/{largest}/g, json.LargestCity)
        .replace(/{population}/g, json.Population)
        .replace(/{motto}/g, json.Motto)
        .replace(/{language}/g, json.Language)
        .replace(/{capital}/g, json.Capital)
        .replace(/{flag}/g, json.Flag);
    }, 300);
    responseDiv.fade(1);
}

And that’s pretty much it. I strongly suggest you to download the sample application and take a look on the code.
Download Project

Screencast: Test Driven Development with VS 2010

2008-12-18T20:20:00Z

Here's an excelent video about improvements in Visual Studio regarding TDD. It also shows how MVC is TDD focused. Worth to be watched:

http://channel9.msdn.com/posts/VisualStudio/Test-Driven-Development-with-Visual-Studio-2010/

Cheers.

Event in Toronto about Entity Framework

2008-12-02T00:08:00Z

Barry Gervin from ObjectSharp will be speaking about Entity Framework at Palmerston Library Theatre next Tuesday, December 9.
Here's the map to the location. Check Metro Toronto Users' Group website for more details.

Here's the registration website.

See you guys there.

Consuming WebServices in JavaScript with Mootools

2008-11-18T22:44:00Z

As we all know, Visual Studio will have jQuery support for now on, which is a great thing. I use jQuery heavily at work when customizing CRM and also to develop other projects. However, I really enjoy Mootools, which is another great JavaScript framework. Long ago I've seen a post somewhere about calling ASP.NET Web Services. Back then, Mootools was on version 1.1 and now it's 1.2. A few things changed here and there since the last update. Now the core is completely separated from the UI/Animation/Extra features. As I really like this framework, I decided to create a sample project showing how it works on the current version. And how simple it is.

Creating the SOAP Envelope

Basically, to call a Web Service in ASP.NET, we have to create a header with a SOAP envelope and other attributes. Usually, .NET handles it for us. But for this post, I’d like to show how to perform the requests without .NET help.

A SOAP Envelope, is an xml with the necessary parameters to a request, as well as the method's name and it's namespace. Let's say we have a Web Service with a method called GetBooks which receives two string parameters. We could create something like this:

GetSOAPEnvelope : function(WebMethod, Namespace, paramHash) {
    var envelope = '';
    envelope += '<?xml version="1.0" encoding="utf-8"?>\n';
    envelope += '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">\n';
    envelope += ' <soap:Body>\n';
    if(paramHash.getKeys().length > 0) {
        envelope += ' <' + WebMethod + ' xmlns="' + Namespace + '">\n';
        paramHash.each(function(value, key){
                envelope += '   <' + key + '>' + value + '</' + key + '>\n';
        });
        envelope += ' </' + WebMethod + '>\n';
    } else {
        envelope += ' <' + WebMethod + ' xmlns="' + Namespace + '" />\n';
    }
    envelope += ' </soap:Body>\n';
    envelope += '</soap:Envelope>';
    return envelope;
}

The method above returns us a string with our Envelope. Something like this:

<?xml version="1.0" encoding="utf-8"?>
<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
<soap:Body>
    <GetBooks xmlns="http://coolest.namespace.ever/">
      <criteria>string</criteria>
      <keyword>string</keyword>
    </GetBooks>
</soap:Body>
</soap:Envelope>

Note that on the GetSOAPEnvelope signature, we're passing paramHash, which is Mootools' implementation to hash. So before we call the method we should create a hash like this:

var criteria = "genre"; var keyword="fantasy";
var params = new Hash({criteria:criteria, keyword:keyword});

And finally call the GetSOAPEnvelope Method:

var theEnvelope = GetSOAPEnvelope('GetBooks', 'http://coolest.namespace.ever/', params);

Calling the Web Service

On Mootools 1.2, we have a Request object (docs) which allows us to perform asynchronous calls. To perform a call to a Web Service, we need an instance of this object and we need to inform the service url, the method, the header and the soap envelope. Also, we need to inform what to do in case of sucess or failure. Something like this:

var ajax = new Request({
    url: webservice_address,
    data: theEnvelope,
    method: 'post',
    headers: {
        'Content-Type': 'text/xml; charset="utf-8"',
            'SOAPAction': 'http://coolest.namespace.ever/GetBooks'
    },
    onComplete: function(responseXML) {
        // some action
    },
    onFailure: function(instance) {
        // some action
    }
});
// then we execute
ajax.send();

There are more things you should take care of to put an application running with Web Serice calls from JavaScript. I'm not going to details on this post, but you should take care of security for sure. Please take a look on the sample which has a simple application for reference (hopefully it will work).

Please visit Mootools WebSite, User Group or the Forum to get more resources. You can do amazing things with this framework.

Here's a Sample Project
(don't forget to change the web service address)

Event in Toronto: 5 Practical Tips for Creating Great User Experience (UX)

2008-11-18T04:34:00Z

Qixing Zheng (from http://blogs.msdn.com/canux/default.aspx) will be speaking about User Experience on Metro Toronto .NET User Group meeting this wednesday evening (Nov 19th). Here's the link to Register to the event. It will take place at the Palmerston Library Theatre (close to TTC Bathurst). Here's the map.

See you guys there.

Get JSON from SQL Server

2008-11-17T17:01:00Z

On Thomas Frank's blog there is an interesting post which shows how to get JSON from MySql, and I though about doing the same to SQL Server since I use it more than any other database lately. So what I did was create a stored procedure which uses cursor to format the string with our data. I'm not really good with SQL, so I managed to use two, and the procedure itself isn't really what you would call a masterpiece. Sorry about that. But what I want to show here is just a concept tho.

Here's the Procedure.

When I execute it like this:

exec getJson 'announcement', 4

I'll get a single column named 'json' with *all* my data, in this case, 4 registries from a table named announcement. Something similar to this:

[{'Id':'1','Title':'<h3>1. Lorem ipsum dolor sit a','Date':'Jun 16 2008 5:44PM','Text':'<p>Lorem ipsum dolor sit amet,'},{'Id':'2','Title':'<h3>2. Quisque aliquet accumsa','Date':'Jun 16 2008 5:44PM','Text':'<p>Lorem ipsum dolor sit amet,'},{'Id':'3','Title':'<h3>3. Duis consequat laoreet<','Date':'Jun 16 2008 5:44PM','Text':'<ul><li>Duis consequat laoreet'},{'Id':'4','Title':'<h3>4. Aenean consectetuer</h3','Date':'Jun 16 2008 5:44PM','Text':'<p>Quisque aliquet accumsan le'}]

Then if you're using one JavaScript widget to slide news/announcements, it might be useful. Just pass this returning text to the eval method and you have a fresh json object, ready to use.

NOTE: it shouldn't be used with large amounts of data since you're populating a varchar sql variable, and it has a limit. If you try to pass more data than it can handle, you'll get errors.

Dumping Properties of an Object

2008-11-17T15:22:00Z

Sometimes I see myself in weird situations, having to debug applications in test environments, but for some reason I'm not able to use Visual Studio. Not going to specific details about my environments here. However, it's possible that someone out there have a similar issue. For these cases, I use Reflection to dump the contents of my objects into a string and save it in a text file to analyze later.

This is the "Dump" method:

public static string Dump(Object obj) {
    string dump = string.Empty;
    try {
        Dictionary<string, string> dictionary =
            new Dictionary<string, string>();
        Type type = obj.GetType();
        System.Reflection.PropertyInfo[] propInfo = type.GetProperties();
        for (int i = 0; i < propInfo.Length; i++) {
            System.Reflection.PropertyInfo pi = (System.Reflection.PropertyInfo)propInfo.GetValue(i);
            dictionary.Add(pi.Name,
                (null == pi.GetValue(obj, new object[] { })) ?
                "null" : pi.GetValue(obj, new object[] { }).ToString());
        }
        foreach (System.Collections.Generic.KeyValuePair<string, string> pair in dictionary) {
            dump += string.Format("{0}\t{1}\n", pair.Key, pair.Value);
        }
    }
    catch (Exception ex) {
        // use a proper log instead of a text file..
        System.IO.File.AppendAllText(@"C:\myapplicationname.dump.exception.txt",
            "--------------------------------------\n"+
            "Exception:\n\tSource: " + ex.Source +
            "\n\tMessage: \n" + ex.Message +
            "\n\tStack: \n" + ex.StackTrace +
            "\n------------------------------------");
    }
    return dump;
}

Sometimes I use this technique to debug CRM Plug-ins. I hope it's useful for you guys.
Here's a Sample Console Project using the Dump method.

Restoring Visual Studio Settings

2008-11-05T14:33:00Z

What to do when Visual Studio starts behaving weird? Sometimes it happens that Visual Studio stop displaying the Toolbox, Server Explorer or even the Properties, it's not really common but still happens quite a lot, specially if you're running Windows Vista. The quick answer to that is to restore Visual Studio Settings. Crashing might not be the only reason to restore. Maybe you just didn't configure it properly and want to go back to the original settings. Here's how you work with Visual Studio Settings.

Restore Default Settings

To restore Visual Studio defalt settings:

Click on Start menu;
All Programs;
Visual Studio 2005 (or 2008);
Visual Studio Tools
Visual Studio 2005 (or 2008) command prompt;

The Picture 1 shows the path.

It will open the command prompt, and all you have to do is type:

>devenv /ResetSettings

It will Restore the IDE's default settings. The next time you open Visual Studio, it will behave just like a fresh installation, which means all your configs are gone. The ones you wanted to remove and the ones you wanted to keep. You'll have to edit your IDE again to make it look like what it was before you reseted the settigns.

Saving Your Custom Settings

To save your custom settings, click on Tools > Options; on the tree view, select "Environment Options" and click on the node "Import and Export Settings" as shown on the Pircure 2. There you can see where the settings for Visual Studio are being saved. You can change the path, so it saves somewhere else. Alternatively or go directly to the path and create a copy of the file, then paste it somewhere else. This way you'll have a separate copy of your custom settings.

Loading Saved Settings

Once you have your settings saved, you can restore it to any Visual Studio. To do so, run the same command you did to reset the settings, but this time passing the path to your saved settings file:

>Devenv /ResetSettings "C:\MyFolder\MySettings.settings"

This command will open a new instance of Visual Studio with the settings stored on the given file.

"The End"