plainblack.com
Username Password
search
Bookmark and Share

    

Suggested implementation of new type of columns in DataTable: textarea and HTMLarea

User ampli
Date 7/1/2011 7:40 pm
Views 500
Rating 0    Rate [
|
]
Previous · Next
User Message
ampli

Hello everyone,

I implemented two new types of columns in the DataTable asset.

  1. textarea.  It is based on the existing textarea field support in YUI, with mainly two additions: <enter> doesn't terminate the editing - this enables entering newlines; the display is done using <div> instead of the default <textarea>.  Using <div> is nicer and also allows to display HTML (in any case it should not be non-readonly <textarea> as is the default).
  2. HTMLarea.  It uses the TinyMCE editor of WebGUI. You will note that there is an empty line before the first line in the cell. This is due to the initial <p> that TinyMCE generates, and if desired, can be eliminated with a style in TinyMCE (or a WebGUI template).
     
In the same occasion I fixed a small bug in the popup help window.  Depending on the browser's window size, its top right corner with the X could be covered by the Approved label,  and if this happens it is not possible to click the X without moving the popop. The problem happens because the z-index of the label is 9001 while the z-index of the help popup is 1000. Solved by increasing it to 10000...


You can play with it by pulling it from my git repository ampli/webgui.git, at github.org, master branch, commit d923aa0390.

Additional ideas to improve it further:
 
  1. Add a setup for a Rich Editor Asset.
  2. Add support for additional YUI column types.
  3. Add a more sophisticated template (which supports, for example, clickable URL fields).
  4. Move the cell style out of the JS code.
  5. i18n of the added field names.
  6. Support for more features of YU's DataTable.
  7. Tuanble user interface features.
     
Amir

Back to Top
Rate [
|
]
 
 
ampli

I found that on IE  it corrupts the table (at least with IE9). I will fix that.

On FF and Chrome it seems to work fine.

Amir



Back to Top
Rate [
|
]
 
 
preaction

Looks great so far! Just let us know when we should pull in a set of changes.



Back to Top
Rate [
|
]
 
 
ampli

The mentioned problem in IE9 (corrupts the table on save) still exists.  I tried to debug it and found these things:

  1. It happens only in WebGUI 8, in 7 it is fine.
  2. The submit event doesn't invoke submitToForm(), and hence is saves a null elem.value.
  3. YAHOO.util.Event.addListener(form, "submit",...) returns true, and according to getListener this listener really gets installed.
  4. IE9 has more problems in WebGUI 8 (I didn't check it much in 7).
     
For a reason that I didn't find, in Chrome a total of 4 event listeners on the form are installed, all of them on submit, and in IE9 7 event listeners on the form are installed, the additional 3 are 2 on reset and 1 on keypress.
  Another difference is that on IE9, the submit function of the form is patched by TinyMCE for the save function, but on Chrome I didn't find this patch (even though the content of TinyMCE is saved). As a test I disabled TinyMCE and the problem then still existed.

Both version 7 and 8 use the same YUI version (2.8.0r4), so the problem doesn't seem to be due to YUI, but in any case I will try 2.9.0 since it fixes some IE9 issues.

Amir

Back to Top
Rate [
|
]
 
 
preaction

If YUI 2.9 fixes it, we can certainly upgrade to it, we just have to make sure all our other JS stuff still works (which is a bit to test, but usually goes pretty well).



Back to Top
Rate [
|
]
 
 
ampli

There is a new version of the textarea/HTMLarea modifications at:

https://github.com/ampli/webgui/commit/309ce930bd6e6469ba31a20abd796f5a73368494

Changes and additions to the modifications for textarea/htmlarea in DataTable.
1. Added i18n of the cell editor Save/Cancel buttons, YUI Datatable Loading and Error messages,
   and column sort tooltips.
2. Added CSS files for the existing two DataTable Templates.  Each file should be added to the
corresponding template as a CSS Attachment.
3. Defined classes "wg-dt-textarea" and "wg-dt-htmlarea" for styling the corresponding cells.
4. Fixed a bug in my previous modification: textarea.innerHTML to textarea.value.
 
The DataTable truncation in IE9 doesn't happen any more with YUI 2.9.0 (2.8.0 is from before the time of IE9 and has many problems with it). I would appreciate it much if you could check it and send you comments.

Amir



Back to Top
Rate [
|
]
 
 
    



© 2012 Plain Black Corporation | All Rights Reserved