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

Wednesday, April 29, 2009


HTML5, when it will be a reality on our browser? Yet we can not know it. What we know for sure is that the innovations that are coming on our monitors are many and are one more useful and interesting than the other. Last, but not least, this news from the site w3c draft:

4.11.2 The datagrid element

Working draft


Tests: 0

Demos: 0

Latest Internet Explorer beta: no support whatsoever

Latest Firefox trunk nightly build: no support whatsoever

Latest WebKit or Chromium trunk build: no support whatsoever

Latest Opera beta or preview build: no support whatsoever

JavaScript libraries, plugins, etc: no support whatsoever

2007-12-08 Hixie

Flow content.
Interactive content.
Sectioning root.
Contexts in which this element may be used:
Where flow content is expected.
Content model:
Either: Nothing.
Or: Flow content, but where the first element child node, if any, is not a table, select, or datalist element.
Or: A single table element.
Or: A single select element.
Or: A single datalist element.
Content attributes:
Global attributes
DOM interface:
interface HTMLDataGridElement : HTMLElement {
attribute boolean multiple;
attribute boolean disabled;
attribute DataGridListener listener;

// columns
void addColumn(in Column id, in DOMString label, in DOMString type, [Optional] in HTMLImageElement icon, [Optional] in boolean sortable, [Optional] in boolean visible);
attribute DOMString sortColumn;
attribute boolean sortAscending;
void clearColumns();

// rows
void renotify();
void setRowCount(in long childCount, in long rowCount);
void setRows(in RowList rows);
void insertRows(in RowList rows);
void deleteRows(in RowIDList rows);
void repaint(in RowID row, in DOMString column);
void clearRows();


typedef DOMString Column;
typedef sequence<Column> ColumnList;
typedef sequence Cell; // Column, [Variadic] any (exact types expected depend on the column type)
typedef sequence<Cell> CellList;
typedef sequence Row; // RowID, long, long, CellList, [Optional] boolean, [Optional] long
typedef sequence<Row> RowList;
typedef sequence RowID;
typedef sequence<RowID> RowIDList;

[Callback=FunctionOnly, NoInterfaceObject]
interface RenderingContext2DCallback {
DOMString handleEvent(in CanvasRenderingContext2D context, in unsigned long width, in unsigned long height);

The datagrid element represents an interactive representation of tree, list, or tabular data.

The data being presented is provided by script using the methods described in the following sections.

The disabled attribute is a boolean attribute used to disable the control. When the attribute is set, the user agent must disable the datagrid, preventing the user from interacting with it. The datagrid element should still continue to update itself when the underlying data changes, though, as described in the next few sections. However, conformance requirements stating that datagrid elements must react to users in particular ways do not apply when the datagrid is disabled.

The disabled DOM attribute must reflect the content attribute of the same name. Introduction

This section is non-normative.

In the datagrid data model, data is structured as a set of rows representing a tree, each row being split into a number of columns. The columns are always present in the data model, although individual columns might be hidden in the presentation.

Each row can have child rows. Child rows may be hidden or shown, by closing or opening (respectively) the parent row.

Rows are referred to by the path along the tree that one would take to reach the row, using zero-based indices. Thus, the first row of a list is row "0", the second row is row "1"; the first child row of the first row is row "0,0", the second child row of the first row is row "0,1"; the fourth child of the seventh child of the third child of the tenth row is "9,2,6,3", etc.

The chains of numbers that give a row's path, or identifier, are represented by arrays of positions, represented in IDL by the RowID interface.

The root of the tree is represented by an empty array.

Each column has a string that is used to identify it in the API, a label that is shown to users interacting with the column, a type, and optionally an icon.

The possible types are as follows:

Keyword Description
text Simple text.
editable Editable text.
checkable Text with a check box.
list A list of values that the user can switch between.
progress A progress bar.
meter A gauge.
custom A canvas onto which arbitrary content can be drawn.

Each column can be flagged as sortable, in which case the user will be able to sort the view using that column.

Columns are not necessarily visible. A column can be created invisible by default. The user can select which columns are to be shown.

When no columns have been added to the datagrid, a column with no name, whose identifier is the empty string, whose type is text, and which is not sortable, is implied. This column is removed if any explicit columns are declared.

Each cell uses the type given for its column, so all cells in a column present the same type of information. Example: a datagrid backed by a static table element

... Example: a datagrid backed by nested ol elements

... Example: a datagrid backed by a server

... Populating the datagrid
datagrid . listener [ = value ]

Return the current object that is configured as the datagrid listener, if any. Returns null if there is none.

The listener is an object provided by the script author that receives notifications when the datagrid needs row data to render itself, when the user opens and closes rows with children, when the user edits a cell, and when the user invokes a row's context menu. (The DataGridListener interface used for this purpose is described in the next section.)

Can be set, to change the current listener.

datagrid . renotify()

Causes the datagrid to resend notifications to the listener (if any) for any rows or cells that the datagrid does not yet have information for.

datagrid . addColumn(id, label, type [, icon [, sortable [, visible ] ] ] )

Adds a column to the datagrid.

If a column with the given identifier has already been added, it just replaces the information for that column.

The possible types are enumerated in the previous section.

datagrid . sortColumn [ = value ]

Returns the identifier of the column by which the data is to be sorted.

Can be set, to indicate that the sort order has changed. This will cause the datagrid to clear its position information for rows, so setRows() will have to be called again with the new sort order.

The columns are not actually sorted by the datagrid; the data has to be sorted by the script that adds the rows to the datagrid.

datagrid . sortAscending [ = value ]

Returns true if the data is to be sorted with smaller values first; otherwise, returns false, indicating that bigger values are to be put first.

Can be set, to indicate that the order is about to change.

datagrid . clearColumns()

Removes all the columns in the datagrid, reinstating the implied column.

datagrid . setRowCount(childCount, rowCount)

Sets the numbers of rows in the datagrid, excluding rows that are descendants of rows that are closed.

Throws a DATAGRID_MODEL_ERR exception if the arguments contradict each other or previously declared information (e.g. declaring that the datagrid has three rows when the 12th row has been declared).

datagrid . setRows(rows)

Updates data for rows in the datagrid, or fills in data for rows previously implied by a call to setRowCount() but not previously declared.

The rows argument is an array of rows, each represented by a further array consisting of:

  1. A RowID object identifying the row.
  2. An integer giving the position of the row in its parent, given the current sort order, or −1 to set other row data without setting a position or changing a previously declared position.
  3. An integer giving the number of children of the row, or 0 if the row has no children, or −1 if the row has children but the count is currently unknown. If the number of children has already been set to 0 or a positive integer, then passing −1 leaves the previous count unchanged.
  4. An array giving the data for zero or more cells in the row, as described below.
  5. A boolean declaring whether the row is open or not. This entry, if omitted, is assumed to be false (closed), unless the row has already been declared as open.
  6. An integer giving the number of rows that are descendants of this row, excluding those that are descendants of descendants of this row that are closed. This entry can be omitted if the row is closed or if it has already been declared.

The array giving the data for the cells in the row consists of a further set of arrays, one per cell. The first item of each of these arrays is the column's identifier; the subsequent values vary based on the type of the column, as follows:

  1. A string giving the cell's value.
  2. Optionally, an img element giving an icon for the cell.
  1. A string giving the cell's value.
  2. Optionally, a datalist element giving a set of predefined options.
  3. Optionally, an img element giving an icon for the cell.
  1. A string giving the cell's value.
  2. A boolean, indicating whether the cell is checked (true) or not (false).
  3. Optionally, a boolean indicating whether the value of the cell is obscured as indeterminate (true), or not (false).
  4. Optionally, an img element giving an icon for the cell.
  1. A string giving the cell's current value.
  2. A select element giving the list of options.
  3. Optionally, an img element giving an icon for the cell.
  1. A value in the range 0.0 (no progress) to 1.0 (task complete).
  1. A number giving the cell's value.
  2. Optionally, a number giving the maximum value, if it's not 1.
  3. Optionally, a number giving the minimum value, if it's not 0.
  4. Optionally, a number giving the highest value that is considered "low".
  5. Optionally, a number giving the lowest value that is considered "high".
  6. Optionally, a number giving the value that is considered optimal.
  1. A number giving the minimum width of the cell, in CSS pixels, that is desired.
  2. A number giving the minimum height of the cell, in CSS pixels, that is desired.
  3. A function that is passed a CanvasRenderingContext2D object, along with the width and height (in CSS pixels) of the cell that the context will draw on.

While the rows in a single call to the setRows() method can be in any order, for each row, it is important that all its ancestor rows and all its open previous siblings are also declared, either in the same call or in an earlier one.

Throws a DATAGRID_MODEL_ERR exception if the arguments contradict each other or previously declared information (e.g. saying that a row's position is 5 when the parent row only has 3 children, or naming a column that doesn't exist, or declaring a row without declaring its parent, or changing the number of children that a row has while that row and its ancestors are all open).

datagrid . insertRows(rows)

Inserts the given rows into the datagrid, increasing the numbers of rows that the datagrid assumes are present.

The rows argument is an array of rows in the same structure as the argument to the setRows() method described above, with the same expectations of consistency (a given row's ancestors and earlier open siblings being listed either earlier or in the same call as a given row). However, unlike with the setRows() method, if a row is inserted along with its child, the child is not included in the child and row counts of the parent row; every row in the rows argument will increase its parent's counts automatically.

Throws a DATAGRID_MODEL_ERR exception if the arguments contradict each other or previously declared information.

datagrid . deleteRows(rows)

Removes the given rows from the datagrid, and updates the number of rows known to be in the datagrid accordingly. The argument is an array of RowID objects identifying the rows to remove.

Throws a DATAGRID_MODEL_ERR exception if the argument includes a row the datagrid doesn't know about.

datagrid . repaint(row, column)

If the given column's type is custom, then causes the datagrid to reinvoke the function that obtains the desired rendering.

datagrid . clearRows()

Clears the datagrid of all row data, resetting it to empty.

Thursday, April 16, 2009


You know that neighbour down the street that drives an old beat up truck that spews black soot and wakes up the entire neighbourhood on Saturday mornings because his exhaust is broken? Well, if you’re still using Internet Explorer 6 (IE6) as your browser, you are that guy. But fret not my friend, unlike your annoying neighbour you can get a free upgrade right now, straight from the source, and stop living in the past.

This site is a contribution to the large and growing movement started by a conglomerate of Norwegian newspapers to finally phase out Microsoft’s ancient (in internet terms anyway) Internet Explorer 6 browser. If you find yourself reading this chances are you got here because a site you visited warned you that your browser is out of date. And if you are in fact using Internet Explorer 6, you really are living in the dark ages where web browsing is concerned.

The time has come to phase out this dinosaur of a browser. Permanently. Microsoft is about to roll out IE8 which makes Internet Explorer 6 a full two generations behind the times.

Follow the links below to upgrade Internet Explorer to the current version, read about why upgrading is so important and join the movement to phase out Internet Explorer 6 forever.


Sunday, April 12, 2009

MoonKiKi PIANO ETUDES. A web 2.0 musical fragments with links to connect them

see and download mine:
Nunzio Fiore

What is this
Inspired by the tradition of open-form musical scores, I composed each of these four piano etudes as a collection of short musical fragments with links to connect them. In performance, the pianist must use those links to jump from fragment to fragment, creating her own unique version of the composition.
The pianist, though, should not have all the fun. So I also developed this web site, where you can create your own version of each etude, download it as an audio file or a printable score, and share it with others. In concert, pianists may make up their own version of each etude, or they may select a version created by a web visitor.
Right now, you are looking at a specific version of an etude created by another web site visitor. Listen to it by using the playback controls below. Download it as an audio file or printable musical score by using the menu on the left. Or create your own version of this etude by clicking the links below. Enjoy!
-Jason Freeman

Wednesday, April 8, 2009

Balsamiq Mockups

Today I used a Mockups...

It's a funny AIR application that you can download from Adobe's web page. You can quickly draw nice GUI to share in your project. The main powerful feauture is that what you draw is digital, so you can tweak and rearrange controls easily, and the end result is much cleaner. More than words, can do use it at your own. If you wanna see what I drew, download Mockups and import the XML that you see below. You can discover the next app I'm developing for MoonKiKi.

<mockup version="1.0" skin="sketch" measuredW="1166" measuredH="710">
<control controlID="0" controlTypeID="com.balsamiq.mockups::BrowserWindow" x="99" y="77" w="-1" h="-1" measuredW="450" measuredH="400" zOrder="1" locked="false" isInGroup="-1">
<control controlID="1" controlTypeID="com.balsamiq.mockups::TabBar" x="120" y="223" w="403" h="193" measuredW="465" measuredH="100" zOrder="2" locked="false" isInGroup="-1">
<control controlID="18" controlTypeID="com.balsamiq.mockups::Arrow" x="534" y="329" w="151" h="10" measuredW="150" measuredH="100" zOrder="8" locked="false" isInGroup="-1"/>
<control controlID="19" controlTypeID="com.balsamiq.mockups::Arrow" x="534" y="77" w="169" h="221" measuredW="150" measuredH="100" zOrder="9" locked="false" isInGroup="-1">
<control controlID="4" controlTypeID="com.balsamiq.mockups::Calendar" x="718" y="43" w="146" h="124" measuredW="96" measuredH="96" zOrder="3" locked="false" isInGroup="-1"/>
<control controlID="16" controlTypeID="com.balsamiq.mockups::Calendar" x="733" y="525" w="131" h="109" measuredW="96" measuredH="96" zOrder="6" locked="false" isInGroup="-1"/>
<control controlID="17" controlTypeID="com.balsamiq.mockups::Arrow" x="534" y="351" w="169" h="221" measuredW="150" measuredH="100" zOrder="7" locked="false" isInGroup="-1"/>
<control controlID="20" controlTypeID="com.balsamiq.mockups::FieldSet" x="665" y="10" w="501" h="700" measuredW="200" measuredH="170" zOrder="0" locked="false" isInGroup="-1">
<control controlID="14" controlTypeID="__group__" x="691" y="310" w="-1" h="-1" measuredW="196" measuredH="120" zOrder="4" locked="false" isInGroup="-1">
<control controlID="10" controlTypeID="com.balsamiq.mockups::TitleWindow" x="1" y="0" w="91" h="56" measuredW="450" measuredH="400" zOrder="0" locked="false" isInGroup="14">
<control controlID="11" controlTypeID="com.balsamiq.mockups::TitleWindow" x="105" y="65" w="91" h="55" measuredW="450" measuredH="400" zOrder="1" locked="false" isInGroup="14">
<control controlID="12" controlTypeID="com.balsamiq.mockups::TitleWindow" x="0" y="64" w="91" h="56" measuredW="450" measuredH="400" zOrder="2" locked="false" isInGroup="14">
<control controlID="13" controlTypeID="com.balsamiq.mockups::TitleWindow" x="105" y="2" w="91" h="56" measuredW="450" measuredH="400" zOrder="3" locked="false" isInGroup="14">
<control controlID="15" controlTypeID="com.balsamiq.mockups::FieldSet" x="711" y="505" w="179" h="144" measuredW="200" measuredH="170" zOrder="5" locked="false" isInGroup="-1">

JSONP ... and geek's dreams come true.

A lot of company are studying how to use JSONP in their business.

In these days, also Ext.js released a powerful request object to manage JSONP services.

I think it would be useful to post some link that show how the Biggest Framework are moving on this nice way of sharing informations.

MOOTOOLS (my preferred)


The new MIT licensed Ext.js core:

JsonP is a means by which to get JSON data from another domain than the one your page is on. If you try and use Ajax to request data from a different domain than the page, you'll get a security error.

One way around this is a concept some call "JsonP". This is where you include a script tag in your document. This script tag points to an external javascript source and when the script tag loads it executes (like any other script tag).


Thursday, April 2, 2009

A GIFT KNOB ZONE FOR KNOB ON expressionz'site

Some days ago, I used knob and a script from this site expressionz.

I wanna a pubblish a snippets of my code (a moogenda customization) that I wish help others using knob.

var Slider = new Class({
Implements: [Events, Options],


options: {
id: ''

initialize: function(options){
this.slider = new Element('div',{
var slide_container = new Element('div',{
var slider_minmax_min = new Element('div',{
'class':'floatl fontblue'
var slider_gutter = new Element('div',{
var slider_minmax_gutter_l = new Element('div',{
'class':'slider_gutter_item iconsprite_controls slider_minmax_gutter_l_class'
var slider_minmax_gutter_m = new Element('div',{
'class':'slider_gutter_item gutter iconsprite_controls slider_minmax_gutter_m_class'


var slider_bkg_img = new Element('img',{

var slider_minmax_minKnobA = new Element('div',{
var slider_minmax_maxKnobA = new Element('div',{


var slider_minmax_gutter_r = new Element('div',{
'class':'slider_gutter_item iconsprite_controls slider_minmax_gutter_r_class'

var slider_minmax_max = new Element('div',{
'class':'floatl fontblue'

use it in this way:

var cnt = new Element('div');
var timer = new Slider({
'id': dayNum

var mySlideA = new Slider($(id+'slider_minmax_gutter_m'), $(id+'slider_minmax_minKnobA'),$(id+'slider_bkg_img'), {
start: 8,
end: 24,
offset: 10,
onChange: function(pos){
var min = pos.minpos;
if (min<10) min="0" max =" pos.maxpos;" max="0">

Have fun with freebies
Nunzio Fiore