JUNE Framework

Costin Trifan — Tue, 01 Jul 2008 07:55:40 GMT

JUNE is a lightweight, cross-browser, modular, flexible and namespaced JavaScript library.

JUNE has been built on top of Core library and it can either be used as a standalone library or alongside other libraries like JQuery. Only one main namespace is used throughout this framework: JUNE.

It was designed using the Module Pattern, which confers it protection for its internal variables.

JUNE was especially created for the small to medium-sized websites, blogs, wikis and any other websites that don't require features like drag-and-drop or animations, and for newcomers to the JavaScript language.

The existent methods of this framework have been grouped by their functionality in namespaces like Browser, Cookie, DOM, Form, and the functions' names are intuitive and easy to remember.

Design

The following design guidelines have been used throughout JUNE:

member variables are written using camelCasing,
functions' parameters are written using camelCasing,
local variables are written using camelCasing,
namespaces are written using PascalCasing.

Extended Objects

Only two native JavaScript objects are extended: String and Array.

The methods added to the String object:

Trim
IsLongerThan
CutTextAt
CalculateWords

The methods added to the Array object:

ForEach
Filter
Every

Browser Compatibility

JUNE has been tested(on a Windows platform) in:

Internet Explorer 6, 7, 8
Mozilla Firefox 2+, 3+
Opera 9+
Safari 2+, 3+
Maxthon 1+, 2+
Flock 1+

Structure

june.js: is the library's main file;
juneWeb.js: the methods contained in this file are wrapped in the JUNE.WEB namespace and they can be used for AJAX requests;
juneWidget.js: this file contains a set of 8(at this moment) of the most used widgets on the web, wrappped in the JUNE.Widget namespace.

Features

DOM element selections,
AJAX,
Widgets,
Flexibility,
Modularity.

Widgets

Accordion
TabControl
TreeView(beta)
PageClock
BannerRotator
RandomQuote
ModalWindow
FeedReader

Usage

JUNE is a modular framework. Because of that, functionality can be added on the fly by just including the desired script file:

...adds the AJAX functionality, while the:

...adds the Widget functionality.

Execute a method after the page has finished loading:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

var MyScript = {

init : function() {

alert('The page has loaded.');

}

};

JUNE.start(MyScript);

</script>

</head>

<body>

</body>

</html>

JUNE is using the Object Literal notation and because of that, when used for in-line scripting, the code must be wrapped in an Object having an init function.

The init function will be automatically executed after the page loads.

Events

JUNE offers 6 methods for Event handling.

Adding an event handler to an element:

var MyScript = {

init : function() {

var targetElement = JUNE.DOM.getById('LinkID');

JUNE.addEventListener(targetElement, 'click', MyScript.targetElement_OnClick);

targetElement_OnClick : function(event) {

alert('You clicked me!');

// Prevent navigation

JUNE.preventDefault(event);

}

};

JUNE.start(MyScript);

DOM

The JUNE.DOM namespace includes many methods to use for element selection/manipulation.

Select all elements that have the class "red":

var MyScript = {

init : function() {

var targetElements = JUNE.DOM.getElementsByClass('red');

}

};

JUNE.start(MyScript);

Toggle the css class of an element:

var MyScript = {

init : function() {

var targetElement = JUNE.DOM.getById('ElementID');

JUNE.addEventListener(targetElement, 'click', function(event) {

JUNE.DOM.toggleCssClass(this, 'red', 'green');

});

}

};

JUNE.start(MyScript);

Helper Functions

the $ function is an alias of JUNE.DOM.getById method,

the $F function is an alias of JUNE.Form.getForm method,

the $byTags is a method which can be used to select DOM elements by their tag either from a specified parent element or from the document object. The returned result is an Array of all elements found.

the $byClass is a method which can be used to select DOM elements by their class attribute by specifying an Array of classes.

Select all paragraphs and span elements from a specified parent element:

var MyScript = {

init : function() {

var parentElement = JUNE.$('Div1');

var paragraphs = JUNE.$byTags(['p', 'span'], parentElement);

}

};

JUNE.start(MyScript);

Select all elements that either have "red", "green" or "blue" as their class:

var MyScript = {

init : function() {

var elements = JUNE.$byClass(['red', 'green', 'blue']);

}

};

JUNE.start(MyScript);

AJAX

The JUNE.WEB namespace contains methods like:

customRequest - this method returns a cross-browser [[XMLHttpRequest]] object which can be used to create a custom AJAX function,
getData,
getHeaders,
getJsonData,
postData.

Create an AJAX request:

var MyScript = {

init : function() {

var container = JUNE.$('Div1'),

fileUrl = 'robots.txt',

onCompleted = function(req) {

return container.innerHTML = req.responseText;

onFailure = function(req) {

return container.innerHTML = "An error occurred while processing your request. Server error:"

+ req.statusText;

timeout = 5;

JUNE.WEB.getData(fileUrl, onCompleted, onFailure, timeout);

}

};

JUNE.start(MyScript);

Widgets

The Accordion, TabControl, TreeView and ModalWindow widgets are built from markup so their own html template must be used in order to include one of these widgets in a web page. This way they are unobtrusive and if a visitor doesn't have the JavaScript enabled in his browser these widgets will be displayed fully expanded(all their content will become visible).

Insert an Accordion widget in a page:

var MyScript = {

init : function() {

var module = JUNE.$('Accordion');

JUNE.Widget.Accordion(module);

}

};

JUNE.start(MyScript);

Great Javascript Frameworks

JUNE Framework