Popular JavaScript Framework Libraries: Dojo, Rialto and Spry / Page 2

Popular JavaScript Framework Libraries: Dojo, Rialto and Spry [con't]

Rialto

• URL: https://rialto.application-servers.com/wiki/
• Docs: https://rialto.improve-technologies.com/js/javascriptDocV1/summary.html
• Demos: https://rialto.improve-technologies.com/rialtoDemo/demo2/demoRialto.html

Rialto is an open source Framework geared towards corporate Web applications as opposed to Internet Web sites. The reasons for using it are the same as those guiding your decision to use any JavaScript Framework: "to ease the access to rich Internet application development."¹ The name is an acronym for Rich Internet Application Toolkit. As you would expect, the library provides everything you need to produce rich Internet apps, including user interface widgets, drag and drop capabilities and Ajax communication. Recently, support for the Google Web Toolkit was introduced. Unlike some Frameworks we've looked at, such as MochiKit, which is very PHP-centric, Rialto is technology agnostic, meaning it can be used in conjunction with any sever-side technology. It can be encapsulated in JSP, JSF, .Net, Python or PHP graphic components. A couple of pluses to further recommend the Rialto Framework is the community-based support and a great visual user interface builder called Rialto Studio.

Rialto is similar to the YUI Framework in that it also uses a namespace to identify all its classes. The core Rialto project is comprised of four modules:

• Widgets: rialto.widget
• Behaviors: rialto.widgetBehavior
• Remoting: rialto.io
• Utils: rialto.lang, rialto.array, rialto.date, rialto.string, rialto.url, rialto.session, rialto.utils.Formatter

Widgets and More Widgets

Rialto has all the widgets you'd come to expect in a high quality Framework. The default visual style is already quite nice, and you can change the look of any controls using skins. There are three ways to set a skin:

1. At runtime, using the setStyle() function.
2. By setting the classname property as a constructor parameter.
3. Globally, by calling the rialto.skin.setSkin() method.

//change skin at runtime oGrid.setStyle(0,-1,{color:'red',fontWeight:'bold'}); //custom skin var oGrid2 = new rialto.widget.Grid({top:40,left:5,height:110, //... classname:"customStyle", //... writable:true}); //Global skin rialto.skin.setSkin("defaultSkin");

Here's some JavaScript that sets the page's onload event to an anonymous function. In the function, three widgets are created and appended to the divContainer element, and an anonymous function is assigned the button's onclick event handler:

rialto.onload = function() { var oParent = document.getElementById('divContainer'); var lib = new rialto.widget.Label('lib',10,10,oParent,"login",'lblCopy'); var text = new rialto.widget.Text('TEXT',10,80,200,'A',oParent,{autoUp:true,isRequired:false,disabled:false}); var btn = new rialto.widget.Button(50,100,"Enter","Push Me",oParent); btn.onclick=function() { alert('button clicked'); } }

Behaviors

These apply to widgets and are housed in the rialto.widgetBehavior class. Typical behaviors that one would apply to a control include drag and drop and resizing. To add drag and drop capability to an element, you need to call the static affect() class method. It accepts three parameters:

1. objectToMove: the HTML or JavaScript object on which we want to affect the behavior
2. behavior: a string that denotes the kind of behavior ('DragAndDrop',''Missile','Target','ReSize')
3. setup: a JavaScript object that includes setup parameters for the behavior

You may also have an event fired when a drag and drop occurs by setting the rialto.widgetBehavior.DragAndDrop_attachEventToDocument property to true.

Here's a code example that creates a new <DIV> element, adds it to a form, sets the drag & drop parameters and then applies the drag and drop capability to the element as described above:

//Create drag & drop element this.simpleWindow.dragDiv = document.createElement('DIV'); frmTest.add(this.simpleWindow.dragDiv); //Get Drag and drop parameters var objParam={}; //limits objParam.movingLimits={}; objParam.bRectLim=true; objParam.movingLimits.rectLim ={top:50,left:50,right:250,bottom:250}; //orientation objParam.movingLimits.orientation='2D'; objParam.movingLimits.orientation='h'; objParam.movingLimits.orientation='v'; //magnetic grid objParam.magneticsGrid ={widthCol : 30, heightRow : 30}; //Information display objParam.isWithLimitsDisplayed=true; objParam.isWithMovingInfo =true; objParam.bSelectMark = true; objParam.movingLimits.bCircular=false; rialto.widgetBehavior.DragAndDrop_attachEventToDocument = true; rialto.widgetBehavior.affect(this.simpleWindow.dragDiv,'DragAndDrop',objParam);

Making an element resizable is similar to adding drag and drop functionality because resizing consists of dragging an element's borders, rather than the element itself. You can set limits to how much an object can be expanded, whether or not it should be resizable horizontally and/or vertically, and how sensitive the grabbing is on the border. The latter is done by setting the parameter object's sensitiveEdgeWidth property to the number of pixels. Here's an example:

//Create element to resize this.simpleWindow.resizeDiv=document.createElement('DIV'); frmTest.add(oThis.simpleWindow.resizeDiv); //Get Drag and drop parameters var objParam={}; //limits objParam.bRectLim=false; objParam.majDyn=false; objParam.limitReDim={heightMin:0,widthMin:0} objParam.bRectLim=true; objParam.limitReDim={heightMin:10,widthMin:10,heightMax:200,widthMax:200} //sensitivity objParam.sensitiveEdgeWidth = 2; rialto.widgetBehavior.affect(oThis.simpleWindow.resizeDiv,'ReSize',objParam);

The AjaxRequest Component

The rialto.io.ajaxRequest class contains all the server call functionality. It's a basic implementation, compared to some other Frameworks, but they probably didn't go overboard on it since the GWT project is geared specifically towards Ajax applications. Performing an Ajax call is a two step process. First you need to initialize the object by calling its constructor. It accepts one parameter, which is a JavaScript object. Parameters are set via its member properties. The second step is to make the server call, using the load() method. It accepts an optional query string in its raw format ( i.e.: remote.load("param1=value1&param2=value2"); ). The following example demonstrates the use of AjaxRequest object to do a GET call:

var ajaxReq=new rialto.io.AjaxRequest( { url:"/webComponent.pl?name=Rob", method: 'get', withWaitWindow: true, onSuccess: displayData, onFailure: handleError }); ajaxReq.load("");

Notice in the above example that the url parameter contains the query string, so we don't have to supply it to the load() function. The withWaitWindow property is a boolean indicating whether or not to display a component while waiting for the call to complete. Any type of object is permissible, as long as it implements the setVisible(boolean) method and a onclick() event function to cancel the call. There's a setWaitWindow(object) method to assign the component. The onSuccess and onFailure handlers, which are functions in this case, can be replaced by callBackObjectOnSuccess and callBackObjectOnFailure instead, but these objects must implement the functions.

---

• 1: Rialto home page: https://rialto.application-servers.com/wiki/

Find a programming school near you

Zip Code:

Subject: - Select All Subjects - Computer Applications Computer Engineering Computer Science Computer Prog. - Software Dev. Computer Game Programming Web Design Web Development Internet Systems Internet Certification Database Design and Development Information Systems Management Information Technology Project Management Network Design - Development Systems Analyst

Degree: - Select All Degrees - Associate's Bachelor's Master's Doctoral Certificates Diplomas Coursework MBA

Online Campus Both