History

My 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.

Requirements¶

Refer to the Getting started 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>