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).

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

We currently testing multiple new feature for Savvy.UI, some of it already available in the newly release while other we put it on hold for the future. As for now, we are more careful with all the code and function inside Savvy.UI to ensure that it is usable when needed. We have also try to let you have lesser code to write with the bundled utility or plug-in which is first introduce in this release.

What’s New

DOM Selector

For the new Savvy.UI we have provide support to a set of CSS1, CSS2 and minor CSS3 support for our DOM Selector engine. The Engine uses native or traditional DOM querying instead of XPath, we currently will mantain this as for the next few development. The engine itself were first introduced after version 0.1.1.6, below is list of supported Selector query for version 0.1.1.8 (Alpha-Build-2):

• Basic
  • tag
  • tag#id
  • tag.class
  • #id
  • .class
  • *
• Extended - Element is a combination of any of the Basic.
  • element element n-element
  • element, element, n-element
  • element > element
  • element ~ element
  • element + element
  • element:first-child
  • element:last-child
  • element:hidden
  • element:visible
  • element[value]
• Form Element
  • element:input
  • element:checked
  • element:selected
  • element:enabled
  • element:disabled
  • element:text
  • element:password
  • element:checkbox
  • element:radio
  • element:submit
  • element:button
  • element:image
  • element:file
  • element:reset

Example below will make all first child span which is child of any input DOM Element which is inside of DIV#hello to have red as it’s font color.

SUI("div#hello > :input span:first-child").css("color", "red");

OnDOMReady

We also improve OnDOMReady or .ready() function for Savvy.UI which will enable you to prepare set of event to occur right after the DOM is ready instead of waiting for all external element to be available (including flash, images and video). During early implementation the script failed in IE based browser because the browser document.onstateready function were overwrite when there multiple .ready() call.

SUI("p").ready(function() {
	SUI(this).css("color","red");
});

Other

Additionally here a list of changelog for version 0.1.1.8:

• Introduction to SUI.vars which will extend to SUI.string or SUI.array, the constructor is workable but there’re some issue when array variable return typeof as object instead of array.
• Separation of some plug-in based extension to SUI.Util, the changes include SUI.Util.Ticker, SUI.Util.SimpleTab, SUI.Util.DropMenu.
• Enhancement of SUI.Ajax, predefine callback will only be called when you add and object value {SUIXHR:true, ...}.
• Introduction of SUI.Util.SimpleTab
• All extension will have __contructor callback which is similar to PHP5.
• Introduction of .has(), .is(), .start() and .end() for SUI.Elements.

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-build2 Uncompressed (297)
• Savvy.UI Version 0.1.1.8-alpha-build2 Packed (273)
• Savvy.UI Version 0.1.1.8-alpha-build2 Combined (283)