RIALTOMy First Rialto Page with Taglib
This tutorial will help you to build a simple jsp page using the Rialto taglib For the exemple we will put a label, a text and a button in a page.
Require
If not, install a j2EE application server like tomcat Create a root directory in the webapps folder of the server Unzip the rialtoTagLib.zip file in the WEB-INF folder of your root directory. Unzip the Rialto javascript API file in the root directory. Begining First you'll need to have a skeleton of page that include the HTML tag
<html> <head> <title>My page</title> </head> <body> <div style="left:100px;height:80px;top:40px;position:absolute;width:300px;border:1px solid rgb(120,172,255);" id="divConteiner"/> </body> </html>
Add a reference to the TLD You must refer to the rialto.tld to use the taglib in your page
<%@taglib uri="taglib/src/main/resources/META-INF/tlds/rialto.tld" prefix="rialto"%> <html> <head> <title>My page</title> </head> <body> <div style="left:100px;height:80px;top:40px;position:absolute;width:300px;border:1px solid rgb(120,172,255);" id="divConteiner"/> </body> </html>
Use the differents tags Now we are going to use the tag. The first one you'll need to add is the import tag. It will refere all the javascript and css files that compose the Rialto API. With the 0.24 release of the taglib , don't forget to mention in the pathRialtoEngine attribute the path file containing rialtoEngine
<rialto:import pathRialtoEngine="/rialtoEngine"/><%@taglib uri="taglib/src/main/resources/META-INF/tlds/rialto.tld" prefix="rialto"%> <html> <head> <title>My page</title> </head> <rialto:import/> <body> <div style="left:100px;height:80px;top:40px;position:absolute;width:300px;border:1px solid rgb(120,172,255);" id="divConteiner"/> </body> </html>
Then we will use a layout tag that is going to encapsulate our components We have to set 3 attributes
- the name of the layout (myLayout). The name would become the name of the javascript object representing the layout. So myLayout() is the constructor of the object.
- the refParentHTML of the layout that indicate the HTML element of the page in which we want to put our components
<%@taglib uri="taglib/src/main/resources/META-INF/tlds/rialto.tld" prefix="rialto"%> <html> <head> <title>My page</title> </head> <rialto:import/> <rialto:layout name="myLayout" refParentHTML="document.getElementById('divConteiner')"> </rialto:layout> <body> <div style="left:100px;height:80px;top:40px;position:absolute;width:300px;border:1px solid rgb(120,172,255);" id="divConteiner"/> </body> </html>
After we add 3 elements using there tag
- a label
- a text
- a button
<%@taglib uri="taglib/src/main/resources/META-INF/tlds/rialto.tld" prefix="rialto"%> <html> <head> <title>My page</title> </head> <rialto:import/> <rialto:layout name="myLayout" refParentHTML="document.getElementById('divConteiner')"> <rialto:label name="lib" top="10" left="10" text="login" className="libelleCopy"/> <rialto:text top="10" left="80"/> <rialto:button name="BRECH" top="30" left="200" title="Enter"/> </rialto:layout> <body> <div style="left:100px;height:80px;top:40px;position:absolute;width:300px;border:1px solid rgb(120,172,255);" id="divConteiner"/> </body> </html>
Add javascript code The name indicate in the tag is the same that the javascript variable. This is why you have to be carreful to the name you give to your tags. So we can now add javascript code on the component. For exemple we can change the location of the page after a clic on our button. We nee
<%@taglib uri="taglib/src/main/resources/META-INF/tlds/rialto.tld" prefix="rialto"%> <html> <head> <title>My page</title> </head> <rialto:import/> <rialto:layout name="myLayout" refParentHTML="document.getElementById('divConteiner')"> <rialto:label name="lib" top="10" left="10" text="login" className="libelleCopy"/> <rialto:text top="10" left="80"/> <rialto:button name="BRECH" top="30" left="200" title="Enter"/> BRECH.onclick=function(){ window.location="http://rialto.application-servers.com/" } </rialto:layout> <body> <div style="left:100px;height:80px;top:40px;position:absolute;width:300px;border:1px solid rgb(120,172,255);" id="divConteiner"/> </body> </html>
The javascript code can be add directly in the layout tag or between two <SCRIPT> tag in the page. Just pay attention to the range of the variables. Instanciate our javascript components To instanciate The layout you can use the javascript function loadLayout. You have to pass the name of the layout in parameter. The fonction return a variable of the create instance. We can do it using the onload method of the body.
<%@taglib uri="taglib/src/main/resources/META-INF/tlds/rialto.tld" prefix="rialto"%> <html> <head> <title>My page</title> </head> <rialto:import/> <rialto:layout name="myLayout" refParentHTML="document.getElementById('divConteiner')"> <rialto:label name="lib" top="10" left="10" text="login" className="libelleCopy"/> <rialto:text top="10" left="80"/> <rialto:button name="BRECH" top="30" left="200" title="Enter"/> BRECH.onclick=function(){ window.location="http://rialto.application-servers.com/" } </rialto:layout> <script> function init(){ var lay=loadLayout("myLayout"); } </script> > <body onload='init();'> <div style="left:100px;height:80px;top:40px;position:absolute;width:300px;border:1px solid rgb(120,172,255);" id="divConteiner"/> </body> </html>
