Savvy.UI

Savvy.UI version 0.1.2-ab1 Released

After quite a long break from development, we present you a new release of Savvy.UI JavaScript Library build 0.1.2-ab1 with bundle of new feature and improvement from the previous.

What’s New in Base

DOM Manipulation

We also extend the feature of SUI.DOM namespace by adding DOM navigation and detection, range of newly available function includes:

• SUI.DOM.next
• SUI.DOM.prev
• SUI.DOM.first
• SUI.DOM.last
• SUI.DOM.parent
• SUI.DOM.isElement
• SUI.DOM.isFirst
• SUI.DOM.isLast
• SUI.DOM.isOnlyChild
• SUI.DOM.isParentOf

Dual Browser Detection

In reality, there no absolute method to detect browser either it be detection using available Object/Function or using the UserAgent string. Previously Savvy.UI introduce SUI.fn.behaviour object to collect the browser information based on registered Object but we all know anyone can register dummy Object to as global variable and this will make the reporting faulty. So, as alternative we also include SUI.fn.browser which detect browser using UserAgent string (this might also be faulty if the user modify the browser UserAgent).

alert(SUI.fn.browser.ua); // return UserAgent string

Note: this function is now in testing and we will enhanced it will more option in next release.

Better typeOf

Did you know that typeof array is consider an Object? how to difference nodeList and Array? We answer all this question via SUI.fn.typeOf:

Better Querying Engine

In order to prove user better option, we also improve our SUI.Query namespace. Previously we only provide two function under SUI.Query including:

• SUI.Query.is
• SUI.Query.selector

We modularize SUI.Query.selector to:

• SUI.Query.hasClass
• SUI.Query.hasAttr
• SUI.Query.id
• SUI.Query.tags
• SUI.Query.tagParentOf
• SUI.Query.tagChildOf
• SUI.Query.tagNextOf
• SUI.Query.tagSiblingOf

as well as introducing SUI.Query.create.

Namespace

Savvy.UI has been always going into a mixture of solid JavaScript namespace and selector querying engine library which means there a lot of namespace inside SUI such as SUI.DOM, SUI.CSS, SUI.Util and etc. SUI.ns Object now available to help logs and check available of any namespace inside Savvy.UI.

Checking Namespace Availability:

SUI.ns.require("SUI.CSS");

Retrieving Running Version

Getting the running version of Savvy.UI is never been easier, SUI.toString() function eliminate that hassle.

alert(SUI.toString()); // will return Savvy.UI version 0.1.2 alpha

What’s New in Extension

Ajax

We include mutliple new feature for SUI.Ajax mainly timeout feature, caching, parameter as object, better header status detection and object removal once the request has been successly process.

Caching

By default we will cache all the XHR request unless you add cache: false inside the JSON parameter.

new SUI.Ajax({
    uri: "http://savvyui.com/ajax.php",
    cache: false
});

Timeout

Enable timeout to safely close XHR object.

new SUI.Ajax({
    uri: "http://savvyui.com/ajax.php",
    timeout: 1000
});

Object as Parameter

You can also parse Object as parameter as an alternative to querystring.

new SUI.Ajax({
    uri: "http://savvyui.com/ajax.php",
    data: { name: "zaki", email: "crynobone@gmail.com" } 
});

Note: we will try to cover this in depth in future entry.

Form

We also introduce two main feature in SUI.Form or SUI.Ext.Form which is; Live Validation engine and Custom field checking.

Using Live Validation

var obj = SUI.Query.id("form-adduser");
var form = new SUI.Ext.Form();
form.LiveValidate(obj);

Using Custom Field Checking

Let say you have a input

Type either check/radio <input type="text" id="hello-world" name="hello" />

You can either use Regular Expression checking

var custom = {
    "hello-world": {
        err: "Please write check/radio",
        test: new RegExp(/^(check|radio)$/)
    }
};
var obj = SUI.Query.id("form-adduser");
var form = new SUI.Ext.Form();
form.LiveValidate(obj, custom);

or using callback function

var custom = {
    "hello-world": {
        err: "Please write check/radio",
        callback: function(value) {
        	return value.match(/^(check|radio)$/);
        }
    }
};
var obj = SUI.Query.id("form-adduser");
var form = new SUI.Ext.Form();
form.LiveValidate(obj, custom);

Note: we will try to cover this in depth in future entry.

Object Oriented in Savvy.UI

As introduce in previous SUI.JsClass Preview entry, we are please with the capability of the SUI.JsClass or SUI.Ext.JsClass. Take a look at the entry to learn how to utilize this function.

Cookie

SUI.Cookie or SUI.Ext.Cookie is very much in testing but we still include it in the current release to enable us and user to take advantage of browser cookie using Savvy.UI.

What’s New in Utility

In-page Navigation

This is our first test implementing SUI.JsClass for application, checkout In-page Active Hyperlink using Savvy.UI to get the detail on this approach.

Download Savvy.UI

Download Savvy.UI version 0.1.2-ab1 and follow these instructions:

• Savvy.UI Version 0.1.2 Alpha 1 (232)
• Savvy.UI Version 0.1.2 Alpha 1 Packed (212)
• Savvy.UI Version 0.1.2 Alpha 1 Combined (202)