Thank you,

However I believe I have solved it and can still just use form fragments.

Below is my class which basically just keeps the checkbox hidden and fires
the click from the button(I believe the reason only a checkbox or radio is
used is because the element itself keeps track of the state, if it was a
button they javascript would have to keep track of it).

QUESTION: "onclick", "document.getElementById('" + getClientId() +
"').click()"); Is not proper at all I believe.  Does anyone know how to do
this properly with tapestry?  Would just have to figure out a way to fire
the observe function with the clientid maybe?


public class ButtonFragment extends AbstractField {
/**
* The value to be read or updated. If not bound, the Checkbox will attempt
* to edit a property of its container whose name matches the component's
* id.
*/
@Parameter(required = true, autoconnect = true) private boolean value;

@Inject
private Request request;

@SuppressWarnings("unused")
@Mixin
private RenderDisabled renderDisabled;

@Inject
private ComponentResources resources;

@Environmental
private ValidationTracker tracker;

@BeginRender
void begin(MarkupWriter writer) {
String asSubmitted = tracker.getInput(this);

boolean checked = asSubmitted != null ? Boolean
.parseBoolean(asSubmitted) : value;

writer.element("input", "type", "button",

"value", "Edit",

"onclick", "document.getElementById('" + getClientId() + "').click()");

writer.end();

writer.element("input", "type", "checkbox",

"name", getControlName(),

"id", getClientId(),

"class", "t-invisible",

"checked", checked ? "checked" : null);

resources.renderInformalParameters(writer);

decorateInsideField();
}

@AfterRender
void after(MarkupWriter writer) {
writer.end(); // input
}

@Override
protected void processSubmission(String elementName) { String postedValue =
request.getParameter(elementName);

// record as "true" or "false"

tracker.recordInput(this, Boolean.toString(postedValue != null));

value = postedValue != null;
}
}

Thanks,
--James

-----Original Message-----
From: Jonathan O'Connor [mailto:ninki...@eircom.net] 
Sent: January-22-09 5:33 AM
To: Tapestry users
Subject: Re: T5: Component Suggestion/Question

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


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org
For additional commands, e-mail: users-h...@tapestry.apache.org

Reply via email to