Hello world !
As everyone, you like example. So we will developp here the hello world application using Woozoo. For this one, you will need Firefox, firebug and a webserver like Apache (it is in EasyPHP or WAMP).
The HTML file
Let's put some code in your http://localhost/js/index.html page.
<html>
<head>
<script type="text/javascript" src="http://localhost/js/WZFwk/libs/prototype/1.6.0.3.js"></script>
<script type="text/javascript" src="http://localhost/js/WZFwk/libs/prototype/extends.js"></script>
<script type="text/javascript" src="http://localhost/js/WZFwk/compress/compress.js"> </script>
<script>
var initializer = new Initializer();
initializer.init("http://localhost/js/conf.xml", {
mvcFile: "http://localhost/js/helloworld/mvc.xml",
baseUrl: "http://localhost/js/"
});
</script>
</head>
<body>
<button id="myButton">Click me !</button>
</body>
<html>
As you see, we just include prototype, the extends file and the Woozoo framework.
Then we create an instance of the Initializer class and specify as the first argument the URL of framework configuration file. The second argument let the framework know where to find the description of your application with mvc.xml and what is the base url baseUrl.
The framework configuration file
The framework configuration file is a simple XML contaings some information that let the framework react as you wish. You will locate it in http://localhost/js/conf.xml. Let's take a look :
<?xml version="1.0" encoding="utf-8"?> <items> <framework> <item version="1.0.7" /> <url> <item addBaseUrl="true" /> <item useUrl="false" /> </url> <folder> <item fwkFolder="WZFwk/" /> <item pluginFolder="WZPlugin/" /> </folder> <debug> <item debugWay="console" /> <item debug="true" /> <item debugFwk="true" /> <item debugBinding="false" /> <item debugLaunchMethod="false" /> <item showTiming="true" /> </debug> </framework> </items>
Nothing special here.
MVC configuration file : the description of you application
The MVC configuration file list the modules you are using in your application. In this example, we will only have one : HelloWorld. This file is located in http://localhost/js/helloworld/mvc.xml.
<?xml version="1.0" encoding="utf-8"?> <files> <item id="HelloWorld" file="helloworld/conf.xml" executeAtInit="true" /> </files>
As you can see, nothing really complicated. The only thing you have to pay attention is the file attribute that specify where the framework can find the full description of your module. In some application, you can have a lot of modules.
Module configuration file
Let's say you want to alert Hello world when you click on the button myButton and change it's innerHTML propertie to Hello world too. I know it is not really fanzy but it's a start ! Your module configuration file will look like this (in http://localhost/js/helloworld/conf.xml) :
<?xml version="1.0" encoding="utf-8"?> <conf model="HelloWorldModel" controller="HelloWorldController" view="" dynamicLoad="true" folder="helloworld/" version="0.1" compressed="false" > <bind id="myButton" attribute="innerHTML" propertie="buttonValue"/> <bindAsListener id="myButton" event="click" handler="buttonClickHandler"/> </conf>
As you can see in the attribute of conf, we will define a model helper called HelloWorldModel and a controller helper called HelloWorldController. These two classes will be in the folder helloworld/.
You can also observe the bind and bindAsListener tags. The first one means that the innerHTML attribute of the DOM element myButton will be binded to the buttonValue propertie in the model helper HelloWorldModel. The second one means that on a click on the element myButton, the method buttonClickHandler will be lauched in the controller helper HelloWorldController.
So much configuration... Let's now run our application to see what happens in firebug. You should see something like that :
As you can see the framework inform you about what he is doing every time :
- loading the application configuration file,
- loading the framework trace file,
- loading, parsing and using the MVC configuration file,
- ...
Badly the initialization of the framework fail because we still didn't create the controller helper.
So, let's now see the content of HelloWorldModel and HelloWorldController.
Model and Controller Helper
Create two file name HelloWorldController.js and HelloWorldModel.js in http://localhost/js/helloworld/
http://localhost/js/helloworld/HelloWorldController.js :
var HelloWorldController = Class.create(ControllerHelper, {
initialize: function($super) {
$super();
},
init: function($super) {
$super();
},
buttonClickHandler : function(event) {
var element = event.element(); // --> <button id="myButton">Click me !</button>
element.innerHTML; // --> Click me !
this.launchModelMethod('changeButtonAndAlert');
}
});
http://localhost/js/helloworld/HelloWorldModel.js :
var HelloWorldModel = Class.create(ModelHelper, {
initialize: function($super) {
$super();
},
init: function($super) {
$super();
},
changeButtonAndAlert: function() {
alert('Hello World !');
this.get_buttonValue(); // --> Click Me !
this.set_buttonValue("Hello World !");
this.get_buttonValue(); // --> Hello World !
}
});
Once you use will click on the button, the method buttonClickHandler will be launched. As you can see, there is an event parameter.
At the end of the method, we call the launchModelMethod. This method permit you to call any of the method of your model helper (Here changeButtonAndAlert). Then the changeButtonAndAlert will be launched. We alert Hello World and we change the attribute buttonValue by using the set_buttonValue setter method. But remember buttonValue is binded to the innerHTML attribute of myButton. So that will change too !
Ok, let's launch the application. Click on the button. It works ! Good. It doesn't, you probably did something wrong.
Let's take a look at firebug :
As you can see, the framework still inform you about everything, show you timings... You know the framework initialize properly because of the last timing WZFramework: 390ms.