Using Savvy.UI

In this documentation, we will introduce you on the simple method on writing JavaScript with Savvy.UI. Some of the detail here may not only explain on Savvy.UI but also consist of explanation on JavaScript itself.

Savvy.UI Namespace

Savvy.UI use short but manageable namespace which allow better structure when using the library. The global namespace SUI have two style of interaction:

As a global Object, allowing methods and properties to be wrapped as child of SUI object.
As a function, redefine it as SUI.Ext.Elements constructor for DOM traversal and modication. the function is chainable and always return the SUI.Ext.Elements object

NameSpace (Global Object)

SUI.CSS.Set(node, "background", "blue");

Set node HTML element background to blue.

Function Chaining (via SUI.Ext.Elements)

SUI("div.even").css("background", "blue");

Set all HTML element DIV with className “even” background to blue.

Savvy.UI Code Structure

Savvy.UI code structure consist of two (2); Object and Constructor. All object and constructor in Savvy.UI are nodes of SUI object to avoid method overloading occur when other JavaScript Library or Framework use the same namespace.

Sample: code using object

SUI.Attr.Set(object, "id", "hello_world");

Sample: code using contructor

var ajax = new SUI.Ajax;
ajax.Call({ ... });

Savvy.UI Variables

All object and constructor inside Savvy.UI will have SUI as prefix (explain in Savvy.UI Namespace), this is to ensure that Savvy.UI can be used with other JavaScript Framework without major issue of namespace/method overloading, which is discuss in Working with Other Framework.

Adding Savvy.UI to HTML

It’s advised to include Savvy.UI instead the HEAD of your HTML document instead of BODY.

<html>
    <head>
        <script type="text/javascript" src="/path/to/savvy-base.js"></script>
        <script type="text/javascript" src="/path/to/ext/animator.js"></script>
    </head>
    <body>
        ... you content here ...
    </body>
</html>

Add savvy-base.js first before including any of the extensions to make sure Savvy.UI (SUI) objects is defined and ready to be used by the extensions.

Edit the src attribute in the script tag to point to your copy of savvy.base.js and savvy.animator.js. For example, if savvy.base.js is in the same directory as your HTML file, you can use:

<script type="text/javascript" src="savvy-base.js"></script>

You can download your own copy of Savvy.UI from the Savvy.UI’s Download page.

Launching Code on Document Ready

It’s advise to wrap your code inside SUI(document).ready(). This way, your code will only be executed once the document has been fully loaded. This is not a requirement but instead more of an prevention mechanism to avoid undefined error during runtime.

SUI(document).ready(function() {
    // put your code here
});

In addition, you can also use the same feature for DOM.

SUI("p").ready(function(){
	SUI(this).css("border", "1px solid #333");
});

Enable Savvy.UI Debugging Mode

Savvy.UI come with a build-in debugging function that store all debug message during runtime. This message can either be integrated with Firebug (extension for Mozilla Firefox) or JavaScript native window.alert(), this message will only be shown when you turn on debugging mode.

SUI.fn.debug = true;

Debugging Your Code

SUI.fn.logger("Error message here");

Browser Debugging

Don’t just rely on Savvy.UI internal debug module to debug your code as different browser in the market come with different JavaScript Engine and this engine may have limitation that may not exist in other browser, check out Qooxdoo » JavaScript Debugging Tool.

How to Debug Your Code?

How to Load Savvy.UI’s Theme?

Savvy.UI come with two (2) set of theme available under the css folder from your downloaded package. Here’s an example on how to embed the Cascading Style Sheet (CSS) file:

<style type="text/css">
<!--
@import url("/path-to/sui/css/style-black.css");
-->
</style>

Savvy.UI

Latest Download

Other Available Package

Build your custom Savvy.UI

Feel lost?