You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@cocoon.apache.org by Felix Knecht <fe...@otego.com> on 2007/05/24 15:47:07 UTC
Customization of cform styling (dojo)
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1
I want to customize the calendar gif from the
forms-calendar-styling.xsl. In former cocoons I could do this via my
own forms-sample-styling by overwriting the specific part in it (e.g.
the calendar icon).
It seems that for various parts this doesn't works anymore in c2.2
because of the newer dojo implementation we use. The image paths are
hardcoded.
e.g. in the
cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/DropdownDateTimePicker.js:
<snip>
dateIconURL: cocoon.formsResourcesUri +
"/js/templates/images/dateIcon.gif"
</snip>
Is there an easy way do do this like it was done before?
If not how can it be done?
InfoPopup.js
MultivalueEditor.js
MultivalueEditorWithSuggestion.js
and probably some more are lacking of the same.
Thanks
Felix
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.4 (GNU/Linux)
Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org
iD8DBQFGVZdb2lZVCB08qHERAgGIAJ9MmxhESmmbH2T5kHcWGCuf8UVv3ACcDro+
FZXboW8JENnsQ6rJh35x360=
=MzPw
-----END PGP SIGNATURE-----
Re: Customization of cform styling (dojo)
Posted by Felix Knecht <fe...@apache.org>.
>>> Description above gives you idea how it _should_ be done in new setup
>>> thanks to conecpts like block/servlet polymorphism and extension. The
>>> trick is that it will not work currently due to issue COCOON-2038[3].
>>
>> ;-)
>
> Felix, what does this smile mean? :-)
> Are you willing to work on this? If so, tell me to not double the effort.
>
Sorry, no I'm not working on the problem. What I wanted to say is "This
is the way how it should work, but it doesn't at the moment. This really
helps me.".
OTOH:
I got it working but may be I did something wrong (because of
COCOON-2038 I suppose I did it in a wrong way - but it does the job).
What I did:
custom-custom block, sitemap:
<map:transform src="servlet:bfabric-core:/stylesheets/internal/forms.xsl">
<map:parameter name="dojo-debug" value="true" />
<!-- make customization possible in custom-core -->
<map:parameter name="dojo-resources"
value="{servlet:custom-core:/resource/external/dojo}" />
<map:parameter name="forms-resources"
value="{servlet:custom-core:/resource/external/forms}" />
</map:transform>
custom-core block, sitemap:
<map:pipeline id="cocoon-customization-pipeline">
<!-- Customization -->
<map:match
pattern="resource/external/forms/js/templates/images/dateIcon.gif">
<map:read src="resources/images/my_dateIcon.gif" />
</map:match>
<!-- No customization, read original stuff -->
<map:match pattern="resource/external/forms/**">
<map:read src="servlet:forms:/resource/external/forms/{1}" />
</map:match>
<map:match pattern="resource/external/dojo/**">
<map:read src="servlet:ajax:/resource/external/dojo/{1}" />
</map:match>
</map:pipeline>
Felix
Re: Customization of cform styling (dojo)
Posted by Grzegorz Kossakowski <gk...@apache.org>.
Felix Knecht pisze:
>
> In erlier version we didn't had a dojo widget. The images were set in
> the stylesheet (which could be customize). Nowadays the images are et in
> the dojowidget.
>
<snip/>
I see, thanks.
> I think I see what you mean. So you have e.g. forms-resources pointing
> to your custom block where you have a matcher for all stuff you want to
> customize and all the rest you redirect to {servlet:forms:/...}
Yes, that's the idea.
>> Then in another block, where you actually use forms you must connect
>> to your extended block instead of standard one.
>>
>> Description above gives you idea how it _should_ be done in new setup
>> thanks to conecpts like block/servlet polymorphism and extension. The
>> trick is that it will not work currently due to issue COCOON-2038[3].
>
> ;-)
Felix, what does this smile mean? :-)
Are you willing to work on this? If so, tell me to not double the effort.
>> For now, I cannot implement functionality mentioned there myself
>> because I'm badly lacking free time. I offer my help if you want to do
>> it yourself, though. It shouldn't be that much difficult.
>>
>> Hope that helps.
>
--
Grzegorz Kossakowski
Re: Customization of cform styling (dojo)
Posted by Felix Knecht <fe...@apache.org>.
Grzegorz Kossakowski schrieb:
> Felix Knecht pisze:
>> -----BEGIN PGP SIGNED MESSAGE-----
>> Hash: SHA1
>>
>> I want to customize the calendar gif from the
>> forms-calendar-styling.xsl. In former cocoons I could do this via my
>> own forms-sample-styling by overwriting the specific part in it (e.g.
>> the calendar icon).
>>
>> It seems that for various parts this doesn't works anymore in c2.2
>> because of the newer dojo implementation we use. The image paths are
>> hardcoded.
>> e.g. in the
>> cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/DropdownDateTimePicker.js:
>>
>>
>>
>> <snip>
>> dateIconURL: cocoon.formsResourcesUri +
>> "/js/templates/images/dateIcon.gif"
>> </snip>
>>
>> Is there an easy way do do this like it was done before?
>> If not how can it be done?
>>
>>
>> InfoPopup.js
>> MultivalueEditor.js
>> MultivalueEditorWithSuggestion.js
>> and probably some more are lacking of the same.
>
> Just out of cursity, can you explain how it could be achieved with
> earlier versions?
In erlier version we didn't had a dojo widget. The images were set in
the stylesheet (which could be customize). Nowadays the images are et in
the dojowidget.
<xsl:template
match="fi:field[fi:styling/@type='date'] |
fi:field[fi:datatype[@type='date'][fi:convertor/@variant='date']][not(fi:styling/@type)][not(fi:selection-list)]
|
fi:aggregatefield[fi:datatype[@type='date'][fi:convertor/@variant='date']][not(fi:styling/@type)][not(fi:selection-list)]
">
<xsl:variable name="id" select="concat(@id, ':cal')" />
<xsl:variable name="format">
<xsl:choose>
<xsl:when
test="fi:datatype[@type='date']/fi:convertor/@pattern">
<xsl:value-of
select="fi:datatype[@type='date']/fi:convertor/@pattern" />
</xsl:when>
<xsl:otherwise>yyyy-MM-dd</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<span id="{@id}">
<xsl:choose>
<xsl:when test="@state = 'output'">
<xsl:value-of select="fi:value" />
</xsl:when>
<xsl:otherwise>
<!-- regular input -->
<input id="{@id}:input" name="{@id}"
value="{fi:value}" title="{normalize-space(fi:hint)}" type="text">
<xsl:apply-templates select="." mode="styling" />
</input>
<!-- calendar popup -->
<xsl:choose>
<xsl:when test="@state = 'disabled'">
<img src="images/diary_blue.gif"
alt="forms:calendar.alt" />
</xsl:when>
<xsl:otherwise>
<a href="#" name="{$id}" id="{$id}"
onclick="forms_calendar.select(forms_getForm(this)['{@id}'],'{$id}','{$format}');
return false;" onmouseover="icondown('{$id}', 'diary')"
onmouseout="iconup('{$id}', 'diary')">
<img src="images/diary_blue.gif"
name="{$id}" alt="forms:calendar.alt" />
</a>
</xsl:otherwise>
</xsl:choose>
<!-- common stuff -->
<xsl:apply-templates select="." mode="common" />
</xsl:otherwise>
</xsl:choose>
</span>
</xsl:template>
>
> formsResourcesUri variable is set in forms-field-styling.xsl[1]:
> <xsl:value-of select="concat('cocoon.formsResourcesUri = ',
> $doubleQuote, $forms-resources, $doubleQuote, ';')"/>
>
> $forms-resources is set in the sitemap[2]:
> <map:transform src="resources/forms-samples-styling.xsl">
> <map:parameter name="dojo-resources"
> value="{servlet:ajax:/resource/external/dojo}" />
> <map:parameter name="forms-resources"
> value="{servlet:forms:/resource/external/forms}" />
> </map:transform>
>
> As you see, servlet:forms:/ is used. Now if you want to change some
> resources from the form block you need to "override method" serving
> forms resources. What's that method and how you should override? The
> method is a sitemap matcher that matches requested resource and serves
> it. How to override it? Steps are pretty simple, you must extend forms
> block by creating new one and declaring standard forms block as a
> super in the connections of newly created block. Then in the sitemap
> you can declare matcher that will will match resource you need to
> replace.
>
> In your case matcher would look like this:
> <map:match
> pattern="resource/external/forms/js/templates/images/dateIcon.gif">
> <map:read ...> <!-- you serve your own icon here -->
> </map:match>
>
I think I see what you mean. So you have e.g. forms-resources pointing
to your custom block where you have a matcher for all stuff you want to
customize and all the rest you redirect to {servlet:forms:/...}
> Then in another block, where you actually use forms you must connect
> to your extended block instead of standard one.
>
> Description above gives you idea how it _should_ be done in new setup
> thanks to conecpts like block/servlet polymorphism and extension. The
> trick is that it will not work currently due to issue COCOON-2038[3].
;-)
>
> For now, I cannot implement functionality mentioned there myself
> because I'm badly lacking free time. I offer my help if you want to do
> it yourself, though. It shouldn't be that much difficult.
>
> Hope that helps.
Thanks
Felix
>
> [1]
> http://svn.apache.org/repos/asf/cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/forms-field-styling.xsl
>
> [2]
> http://svn.apache.org/repos/asf/cocoon/trunk/blocks/cocoon-forms/cocoon-forms-sample/src/main/resources/COB-INF/sitemap.xmap
>
> [3] https://issues.apache.org/jira/browse/COCOON-2038
>
Re: Customization of cform styling (dojo)
Posted by Grzegorz Kossakowski <gk...@apache.org>.
Felix Knecht pisze:
> -----BEGIN PGP SIGNED MESSAGE-----
> Hash: SHA1
>
> I want to customize the calendar gif from the
> forms-calendar-styling.xsl. In former cocoons I could do this via my
> own forms-sample-styling by overwriting the specific part in it (e.g.
> the calendar icon).
>
> It seems that for various parts this doesn't works anymore in c2.2
> because of the newer dojo implementation we use. The image paths are
> hardcoded.
> e.g. in the
> cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/DropdownDateTimePicker.js:
>
>
> <snip>
> dateIconURL: cocoon.formsResourcesUri +
> "/js/templates/images/dateIcon.gif"
> </snip>
>
> Is there an easy way do do this like it was done before?
> If not how can it be done?
>
>
> InfoPopup.js
> MultivalueEditor.js
> MultivalueEditorWithSuggestion.js
> and probably some more are lacking of the same.
Just out of cursity, can you explain how it could be achieved with earlier versions?
formsResourcesUri variable is set in forms-field-styling.xsl[1]:
<xsl:value-of select="concat('cocoon.formsResourcesUri = ', $doubleQuote, $forms-resources, $doubleQuote, ';')"/>
$forms-resources is set in the sitemap[2]:
<map:transform src="resources/forms-samples-styling.xsl">
<map:parameter name="dojo-resources" value="{servlet:ajax:/resource/external/dojo}" />
<map:parameter name="forms-resources" value="{servlet:forms:/resource/external/forms}" />
</map:transform>
As you see, servlet:forms:/ is used. Now if you want to change some resources from the form block you need to "override
method" serving forms resources. What's that method and how you should override? The method is a sitemap matcher that
matches requested resource and serves it. How to override it? Steps are pretty simple, you must extend forms block by
creating new one and declaring standard forms block as a super in the connections of newly created block. Then in the
sitemap you can declare matcher that will will match resource you need to replace.
In your case matcher would look like this:
<map:match pattern="resource/external/forms/js/templates/images/dateIcon.gif">
<map:read ...> <!-- you serve your own icon here -->
</map:match>
Then in another block, where you actually use forms you must connect to your extended block instead of standard one.
Description above gives you idea how it _should_ be done in new setup thanks to conecpts like block/servlet polymorphism
and extension. The trick is that it will not work currently due to issue COCOON-2038[3].
For now, I cannot implement functionality mentioned there myself because I'm badly lacking free time. I offer my help if
you want to do it yourself, though. It shouldn't be that much difficult.
Hope that helps.
[1]
http://svn.apache.org/repos/asf/cocoon/trunk/blocks/cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/forms-field-styling.xsl
[2]
http://svn.apache.org/repos/asf/cocoon/trunk/blocks/cocoon-forms/cocoon-forms-sample/src/main/resources/COB-INF/sitemap.xmap
[3] https://issues.apache.org/jira/browse/COCOON-2038
--
Grzegorz Kossakowski
Re: Customization of cform styling (dojo)
Posted by Marc Portier <mp...@outerthought.org>.
Felix Knecht wrote:
> -----BEGIN PGP SIGNED MESSAGE-----
> Hash: SHA1
>
> I want to customize the calendar gif from the
> forms-calendar-styling.xsl. In former cocoons I could do this via my
> own forms-sample-styling by overwriting the specific part in it (e.g.
> the calendar icon).
>
> It seems that for various parts this doesn't works anymore in c2.2
> because of the newer dojo implementation we use. The image paths are
> hardcoded.
> e.g. in the
> cocoon-forms/cocoon-forms-impl/src/main/resources/org/apache/cocoon/forms/resources/js/DropdownDateTimePicker.js:
>
>
> <snip>
> dateIconURL: cocoon.formsResourcesUri +
> "/js/templates/images/dateIcon.gif"
> </snip>
>
> Is there an easy way do do this like it was done before?
> If not how can it be done?
>
>
I am not sure what dojo says about this?
How does one generally change this kind of stuff in pure dojo?
I would suspect some js can introduce setting this dateIconURL property
after loading the widget?
regards,
-marc=