James Senior's Blog

Building Twitter Search using the ASP.NET Ajax Library Beta – Part II

8. December 2009 19:41 By James 344 In ASP.NET | ASP.NET Ajax Library | Twitter

In the first installment of this two-part series we explored how you can consume JSONP data sources using hardly any code thanks to the ASP.NET Ajax Library and the powerful networking stack that lies within. This time around we’ll take a look at doing something useful with the data and render it using client templates, again, using the ASP.NET Ajax Library.

In the next few paragraphs, this is what we will build:

At this stage we have received data from the Twitter endpoint and now we want to do something useful with the JSON. As a reminder, here is the code required to get to this point:

 <script src="http://ajax.microsoft.com/ajax/beta/0911/start.debug.js" type="text/javascript"></script> 
     
    <script type="text/javascript">
 
        Sys.require([Sys.scripts.WebServices], function callback() {
            Sys.Net.WebServiceProxy.invoke(
                "http://search.twitter.com/search.json?q=jsenior",
                null,
                true,
                null,
                function (result) { alert(result.results[0].text) });
        });
 
        // Workaround for a bug in ASP.NET Ajax Beta, you don't need this in the final version
        function createElement(tag) { return document.createElement(tag); }
  
    </script>
 

Let’s first construct how our template will look. I want to display some basic information from a twitter search, like twitter handle, the contents of the tweet, when it was posted, and links to Twitter.com so the user can see the original tweet and the profile of the user. Here’s what that looks like based on the documentation provided by Twitter on how their API returns data.

 <div id="TweetList">
    <ul id="resultsView" class="sys-template">
        <li>                
            <a sys:href="{{ 'http://twitter.com/' + from_user }}">
                <img sys:src="{{ profile_image_url }}"  />                 
                <b>@{{ from_user }}</b></a>                     
            says:                                 
            <span class="tweet_created_at">
                (<a sys:href="{{ 'http://twitter.com/' + from_user + '/statuses/' + id }}">
                {{ new Date(created_at).format('dd MMMM yyyy HH:mm:ss') }}</a>)
            </span>                
            <br />
                {{ text }}
            <br />   
        </li>
    </ul>
</div>
 

As you can see, the template is fairly straightforward and the HTML is quite clean. If you run the code in it’s current form you get the template output to the browser including all the curly braces. This is to be expected because we haven’t attached the DataView control to the tempate – that’s the next step.

First we use the Script Loader to bring in the things like DataView, WebServices, Globalization (for the date formatting), and Watermark that we need for this app. We’ll use the Watermark later on when we add an input box for specifying a search query. Remember that the Script Loader takes care of loading all these components so you don’t need to know their dependencies – which is very handy with complex scripts.

  Sys.require([Sys.components.dataView, Sys.scripts.WebServices, Sys.scripts.Globalization, Sys.components.watermark], function () {
 
            var myDV = Sys.create.dataView("#resultsView");

Now that we have told the Script Loader to bring in the DataView control, we can assign it to our template, thus:

 var myDV = Sys.create.dataView("#resultsView");
 

Notice how we use the Sys namespace to do this (Sys is the ASP.NET Ajax Library namespace) and select the div using its ID, “resultsView”. We are effectively telling the library that we want whatever is in the div to be data aware so when we bind the DataView it will repeat its contents for each row of JSON data – in this example we are repeating the LI element.

At this point let’s stop and add an input box and button to our page so we can specify the query to make to Twitter’s search API. Use this code just before your template DIV.

 <div id="queryarea">
        <input id="query" />   
        <button id="btnQuery">Submit</button>
    </div>
<div id="TweetList">
    <ul id="resultsView" class="sys-template">
        <li>
 

Nice and easy, huh? Throughout the rest of the sample we are going to refer to the input, “query”, exactly twice, so for performance reasons I am going to select it once and then store that reference in a var so I don’t need to select it any more than is absolutely necessary (this takes extra cycles for libraries like ASP.NET Ajax Library and jQuery). Here’s the code you need to add under your existing JavaScript.

 var queryBox = Sys.get("#query");
 

Remember, when we brought in the Watermark control (part of the 35 free client-side controls in ASP.NET Ajax Library)? We’re ready to use it! We are going to apply the Watermark control to the input box using the var we have created above. Here we go:

Sys.create.watermark(queryBox, "Search Twitter...", "watermark");

The first two parameters for the above method are fairly straightforward and the third one applies a style to the input box and its watermark so you can make it look how you want.

So now we have that sorted, it’s time to wire up our button to do the search when the user clicks the button. We use the addHandler method for this purpose:

 Sys.addHandler("#btnQuery", "click", function () {
 
Sys.Net.WebServiceProxy.invoke("http://search.twitter.com/search.json?q=" + (encodeURIComponent(queryBox.value)), null, true, null, function (result) {
    myDV.set_data(result.results);
});
 
});
 

This method’s first parameter takes the selection of an element, in this case “btnQuery” and then applies an HTML event, “click” to it. It then has a callback function that will fire when the user clicks the button; here we are just using an anonymous function which should be familiar to you. Yes, it’s the WebServiceProxy.invoke method, which calls the Twitter Search API and passes it the search string. We pass the results of the query into the function and then bind the dataset to the DataView using myDV.set_data.

Twitter nests its search results in a JSON array so that’s why we must use result.results to get to the data.

We are pretty much set. If we run the code then we’ll have the ability to search twitter and have the results displayed in the template we’ve setup. However, those among you who have been paying attention will notice that we still have our ugly templates displayed with all the curly braces etc prior to searching. Let’s apply a style to hide that and and the same time make our UI a bit more appealing – right now it looks like a dog’s dinner (Englishism for looking a “mess”).

Adding our styles to the page with all the JavaScript code we get the following. The key part for hiding the template is .sys-template. Below is the full HTML page and you can just copy and paste this and you will be good to go.

 <!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>
    <title>Untitled Page</title>
    <style type="text/css">
    
        .sys-template {
            display: none;
        }
        
        #queryarea 
        {
            width: 500px;
            border: 3px solid #1958b7;   
            padding: 10px;
        }
        
        input {
            height: 30px;
            width: 280px;
            font-size: 14pt;
            border: 2px dotted #2586d7; 
            padding: 5px;           
        }
        
        button 
        {
            height: 45px;
            width: 110px;
            border: 2px solid #1958b7;
            background-color: #FFFFFF;
            font-size: 14pt;
            color: #1958b7;
        }        
        
        .watermark 
        {
            font-style: italic;
            color: Gray; 
        }
        
        
        .tweet_created_at {
            font-size: 8pt;
            text-align: right;
        }
        
        img {
            height: 50px;
            width: 50px;
            float: left;
            padding: 5px;
            margin: 5px;
            vertical-align: top;
            margin-bottom: 15px;
            border: 2px solid white;
        }        
        
        #TweetList {
            width: 490px;
            padding: 0 0 1em 0;
            margin-bottom: 1em;
            font-family: 'Trebuchet MS', 'Lucida Grande',
              Verdana, Lucida, Geneva, Helvetica, 
              Arial, sans-serif;
            font-size: 10pt;            
            color: #333;
        }
        
        #TweetList ul {
            list-style: none;
            margin: 0;
            padding: 0;
            border: none;
        }
        
        #TweetList li {
            border-bottom: 1px solid #90bade;
            margin: 0;
            display: block;
            padding: 5px 0px 5px 0.5em;
            border-left: 10px solid #1958b7;
            border-right: 10px solid #508fc4;
            background-color: #2175bc;
            color: #fff;
            text-decoration: none;
            width: 100%;
            
            height: 85px;
        }
 
        html>body #TweetList li a {
            width: auto;
            color: White;
        }
 
        #TweetList li a:hover {
            color: Blue;
        }
 
 
    </style>
 
    <!-- Get the script loader from the CDN -->
    <script src="http://ajax.microsoft.com/ajax/beta/0911/start.debug.js" type="text/javascript"></script>
    <script src="http://ajax.microsoft.com/ajax/beta/0911/Extended/ExtendedControls.debug.js" type="text/javascript"></script> 
    
    <script type="text/javascript">
    
        // We need dataView for templating, Web Services for JSONP call, Globalization for formatting the date, watermark for the input box
        Sys.require([Sys.components.dataView, Sys.scripts.WebServices, Sys.scripts.Globalization, Sys.components.watermark], function () {
 
            var myDV = Sys.create.dataView("#resultsView");
            var queryBox = Sys.get("#query");
 
 
            Sys.create.watermark(queryBox, "Search Twitter...", "watermark");
            
 
            Sys.addHandler("#btnQuery", "click", function () {
 
                Sys.Net.WebServiceProxy.invoke("http://search.twitter.com/search.json?q=" + (encodeURIComponent(queryBox.value)), null, true, null, function (result) {
                    myDV.set_data(result.results);
                });
 
            });
 
        });
               
    </script>
    
    <script type="text/javascript">
 
        // Workaround for a bug in ASP.NET Ajax Beta, you don't need this in the final version
        function createElement(tag) { return document.createElement(tag); }
        
    </script>
 
</head>
<body>
    <div id="queryarea">
        <input id="query" />   
        <button id="btnQuery">Submit</button>
    </div>
<div id="TweetList">
    <ul id="resultsView" class="sys-template">
        <li>                
            <a sys:href="{{ 'http://twitter.com/' + from_user }}">
                <img sys:src="{{ profile_image_url }}"  />                 
                <b>@{{ from_user }}</b></a>                     
            says:                                 
            <span class="tweet_created_at">
                (<a sys:href="{{ 'http://twitter.com/' + from_user + '/statuses/' + id }}">
                {{ new Date(created_at).format('dd MMMM yyyy HH:mm:ss') }}</a>)
            </span>                
            <br />
                {{ text }}
            <br />   
        </li>
    </ul>
</div>
</body>
</html>
 

This brings to close this 2-part series showing how to create a Twitter search in pure client-side code thanks to the ASP.NET Ajax Library. We’ve covered the following important topics:

Getting the library from the Microsoft Ajax CDN
Using the Script Loader to load and execute all the required scripts and components
Applying the DataView Control to the Page
Creating a watermark
Adding an onClick handler to the button
Calling the Twitter Search API using JSONP
Setting up our client template

158e45f0-9279-448c-8a8d-a9fdc42cd567|5|4.2

Tags:

Building Twitter Search using the ASP.NET Ajax Library Beta – Part 1

30. November 2009 10:00 By James 268 In ASP.NET | ASP.NET Ajax Library

Last week we launched the ASP.NET Ajax Library Beta during PDC, oh and we donated it to the CodePlex Foundation under new BSD license (FTW). As the email volume has been fading away running up to Thanksgiving in the US and everyone at work is recovering from conferences, I took this golden opportunity to sit down and build a small sample with the new library now that we are in Beta.

Since the ASP.NET Ajax Library takes care of JSONP requests for me (which enables cross-domain service requests) it is really easy to hit a service like the Twitter Search API which in turn provides me with a JSON result and a callback to trigger functionality which does something with the result.

This allows us to build a Twitter Search application that is running completely on the client-side depending on no servers apart from those at Twitter HQ (we kind of need them for the search results, remember). In Part 1 of this 2-part series I will look at how to call the Twitter Search service using the WebServiceProxy.invoke method and then in subsequent posts I will look at using the data once in a DataView and how we can use client-side template to render the results.

First we start by exploring the WebServiceProxy.Invoke method – which is how we call the Twitter APIs.

 Sys.Net.WebServiceProxy.invoke("http://search.twitter.com/search.json?q=@jsenior", null, true, null, doSomething(result));
 

The above code will make the required call to the Twitter Search API and takes a few parameters including an onSuccess callback function (doSomething) so we can then do something with the result set. We can also specify things like the methodName (for webservice requests), query parameters, timeout etc – for the full set of params check out the MicrosoftAjaxWebServices.debug.js file. Behind the scenes, the invoke method figures out if you are making a request cross-domain in which case we require the call to be JSONP so we can receive the callback on our end.

To get access to WebServiceProxy.invoke we need have referenced a number of scripts from the ASP.NET Ajax Library including MicrosoftAjaxWebServices.js. The most sensible way to do this is to use the new Script Loader which takes care of loading not only this particular script but also any others from the library on which it is dependant. It does this in a really efficient way both in parallel and asynchronously allowing scripts to be loaded but not executed according to a dependency tree. Furthermore, you don’t even need to reference the Script Loader from a local folder or web server, you can grab it direct from the Microsoft Ajax CDN:

 <script src="http://ajax.microsoft.com/ajax/beta/0911/start.debug.js" type="text/javascript"></script>
 

You’ll notice that we do versioning based on year and month so that your apps won’t break when we bring out new versions.

Once you’ve got the Script Loader referenced from the CDN, you can start bringing in the components you need and in this sample, so far, we need Sys.scripts.WebServices. We use Sys.require to tell the Script Loader that’s what we need and also can provide a callback function for it to call once everything has been loaded and we are good to start using the script.

 Sys.require([Sys.scripts.WebServices], callback);
 

If we put all this code together and push one of the result tweets into a simple alert to show that it works, we get the following code:

 <script src="http://ajax.microsoft.com/ajax/beta/0911/start.debug.js" type="text/javascript"></script>
    
    <script type="text/javascript">
 
        Sys.require([Sys.scripts.WebServices], function callback() {
            Sys.Net.WebServiceProxy.invoke(
                "http://search.twitter.com/search.json?q=jsenior",
                null,
                true,
                null, 
                function (result) { alert(result.results[0].text) });
        });
 
    </script>
 

Try it yourself by copy and pasting it into a blank HTML document, it’s that easy.

In the next post, I’ll show you how to do something useful with the result set by using the DataView component and client-templates. Stay tuned.

For more information about the ASP.NET Ajax Library including samples, downloads and docs check out the wiki here: http://www.asp.net/ajaxlibrary

*UPDATE*

There is a bug in the beta where you need to include the following method to get the sample working. Sorry to those who’ve been having trouble getting it working. Add this to your javascript code and all will be right in the world.

// Workaround for a bug in ASP.NET Ajax Beta, you don't need this in the final version
         function createElement(tag) { return document.createElement(tag); }

474bf9be-153a-474d-930b-9fa1e90c019b|3|4.7

Tags:

Building High Performance Web Applications

23. November 2009 10:00 By James 291 In ASP.NET | ASP.NET Ajax Library | Performance

At the PDC (our dev conference) we release the Beta version of the ASP.NET Ajax Library and also donated it to the CodePlex Foundation as their first project. For this version of the library we’ve focused on four areas of functionality:

Power for developers

Build data-centric web apps using advanced client-side libraries and controls
Keep your markup clean and standards-compliant with imperative coding
Make it easier to code using JavaScript IntelliSense (autocomplete) in Visual Studio
Keep it simple to load and execute your scripts using the advanced management and execution features of the Script Loader

Performance

Interoperability

Create apps that work across all browsers and any platform, including ASP.NET, PHP, and Ruby on Rails
Use powerful jQuery selection syntax and Ajax Control Toolkit controls together
Explore the code and make modifications -- it’s open source!

Extensibility

Create your own controls by extending ones like the DataView class

Getting detailed about Performance

Dan Wahlin and I put together the following whitepaper that talks about how you can use the features in ASP.NET Ajax Library to speed up the performance of your web applications. You can download the PDF here or read it below:

Building High Performance Web Applications

958ddb48-abb0-47ff-b764-900a0e895292|4|4.8

Tags:

News on the ASP.NET Ajax Library Beta

18. November 2009 03:31 By James 633 In ASP.NET | ASP.NET Ajax Library | Codeplex Foundation

The ASP.NET Ajax Library Beta was released today! The five big things I’m going to talk about in this post are:

The ASP.NET Ajax Library is now in Beta
Contributing the ASP.NET Ajax Library to the CodePlex Foundation
Merging the Ajax Control Toolkit with the ASP.NET Ajax Library
Plans to provide support for the ASP.NET Ajax Library
ASP.NET Ajax Library features that provide:
- Powerful developer libraries and tooling support
- Performance – build high performance websites
- Interoperability – use it with any server platform and alongside jQuery
- Extensible – build on top of the library and inherit from controls like DataView

Since July last year the team has been cranking out new features in 6 previews, each with exciting innovations including powerful productivity benefits for developers, performance enhancements to make your website faster and making the library interoperable with multiple server platforms and other JavaScript libraries like jQuery.

Contributing the ASP.NET Ajax Library to the CodePlex Foundation

When it comes to the web, open source and licensing is important – see yesterday’s Open Web Foundation (OWF) announcement about Microsoft’s contributions in the Open Web. The ASP.NET Ajax Library is the first project to be contributed to the CodePlex Foundation and we are incredibly excited because it allows the project to take other contributions by the community and be driven by your feedback. The ASP.NET Ajax Library will be distributed under the New BSD license.

Merging the Ajax Control Toolkit with the ASP.NET Ajax Library

Before today, the Ajax Control Toolkit (ACT) was an impressively popular download from CodePlex.com with 25,000 downloads per week. ACT provides, and will continue to provide, loads of rich controls for ASP.NET Web Forms developers to add Ajax experiences to their web applications without the need to write client-side code. In ASP.NET Ajax Beta, we have converted 34 controls to pure client script, so now developers who write client-side code (including ASP.NET MVC, PHP and Ruby on Rail developers etc.) can use them in their web applications too. As a bonus we’ve also made it possible to instantiate the ACT controls as jQuery Plugins – part of the interoperability efforts we have been making. (More on that later.)

Here’s an example of instantiating a Watermark ACT control using the new syntax:

 <script src="../scripts/start.debug.js" type="text/javascript"></script>
<script src="../scripts/extended/ExtendedControls.debug.js" type="text/javascript"></script>
 
<script type="text/javascript">
 
    Sys.require(Sys.components.watermark, function () {
        Sys.create.watermark("#input1", "Enter something...");
    });
    
</script>
 

Plans to provide support for the ASP.NET Ajax Library

Knowing that there is someone on the end of the phone to talk to about an issue is important to our developers. When the full version of the ASP.NET Ajax Library is released Microsoft will provide full product support. We already provide full support for jQuery and we will continue this going forward.