David Hurth's blog

Bluff - JavaScript Graphs

If you want to display data in a graph dynamically in a web page, you have a few options. You can create your own library to create the Graph or use an existing one. If you decide against using the Google Chart API you may want to look into Bluff. Bluff is a JavaScript library that uses canvas (Google’s ExCanvas is used to allow Internet Explorer support) to create a graph on a web page.

Below is an example of a graph and the code that is used to create it.

        <canvas id="example"></canvas>
        
        <script type="text/javascript">
          var g = new Bluff.Line('example', 400);
          g.theme_37signals();
          g.title = 'My Graph';
        
          g.data('Apples', [1, 2, 3, 4, 4, 3]);
          g.data('Oranges', [4, 8, 7, 9, 8, 9]);
          g.data('Watermelon', [2, 3, 1, 5, 6, 8]);
          g.data('Peaches', [9, 9, 10, 8, 7, 9]);
        
          g.labels = {0: '2003', 2: '2004', 4: '2005'};
        
          g.draw();
        </script>

You can download Bluff here.

You can read more about Bluff here.

Get cross-site JSON via HTTP with GWT and the GWT Designer by Instantiations

Tagged:  

The GWT is a great development tool for designing Ajax applications. Since JSON is a great way to exchange data from the server to the client, in many cases, it is good to find a tutorial combining the two. Well, over at the Giant Flying Saucer blog they have put together a nice tutorial about cross-domain JSON and GWT. The tutorial is written for users of the GWT Designer, but even if you don't use that tool this tutorial has some good information.

Below is an excerpt from the tutorial.

If your a web developer then chances are pretty good you've already heard of and possibly used JSON. In a nutshell, JSON is a lightweight way to exchange data. In the second tutorial we did our communications to and from the server via RPC (Remote Procedure Calls). This time we'll modify the code to use JSON instead and call a third-party server (we will simulate this with a Python web server on the same computer).
Assuming you've got everything ready go ahead and open the project now. One of the first things the GWT JSON tutorial shows is how simple the JSON format is:

XML:

[
  {

    "symbol": "BA",
    "price": 87.86,
    "change": -0.41
  },
  {

    "symbol": "KO",
    "price": 62.79,
    "change": 0.49
  },
  {

    "symbol": "JNJ",
    "price": 67.64,
    "change": 0.05
  }
]

You can see JSON is just name/value pairs and human readable. Its simpler than XML and less verbose (less eyeball noise). Keep in mind though if you do need XML support that GWT offers that as well. Today though we are focusing purely on JSON.
So how do we actually get the JSON from the server to the client? Well, fortunately GWT provides everything we need in the form of the HTTP client classes. There are three items in particular we'll use from there:
1. RequestBuilder and calling the "sendRequest" method

2. RequestCallback which (remember the callback we had in the second tutorial?) will call "onResponseReceived" on a successful callback or "onError" if something goes wrong.
- Note: Toward the end of this tutorial we will replace the RequestBuilder code.

You can read the full tutorial here.

My Google Chrome Experience

Tagged:  

I've been using Google Chrome for the past few days and have been happily surprised by what I've seen. When you start Chrome you can hear that V8 engine rumbling and pages render extremely quickly. I've loaded many pages on IE7, Firefox 3 and Google Chrome on the same machine and it is incredible how much faster the page renders on Chrome than the other two browsers.

While I really like Firefox, it has some memory management issues that Chrome appears not to have. I've been surfing major sites and haven't had any issues rendering and interacting with pages correctly (while I am assuming that some JavaScript heavy sites may have issues). Like Firefox, Chrome comes with some decent developer tools, out of the box which put IE to shame.

With Chrome being from Google, I can see it having a better chance of competing with IE as Google has the money and resources to try and get more users to start "Chroming". It will be interesting to see what will happen once Chrome is out of beta and how it will compete with IE.

Even though Chrome is still in beta, I've started using it for the majority of my browsing and haven't had any issues (although I'm sure there are many that have found issues). So, if you haven't already, go download Chrome and enjoy a new web browsing experience.

Get Started with CSS 3

Tagged:  

While CSS 3 does not yet have full browser support (currently Opera and Safari are leading the way with FireFox said to be adding support in version 3.1) you may want to look into CSS 3 now to get ready for it. Well, over at webmonkey.com they have put together a nice tutorial to get you started.

Below is an excerpt from the post.

Rounded Corners

The number one rule of Web 2.0: If it has rounded corners, it's modern.

Say what you will about the design aesthetics of rounded corners, at least with the new border-radius rules you won't have to resort to images and JavaScript to get that web 2.0 look.

Say you have some HTML that looks like this:

<p class="r-box">Try doing this without images</p>

Add this style definition to round off the element:

.r-box {
	background-color: #666; 
	color: #fff; 
	line-height: 20px; 
	width: 200px; 
	padding: 10px; 
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px;
}

Here's a live demo for those of you with Firefox or Safari:

Try doing this without images

If you're using a different browser here's a screenshot of how Safari displays the above block:

Image:css3_shot1.jpg



So what did we do? Well the first five lines are your normal CSS 2 declarations to give things a bit of style. It's the last two lines we're interested in. The actual CSS 3 declaration is border-radius. Until the specs are finalized the various browser manufacturers have enabled the features via prefixes -- the -moz- prefix is what Firefox uses and the -webkit- prefix is for Safari.

The rule works like this (where TopLeft, TopRight, etc... is a numeric value in pixels):

border-radius: TopLeft TopRight BottomRight BottomLeft;
border-radius: TopLeft BottomLeft+TopRight BottomRight;
border-radius: TopLeft+BottomRight TopRight+BottomLeft;
border-radius: ALL;

So in our case we used the later rule, but if you want just two rounded corners, you would do this:

-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-topright: 10px;

Note: as of this writing, the W3C is planning to move toward the syntax Mozilla uses, rather than that of Safari. Because the border-radius spec is not finalized, Opera chose not to support it in Opera 9.5.

The nice thing about border-radius is it degrades gracefully. If a browser doesn't understand it, it simply renders a square box.

You can read the full post here.

So, use this tutorial to get prepared for CSS 3 (if IE ever gets their act together) as it will really make your pages look very nice.

Auto Resize iFrames - Part 2

Tagged:  

In part 1 of this 2 part series on auto re-sizing iFrames I explained the basic principal of how it would work (you can read part1 here). Today I will give code examples to better demonstrate how you would accomplish this in the real word.

Below is an example of the server side proxy that would be used (this example is written in classic asp [as I needed to use this scripting language for the server that this script was to run on] but this could easily be re-written in your favorite language).

<%@ LANGUAGE=VBScript%>
<% 
            Response.Buffer=True

            Dim MyConnection
            Dim TheURL  

            ' Specifying the URL
            TheURL = Request("url")

            Set MyConnection = Server.CreateObject("Microsoft.XMLHTTP")

            ' Connecting to the URL
            MyConnection.Open "GET", TheURL, False

            ' Sending and getting data
            MyConnection.Send 

            TheData = MyConnection.responseText
            'Set the appropriate content type

            Dim MoreData, MoreData2

            MoreData2 = "<script type='text/javascript'>function Loadcontent(){var iframes = window.parent.document.getElementsByTagName('iframe'); for(var a=0; a</head>"
>"

             MoreData = TheData
           

            MoreData = Replace(TheData,"</head>",MoreData2)

            Response.Write (MoreData)

            Set MyConnection = Nothing     

%>

The below JavaScript is the most important part of the above code (I've formatted it to make it easier to read). In the proxy script it adds this code to the head tag of a page to accomplish the resizing. This code has been tested in IE6 and IE7, but needs a bit of tweaking to work cross browser (it re-sizes the iFrame incorrectly in FireFox, but this is easily fixed and I will post this code when I finish it).

<script type='text/javascript'>
	function Loadcontent()
	{
	var iframes = window.parent.document.getElementsByTagName('iframe');
		for(var a=0; a

So, in order to have an iFrame that re-sizes you would simple call the proxy url from the iFrames src property and set the url parameter (that us passed into the proxy) to the url of the page that you would like to display in the iFrame.

While this iFrame method accomplishes loading content from a different site you could accomplish the same thing using a div element and the XMLHTTPRequest object in JavaScript. Both methods would require the use of a cross-domain proxy (if loading content from a different site). I would probably use the div XMLHTTPRequest element if I am making a new application (as the div element re-sizes very well on it's own). However, if you have an application that already uses iFrames, then this script would be an easy way to make them re-size.

Auto Resize iFrames - Part 1

Tagged:  

At times you may need to load content from other domains or websites into a web application that you are creating. One of the most common ways to accomplish this is to use an iFrame to load the content (this is assuming that you just want to display a web page in your application). In some cases you will want to load content and have the iFrame re-size based on the content that is being loaded into the iFrame.

The interesting thing is that there is no easy way to do this. You can't set the iFrame's width and height properties to 100% as this will have the iFrame take over the screen and not just re-size based on content. The solution that I came up with is the use of a server side proxy (which gets around cross-domain issues) and some javascript that is added from the server side proxy code to re-size the iFrame.

This first post will give you an idea on how this would be accomplished. In my next post I'll talk about the code that would be used and discuss the pros and cons (as well as other methods that could be used to accomplish the same effect). So make sure to check your feed reader for the next post...

Create Web 2.0 Progress Bars: jQuery, DHTML, JS, CSS, Photoshop

Tagged:  

Progress bars are extremely usefull in Ajax applications as it lets people know when you are loading information in the background. Well the DeveloperFox blog has put together a nice list of progress bars using jQuery, JavaScript, CSS and PhotoShop.

Below is an excerpt from the post.

jQuery Progress Bars

jQuery.UI ProgressBar Widget

1

HOWTO: PHP and jQuery upload progress bar

2

jqUploader

“jqUploader is a jquery plugin that substitutes html file input fields with a flash-based file upload widget, allowing to display a progressbar and percentage. It is designed to take most of its customization from the html code of your form directly - so you don’t have to do things twice . For instance, the maximum file size, if specified via html, will be recognized and used in the rich upload interface generated by jqUploader.

The plugin uses the form action attribute value (normally pointing to a server side script handling the upload and other data manipulations, and appends a variable “jqUploader=1? so that the upload code is initiated when it sees that key/value is on the posted data.”

3

Progress Bar Plugin

This is a progress bar plugin for jQuery.

4

To read the full post click here.

Continuous scrolling pattern using JavaScript and ASP.NET

Tagged:  

You have probably seen some of the search engines where you can keep scrolling through your search results and they load as you scroll without clicking a next button. Well if you have been looking for a good example the Janko at Warp Speed blog has put together a good example using .Net and JavaScript.

Below is an excerpt from the post.

Implementation

continuous scrollingTypically, user is notified that new content is being loaded by showing indicator in the bottom right angle of a content (as you can see on the screenshot on the left).

Generally, it looks like this: Initial content is loaded on the start. When user scrolls down to the end of the content, JavaScript function calls local WebService and a set of new items is sent back to the client.

Let's make an example. Since I use Google Reader every day, let's make something that looks like it. Ok, I admit, I stole colors for this example :)

This is going to be very simple. I have a list of countries stored in SQL database. Each country has ID, Name and number of Internet users. I would like to show the complete list in a div, and to enable continuous scrolling. Image on the left shows our example.

So, I will define CountryWS that will get the data from the database. This is the first catch and might be tricky. Since new data have to be loaded on request (precisely on scroll) I have to do paging in the database. I do that by sending two parameters to my stored procedure: PageIndex and PageSize. PageIndex will tell my stored procedure which page to query, and PageSize - how many items to retrieve.

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class CountryWS : System.Web.Services.WebService
{
    [WebMethod]
    [ScriptMethod]
    public List<Country> GetMoreCountries(int pageIndex, int pageSize)
    {
        System.Threading.Thread.Sleep(1000);

        SampleDAO sampleDAO = new SampleDAO();
        List<Country> countries = sampleDAO.GetCountriesPaged(pageIndex, pageSize);
        return countries;
    } 
}

That is "the server" part. Let's see what will happen on the client. All items will be rendered in a div that has onscroll handler defined.

<div id="content" runat="server" onscroll="OnDivScroll()">
    <%--Items will be rendered here--%>
</div>

OnDivScroll function will do a simple job - it will determine if the user scrolled down to the near bottom of the content. Then it will call CountryWS and pass the result to HandleRetrievedData function.

function OnDivScroll()

    var content = document.getElementById('<%=content.ClientID %>');
    if(content.scrollTop < content.scrollHeight - 500)
        return;

    CountryWS.GetMoreCountriesObject(pageIndex, pageSize, HandleRetrievedData );
}

This is a second catch. Why near? The answer is simple - if you want your user to read smoothly, you'll have to load a new content BEFORE he/she reaches the end of the content. Ok?

And for the end, HandleRetrievedData function will parse the result and render new content.

function HandleRetrievedData(result)
{
    var content = document.getElementById('<%=content.ClientID %>');

    for (var i = 0; i <= result.length - 1; i++)
    {
        content.innerHTML += "<div class='entry'><b>" +
            result[i].CountryName + "</b> (" + result[i].Symbol + ") - " +
            result[i].InternetUsers + " internet user(s)</div>";
    }
}

You will notice that sample code is more complex than this example, but I will let you sweat a little bit ;)

You can read the full post here.

Introducing Content Licenses on Google Code

Tagged:  

If you host or get code from Google Code then this will be of interest to you. Google code now has the availability of content licenses. This will help promote the best practice of licensing open source code.

The Google Code team is pleased to announce the availability of content licenses for projects hosted on code.google.com. Projects owners may now select from either the Creative Commons Attribution license or the Creative Commons Attribution-Share Alike license to indicate the terms under which their non-source code materials may be distributed.

You can read more about this here.

jqPuzzle - jQuerry Sliding Puzzle

jqPuzzle is a nice puzzle script based on jQuery. The script has some very nice effects using the jQuery library.

You can get jqPuzzel as well as see a few demos here.

Syndicate content