JavaScript

Unlimited design & customization capabilities in Visual

I would like to introduce a new development code named “theme designer / control designer”. The new designer simplifies the way to create custom controls and themes in a Visual WebGui application. Up until now, Visual WebGui RIA Platform/Framework provided extreme productivity and simplicity with the out-of-the-box client side behavior / look and feel, but when advanced customization was needed, it called for a different level of development. Since most customers will require customization of various aspects of the UI, we have decided to work on creating a theme designer that would simplify the customization of the UI.

I think I don’t need to elaborate on the business value of customizing the application to be tailored to the customer's needs, and until we provide a rock solid solution for this problem, I personally will not sleep at night…

Override alert() with a YUI Dialog

We all know that using alert in a finished application is not good design, but we often overlook this for the ease of using alert. Well, over at YUICoder they have put together a good post on replacing alert with a YUI dialog box.

Below is an excerpt from the post.

You know and I know and everyone knows the alert boxes generated by the browsers are OLD-SCHOOL and look like garbage. Well using YUI you can easily change that by just including a little code in you page. Simply add the code below to the bottom of your page just before the end body tag then add the body style to the begining body tag called “yui-skin-sam” and that’s it. Oh and don’t forget to include your YUI Framework base and the additional scripts “container”, “dragdrop” and “animation”. For an example on how to included the YUI Framework and load specific parts check out for a quick start guide for YUI Loader and Yahoo CDN.

AlertDialog = new YAHOO.widget.SimpleDialog("dlg1", {

  width: "200px",
  effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.15},

  fixedcenter:true,
  modal:true,
  visible:false,

  close: true,
  constraintoviewport: true,
  buttons: [ { text:"close", handler: function(){this.hide();}, isDefault:true }],

  draggable:false,
                effect: [
                      { effect:YAHOO.widget.ContainerEffect.FADE,duration:0.1 }]

});
 
AlertDialog.setHeader("Alert");      
AlertDialog.render(document.body);

window.alert = function(text) {
  AlertDialog.cfg.setProperty("text",text);

  AlertDialog.show();
};

You can read the full post here.

While this post was written for the Yahoo! User Interface library, it should be fairly easy to port it to a different framework as the concept is the same. So, now we have no excuse to use the standard alert.

40 Useful JavaScript Libraries

Over at Smashing Magazine they have put together a very good list of 40 useful JavaScript libraries.

Below is an excerpt from the list.

3. Visualization And Image Effects

JS charts
JS charts supports bar charts, pie charts and simple line graphs. It offers nice usability by simply inserting the library onto Web pages and calling the data from an XML file or a JavaScript array. Charts are created as PNG files and the library is compatible with all the major browsers.

JS Charts

Canvas 3D JS Library (C3DL)
C3DL makes writing 3D applications easy. It provides a set of math, scene and 3D object classes to make the canvas more accessible to developers who want to develop 3D content in a browser but not have to deal in depth with the 3D math needed to make it work.

C3DL

Processing.js
This is a JavaScript port to the Processing language (a language for programming images, animation and interactions). The library is feature-rich for creating 2D outputs. It provides methods for shape/image drawing, color manipulation, fonts, objects, math functions and more.

Processing.js

Raphaël
An amazing library that simplifies working with vector graphics on the Web. Raphaël uses SVG and VML for creating graphics that can be modified and event handlers that can be attached to them. The library is feature-rich in functions, including rotation, animation, scaling and drawing curves, rectangles and circles.

Raphael: Vectors With JavaScript

ImageFX
This is a JavaScript library for adding effects to images, like blur, sharpen, emboss, lighten and more. ImageFX uses canvas element for creating the effects. It is compatible with all major browsers (there is a compatibility chart on the script’s page). The library is so easy to use. Simply inserting the .js file in the Web page and calling a one-line function is enough.

Imagefx

Pixastic
Pixastic uses the HTML5 canvas element, which enables accessing raw pixel data. The effects supported include desaturation and grayscale, inverting, flipping, brightness and contrast adjustment, hue and saturation, embossing, blurring and much more. Because the canvas element is relatively new, the library does not have equal support in all browsers yet.

Reflection.js
An unobtrusive JavaScript to auto-create reflection effects. The height and opacity of the reflection can be defined. Using it is as easy as adding a “class” to the images. It works in all major browsers and is smaller than 5 KB.

Reflection.js

You can read the full post here.

YUI 2.7.0 Released

Tagged:  

The Yahoo! User Interface team has released version 2.7.0 of its JavaScript framework library. The new release brings official support for IE 8 and graduates some components out of "beta" (Element, ProfilerViewer, and Selector).

What's new?

  • The YUI StyleSheet Utility. Allows you to create and modify CSS stylesheets on the fly. It addresses the need to apply style or style changes to multiple elements in a more efficient way--using dynamic CSS--than traversing the DOM and applying changes directly, which generally incurs the cost of a page reflow for each change.
  • The Charts Utility gains several new additions, including rotated axis labels/titles and new series styles that allow greater control over look of the chart lines, borders, and fills.
  • Many enhancements and fixes to the TreeView Control. Improvements include multiple selection node highlighting (including propagation up/down) and better focus/event handling.
  • The addition of new methods to the DOM Collection, including getComputedStyle(), getElementBy(), setAttribute(), and getAttribute().

All together, there were over 180 bug fixes and enhancements in the release. You can download YUI or use the YUI Configurator to select a custom component mix.

Opera Announces New JavaScript Engine

Tagged:  

With the recent blistering advances in browser-based JavaScript speed led by Google's V8, Webkit's Squirrelfish (Extreme), and Mozilla's TraceMonkey, browsers like IE and Opera are beginning to feel left behind. Not content to sit on the sidelines, the Opera team has announced their own next-generation JavaScript engine, Carakan.

Carakan will feature the following changes over its predecessor:

  • Register-based bytecode (vs. stack-based). This scheme uses fixed blocks (registers) of memory rather than a stack and gives direct access for the program to variables in any register rather than looking for them at the top of the stack.
    The end result is less copying and less processor instructions being executed.
  • Native code generation for performance-sensitive code. Based on a static type analysis with a richer type system than is supported directly in JavaScript, the new engine will compile performance sensitive sections of code (e.g., loops with integer arithmetic and regular expressions) straight into native code rather than process them through a bytecode interpreter.
  • Automatic classification of objects based upon common prototypes and properties. The dynamic assignment of classes to JavaScript objects based upon their prototypes and existing property names allows the use of shared lookup structures. Since real-world JavaScript programs tend to create many objects but much fewer "types", this scheme improves memory usage and performance.

The current incarnation of Carakan (sans native code generation) is about 2.5 times faster than the JavaScript in Opera 10 (alpha). After native code generation "lands" in the new engine, anticipated speed increases are somewhere between 5 and 50 times faster than the current engine.

JavaScript Paradise

The past month I have been working on a project using Flash. The project is almost done and in between finishing the project I've had to work on a heavy JavaScript project. After working in Flash for a while and then going back to JavaScript you start to realize how much better ActionScript is over JavaScript.

There are quite a few things that ActionScript has over JavaScript the below list has just a few.

  • Strong Variable Typing
  • Ability to Control the Graphical Display Easily in Script (with no cross browser issues)
  • No Cross Browser Issues (other than no plug-in)
  • A Good IDE With a Nice Debugger
  • Better Cross-Domain XML Support

My recent playing in ActionScript made me hope that we will see some of it's features incorporated in JavaScript. While much of this is in the works who knows when the 10K LB beast known as IE will allow for these features to be available cross browser.

Playing in ActionScript has made think of what life would be like in JavaScript Paradise.

Google's AJAX Playground

Google has created an online resource for testing your JavaScript code, the AJAX APIs Playground. The tool includes support for a number of Google APIs (including Maps, Earth, Blogger Data, and Visualization) as well as jQuery, jQuery UI, Prototype/Scriptaculous, MooTools, and Dojo.

jQuery 1.3.1 Released

jQuery 1.3.1 has been released with a number of bug fixes (23 to be exact).

50+ stunning jQuery applications

You can never get enough useful example of applications written in your favorite JavaScript library. One of my personal favorite JavaScript libraries is jQuery. Well, over at Developer Snippets they have put together a good list of 50+ jQuery applications.

Below is an excerpt from the post.

Color Picker - jQuery plugin – eyecon.ro
A simple component to select color in the same way you select color in Adobe Photoshop, features includes:
* Flat mode - as element in page
* Powerful controls for color selection
* Easy to customize the look by changing some images
* Fits into the viewport
Color Picker - jQuery plugin


Building a better web forms: Context highlighting using jQuery
– jankoatwarpspeed.com
In very complex web forms this enables users to focus only on a current action. By using attractive color schema and jQuery animations, this can be even more interesting.
 Context highlighting using jQuery

Creating accessible charts using canvas and jQuery
– filamentgroup.com
Data visualization in HTML has long been tricky to achieve. Past solutions have involved non-standard plugins, proprietary behavior, and static images. But this has changed with the recent growth in support for the new HTML Canvas element, which provides a native drawing API that can be addressed with simple JavaScript. This article is a proof of concept for visualizing HTML table data with the canvas element.
Accessible Charts

You can read the full post here.

DOM Prototypes in IE 8

Tagged:  

Travis Leithead, a Program Manager for Internet Explorer at Microsoft, writes in a recent blog entry about DOM prototypes in IE 8. In brief, IE 8 is the first version of the browser to expose the JavaScript constructors and prototypes for all DOM objects. This allows JavaScript developers--especially framework developers--to extend the functionality of DOM objects. It is not hard to envision extending IE 8, for example, to implement the (currently not implemented) getElementsByClassName method of HTML 5, which allows you to get all elements of a given CSS class. Travis gives an example of how to do so here:

function _MS_HTML5_getElementsByClassName(classList)
{
     var tokens = classList.split(" ");
     // Pre-fill the list with the results of the first token search
     var staticNodeList = this.querySelectorAll("." + tokens[0]);
     //Start the iterator at 1 since first match already colllected
     for (var i = 1; i < tokens.length; i++)
     {
        // Search for each token independently
        var tempList = this.querySelectorAll("." + tokens[i]);
        // Collects the "keepers" between loop iterations
        var resultList = new Array();
        for (var finalIter=0; finalIter < staticNodeList.length; 
          finalIter++)
        {
            var found = false;
            for (var tempIter=0; tempIter < tempList.length; tempIter++) 
            {
               if (staticNodeList[finalIter] == tempList[tempIter]) {
                  found = true;
                  break; // termination if found
               }
            }
         if (found) {
          // This element was in both lists, it should be perpetuated
          // into the next round of token checking...
          resultList.push(staticNodeList[finalIter]);
         }
       }
       // Copy the AND results for the next token
       staticNodeList = resultList;
     }
     return staticNodeList;
}
HTMLDocument.prototype.getElementsByClassName =
   _MS_HTML5_getElementsByClassName;
Element.prototype.getElementsByClassName =
   _MS_HTML5_getElementsByClassName;

Travis also details IE 8's support for JavaScript getters/setters (currently supported in Firefox, Safari, and Opera) in the article here. Getters and setters are a special feature for defining non-trivial object properties such as innerHTML while retaining the same familiar JavaScript syntax for referencing or assigning the property. The syntax for defining a property is specified by the defineProperty method of ECMAScript 3.1 (aka "JavaScript Harmony"):

Object.defineProperty(  [(DOM object) object],
                        [(string)     property name],
                        [(descriptor) property definition] );

All parameters are required.
Return value: the first parameter (object) passed to the function.

The syntax for retrieving a property definition is:

Object.getOwnPropertyDescriptor( [(DOM object) object],
                                 [(string)     property name] );

All parameters are required.
return value: A "property descriptor" object

Example usage of the special property syntax would be something like the following snippet of code:

// Let's define a property to define the co-ordinates of an
// img element in JSON
var coordDesc = new Object();
//define getter
coordDesc.getter = function() {
   var coords = new Object();
  coords.x = parseInt(this.currentStyle.left);
  coords.y = parseInt(this.currentStyle.top);
  coords.w = parseInt(this.currentStyle.width);
  coords.h = parseInt(this.currentStyle.height);
  return JSON.stringify(coords);
}
//define setter
coordDesc.setter = function(JSONString) {
  var coords = JSON.parse(JSONString);
  if (coords.x) this.style.left   = coords.x + "px";
  if (coords.y) this.style.top    = coords.y + "px";
  if (coords.w) this.style.width  = coords.w + "px";
  if (coords.h) this.style.height = coords.h + "px";
}
//define property
var img = Object.defineProperty(new Image(), "coordinates", coordDesc);
img.src = "images/my_image.png";
// Call the new property
img.coordinates = '{"w":200,"h":100}';
// Read the image's current position
alert(img.coordinates);   // => {"w":200,"h":100}

The Upshot

The combination of these two new features should make IE 8 far more amenable to extensibility than any previous version of Internet Explorer. This should help framework developers bridge the gap between browsers in a much less painful way, and make life easier for the average JavaScript developer.

The two MSDN articles describing DOM prototypes in IE 8 are here:
Document Object Model Prototypes, Part 1: Introduction
Document Object Model Prototypes, Part 2: Accessor (getter/setter) Support

Syndicate content