RIALTOMy First Rialto Page with The javascript API
This tutorial will help you to build a simple HTML page using the Rialto Javascript API. For the exemple we will put a label, a text and a button in a page.
Require
Refer to the get start tutorial
Step 1
First you'll need to have a skeleton of page that include the HTML tag
<html> <head> <title>My page</title> </head> <body> <div id="divConteiner" style="left:100px;height:80px;top:40px;position:absolute;width:300px;border:1px solid rgb(120,172,255);"/> </body> </html>
Step 2
You must refere the javascript and css files that compose the Rialto API.
<html> <head> <title>My page</title> </head> <link rel="stylesheet" type="text/css" href="rialtoEngine/style/rialto.css"/> <link id="standard_behaviour" rel="stylesheet" type="text/css" href="rialtoEngine/style/behavior.css"/> <link id="defaultSkin" rel="stylesheet" type="text/css" href="rialtoEngine/style/defaultSkin.css"/> <script type="text/javascript" src="rialtoEngine/config.js"></script> <script type="text/javascript" src="rialtoEngine/javascript/rialto.js"></script> <body> <div id="divConteiner" style="left:100px;height:80px;top:40px;position:absolute;width:300px;border:1px solid rgb(120,172,255);"/> </body> </html>
Be sure to set the right path for the rialto.js,config.js and rialto.css files.
Step 3
Now we create a javascript function that will add the widget in the document
This function
- define the HTMLparent of the component (document.getElementById('divConteiner'))
- instanciate the object (a label, a text, a button)
- add specific code (onclick off the button)
<html> <head> <title>My page</title> </head> <link rel="stylesheet" type="text/css" href="rialtoEngine/style/rialto.css"/> <link id="standard_behaviour" rel="stylesheet" type="text/css" href="rialtoEngine/style/behavior.css"/> <link id="defaultSkin" rel="stylesheet" type="text/css" href="rialtoEngine/style/defaultSkin.css"/> <script type="text/javascript" src="rialtoEngine/config.js"></script> <script type="text/javascript" src="rialtoEngine/javascript/rialto.js"></script> <script> function createMyLayout(){ var oParent=document.getElementById('divConteiner') lib = new rialto.widget.Label('lib',10,10,oParent,"login",'libelleCopy'); TEXT = new rialto.widget.Text('TEXT',10,80,200,'A',oParent,{autoUp:true,isRequired:false,disabled:false}); BRECH = new rialto.widget.Button(50,100,"Enter","Push to valid",oParent); BRECH.onclick=function(){ alert('button click'); } } </script> <body> <div id="divConteiner" style="left:100px;height:80px;top:40px;position:absolute;width:300px;border:1px solid rgb(120,172,255);"/> </body> </html>
Step 4
To instanciate the layout you have to call the javascript function createMyLayout. You can define the rialto.onload method that is called once all has been load.
<html> <head> <title>My page</title> </head> <link rel="stylesheet" type="text/css" href="rialtoEngine/style/rialto.css"/> <link id="standard_behaviour" rel="stylesheet" type="text/css" href="rialtoEngine/style/behavior.css"/> <link id="defaultSkin" rel="stylesheet" type="text/css" href="rialtoEngine/style/defaultSkin.css"/> <script type="text/javascript" src="rialtoEngine/config.js"></script> <script type="text/javascript" src="rialtoEngine/javascript/rialto.js"></script> <script> function createMyLayout(){ var oParent=document.getElementById('divConteiner') lib = new rialto.widget.Label('lib',10,10,oParent,"login",'libelleCopy'); TEXT = new rialto.widget.Text('TEXT',10,80,200,'A',oParent,{autoUp:true,isRequired:false,disabled:false}); BRECH = new rialto.widget.Button(50,100,"Enter","Push to valid",oParent); BRECH.onclick=function(){ alert('button click'); } } rialto.onload=createMyLayout; </script> <body> <div id="divConteiner" style="left:100px;height:80px;top:40px;position:absolute;width:300px;border:1px solid rgb(120,172,255);"/> </body> </html>
