MoonKiKi: web2.0 and ajax... the evolution road

Tuesday, January 27, 2009

MoonKiKi blogspot associated

Hi all,
facebook, twitter, too many place where iMoogle and other MoonKiKi can expose themselves. Now it's blogspot's turn. I wish it will be a lucky kick start for these 2009 Moonkiki's travel. Visit Moonkiki's world.

It's a month that we are online and yet we had our first Web App to manage JSON portlets is online.

iMoogle is an open source web application, created with MooTools. Inspired from iGoogle and netvibes, iMoogle is the fastest tool you can use to make your own portlet's homepage, or social group page.

A portlet manager iGoogle's inspired based on MooTools

For any doubts and question ask to: Nunzio Fiore ( or Emanuele Crescentini


First of all the
DEMO 1 :
DEMO 2 :
DEMO 3 :


Second step: DOWNLOAD IMoogle:


IMoogle is MooTools1.2 based. See the Mootools site to download the recent package. ( )


The base idea is to use iMoogle to quickly expose your contents in an home page with two kind of portlets:


On startup code reads a json like this (IMPORTANT: read the meaning of each variable to customize your iMoogle):

"cols":n,//where n is the numbers of cols the user asked for the home page
"portlets":[// an id for a list of portlet
//(we have two kind of portlet: graphic portlet and list portlet)

"id":n// an id useful to retrieve the portlet
,"col":"n"// the columns [from 1 to n ] where user wants to put the portlet
,"title":"A TITLE"//the title of the portlet
,"body": "
"//a graphic content for the portlet
"id":n// an id useful to retrieve the portlet
,"col":"n"// the columns [from 1 to n ] where user wants to put the portlet
,"title":"A TITLE"//the title of the portlet
,"list":{//a list portlet is identified by the attribute list and NOT body
base url where we wants the portlet go (with the complete list)
"limit":m,//a number limit for the little portlet display (when maximiezed, list are complete)
"els":[//the elements of the list
"id":n,//an id for the list's element
"title":"Calendar", //the title for the list's element, COMPULSORY: if omitted it won't be the possibility to expand and collapse the row
"text":"a script for calendar", //the text for the list's element
"link":"script/scriptLink.html"//link associeted


A complete JSON is at the demo url: PORTLET'S JSON

When a portlet is moved or dragged iMoogle launch a request to an url to store the new home's configuration choiced from the user. This service gives a JSON response like that:


or like that:

"msg":"Some problem is occurred...."

This is a response caused by two parameters like these:

1. serialized: col1|1|col2|2|5|4|col3|Empty|
2. user: iMoogleUser

The first parameter is a string that represent a serialization of portlet's presence and position separated by a pipe ( | ). The meaning is: colN|id1|..|idM . The id is equal to the id given in initial portlet.json. When a column is Empty, iMoogle send the keyworld Empty to the server.

The second parameter is the name that you pass when you create the IMoogle object. If you don'p pass a user, IMoogle uses a default value named IMoogleUser

To create an iMoogle instance use a minimal code like that:

A complete option's list:

1. id: An id fro the IMoogle object,
2. where: the zone where you want to put your iMoogle plugin,
3. width: base width dimension for portlets, default: 265,
4. height: base height dimension for portlets, default: 178,
5. user: the user who's using the page, default: 'iMoogleUser
6. headerText: A string in the header, default: 'A complete list of portlets',
7. waitImgSrc: a wait image, default: 'img/wait.gif'
8. portletsUrl: an url to portlets.json: default, 'data/portlet.json'
9. memoPortletsUrl: an url to service that store portlets: default, 'data/memoPanel.json'

IMoogle is developped by Nunzio Fiore ( ajax development: ), Cosmobile ( creative and internet:, NetComm ( housing, web development: )

No comments:

Post a Comment