Activate your free membership today | Log-in

Wednesday, July 2nd, 2008

Loom: Annotation based Java framework

Category: Framework, Java

Ignacio Coloma has announced Loom 1.0 RC 1. Loom is an annotation-based java web framework that includes a ton of new features in this release. After some selective process, these are the bits that could be of most interest for Ajax developers:

  • Generates HTML 5 markup (with data-* fields), including CSS classes
    with the property type.
  • Based on prototype
  • An ever-growing list of (progressive-enhancement) web components,
    including: multiple file upload, tabs, menus...
  • Dead-simple javascript validation library with i18n support.
  • ...which mimics the process at the server, in case javascript is disabled.

Just give it a try at the demo. Try introducing invalid input, and check the sources by clicking the "View source" link at the top right of the page. Everything in the demo should work with javascript disabled, including multiple file upload.

The framework also includes a libraries repository which pulls debug/optimized javascript from the google CDN:

HTML:
  1.  
  2. <l :script resource="prototype"/>
  3. <l :script resource="scriptaculous">
  4.  <l :param name="load" value="builder,effects"/>
  5. </l>
  6.  

This snippet of code would translate into this, if development is disabled:

HTML:
  1.  
  2. <script type="text/javascript"
  3. src="//ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js">
  4. </script>
  5. <script type="text/javascript"
  6. src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js?load=builder,effects">
  7. </script>
  8.  

Or this if not:

HTML:
  1.  
  2. <script src="/js/prototype-1.6.0/prototype-1.6.0.2-shrinkvars.js"
  3. type="text/javascript"></script>
  4. <script type="text/javascript"
  5. src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js?load=builder,effects">
  6. </script>
  7.  

More details about the framework are at the reference guide. Ignacio would be grateful for any feedback!

Posted by Dion Almaer at 10:28 am
1 Comment

+++--
3.8 rating from 13 votes

Wednesday, June 25th, 2008

SymbolicWeb: Ajax and Comet with Lisp

Category: Framework

No matter how much Paul Graham talks about his Web success, we don't hear too often about Lisp-powered Web applications.

SymbolicWeb is offering up a new type of framework to help change that.

SymbolicWeb aims to create a GUI framework similar to GTK+ and QT for Common Lisp. It differs in that it uses the browser to render the UI elements.

There are a slew of examples, such as this simple echo chat program:

LISP:
    ;;;; http://nostdal.org/ ;;;;

    (in-package #:sw)

    (defparameter *max-chat-pane-size* 100)

    (defapp chat-app (empty-page-app)
      ((input (mk-text-input))
       (chat-pane :allocation :class (mk-container nil))))

    (defuri chat-app "chat")

    (defmethod main ((chat-app chat-app))
      (with-slots (input chat-pane) chat-app
        (setf (on-enterpress-of input
                              :callback-data `((:input-value . ,(js-code-of (value-of input)))) ;; Include some data when the event fires.
                              :js-after (js-code-of (setf (value-of input) "")))                ;; Clear the input field after the event has been fired and sent.
              (lambda (&key input-value)
                (prepend (mk-span (escape-for-html input-value) :display "block")
                         chat-pane)
                ;; Don't let it grow too big; delete some chat history.
                (when (> (length (children-of chat-pane)) *max-chat-pane-size*)
                  (dolist (span (subseq (children-of chat-pane) *max-chat-pane-size*))
                    (remove span)))))
        (add-to *root*
                (mk-span (who (:p "Type something in and press enter. New content is added at the top.")))
                input
                chat-pane)))

Posted by Dion Almaer at 5:00 am
6 Comments

+++--
3.2 rating from 16 votes

Monday, June 9th, 2008

TileStack: HyperCard for the Web

Category: Framework

LtU pointed me to TileStack, the latest attempt to resurrect HyperCard and bring it back to the Web (they are closely related of course).

Running online there are going to be limitations about which stacks can be ported, which may reduce the usefulness and impact of this project, but maybe a standalone version will come later.

The system compiles Speak (the TileStack version of HyperTalk) to Javascript. If the result is not obfuscated, something I haven't verified, it may be possible to augment the output from TileStack with additional capabilities not supported or not yet implemented.

From the compatibility angle it is interesting to note that they renamed the language and seem to imply they are going to extend it beyond HyperTalk, without giving any specific guarantee about future compatibility. I'd suggest releasing the compiler that's as close to full HyperTalk compatibility as a separate product (or even, if they can bring themselves to do it, releasing it as open source).

What does Speak look like (remember, not Squeak!):

Speak is the name of the language that all TileStack's use to describe what should happen when someone interacts with a stack you've created. It is directly related to the HyperTalk language that was used by HyperCard for the same purpose.

It is in the same vein as the "kinda like English" languages like AppleScript, COBOL, BASIC, ...

set the name of card field 1 to "My Field"

go to the next tile

get the first word in field "First Name"

The team is working on being able to embed these Tiles anywhere on the Web (gadgets, etc).

Posted by Dion Almaer at 3:31 am
Comment here

++---
2.7 rating from 15 votes

Tuesday, April 22nd, 2008

Making application modules communicate with each other using Decoupling

Category: Component, Examples, Framework, JavaScript, Yahoo!

I've been talking about event driven application design in JavaScript in January last year and inspired Caridy Patiño to write his Bubbling Library based on these ideas.

Caridy now upped the ante a bit by talking about decoupling using the bubbling library over on the YUI blog.

In essence, his solution allows you to have custom events on application modules and listen to them independent of execution order or availability. Simply using custom events can get you in a pickle if you make yourself dependent on their order. With the decoupling solution proposed by Caridy this becomes one less issue to worry about.

Posted by Chris Heilmann at 5:17 pm
9 Comments

++++-
4.2 rating from 23 votes

Wednesday, April 9th, 2008

DOMAssistant 2.7 is Out, Strong Unicode Support and Enhanced Performance

Category: Framework, JavaScript

Now that DOMAssistant has a formal team behind it, the updates keep coming fast and furious. The team announced last night the release of DOMAssistant 2.7, with a host of new features and big improvements in CSS selector performance:

After a lot of hard work, we’re more pleased than ever to present the new version of DOMAssistant: faster, less code, better support and improved stability. And more features, of course.

While we have actually made the code file size smaller, at the same time we have added a number of useful features and improved CSS selector performance.

Along with several fixes, the team added a number of enhancements most notably strong support for Unicode and performance increases for Internet Explorer:

With this release, we wanted to target the world outside our English-speaking box, by adding Unicode support and a complete documentation in Chinese. When that was in place, improving CSS selector performance in Internet Explorer and adding well-needed and requested features was next on the bill.

Happily, we succeded as well as exceeded our goals!"

The newest features include:

  • Unicode support added, implying support for basically any source document language.
  • Method cssSelect added to the Core module, to allow CSS selections of an object reference's children.
  • Method ajax added for making more customized AJAX calls, with more options.
  • Method setStyle added to the CSS module.
  • Method setErrorHandling added to the DOMLoad module.
  • Method first added to get the first of any matches.
  • Added support for attribute selectors E[att|=val], E[att~=val], and pseudo-class :lang.
  • Added support for multiple pseudo-classes, eg. tr:nth-child(odd):not([id]).
  • Added support for nested pseudo-classes within :not, eg. tr:not(:first-of-type).
  • Added full compliance for the an+b expression in :nth-child and :nth-of-type, including negative a.
  • Significant CSS selector performance improvement in Internet Explorer.
  • Updated documentation in Chinese.

DOMAssistant 2.7 is available for download via SVN or HTTP and is released via MIT license.

Posted by Rey Bango at 9:03 am
1 Comment

+++--
3.6 rating from 11 votes

Wednesday, March 19th, 2008

Echo 3 releases client side component model

Category: Framework, Java, JavaScript

Echo has been known as a Java server side component framework, but with the release of Echo 3, they have added a way to build component applications using JavaScript:

Client-side Echo applications do not require an application server, and can also be run entirely offline.

With Echo3, the formerly server-side-only component framework has been recreated in client-side JavaScript. This was not a direct “port”, but rather a re-imagining of the framework with the ideals of JavaScript development in mind. For example, the client-side version of the framework takes advantage of JavaScript's object and array literal syntaxes to create a capability called "hierarchal component construction", where an entire hierarchy of components can be created in a single call. Such code winds up being extremely readable, as, when naturally indented, it resembles the component tree.

Core.js framework

A low-level framework, called “Core.js” was created to ease development of object-oriented and event-driven code in JavaScript. Core.js provides an inheritance model for building JavaScript objects using class-based (rather than prototype-based) inheritance. It additionally offers the capability to specify abstract classes and methods, and features “pseudo-private variables” where a class can reserve internal method/field names that cannot be overridden by subclasses. The framework includes utilities for managing events and listeners, and can register event
handlers on object instances.

New Back-End / Rendering APIs

The “back-end,” which is responsible for rendering components within the web browser, has been re-engineered for Echo3. Instead of each component having its own client-server serialization code, Echo3's web application container simply serializes the state of updated components directly to the client, where JavaScript versions of the server-side components are then created and updated. This feature makes the component development process substantially easier and faster than it was in Echo2. The new approach also yields performance dividends when creating server-side Java applications -- Echo3 consumes less CPU and a mere fraction of the bandwidth of Echo2.

New and Improved Components

Many new components have been added to the framework and existing components have been enhanced in Echo3. WindowPanes, for example, will always stay on screen, even if the browser window or containing component is resized. Menus can be configured with opacity and fade-in effects. New components have been added to the Extras library including a RichTextArea and Tree/TableTree. New APIs for keyboard accessibility and focus management allow for mouse-less operation (note: still under development in some components).

Echo3

Posted by Dion Almaer at 10:37 am
3 Comments

++++-
4.2 rating from 5 votes

Tuesday, March 18th, 2008

jqunit: extending jquerys testrunner to all

Category: Framework, JavaScript, Testing, jQuery

Michael Grosser has created jQuerys testrunner in a way that makes it work with jsUnit, and also useful for libraries other than jQuery.

Here is a full example:

JAVASCRIPT:
  1.  
  2. var temp = function($) {
  3.   jqUnit.module('Without local interface');
  4.   jqUnit.test('test a', function(){
  5.     jqUnit.ok(true);
  6.     this.ok(true);
  7.   });
  8.        
  9. with(jqUnit) {
  10.   module('With local interface');
  11.   test('test b', function(){
  12.     ok(true);
  13. });
  14.  
  15.  
  16.   module('Example tests');
  17.   test('Real Click vs False Click',function(){
  18.     var clicked = false;
  19.     $('#test-form').click(function(){clicked=true;});
  20.    
  21.     //false click
  22.     $('#test-form input').click();
  23.     ok(!clicked);
  24.    
  25.     //real click
  26.     triggerEvent($('#test-form input').get(0),'click');
  27.     ok(clicked);
  28.   });
  29.  
  30.   test('Waiting',function(){
  31.     $('#ajax').load('fixtures/1.html');
  32.     expect(1);//expect 1 assertion, here: fails if ajaxStop is never called
  33.     stop();//pause: so we can wait with setTimeout,setInterval,...
  34.    
  35.     $().ajaxStop(function(){setTimeout(function(){
  36.       //field is not filled directly after ajaxStop
  37.       //since DOM traversal comes after stopping to load
  38.       equals($('#ajax').html(),1);//!reverted jsUnit order
  39.       start();//resume: make sure its called or tests will halt!
  40.     })});
  41.   });
  42. }}(jQuery);
  43.  

that produces:

Posted by Dion Almaer at 11:01 am
3 Comments

+++--
3.1 rating from 25 votes

Wednesday, February 20th, 2008

YUI 2.5 released - Layout Manager, File Uploader and graphical JavaScript Profiler - and that is just the start

Category: Framework, JSON, JavaScript, Library, Yahoo!

Layout Manager in action - build your own Yahoo Mail

Version 2.5 of the Yahoo User Interface Library (YUI) was released today. You can get all the details on the official blog post, but here's the "change log":

  • The new Layout Manager allows you to create multi-pane user interfaces that are collapsible and resizable.
  • The Flash-enhanced File Uploader control might be known to you from Flickr and and allows you to easily batch-upload files and images with progress bars.
  • The JavaScript Profiler now has a graphical front-end to make the information more easily understandable
  • The YUI Data Table performs faster and got new features, including horizontal and vertical scrolling, a paginator class, drag and drop columns and an API to access, add and remove columns.
  • The Image Cropper control allows you to pick a part of an image to be cropped server-side
  • The Cookie Controller provides a wrapper for all things to do with cookies
  • The Slider Control got updated to support multiple handles to define a range rather than just a state.

In addition to that, some of the components left beta status. These are the Get Utility to retrieve scripts and style sheets on the fly, the ColorPicker Control, the JSON Utility to validate JSON, the ImageLoader Utility to load images on-demand to increase page performance and the YUI Test Utility.

The really detailed report on all the changes is available on the YUI list/forum.

If you want to have a quick glimpse of what the Layout Control allows you to create, check out the demo application interface simulating simulating Yahoo Mail.

Posted by Chris Heilmann at 5:30 pm
7 Comments

++++-
4.2 rating from 42 votes

Monday, February 18th, 2008

Audible Ajax Episode 24: Aptana Jaxer Talk

Category: Aptana, Framework, JavaScript, Podcasts

I had the opportunity to sit down with three fine gents from Aptana to discuss their recent launch of Jaxer, the "server side Ajax framework".

Paul Colton, Uri Sarid, and Kevin Hakman all sat with me to chat about things. I have already played with Jaxer, and created the Google Gears wrapper which can be used seemlessly for use cases such as "If the user doesn't have Gears installed, just do it on the server".

We discussed a lot in the twenty odd minutes including:

  • Where the idea for Jaxer came from
  • The difference between a server side JavaScript framework and Jaxer (since there are many of them!)
  • How Jaxer works (think of a headless Mozilla browser)
  • Side effects of going this direction
  • How developers are using it
  • How does your architecture change if you are using Jaxer?
  • How can you talk to code in Java and other languages?
  • How JavaScript 2 fits into the picture
  • What about deployment?

A lot of good stuff. Thanks to the crew for taking the time to chat with me. What other questions do you have for them?

We have the audio directly available, or you can subscribe to the podcast. We also have the video in high def here, or in normal def right below:

Posted by Dion Almaer at 9:37 am
7 Comments

++++-
4.4 rating from 21 votes

Thursday, February 14th, 2008

OnionML: Server Side JavaScript Layout Engine

Category: CSS, Framework, JavaScript

Marcello Bastéa-Forte has developed OnionML, a layout template language that uses server side JavaScript with Rhino and E4X on the back end.

The high-level goal of the template engine is to be something with utility not unlike CSS, but for intended layout and composition. The actual functionality is similar to XSLT, but with the design goal of being simple and easily extensible.

Onion ML is an XML template system designed with a bias toward modularity.

Onion ML lets you easily custom XML tags to make modular content design simple and easy to mix with HTML. It is somewhat comparable to XSLT and JSF, but intended to be easier to understand.

You define custom tags either as markup in XML files or as custom JavaScript functions which generate output.

Onion ML also provides several control flow methods necessary for dynamic content. Methods for iterating over data sets and conditionally displaying tags are core to Onion ML's functionality.

You end up building nested tag layouts. For example, you first define a tag:

HTML:
  1.  
  2. <tag :mylayout>
  3.   <title><arg :title/></title>
  4.   <style> ... </style>
  5.  </head>
  6.   <h1><arg :title/></h1>
  7.   <div id="contents"><arg :body/></div>
  8.   <div id="footer"><copyright><arg :year/></copyright></div>
  9.  </body>
  10. </html>
  11. </tag>
  12.  
  13. <tag :copyright>Copyright <arg :all/> All rights reserved</tag>
  14.  

and then you can use it:

HTML:
  1.  
  2. <mylayout>
  3.  <title>Hello world!</title>
  4.  <body>This is my <b>world</b>, too.</body>
  5.  <year>2008</year>
  6. </mylayout>
  7.  

You can also do the work directly in JavaScript:

JAVASCRIPT:
  1.  
  2. var onion = new Onion(
  3.  <onion>
  4.   <tag :mytag>woot, <arg :all/>!</tag>
  5.  </onion>
  6. );
  7.  
  8. onion.add(
  9.  <tag :anothertag>play the <mytag>tuba</mytag></tag>
  10. );
  11.  
  12. onion.add("date", function() {
  13.   return new Date().toString()
  14. });
  15.  

Pos