oc.WidgetInterface is a javascript class which goal is to help to create an iGoogle's like interface

There is 2 mode of visualisation:


Normal mode Extended mode

Note: the css class cell is composed of an handle (editCell) and the widget itself (contentCell).

A reference to jQuery scripts is needed in your html page:

script src="jquery-1.7.2.js"
script src="jquery-ui-1.8.18.custom.min.js"
    

Creation and initialization of an instance of the "class"

var wI = new oc.WidgetInterface(
          "tout",
          {cellColor: "#AFAEEE", columnColor : "#FFEFFF", rowColor : "#EEFFFF", marge : 6, radius : "true"}
        );
wI.initClassesEvents();
    
oc.WidgetInterface(id, listOfOptions):

List of the options (and default value) that can be change at initialization:

  marge             : 4,
  dimHiddenSelector : 20,
  dimCellSelector   : 24,
  rowColor          : "#F77000",
  columnColor       : "#8F000A",
  cellColor         : "#0002ED",
  noDragColor       : "grey",
  theRefresh        : undefined,
  onCellCollapse    : undefined,
  onSelected        : undefined,     (v1.1)
  postfix           : "",
  radius            : false          (v1.4)

Note that the program use fade colors of the 3 original colors. If you want to keep this functionality, you can't use names colors like red, green...

onCellCollapse(contentCell, collapsed) is a function called after you try to collapses or expand a widget:
onSelected(elementSelected) is a function called after a click event on a cell (widget), column or row (elementSelected is undefined if you delete the last row)

radius : for IE, radius is taken into account only if the version is 9 or upper. To avoid IE to act like a lower version, don't forget to use

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Tip: if you use the option radius:"true", the class cell has no border. If not, there is a default border of 2px. You can always overload the css class, but with the radius option at "true", don't add border but use 2 differents background color for the body and the class contentCell (like I did in this web site)

In standard mode (99%), the reading of this section is unnecessary

A part of the main css classes names used by oc.widgetInterface can also be renamed (see attached list; by default, selected = "selected" ...)

You can rename these classes if you want to use your own class names, but to do this is only necessary if you want to use an instance of oc.WidgetInterface inside another one !

In older version of this web site, this page was build like that : the first instance has 2 columns ( one for the menu and one for the content), the right column was constructed with another instance of oc.WidgetInterface

In this case, the 6 options that you have to change are: rowSelector, columnSelector, cellSelector, cell, contentCell, editCell

CSS default classes names
 selected
 rowSelector
 editRow
 columnSelector
 editColumn
 cellSelector
 cell
 editCell
 contentCell
To do that, you can

If widgetA and widgetB are 2 instances of oc.WidgetInterface and widgetB is used inside widgetA, to collapse an element of widgetB change the widgetB height, and by consequence, the height of widgetA too. There is a function theRefresh() called on the collapse event, that you have to define in this case, to force the refresh.
Example :

var widgetA = new oc.WidgetInterface("id1", { marge: 6 });
...
var widgetB = new oc.WidgetInterface("id2", { marge: 6 , postfix: "2",
                                              theRefresh: function() { widgetA.resizeAll(); }
                                            });
...

A widget is contained in a cell (cellSelector), itself contained in a column (columnSelector), itself contained in a row (rowSelector)

A click on one of these 3 kind of items adds the class selected to the selected item. Only one html item can have the selected class.

So, to generate a widget, we have to create a row, a column and then the cell that contains the widget. There are 4 public methods to build our page of widgets:

addRowColumn(                                   start, canRemove, canMove)
addRow      (                                   start, canRemove, canMove)
addColumn   (                                   start, canRemove, canMove)
addCell     (widgetId, widgetTitle, widgetHtml, start, canRemove, canMove, handleState)
    

Common parameters : (all these parameters have a default value)

About canRemove and canMove:

Other parameters:




Since version 1.1 - 1.2, there is 2 new functions
insertCellBefore(widgetId, widgetTitle, widgetHtml, cellTarget,                 canRemove, canMove, handleState)
insertCellAt    (widgetId, widgetTitle, widgetHtml, columnTarget, cellPosition, canRemove, canMove, handleState)
    
elt is important if you want dynamically build a page from a stored structure (loaded from a cookie by example).

All the structure (rows, columns and cell/widget positions) can be saved in a json format, returned by the save() function

var json = wI.save();
However, the widget itself is not stored in the json, but the attribute elt does. So if each widget that you can create is associated to an unique elt (an id !), you will be able to rebuild your page!
The best way to rebuild the page is to use the load() function
wI.load(json, getTitle, getHtmlCode);

When you call initClassesEvents(), oc.WidgetInterface initialize all the events and the css classes needed for the proper functioning of the JavaScript class.

There is 2 css styles generated dynamically on the head of the document, before all the other styles which can exist

  • A set of styles not editable
  • A set of styles editable

Keep in mind that all the dimension etc... are calculated by the javascript class so you cannot modified the width, marge, spacing... of the classes which are created by oc.WidgetInterface

However, some attributes like colors can be updated. They are created in the section style oc='editable'.

Firebug screenshot:
editable

You can read these definitions using for example firebug (screenshot), but you can also (v1.3) use the two functions bellow during the debuging of your page:

  widgetI.getCssNotEditable();
  widgetI.getCssEditable();

This is what I did in the 2 buttons upper (try them!)

Note that 90% of the css classes are based on six options, that you can change at the call of the constructor:

There are 6 other colors that are calculated as gradiant of the 3 firsts configurable colors: they are used when a cell, column or row (classes: cellSelector, columnSelector and rowSelector) has also the class dragOverDrop or selected

Here is a screen shot of a personalization example (in my example, "tout" is the id of the div where oc.WidgetInterface works)

personalization
In advanced mode, you can directly write the widths like "100px" or "50%".

To confirm the sizes, you have to click in the apply button apply, just under the remove button of the line

advanced mode

TIPS: If you have 2 columns, by default the sizes are 50% and 50%. If you enter the values 70% and 50% and if you choose to apply them, the second column will disapear. Don't panic ! Just add a new column : the sizes will be recalculated, and the column will reappear (try to do it on the example)

Remember that you can merge % et px widths !! The percents sizes are calculated from the total size less the fixed sizes. (see defineWidthColumns)