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 (233)
• Savvy.UI Version 0.1.2 Alpha 1 Packed (212)
• Savvy.UI Version 0.1.2 Alpha 1 Combined (202)

SUI.JsClass Preview

We would like to preview yet another new Extension for Savvy.UI which is SUI.Ext.JsClass or SUI.JsClass which allow you create Simple Class and Inheritance using JavaScript in more similar to how it’s done in PHP but with the limitation of JavaScript writing structure.

Some available features or limitation of this implementation:

• All methods and properties for the Class Object are ONLY public
• Inheritance is available but using ONLY extends
• In case of extends being used and both Object have __construct function, only the child Class __construct will be called.
• __destruct function is available and successfully delete all method and properties of the Object but doesn’t delete this.prototype methods

Read the rest of this entry »

Savvy.UI version 0.1.1.8 (Alpha-Build-3) Released

The new version Savvy.UI focus more on ensuring better support to mobile browser than the previous version, at the same time we also added extendability to our code so that everyone can easily create utilities (or plug-in) for Savvy.UI

What’s New

Extender

Extender function allow JavaScript developer to add countless methods to SUI.Elements without having to modify our code. For example you can add fadeIn function by adding this code:

SUI.fn.extend("fadeIn", function() {
	this.pushCALLBACK(function() {
		SUI.CSS.Show(this, "slow");
    }, i);
    return this;
});

To use it, all you need to do is:

SUI("#some-id").fadeIn();

New Theme

With the new theme in place for Savvy.UI I think it is the right time to add a new style to our JavaScript theme collection. The new theme can be access through css/style-black.css.

Custom Builder

Also check out our custom Savvy.UI builder at http://savvyui.com/download/build to customize what you need for your application.

Other Update

Additionally here a list of changelog for version 0.1.1.8-ab3:

• Nokia s60 3rd Edition mobile browser support
• SUI.Util.Toggler is added to default download.

Download Savvy.UI

Download Savvy.UI version 0.1.1.8 (alpha-build-2) and follow these instructions:

• Savvy.UI Version 0.1.1.8-alpha-build3 (358)
• Savvy.UI Version 0.1.1.8-alpha-build3 Packed (328)
• Savvy.UI Version 0.1.1.8-alpha-build3 Combined (332)

News Update #2

First of all, I would like to thank Themetation, owned by Kai Loon for such a nicely done Theme for Savvy.UI. Other than that I also added a blackish css template for Savvy.UI which is included in the next release (which I would probably release in one or two days).

Bringing Calendar for Savvy.UI Back

We're be bringing Calendar plug-in back in the next Savvy.UI release along with better customization for Simple Tab plug-in.

new SUI.Util.Calendar({
     renderTo: "#cal-post45",
     navigation: true
});