Ajaxular - All Things AJAX

Home

If you have an iPhone and are a developer, you have probably thought about writing a cool application for this phone. Well, today at the iPhone SDK press conference Apple announced that they have released the iPhone SDK.

You can watch the Keynote here.

Or if you prefer to read about it you can read a live blog about it here.

Below is an excerpt from the blog that I thought was particularly interesting.

10:19AM - "Ok, I'm here to tell you about how developers can build great apps on the iPhone. Before I get into the SDK, I want to give an update on web apps. This has been incredibly successful, there are over 1,000 web applications for the iPhone."

He's highlighting some web apps, including Facebook. Yep, great, let's get to the SDK dude.

"Already the iPhone is the most popular mobile device with Bank of America -- it accounts for 20% of ALL mobile banking with them. But today what I really want to tell you about is the native iPhone SDK."

10:21AM - "Starting today... we're opening the same native APIs and tools to build our iPhone apps."

"3rd party developers can build native iPhone apps using the same SDK that WE do. There are a lot of pieces that make up the SDK in a set of APIs -- that suits us well, Apple is a platform company. We have the most advanced platform in the world in the form of OS X. It's comprised of four layers..."

"The core OS, core services, media layer, and Cocoa -- to build the iPhone OS we took the bottom three layers to form the iPhone OS. Cocoa is interesting and it's the best app framework out there, but it's based on a mouse and keyboard. So we took everything we knew.. and built Cocoa Touch."

10:22AM - "This here is the architecture of the iPhone OS -- let me dig a little deeper. We'll start with the kernel. This is the same OS X kernel based on the same project and same source files of OS X; the networking layer we use is the same BSD networking layer we use on OS X. And power management... Apple has more than a decade of experience in advanced power management."

10:25AM - "We started with those advanced power management techniques and went beyond that -- the core OS power manages all of the chips, all the sensors, your application, automatically. Now, core services, I'll just highlight a few. We have a complete set of APIs for your app to talk directly to the contacts DB on the iPhone, and an entire database API with SQLite.

"Core Location - we've taken that and patched it into an API so you can create location-aware applications. The media layer... starting with Core Audio, this is the low-level audio layer; on top of that we've built OpenAL, an industry standard."

10:27AM - "Video playback: seamless video playback, uses our h.264 codec, built right in." So we can add new video codecs right? RIGHT? Sigh. "Core animation... OpenGL ES, the embedded version of OpenGL and a screamer for 3D graphics on the iPhone. In fact, this entire layer is heavily hardware accelerated."

10:29AM - "Cocoa Touch - our advanced touch event system; the accelerometer - what you might not know is that it's a full 3-axis sensor, and you can use that in your apps as well. ... this is the architecture for the iPhone OS, the most advanced mobile platform out there. We think we're years ahead of any other platform. We borrowed heavily from OS X -- we started on the shoulders of a giant."

"We have a comprehensive set of tools to help developers create and debug apps -- let's start with Xcode. We started there and enhanced it to support the iPhone; now we use Xcode to build the OS and apps for the iPhone. What is Xcode? It starts as a great source code editor -- it knows all about the iPhone SDK, will code-complete the APIs for the iPhone SDK."

10:30AM - "... it also integrates directly with source control management system, subversion, cvs... integrates with iPhone SDK documentation, and also has a nice debugger -- it's also a great remote debugger. Plug an iPhone in, run the app live on your iPhone, and be debugging it from your Mac. This is incredibly powerful."

10:32AM - "The next tool I'd like to talk about is Interface-Builder -- this is the tool you'll use to... wait for it... build your application interface. We have the complete library of iPhone interface assets, just drag them onto the canvas." Showing making connections from the view layers to control layers; it's also localizeable. "Next: Instruments..."

"We took those three and enhanced them for the iPhone, but there's a brand new tool: the iPhone Simulator. It runs on a Mac and simulates the entire API stack on your computer."

10:34AM - "So, we have a fantastic set of tools in addition to an amazing set of frameworks." Demo time. iPhone Simulator gets going -- looks identical to using an iPhone. Tiny bit creepy, actually.

Below is the blurb that Apple puts on their site about the SDK.

The iPhone SDK includes the Xcode IDE, Instruments, iPhone simulator, frameworks and samples, compilers, Shark analysis tool, and more.

You can download the free SDK here.
Please note the technical requirements are an Intel processor-based Mac running Mac OS X Leopard

You can get more information about the SDK here.

Unfortunately, I don't have access to a Mac, so I won't be able to make any applications for the iPhone (although, I haven't tested the del.icio.us Spy or Digg Burry Recorder on it yet, so maybe I've already made an iPhone application). However, if you have access to a Mac and want to make iPhone applications you can now go for it. If you do create the next killer iPhone application let us know about it by writing a blog post about it using your free Ajaxonomy account.

Both Mootools and Dojo are great libraries for JavaScript effects. I found two posts that are about a nice effect for saving data on a form.

The way that the effect works is:

Submit a form

Display a message box with the message "Saving..."

When the Ajax request is complete display "Saved!" into the box and after some second it disappear with a fade-out effect.

The first post is about using Mootools to create the effect. Below is an excerpt from the post.

Step 1: HTML Code
HTML code is very simple. I added only the essential elements, the message box (with ID "box") and an input element with a button (with ID "save_button"), but you can customze it with a more complex structure:

<div id="box"></div>
<input name="myinput" type="text" /> <input id="save_button" name="save_button" type="button" value="save"/>

step 2: CSS Code
You can coose a style for your message box changing how you want these attributes:

#box {
margin-bottom:10px;
width: auto;
padding: 4px;
border: solid 1px #DEDEDE;
background: #FFFFCC;
display: none;
}

Remember to set the initial display attribute to "none". In this way the message box will appear only when an user submit the form:

Step 3: Javascript Code
Copy this code in the <head> tag of the page:

<script type="text/javascript">
window.addEvent('domready', function(){
var box = $('box');
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});

$('save_button').addEvent('click', function() {
box.style.display="block";
box.setHTML('Save in progress...');

/* AJAX Request here... */

fx.start({
}).chain(function() {
box.setHTML('Saved!');
this.start.delay(1000, this, {'opacity' : 0});
}).chain(function() {
box.style.display="none";
this.start.delay(0100, this, {'opacity' : 1});
});
});
});
</script>

f you never used Mootools, but you are familiar with JavaScript, this line of code:

var box = $('box');

... let me say "it's equal" to:

var box = document.getElementById('box');

This line of code enable a delay of 1000 ms (1 second) before to apply fade-out effect:

this.start.delay(1000, this, {'opacity' : 0});

You can read the full post here. You can view the demo here and you can download the tutorial including Mootools here.

The second post is about using Dojo to create the same effect. Below is an excerpt from the post.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>Test save</title>
<script type="text/javascript" src="/js/dojo/1.0.2/dojo/dojo.js" djConfig="parseOnLoad: false,usePlainJson: true"></script>
<script type="text/javascript">
dojo.addOnLoad(function(){
dojo.query("#save_button").onclick(function(){
dojo.fadeIn({
   node:"box",
   duration:500,
   beforeBegin: function() {
       dojo.query("#box").style("opacity", 0).style("display","block")[0].innerHTML = "Save in progress...";
},
   onEnd: function(){
       dojo.xhrGet({
           url: "data.txt",
           handleAs: "text",  
           load: function(data){
               var node = dojo.byId('box');
               node.innerHTML = "Saved !";
               dojo.fadeOut({
                   node:"box",
                   duration:1000,
                   onEnd: function(){
                       dojo.query("#box").style("display", "none");
                   }                  
               }).play();
           },
           error: function(data){
               console.debug("An error occurred: ", data);
           },
           timeout: 2000
       });      
   }
}).play();
});
});
</script>
<style type="text/css">
#box {
margin-bottom:10px;
width: auto;
padding: 4px;
border: solid 1px #DEDEDE;
background: #FFFFCC;
display: none;
}
</style>
</head>
<body>
<div id="box"></div>
<input name="myinput" type="text" />
<input id="save_button" name="save_button" type="button" value="save"/>
</body>
</html>

First thing, I connect the onclick event to #save_button button.

dojo.query("#save_button").onclick(function(){

I use the dojo.query method. with #, it return a dom object whom id is matching #save_button. There are lots of possibility, because it supports CSS3 selectors. (see here)

I did a fadeIn effect on div #box. In dojo, the div you fadeIn has to be visible. So I set its opacity to 0 and its display to block. Notice the chain ;)

When effect is ended, I start an ajax request using dojo.xhrGet.

dojo.xhrGet({
 url: "col.htm",
 handleAs: "text",                
 load: function(data){
     var node = dojo.byId('box');
     node.innerHTML = "Saved !";

You have to pass an object to this fonction. It's much more readable than a simple function call with parameters. And of course, you can omit parameters.

The load function is called when ajax request ends. At this time, I set box content to "Saved !" and apply a fadeout effect.

dojo.fadeOut({
node:"box",
duration:1000,
onEnd: function(){
    dojo.query("#box").style("display", "none");
}                               
}).play();

dojo.fadeOut or dojo.fadeIn return an anim object. You play the anim with play() method (Wow !)

At the end, I set box display to none, so that box div returns to its initial state.

You can view the full post here.

The effect could be pretty useful. The nice thing about the tutorials is that you can kind of compare the code required to accomplish the effect in both libraries. I was looking to see if someone wrote the same effect in jQuery so that I could have that code to compare, but I haven't found this in jQuery, so if you know of a post about this in jQuery I would love to see it (you can leave it in the comments or you could write a post about it on this blog with your free Ajaxonomy account).

Daynger

Ajaxular - All Things AJAX

How To Add Numbers To Your Comments in 3 Easy Steps [WordPress Tip]

RSSless WordPress Plugin Released

Force Widescreen iDVD Projects to Letterbox on Standard TVs [Mac Tools]

Website Translating Even If You Don?t Know What Language It?s Written In [Online Tips]

Review: Apprise RSS Reader

Admin Favicon v1.3 Released

Freelancers: Payment Refused. Now What?

My 20 Favorite Shortcuts and Utilities for Mac

WordPress 2.6: Easy Upgrade

Photographing Fireworks