A quick update

I've been working in the past few days on writing bare bones of the backend of my component, thanks to my mentor (Ray =) ) and MVC Guide I was able to do it.

For the backend I'm thinking

• 1 Controller
• 1 Model
• 3 Views
  
  • List view "The usual administration list, shows forms storerd in the database"
  • Design view "The magical WYSIWYG form editor :P"
  • Records view "Listing of stored records for any given form"

I've already committed the backend bare bones to the SVN.

Note : Ercan notified me that the backend entry point to my component shouldn't have the "admin" (unlike 1.0.x, thanks Ercan :)  )

A few words on the WYSIWYG Environment

The WSYIWYG Environment is simply composed of a workarea and a list of draggable form elements "Similar to JotForms"

Each element is loaded separately as a plugin, any plugin "element" is handled by two files:

A Javascript file

This file contains a class that inherits from a base javascript class "CElement" and overrides various method of the base class. "I'm using mootools for JS inheritance"

The WYSIWYG Environment triggers a set of events like "onDragStart, onDragEnd, onResizeStart,onResizeEnd, onUpdate,onDelete,etc.." and passes them to the concerned element , this element class is expected to handle these events.

An XML file

This file will contain meta information about the element like its name, description,storage requirements "Number and type of DB fields required per record", default width and height in the environment.

The wysiwyg environment will use the information in this XML file to automatically generate input fields and javascript code required to allow the administrator to alter properties of any element in the wysiwyg environment.

This is an example file that describes the "button" form element

<JFormPlugin type='element'>
<name>button</name>
<description></description>
<parameters>
    <param name="label" label="Label" control="textbox" default='Submit' valueType='string'></param>
    <param name="func" control="list" label="Type" default='Submit'>
        <option value='Submit'>Submit</option>
        <option value='Reset'>Reset</option>
    </param>
    <param name="ch" control="none" valueType='integer' default='15'></param>
    <param name="cw" control="none" valueType='integer' default='50'></param>
</parameters>
<storage></storage>
</JFormPlugin>

 The <param> tag defines properties of the element that can be altered in the WYSIWYG environment, here we have two properties, one is the label of the element "i.e the text written on the button" and the "Type" which has one of two values "Submit" or "Reset", it is clear that the button element doesn't have any storage requirements, Things will become more clearer when you see the code in action and play around with XML files. :)

 I'm almost done with the WYSIWYG environment , I just need to clean the code up and add a few comments here and there before I commit, that's too much for "A few words" , have a pleasent day :).