3.0 beta 2

Hello, World!

Create a blank html page like this one -

<!doctype html>
<html>
<head>
    <title>ActiveWidgets - Hello, World!</title>
    <link href="http://cdn.activewidgets.com/demo/3/ax.css" rel="stylesheet">
    <script src="http://cdn.activewidgets.com/demo/3/ax.js"></script>
</head>
<body>

</body>
</html>

The page includes links to the ActiveWidgets files, but it does not have any content yet.

Placeholder

Most often the page content is either static or already built by the server side code. What is missing is just a few interactive components in the predefined positions.

The page markup should include a placeholder tag where you want to render the component. The placeholder tag should have a unique id. The component script will use this id to locate the placeholder tag and render itself in the correct position.

<span id="hello"></span>

Insert the placeholder tag into the body section of the page.

Component

To create and initialize the component we need a few lines of javascript -

var button = new AX.Button({
    id: 'hello', // should match placeholder id
    text: 'Click me'
});

We can also add an event handler to the button click event -

button.on('click', function(){
    alert('Hello, World!');
});

The script may go either into the head section or page body.

See the complete example.