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

Knave — Sat, 17 Nov 2007 20:11:22 +0000

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.

Yahoo UI Grid layout style (nice style sheet template that provides well-tested CSS layouts)
jQuery JavaScript Library (a very popular JavaScript library)
- jQuery Tabs plugin (for creation of Tabs)
- JQuery Flora theme (part of download package for jQuery)
JSAN JavaScript Script Loader (for dynamic loading of JS files)

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 Ajaxtitle>
    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.

Create your custom style sheet, e.g. site.css.
Add a reference to the Yahoo UI style sheet and overwrite/modify any styles you wish to implement.

@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%; }

Change your html to include the style sheet as well as Yahoo UI’s grid layout template.

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 Ajaxtitle>
        <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 Menub>
                    <ul>
                        <li><a href="#" id="home">Homea><li>
                        <li><a href="#" id="about">Abouta><li>
                    ul>
                div>
            div>
            <div id="ft">
                Copyright © 2007
            div>
        div>
    body>
html>

Preview your html in your browser.

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 Big 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 Big 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…

Modifying Meizu M6 to display Chinese Lyrics

Knave — Sun, 02 Sep 2007 11:25:47 +0000

It’s been almost a month since I bought my Meizu M6 mini-player (4gb) version, and has since become an indispensable tool in my daily commute to & fro my work place.

Once I learnt that this nifty device is capable of displaying LRC files (basically a text-file that contains a song’s lyrics that are marked by time periods for synchronization during playback), I was extremely excited by the possibilities it bring.

Immediately I set about to download some of my favorite Chinese songs’ lyrics from Baidu. Unfortunately, due to encoding issues the player is unable to display Chinese lyrics while in English language mode.

After a bit more research, I discovered that there exists a Resource Editor for the M6. Launching the program requires .NET framework 2.0 and Chinese fonts installed on your machine. I downloaded a nice skin modification Eros and opened the resource.bin file provided in the mod package with the editor.

Displayed on the 3 columns are language specified texts for the player in the order of Simplified Chinese, Traditional Chinese and English.

Painstakingly, I typed/copied each value from the English column and overwrote the corresponding value in the first column (Simplified Chinese) and save the resource file.

To update the player,

Copy the resource.bin file to the root folder.*
Plug out the USB connection (and wait for the library update to complete).
Shut down the player.
Re-start the player. It should display an update in progress message.
Once completed, go to your Settings->Language and select Simplified Chinese (1st option).
Try a lyric file from Baidu on your favourite Chinese song and enjoy the player even more!**

*Even though the update did not clear the contents in my player, I did the necessary precaution by backing up my songs.

**To ensure the lyric file is shown, you must rename it’s file name to match exactly like the song’s file name. e.g. “Some Artist – song1.mp3″ should be matched by “Some Artist – song1.lrc”.

***Album art can also be displayed during playback. Place an image (ideally less than 200×200 pixels) in the same folder as the song and rename the image to the album’s name. Ensure the songs’ album name (ID3 Tag) matches the image’s name. The player can only display either the album art or the song lyrics at any instance, with the lyrics display taking higher precedence.

My player is currently running version 2.003.2, and is an SP model (SP represents Samsung screen, which is the current production model. An older model TP uses Toshiba screens and has since been discontinued.).