Ext Javascript Library for beginners

The Ext Javascript for beginners, as I learn ExtJS & Javascript so will you!

Online Programming Courses from Standford Uni

Posted on | November 18, 2008 | 1 Comment

If like me, you never got the chance or had the money to go to university to study your topic of choice there is still hope for us yet! I didn’t really fancy the debt of 15,000 pounds worth of student loans and course fees aged 18, I already had enough debt as it was. So I skipped the whole university phase and went straight from school to work on an ISP help desk.

Now aged 26, I’m kind of feeling the need to push myself out of the whole PHP / JS / HTML / CSS web development world/comfort zone. While it pays the bills, it can get a little repetitive at times, don’t get me wrong, my first programming love was and always will be PHP.

I learnt PHP by reading books, lots and lots of books, some e-books and some textbooks. However, reading sucks - if you’re trying to learn a new programming language. You have to first wade through the jargon at the start, then its just paragraph upon paragraph of text (unless you read the Head First Books by O’Reilly - they rule!), with a few code samples thrown in for clarity. I much prefer to have someone teach me, which, of course, costs money and requires time off work.

Now if you’re like me and:

  • a) a total skin flint (tight with the cash)
  • b) work full time so can’t sack off to uni for 3 years
  • c) Live somewhere were the night school courses are pretty crappy

you’re left with the option of reading books or seeking out online videos. So If you’ve already checked out the ExtJs and Douglas Crockford videos I posted earlier - more power to you. If not, there’s plenty of time for that.

Here’s some interesting courses I found online from Stanford “the birthplace of Google” University. I figured hey, if there’s a place to learn programming properly, what better place to do it! I’m never going to be able to afford to go there, so I’ll try and glean what I can from their online resources!

Stanford Uni Online Courses

Introduction to Computer Science | Programming Methodology

  • Youtube Playlist of the lectures can be found here.

Introduction to Computer Science | Programming Abstractions

  • Youtube Playlist of the lectures is here.

Introduction to Computer Science | Programming Paradigms

So Stanford Univeristy gets my seal of approval, 3 top quality courses with all the lectures on line for public viewing. There are more courses to be found on the course list, so I’m not going to link them all here. The lectures are approximately 50mins - 1hr long from what I’ve seen so far, which is just about the right time to hold your attention and can be squeezed into a lunch break. I love how they are all organised into Youtube Playlists too, so if you’re feeling fruity you can watch one right after another!

So far I’m 8 lectures into the Java Course - any ideas for a Java project to help hone my skills?

Videolectures.net

Like the heading says, there’s another really cool site for video lectures on some quite advanced science and technological subjects, I’ve not really dared (seriously I’m scared) see any of these so far. But here’s the link if Machine Learning, Probability and Graphical Models is your bag :)

Some other noteworthy Youtube Channels.

So there’s plently of learning to be had, I’m making it my mission to get a degree before I’m 30. That gives me 4 years. Easy as!! :)

If you know of any other resources and think I should check them out, send a comment!

I installed Ubuntu Ibex

Posted on | November 4, 2008 | 9 Comments

Hey All,

Here’s a seasoned windows developers tale of switching to Ubuntu Linux for the first time.

I have to admit I love Windows XP. I’ve not ever bothered with Vista, simply because, XP did everything I needed, and if it’s not broken, I don’t want to try fix it. I would like to point out that I have used Linux from the command line in the past, when using putty etc, but I’ve never really used it as a Desktop. So here’s how it went down.

I backed up everything to a network share at work, stuff like my documents, my music and some training videos I’d been watching. I made a list of my most frequently used programs and my Firefox extensions and set about downloading the .iso image of Ubuntu Ibex.

Once downloaded, I burnt the image to a CD had lunch then came back to carry out the install.

I inserted the Ubuntu CD and shut down my machine for the last time with Windows XP, sad times!

The pc rebooted from the Ubuntu CD and gave me a couple of options I first checked the CD for errors, then when there were no errors found, I chose the option to install Ubuntu!

Here’s the 7 steps for easy and quick installation of an operating system:

  1. Select your Language, English, no brainier.
  2. Select location, do use the map! I scrolled the list before twigging you could click on the map, oh well.
  3. Keyboard Layout
  4. Installation type, I chose what was recommended, Guided “Use entire disk”
  5. Enter machine’s name and user account and password.
  6. A summary of the options chosen above.
  7. Go!

So really there’s only 5 options you need to choose from, it does the rest. So I fired an elastic band at my monitor and swivelled on my chair for 10 minutes or so while the little orange status bar went across my screen. I did think about getting a book from the library to polish up on a few Linux tips and tricks but watching the status bar was just too riveting, and I couldn’t be arsed to walk to 100 yards.

So I think the install roughly took around abut 10 minutes, because the screen saver kicked in and after I revived it, the installation was just finishing up. So not bad timing wise there! The last XP install I did took about 45 minutes!

I was prompted to restart so I promptly did, it automatically logged me on to the Desktop, first sign of trouble, I was using dual monitors, and during the install one was blank while the other carried out the install. When I’d rebooted and logged in the primary monitor was fine yet the secondary monitor looked like someone had thrown a cup of sick on the screen. Not good, I wasn’t sure what graphics card I had in this machine either. I paniced, then pulled myself together as a warning popped up on the desktop telling me I was set up with the wrong video driver and I should install one of the following list:

  1. NVidia 177
  2. NVidia 173

Being a fan of bigger is better, I chose the NVidia 177 (it said recommended next to it too) It set that up and installed the drivers for my graphics card automatically. I also got a notification that my system was out of date and some updates needed to be installed, so without question I installed those too. Then I rebooted again.

Upon reboot number 2, the graphics were still a little funky so after slowing down the mouse speed (it’s way too fast off the install) I asked around the guys in the office and found I can list everything attached to the PCI ports on the motherboard by running lspci from the terminal window. This told me I had an Nvidia card (no way?)… so being all the wiser I Googled the words Ubuntu Nvidia Dual Monitor and came up with this guide how to get dual monitors working with ubuntu. Rock on! I followed that guide and within minutes I was rocking my dual monitor set up.

LAMP Stack Set up

Next I was going to install apache2, php5 and mysql. So I could do some local development. This is where the awesome Ubuntu documentation came in. Check these docs for the guide to using tasksel command to install LAMP. It’s very good and using tasksel is much easier then individually installing each component.

Next was to download Zend Studio and install so I can do some work. This was fine, using Firefox as per usual. I ran into problems when starting Zend Studio once I got it installed, the app started fine but would just show a grey box with no title bar or window objects inside, bit of a pain in the arse wouldn’t you agree!! So following this guide sorted me out.

After that I backed up everything from my network share, the way to do this is to chose from the desktop menu “places” -> “Connect to Server” -> Windows Share - then enter your sever details. Then its just a case of copy and paste the files over!

Oh last thing I did was set up pidgin messenger, a multi protocol instant messenger client, and Skype (business use!) This was easy using the package installer and downloading from the Skype website. Next thing I did with these was to add them to the start up of Ubuntu because I was forgetting to start them up and wondering why I’d suddenly become unpopular. This guide helped me add start up programs.

My “Jerry Springer’s Final Thoughts”

So all in all - it was pretty simple, I’m loving Linux, so far, I think Ubuntu is seriosuly challenging Windows, the main thing they’ve got to do tho, get rid of the default crappy theme!!! It’s so ugly and makes the OS look ancient! I really think thats one area the Ubuntu guys need to focus if they want to get a share of the desktop market, make it pretty!! Functionality wise it completely out performs Windows on most things, and its really simple to use, I think things could still be easier and more intuitive to do on Ubuntu if they tidied up the interface somewhat. They could always make their server version more Sys admin orientated and their desktop verison more N00by focused to try get it more widely accepted. Well thats my 2 cents, time to do some work!

Ext.Ajax.request makes for Easy Ajax

Posted on | October 29, 2008 | 2 Comments

Basic AJAX

Long time no post, today I want to show you how easy it is to make AJAX calls using ExtJs. With Ajax being all the rage these days, if you can’t call server side scripts from your JavaScript I’m afraid you’re site is being bagged as Web 1.0 (bla whatever.. as long as it works right?) So with progression in mind here’s how to do wonderful, wonderful Ajax things with ExtJs.

Basically, Ajax is sending a request from Javascript to a server side resource, and not forcing the entire page to reload in the process, just the bit you want to update.

  • A stands for Asynchronous.
  • J stands for JavaScript.
  • A stands for umm and?
  • X stands for XML.

So it’s a combination of alsorts, except I don’t know anyone who uses the XML part of it. 

In code you simply set up an XmlHTTPRequest Object point it at a url and click go. But because of the different implementations of XmlHTTP Objects in the different browsers it’s easier and less painful to use a library like ExtJS.

There’s two things to bare in mind here before we start:

  • The url can include a query string, but it’s cleaner to use the params collection.
  • The parameter passed to the success and failure callback functions is an XmlHttpRequest Object, not the response text from the server.
  • The success function will be called if your HTTP request was successful (your server returned HTTP response code 200) e.g. you didn’t make a call that got an HTTP 404 error or 500 error.
  • If you got an HTTP error the failure function would be called into action.
So, Making Ajax calls is the easy part, debugging them is often tricky. I highly recommend the console (or Net) tab of Firebug.

Ext.Ajax.request({

    url : 'my-server-side-script.php',
    params : {
        name : 'James',
        age : 26
    },
    success: function(objServerResponse){
        alert(objServerResponse.responseText); // outputs whatever was returned from the server in an        alert window

    },
    failure : function(objServerResponse){ 
    }
});

When this is called via an onclick, onload, or when ever you choose to call it will automatically send a HTTP request to your server side script with the specified parameters. Other code will carry on running and when the request is complete it will execute the function success or failure regardless of what other javascript code has executed since your request started. Think of it as you (or your mum) putting on your washing machine, and going out for half an hour to do some shopping, the washing machine (ajax request in this case) carries on working regardless of who set it off. Once your wash has finished, you’ve got to go and empty the washer, so once your request has finished you’e got to take some action with your code (this is the call back function success or failure). In this function you can decide what to do with the data returned form the server, as you would decide weather or not to tumble or hang out your clothes?

Good analogy right?? :)
The code on your server can take as long as it wants to execute but its best not to leave your javascript waiting around for more then 30 seconds.
 

JSON

So whats the easiest way to return data from a server side script. I’ve seen a few ways of doing this. Easiest and by far the most easily breakable way is to simply have your server script echo some text back and then check for that text in your success function, thus:


< ?php 

// your server side code here

echo $success == true ? "success" : "failed";

That will output the text success or failed depending on how you came ot that conclusion on the server side. All your success callback function would do is check the responseText property like so:


Ext.Ajax.request({

    url : 'my-server-side-script.php',
    params : {
        name : 'James',
        age : 26
    },
    success: function(objServerResponse){
        if(objServerResponse.responseText === 'success'){
            alert("It Worked!");
        } else
        {
            // server code failed but request was OK.
        }
    },
    failure : function(objServerResponse){ 
        alert("Sorry, there was a server Error!");
    }
});

 
Using JSON to analyse the response from the server not only means you can use server data as JavaScript objects but you can also take advantage of sending more data back from the server, in a well structured form.

I program in PHP and whenever I use Ajax I make sure to have the JSON extension installed. Here’s how I usually return JSON from a PHP script. Look for the potential for returning more server side data.


$returnData['success'] = false;

$returnData['message'] = "Sorry, we were unable to validate your details";

$returnData['user_id'] = 123456;

$returnData['timeOnSite'] = "1 minute";

echo json_encode($returnData);

die();

The above code outputs the return data as json, text basically - this data can then be converted to javscript objects using Ext.decode for use in your call back function.


success : function (objServerResponse){

    // convert to javascript objects.
    var server_data = Ext.decode(objServerResponse.responseText); 

    if(server_data.success === false)
    {
        alert(server_data.message);
    }
}

You can see how easy it is to return useful data from your Ajax calls and then use it in the client side code. A much more effective use of an HTTP request I’d say!

Recommended Reading 

  1. Json for the Masses by Dustin Diaz
  2. Ext.Ajax Documentation - explore what other parameters and features you can set.
  3. Jesse James Garrett, the article that set the ball rolling
  4. Ajaxian - an Ajax blog
Please feel free to leave comments and suggestions below, I’ll try my best to answer them all!
« go backkeep looking »

  • My Tweets

    Follow Me on Twitter
  • Tags

  •  

    January 2009
    M T W T F S S
    « Dec    
     1234
    567891011
    12131415161718
    19202122232425
    262728293031