You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@cocoon.apache.org by thomason <th...@physio1.utmem.edu> on 2006/09/20 23:12:53 UTC
How-to: dojo Editor/Editor2 widgets in forms
Apologies if this is obvious, but I thought it could help someone who
doesn't have time to figure it out. Maybe someone has a better method?
Because the resources CFormsForm.js and __package__.js will be modified, it
is easiest to copy the forms resources
(build/cocoon/blocks/forms/dest/org/apache/cocoon/forms/resources) into a
resources directory in the desired mount directory. Add the dojo directory
to that resources directory (unpack the dojo lib or download the latest)
because forms-field-styling.xsl looks for dojo in the resources. All sitemap
references to resources uri should also be changed to point to the new
resources directory.
Modify resources/forms/js/__package__.js to get the Editor2 widget:
dojo.kwCompoundRequire({
common: [
"cocoon.forms.common",
"cocoon.forms.CFormsForm",
"cocoon.forms.CFormsRepeater",
"cocoon.forms.CFormsDragAndDropRepeater",
"cocoon.forms.CFormsSuggest",
"dojo.widget.InlineEditBox",
"dojo.widget.Editor2"
]
});
dojo.provide("cocoon.forms.*");
The Editor/Editor2 widget keeps its data in an iframe whose data must be
copied back to the cocoon widget when the form is submitted. Ajax-enabled
forms catch the forms submit event. I thought it would be cleaner to wrap
around the submit before cocoon got it, but it always ended up copying after
the submit; I ran out of time to work it out and instead modified
resources/forms/js/CFormsForm.js to copy the Editor2 widget inline frame
data back to the cocoon widget just before the submit, as follows:
_browserSubmit: function(invocation) {
.
.
.
dojo.lang.forEach(dojo.widget.byType("Editor2"), function(ed){
dojo.byId(ed.widgetId).value = ed.getEditorContent();
}
);
this.submit(target && target.name);
// If real submit has to occur, it's taken care of in submit()
return false;
},
In the form template, style the field widget as follows:
<fi:styling type="textarea" rows="3" style="width:100%" dojoType="Editor2"
htmlEditing="true" >
The htmlEditing flag is not necessary, but useful at times.
Hope this helps.
Don
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@cocoon.apache.org
For additional commands, e-mail: users-help@cocoon.apache.org
Re: How-to: dojo Editor/Editor2 widgets in forms
Posted by thomason <th...@physio1.utmem.edu>.
Lars Trieloff wrote:
> as I was looking to integrate Dojo Editor2 into my Cocoon application, I
> found this instructions helpful, but there is a way to achive the same
> goal without having to modify Cocoon' own javascript resources:
Lars,
I don't think so, unless the modifications are incorporated into an
official cocoon release. Like anything, a modification that not part of the
original design goals will require some plaster and paint to make it look
nice!
Don
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@cocoon.apache.org
For additional commands, e-mail: users-help@cocoon.apache.org
Re: How-to: dojo Editor/Editor2 widgets in forms
Posted by Lars Trieloff <la...@trieloff.net>.
Hi,
as I was looking to integrate Dojo Editor2 into my Cocoon application, I
found this instructions helpful, but there is a way to achive the same
goal without having to modify Cocoon' own javascript resources:
====
1. In the form template, style the field widget as follows:
<fi:styling type="textarea" rows="3" style="width:100%" dojoType="Editor2"
htmlEditing="true" >
2. Include following in a custom JS file that is loaded by the form
dojo.require("dojo.widget.Editor2");
dojo.lang.extend(cocoon.forms.CFormsForm, {
_myBrowserSubmit: function(invocation) {
if (invocation.proceed() == false) {
// onsubmit handlers stopped submission
return false;
}
var event = invocation.args[0] || window.event;
// Interestingly, FF provides the explicitOriginalTarget
property that can avoid
// grabClickTarget above, but avoid browser specifics for now.
var target = /*event.explicitOriginalTarget ||*/
this.lastClickTarget;
dojo.lang.forEach(dojo.widget.byType("Editor2"), function(ed){
dojo.byId(ed.widgetId).value = ed.getEditorContent();
}
);
this.submit(target && target.name);
// If real submit has to occur, it's taken care of in submit()
return false;
}
});
function initialize(){
dojo.lang.forEach(
dojo.widget.byType("CFormsForm"),
function(form) {
dojo.event.disconnect(
"around",
form.domNode,
"onsubmit",
form,
"_browserSubmit");
dojo.event.connect(
"around",
form.domNode,
"onsubmit",
form,
"_myBrowserSubmit");
}
);
}
dojo.event.connect(dojo.hostenv, "loaded", "initialize");
====
Btw. What about replacing the various legacy javascript libraries
completely with theit Dojo equivalents?
Lars
thomason schrieb:
> Apologies if this is obvious, but I thought it could help someone who
> doesn't have time to figure it out. Maybe someone has a better method?
>
> Because the resources CFormsForm.js and __package__.js will be modified, it
> is easiest to copy the forms resources
> (build/cocoon/blocks/forms/dest/org/apache/cocoon/forms/resources) into a
> resources directory in the desired mount directory. Add the dojo directory
> to that resources directory (unpack the dojo lib or download the latest)
> because forms-field-styling.xsl looks for dojo in the resources. All sitemap
> references to resources uri should also be changed to point to the new
> resources directory.
>
> Modify resources/forms/js/__package__.js to get the Editor2 widget:
>
> dojo.kwCompoundRequire({
> common: [
> "cocoon.forms.common",
> "cocoon.forms.CFormsForm",
> "cocoon.forms.CFormsRepeater",
> "cocoon.forms.CFormsDragAndDropRepeater",
> "cocoon.forms.CFormsSuggest",
> "dojo.widget.InlineEditBox",
> "dojo.widget.Editor2"
> ]
> });
> dojo.provide("cocoon.forms.*");
>
> The Editor/Editor2 widget keeps its data in an iframe whose data must be
> copied back to the cocoon widget when the form is submitted. Ajax-enabled
> forms catch the forms submit event. I thought it would be cleaner to wrap
> around the submit before cocoon got it, but it always ended up copying after
> the submit; I ran out of time to work it out and instead modified
> resources/forms/js/CFormsForm.js to copy the Editor2 widget inline frame
> data back to the cocoon widget just before the submit, as follows:
>
> _browserSubmit: function(invocation) {
> .
> .
> .
> dojo.lang.forEach(dojo.widget.byType("Editor2"), function(ed){
> dojo.byId(ed.widgetId).value = ed.getEditorContent();
> }
> );
> this.submit(target && target.name);
> // If real submit has to occur, it's taken care of in submit()
> return false;
> },
>
> In the form template, style the field widget as follows:
> <fi:styling type="textarea" rows="3" style="width:100%" dojoType="Editor2"
> htmlEditing="true" >
> The htmlEditing flag is not necessary, but useful at times.
>
> Hope this helps.
> Don
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@cocoon.apache.org
For additional commands, e-mail: users-help@cocoon.apache.org