You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Juan Ignacio Sánchez Lara <ju...@gmail.com> on 2007/05/23 17:18:13 UTC

Dojo integration usage documentation

I've just seen at the wiki a really interesting
article<http://wiki.apache.org/myfaces/WYSIWYG_Editor>about Dojo
wrapping inside Tomahawk. Can I do something similar to use
dropdown calendar?? Is it documented somewhere??

-- 
Juan Ignacio Sánchez Lara
Ingeniero Informático + Técnico de Sistemas

Diario: http://juanignaciosl.blogspot.com
Ideas + Ingeniería del Software: http://iiso.blogspot.com/

Fotos (todas): http://www.flickr.com/photos/juanignaciosl
Fotos (selección): http://jpgmag.com/people/juanignaciosl

Re: Dojo integration usage documentation

Posted by Werner Punz <we...@gmail.com>.
Juan Ignacio Sánchez Lara schrieb:
> I've already dealt with Dojo optimizing via searchIds, it really makes a 
> difference. I've used Dojo only at "client side", but now I want to make 
> custom JSF components to make developing faster. I will give jMaki 
> another try, but if I finally desist I'll make a component with this 
> code (I don't use facelets). I've had some problems integrating some 
> components with RichFaces (I've tried both jMaki and Blueprints Dojo's 
> DropdownCalendar but they won't work inside RichFaces tabs :-\ ). I must 
> try also wiki's suggestion on MF + Ajax4JSF 
> <http://wiki.apache.org/myfaces/AJAX4JSF_and_MyFaces>.
> 
> Thank you very much!
> 
I am not too familiar with jmaki, but if you want to stay at the pure 
jsf side of things and you use tomahawk already

apply this code simply to a t:inputText replace the generic ids and 
values with real ones and use forceId = true you are basically set (dont 
forget to push the javascript into verbatim as needed)




Re: Dojo integration usage documentation

Posted by Juan Ignacio Sánchez Lara <ju...@gmail.com>.
I've already dealt with Dojo optimizing via searchIds, it really makes a
difference. I've used Dojo only at "client side", but now I want to make
custom JSF components to make developing faster. I will give jMaki another
try, but if I finally desist I'll make a component with this code (I don't
use facelets). I've had some problems integrating some components with
RichFaces (I've tried both jMaki and Blueprints Dojo's DropdownCalendar but
they won't work inside RichFaces tabs :-\ ). I must try also wiki's
suggestion on MF + Ajax4JSF<http://wiki.apache.org/myfaces/AJAX4JSF_and_MyFaces>
.

Thank you very much!

On 5/23/07, Werner Punz <we...@gmail.com> wrote:
>
> Werner Punz schrieb:
> > Here is a custom facelet component I have written a while ago...
> >
> >
> > <ui:composition>
> >       <t:dojoInitializer require="dojo.widget.DropdownDatePicker" />
> >       <t:inputText value="#{entity[fieldName]}" id="#{id}"
> forceId="true" >
> >               <s:convertDateTime pattern="dd.MM.yyyy"/>
> >       </t:inputText>
> >       <script type="text/javascript">
> >               var #{id}_value = dojo.byId("#{id}").value;
> >               if(!#{id}_value)
> >                       #{id}_value = "";
> >               dojo.widget.createWidget("DropdownDatePicker",{widgetId:
> > "#{id}_dojoWidget", inputId: "#{id}", inputName: "#{id}",
> > dateFormat:"%d.%m.%Y"
> >               },dojo.byId('#{id}'));
> >                               dojo.widget.byId("#{id}_dojoWidget").inputNode.value
> = #{id}_value;
> >       </script>
> > </ui:composition>
> >
> >
> > usage:
> > <ir:dojodatepicker id="fromDate"
> > entity="#{appointmentdetailview}"
> fieldName="startDate" />
> >                                                               >
> >
> >
> Ok sorry for the formatting errors, but what happens is just basically
> that the date picker is bound to an input text component, which then is
> utilized by jsf itself  (The programmatic approach is chosen because it
> allows speed optimizations by turning the dojo parsing off (basically
> factor 2-4 on some pages)
> the main problem is that facelets are view only hence the
> #{entity[fieldName]} construct to pass the values properly, secondly
> we deal with two different date format definitions here
>
> <s:convertDateTime pattern="dd.MM.yyyy"/> on the java side
>
> and
> dateFormat:"%d.%m.%Y" on the dojo side, both basically doing the same
>
>
> As for speed optimizations I have not blogged this and have not adjusted
> the examples but since MyFaces has been using programmatic only creation
> of components for quite a while:
>
> following will give another speed boost:
>
> <t:dojoInitializer parseWidgets="false" searchIds="[]" />
>
> this turns off the dojo page parsing entirely...
> if you need to turn it on selectively, add the ids of the divs or
> controls you want to have parsed to the searchids list
> like following:
>
> <t:dojoInitializer parseWidgets="false" searchIds="['divid1','divid2']" />
>
>
>
>


-- 
Juan Ignacio Sánchez Lara
Ingeniero Informático + Técnico de Sistemas

Diario: http://juanignaciosl.blogspot.com
Ideas + Ingeniería del Software: http://iiso.blogspot.com/

Fotos (todas): http://www.flickr.com/photos/juanignaciosl
Fotos (selección): http://jpgmag.com/people/juanignaciosl

Re: Dojo integration usage documentation

Posted by Werner Punz <we...@gmail.com>.
Werner Punz schrieb:
> Here is a custom facelet component I have written a while ago...
> 
> 
> <ui:composition>
> 	<t:dojoInitializer require="dojo.widget.DropdownDatePicker" />
> 	<t:inputText value="#{entity[fieldName]}" id="#{id}" forceId="true" >
> 		<s:convertDateTime pattern="dd.MM.yyyy"/>
> 	</t:inputText>	
> 	<script type="text/javascript">
> 		var #{id}_value = dojo.byId("#{id}").value;
> 		if(!#{id}_value)
> 			#{id}_value = "";
> 		dojo.widget.createWidget("DropdownDatePicker",{widgetId:
> "#{id}_dojoWidget", inputId: "#{id}", inputName: "#{id}",
> dateFormat:"%d.%m.%Y"
> 		},dojo.byId('#{id}'));
> 				dojo.widget.byId("#{id}_dojoWidget").inputNode.value = #{id}_value;
> 	</script>
> </ui:composition>
> 
> 
> usage:
> <ir:dojodatepicker id="fromDate"				
> entity="#{appointmentdetailview}"				fieldName="startDate" />
> 								>
> 
> 
Ok sorry for the formatting errors, but what happens is just basically 
that the date picker is bound to an input text component, which then is 
utilized by jsf itself  (The programmatic approach is chosen because it 
allows speed optimizations by turning the dojo parsing off (basically 
factor 2-4 on some pages)
the main problem is that facelets are view only hence the 
#{entity[fieldName]} construct to pass the values properly, secondly
we deal with two different date format definitions here

<s:convertDateTime pattern="dd.MM.yyyy"/> on the java side

and
dateFormat:"%d.%m.%Y" on the dojo side, both basically doing the same


As for speed optimizations I have not blogged this and have not adjusted 
the examples but since MyFaces has been using programmatic only creation 
of components for quite a while:

following will give another speed boost:

<t:dojoInitializer parseWidgets="false" searchIds="[]" />

this turns off the dojo page parsing entirely...
if you need to turn it on selectively, add the ids of the divs or 
controls you want to have parsed to the searchids list
like following:

<t:dojoInitializer parseWidgets="false" searchIds="['divid1','divid2']" />




Re: Dojo integration usage documentation

Posted by Werner Punz <we...@gmail.com>.
Here is a custom facelet component I have written a while ago...


<ui:composition>
	<t:dojoInitializer require="dojo.widget.DropdownDatePicker" />
	<t:inputText value="#{entity[fieldName]}" id="#{id}" forceId="true" >
		<s:convertDateTime pattern="dd.MM.yyyy"/>
	</t:inputText>	
	<script type="text/javascript">
		var #{id}_value = dojo.byId("#{id}").value;
		if(!#{id}_value)
			#{id}_value = "";
		dojo.widget.createWidget("DropdownDatePicker",{widgetId:
"#{id}_dojoWidget", inputId: "#{id}", inputName: "#{id}",
dateFormat:"%d.%m.%Y"
		},dojo.byId('#{id}'));
				dojo.widget.byId("#{id}_dojoWidget").inputNode.value = #{id}_value;
	</script>
</ui:composition>


usage:
<ir:dojodatepicker id="fromDate"				
entity="#{appointmentdetailview}"				fieldName="startDate" />
								>








Juan Ignacio Sánchez Lara schrieb:
> I've just seen at the wiki a really interesting article
> <http://wiki.apache.org/myfaces/WYSIWYG_Editor> about Dojo wrapping
> inside Tomahawk. Can I do something similar to use dropdown calendar??
> Is it documented somewhere??
> 
> -- 
> Juan Ignacio Sánchez Lara
> Ingeniero Informático + Técnico de Sistemas
> 
> Diario: http://juanignaciosl.blogspot.com
> Ideas + Ingeniería del Software: http://iiso.blogspot.com/
> 
> Fotos (todas): http://www.flickr.com/photos/juanignaciosl
> Fotos (selección): http://jpgmag.com/people/juanignaciosl