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!

Moo.Ajax

Moo.ajax Tutorial
Download Source Preview Example
Hi all, I know how everyone wants a moo.ajax tutorial and since I just finished redoing an old ajax website to use the moo libraries, I figure I can type it up really quick.

First of all, Ajax.
As you’ve heard a million times, ajax is simply the ability to communicate with your webserver without your user being required to wait for the response or be redirected (you can have dynamic page updates).

Moo.fx recently released a new library for making ajax calls very simply. The problem is that the documentation is lacking.

Since I was redoing an older ajax website, I went through the moo.ajax library code (it’s very small, took about 5 minutes) and discovered how they were making the calls.

This tutorial should simply explain how to use moo.ajax with php and also use it in correlation with the other moo.fx libraries for some pretty cool transitions for your ajax applications.

Starting off…
Let’s start with a simple application that will allow the user to replace a div with server information (much like the scoreboard example done over at deckerD).

(let me first off appologize for the images instead of code, blogger won't allow me to post code with tags like "head". You can download the complete source here).

HTML:

Let’s take some time to see what’s going on here.

First off, the moo.fx libraries are added (including moo.ajax).

Next, a simple function is made for executing the moo.ajax.
it’s first parameter is the server side script (fileFinder.php).

Next comes the options, as with all the moo libraries.

• postBody: the default method for moo.ajax is post, so postBody allows you to send arguments to your serverside script (we’ll see how to extract them later).
• update: sends the server’s response to a specified div
• onComplete: allows you to execute a function after the response has been received.

This snippet of code handles the transition after the ajax command is received. The first action is that the current div’s contents are copied over to the “switch” div (luckily this script is run before the update argument!).
Next, two instances of effects are created for switch (one with a time value of “0” for instant changing) and an instance is also created for the content div.
The content is initialized collapsed “myResize.hide();” and toggled to expand after 20milliseconds.

The switch div is first hidden, then toggled, both instantly (this is done to clear any previous state the div was in before, also to reset the size since the content copied over may be larger than the previous data). Then the switch is collapsed after 15milliseconds (hopefully along with the content layer for a neat transition).

In the body there are the two divs and a link inside “content” that runs the moo.ajax script on interaction.

PHP (fileFinder.php):

This php file just processes the arguments sent to it ($_REQUEST[‘action’]) and goes through the switch loading the other php files (identical to the scoreboard example).

TIP: If, though you want(or need) to send multiple arguments, separate them with some character and “explode” them into an array (example below).

PHP (info1.php):

This php file just prints out some html text, and also adds a link for going to the next file.

NOTE: In all honesty, the link doesn't have to be written in php. I did that so that I could easily break it apart for adding dynamic links (aka: I could use the multi-argument example above to make the link go somewhere else from the first command (control the post-flow of content).

See it all in action
Now that all the code is out on the table, let’s see it working!
Click Here

Some other tricks:
A new problem I’ve encountered since I started working in ajax is that I am beginning to miss my “onload” commands I knew and loved so much. You can only place an “onload” in three situations,

1. iframes
2. Body
3. Images

I found a quick (and dirty) way of getting my onloads back for ajax. Simply place an image in your code with a height and width of “0px”. While this looks really nasty in the code, it is unseen by the users and allows you to execute functions that would take time to program around (simply good for people who are upgrading their websites to ajax).
Note: if you know any other way to do this that isn’t as dirty, please comment!, lol.

Well, I hope that helps yall.
~follower

"This Code Is Clean"

Sigh,
After 6 hours of coding on Friday, 14 hours straight yesterday and 7 today, I am finally finished (in case you didn't catch that, it's 27 hours total).

I'm listening to: Geto Boys - "It Feels Good To Be A Gangsta" bobbing my head to the heavy beat.

I AM OFFICE SPACE.

I think I'm going to start work on a new movie.

"College Space"
homework hoovers

It'll be a horror/Comedy
;-)


Here's a little piece of my output. This program was created to split up memory into fibonacci sized blocks (block size = previous size + 2nd previous size) and ship it over to an array that holds them in doublely linked lists. Anyway, it was a lot of work, and most of the time was spent figuring out what I needed to do and then juggling the memory from list, to allocated and back again. Also the memory manager can split larger memory blocks and coalesce them as needed (aka, if you need 13, but there aren't any blocks that size, it goes to 21, splits it into 13 and 8 and takes 13).

Adding Block <0> Size: <6765> to freelist in index <0> FreeList Size: 10 index 1: 1 <7935> index 2: 1 <7933> index 3: 1 <7930> index 5: 1 <7925> index 8: 2 <7917><7909> index 13: 1 <7896> index 55: 1 <7841> index 89: 1 <7752> index 987: 1 <6765> index 6765: 1 <0> nreclev =2 MOD_1=<17> mod_2=<42>to_alloc=110100 COUNT =1841471 Allocating: <28> Allocating: <34> !!!Splitting Splitting 55 into 34 and 21 Adding Block <7841> Size: <34> to freelist in index <0> Adding Block <7875> Size: <21> to freelist in index <0> FreeList Size: 11 index 1: 1 <7935> index 2: 1 <7933> index 3: 1 <7930> index 5: 1 <7925> index 8: 2 <7917><7909> index 13: 1 <7896> index 21: 1 <7875> index 34: 1 <7841> index 89: 1 <7752> index 987: 1 <6765> index 6765: 1 <0> Freeing Address: <0> Adding Block <0> Size: <6765> to freelist in index <0> FreeList Size: 11 index 1: 1 <7935> index 2: 1 <7933> index 3: 1 <7930> index 5: 1 <7925> index 8: 2 <7917><7909> index 13: 1 <7896> index 21: 1 <7875> index 34: 1 <7841> index 89: 1 <7752> index 987: 1 <6765> index 6765: 1 <0> Time: 0 sec / 19219070 nsecResult: 7 Time for computation : Time: 0 sec / 14418380 nsec Number of allocate/free cycles: 27F

Yeah, it's pretty boring, but it's the work of 27 hours and I'm proud of it.

Also, I tried OpenOffice
for the first time (it's the portable version of beta 2). I LOVE IT!
I tried the 1.x version a while back and didn't really like it. I preferred word, but this new version is great! It has a feature that goes through your typed text and searches for large words and then it starts getting sweet. It autocompletes the words as you type...
Now, this sounds like it could be annoying, but it's really, really useful.

Microsoft Word has a feature similar to this, but it only autocompletes on words like "Wednesday" or "January". This is a problem since I don't type those often.
Since it pulls words from the file I'm writing at the time, I most likely will use them again and I can prepare to use the autocompletes (just press enter to complete the word).
I found that it was very easy and quick to get used to. I can see this feature becoming a necessity, just like mouse gestures in firefox or a scroll wheel on a mouse. One of those features you get so used to that when you use someone else's computer and it's not there you kinda step back a second and then say,
"Oh, wow! I forgot what it was like to use a computer before this."

lol, I'm kinda dramatic about this, but I was close to "flat-lining" when I submitted this (submitted at 23:59, so I just made it in under the door) and this feature almost doubled my typing speed.

I just finished torrenting the newest leak of Windows Vista.
I'm very excited about installing it on my laptop. Sadly, I haven't found any 64bit versions, so I keep using the x86 beta on my 64bit laptop. :-Oh well. I'll be sure to put up some screenshots when I've got it up and running.

Speaking of Office,
I went to a presentation put on by Microsoft Thursday. The lead speaker was the corporate vice president of the Office division, Grant George. It was interesting mainly because he talked about the OpenDocument formats. He was asked whether the newest version of Office would support it. He said something like,

"Oh... well, we do what the market requires. Right now we aren't too concerned with this new format."

Basically, he said that they would support it if and only if they had to. It really makes sense for a business standpoint. They have the standard right now. OpenOffice and StarOffice are trying their hardest to make their products that can translate the Microsoft formats. It's great for Microsoft. If their competitors get on their backs, or start taking over their share of the market, all Microsoft has to do is completely change the way their files are created and read and all the competitors are sent back (also they could say that the format was changed to add in new features; AKA video in word files and such). If OpenDocument were to become a format used globally, Microsoft would have to start competing on a new level.
What's on that level? A bunch of stuff Microsoft doesn't want to worry about. They would have to compete with features and price. Users (and companies) would be able to buy (or in the case of openoffice, just download for free) the office package that suites them best, not the software that their customers have or the industry uses as a standard. I really wish someone would do something similar to adobe. That monster of a company has the publishing industry under it's finger. The first thing any publisher, printer, webdeveloper, or independent artist buys is a $600 copy of photoshop.

Now, I love photoshop
and have used it for many years (legal copy, too), but other software solutions aren't compared on what they can do, but rather if they can export to the adobe standard. These situations are located in almost all software categories (AutoCad, Windows Explorer, Quicktime, Quark but now InDesign...) (Quark kinda shot themselves in the foot). I was just surprised to hear the Microsoft Rep say that they didn't have any plans on implementing the new format.

In his defense,
nothing has been finalize, really, so there isn't much to say. I'm sure Microsoft will release a plugin or patch later to allow exporting and importing OpenDocuments.
Also, when you're the biggest and you've got everything coming your way, why cut yourself and your profits down? It's not a smart business practice and I would most certainly do the same thing!
lol.

Well, it's 1:30 and I have a 9am class
(yay for databases)

OS Project (Machine Problem 1)

Goodness!!!
This is a killer of a problem. I've been working on it for three days straight!
I got up at 10am, started working on it...
I started a playlist too...

Playlist length: 6 hours 33 minutes 27 seconds

Playlist files:

1. Rolling Stones - (I Can't Get No) Satisfaction (3:46)
2. Aretha Franklin - Respect (2:27)
3. Led Zeppelin - Stairway to Heaven (8:02)
4. Bob Dylan - Like a Rolling Stone (6:09)
5. Bruce Springsteen - Born to Run (4:31)
6. Eagles - Hotel California (6:31)
7. Doors - Light My Fire (7:08)
8. Beach Boys - Good Vibrations (3:37)
9. Beatles - Hey Jude (5:03)
10. John Lennon - Imagine (3:05)
11. Kingsmen - Louie Louie (2:46)
12. Beatles - Yesterday (2:05)
13. The Who - My Generation (3:24)
14. Marvin Gaye - What's Going On (3:51)
15. Chuck Berry - Johnny B. Goode (2:42)
16. Derek and the Dominoes - Layla (7:06)
17. The Who - We Won't Get Fooled Again (8:33)
18. Elvis Presley - Jailhouse Rock (2:34)
19. Don McLean - American Pie (8:32)
20. Beatles - A Day in the Life (5:33)
21. James Brown - I Feel Good (2:46)
22. Stevie Wonder - Superstition (3:59)
23. Beatles - I Want to Hold Your Hand (2:25)
24. Rolling Stones - Brown Sugar (3:49)
25. Jimi Hendrix - Purple Haze (2:50)
26. Rolling Stones - Sympathy for the Devil (6:27)
27. Queen - Bohemian Rhapsody (5:53)
28. Kinks - You Really Got Me (2:36)
29. Roy Orbison - Pretty Woman (2:58)
30. Simon & Garfunkel - Bridge Over Troubled Water (4:55)
31. Elvis Presley - Hound Dog (2:18)
32. Beatles - Let It Be (4:03)
33. Otis Redding - (Sittin' on) The Dock of the Bay (2:45)
34. Jimi Hendrix - All Along the Watchtower (4:00)
35. Aerosmith - Walk This Way (3:32)
36. Temptations - My Girl (2:44)
37. Bill Haley - Rock Around the Clock (2:10)
38. Marvin Gaye - I Heard It Through the Grapevine (3:17)
39. Creedence Clearwater Revival - Proud Mary (3:09)
40. Steppenwolf - Born to Be Wild (3:30)
41. Nirvana - Smells Like Teen Spirit (5:01)
42. Police - Every Breath You Take (4:13)
43. Ray Charles - What'd I Say (5:07)
44. Lynyrd Skynyrd - Free Bird (10:06)
45. Buddy Holly - That'll Be the Day (2:19)
46. Led Zeppelin - Whole Lotta Love (5:34)
47. Aerosmith - Dream On (4:27)
48. Mamas and the Papas - California Dreaming (2:41)
49. Van Morrison - Brown Eyed Girl (3:03)
50. Troggs - Wild Thing (2:36)
51. Crosby Stills Nash & Young - Suite Judy Blue Eyes (7:29)
52. Michael Jackson - Beat It (4:19)
53. Jerry Lee Lewis - Great Balls of Fire (2:32)
54. Bee Gees - Stayin' Alive (4:47)
55. Buffalo Springfield - For What It's Worth (2:37)
56. Bob Dylan - Blowin' in the Wind (2:49)
57. Beatles - Twist And Shout (2:33)
58. Billy Joel - Piano Man (5:37)
59. Beatles - She Loves You (2:21)
60. David Bowie - Space Oddity (5:18)
61. Beatles - Strawberry Fields Forever (4:10)
62. Led Zeppelin - Kashmir (8:32)
63. Patsy Cline - Crazy (2:43)
64. Clash - London Calling (3:20)
65. Rolling Stones - Jumpin' Jack Flash (3:44)
66. Led Zeppelin - Rock and Roll (3:40)
67. Al Green - Let's Get Together (3:15)
68. Elvis Presley - All Shook Up (1:57)
69. Rod Stewart - Maggie May (5:14)
70. Elton John - Your Song (4:04)
71. Elvis Presley - Heartbreak Hotel (2:11)
72. Beach Boys - God Only Knows (2:52)
73. Chubby Checker - Let's Twist Again (2:20)
74. Little Richard - Good Golly Miss Molly (2:11)
75. Cream - Sunshine of Your Love (4:12)
76. Beach Boys - California Girls (2:35)
77. Eddie Cochran - Summertime Blues (1:58)
78. Carl Perkins - Blue Suede Shoes (2:17)
79. Beatles - A Hard Day's Night (2:32)
80. James Taylor - Fire and Rain (3:26)
81. Them - Gloria (2:35)
82. Marvin Gaye - Sexual Healing (4:09)
83. Rolling Stones - Start Me Up (3:34)
84. Boston - More Than a Feeling (4:45)
85. Police - Roxanne (3:14)
86. Queen - We Are the Champions (3:01)
87. Bob Dylan - Tangled Up in Blue (5:41)
88. Jefferson Airplane - Somebody to Love (2:54)
89. Ben E. King - Stand By Me (2:53)
90. Jerry Lee Lewis - Whole Lotta Shakin' Goin' On (3:01)
91. AC/DC - You Shook Me All Night Long (3:24)
92. Prince - When Doves Cry (5:54)
93. Wilson Pickett - In the Midnight Hour (2:28)
94. Spencer Davis Group - Gimme Some Lovin' (2:52)
95. Van Halen - Jump (4:01)
96. Bruce Springsteen - Thunder Road (4:51)
97. Bob Marley - No Woman, No Cry (3:46)
98. Richie Valens - La Bamba (2:08)
99. The Carpenters - We've Only Just Begun (4:08)
100.Temptations - Papa Was a Rolling Stone (3:55)

As you can see, I have very good musical taste... Here's what my workspace looks like.
(I'm programming a memory manager for the MIPS architecture)
Anyways, I need to finish... almost there.

Check back later when I'm going insane studying for my Accoutning exam that's on Monday!
:-p