Activate your free membership today | Log-in

Tuesday, October 7th, 2008

Dojo 1.2 Final Release

Category: Dojo

Pete Higgins released Dojo 1.2 the first version under his command. There are a ton of subtle improvements such as:

New Datastores

  • dojox.data.JsonRestStore
  • dojox.data.CouchDBRestStore
  • dojox.data.GoogleFeedStore: A Google AJAX API powered data store for retrieving RSS and Atom feeds from Google.
  • dojox.data.GoogleSearchStore: Data stores to interface Google’s AJAX search services.
  • dojox.data.PersevereStore: dojox.data.PersevereStore is an extension of JsonRestStore to Persevere’s special features.
  • dojox.data.S3Store: an extension of JsonRestStore to handle Amazon’s S3 service using JSON data

New Projects in DojoX

dojox.analytics.Urchin

  • A Google-analytics helper, which supports lazy-loading the Google Analytics API at any point during a page lifecycle.
  • Allows you to post-onload include Google Analytics helper, and track Ajax-y pages via a simple API, with a very small overhead.

dojox.av

  • New project for Audio/Video elements
  • dojox.av.FLVideo: a player for Flash video files
  • dojox.av.widget.Player: Dijit-based object for playing Flash media

dojox.embed

  • A set of utilities that allow you to load/include Objects such as Flash and Quicktime.
  • dojox.embed.Flash for Flash movies
    • Create proxy information for Flash movies implementing ExternalInterface through dojox.embed.Flash.proxy
  • dojox.embed.Quicktime for Quicktime movies
  • dojox.embed.Object—a Dijit that can be used via markup for any dojox.embed objects available.

dojox.io.windowName

  • Provides secure cross-domain request capability. Sends a request using
    an iframe (POST or GET) and reads the response through the frame’s window.name.

dojox.io.xhrPlugins

  • This is a registry for creating alternate XHR handlers, for example
    you can register to use IE8’s XDomainRequest or a proxy server to handle
    cross-domain requests.

dojox.lang.aspect

  • dojox.lang.aspect is a new AOP library module for before/around/etc advice and other AOP features.
  • See the blog post for details.

dojox.lang.observable

  • Provides a form of getter/setter support to objects.
    Observable objects can be created such that all property
    reads, writes, and method calls will trigger listener functions
    so that you can create APIs where property interaction can be
    controlled and monitored.
  • This relies on VBScript hacks for IE and is somewhat
    limited in functionality.

dojox.secure.capability

  • This provides object-capability JavaScript validation.
  • This is a validator to run before eval to ensure that a script can’t access or
    modify any objects (like global objects) outside of those specifically
    provided to it.

dojox.secure.DOM

  • Provides a DOM facade that restricts access to a specified subtree
    of the DOM.
  • The DOM facade uses getters/setters and lettables to emulate the DOM API.

dojox.secure.sandbox

  • Provides support for loading web pages, JSON, and scripts
    from other domains using XHR (and XHR plugins) with a safe
    subset library and sandboxed access to the DOM.

We updated the Google CDN to point to the new version too, and AOL has done the same.

Posted by Dion Almaer at 1:20 am
Comment here

+++--
3.5 rating from 4 votes

Monday, October 6th, 2008

SMIL 3.0 Reaches Proposed Recommendation

Category: Standards

Synchronized Multimedia Integration Language (or SMIL) 3.0 has now become a proposed recommendation at the W3C. SMIL hasn’t been widely used, but some of it is widely supported thanks to ACID tests that had the browser vendors put it in.

3.0 has the following goals:

  • Define an XML-based language that allows authors to write interactive
    multimedia presentations. Using SMIL, an author may describe the temporal
    behaviour of a multimedia presentation, associate hyperlinks with media
    objects and describe the layout of the presentation on a screen.
  • Allow reusing of SMIL syntax and semantics in other XML-based
    languages, in particular those who need to represent timing and
    synchronization. For example, SMIL components are used for integrating
    timing into XHTML [XHTML10] and into SVG
    [SVG].
  • Extend the functionalities contained in the SMIL 2.1 [SMIL21] into
    new or revised SMIL 3.0 modules.
  • Define new SMIL 3.0 Profiles incorporating features useful within the
    industry.

Posted by Dion Almaer at 12:32 pm
3 Comments

+++--
3.4 rating from 5 votes

Ajaxified Body; When to refresh the page

Category: Ajax

Matt Raible has posted on the Ajaxified Body pattern, that loads content into the main area instead of reloading an entire page.

The surrounding template stays put, and the red area changes when you have an action:

This is an old question: “When should you just reload the page?” In the sample application you see the trade offs. Every click causes a red “Loading…” indicator, and just the main area changes. The browser doesn’t have any indication that something is happening, hence the need for the custom red indicator. You also then have to implement support for browser history, make sure that direct access works and the like. The positive is that you don’t get a refresh flash, but is that enough to warrant the change?

One of the use cases on the page is the rich table component. That should definitely be able to refresh and page without the page changing, but when the main content gets swapped in, I start to question. What do you think?

Matt uses SiteMesh, a great technology that can knit together the look and feel, and can fit in very well in this kind of world. If a browser goes directly to a page it can piece together the entire page, but an Ajax request can come in and it can just send back the main content. Very nice.

Posted by Dion Almaer at 10:29 am
13 Comments

+----
1.8 rating from 27 votes

js.io: client library for networking

Category: Comet, JavaScript, Library

Michael Carter et al have been working on js.io, a client library that gives you networking, including Comet like support, via JavaScript.

The low level work can sit upon Comet APIs, and in the future, Web Sockets, and you get high level APIs to protocols such as:

  • amqp
  • imap
  • irc
  • ldap
  • smtp
  • ssh
  • stomp
  • telnet
  • xmpp

There are some demos such as LiveHelp that uses Orbited as the backend.

Posted by Dion Almaer at 7:01 am
4 Comments

++++-
4.3 rating from 16 votes

Mecca: A new social browser

Category: Browsers

Mecca is a new browser by the prolific Todd Ditchendorf of Fluid fame. It is currently in the works, and features:

  • Open Plug-in Architecture
  • Built-in Userscripting
  • Userstyles
  • ÜberView for Plug-in Split Views
  • Global Keyboard Shortcut
  • Single-Window Browsing Mode
  • BrowsaBrowsa Plug-in for Sidebars
  • Session Restore
  • Full-Screen Mode
  • Customizable Shortcuts
  • Integrated Gears-loading (InputManager)
  • Hidden “Closed” Windows
  • Thumbnail Plug-in for CoverFlow
  • TinyURL creation/expansion
  • Automatic Software Updates
  • Custom User-Agent Strings
  • Full WebInspector
  • Custom Window Opacity/Level/Style

It looks very interesting, and I can’t wait to see it!

Posted by Dion Almaer at 6:56 am
8 Comments

++---
2.4 rating from 17 votes

Friday, October 3rd, 2008

iPhone Web Apps running at full screen

Category: Mobile, iPhone

I am so happy that the NDA mess is over! Clancy has written about how you can have your iPhone Web app run in full screen and has a demo app that shows it off:

HTML:
  1.  
  2. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
  3. <meta name="apple-mobile-web-app-capable" content="yes" />
  4. <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  5.  

Posted by Dion Almaer at 4:03 pm
10 Comments

+++--
3 rating from 17 votes

Vista / OS X Mash-up Created with GWT on PHP

Category: GWT, PHP, Showcase

Here's an interesting link for a Friday. Viktor Zeman on Quality Unit sent us a link to "PostAffiliateXpress", some boring IT application with an interesting interface and an even more intriguing back-end.

The UI combines a Vista-like "Start" menu along with an OS X-like dock (using everyone's favorite fish-eye widget). It also has a built-in widget system that leverages Google Widgets. Overall, it's a pretty nice implementation of a desktop and windowing in Ajax.

The framework itself is "GwtPHP" which attempts to take all the advantages of GWT and deploy them to PHP backends in an attempt to solve the problem of limited Java-friendly hosting services. Unfortunately, the framework isn't available for use until sometime in early November.

Dual-License

The developers intend to use the familiar "free for hobbyists, pay up for commercial use" licensing model (what their licensing page calls a "what for what" model).

Give some feedback

Viktor says that they are quite keen to get feedback from folks on the project, so interested folks should get in touch, let them know what you think about the licensing model, and perhaps get early access, etc.

Posted by Ben Galbraith at 10:51 am
6 Comments

+++--
3.3 rating from 37 votes

Thinking about the difference between frameworks

Category: JavaScript, Library

I got to meet Aaron Newton at The Ajax Experience, and he is a thinker. He was really taking in the various talks, and interactions, and you could tell that he was trying to work out various angles on the frameworks. What makes them different? What makes them popular? Where are they going?

He wrote a really nice post on some of these thoughts that goes into detail on different patterns for JavaScript programing. The meme at the show was definitely "the frameworks all do the same thing, just with a different looking API" which makes it even harder to put your finger on differences sometimes. Aaron does a good job.

John Resig himself gave a talk comparing the frameworks. Considering that he is Mr. jQuery, I thought he was very unbiased and had some good thoughts:

Posted by Dion Almaer at 10:20 am
38 Comments

+++--
3.5 rating from 51 votes

Practical Functional JavaScript

Category: JavaScript, The Ajax Experience

Oliver Steele gave a great talk at The Ajax Experience this week on Practical Functional JavaScript.

For his talk, he ended up creating a samples application where you can run the code directly, very similar to what John Resig did in Learn JavaScript.

The samples take you through JavaScript world, stopping for:

Posted by Dion Almaer at 10:11 am
Comment here

+++--
3.2 rating from 11 votes

Life: The game in Canvas

Category: Canvas, Games

Kyle McGregor took a look at the JavaScript games for Life out there and decided to write a Canvas version that ends up being a lot snappier. The entire game is pretty small:

JAVASCRIPT:
  1.  
  2. var counterface = 0;
  3. var oInstance;
  4. var Game = Class.create();
  5.  
  6. Game.prototype = {
  7.         'working': false,
  8.         'map': '',
  9.         'interval_id': '',
  10.     'initialize': function()
  11.     {
  12.  
  13.                 //generate map
  14.                 var startmap = [];
  15.                
  16.                 for(var y = 0; y <90; y++)
  17.                 {
  18.                         var row = [];
  19.                        
  20.                         for(var x = 0; x <90; x++)
  21.                         {
  22.                                 var state = Math.random();
  23.                                 state = (state> 0.8)? 1:0;
  24.                                 row[x] = state;
  25.                         }
  26.                        
  27.                         startmap[y] = row;
  28.                 }
  29.  
  30.                 this.map = startmap;
  31.                
  32.                 oInstance=this;
  33.                 this.interval_id = setInterval(function(){oInstance.loop()}, 100);
  34.     },
  35.     'loop': function()
  36.     {
  37.                 if (document.getElementById('frame').getContext)
  38.                 {
  39.                         // drawing code here
  40.                         if(this.working == false)
  41.                         {
  42.                                 this.working = true;
  43.                                 this.draw();
  44.                                 this.step();
  45.                                 this.working = false;
  46.                         }
  47.                 }
  48.                 else
  49.                 {
  50.                         // canvas-unsupported code here
  51.                         alert('Your Browser does not support the canvas tag. try again  in firefox 1.5+ or Opera 9+');
  52.                 }
  53.     },
  54.         'draw': function()
  55.         {
  56.                 var ctx = document.getElementById('frame').getContext('2d');
  57.                 ctx.save();
  58.                 ctx.clearRect(0,0,450,450);
  59.             ctx.fillStyle = "rgb(0,0,0)";
  60.  
  61.                 for(var y = 0; y <90; y++)
  62.                 {
  63.                         for(var x = 0; x <90; x++)
  64.                         {
  65.                                 if(this.map[y][x] == 1)
  66.                                 {
  67.                                         ctx.fillRect (x*5, y*5, 5, 5);
  68.                                 }
  69.                         }
  70.                 }
  71.  
  72.                 ctx.restore();
  73.                 ctx.fill();
  74.         },
  75.         'step': function()
  76.         {
  77.                 var output = '';
  78.                 supercount = 0;
  79.                
  80.                 var tempmap = [];
  81.  
  82.                 for(var y = 0; y <90; y++)//work around for arrays passing by reference.
  83.                 {
  84.                         var row = [];
  85.                        
  86.                         for(var x = 0; x <90; x++)
  87.                         {
  88.                                 row[x] = this.map[y][x];
  89.                         }
  90.                        
  91.                         tempmap[y] = row;
  92.                 }
  93.                                
  94.                 for(var y = 0; y <90; y++)
  95.                 {
  96.                         for(var x = 0; x <90; x++)
  97.                         {
  98.                                 var countme = this.getNeighborCount(y,x);
  99.                                
  100.                                 if ( this.map[y][x] == 0 ) // dead cell 
  101.                                 { 
  102.                                         if ( countme == 3 ) 
  103.                                         { 
  104.                                                 tempmap[y][x] = 1
  105.                                         } 
  106.                                 } 
  107.                                 else
  108.                                 { 
  109.                                         if ( ( countme == 2 ) || ( countme == 3) ) 
  110.                                         { 
  111.                                                 tempmap[y][x] = 1
  112.                                         } 
  113.                                         else 
  114.                                         { 
  115.                                                 tempmap[y][x] = 0
  116.                                         } 
  117.                                 } 
  118.                         }              
  119.                 }       
  120.                 counterface++;
  121.                 this.map = tempmap;
  122.         },
  123.         'getNeighborCount': function(starty,startx)
  124.         {
  125.                 var count = 0;
  126.                
  127.                 for(var y = starty-1; y <= starty+1; y++)