Web Info & Tutorials

February 21st, 2007

AUTOMATED JAVASCRIPT VERTICAL FLIP IMAGE REFLECTION

Automated JavaScript Vertical Flip Image Reflection

Ara Pehlivanian has created a simple reflect.js script that allows you to add reflection to your images using simple JS that adds just one DOM element.

Using Ara's API you can get as simple as:

JAVASCRIPT:
  1.  
  2. var reflections = new ARA.effects.Reflection();
  3. reflections.addImage("myImageID");
  4. reflections.reflect();
  5.  

or more advanced:

JAVASCRIPT:
  1.  
  2. var reflections = new ARA.effects.Reflection();
  3. reflections.addImage("me");
  4. var imgs = [];
  5.         imgs.push(document.getElementById("csarvenWLGreen"));
  6.         imgs.push(document.getElementById("microformats"));
  7. reflections.addImagesRaw(imgs);
  8. reflections.addImagesByClassName("reflect");
  9. reflections.addImagesByClassName("reflect1", {startPoint:"group",alpha:.75,depth:
  10. reflections.reflect();
  11.  

There are a set of examples for you to play with too.

February 21st, 2007

ADOBE ASKS AJAXIANS TO BETA TEST APOLLO

Adobe wants to make Apollo a great environment for Ajax developers.

They were looking to find a bunch of smart JavaScript hackers in the know to get involved in a private Beta of Adobe Apollo, and realised that the Ajaxian community was a great place for them to reach out.

Therefore, if you have an interest in trying out Apollo, and giving honest feedback to the team at Adobe simply send an email to apollobeta@adobe.com with the following information:

  • Your name
  • Email address
  • Why you are interesting in Apollo
February 21st, 2007

AJFORM AND REJAX RELOADED

Brendon Crawford has updated both of his products, AJForm and ReJax.

AJForm:

AJFORM is a JavaScript toolkit which simply submits data from any
given form in an HTML page, then sends the data to any specified
JavaScript function. AJFORM degrades gracefully in every aspect. In
other words, if the browser doesn't support it, the data will be sent
through the form as normal.

New Features:

  • Improved performance support. Able to handle many simulateous
    requests without problem.
  • Added a powerful event handler library for standardizing mouse
    event properties

Rejax

As the first online Regular Expression tester to offer realtime
highlighting and offering more languages than any other online
tester, ReJax continues to be the coolest and easiest to use Regular
Expression tester on the web.

New Features

  • Support for 6 different Regular Expression engines
    1. Javascript
    2. PHP 5 PCRE
    3. PHP 5 POSIX
    4. Ruby
    5. PERL 5
    6. UNIX Shell Patterns
  • Instantaneous realtime pattern matching
  • Global matching support
  • Improved easy to use interface
February 20th, 2007

YUI VERSION 2.2.0 RELEASED

YUI 2.2.0 has been released one year after YUI was released into open source.

The major changes are:

  • Versioning: 0.12.2 to 2.2.0: The new version syncs up the internal and external release numbers
  • Browser History Manager: The YUI Browser History Manager supports all A-grade browsers in managing the back/forward button navigation and bookmarking
  • DataTable Control: The DataTable control allows you to present tabular data and allow your user to engage that presentation by modifying/enhancing the data, sorting and searching through it, and adjusting the presentation itself.
  • Button Control: Buttons are essential parts of most graphical interfaces, but the visual constraints of buttons in their various form-control implementations (submit buttons, radio buttons, check boxes, etc.) diminish their effectiveness in some applications. The Button Control provides a platform for implementing visually impactful buttons that range from standard click-to-navigate buttons to radio buttons and checkboxes to advanced split-buttons that can operate as both a button and a menu.
  • New YAHOO.* properties: such as YAHOO.lang, YAHOO.env, and a YAHOO_config global

Congrats on the new release.

February 20th, 2007

COLUMNNAV: THINK APPLE HEIRARCHICAL MENUS

David Lindquist has created a new component for YUI called ColumnNav.

ColumNav is a hierarchical menu implementation utilizing Bill Scott’s Yahoo UI Carousel component. Content is loaded from an unordered list (in the form of a DOM object) and displayed in a scrollable viewport, similar to Column View in the Mac OS X Finder. Features include:

  • infinite extensibility using Ajax to build sub-menus
  • a highly customizable look and feel using CSS
  • support for keyboard-only navigation (CTRL + arrow keys)
  • cross-browser compatibility

It looks good and simple to use.

ColumnNav

February 20th, 2007

WHAT SHOULD I SAY?

What Should I Say? is a new question and answers site that uses YUI, JSON, and other libraries to subtly use Ajax throughout.

An example check out the very visual sorting:


February 20th, 2007

JACK SLOCUM OF EXT TO SUPPORT JQUERY

Jack Slocum is digit of the prizewinning evangelists of YUI (in our opinion) as he gets modify clog discover there that uses YUI. Some of his newer features are not YUI-specific so his YUI-EXT send module embellish Ext, and module hold another libraries.

One of the fruits of this newborn concern is the partnership declared jQuery & Ext Partner to Deliver Integrated JavaScript & UI which info how Ext 1.0 module hold jQuery as substantially as YUI:

The most grown User Interface accumulation for scheme applications module presently hold jQuery, the digit projects declared today.

Ext, a assemble of renowned User Interface components including a tree view, springy grid, dual-panel layout among others, previously worked as an spreading to the YUI library. Beginning with edition 1.0 of Ext, it module impact as an spreading to jQuery as well, allowing jQuery users to investment the noesis of the individual programme tools acquirable in Ext with the lightweight set accumulation and expressive structure of the prizewinning accumulation for retiring DOM scripting.

“We’re rattling agog by this collaboration. Ext is a strange library, and existence healthy to wage it as an authorised jQuery Plugin is a Brobdingnagian intend for everyone involved,” said Evangelist Resig, the creator of the jQuery JavaScript library.

What prompted the collaboration?

Ext has whatever strange components - arguably, the prizewinning on the web.

jQuery has every the set functionality to hold what Ext provides, with a farther diminutive set file-size than YUI. The jQuery aggroup contacted Jack Slocum with the hopes that we could impact unitedly to attain Ext impact with jQuery, and Jack wholeheartedly agreed. It’s a win-win situation: jQuery gets whatever awing components, and Ext gets a Brobdingnagian flow of newborn users.

What are the benefits for jQuery and Ext users?

jQuery users intend a Brobdingnagian sort of expertly-designed components that they module be healthy to deploy immediately. Additionally, they’ll be healthy to ingest them in a behavior that meliorate suits the jQuery belief (e.g. investment jQuery’s retiring philosophy, existence healthy to call Ext queries on sets of elements, chaining calls, etc.) Additionally, jQuery is also work the existence of activity the ingest of DomQuery, Ext’s switch engine, as an deciding to jQuery’s CSS Selector code.

At the aforementioned time, existing Ext users module acquire the plasticity of existence healthy to move to ingest Ext’s professed degree components patch investment the lightweight, diminutive (~19k) and coercive jQuery framework.

This is beatific programme for all. It also shows how obstructed in jQuery is to the accord to intend this worked discover with Jack.

We can’t move to wager the flooded Ext 1.0 and beyond.

February 19th, 2007

ZK NOW SUPPORTS JAVASCRIPT, GROOVY, RUBY

As promised, the latest release of ZK (ZK 2.3 RC) now supports more languages in zscript than just Java. It now supports Javascript, Groovy and Ruby. Futhermore, you can easily add support for a new language in half a day (maybe with some practice, no?) by extending a simple interpreter class. That's assuming, of course, that a Java-based interpreter already exists for the language.

For those of you not familiar with ZK, it is a Ajax framework that has you write your application logic on the server-side and treats the browser as a simple display server (as opposed to client-side frameworks that implement lots of application logic in the browser and treat the server more as a collection of web services). You write your application using ZUML, an XML-based markup language, assembling interface components in a way very similar to the desktop GUI component/event driven model. You tie your app logic into the markup language using zscript statements:

CODE:
  1. <window title="Fileupload Demo" border="normal">
  2.     <image id="image"/>
  3.     <button label="Upload">
  4.         <attribute name="onClick">{
  5.             Object media = Fileupload.get();
  6.             if (media instanceof org.zkoss.image.Image)
  7.                 image.setContent(media);
  8.             else if (media != null)
  9.                 Messagebox.show("Not an image: "+media, "Error",
  10.                     Messagebox.OK, Messagebox.ERROR);
  11.         }</attribute>
  12.     </button>
  13. </window>

In the sample above, we are using Java as the scripting language. Now you can use Ruby, Javascript or Groovy in it's place. Realize that scripts written in these languages are executed on the server, not the browser.

February 19th, 2007

3D RENDERER USING CANVAS

Hans Schmucker has created a proof of concept for 3D Renderer using Canvas.

I've written another 3D Renderer for the Canvas element... however it is differet to the existing implementations, this one loads a standard Alias Wavefront OBJ file and renders it. It's not as far as it could be so far (mainly because the Canvas element seems to have a pretty poor clipping system implemented, so that even if the majority of a shape is outside the canvas it will still try to draw the whole shape and then clip it against the window on a per-pixel basis), but it's definitely usable. Shading (each triangle gets a color based on its distance from the viewport) and collision detection (it only detects if there is a triangle below the viewport and will move the view to that position) are primitive, but still, I think this is pretty impressing for standard JS.

3D Demo

The demo does the following:

  • Load a model
  • Set up controls to modify a view object
  • Find the nearest triangle below the player
  • Move the player down to that triangle
  • Rotate the model
  • Clip it against Z=0 so you only render what's in front of you
  • Split partially visible triangles against Z=0
  • Project all vertices, so that they get smaller the farther away they are
  • Draw them, with the distance dictating the color

3D Canvas Demo

February 19th, 2007

SECTION 508 UNDER REVISION

Joe Hanink permit us undergo that Section 508 is low revision via the W3C Roadmap for Accessible Rich cyberspace Applications (WAI-ARIA).

As a developer of Rich webapps, Section 508 deference is a anxiety since its most past update occurred in 2001. I am awaiting feedback from access-board.gov on whether there module be some provisioning for transitional deference for webapps shapely after the declaration but before the newborn rules verify effect.

The w3c WAI-ARIA plan indicates what mechanisms module be standard to earmark webapps to transmit semantic info to API unvoluntary concealment readers, but there I’ve been unable to encounter some open aggregation most the specifics of the newborn 508 rules.