JavaScript

Gizmox released today a new version of the Visual WebGui Platform for Rich .NET AJAX applications.

Visual WebGui 6.3.7 is a further stabilization to the 6.3 pre-release version which adds support for wrapping of AJAX based controls into the Visual WebGui framework as well as support for additional languages.

The platform is available in free open source and free trial (commercial Professional Studio) versions.
All downloads are available for free here!

This is the Change log for 6.3.7:

Breaking Changes
----------------------------------------------------------------------------------------------
VWG-4746- Support for wrapping AJAX based controls added.

Bugs fix
----------------------------------------------------------------------------------------------
VWG-3930 - No control causes the designer window to open dirty - with a star marking changes.
VWG-4763 - VB form designer allows to edit ContextMenu items
VWG-4256 - Button with 21x21 image used tocrop image in a button with size of 25x25.
VWG-4204 - ListView RTL view fixed.
VWG-2599 - When browser is in offline mode a message is shown when the connection to the server is lost.
VWG-2976 - Focus indication on Checked list box focus.
VWG-4751 - Problem deleting SplitContainer contro from designer fixed.
VWG-4355 - Opening a TableLayoutPanel in designer used to automatically add rows.
VWG-4753 - Splitcontainer did not preserve splitter panels order.
VWG-4359 - When setting the CheckBoxes property to TRUE, the selection text used to disappear.
VWG-4309 - Casting safetly tests added in the resource browser dialog classes.
VWG-4344 - Support added for Iceland-Icelandic.
VWG-4403 - Support added for Brazil-Portuguese .
VWG-4311 - Support added for Portugal-Portuguese.
VWG-3792 - UniqueIdExtender renders CUID attribute at run-time - and it's now available in generated HTML code.
VWG-4211 - FCKEditor fixed .
VWG-4243 - TableLayOutPanel render problems fixed fixed.
VWG-4120 - TabControl should re-render on KeepConnceted requests fixed.
VWG-4752 - SplitterDistance property is now saved for the SplitContainer control.
VWG-4390 - TableLayoutPanel fixed to not corrupt layout when saving and reloading
VWG-4662 - Form.DockPadding fixed and wont make controls move on open+save form.
VWG-4483 - Buttons with Flat style text retain's it's location on mouse hover.
VWG-4260 - DateTimePicker with custom format will not change day part to undefined on second tabbing through the DTP control.
VWG-4246 - DataGridViewCell - allows placing typing cursor using mouse to edit contents
VWG-4371 - Tabbing through controls on a form tabstop on buttons with FlatStyle=Flat.
VWG-4244 - IE8 - Dialogs & MessageBoxes showing content.
VWG-4172 - IE8 - Rendering of labels fixed to look the same as in IE7 and FF3.
VWG-4340 - IE8 - Combobox rendering fixed.

Go to Downloads page...

Visual WebGui 6.4 Preview 1 is here and available to download for free!

The 6.4 Preview allows to experience the revolutionary web design tool providing ease of designing DHTML or Silverlight UI with no HTML, CSS or XAML coding, while using your design software of choice such as Photoshop and Expression Blend. This cutting-edge Point & Click Web Design Tool provides, for the first time, a complete coding-free cycle for the creation of complex, enterprise-grade web applications. 6.4 also allows to fully customize application themes using the new designer and by downloading and sharing complete VWG Themes.

Web Design Tools page...

“Microsoft is pleased to work with Visual WebGui to deliver the best computing experience to our customers,” said Joe Marini, Director, Platform & Tools Ecosystem at Microsoft Corp. “The newly added features in Visual WebGui 6.4 preview offer developers a flexible way to brand and differentiate their UIs for internal and customer-facing applications.”

The 6.4 Preview version is offered for free and available for evaluation in either Express Studio or Professional Studio. In the future the new design tools will be offered in the Express edition for free, under LGPL license, and in the Professional Studio version.

6.4 also presents new scalability extensions for redundancy and mulit-user SaaS/Cloud Computing level with performance enhancement and memory optimization.

A new interesting tool which allows forms, reports and charts to be created using a powerful WYSIWYG visual editor was developed atop the Visual WebGui .NET AJAX platform.

The tool is an automated environment (IDE) for developing web systems using the methodology DDD (Domain-Driven Development). Automato allows the creation of complex systems like ERP and CRM on a powerful Web applications platform for using the same concepts of desktop applications. This model maximizes the interactivity with the end-user and makes the systems more robust.

Unlike the current models of creating Web applications that require prior knowledge of various technologies (DHTML, JavaScript, CSS, etc.), creating rich interface applications (RIA) in Automato™ are automatically managed by a powerful platform which provides a harmonic development experience using a single technology. This dramatically reduces the time of creation, costs and learning curve.

Features Integrated :

1. Powerful Form Editor (WYSIWYG).
2. Multiple Database Support
3. Modeling Database from E/R Diagrams
4. Compare & Merge Databases Model
5. Unique Compare and Merge Applications
6. Source Control Management
7. Issue Tracking System / Project Management System

Learn about Automato...

Also known as ECMAScript 5th Edition, the new JavaScript standard has entered final draft stage. Among the goodies: a formal getter and setter syntax for object properties, language reflection features, support for the JSON data format, additional Array methods, and a strict mode that improves error checking.

Function.bind

Function.prototype.bind(self, args...). A bind function wraps a function in a closure, storing references to the context arguments from the surrounding scope. This is somewhat equivalent to the following:

Function.prototype.bind = function(context) {
  var fun = this;
  return function(){
    return fun.apply(context, arguments);
  };
};

Applications include partial application of arguments to a function and currying. Though you can custom-roll one today, a native bind function in 3.1 should outperform any equivalent user-defined function.

Array

The additional Array methods in ECMAScript 3.1 are identical to methods introduced in JavaScript 1.6-1.8, but were never present in any official ECMAScript specification. They are currently implemented in Firefox 3.x. Of course, having them in ECMAScript 3.1 means that now you will be able to actually use them (provided, of course, that all browsers implement the standard...). These methods are: indexOf, lastIndexOf, filter, forEach, every, map, some, reduce, and reduceRight. There's a good description of each method here.

ECMAScript 3.1, also known as JavaScript Harmony, is the less ambitious version of what was to be JavaScript 2/ECMAScript 4, a plan scuttled when some members of ECMA balked at the large additions to the language.

The new specification is available here.

The 1.3 version of the Dojo toolkit is finally out. The main focus of this release has been browser compatibility (particularly IE 8 and Chrome) and speed. According to Dojo-reported numbers on the TaskSpeed benchmark, Dojo is the fastest JavaScript toolkit on common DOM operations, at least twice as fast as other JavaScript toolkits. Of course, all the usual caveats about micro-benchmarking apply, but the speed increase is nevertheless quite impressive.

Simultaneous with the Dojo 1.3 release is the release of the PlugD, a library allows Dojo developers to mimic some of the popular aspects of jQuery (method chaining, as well as many similarly-named convenience methods).

The full release notes can be found here. You can download the new release here.

Douglas Crockford, author of the JSON data format, has written that JavaScript as a language is like a "Lisp in C's clothing":

JavaScript's C-like syntax, including curly braces and the clunky for statement, makes it appear to be an ordinary procedural language. This is misleading because JavaScript has more in common with functional languages like Lisp or Scheme than with C or Java.

This is a really interesting statement, especially if you are used to looking at JavaScript code like this:

var myGlobal = ...;
function myProceduralFunction() {
     // ...
}

Don't laugh...you've probably written JavaScript like this at one time or another. I certainly did, before I really understood JavaScript. For a long time, this is how most people grokked JavaScript, as a kind of dynamically typed C/C++. There are also those who try to make JavaScript behave as a Java-style OOP language (a natural tendency, given the misnomer): using nested objects as package-style "namespaces", trying to make prototypical inheritance look like static class inheritance, etc. It's all a bit of a stretch, but since JavaScript does actually borrow many OOP concepts, it can be done. I would argue, though, that Crockford is right and JavaScript is more naturally used as a functional language. In this article I am going to briefly examine some of the similarities between JavaScript and functional programming languages, and how the JavaScript programmer can use them to his/her advantage.

Explorer Canvas, otherwise known as the little JavaScript library that allows you to use VML while still coding in HTML 5 Canvas (thank heaven), has released the third version of the library. The major reason for the release is compatibility with Internet Explorer 8, but there are numerous other bug fixes and improvements in the release. A comprehensive list of changes is here.

You can download the new release here.

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…

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.

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.

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.

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.

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.

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.

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.

You can read the full post here.