RE: T5: Component Suggestion/Question
Hello, Thanks for the help it got me in the right direction(I think:). >Very nice! You could even contribute it to the Tapestry components >collection! I would love to contribute if it was good enough, not sure how though. >String javascript = "Event.observe($(%s), 'click', >this.simplify.bindAsEventListener(this));"; > renderSupport.addScript(String.format(javascript, >element.getClientId(), message)); I am not sure what "this.simplify.bindAsEventListener(this)" was for or the "message" in renderSupport.addScript(String.format(javascript, element.getClientId(), message));. I looked into prototype following your lead and came up with: String javascript = "Event.observe($('%s'), 'click',function(){$('%s').click();});"; renderSupport.addScript(String.format(javascript, getClientId() + "Button",getClientId())); And it works like a charm. I don't know if it is the correct way to do it or not though. It basically puts the observe in the Tapestry.onDOMLoad function at the bottom of the page. Thanks, --James -Original Message- From: Thiago H. de Paula Figueiredo [mailto:thiag...@gmail.com] Sent: January-22-09 10:23 PM To: Tapestry users Subject: Re: T5: Component Suggestion/Question Em Thu, 22 Jan 2009 22:12:03 -0300, James Sherwood escreveu: > 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). Very nice! You could even contribute it to the Tapestry components collection! > 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? AFAIK this is much more of a Javascript issue than a Tapestry one. We should then use Prototype's event handling. You could use something like this (not tested): Component class: @Inject private RenderSupport renderSupport; @BeginRender void begin(MarkupWriter writer) { ... render HTML without any onclick attributes // Add a Javascript code line that will bind the click event of your // button to function String javascript = "Event.observe($(%s), 'click', this.simplify.bindAsEventListener(this));"; renderSupport.addScript(String.format(javascript, element.getClientId(), message)); } -- Thiago H. de Paula Figueiredo Independent Java consultant, developer, and instructor http://www.arsmachina.com.br/thiago - 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
Re: T5: Component Suggestion/Question
Em Thu, 22 Jan 2009 22:12:03 -0300, James Sherwood escreveu: 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). Very nice! You could even contribute it to the Tapestry components collection! 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? AFAIK this is much more of a Javascript issue than a Tapestry one. We should then use Prototype's event handling. You could use something like this (not tested): Component class: @Inject private RenderSupport renderSupport; @BeginRender void begin(MarkupWriter writer) { ... render HTML without any onclick attributes // Add a Javascript code line that will bind the click event of your // button to function String javascript = "Event.observe($(%s), 'click', this.simplify.bindAsEventListener(this));"; renderSupport.addScript(String.format(javascript, element.getClientId(), message)); } -- Thiago H. de Paula Figueiredo Independent Java consultant, developer, and instructor http://www.arsmachina.com.br/thiago - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org
RE: T5: Component Suggestion/Question
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: ${message:makeSimple} ${message:makeComplex} 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
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: ${message:makeSimple} ${message:makeComplex} 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 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
RE: T5: Component Suggestion/Question
Hello, I looked into the javascript and it seems quite embedded with the whole tapestry object etc(I even tried just outputting a button using the checkbox code but that didn't work, it may need an onchange event fired or something). I looked at the docs on FormFragment and it has a tidbit: The formFragment object has new methods to control the client-side behavior of the fragment: hide() Hides the element, using the configured client-side animation effect. It also has show(), however I cannot seem to get access to them. I have tried going through the document.forms but listing the elements doesn't show the form fragment element. I have tried document.getElementById and cannot get it. Any ideas? Thanks, --James -Original Message- From: Thiago H. de Paula Figueiredo [mailto:thiag...@gmail.com] Sent: January-21-09 10:11 PM To: Tapestry users Subject: Re: T5: Component Suggestion/Question Em Wed, 21 Jan 2009 22:01:43 -0300, James Sherwood 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 . . . -- Thiago H. de Paula Figueiredo Independent Java consultant, developer, and instructor http://www.arsmachina.com.br/thiago - 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
Re: T5: Component Suggestion/Question
Em Wed, 21 Jan 2009 22:01:43 -0300, James Sherwood 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 . . . -- Thiago H. de Paula Figueiredo Independent Java consultant, developer, and instructor http://www.arsmachina.com.br/thiago - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org
RE: T5: Component Suggestion/Question
You are like our own little tapestry tutor, and its MUCH appreciated:) > I don't think this would be possible only using the built-in Tapestry component, but I wish I am wrong. :) 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? If so would I just start by basing it off the built in checkbox component? Unfortunately the checkbox is such an ugly/clunky implementation of a really awesome little component. Thanks, --James -Original Message- From: Thiago H. de Paula Figueiredo [mailto:thiag...@gmail.com] Sent: January-21-09 7:32 PM To: Tapestry users Subject: Re: T5: Component Suggestion/Question Em Wed, 21 Jan 2009 15:36:21 -0300, James Sherwood escreveu: > Hello, Hi! > 1: I am using a checkbox for the modify feature but I would like to have > an image or text at the very least, is this possible?(I couldn't find a > base > component to satisfy this) I don't think this would be possible only using the built-in Tapestry component, but I wish I am wrong. :) > 2:I don't like the big red ugliness of the built in form error on submit > so I will just create another variable in the form fragment I fill(or > look at adjusting the css of that error reporting) but is it possible to > mimic or > link to the validation bubble that happens on the client side? You can add your own CSS overriding the default Errors component styling. This way, you can style the error messages in any way you want. By default, the generated div tag has class="t-error". That's one of the Tapestry strengths: its components have their default style, but you can always override them using ordinary CSS techniques. -- Thiago H. de Paula Figueiredo Independent Java consultant, developer, and instructor http://www.arsmachina.com.br/thiago - 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
Re: T5: Component Suggestion/Question
Em Wed, 21 Jan 2009 15:36:21 -0300, James Sherwood escreveu: Hello, Hi! 1: I am using a checkbox for the modify feature but I would like to have an image or text at the very least, is this possible?(I couldn't find a base component to satisfy this) I don't think this would be possible only using the built-in Tapestry component, but I wish I am wrong. :) 2:I don't like the big red ugliness of the built in form error on submit so I will just create another variable in the form fragment I fill(or look at adjusting the css of that error reporting) but is it possible to mimic or link to the validation bubble that happens on the client side? You can add your own CSS overriding the default Errors component styling. This way, you can style the error messages in any way you want. By default, the generated div tag has class="t-error". That's one of the Tapestry strengths: its components have their default style, but you can always override them using ordinary CSS techniques. -- Thiago H. de Paula Figueiredo Independent Java consultant, developer, and instructor http://www.arsmachina.com.br/thiago - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org
RE: T5: Component Suggestion/Question
Hello, I have it created but I have a few questions(code is below): 1: I am using a checkbox for the modify feature but I would like to have an image or text at the very least, is this possible?(I couldn't find a base component to satisfy this) 2:I don't like the big red ugliness of the built in form error on submit so I will just create another variable in the form fragment I fill(or look at adjusting the css of that error reporting) but is it possible to mimic or link to the validation bubble that happens on the client side? ${firstName} @InjectComponent private Zone zone; @Property private String _firstName = "Fname"; @Property private boolean _modifyFirstName; @Component(id = "firstName") private TextField _firstnameField; @Component(id = "form") private Form _form; @OnEvent(value = EventConstants.VALIDATE_FORM, component="form") public Object validate() { if (_firstName == null ||_firstName.trim().equals("")) { //validation errors _form.recordError("must have a fname"); return zone; } else { return null; // let the form submission process continue } } @OnEvent(value = EventConstants.SUCCESS, component="form") public Object sucess() { // do whatever you want _modifyFirstName = false; return zone; } Thanks, James -Original Message- From: Thiago H. de Paula Figueiredo [mailto:thiag...@gmail.com] Sent: January-21-09 2:25 PM To: Tapestry users Subject: Re: T5: Component Suggestion/Question Em Wed, 21 Jan 2009 14:08:09 -0300, James Sherwood escreveu: > Thanks a bunch, :) > I was actually looking at the screen cast on Ajax and Zones as I > suspected this would be accomplished with zones. You can do a lot with them. Just be creative. :) > Ideally what I would like to do is create this but have it just output > the value with a small edit button and a hidden text field. It looks like the FormFragment does at least partly what you want. Its documentation has a good example. > When you click the edit button it shows the text field and then submits > the form much like the T5Component InPlaceEditor but this would allow > validation if the hide/show part does not mess that up. How does it mess up? I use submit forms with AJAX all the time and the validation messages never got messed up. -- Thiago H. de Paula Figueiredo Independent Java consultant, developer, and instructor http://www.arsmachina.com.br/thiago - 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
Re: T5: Component Suggestion/Question
Em Wed, 21 Jan 2009 14:08:09 -0300, James Sherwood escreveu: Thanks a bunch, :) I was actually looking at the screen cast on Ajax and Zones as I suspected this would be accomplished with zones. You can do a lot with them. Just be creative. :) Ideally what I would like to do is create this but have it just output the value with a small edit button and a hidden text field. It looks like the FormFragment does at least partly what you want. Its documentation has a good example. When you click the edit button it shows the text field and then submits the form much like the T5Component InPlaceEditor but this would allow validation if the hide/show part does not mess that up. How does it mess up? I use submit forms with AJAX all the time and the validation messages never got messed up. -- Thiago H. de Paula Figueiredo Independent Java consultant, developer, and instructor http://www.arsmachina.com.br/thiago - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org
RE: T5: Component Suggestion/Question
Thanks a bunch, I was actually looking at the screen cast on Ajax and Zones as I suspected this would be accomplished with zones. Ideally what I would like to do is create this but have it just output the value with a small edit button and a hidden text field. When you click the edit button it shows the text field and then submits the form much like the T5Component InPlaceEditor but this would allow validation if the hide/show part does not mess that up. I believe it's possible but to turn it into a component may be really tricky. --James -Original Message- From: Thiago H. de Paula Figueiredo [mailto:thiag...@gmail.com] Sent: January-21-09 1:49 PM To: Tapestry users Subject: Re: T5: Component Suggestion/Question Em Wed, 21 Jan 2009 12:20:33 -0300, James Sherwood escreveu: > I need this page to be dynamic whereby and admin can change fields > without refreshing the page. Not refreshing a page => AJAX! Put your Form inside a Zone and submit the form through AJAX. Something like: public Object validate() { if (form has validation errors) { return zone; } else { return null; // let the form submission process continue } } @OnEvent(value = EventConstants.SUCCESS, component="form"> public Object sucess() { // do whatever you want return zone; } -- Thiago H. de Paula Figueiredo Independent Java consultant, developer, and instructor http://www.arsmachina.com.br/thiago - 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
Re: T5: Component Suggestion/Question
Em Wed, 21 Jan 2009 12:20:33 -0300, James Sherwood escreveu: I need this page to be dynamic whereby and admin can change fields without refreshing the page. Not refreshing a page => AJAX! Put your Form inside a Zone and submit the form through AJAX. Something like: public Object validate() { if (form has validation errors) { return zone; } else { return null; // let the form submission process continue } } @OnEvent(value = EventConstants.SUCCESS, component="form"> public Object sucess() { // do whatever you want return zone; } -- Thiago H. de Paula Figueiredo Independent Java consultant, developer, and instructor http://www.arsmachina.com.br/thiago - To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org