JSXHelloWorld - SynapticPath Wiki

About This Tutorial
Prerequisities
Enable JSX on HTML page
First JSX package

About This Tutorial

This "HelloWorld" tutorial has been divided into two sections;

In the first section you will learn how to properly include JSX onto your page.
Second section will show you how to build your first JSX module that captures a mouse click on a button and pop-up an alert.

Prerequisities

JSX Toolkit is downloaded and installed in target directory. See the GettingStarted page for instructions.

Enable JSX on HTML page

In this section you will essentially test your JSX installation. First create a 'index.html' page in your context root - the place where you've installed the JSX libraries. To actually enable JSX Toolkit on your page, insert two <script> tags into the head element.

First tag defines global variables that configure the JSX.
- jsxContext variable defines the path to the directory where JSX root is.
- logLevel variable is optional and sets the level of debug logging.
Second tag loads the JSX core library.

<html>
    <head>
        <script type="text/javascript">var jsxContext='.'; var logLevel='INFO';</script>
        <script type="text/javascript" src="./jsx/core.jsx"></script>
    </head>
    <body>
        <script type="text/javascript">
	    logger.info("Welcome to JSX!");
	</script>
    </body>
</html>

That's it! With above code in your page, you should be able to see a popup debug log window appear, that should be clear indication that JSX is enabled.

First JSX package

Everything in your JSX enabled application should be done by packages. Some other frameworks create one monolithic .js file that holds everything, but this is not our way. The advantage of this approach is that you can load only those parts of JSX Toolkit (and your packages) that the page actually needs. This saves bandwidth, and of course, user frustration with slowly loading pages.

So, let's get started.

First, in the same directory that holds the index.html file from above (and hopefully the jsx), create a directory myapp.
Inside the myapp directory create a 'mypackage.jsx' file.
Paste following code into the newly created file.

jsxPackage("myapp.mypackage", function(thisPackage){

	var EventHandler = jsxImport("jsx.utils.events.EventHandler");

	jsxClass("MyClass", EventHandler, function(superClass){
	
		this.instantiate = function(element){
			superClass.instantiate.call(this);
			this.addHandledElement(element);
		}
		
		this.onclick = function(evt){
			alert("Hello World!");
		}
	});
});

The jsxClass that was created is going to live inside the myapp.mypackage.MyClass namespace. The MyClass class is an EventHandler, it hooks up to the JSX event routing engine.

Now, to get MyClass up and running, add a button and instantiate the class like below.

<html>
    <head>
        <script type="text/javascript">var jsxContext='.'; var logLevel='INFO';</script>
        <script type="text/javascript" src="./jsx/core.jsx">
    </head>
    <body>
        <input type="button" id="clickme" name="clickme" value="Click Me">
        <script type="text/javascript">jsxBehavior("myapp.mypackage.MyClass", "clickme");</script>
    </body>
</html>