Constructos

Creating and Using Winnetou's Web Components: Constructos

Constructos are the foundation of WinnetouJs. Through them it is possible to write complex and scalable applications without having to mix javascript with html. Constructos must be saved in the folder defined in win.config.js "constructosPath" as html files. The file name will be the name of the class generated by the WBR. The base of a Constructo can be written as follows:

base.html


      
<winnetou>
    <div id="[[myFirstDiv]]">{{text}}</div>
</winnetou>

Constructos receive only two parameters: ids and props. Ids are represented by double brackets [[ ]] and props by double braces {{ }}. Constructos never receive logic code.

Save the file as "./constructos/base.html" and run wbr in terminal: node wbr --bundleRelease.

At this moment the wbr interface will be loaded in the terminal and will show if an error has occurred, otherwise it will compile our first Constructo and show the success message on the screen. At this time, our watchers will also be running and any changes made to base.html will be automatically compiled while the wbr is running in the terminal. WBR will create our constructo js file inside the constructosOut defined in win.config.js.

The name of constructo js output file will be the same of html source, eg: myComponents.html -> myComponents.js. Is from the js output file that we will import the WinnetouJS web components.

myFirstConstructo.js


        
import { myFirstDiv } from "./constructos/base.js";
myFirstDiv({ text: "Hello World!" }).create("#app");

The id of the constructo defined in [[myFirstDiv]] will be the name of component, in order to import it. Parameters can be create using brackets annotation, where {{text}} will be { text: "Hello World!" }.

Now, just import bundle into your html index page. You can also use the module type in script tag in development in order to improve productivity.

index.html


        
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Welcome to WinnetouJs</title>
    <link rel="stylesheet" href="./release/winnetouBundle.min.css" />
</head>

<body>
    <div id="app"></div>
    <script src="./release/winnetouBundle.min.js"></script>
</body>

</html>