To reach the zenith of programming

November 18, 2007

Creating an extensible AJAX web site in a few minutes (Part 1).

Filed under: Javascript — Knave @ 4:11 am

Preface:
I do realize that there are probably tons of tutorial guides out there describing what AJAX is, how it works and the rest. This post will introduce a few different techniques and technologies together to create a better site.

Tools of the Trade

To get yourself started, you need the tools to make yourself more productive.

  • Eclipse IDE (a free open source IDE)
    • JSEclipse Plugin (a free plugin for the Eclipse IDE for editing JavaScript files)
  • Mozilla FireFox browser (do you consider yourself a web developer without even this?)
    • FireBug plugin (plugin for FireFox. The ULTIMATE AJAX development tool available)
  • NotePad++ editor (save yourself from the misery that is the NotePad that comes with Windows. Or if you have a better editor like VS2005/2008 for HTML editing, use it.)

Making use of existing frameworks

Why waste precious time reinventing the wheel when its available and free? We will be making use of the following libraries as we go along.

Creating the Structure

<!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>Demo Ajax</title>
    </head>
    <body>
        My Page
    </body>
</html>

Now this looks extremely empty. Let’s make use of our Yahoo UI style as well as our custom style design.

  1. Create your custom style sheet, e.g. site.css.
  2. Add a reference to the Yahoo UI style sheet and overwrite/modify any styles you wish to implement. 
    3. @import "reset-fonts-grids-min.css";
#hd { background-color:#cccccc; font-size:182%; padding: 4px; }
#bd { padding: 20px 10px;}
#ContentLayer { border:1px solid #999; padding: 6px;}
#ft { font-size:85%; }
  3. Change your html to include the style sheet as well as Yahoo UI’s grid layout template. 
    4. <!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>Demo Ajax</title>
        <link rel="stylesheet" type="text/css" href="site.css" />
    </head>
    <body>
        <div id="doc3" class="yui-t2">
            <div id="hd">
                My Demo Site!
            </div>
            <div id="bd">
                <div id="yui-main">
                    <div class="yui-b" id="ContentLayer">
                        Welcome to my site.
                    </div>
                </div>
                <div class="yui-b">
                    <b>Site Menu</b>
                    <ul>
                        <li><a href="#" id="home">Home</a><li>
                        <li><a href="#" id="about">About</a><li>
                    </ul>
                </div>
            </div>
            <div id="ft">
                Copyright &copy; 2007
            </div>
        </div>
    </body>
</html>
  4. Preview your html in your browser.
    demo_1

Inserting our Scripts

Insert the reference to the jQuery.min.js, ui.tabs.min.js and create a new custom mysite.js to the html.

<script type="text/javascript" src="scripts/jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="scripts/ui.tabs.min.js"></script>
<script type="text/javascript" src="scripts/mysite.js"></script>

Modifying our Script

Open up mysite.js with Eclipse (remember to configure JSEclipse. You will need to manually add the JS files to an Eclipse project due to a bug/issue).

//mysite.js
//Window OnLoad...
$(document).ready(
    function() { 
        $("#ContentLayer").html("Here's a <b>Big</b> welcome!");
    }
);

Test it on your browser and see the main contents reflected. How jQuery actually works is beyond the scope of this post. However, just note that the .ready() command will allow you to specify multiple startup executions on a state before Windows.OnLoad.

//mysite.js
//Window OnLoad...
$(document).ready(
    function() { 
        //$("#ContentLayer").html("Here's a <b>Big</b> welcome!");
        
        $("#home").click(function() {
            $.get("myhomepage.html",null, 
                function( response ) {
                    $("#ContentLayer").html( response );
                }                
            );
            return false;
        });
    }
);

Next, we proceed to insert an Event Handler to the #Home element for the OnClick event. The code will proceed to load the contents from myhomepage.html into the Div layer “ContentLayer” via the HTTP Get method.

You can easily replace the code to obtain html contents from a common implementations like PHP/ASP files, as well as ASPX/JSP.

If you need to send parameters, you can easily pass them in to the $.get() command.

$("#home").click(function() {
    $.get("myhomepage.html","myparam1=thank&myparam2=you", 
        function( response ) {
            $("#ContentLayer").html( response );
        }                
    );
    return false;
});

Each “function()” call is actually an anonymous method, similar in concept to anonymous delegate in .NET. It acts as a CallBack trigger. (Callbacks are function pointers which the target function will execute upon completion/reaching a certain trigger point).

To be continued…

kick it on DotNetKicks.com

Blog at WordPress.com.