Screencast 02: Ajax with Connection Manager
As it turns out, the first screencast episode turned out rather well. There were some rough edges and some things that can be smoothed out. In any case I present to you the second installment of the screencast series for your viewing pleasure. In this 25 minute episode I explain how to set up a connection object and create a basic webservice model.
As usual the setting is informal and there are some stray comments that hopefully do not deter you away from the focus of the screencast. Enjoy!
Download the Quicktime Version (31 MB)
If you cannot see the video below: get the DivX Web Player (available for both Win & Mac)
September 5th, 2006 at 1:48 am
Great screencast!
I relally liked this one. The truth is I don’t have much experience of Javascript but things like this makes me want to learn more!
Too bad the Textmate is for Mac users only, it seems like a great tool. Someone should port it :)
September 5th, 2006 at 7:55 am
As usual, great work.
September 5th, 2006 at 10:11 am
Thanks for another great screencast. I must say, I was pulling my hair out the minute you didn’t put in the equal sign. I wanted to help you with your debugging, but yelling at my screen (at a pre-recorded video) didn’t seem to help. hehehe.
In all seriousness, thanks for these screencasts - they are very educational.
Peace…
September 5th, 2006 at 11:10 am
Awesome - thanks again Dustin.
p.s. Did you post the code somewhere? (it’s just so complex I could never transpose it ;)
September 5th, 2006 at 11:29 am
I was just wondering what program you use to record your screencasts. I’m thinking of doing som screencasting of my own, and found this nice program called Camtasia Studio. The only problem is the price tag; $299 for a single-user licence.
Anyway, this was a really useful screencast, I’m going to use this technique on one of the sites I’m managing! Awesome work :)
September 5th, 2006 at 11:34 am
@All: The screencasting software I’m using is called iShowU which is available for Mac OS 10.4 for only $20 USD.
Also as a quick note for all, the code in this screencast used very much of a functional approach. In the next episode I will show you a more elegant OO approach that will help you abstract your procedural logic. This just merely shows you how to use the connection manager “as is.” Nonetheless, I hope there is still things to be learned :)
September 5th, 2006 at 5:35 pm
Great screencast again!
A tip: what you could try in another screencast is explain to people how they can find out by themselfs how a YUI utility works.
Maybe this can be done by explaining some utility, like Drag and Drop, and when your using a function or event (like onDragOver) within that utility, switch over to the documentation and show them how they can check what objects are passed to that function (or eventhandler in the onDragOver case).
Hope you get what I mean, if not you know why I can’t make screencasts. My explaining sucks.
Greets
September 5th, 2006 at 6:19 pm
Wow, perfect timing! I was just using the DOM today to convert DD/DT innerHTML to onClick events. Out of curiosity, what is that plugin you’re using to view the approximate render time of the current page?
September 5th, 2006 at 8:01 pm
@Kalle: If someone could port Textmate over to Windows… well, I just don’t think that’s going to happen. But I’m glad you enjoyed the ‘cast.
@Nate: Yeah, I was going to pull the plug on that pass and start over if I didn’t find it in the next 15 seconds. Since I don’t like fooling around in iMovie, I try to do the entire screencast in one shot.
@Carson: I would recommend just writing it for yourself. However keep in mind what I’ll be doing for the next episode - which is to make this code even more elegant using OO methodologies.
@Tommy: That sounds like a great idea. In one sense it takes the approach of “give a man a sandwich, feed him for a day - show him how to make a sandwich, feed him for life.”
@Brendon: That little timer there in the corner is a Firefox extension called Faster Fox.
September 6th, 2006 at 12:31 am
That missing equals sign was driving me nuts the second you missed it. Reminds me a bit of those pair programming sessions they had us do back in school.
Great screencast though!
September 6th, 2006 at 5:41 am
Hey, Dustin! I really liked your idea to have webcasts here at your website. They’re very good in fact! But, in my opinion, there’s one little problem: the filesizes… they’re too large! I mean, downloading 220MB takes me a long time…
Anyway, your webcasts are great!
Thanks for you help!
:)
September 6th, 2006 at 5:52 am
Very nice and interesting again Dustin! (also it made me feel good as I noticed the missing = the second you did it!)
motivational AND inspirational - a quality ‘cast!!!
Looking forward to the next one!
September 6th, 2006 at 6:24 am
When can we expect your next screencast? Good stuff.
September 6th, 2006 at 6:26 am
Perhaps the simplicity of this screencast has confused me a bit, but after absorbing it all, how does our function know where the event or innerHTML came from be to certain it limits it to just the UL item? If we were to click on the H1 element in this instance, wouldn’t it also have its innerHTML changed to “huzzah” as well?
If I’m right and this demonstration was just to show how to interact, great! That means I’m not missing something big here.
September 6th, 2006 at 9:44 am
@Nathan: This is an issue I will hopefully sort out very soon before I do too many more. 200 megs isn’t quite ideal. For now you can simply find the link to the files under /downloads/screencasts/ - that way you can just download it to your computer, then watch it at a later time.
@Peter: Probably in another week or two.
@Brendon: We had our example method run upon the availability of the ‘test’ element. Thus when we reference the ‘this’ object within
YAHOO.example, that is in fact the<a>element. Sothis.innerHTMLwas the email address :)@All Re: “The missing = sign”: It happens to the best of us. It’s like trying to sing and play guitar at the same time. If I would have just kept quiet, I might have found it faster.
September 6th, 2006 at 10:48 am
Thanks for another great screencast and the glimpse into “real world” debugging. =)
I’m looking forward to the next one! …and that those TM snippets…? =)
September 6th, 2006 at 3:01 pm
Reg TextMate port for Windows. Looks like somebody doing it here: http://intypelog.blogspot.com/
September 7th, 2006 at 9:19 am
Nice job Dustin… although you had me screaming at my screen about the missing equals sign.
Phil
September 7th, 2006 at 9:59 am
Perhaps not as much content as the first screencast but nevertheless, another great screencast.
Having spotted your typo in the url string, I was screaming for you to use firebug to inspect the XMLHttpRequest - and you did !
As for textmate, it does seem to have some good features. An IDE I’m keeping my eyes on called Aptana (www.aptana.com) has implemented things like snippets and could become a good platform independent rival.
At some point I’d like to see a screencast or atticle on closures (maybe a screencast is better for a practical example) because they are one thing I am yet to understand or use in javascript.
September 9th, 2006 at 3:43 am
@David Caunt: Check out JavaScript Closures for Dummies for a great introduction to JavaScript closures.
September 9th, 2006 at 2:13 pm
Dustin, I think these screencasts are great. I was really engaged with the content. I think you are very talented at JavaScript, and the Yahoo! library.
The following are just a few suggestions however, and not intended as criticism:
1. Please could you create a separate feed for the screencasts. That way people who want them can get them downloaded automatically, but those who don’t want the large downloads won’t have to have them to continue getting the podcasts.
2. Please could you make the voiceover come out of both speakers. Then more people should be able to hear the voiceover (just in case they can’t use the left speaker for whatever reason).
3. I have to disagree with your interpretation of the creative commons licence. I believe the licence means that you do not have to contact the creator of a CCed item to use it.
4. Why not add your URL to the intro code block too, just in case someone has “just found” the video online somewhere, just as a guide to where it was from.
Thanks again for a really great video.
Keep up the good work.
September 9th, 2006 at 2:17 pm
oh, and
5. Perhaps it would be best not to try to start the video playing in these shownotes pages, considering their size!
September 10th, 2006 at 1:40 am
@Ed: Your notes are criticism, however there is such thing as ‘good criticism’ and that is always welcomed :)
Re 1) Please don’t become too greedy for the things that are given to you freely. Free video tutorials on technical subjects are very rare. On a separte note, I do indeed still plan on separating the article feeds from the podcasts, from the screencasts. In the meantime, I appreciate everyones patience.
Re 2) It’s coming out of both of my speakers just fine. They are recorded in mono just for that reason (not stereo). For the audio-tech savvy, stereo separates your input into single channels. Mono will record it all directly into the system as one large sound… which should come out of both of your speakers. If anyone else is having this problem, I would definitely like to know about it.
Re 3) The Creative Commons license I chose best fits the work I do on this site. Unfortunately there is no Creative Commons license that mentions anyone having to directly contact me about using my work. However any claims I directly make about my work should definitely be taken into consideration - for instance - if I directly said in the video that one should contact me before using my screencast - then I would expect that.
Re 4) I have added the url to this website starting in the third screencast along with a few other bits of meta data :).
Re 5) I have considered embedding flash videos into the page, however I am still not satisfied with some of the quality tests I’ve been getting. I may also take advantage of my streaming server service that Dreamhost has provided for this hosting account. For the most part though, I do agree that the file sizes are large and I’m not sure if embedding them on the page is so much of a good idea anymore.
Thanks for sharing your concerns :) I hope you continue to view the screencasts! Your comments are very valuable to their success and I appreciate you sharing so much.
September 10th, 2006 at 12:58 pm
Dustin,
Great job on the screencasts. Looking forward to seeing the next.
FYI, the audio is only audible on the left channel. I’m on a windows box, so I don’t know if quicktime acts differently on a mac or not. Maybe macs recognize when audio is only being pumped through the left channel and acts like an analog system and replicates it on the right as well?
Quick question - do you know if a JSON class will be ever introduced natively within the connection.js?
Thanks again!
September 11th, 2006 at 6:47 am
Cool Staff.
It would be nice to have the sound on both left and right channel. Correct me if I am wrong at the moment sound is set to left.
Keep up the good works.
Azizur
September 12th, 2006 at 5:15 am
Great screencast again, have managed to set up a few XMLHttpRequests using the connection manager in the past but this was great to put mind at rest I was doing it in the correct way.
I think the fact you missed the typo was a good thing as people that may be new to firebug will now know of the XMLHttpRequest that get displayed in the console (you may have to turn this on in the options though).
If anyone else leaving a comment has any links to security with web services I would be greatful if you could post them. If we took Dustin’s example how could you check if the user is authorised to alter the text.
I was thinking maybe you could compare a user’s email session variable in the PHP webservice section with the value passed through, and if true then the text is altered, if not then do nothing.
Don’t want to appear like I am stealing the thread but after implementing this I notice anyone can paste a URL in the browser to call the service and obviously things need to be secured in some way.
September 12th, 2006 at 6:49 pm
If anyone wants to seperate the casts from the posts they can do so in iTunes. Then they can also just download the files to their own computer and watch it there. I have no problems and I am informed as soon as you add a new pod or screen cast.
Great screen and podcasts! Keep up the great work!
September 15th, 2006 at 7:54 am
I, too, only have sound out 1 speaker. I didn’t think much of it, but since someone brought it up it would be nice to hear it out both.
September 17th, 2006 at 9:21 am
I have the sound on the left speaker only too, and I’m on a Mac so this don’t come from windows version of Quicktime.
Hope you will be able to change this Dustin, because I have to hear it on earphones to not disturb my neigbours, and it seems to make me sick (headache) having sound in only one ear.
Anyway, nice and great work, thanks to you. Waiting for next episodes :)
September 17th, 2006 at 7:11 pm
Great screen casts. On thing though, could you move the cursor out of the way before the screen cast starts? Eventually, what you are typing is covered by the cursor and I keep reaching for my mouse to move it out of the way…
Thanks again.
September 18th, 2006 at 11:54 am
Hi everyone,
I’m a coldfusion programmer and was wondering if there were any others in the house? If there are, can someone translate the PHP portion of Dustin’s screencast to CF? I’m stuck on translating the “echo $id” portion that gets sent back to the ajax call.
Here’s what I have so far:
// echo $id
Thanx!
Chris
September 18th, 2006 at 12:06 pm
wow..the last post stripped out my code. but you can go to this url to see what I have so far: www.christopherchin.com/ajax2cfm.txt
September 21st, 2006 at 4:54 pm
Against your reccomendation, I watched this one without watching the first. Mu ha ha.
Really good. Wow, I learned a lot watching that. I normally do ASP.NET, and I haven’t written a lot of JavaScript, but this is great. I think a light bulb just went on in my head about using inline functions/object literals. I also like how this example is all self-contained in one file.
Things I learned: firebug looks really cool, maybe I should start playing with YUI, that text editor looks cool, and some javascript syntax.
Thanks.
p.s. I got sound out of just the left channel. I’m using Firefox on WinXP.
September 25th, 2006 at 12:09 am
I really enjoy these screencasts. As someone who is new to this style of programming with callbacks, functions as properties, objects as variables etc I find the videos very helpful for getting this methodology to sink in.
The new ~30mb divX version is also a big improvement on the file size front, although like others most of the dialog volume comes through the left channel (divX player on Windows)
Good work Dustin, can’t wait ’till all the YUI functionality is covered ;)
September 25th, 2006 at 9:15 am
I’m afraid I’m at a loss of what to do for the “one speaker” problem. I have reason to believe you’re using an outdated version of the DivX Codec, or an older version of Windows XP since I am getting the volume on both speakers just fine on both my Mac and Windows PC.
If it becomes too bothersome, the best thing to do is to download the Quicktime version. The quality is a tad bit higher - and now they’re much smaller than they used to be (eg. this episode used to be 250mb and now it’s 31mb).
September 26th, 2006 at 6:15 am
Just FYI I downloaded DivX especially, so I have version 6.2.5, on Windows XP SP2, running in the stand-alone player (I saved to disk).
October 19th, 2006 at 6:16 pm
Michael,
post approved :)
As you can tell now I’ve added the divX movies which turns out to be working pretty well for most folks. And my Dad can totally beat up that guys Dad… (I kid I kid).
October 19th, 2006 at 7:31 pm
Hey Dustin, the name is John, not Michael.
AND PLEASE DON’T POST THIS and DELETE my LAST POST PLEASE , man, I was just trying to say… you are the undisputed Javascript Guru (yeah funny way of complimenting you I know). Anyone who is in the game knows that. I just thought you took that guy’s post too personal. I mean, let’s face it, if we’re reading your stuff, we haven’t earned the right to challenge you on YOUR site. Personally, I would have thought a reply like “This is my site. Period.” would have served you better than trying to defend yourself. Whatever though… you have more important things like keeping the rest of us on the cutting edge, than to read this stuff.
Anyways, I was just being playfully sarcastic. No harm intended. I have learned so much from you and this site. You have *no idea* how much. My family and myself owe one deed, one little deed that you performed, to all of our success. A little article on JSON.
So while I have your attention, THANKS FOR BUYING ME LUIGI!! Oh, he’s the $2500 Blue and Gold Macaw pictured here (that I have wanted since I was 12):
http://new.photos.yahoo.com/tropeanojohn/photo/294928803371018553/0
That I bought 2 weeks after presenting my newly formed JSON Javascript (converted every line of Javascript I ever wrote) to a potential client (the Marine Corps.) and got the contract. Damn, I should have named him Dustin…. what was I thinking.
Regards,
John T.
Senior PHP Developer
Mission Critical Media / ABT Consulting, Inc.
Ps. Seriously Dustin, please remove that post. I had no idea you would post that. Your readers do not need to see some yo-yo like myself post such nonsense on a information site such as this. There’s many others for that.
October 27th, 2006 at 9:38 am
This is exactly what I was looking for, thanks for the great information.
November 8th, 2006 at 11:33 am
I’m almost crying this is so good. I’ve been following your site for about a year now. This is a great step for you. Thank you so much.
November 27th, 2006 at 1:31 pm
[…] Video is here. Tags: AJAX, Development, Javascript, Screencasts, Technologies, Web 2.0, Web Services […]
December 6th, 2006 at 5:11 am
I’ll have to start off by saying - this is GREAT!
One of the comments above asks about clicking the H1. I see why nothing happens when the h1 is clicked but I think there’s a small “bug” in the code. If I click between the li-text and the bullet the target will be the whole ul instead of the li.
What would the best way to correct this?
I’ve learned SOOO much from your screencasts and I really hope you find the time to make many more YUI-screencasts, so I can learn even more from you. Thank you, Dustin!
January 4th, 2007 at 12:16 am
Thanks a lot man :)
January 19th, 2007 at 10:23 am
Dustin,
Is this a bug or a misunderstanding by me? How would you deal with multiple submit buttons?
When the connection manager is used with a form which has two submit buttons. The submit button which comes first in the markup is always the one that the connection manager posts. I guess setForm doesn’t consider which submit button is clicked and just parses the markup that constitutes the form ignoring multiple submit buttons.
var cObj = $C.setForm(this.form);
var cObj = $C.asyncRequest(’POST’, url, callback);
<form action="update_delete" method="get" accept-charset="utf-8">
<input type="text" name="some_text" value="foobar" id="some_text">
<input type="hidden" name="record_id" value="0001">
<p><input name="form_action" type="submit" value="update"></p>
<p><input name="form_action" type="submit" value="delete"></p>
</form>
when one clicks delete, the connection manager posts this.
[record_id] => 00001
[some_text] => foobar
[form_action] => update
the html form would be posted like this.
[record_id] => 00001
[some_text] => foobar
[form_action] => delete
March 21st, 2007 at 8:14 pm
Hey. Thanks for an awesome movie. I was watching you look for the equals sign like some kind of horrific drama. Exciting. Great job.
September 5th, 2007 at 12:00 pm
Nice work again. I love the patterns you use in your code. It would make things better for me as a total noob to JS if you said “here’s a cool pattern” and I could be like “cool a new Diaz pattern, this dude should write a book”
March 5th, 2008 at 10:33 pm
I pumped my fist in the air and yelled out ‘YES’ when you found that missing equal sign.
Seriously though, excellent screencast and definitely recommended to anyone wanting to use Ajax and a YUI connection. After watching I can now see how simple it is to get some MySQL data into YUI.
You really are ‘CoolDustin’ ;)