James,
I just did this yesterday. Its based on the code found in the WIKI:
http://wiki.apache.org/tapestry/Tapestry5AndJavaScriptExplained
My Javascript code sets the class of an element to "vanished" that does
display:none in my stylesheet.
// A class that hides and shows the simple and complex input elements of
the form.
var CustomerSearchInputToggler = Class.create();
CustomerSearchInputToggler.prototype = {
initialize: function(element, makeSimple) {
if (makeSimple) {
Event.observe($(element), 'click',
this.simplify.bindAsEventListener(this));
} else {
Event.observe($(element), 'click',
this.complicate.bindAsEventListener(this));
}
},
hide: function(element) {
$(element).className = 'vanished';
},
show: function(element) {
$(element).className = '';
},
simplify: function(e) {
this.hide('complex');
this.hide('complex1');
this.hide('complex2');
this.show('simple');
this.show('simple1');
return true;
},
complicate: function(e) {
this.show('complex');
this.show('complex1');
this.show('complex2');
this.hide('simple');
this.hide('simple1');
return true;
}
}
Tapestry.onDOMLoaded(function() {
new CustomerSearchInputToggler('complex', true);
new CustomerSearchInputToggler('simple', false);
CustomerSearchInputToggler.prototype.simplify(null);
});
complex and simple are 2 links in the tml file, simpleX and complexX are
paragraphs, but they could be any element that you want hidden or shown:
<a id="complex" href="#">${message:makeSimple}</a>
<a id="simple" href="#">${message:makeComplex}</a>
You also need to inject the javascript file:
@IncludeJavaScriptLibrary("CustomerSearch.js")
This solution is not perfect, because on load hides the complex input
fields only after they have been displayed, so the screen flashes. Now I
could add default styles of display:none to the complexX elements, but
if the user has Javascript turned off, then they can never see the
complex parts of the screen. I suppose I could make the anchor links
ActionLinks, so that when Javascript is not running, the user goes back
to the server, which refreshes the page showing the complex parts.
What I do like about Tapestry's way of handling Javascript is, one never
sees onclick attributes in the HTML.
Hope this helps,
Jonathan
On 22/01/2009 02:10, Thiago H. de Paula Figueiredo wrote:
Em Wed, 21 Jan 2009 22:01:43 -0300, James Sherwood
<jsherw...@rgisolutions.com> escreveu:
You are like our own little tapestry tutor, and its MUCH appreciated:)
I'm just a guy who wants to bring sanity and pleasure and elegance
(Tapestry 5!) to the Java Web development world . . . :) And a guy
with a little too much free time in his hands, as I'm currenty working
part-time in a project with a local company and the rest of the time
in my own projects. All them implemented in Tapestry and the Ars
Machina Project packages (www.arsmachina.com.br/project) . . .
Before I go looking into the code, would it be possible to build one
whereby
you just click an image to change hidden/shown of the form fragment?
I think so: it would be a matter of writing/generating Javascript code
handling the click event of an image/link/whatever and showing/hiding
the form fragment. It shouldn't be hard.
If so would I just start by basing it off the built in checkbox
component?
I think you will find the answers you want in the TriggerFragment
component
(http://tapestry.apache.org/tapestry5/tapestry-core/ref/org/apache/tapestry5/corelib/mixins/TriggerFragment.html).
Look at the Javascript it adds to the page and try to imitate it in
your component.
Unfortunately the checkbox is such an ugly/clunky implementation of a
really awesome little component.
I agree . . .
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org
For additional commands, e-mail: users-h...@tapestry.apache.org
