Latest post 07-01-2008 9:55 by Costin Trifan. 0 replies.
  • 07-01-2008 9:55

    JUNE Framework

    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:

    <script src="June_1_1.js" type="text/javascript"></script>
    <script src="JuneWeb_1_1.js" type="text/javascript"></script>

     

    ...adds the AJAX functionality, while the:

    <script src="June_1_1.js" type="text/javascript"></script>
    <script src="JuneWidget_1_1.js" type="text/javascript"></script>

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

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title></title>

    <script src="June_1_1.js" type="text/javascript"></script>

    <script type="text/javascript">

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

     

    june framework

    btw, TinyMCE editor, I hate you!

Page 1 of 1 (1 items) | RSS