Ajax

New Google API Features

Tagged:  

The Google Chart API is a great API for building applications that represent data in a simple chart. Well, there are a few new features to the API.

Below is a rundown of the new features.

  1. You can now create Sparklines
  2. You can now create Radar Charts
  3. Now you can create Map Charts
  4. They added scaling for text encoded data
  5. They added support for negative numbers on bar charts
  6. They added ability to draw data lines on bar charts

As with everything in the Google Chart API you simply pass values in the URL. To create a Sparkline you would pass in &cht=ls. If you want to create a Radar Chart you would pass in &cht=r or &cht=rs. In order to create a Map Chart you would pass in &cht=t.

You can get more information about the new features in the API here.

These new features make the API even more useful. I can see some good uses for these new features in future applications that I make.

Widgetbox - Easily Create and Distribute Your Widgets

Tagged:  

You may remember that not that long ago we released the del.icio.us Spy Widget. Well, after the initial release I started looking into Widgetbox to extend the capabilities of the widget.

Widgetbox allows you to create or extend widgets that are Flash based, HTML/JavaScript, A Web Page, Blog/Feed or a Google Gadget. Creating a widget is easy, you just click on Make a Widget, then choose the type of content that you want made into a widget and you finally fill out the information in the forms to create your widget. Your widget can also be made to add to social networks like Facebook and MySpace (only Flash widgets can be put on MySpace) using a very simple wizard like process to setup the widget for these networks.

Widgetbox allows you to track subscriptions and hits of your widget. This tracking can help you easily see if your widget is gaining traction or if nobody cares about it. The service also has a directory that has a social feel (with it's user ratings and helping you find related widgets) and helps your widget gain in popularity due to it's viral features.

Below you can see the del.icio.us Spy Widget after using Widgetbox (If you are viewing this in a feed reader you will probably need to click on the del.icio.us Spy link to view the widget in a browser).

Widgetbox is a great tool for any developer wanting to make cool widgets that can easily be shared all over the web. Perhaps I should make a widget of the Ajaxonomy blog next. If you have used Widgetbox, I would love to hear about your experience (as usual, you can leave it in the comments or if you would like you can write a post on this blog using your free Ajaxonomy account).

The Best Cheat Sheets for Web Designers and Developers (From CSS, Ajax, Perl, Vbscript…)

Tagged:  

If you are a web developer then you probably love cheat sheets for various aspects of development. Well, over at specky boy they have posted quite a list of cheat sheets.

Below are a few of the cheat sheets in the post.

CSS (http://www.ilovejackdaniels.com)
CSS
Prototype 1.5.0 (http://snook.ca/)
Prototype 1.5.0
Script.aculo.us (http://ajaxian.com/)
Script.aculo.us

You can read the full post here.

This is a good list of cheat sheets for developers from around the web. If you find any cheat sheet that you think is particularly interesting I would love to hear about it (you can leave it in the comments).

80+ AJAX-Solutions For Professional Coding

Tagged:  

Smashing Magazine has put together quite a list of Ajax solutions. The list contains over 80 Ajax solutions and includes everything from Ajax star ratings to Slideshows.

Below is just a small excerpt from the post.

Enhanced AJAX Solutions

39. AJAX Instant Completion: Rico Framework

AJAX Scripts - Rico

40. Novemberborn: Event Cache

AJAX Scripts - Novemberborn: Event Cache

41. Altering CSS Class Attributes with JavaScript

AJAX Scripts - Altering CSS Class Attributes with JavaScript

42. Select Some Checkboxes JavaScript Function

AJAX Scripts - Select Some Checkboxes JavaScript Function

43. AJAX Emprise Charts: 100% Pure JavaScript Charts

AJAX Scripts - Emprise JavaScript Charts :: 100% Pure JavaScript Charts

44. amCharts: customizable flash Pie & Donut chart

AJAX Scripts - amCharts: customizable flash Pie & Donut chart

45. PJ Hyett : The Lightbox Effect without Lightbox

AJAX Scripts - PJ Hyett : The Lightbox Effect without Lightbox

You can read the full post here.

This is quite a large list so take some time and go through the entire list. While some of the items will be very familiar to you there where quite a few scripts that I hadn't seen before. It is worth a look.

Google I/O

Tagged:  

Mark your calendars for May 28th and 29th for the Google I/O event held at San Francisco's Moscone. The event will focus on new technologies that Google offers to help developers make new killer apps. The event promises to talk about technologies like Google Gears, Open Social and Google Android.

According to the Google I/O site the below speakers scheduled to appear.

Learn first hand from Google engineers like David Glazer, Alex Martelli, Steve Souders, Dion Almaer, Mark Lucovsky, Guido van Rossum, Jeff Dean, Chris DiBona, Josh Bloch, and many more leaders in the field of development.

Those are some pretty heavy hitters. If you are able to attend it promises to be worth your time (especially if your work is paying for the trip).

Below are just a sample of some of the sessions that you could attend (this is the social portion of the event).

Social

URLs Are People Too - Using the Social Graph API to Build a Social
Web

Kevin Marks, Brad Fitzpatrick

Type: 101

Using email addresses to identify people has a problem - email addresses
can be used to send, not receive. With the rise of blogs and social networks,
millions of people are using URLs to refer to themselves and others. The
Social Graph API indexes these sites and their connections, enabling this
web-wide distributed social network to be used to make your sites better.
Learn how XFN and FOAF express connections, how we index them, and how OpenID
combines with The Social Graph API to help connect people on the web to your
applications, and save your users from re-entering their friends over and
over again.

OpenSocial: A Standard for the Social Web

Patrick Chanezon, Kevin Marks, and Chris Schalk

Type: 101

OpenSocial is an open specification defining a common API that works on
many different social websites, including MySpace, Plaxo, Hi5, Ning, orkut,
Salesforce.com and LinkedIn, among others. This allows developers to learn
one API, then write a social application for any of those sites: Learn once,
write anywhere.

In addition, in order to make it easier for developers of social sites to
implement the API and make their site an OpenSocial container, the Apache
project Shindig provides reference implementations for OpenSocial containers
in several languages (Java, PHP). Shindig will define a language specific
Service Provider Interface (SPI) that a social site can implement to connect
Shindig to People, Persistence and Activities backend services for the social
site. Shindig will then expose these services as OpenSocial JavaScript and
REST APIs.

In this session we will explain what OpenSocial is, show examples of
OpenSocial containers and applications, demonstrate how to create an
OpenSocial application, and explain how to leverage Apache Shindig in order
to implement an OpenSocial container.

OpenSocial Specification: What's Next for OpenSocial

David Glazer

Type: 201

OpenSocial is an open specification established by a group of social sites
and application developers. While OpenSocial version 0.7 is being rolled out
on several large social networking sites, the specification is evolving to
include more features useful to social application developers.

This session will cover the most interesting features that are discussed
in the specification working group to be included in the next versions of
OpenSocial, like an OpenSocial template language, and the OpenSocial RESTful
API.

Apache Shindig: Make Your Social Site an OpenSocial Container

John Panzer, Dan Peterson

Type: 101

Shindig is a new project in the Apache Software Foundation incubator and
is an open source implementation of the OpenSocial specification and gadgets
specification in multiple programming languages. The goal of Shindig is to
make it easy for social sites to extend their functionality using the
OpenSocial API, which makes it easier for developers to write those
extensions.

This session will explain what Shindig is, the server's architecture, the
JavaScript and Java Service Provider Interfaces that developers can leverage
to integrate Shindig with their social site, and the state of the Shindig
ports to other languages (PHP, .NET, Ruby). We will do a live demonstration
of how to integrate Shindig with an existing social site.

OpenSocial across Containers

Arne Roomann-Kurrik, Lane LiaBraaten

Type: 201

OpenSocial provides a common set of APIs that developers can learn in
order to create applications that run on multiple social sites. However,
since social sites vary widely in functionality, OpenSocial provides ways to
extend the core APIs so containers can implement site-specific
functionality.

This session will cover best practices for how to extend the OpenSocial
API for your container, as well as how to write applications that will run on
multiple OpenSocial sites.

Best Practices for Spreading Your App without Ruining the User Experience

Vivian Li, Chris Schalk

Type: 201

The OpenSocial API provides features that application developers can use
to help their users share the application with their friends. We'll review
other social application architectures that allow apps to spread virally.
We'll then discuss the sharing features in OpenSocial in detail including a
review of requestSentMessage and requestShareApp. We'll also go over
programmatic best practices for such things as determining if an app is
already installed, and we'll look at example apps that have successfully used
these features.

Building an OpenSocial Application, Focus on Client Side APIs

Arne Roomann-Kurrik, Dan Holevoet

Type: Code Lab

Become a social hax0r! In this session you'll build your first social
app, from setting up a place to host your application to accessing the
OpenSocial APIs. By the end of the session you 'll have your own gift-giving
application that accesses profile information, stores data using the
persistence API, and publishes activities that your friends can see. This is
a hands-on session so don't forget your laptop and power adaptor!

Building an OpenSocial Application in the Cloud

Patrick Chanezon, Lane LiaBraaten, Jason Cooper

Type: Code Lab

Simple OpenSocial applications can be built without any server side logic,
leveraging the OpenSocial persistence API. For more complex applications
requiring server side logic, many developers choose to use their own server.
As their applications spread virally and become more successful, these
developers end up spending most of their time making their applications scale
instead of adding new features.

Cloud computing services can provide a solution to these problems. This
session will explain how to build an OpenSocial application with server side
business logic, on top of a cloud computing platform, using makeRequest to
make digitally signed calls to your server side logic.

Make Your Social Site an OpenSocial Container Using Shindig

Patrick Chanezon, Kevin Marks, Chris Schalk

Type: Code Lab

Shindig is a new incubator project in the Apache Software Foundation and
is an open source implementation of the OpenSocial specification and gadgets
specification in multiple computer languages. The goal of Shindig is to make
it easy for social sites to make the OpenSocial API available for application
developers on their site.

In this code lab, attendees will implement part of the OpenSocial API in an
existing open source Java social site engine.

Fireside Chat: OpenSocial

OpenSocial developers

Type: Fireside Chat

Fireside chats are a chance to talk to the engineering team building
products. Come hear from OpenSocial container engineers across the web and
get your questions answered first hand.

You can get a full list of available sessions here.

Pricing for the event is:

  • Early Bird (until 3/28) $300
  • Attendee Registration (starting 3/29) $400
  • Students $50

You can sign-up for the event here.

Quick Ajax Loading Icons

If you've done any Ajax development then you know that much of the loading of data is done in the background. This is great from a developers stand point, but from a users stand point it can be confusing as to what is happening while the data is being loaded. The solution to this is to show a loading indicator.

A loading indicator is a great idea and a nice animated image that could be hidden would be nice. However, if you are like most developers making a nice animated image may not be your strongest point. Well, today while seeing what was getting bookmarked on del.icio.us, using the del.icio.us Spy, I found an interesting and simple service that makes it very easy to get a nice looking loading indicator.

The service is call Ajaxload and is very easy to use. You simply choose the loading icon that you like and the background/foreground colors (you can even have the background transparent). Then you just save it to your computer using the "Download It" button and then you have your own customized loading indicator.

You can go to the service by clicking here.

If you have used this or a similar service I would love to hear about your experience with it (you can leave a comment, or if you would like you can write a blog post about it on this blog, using your free Ajaxonomy account). So, remember that your users would love to see a loading indicator when it is appropriate.

JavaScriptMVC - Model View Controller for JavaScript

You may have heard about the JavaScriptMVC library (it received quite a bit of press because of it's compression capabilities) and may have thought about using it, but haven't played with it yet. Well, I've been looking at the library and have found a few tutorials very useful.

If you haven't downloaded the library you will want to do it before starting working on the tutorials (You can download the library here).

The first tutorial you should read is the getting started tutorial. This tutorial covers the basics of including the JavaScript files and the plug-in files.

Below is an excerpt from the getting started tutorial.

Including plugins and JavaScripts

All JavaScriptMVC functionality comes in the form of a plugin. We'll include the Controller plugin, which organizes your event handlers.

Replace myapp.html with the following HTML. Note the numbered comments, which are explained after the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
   <head></head>
   <body>
      <script type='text/javascript' src='jmvc/include.js'></script>
      <script type='text/javascript'> 
         include.plugins('controller'); 
include('myscript');
      </script>
   </body>
</html>
  1. Creates a script tag where we'll include a plugin and a script.
  2. Loads the Controller plugin.
  3. Loads myscript.js, a file we'll create in the next section.

The next tutorial that I would recommend reading is the controller tutorial. The tutorial goes over the syntax that is required to use the controller.

Below is an excerpt from the controller tutorial.

Main Controller

If you want to respond to events like:

  • the page being loaded
  • the page being unloaded
  • the page being resized
  • the page being scrolled

you create a special main controller by naming it 'main'. The main controller listens for events on the window, document, and body.

$MVC.Controller('main',{
  // the window onload event handler
  load: function(){
    alert('page loaded');
  },
  // the window resize event handler
  resize: function(){
    alert('page resized');
  }
});

The next tutorial that I would read is the view tutorial. This tutorial gives an overview of how the view functionality is accomplished including the use of templates.

Below is an excerpt from the view tutorial.

Create a Template

The first step towards cleaner code is separating your presentation markup (HTML) from your application logic (JavaScript). We'll do this by separating our presentation markup into a separate file called a template. Create a file called cleaning.ejs and insert the following code:

<h1><%= title %></h1>
<ul>
    <% for(var i=0; i<supplies.length; i++) { %>

        <li>
            <a href='supplies/<%= supplies[i] %>'>
                <%= supplies[i] %>
            </a>
        </li>

    <% } %>
</ul>

You'll notice everything inside <% %> tags is
executed and everything inside <%= %> tags inserts itself into the returned HTML string.

We need to add JavaScript to control the loading and rendering of the template.
We'll replace the original string concatenation code with the following:

// load the template file, then render it with data
var html = new View({url: 'cleaning.ejs'}).render(data);

Doesn't that feel better? The template code restores HTML to its intended structure and the JavaScript code is short and unambiguous.
The dust is clear, now its time to mop.

It is good to see a library try to bring some form of the Model View Controller design patter to JavaScript. If you use this library for any of your projects I would love to hear about them (as usual you can leave them in the comments or write a blog post about it using your free Ajaxonomy account).

TaffyDB: A Javascript database for your browser

Tagged:  

Have you ever built an Ajax application that has some data that needs to be saved and queried for the current session, but not for multiple sessions. Well, instead of creating a temporary database table Ian Smith has come up with a better solution called Taffy DB.

Taffy DB is like having a SQL database in your browser! The Taffy DB is accessed through JavaScript, so it is great for Ajax applications. The library is under 10KB and plays well with other libraries like jQuery and the Yahoo! User Interface.

Below is how the library is described on the official Taffy DB Website

Taffy DB is a free and opensource JavaScript library that acts as thin data layer inside Web 2.0 and Ajax applications.

What makes it cool:

  • Under 10K!
  • Simple, JavaScript Centric Syntax
  • Fast
  • Easy to include in any web application
  • Compatible with major Ajax libraries: YUI, JQuery, Dojo, Prototype, EXT, etc
  • CRUD Interface (Create, Read, Update, Delete)
  • Sorting
  • Looping
  • Advanced Queries

Think of it as a SQL database in your web browser.

Below are some examples of how you would use the library.

Example #1:

Let's say you have a collection of products and you want to find every product that costs less $10 and is not a book. Simple, just write some JavaScript:

products.find({price:{lessthan:10}, type:{not:"Book"}});



Example #2:

Let's say you want to update every product from XZYDesign and set the status to not available:

products.update({status:"NA"},{manufacturer:"XZYDesign"});



Example #3:

Let's say you want to sort your products based on type, price ascending, and quantity ascending:

products.orderBy(["type",{"price":"asce"},{"quantity":"asce"}]);

Below are the methods that are available from the library.

  • Find Method
  • Update Method
  • Insert Method
  • Remove Method
  • OrderBy Method
  • ForEach Method
  • Get and First Methods

You can find an overview of all of these methods here.

You can read more about the library here.
You can download the library here.

You can see the library in action at Joe's Goals and Quote Wizard. I can see a lot of uses for this in some future applications. If you use this library in any of your applications I would love to hear about it (you can leave a comment about it or write a blog using your free Ajaxonomy account).

Wired Comfort - Web Desktop

Tagged:  

Today I stumbled across an interesting web desktop. The idea of a web desktop that you can get to from any location is a good one. I've seen other web desktops and this one looks like it compares very favorably.

The web desktop has many features of a normal desktop such as a full web office suite (word processing, spread sheets and presentations). There are many more applications (such as an FTP application and a Chess game) included with your free account and you get 1 GB of storage space for your documents, videos or whatever you want to store on your account. This Web Desktop implementation is based on eyeOS, so you can develop applications using the eyeOS ToolKit.

Check it out for yourself here. If nothing else it is fun to play with.

I'd love to hear your thoughts on Web Desktops and if you would use one.

Nice Ajax effect for Message Box using Dojo or Mootools

Tagged:  

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:

  1. Submit a form
  2. Display a message box with the message "Saving..."
  3. 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).

Syndicate content