Getting started with Archetype

  1. Get the latest version of Archetype available at sourceforge
  2. Unzip the file wherever you want. We'll call this directory ${root}
  3. Now browse into ${root} :
    • You can see some ".html" files : there is a unit test (UnitTest.html), a simple demo (Start.html), and a Slide presentation (Slidy.html) using Archetype.
    • Unfortunatly as of 0.1.5 Index.html file is broken if you're not using an webserver with autoindexing (see archetype.conf.js for explanation).
    • Don't hesitate to have a look at how Start.html or Slidy.html work (UnitTest are using hack so don't particularly look at them. We're not very happy with them and we will change of Test framework soon, possibly JsUnit due to it's maven integration, or TestAnotherWay).
    • If you're using Internet Explorer, you'll have to make this file work as a website, running on a http server (something must be broken in IE with local files).
    • We have not made any IE CSS (ugly) hack for Slidy to work under Internet Explorer(but it almost works on IE8 standard mode). If you're a big fan of such a browser, then a patch is welcome ;)
  4. Archetype has it's configuration available in ${root}/archetype.conf.js. For now archetype.conf.js must be in the same folder (or you'll have to change where the configuration is stored at the start of archetype.js)
  5. In order for this Tutorial to be easier it is heavily advised to use Firefox with the Firebug extension .

    If you're using Firefox and Firebug, you shouldn't have to change the log configuration in Archetype.

    Actually, you can use the "body logger" if you need log in any browser, but beware that this logger looks quite awful. In order to do this, replace this line in archetype.conf.js :

    You can make your own kind of logger easily, and this may be explained in a futur tutorial (you can have look to the bodylogger code to do you own as it's pretty simple). 

    
Archetype.logger = "log.firebugLogger";
    by this one : 
    
Archetype.logger = "log.bodyLogger";
    N.B.: Other current options for the logger are : "log.nullLogger" (does nothing but no error), or "log.alertLogger" which will display an alert (and stop execution in the meantime) of what you want to log, or "log.piDebuggerLogger" (firebug like in pure JS, on any browser).

    Be aware that alertLogger may be useful in some particular cases, but it will just quickly bug you most of the time.

Create your own application

  1. In the ${root}, create a text file and call it "Sample.html". This file will be just an empty valid HTML file, that loads archetype.
  2. So here's a typical skeleton of an application html file: 
    
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>.:: Sample Application ::.</title>
        <script type="text/javascript" src="archetype.js"></script>
    </head>
    <body>
    </body>
</html>
    You may want to change the title according to your application name, but beside of this, you shouldn't need anything else.

    So copy and paste the above code in your html file.

  3. Ok, now if you open your Sample.html with your browser, you'll see a bit of log or Archetype (may be in the firebug console or in the body of your page, depending of your logger), that's all.

    If you look carefully at the interpreted html (in Firebug, the "html" tab), you can see that Archetype has loaded about more or less 8 javascript files (depending on you archetype version and your configuration).

    If you look even more carefully, you'll see (provided that you haven't played too much with the configuration file) that Archetype has tried to load "${root}/Pages/Sample.js". This file is the application controller. The file where everything starts for your code.

  4. You now have to create this file. Go into Pages and create "Sample.js" (must use the same case as your html file).
  5. After loading the application controller, and when the whole environment is available, Archetype will call "${ControllerName}.main()". In our case, "${ControllerName}" is equal to "Sample".

    So let's fill "Sample.js" with this content: 

    
//Static namespace for your application
Sample = {
	/**
	 * Sample.main is automagically launched when Archetype environnement is available for page Sample.html
	 */
	main: function() {
		//--Do your application specific configuration here, e.g.:
		//Archetype.useLogger("log.firebugLogger");
		// or
		//Sample.conf = {foo:"bar",bar:"foo"};
		//--
	
		//You will put your application BootStrap here
		Logger.log("hello, world !");
	}
};
    The "Sample.main()" will be called by Archetype when the environment will be available.

  6. If you don't plan to use components, you can stop here and develop your application just as any application based on prototype out there, you just may want to have a look at the JsDoc to use Templates and take advantages of Archetype.Class class enchancement for your objects.