×
Namespaces

Variants
Actions

How to use the Rico JavaScript library in a S60 WRT widget

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: Maveric (29 Oct 2010)
Last edited: hamishwillee (26 Jul 2012)

Contents

Introduction

Rico is an object oriented JavaScript library designed for developing AJAX based applications, Rich Internet Applications (RIAs). It is based on the Prototype framework. In Rico, there are components like grids, calendar and tree controls plus support for drag & drop, even cinematic effects. For AJAX operations Rico uses the standard XmlHttpRequest. Also an accordion component is available. A component called "LiveGrid" can connect HTML tables to AJAX responses so tables can display an unlimited amount of data, scrolling in a view, basically on-the-fly.

About licensing, the Rico JS library is provided as Open Source for both commercial and personal use.

Rico is the both free you can use open Source both for use commercial and personal use. Rico use is make XmlHttpRequest and provided the simple interface building drag and drop feature .Rico it is also provides behaviors such as an accordion component and "LiveGrid". The Rico LiveGrid connects HTML tables to AJAX responses so tables can display an unlimited amount of data scrolled into view on the fly, as needed.

Prerequisites

  • Rico Javascript library, you can obtain it from here:

http://openrico.org/rico/home.page

  • Prototype Javascript library, you can obtain it from here:

http://www.prototype.org/

Example code

The example widget demonstrates first the drag & drop functionality. For the widget, default S60 WRT files are being used. You may separate the simple CSS clause in the html into basic.css if you like.

index.html - code for WRT default HTML file

<html>
<head>
<script src="js/prototype.js"></script>
<script src="js/rico.js"></script>
<div style="padding:3px;border:1px solid #66FF00;height:30px">
<div class="box" style="background:#00CCFF" id="testdragging">Drag Me</div>
</div>
<br/>
<table style="margin-bottom:5px" cellspacing="5" cellpadding="5">
<tr>
<td>
<div id="droponthis1" class="simpleDropPanel" style="background:#00FFFF">
<div class="title">1st Drop</div>
</div>
</td>
<td>
<span></span>
<div id="droponthis2" class="simpleDropPanel" style="background:#99FFCC" >
<div class="title">2nd Drop</div>
</div>
</td>
</tr>
</table>

basic.js - code for WRT default JavaScript file

function init(){
 
dndMgr.registerDraggable( new Rico.Draggable('test-rico-dnd','testdragging') );
dndMgr.registerDropZone( new Rico.Dropzone('droponthis1') );
dndMgr.registerDropZone( new Rico.Dropzone('droponthis2') );
Rico.Corner.round('explanation');
dndMgr.registerDraggable( new Rico.Draggable('test-rico-dnd','testdragging') );
dndMgr.registerDropZone( new Rico.Dropzone('droponthis1') );
dndMgr.registerDropZone( new Rico.Dropzone('droponthis2') );
 
}

Example output

Media:rico wrt demo.jpg

This page was last modified on 26 July 2012, at 01:53.
32 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×