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
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:
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
T5: Component Suggestion/Question
Hello, I am trying to create an application that just has a single page basically with many fields about a member. I need this page to be dynamic whereby and admin can change fields without refreshing the page. The T5Component InPlaceEditor sort of works however there is no validation and it is a one way connection meaning if they put invalid data in, there is no way to let them know. Can anyone suggest a component I might use(or point me in the right direction to build one) that basically would allow the admin to make changes to fields on the page without refreshing the page but has validation? Thanks in advance, --James
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
jsherw...@rgisolutions.com 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:
div t:type=Zone t:id=zone
form t:type=form t:zone=zone t:id=form
div t:type=Errors/
.. your fields here.
/form
/div
@InjectComponent
private Zone zone;
@OnEvent(value = EventConstants.VALIDATE_FORM, component=form
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 14:08:09 -0300, James Sherwood jsherw...@rgisolutions.com 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
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?
div t:type=Zone t:id=zone
form t:type=form t:zone=zone t:id=form
div t:type=Errors/
${firstName} t:checkbox t:id=modifyFirstName t:mixins=triggerfragment
fragment=firstNameModify/
t:formfragment t:id=firstNameModify visible=modifyFirstName
input t:type=TextField t:id=firstName t:validate=required/
input type=submit value=Login/
/t:formfragment
/form
/div
@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
jsherw...@rgisolutions.com 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 15:36:21 -0300, James Sherwood jsherw...@rgisolutions.com 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
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 jsherw...@rgisolutions.com 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 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 . . . -- 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
