How to create a component for Javeline Platform – Part 1
You’ll find answers on following questions:
- Which namespace should be used, and what files should be included
- How default skin declaration looks
- How much javascript code is needed to create the simplest component
I would like to show You in this article how easy is creating components. For example this will be a calc component. First of all we need to prepare a default html document with linked JPF library, skin file and our component js file.
index.html file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:j="http://www.javeline.com/2005/jml"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calc component</title>
<script src="jpf_release.js"></script>
<script src="jpf.calc.js"></script>
</head>
<body>
<j:skin src="skins.xml" icon-path=""></j:skin>
<j:calc />
</body>
</html>In next step we should create a skin file with 2 sections: Style and Presentation:
skin.xml file
<?xml version='1.0'?>
<j:skin xmlns:j="http://www.javeline.com/2005/jml"
xmlns="http://www.w3.org/1999/xhtml">
<j:calc name="calc">
<j:style><![CDATA[
.calc {
}
]]></j:style>
<j:presentation>
<j:main container=".">
<div class="calc"> </div>
</j:main>
</j:presentation>
</j:calc>
</j:skin>As we see, there is a default declaration of skin for calc component:
Default declaration of skin
<j:calc name="calc"></j:calc>
If we’ll create more skins we need to change name attribute and CSS class name of main container. If these component will can contain other components, name of main and child containers should be realy unique, because they won’t be overwriting classes of contained components. (Remember, space between DIV tags should be there, this is not a misstake).
Class name of main container
<div class="calc"> </div>
And finaly, javascript code for new component should look like:
jpf.calc = jpf.component(jpf.NODE_VISIBLE, function(){
this.$draw = function() {
this.oExt = this.$getExternal("main", null, function(oExt) {
});
};
}).implement(jpf.Presentation);We are getting a container from skin file, and we puting it to document body. Please check source (for example in firebug). You should have there an empty DIV element with class=”calc”.