AJAX框架:Rialto的使用

xiaoxiao2021-03-01  16

      Rialto是一个跨浏览器的Javascript界面组件包。它支持纯javascript开发和JSP/taglib开发。Rialto可集成到JSF、.Net、PHP、Python开发中。       Rialto的目的是使得富客户端应用程序(而不是简单的网站)更易于开发。       Rialto包含的组件有:forms, drag & drop, tree,data list 等等。

 

      正因为Rialto是一个富客户端应用程序,所以之前在做一个项目的时候就考虑到用它来设计页面,后来发现它的组件像VB一样可以自由的拖动,可以自己随意的设计页面的布局,而且页面的样式设计的也都不错。于是在这个项目中前台页面大量的使用了这个框架。下面我就简单的说明一下这个框架的使用:

 

      首先到其官网 上去下载rialtostudio,现在版本好像是1.0的,同时可以去查看它的一些Demo和下载相关的文档。

        

 

     下载好rialtostudio后,打开这个文件夹,可以看到里面有很多文件

                  然后点击index.html页面,就进入到了Rialto的设计界面,在这里可以看到有3个页签(Design、Tree、Source),其中Design是设计页签,这个上面有很多Rialto的组件,这些组件是可以随意拖动的,在组件下面是组件的相关属性,当你点击上面的任意一个组件时,就会在下面显示这个组件的对应的属性。如下图所示:

    

      这时,就可以操作Rialto的相关组件了,鼠标点击某个属性按住不放,然后拖到右侧的空白处即可,然后下面就是对拖动过来的组件进行布局,同时可以对组件的属性进行设置,比如:text的长度,高度等等。如下图所示:   

      当所有的组件布局都设计好以后,就可以点击Source页签,获取该页面设计的code,其中code的类型分XML和JavaScript两种类型。具体如下图所示:              其中XML代码就如上所示,而JavaScript的代码就如下所示:

var frame1=new rialto.widget.Frame({left:421,open:true,position:"absolute",title:"Frame",draggable:true,width:279,top:31,name:"frame1",dynamic:true,height:156,parent:document.body}); var xm=new rialto.widget.Label("xm",24,50,frame1,"姓名:","",{left:50,position:"absolute",text:"姓名:",top:24,name:"xm",parent:frame1}); var button4=new rialto.widget.Button(68,82,"提交","this is a button",frame1,{left:82,alt:"this is a button",title:"提交",position:"absolute",top:68,name:"button4",adaptToText:true,parent:frame1}); var text2=new rialto.widget.Text("text2",19,87,150,"A",frame1,{left:87,rows:0,datatype:"A",autoUp:true,disable:false,width:150,top:19,name:"text2",nbChar:0,isRequired:true,parent:frame1});

      其中frame1就是上图中的Frame,xm就是“姓名”的lable,button4就是“提交”按钮,text2就是上图中的输入框。

 

      下面就以JavaScript的代码举例说明

      然后将其JavaScript代码拷贝到你的页面中就可以了,跟平时的JS代码一样使用,同时需要引入一些相关的js,有config.js、rialto.js、rialtoDDComposer.js。完成了以后,就可以用浏览器浏览页面,如下图所示:     

 

      下面在贴出其他的一些组件组成的界面(更多的请看它的Demo ):

       页签:

      

 

       列表:

      

 

       组合:

      

 

 

 

转载请注明原文地址: https://www.6miu.com/read-3849999.html

最新回复(0)