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 (342)
• Savvy.UI Version 0.1.2 Alpha 1 Packed (318)
• Savvy.UI Version 0.1.2 Alpha 1 Combined (306)

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

Let See an Example

// Declare Class Person
var Person = SUI.JsClass.create({
	// public property name
	name: "zaki",
	// public method getName
	getName: function() {
		SUI("body").first().insertion("p").text(this.name);
	},
	// public __construct
	__construct: function() {
		this.name = "Zaki";
	}
});
 
// Declare Class Student
var Student = Person.extend({
	// public __construct, overwrite Person.__construct
	__construct: function() {
		this.name = "Mior Muhammad Zaki";
		this.getName();
	},
	// public method setName, not inherit to super Class
	setName: function(n) {
		this.name = n;
	}
});
 
var Zaki = new Student(); // similar to $Zaki = new Student(); in PHP
Zaki.setName("crynobone"); // set Zaki.name = 'crynobone'
Zaki.getName(); // alert Zaki.name;
 
var Mior = new Person(); // similar to $Zaki = new Person(); in PHP
Mior.setName("Mior Khairuddin"); // return error: Mior.setName is not a function
Mior.getName(); // alert Mior.name (inherited from Person.name)

Check out the SUI.JsClass source code and SUI.JsClass demo page.

Update: Modify code to support Savvy.UI 0.1.2-ab1

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 (463)
• Savvy.UI Version 0.1.1.8-alpha-build3 Packed (437)
• Savvy.UI Version 0.1.1.8-alpha-build3 Combined (426)

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
});

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 (325)
• Savvy.UI Version 0.1.1.8-alpha-build2 Packed (306)
• Savvy.UI Version 0.1.1.8-alpha-build2 Combined (314)

We are working on SUI.Ext.TabPanel and SUI.Ext.Panel, so any comment on the design?

Input

Separate each string/word using semicolon (;)

Unique Output

The Code

SUI(document).ready(function(){
	var ins = SUI("textarea.strlist");
	SUI("#submit-str").on("click",function() {
		var m = ins.first().val().split(";");
		m = SUI.fn.unique(m);
		ins.last().val(m.join("; "));
		return false;
	});
});

New Release

We would like to inform that Savvy.UI version 0.1.1.7-ab2 has just been release less than 12 hours ago. This release include many bug fix from version 0.1.1.7-ab1 and version 0.1.1.6 which we consider the worst release for Savvy.UI. If you have downloaded any of the following version please upgrade to the latest version. Additionally full change log will be included as soon as possible.

Subscribe to Us

While this isn't a compulsory but we would like to encourage our users to subscribe to our feed using Feed Aggregator or E-mail which will help you get latest update from Savvy.UI.

As for now, the table below represent the time it took (in miliseconds) to query the selector and retrieve total elements related to the selector query. Each browser test were done using the same computer running on Microsoft Windows XP powered by 512MB RAM.

Result

Verdict

Opera 9.25 undoubtedly is the fastest among the four while it took IE7 almost a second to query the whole test, 8 times longer than Opera. Other than that, we will review the code and hopefully optimize it so to ensure each test can be done faster and without causing your code to break.