Return of Moo.Ajax

Happy New Year!
So I'm sitting in my office, listening to XM radio (Frank's Place), sipping Dr. Pepper with my litecube, thinking about 2006. The end of a great year and my college education (just graduated from A&M with a computer science degree and a minor in business) has finally come and I'm trying to figure out how to start this new life.

¤º°`°º¤ø,¸¸,ø¤º°`°º¤ø¤º°`°º¤ø,¸¸,ø¤º°`°º¤øø¤º°`°º¤

2007

¤º°`°º¤ø,¸¸,ø¤º°`°º¤ø¤º°`°º¤ø,¸¸,ø¤º°`°º¤øø¤º°`°º¤

So I decided to commence the new year by adding a new post for the new moo.ajax (incidentally, on the new blogger).

Let's Begin

Download Source Preview Example

First thing you need to do is download the new moo.fx set. The MIT group, Mad4Milk, has released a new API called "Moo.Tools".

So, in the past moo.fx used prototype as it's base or backbone. All the effects were built on top of the prototype libraries. Mad4Milk decided to built their own base library, and they called it moo.tools.

For this tutorial, I'll be using moo.tools (I have a tutorial that uses prototype. If there is a large request, I'll redo it with the prototype version).

So download moo.tools.

I would like to take a second and talk about how awesome this page is. When you download your custom-made moo.tools, you choose what you want and the script automatically adds the dependent files! That's just amazing. I was blown away.

So select ajax.js (ajax simplicity), dom.js (let's us traverse dom quickly), fxpack.js, fxutils.js, fxtransitions.js (these last three are for the juicy effects we'll be using).

Your selection should look like the image, since you most likely won't be using the source to figure out this stuff, you can choose "high compression" (if you use aptana, you should choose No Compression while editing, since you will get simplified code assist). Now, generate your download.

Save it as "mootools.js" in a folder "scripts".

So, ok, I admit, I just added this image to show off how beautiful Windows Vista is. ;-)



The Simple Project

This example is going to be a simple application (odd how web developers have started calling their sites applications) that allows the user to view images and then access the image information (author, time, location, camera model, ect). The data will be pulled in using ajax. To keep this example simple (simpler) we won't care how the data is received. It could be a PHP script that looks through the metadata in the image tags, a database, an XML file, or just a dummy file that is created for each image (what I'll be using for simplicity).

The data will be loaded silently (it doesn't cause the screen to flash when the data comes in) and then will be displayed with an awesome whooshing moo effect ;-)



Playground Construction

Now that we have the sandbox (mootools), We should add some images and some text. I've added three of my favorite images (01.jpg, 02.jpg, 03.pjg), with a lot of bogus data in some php files (01.php, 02.php, 03.php; Again, the php files simply echo out the data to act like an actual database or script). So let's set up the site!

Javascript IDE

I spend a lot of time programming in javascript/html. I have a ton of crazy opinions (like loving Jedit all these years). I would like to take this time to endorse my new favorite web IDE: Aptana. If you haven't used it and are still using notepad, or dreamweaver to write your code, give it a try. It's based on eclipse and has a slew of online videos to teach you how to use it! A great feature is its javascript debugger. I just want to scream when I think about all the hours I spent using

alert("In the \"for loop\"");

when I could just use this debugger!
Also, when you start programming with aptana, you really feel like you're just flowing through the code. It's like some much of the busy work is DONE FOR YOU! I literally started laughing the first time I used it! Sigh, so beautiful...

The first of many
Let's create the index file. In the past (with the previous versions of moo.fx and moo.ajax) you were forced to include four or more separate js files at the top of each html document. Since the advent of the consolidated mootools, though, all you need is one small little line for including all the files in the package (that you created at the begining, remember?).

So, let's make our ajax function. Some programmers like to have global ajax variables. This is ok with small applications, but I really prefer to have them all instantiated inside my functions. It keeps my code cleaner AND when working with multiple javascript file I don't have to worry about overwriting global variables (big one). So we write the getPictureData function.

This function needs to grab the data and display it with ajax.

That first line (instantHideInfo) shouldn't worry you. It's a function that will be written later. We just want to make sure that the info isn't displayed until we're ready.

new ajax (picInfo, {update: 'pictureInfo', onComplete: ajaxHandle}).request();

So, we make the ajax go to the address we send the function (picInfo), we have it update the div labeled "pictureInfo", then when the request is filled (the ajax response returns), we just ajaxHandle, (another function we haven't written yet).

Let me show you a little something AWESOME here, if you want, you can now do this:

new ajax (picInfo, {update: 'pictureInfo', onComplete: ajaxHandle, evalScripts: true}).request();

Now, I know what you're thinking, "What's that do?" Well, in the past it's been a real pain to get response text to run javascripts if you use ajax to snag it. This is because the browser never really runs the text. It's intercepted by ajax and placed in the browser (without it "feeling" it). I found a quick and dirty work around, but this makes everything so much nicer!

Since it's midnight now, I'm going to stop here for tonight and finish the tutorial tomorrow.

Again, happy new year!

Adobe Did It Right!

Flash Dance
Finally! Adobe has done what Macromedia never would have dreamed of!!
The newest version of Flash (Flash 8) has some of the best new features I never would have thought of adding AND (very important) the greatest features that were left behind in previous builds (famed v.5)!

Vector to Object
Why did Macromedia never think of this? For those of you who programmed in flash back in version MX and previous, you know what a pain it has always been to take an object and turn it back into a vector. For those who have no clue what I'm taking about, let me give you a quick idea.
Adobe Flash (once Macromedia Flash) is world renowned for being the most powerful web-vector-motion software available.

What is vector-motion?

You may ask... well, in the world of computing, there are really two types of video. Prerendered and Realtime. Prerendered video has been around for a long time, in fact, it could easily be equated to your TV. Someone far away makes a great show for you to watch and transmits that show to your Television.
Nice, huh?
So what's bad with that? Nothing. In fact, it's great; if not the best!
The problem arises when you can't send a video to someone for some reason (say, bandwidth limitations).
There are a number of solutions, Flash just happens to be one of those solutions. Flash allows you to send a video and have the computer create it using the flash player (very similar to the java runtime environment (jre) for java apps). You (basically) send the player compiled code (swf file) and it turns it into bouncing balls and flying text.
These vector graphics (another option is to compress your video, which is like a hybrid where your computer recodes the partially decomposed file (hopefully much smaller into its original state in realtime)) are just mathematical equations that form whatever shape you plan to make. If you know anything about computer images, you know the difference between a JPEG and Clipart. Clipart is generally made from vector graphics. Because Vectors are logical equations, you can resize them without distortion (Unlike a JPEG). Sadly, unlike a JPEG, a lot of detail is often left out for simplicity or filesize.
In flash, you can have both (which is good!). But for adding actions, you have to have objects (since vectors only hold shape, color and size).
Fine, so add actions to objects that are larger, use vectors for everything else. Well, with the new version of flash, you can "test" a vector as an object (all that text, just to say, "Yay!")

Script Assist
Finally back in flash is the wonderful "script assist". This is similar to the "simple mode" known in Flash v.3-5. For many people, this is the best way to program. With a language like actionScript, it's nice to know all the keywords and what types they take. Since Flash has to double as a design environment and IDE, it's best if the IDE is good (and now, it is!). I kept using Flash 5 when 6 came out simply because I hated the new actionScript editor. I could crank out code 10x faster with the older version, and there weren't many new commands. Macromedia really botched it up with Flash 6 and MX. I was pretty scared about Adobe buying out Macromedia, but now I know that they have the good hands (and deep pockets) that will take care of the developers.

Adobe Photoshop Now
Yes, We all love Photoshop. We love the toolbars, the blend modes... everything except for the price tag! Now Flash can do blend modes like photoshop. REALTIME!
Woohoo! Everybody do the bender!
This is a feature that is going to really start showing up fast (like, on my next project). Before, flash developers (like myself) had to load up photoshop, create the images, export them, import them and then work with the stale stagnant images in flash. But now, we can do a lot more than size and alpha transparency! This is a beautiful idea that only Adobe could bring to the table (since they own the patents on the photoshop blending modes).

Adobe Premiere Now
Heh, You know that Adobe had to spruce up the Flash video import features.
On2 VP6 is the codec of choice with the new player, and I have to say... the samples really show off what it can do (Check out the split-screen version at the bottom)!!
Also, you can apply alpha-transparencies to the video feeds realtime. :-D
Oh man, I know one little programmer who is going to be having a lot of fun soon!
;-)
Ah, yes. And this link is... Wow. If I were Apple Quicktime, I would start paying attention to Adobe and On2 VP6! I can see this being very easy to use on trailer websites... and since Flash is a web application with no real personal media player, it's nearly impossible to rip or distribute.

On2 VP6 can even stream full screen movies to you REALTIME.

In case you were wondering, "Realtime" is the "word of the day"

AHHHHHHHHHH!!!!
;-)

Another Day, More Exciting Discoveries

So I was in HRBB 220,
Which is the best lab on Texas A&M Campus, and I was informed about a few new resources which are pretty nice. I was planning on just relaxing after my awful Acct 209 test, but the TAGD nerds (who have recently become my friends) were showing off their code and also some awesome websites on the internet.

BugMeNot
Problem:
ok, so this has happened to all of us who use the internet long enough. You're doing a search online for some material, say a demo of the new Serious Sam 2 game, and the website you're about to download from has the requirement that you be a "member" to download.
ARG! What a pain in the butt! First, you have to fill out a long form, with all your personal information, and you think to yourself, "Ha! I'll just leave all the elements blank, except for the email address" and the server comes back with those stupid

*required field ->

>:-\ So you place some bogus field and it comes up with

*not a valid phone number

(ie: 123-456-7890)

ARGGG!!!!
So then you fill in all the stupid required fields with your friend's information, except with the email address because they all send you a stupid confirmation email, so they know for sure where to send the LOADS AND LOADS OF SPAM TO!!!!
Solution:
This nifty and aptly named website, "BugMeNot"
It's a simple idea: Instead of having everyone fill out the forms, have one person fill it out once and share the user account.
This has been happening on a much smaller level before BugMeNot. Think of all the times that you logged into fileplanet or some news broadcast on your buddy's name because it's just faster.
Well, now it's been organized and made very simple. In fact, there's even a firefox extension (put out by roachfiend)

The Firefox extension is Frillin' Awesome!
Just right click in the user field of the website, click "BugMeNot!" and the userfield AND password are auto completed AND the website is entered! THAT'S AWESOME!

If you don't use firefox you can just visit BugMeNot.com, put in the html address that is giving you a problem and it will instantly give you a username and password for that website. If no website is found you can "give back" to the community by filling out the stupid form and submitting the username and password you get.
It's a great idea!

Woot!
Problem:
Yeah, so you know those people that stay up until 3:32:21am to grab that ebay sale? Yup, you know them... they're your mother, your younger brother, or sadly... you.
Solution:
Well, Woot is a website that adds some consistency to your life. Every day at 12:00 exactly a new item is posted for an "unbeatable price!!!" lol.
It's a lot of tech stuff mainly (speakers, projector combos, ect...) trying to appeal to the techno junkies and gadget freaks. The website is layed out in a very "info-mercial" style with a big yellow "I want one!" button. lol, it's a fun idea and there are a bunch of good deals, too (well, one per day).

Eclipse
For every programmer, there is some underground editor that is better than all the rest "Because it just is, ok?!?". lol
For me, when I started programming with java, I was an insane user of "Jedit". Why? Mainly because it had "Jedi" in it, LOL. Also, it had a TON of addons (plugins) that could extend it's functionality and it was very fast for doing simple tasks (the problem with other solutions like JBuilder and JavaBeans.


Well, Eclipse is a Java editor (current version 3.1.1) that has been growing a lot lately. I got it a while back and it was very impressive. It seems that some of my fellow computer science friends have it working with C++ (pdf), perl, python, and more!
It really is a beautiful IDE. It seems that you have to solve some of the linking issues when you start using it for developing C/C++ projects.

I wonder what ever happened to that Java OS that everyone was screaming (video, alternate site)about a while back... I haven't heard anything from sun about it...
My brother got a live CD after attending a conference that ran a JAVA OS. It was slow (which I blamed on Java, and he blamed on it being a live-CD ;-) ) and wasn't nearly as cool as the video I linked, but showed the limitlessness of Java.
I was impressed and wish they would release some more information about it.
Sigh, but such is life.