Libraries

LiveValidation - JavaScript Form Validation

Tagged:  

Another useful validation script to take a look at, named LiveValidation, is a JavaScript Form Validation script that can easily add some slick UI enhancements to your existing forms. This definitely beats rolling your own form validation, especially if you tend to throw in some old school alerts like alert("Please enter your first name");

* Visit the LiveValidation Homepage

* View some Examples

* Download the Script

Top 5 GWT Libraries

Tagged:  

GWTSite held a contest asking users to vote for their favorite GWT third-party library, and as a result have compiled their own list of the top five most popular GWT third-party libraries.

Here they are:

5. Hibernate4gwt
Bruno Marchesson
For any Hibernate users out there, Hibernate4gwt allows you to painlessly use your Hibernate POJOs with GWT.

4. Gwittir
Robert Cooper and Charlie Collins
The Gwittir project provides a lot of interesting modules for your GWT projects including data-binding, animation, introspection, and more.

3. GWT-SL
George Georgovassilis
As the name implies, the GWT Server Library is it is a server-side library for GWT that focuses on providing Spring Framework integration by allowing you to expose your Spring beans as RPC services. It also provides integration with the hibernate4gwt library.

2. GWT-Ext
Sanjiv Jivan
GWT-Ext is a really nice looking GWT widget library that is closely integrated with the Ext JS library. Take a look at the GWT-Ext Showcase Demo.

1. MyGWT
Darrell Meyer
mygwt
MyGWT was the overwhelming favorite in the contest with almost half the vote. It is a pure GWT widget library which shares the Ext JS L&F to create a polished set of widgets for use in your GWT applications. Take a look at the MyGWT Explorer Demo.

Honorable mentions: gwt-dnd, gwt-log, gwt-maven, gwtwindowmanager, gwt-math

Click here to read the original post on GWT Site.

Let us know which GWT library you prefer.

AjaxMGraph v0.96 Released

Tagged:  

Version 0.96 of AjaxMGraph, an Ajax based graphing library built on the Prototype JavaScript framework, was released today and is available for download.

Updates in this new release:
* Added Option to draw two or more graphs
* Code modified to be more user friendly, and up to date with modern standards

* View a Demo

* Download (zip, 14KB)

Game Development using the Yahoo! User Interface

As with many people that get into programming, I started programming because I wanted to make video games (in-fact I have had a few games published about 10 years ago). Now that I am in the web development industry, I from time to time like to look at the developments in Video Game development as it pertains to the web.

The Yahoo! User Interface is a great library for development of JavaScript based applications, including Ajax applications. The library has quite a few methods to help with animation that can be very useful in developing games. Today, I'm not going to go into much detail on using the library to make a game (this will be in a later post), however, I do want to show you how well these games can look.

Check out the below games that where made using the Yahoo! User Interface.

I was amazed at how close these games are to their Flash counterparts. Of course the advantage to using JavaScript over flash is that no plug-in is required to play the game.

You can read more about the Yahoo! User Interface here.

If you've seen any other cool games built using the Yahoo! User Interface I would love to hear about it. If you sign up for a free account you can blog about it on this blog or you can leave them in the comments.

MooFlow - a JavaScript Fisheye Photo Gallery

Tagged:  

Nothing says "Razzle Dazzle" like a fish-eyed Apple iTunes-like photo gallery effect. So, here we are to present a creation of outcut.de called MooFlow that does just that. Built using the MooTools JavaScript Framework, MooFlow is currently in beta at version 0.1.

Features
* Autosetup onload
* Autoresize on changes of Window dimensions
* Scrolling with mouse wheel
* Scrolling with key input (left and right cursor)
* Autoplay presentation loop

Requirements
MooTools V.1.2 Framework
* Class: Class
* Native: all
* Element: Element.Event
* Element: Element.Dimensions
* Window: Window.DomReady
* Plugins: Slider

Compatibility
MooTools is compatible and fully tested with Safari, internet explorer 6 and 7, Firefox (and its mozilla friends), Opera and Camino.

Performance
If you use Firebug - disable it for testing.
Best image interpolation in Opera and Safari.

Code & Documentation is available at outcut.de

Choosing a Development Framework

Over at Smashing Magazine they have put together a good round up of Development Frameworks. The post goes over the most popular frameworks for each language. The post also gives tips on what framework is best for you and has a brief over view of the Model View Controller (MVC) design pattern.

Below is an excerpt from the JavaScript frameworks.

JavaScript

  • Prototype is a JavaScript framework that serves as a foundation for other JavaScript frameworks. Don’t be fooled however, as Prototype can stand on its own.

  • script.aculo.us is built on the Prototype framework and has found its way into many high-profile sites including Digg, Apple, and Basecamp. The documentation is clear, and has an easy learning curve. However, compared to other JavaScript frameworks it is larger in size.

    Script.aculo.us

  • Mootools is a compact, modular, object-oriented JavaScript framework with impressive effects and Ajax handling. The framework is for advanced users as the learning curve is rather steep.

  • jQuery continues to rise in popularity due to its extensive API and active development. jQuery is a great balance of complexity and functionality.

  • For ASP.NET developers you can’t beat the ASP.NET AJAX framework which is built into the .NET Framework as of 3.5, but you can also download it for previous versions. The amount of documentation, examples, and community continues to increase. There are controls that you can simply drag-and-drop an update panel on an ASPX page and process Ajax!

    ASP.NET

Further JavaScript Frameworks

  • The Yahoo! User Interface Library - Yahoo! released its impressed JavaScript library with incredible amounts of documentation.
  • Ext JS - Originally built as an add-on to the YUI it can now extend Prototype and jQuery. Includes an impress interface.
  • Dojo is a small library focused on interpreter independence and small core size.
  • MochiKit - A framework that has focus on scripting language standards including ECMAScript and the W3C DOM.

Click here to read the full post on the frameworks.

Facebox 1.0 - A lightbox for images, divs, and entire remote pages

You might be asking yourself - "Do we really need another lightbox library out there?" Well if you've ever implemented a lightbox library then you know that most are limited to only displaying images. Facebox is a bit different because it allows you to lightbox divs in a page, remote pages, as well as images. A couple of the screenshots on the site show Facebox used as a alert window, part of an image gallery, or as a preview of a remote file - check out the demos and screenshots on FamSpam.

You'll notice that Facebox has taken its style from Facebook. But what you might not notice are the rounded corners on a Facebox. Some of you are tired of rounded corners and some of you aren't. If you aren't, then enjoy them. If you are, then just replace the corner images with sharp edges and you're all set.

Note that this library does require jQuery 1.2.1.

Visit the Facebox homepage to see some sample code and download the library

del.icio.us Style Tag Suggestion with jQuery

Remy Sharp has recently posted an entry on his blog about del.icio.us style tag suggestion using jQuery. If you've used del.icio.us then you're probably familiar with their tag suggestion feature as you type in tags for a bookmark. Remy has encapsulated this piece of functionality in a jQuery library he's made available for download.

Check out the demo

The plugin has been successfully tested with:
IE 7, Firefox 2, Safari 3, and Opera 9.

Read the full post on Remy's blog to find out more about this plugin and to download the source code.

Graceful handling of anchors with jQuery

Over at Hainhealt.com they have an interesting post on handling anchors gracefully with jQuery.

Below is an excerpt from the post:

I've come to use this quite often which eventually leads to a considerable amount of if statements.

Which is ugly. And since I don't like ugliness, I've coded myself a small anchor handler for jQuery. Looking at the code I think I could quite easily make it compatible with the Prototype framework too, but I'll keep that for another post :D

(function(){
  url = window.location.href, handlers = [];

  jQuery.extend({
    anchorHandler: {
      add: function(regexp, callback) {

        if (typeof(regexp) == 'object') {
          jQuery.map(regexp, function(arg){

            args = {r: arg[0], cb: arg[1]};});}

        else  args = {r: regexp, cb: callback};

        handlers.push(args);
        return jQuery.anchorHandler;
      }

    }
  })(document).ready(function(){
    jQuery.map(handlers, function(handler){

      match = url.match(handler.r) && url.match(handler.r)[0] || false;

      if (match) {
      	handler.cb.apply(this, [match, (url.match(/#.*/)[0] || false)]);

      }});});
})();

And I can add triggers like this:

$.anchorHandler
  .add(/\/\#ch\-cheatsheet/,    h.comment.showCheatsheet)

  .add(/\/\#comment\-compose/,  h.comment.showCompose)
  .add(/\/\#comment\-\d+/,      h.comment.focus);

The first argument is a regular expression or a string that is passed to the function match, the second argument is the callback function.

The method also accept arrays as argument like this:

$.anchorHandler.add([
  [/\/\#ch\-cheatsheet/,   h.comment.showCheatsheet],

  [/\/\#comment\-compose/, h.comment.showCompose],
  [/\/\#comment\-\d+/,     h.comment.focus]]);

The callback function receive 2 arguments. The matched bit of the anchor with the anchor itself.

Read the full post here.

This technique is very useful for downgrading your applications on browsers where JavaScript is disabled.

swfIR - SWF Image Replacement [with style]

The swfIR team over at swfIR.com has put together a handy widget for styling images in your site. The library utilitizes JavaScript and Flash to produce a variety of image effects like shadows, rounded corners (with or without borders), rotation, and borders.

From the swfIR homepage:

swfIR (swf Image Replacement) is here to solve some of the design limitations of the standard HTML image and its widely-accepted associated CSS values, while still supporting standards-based design concepts. Using the dark arts of JavaScript and Flash, swfIR gives you the ability to apply an assortment of visual effects to any or all images on your website. Through progressive enhancement, it looks through your page and can easily add some new flavor to standard image styling.

When you start to use swfIR, you’ll need the ability to style it, the same way that you can do with regular images. To get around browser inconsistencies, swfIR adds a with a class of swfir around any image you’re replacing.

The library and its required files are about 11.89 KB.

<script type="text/javascript" src="swfir.js"></script>

Once the library is included you can take advantage of its features:
var borders = new swfir();
borders.specify("border-radius", "15");
borders.swap("#content img");

Here are the properties you have available:

border-radius
border-width
border-color
shadow-offset
shadow-angle
shadow-alpha
shadow-blur
shadow-blur-x
shadow-blur-y
shadow-strength
shadow-color
shadow-quality
shadow-inner
shadow-knockout
shadow-hide
rotate
overflow
link
elasticity

There are some issues with swfIR that the creators make us aware of, and they are:

  • Resizing/zooming in Opera crashes the browser
  • Flash of unstyled content: images load first before JavaScript replaces them
  • alt text is not preserved upon replacement
  • HTML right-click options are disabled
  • Incompatible with other JS libraries like Prototype or MooTools
  • Doesn’t work with hot-linked images because of security restrictions in Flash

Visit the swfIR homepage to view some demos and to download the source

Syndicate content