Rico’s capabilities aren’t limited to aiding the development of Ajax applications. Let’s now look at some other capabilities you can add to your user interfaces using the Rico toolkit. Although these techniques do not themselves use Ajax, it takes little imagination to realize what they might achieve when combined with Rico’s Ajax tools.
Drag-and-drop using Rico, however, is simple.
Including the rico.js file in your application automatically causes the creation of an object called dndMgr, Rico’s Drag and Drop Manager. Using the dndMgr object is much like using AjaxEngine; this time, though, we need to register not Ajax requests and responses, but draggable items and drop zones (page elements that can receive dragged items).
These tasks are carried out via the registerDraggable and registerDropZone methods:
These two simple commands declare, respectively, a page element with ID dragElementID as being draggable, and another element with ID dropElementID as a drop zone.The argument ‘test’ of the registerDraggable() method defines a type for the draggable item, which can be tested and used by subsequent code, if required.
Example of a Drag-and-Drop Interface
Listing shows how simple it is to implement drag-and-drop usingRico. The displayed HTML page is shown in Figure.
Simple Drag-and-Drop Using Rico
The simple drag-and-drop application
Note that two page elements in particular, a <div> container and a <textarea> input field, have been given IDs of dropzone1 and dropzone2. Further down the listing, these two elements are defined as drop zones for our drag-and-drop operations by the lines
You’ll see too that three small <div> containers have been defined in the page and given IDs of draggable1, draggable2, and draggable3. As you have no doubt guessed, they are to become draggable page elements and are defined as such by the following code lines:
That’s all there is to it! Rico takes care of all the details, even changing the look of the available drop zones while something is being dragged, as shown in Figure.
Drop zones highlighted during drag operation
When released above an available drop zone, draggable items position themselves inline with the HTML code of the drop zone element, as can be seen in Figure.
After completing the drag-and -drop
In addition to Ajax and drag-and-drop tools, Rico also makes available a host of user interface gadgets known collectively as cinematic effects.
NOTE: Rico’s cinematic effects are extensions to the Effect class found in prototype.js.
These effects include animation of page elements (changing their sizes and/or shapes), fading effects (altering the opacity of page elements), applying rounded corners to objects, and manipulating object colors.
Used alongside the interface techniques previously discussed, these effects can help you to build sophisticated, eye-catching, and userfriendly interfaces much more reminiscent of desktop applications than of web pages.
AJAX Related Interview Questions
|XML Interview Questions||HTML Interview Questions|
|Java Script Interview Questions||Android Interview Questions|
|CSS Interview Questions||Web Developer Guide Interview Questions|
|XSLT Interview Questions||Java XML Interview Questions|
|XML DOM Interview Questions|
All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.