Menu ▾ ▴

Getting Started

Winston Tamblyn

Getting Started

HTML Setup

The following demonstrates what the html file should look like at a bare minimum:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>WhizDOM &raquo; Powerful HTML5 &amp; Javascript Development Library</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta name="language" content="en" />
    <style>body { background : #000; }</style>
    <script src="lib/com/whiz-dom/core.js"></script>
    <script src="src/Main.js"></script>
</head>
<body></body>
</html>

Nothing really special about the code as it's just a very simple html5 template. The important thing here is that we're importing the library and a file named Main.js, which contains our class Main.

Class Main

Classes are arranged in packages and are required to make use of inheritance with the library. All applications start from the class Main. Once the page has finished loading and a Main class has been found, it will be initiated and added to the stage.

The following code shows what's contained in the Main.js file.

package(function() {
    var Sprite = whiz.display.Sprite;

    return {
        Main : {
            extends : Sprite,

            constructor : function Main() {
                // code starts here
            }
        }
    };
});

First off, we call package, passing in a function for package's classList property. This property requires a key=>value object, or function that returns an object, to define a single or group of classes. Supplying a function instead of an object allows us to create private variables that are hidden from outside the scope of the function. It's used in the previous code to cache Sprite to a variable, which simulates an import.

One limitation of defining multiple classes in one package is that they can't extend one another.

Main's extends and constructor define it's inheritance and initialization function, respectfully.

Notice: Classes can be arranged in namespaces, but omitting it in the package call adds the class to the global scope, which is required for Main.

Class Creation

*Whiz*DOM uses a packaging system for it's class-like inheritance. A package is created using the package function, contains information on class extensions, and provides the class' constructor along with other properties and methods adding to it's prototype. A class should look like this:

package("some.path.name", {
    SomeClass : {
        extends : some.path.to.UberClass,

        someNum : 0,
        someStr : "Hello World",

        constructor : function() {
            // code to run upon construction
        },

        logStr : function() {
            this.someNum++;
            console.log(this.someStr);
        },

        timesLogged : function() {
            console.log("logStr has been called " + this.someNum + " times.");
        }
    }
});

This shows an example of a class, SomeClass, extending another class, UberClass. SomeClass inherits all properties and methods of UberClass and extends it by adding it's own properties, someNum and someStr, and methods, logStr and timesLogged.

Notice: extends, constructor, and static are all reserved words used in the construction of a class. More information about package can be found on the [Globals] page.

The Main Class

CraveJs expects one global class named Main to get started. To add classes to the global scope, simply skip the first parameter of [package] and instead supply the class object in it's place. Main must also extend the [Sprite] class. A basic Main class is as follows:

package({
    Main : {
        extends : crv.display.Sprite,

        constructor : function() {
            // your code here
        }
    }
});

Adjusting Stage Properties

CraveJs allows you to adjust stage properties from within any class that extends a [DisplayObject] and can be accessed via the stage property.

The stage has the following properties that can be set:

  • width = width of the stage in pixels. (Defaults to the width of the window)
  • height = height of the stage in pixels. (Defaults to the height of the window)
  • align = tells how the stage should be aligned. (By default, it is rendered in the center of the window, both horizontally and vertically, and can be set to one of the static values from [StageAlign])
  • frameRate = number of ENTER_FRAME events the stage dispatches per second. (Defaults to 30 and accepts values that range from 1 to 60)
  • scaleMode = tells how the stage should be stretched to fit the window. (Defaults to "noScale" and accepts any of the static values found in [StageScaleMode])

Related

Wiki: CraveJs
Wiki: DisplayObject
Wiki: Globals
Wiki: StageAlign
Wiki: StageScaleMode