My favorites | Sign in
Project Logo
                
People details
Project owners:
  tekool

Description

Objs is a simple and lightweight Javascript library on which to rely to use Javascript prototyped pseudo-classes with functionalities to extend classes, implement pseudo-interfaces from code written in one Javascript file per pseudo-class.

I have started the project in early 2006 with the AjaxClassLoader Javascript library that loads Javascript pseudo-classes synchronously at runtime with Ajax.

Goal

The main goal of the project is to allow developers to work with one Javascript file per pseudo-class, one package per folder as usual in Java, C#, Actionscript projects.

You can use the Objs Javascript library to load each Javascript file with standard HTML script tags in little projects. But to use it in a production environment with many Javascript files it is better to concatenate all the code in a single Javascript file. It's why ObjsComp Java tool exists.

Objs Javascript library usage

When deploying an application built for Objs, you will need to use the Objs Javascript library. We will see how to use during the development work and haw to deploy it on the production server.

HelloWorld Objs demo

Start your project by creating a project folder.

A mandatory is to create a folder to contain our Javascript pseudo-classes in the project folder. You can name it whatever you want, but a good idea is to simply name it src.

Another good idea, not a mandatory, is to create a second folder on root of the project folder named bin to contain all the files you will need to deploy on the production server.

Add the last version of the Objs Javascript library in the bin folder.

Now create an empty HTML web page in the bin folder too. Its content will simply allow the user to click on a button to display the usual "Hello World!" Javascript alert.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<title> HelloWorld Objs demo </title>

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

		<!--OBJS-->
		<script type="text/javascript" src="hello_world_demo.js"></script>
		<!--OBJS-->

		<script type="text/javascript">
		<!--
			//We ask Objs library for a reference to the HelloWorld pseudo-class object.
			var HelloWorld = Objs.load('com.example.helloworld.HelloWorld');

			//We build an HelloWord class instance by using the "new" keyword.
			var helloWorldInstance = new HelloWorld();

			//We call the method that will give us the text to display the alert.
			alert(helloWorldInstance.giveMeHello()); 
		//-->
		</script>

	<body></body>
</html>

Insert a call to the objs.js file with an HTML script tag

Finally create an empty HelloWorld Javascript pseudo-class with the following full path in your source folder : src/com/example/helloworld/HelloWorld.js. We will write code next.

You need to respect normalization when naming the method closure. Here our class package in dot syntax is com.example.helloworld.HelloWorld. You'll have to wrap your class code with a method closure specifically named class_com_example_helloworld_HelloWorld. If you forget this, Objs will throw an error you'll have to intercept with a tool like Firebug or any Javascript debugger you like.

Its code will be :

/**
* The class context is protected by a method closure. Nothing will pollute the
* global context if we respect the closure.
*/
function class_com_example_helloworld_HelloWorld()
{
	//The class need to be registered by the Objs library to be delivered when needed.
	Objs.register("com.example.helloworld.HelloWorld",HelloWorld);

	/**
	* Contructor of the class.
	* Here empty.
	*/
	function HelloWorld(){}

	/**
	* A static var that contains the "Hello World!" message.
	*/
	HelloWorld.HELLO_WORLD_MESSAGE = "Hello World!";

	HelloWorld.prototype.giveMeHello = function()
	{
		return HelloWorld.HELLO_WORLD_MESSAGE;
	}
}

As this example use only a single Javascript file and not to complicate it, we do not need ObjsComp, so simply copy HelloWorld.js to hello_world_demo.js in the bin folder.

Your project folder must now look like :

hello_world
    |----src
    |    |----com
    |         |----example
    |              |----helloworld
    |                   |---o HelloWorld.js
    |----bin
    |    |---o hello_world_demo.js
    |    |---o index.html
    |    |---o objs.js
                      

Open the index.html file, click the button, you will have the standard Javascript "Hello World!" alert.

You can find an archive to download with all the files of the example in the download section of the project.

ObjsComp Java tool usage

ObjsComp allows to recursively read the Javascript project source folder, list classes, strip comments and concatenate the whole code into a single file that you can use directly in a production environment. If you want to use it now, you need to download ObjsComp.jar.

Use it with the command line : java -jar ObjsComp.jar src="path/to/your/source/folder" out="path/to/the/single/javascript/file/SingleJavascriptFile.js"

Where out is the path to the single Javascript file you want to generate and src the path to the folder that contains all your Javascript files.

To generate the hello_world_demo.js of the HelloWorld example archive, I have used the following command line : java -jar ObjsComp.jar src="C:/HelloWorldProject/src" out="C:/HelloWorldProject/src/hello_world_demo.js"









Hosted by Google Code