Getting Started

Getting started is always a major hurdle to overcome. Not for the developer, but for the person writing documentation! How do you set up good examples that illustrates the principles of the framework? Let's just start with the tried and true method: hello world!

Including the Script

Like with all other frameworks, before you can use NinJa, you need to include the source in a script tag as provided below:

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

Displaying Hello World

In order to display "Hello World" in a blank page. We must first reference the page! NinJa provides a means of access the page with the static Page variable. Page can accessed anywhere, any time after the initial inclusion of the Ninja source.

Before we go on, let's discuss how NinJa initializes. NinJa ties into various document states that browser expose. Before "onload" is fired in the standard JavaScript event for <body> tags, these events will fire and allow NinJa to perform its initialization functions. Because of this, existing elements must not be accessed using NinJa until the OnLoad event is fired for Page.

To execute code during Page.OnLoad, you must add a function or delegate (more on delegates later) to the event. OnLoad is an Event object that's a specialized object that stores functions and delegates that are executed in the order that they appear. Events can have functions added, removed, inserted, cleared, etc. They are treated as specialized arrays and can have anything function performed on them that arrays have. Because of this, you can set priorities of event calls and dynamically add and remove them. Functions added to the event can be anonymous or references to existing function. Below is a quick example:

Page.OnLoad.Add(function () {
    alert("Welcome to our page!");
});

function sayHi() {
    alert("Welcome to your page!");
}

Page.OnLoad.Add(sayHi);

 

The first piece adds a function to Page.OnLoad anonymously. The second pieces defines the function then adds the name of the function to the OnLoad event. Both methods work.

So lets now add a Hello World to our page:

<script type="text/javascript" src="/scripts/NinJa.js"></script>
<script type="text/javascript">
    Page.OnLoad.Add(function () {
        var s = new Span();
        s.Text("Hello world!");
        Page.AddElement(s);
    });
</script>
Let's break this down. Page.OnLoad.Add will add the anonymous function to the event. Once the event fires, the function is executed. Note we set s to a new Span() object. This object represents a span tag and handles a lot of the common functionality of modifying the span tag. The key here is that there is no backing HTML for this object, it's an actual HTML node that's in memory at this point, not HTML code to parse, no syntax to worry about. The next then we do is set the Text of s. Text is a special kind of function called a PropertyFunction. These functions will be discussed later. Just know that by passing in "Hello world!" into this function, the inner text of the span tag is set to just that. This is similar to using:

 

    s = "<span>Hello world!</span>";

As with string concatenation, there's is a lot of room for error in the syntax that can't be caught without combing through the code. Using the NinJa objects that represent HTML tags eliminates this worry while providing a model of handling elements and modifying their properties.

Next we add the element to the page with Page.AddElement. This simply adds the element to the end of the page's document.

All of the major HTML elements that are usually modified are represented in NinJa as objects. For those tags that are not represented, there is a generic Element object that can be used to create any tag and have accessed to the NinJa features given to standard HTML elements.

Last edited Jun 13, 2012 at 3:45 PM by dahrkdaiz, version 2

Comments

No comments yet.