You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Jonathan O'Connor <ni...@eircom.net> on 2009/02/09 18:19:20 UTC
How can I modify the rendering of grid rows?
Hi,
I would like to modify the way grid rows are rendered. I want add an
onmouseout, onmouseover handlers to the <tr> tags.
I suppose I could do a load of cut and paste, and reimplement the grid,
but is there an easier way?
Ciao,
Jonathan
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: How can I modify the rendering of grid rows?
Posted by "Thiago H. de Paula Figueiredo" <th...@gmail.com>.
Em Mon, 09 Feb 2009 22:04:25 -0300, Jonathan O'Connor
<ni...@eircom.net> escreveu:
> Thiago,
> yes, I know about ComponentResources.createXXXLink(), but how do I sneak
> it into the JavaScript? I guess I have to generate some special java
> script in afterRender. I'm sure I saw code like in the WIKI.
The most elegant way to do it is to add that piece of Javascript through
RenderSupport.addScript().
Another solution is to put a Tapestry expression expansion inside the
Javascript code:
Page class:
public Link getEventLink() {
return componentResources.createXXXLink(parameters);
}
Template:
window.location.href='${eventLink}' + this.cells[1].textContent;
--
Thiago H. de Paula Figueiredo
Independent Java consultant, developer, and instructor
http://www.arsmachina.com.br/thiago
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: How can I modify the rendering of grid rows?
Posted by Jonathan O'Connor <ni...@eircom.net>.
Thiago,
yes, I know about ComponentResources.createXXXLink(), but how do I sneak
it into the JavaScript? I guess I have to generate some special java
script in afterRender. I'm sure I saw code like in the WIKI.
Ciao,
Jonathan
On 10/02/2009 01:22, Thiago H. de Paula Figueiredo wrote:
> Em Mon, 09 Feb 2009 21:09:06 -0300, Jonathan O'Connor
> <ni...@eircom.net> escreveu:
>
>> Thiago,
>
> Hello, Jonathan!
>
>> I am most impressed with Prototype. I really like using $$().
>
> Me too. As I can see, you quickly learned enough Prototype in a couple
> hours to do what you needed. :)
>
>> Here's my code to add onmouseover, onmouseout and onclick handlers
>> for a zebra striped table. Unfortunately, I have to support IE6, so I
>> couldn't use :hover for the mouse over/out handlers.
>
> In other thread in this mailing there were people complaining about
> Internet Explorer. Add me to the list of IE haters. :(
>
> On the other hand, we thank you for sharing your code with us. :) What
> about adding this to the Tapestry wiki?
>
> Just one little Prototype advice: instead of using "this" to refer to
> the HTML element passed as an argument, use the first parameter
> (typically named "e"). Instead of doing this.className = "something",
> you can use e.addClassName("something"). All elements returned by
> Prototype are extended. This means that they have all methods listed
> here: http://www.prototypejs.org/api/element. This will make your
> Javascript code a little more elegant. ;) Something like (not tested):
>
> $$('#customerTable tbody tr.DataTableEntryEven').each(function(elmt) {
> Event.observe(elmt, 'mouseover', mouseover);
> Event.observe(elmt, 'mouseout', function(ev) {
> ev.addClassName('DataTableEntryEven'); // <--- example here
> });
> });
>
>> var click = function(e) {
>> // This location is sadly hardwired into the code - not very
>> nice :-(
>> window.location.href='/onlinebanking-biwvp/CustomerSearch.customerId/' +
>> this.cells[1].textContent;
>> };
>
> Use ComponentResources.createXXXLink() to create the link for you. ;)
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: How can I modify the rendering of grid rows?
Posted by "Thiago H. de Paula Figueiredo" <th...@gmail.com>.
Em Mon, 09 Feb 2009 21:09:06 -0300, Jonathan O'Connor
<ni...@eircom.net> escreveu:
> Thiago,
Hello, Jonathan!
> I am most impressed with Prototype. I really like using $$().
Me too. As I can see, you quickly learned enough Prototype in a couple
hours to do what you needed. :)
> Here's my code to add onmouseover, onmouseout and onclick handlers for a
> zebra striped table. Unfortunately, I have to support IE6, so I couldn't
> use :hover for the mouse over/out handlers.
In other thread in this mailing there were people complaining about
Internet Explorer. Add me to the list of IE haters. :(
On the other hand, we thank you for sharing your code with us. :) What
about adding this to the Tapestry wiki?
Just one little Prototype advice: instead of using "this" to refer to the
HTML element passed as an argument, use the first parameter (typically
named "e"). Instead of doing this.className = "something", you can use
e.addClassName("something"). All elements returned by Prototype are
extended. This means that they have all methods listed here:
http://www.prototypejs.org/api/element. This will make your Javascript
code a little more elegant. ;) Something like (not tested):
$$('#customerTable tbody tr.DataTableEntryEven').each(function(elmt) {
Event.observe(elmt, 'mouseover', mouseover);
Event.observe(elmt, 'mouseout', function(ev) {
ev.addClassName('DataTableEntryEven'); // <--- example here
});
});
> var click = function(e) {
> // This location is sadly hardwired into the code - not very
> nice :-(
> window.location.href='/onlinebanking-biwvp/CustomerSearch.customerId/' +
> this.cells[1].textContent;
> };
Use ComponentResources.createXXXLink() to create the link for you. ;)
--
Thiago H. de Paula Figueiredo
Independent Java consultant, developer, and instructor
http://www.arsmachina.com.br/thiago
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: How can I modify the rendering of grid rows?
Posted by Jonathan O'Connor <ni...@eircom.net>.
Thiago,
I am most impressed with Prototype. I really like using $$(). Here's my
code to add onmouseover, onmouseout and onclick handlers for a zebra
striped table. Unfortunately, I have to support IE6, so I couldn't use
:hover for the mouse over/out handlers.
Tapestry.onDOMLoaded(function() {
var mouseover = function(e) {
this.className = 'DataTableEntryMouseOver';
};
var click = function(e) {
// This location is sadly hardwired into the code - not very
nice :-(
window.location.href='/onlinebanking-biwvp/CustomerSearch.customerId/' +
this.cells[1].textContent;
};
$$('#customerTable tbody tr.DataTableEntryEven').each(function(elmt) {
Event.observe(elmt, 'mouseover', mouseover);
Event.observe(elmt, 'mouseout', function(ev) {
this.className = 'DataTableEntryEven';
});
Event.observe(elmt, 'click', click);
});
$$('#customerTable tbody tr.DataTableEntryOdd').each(function(elmt) {
Event.observe(elmt, 'mouseover', mouseover);
Event.observe(elmt, 'mouseout', function(ev) {
this.className = 'DataTableEntryOdd';
});
Event.observe(elmt, 'click', click);
});
});
Hope this helps the next person!
Jonathan
On 09/02/2009 18:52, Thiago H. de Paula Figueiredo wrote:
> Em Mon, 09 Feb 2009 14:40:33 -0300, Jonathan O'Connor
> <ni...@eircom.net> escreveu:
>
>> Thiago,
>> The mouse out and over handlers change the background color, as the
>> user moves teh mouse over the table.
>
> This can be done in CSS using the :hover pseudo-selector.
>
>> I also need to set the onclick of each td so it goes to a new page.
>> I'll have a look at doing it the prototype way :-(. I suppose it
>> really is the proper way to that.
>
> That really needs Javascript, and it can be easily done with
> Prototype. I have almost no experience and I was able to do some DOM
> operations with Prototype in a short time frame. ;)
>
>> I had another idea, that I could modify the DOM tree after rendering
>> (say in cleanupRender) but I haven't seen any examples do this.
>
> A very nice place to learn how to deal with Javascript issues in
> Tapestry is
> http://wiki.apache.org/tapestry/Tapestry5AndJavaScriptExplained.
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: How can I modify the rendering of grid rows?
Posted by "Thiago H. de Paula Figueiredo" <th...@gmail.com>.
Em Mon, 09 Feb 2009 14:40:33 -0300, Jonathan O'Connor
<ni...@eircom.net> escreveu:
> Thiago,
> The mouse out and over handlers change the background color, as the user
> moves teh mouse over the table.
This can be done in CSS using the :hover pseudo-selector.
> I also need to set the onclick of each td so it goes to a new page. I'll
> have a look at doing it the prototype way :-(. I suppose it really is
> the proper way to that.
That really needs Javascript, and it can be easily done with Prototype. I
have almost no experience and I was able to do some DOM operations with
Prototype in a short time frame. ;)
> I had another idea, that I could modify the DOM tree after rendering
> (say in cleanupRender) but I haven't seen any examples do this.
A very nice place to learn how to deal with Javascript issues in Tapestry
is http://wiki.apache.org/tapestry/Tapestry5AndJavaScriptExplained.
--
Thiago H. de Paula Figueiredo
Independent Java consultant, developer, and instructor
http://www.arsmachina.com.br/thiago
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: How can I modify the rendering of grid rows?
Posted by Jonathan O'Connor <ni...@eircom.net>.
Thiago,
The mouse out and over handlers change the background color, as the user
moves teh mouse over the table. I also need to set the onclick of each
td so it goes to a new page. I'll have a look at doing it the prototype
way :-(. I suppose it really is the proper way to that.
I had another idea, that I could modify the DOM tree after rendering
(say in cleanupRender) but I haven't seen any examples do this.
Ciao,
Jonathan
On 09/02/2009 18:27, Thiago H. de Paula Figueiredo wrote:
> Em Mon, 09 Feb 2009 14:19:20 -0300, Jonathan O'Connor
> <ni...@eircom.net> escreveu:
>
>> Hi,
>> I would like to modify the way grid rows are rendered. I want add an
>> onmouseout, onmouseover handlers to the <tr> tags.
>
> Rendering or adding behaviour? :)
>
>> I suppose I could do a load of cut and paste, and reimplement the
>> grid, but is there an easier way?
>
> If all you need is to change background colors and/or foreground
> colors, you can accomplish that just using CSS (all Grids are rendered
> as <table class="t-data-grid"> and you can use the rowClass parameter
> to assign CSS classes to <tr> tags).
>
> If you really need Javascript, try using Prototype to get any <table>
> with class="t-data-grid" then iterate through the nested <tr>
> elements. ;)
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: How can I modify the rendering of grid rows?
Posted by "Thiago H. de Paula Figueiredo" <th...@gmail.com>.
Em Mon, 09 Feb 2009 14:19:20 -0300, Jonathan O'Connor
<ni...@eircom.net> escreveu:
> Hi,
> I would like to modify the way grid rows are rendered. I want add an
> onmouseout, onmouseover handlers to the <tr> tags.
Rendering or adding behaviour? :)
> I suppose I could do a load of cut and paste, and reimplement the grid,
> but is there an easier way?
If all you need is to change background colors and/or foreground colors,
you can accomplish that just using CSS (all Grids are rendered as <table
class="t-data-grid"> and you can use the rowClass parameter to assign CSS
classes to <tr> tags).
If you really need Javascript, try using Prototype to get any <table> with
class="t-data-grid" then iterate through the nested <tr> elements. ;)
--
Thiago H. de Paula Figueiredo
Independent Java consultant, developer, and instructor
http://www.arsmachina.com.br/thiago
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org