r1289 - xwiki-sandbox/formeditor

[Nebojsa Miletic]

Author: mileticn
Date: 2006-09-06 20:36:49 +0200 (Wed, 06 Sep 2006)
New Revision: 1289

Added:
   xwiki-sandbox/formeditor/FunctionsDecriptions.txt
   xwiki-sandbox/formeditor/HowTo.txt
Log:
Documentation files added.

Added: xwiki-sandbox/formeditor/FunctionsDecriptions.txt
===================================================================
--- xwiki-sandbox/formeditor/FunctionsDecriptions.txt	2006-09-06 16:08:14 UTC (rev 1288)
+++ xwiki-sandbox/formeditor/FunctionsDecriptions.txt	2006-09-06 18:36:49 UTC (rev 1289)
@@ -0,0 +1,163 @@
+
+FUNCTIONS DESCRIPTIONS
+
+init(availableFields, xWikiClassName, oldForm, inputDescriptor)
+
+- Sets global variables
+- Creates box with class fields
+- Creates box with new fields
+- Sets draggables and droppables
+
+- availableFields: array of the class fields descriptors (generated by velocity)
+- xWikiClassName: string containing the class name (generated by velocity)
+- oldForm: div element with the content of the existing sheet (generated by velocity)
+- inputDescriptor: JavaScript object containing various charasterics of the sheet (version)
+
+createTable(colsCount, rowsCount)
+
+- Creates div element which contains fieldset with a table (simulated with divs for drag and drop) for the fields
+- Sets default values for the presentation text and fieldset title
+- Sets default width and height for the table cells (divs)
+- Sets table cells as droppables
+
+colsCount, rowsCount: integers input by the user (validated at the beginning)
+
+onFieldDrop(droppedElement, cell)
+
+- Checks if the cell is occupied. If true, move to the right until free cell found. If false, empty the cell
+- If droppedElement is class field, create its copy, place the copy in the table, delete the field from the class fields box (respect if the field is prettyName)
+- If droppedElement is new field, create appropriate field, place it in the table, create prettyName field and put in the class field box
+
+generateFormPreview()
+
+- Based on the content of the divForm (the edited form container), creates table (not simulated with divs), fill it with appropriate elements returned by generateField(model)
+
+generateField(model)
+
+- Based on the field model (field description) generates html form element and sets its properties
+
+- model: JavaScript object attached to the field in init() (generated by velocity)
+
+generateVelocity()
+
+- Based on the content of the divForm, creates HTML and Velocity code which will be content of the sheet when saved.
+- Sets initial values at the beggining
+- div 'formVariables' should always be hidden and contains data important for the FormEditor
+
+putFieldinFieldsBox(field)
+
+- Places field in the class fields box once it is deleted from the form
+
+generateFormModel()
+
+- not used
+
+loadForm()
+
+- Based on the oldForm argument of the init() function, recreates the state of the FormEditor as of the last editing session
+- Checks if the form was editied outside of the FormEditor (by the version number). If true,  the existing sheet will be deleted once the form is saved. If false, recreate.
+
+
+
+
+*******************
+
+selectGivenCell(cell)
+
+- Marks visually the selected cell
+- Unmarks previously selected cell
+- Calls updateEditingFields and updateFieldSettings to update appropriate boxes
+
+- cell: table cell (div) from the divForm table
+
+updateFieldSettings()
+
+- Updates the edit box
+
+updateEditingFields
+
+- Updates the field settings box
+
+emptyCell(cell)
+
+- Deletes the field from the cell
+- Calls putFieldInFieldsBox() to put the field back
+- Updates appropriate boxes
+
+- cell: table cell (div) from the divForm table
+
+addSeperatorForGivenCell(cell)
+
+- Adds <hr> below the selected cell
+- Sets <hr>'s width to fit the table's width
+- Updates appropriate boxes
+
+- cell: table cell (div) from the divForm table
+
+removeSeparator()
+
+- Removes <hr> which is below the selected cell
+- Updates appropriate boxes
+
+spanGivenCell(cell)
+
+- Removes the cell to the left of the input cell
+- Sets the cell's width to fit the empty space
+
+- cell: table cell (div) from the divForm table
+
+splitCell()
+
+- Creates new table cell (div) with width as it is not spanned
+- Puts the new cell after the selected cell
+- Sets the width of the selected (splitted) cell to be less for single cell's width
+- Updates appropriate boxes
+
+deleteGroup()
+
+- Deletes the entire divGroup which contains the selected cell
+
+addRow()
+
+- Adds row below the row which contains the selected cell
+- Creates table cells (divs) which are appended to the new row
+
+addColumn()
+
+- Adds column to the right of the column which contains the selected cell
+- Sets the table width to comfort all columns
+- Creates table cells(divs) which are inserted in each row on appropriate position
+
+selectCell()
+addSeparator()
+spanCell()
+
+- call appropriate functions and pass the selected cell as argument
+- return if no cell is selected
+
+
+*******************
+
+Getters and setters
+- get and set object values (descriptive function names)
+
+*******************
+
+displayParams()
+
+- not used
+
+viewMode()
+
+- hides the preview table and velocity code
+- displays the editing table
+
+switchFieldSource()
+
+- switches the fields box content (new fields or class fields)
+
+mouseOverEditBoxField()
+mouseOutEditBoxField()
+
+- simulate hover effect for the clickable text in the edit box
+

Added: xwiki-sandbox/formeditor/HowTo.txt
===================================================================
--- xwiki-sandbox/formeditor/HowTo.txt	2006-09-06 16:08:14 UTC (rev 1288)
+++ xwiki-sandbox/formeditor/HowTo.txt	2006-09-06 18:36:49 UTC (rev 1289)
@@ -0,0 +1,35 @@
+********************
+
+How to use the files found in the formEditor folder from the XWiki SVN?
+
+The FormEditor page must contain the code form the formEditor.vm.
+
+This is the first version and is not integrated in the XWiki engine. All the files from this directory (including png graphics) must be attached to the FormEditor page (formeditor.vm).
+
+builder.js, controls.js, dragdrop.js, effects.js, prototype.js, scriptaculous.js and slider.js are part of the Script.aculo.us JavaScript framework.
+
+
+********************
+
+How to make new field?
+
+Make approproate png graphics. Its name must be the same as the field type. E.g. if the field type is Boolean, the picture must be names "Boolean.png"
+
+In the init() function, find the next rows:
+
+	var arrNewFields = [{type: 'String'},
+						{type: 'Number'},
+						{type: 'Password'},
+						{type: 'Date'},
+						{type: 'Boolean'},
+						{type: 'StaticList'},
+						{type: 'DBList'},
+						{type: 'TextArea'}
+						]
+Add the new field type in this array.
+
+In the generateField() function, new form element must be created for the new field. Do that by adding appropriate 'case' block in the switch statement. 
+
+
+********************
+