You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Christopher Dodunski <Ch...@christopher.net.nz> on 2017/12/23 07:31:26 UTC
How to use CSS buttons outside of forms
Hi all,
The Tapestry 'submit' component allows use of buttons defined in CSS by
way of the 'class' parameter. This is perfect for form buttons. But now
I want to use these same CSS buttons outside of forms. The natural choice
is Tapestry's ActionLink or EventLink component. But these components
don't appear to offer class parameter for passing CSS class names.
What do you recommend for wiring CSS buttons in the Tapestry template back
to Tapestry page class methods?
Thanks & regards,
Chris.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: How to use CSS buttons outside of forms
Posted by Chris Poulsen <ma...@nesluop.dk>.
Hi,
All the link types extends AbstractLink which supports informal
parameters... So basically just add a class="<your button classes>"
parameter and it will pass through to the html.
--
Chris
On Sat, Dec 23, 2017 at 8:31 AM, Christopher Dodunski <
ChrisFromTapestry@christopher.net.nz> wrote:
> Hi all,
>
> The Tapestry 'submit' component allows use of buttons defined in CSS by
> way of the 'class' parameter. This is perfect for form buttons. But now
> I want to use these same CSS buttons outside of forms. The natural choice
> is Tapestry's ActionLink or EventLink component. But these components
> don't appear to offer class parameter for passing CSS class names.
>
> What do you recommend for wiring CSS buttons in the Tapestry template back
> to Tapestry page class methods?
>
> Thanks & regards,
>
> Chris.
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
Re: How to use CSS buttons outside of forms
Posted by JumpStart <ge...@gmail.com>.
A working example:
http://jumpstart.doublenegative.com.au/jumpstart/examples/styling/linksandsubmits1
Geoff
> On 24 Dec 2017, at 6:33 am, Christopher Dodunski <Ch...@christopher.net.nz> wrote:
>
> Concerning use of the button HTML tag, I read the following...
>
> "Definition and Usage
>
> The <button> tag defines a clickable button.
>
> Inside a <button> element you can put content, like text or images. This
> is the difference between this element and buttons created with the
> <input> element.
>
> Tip: Always specify the type attribute for a <button> element. Different
> browsers use different default types for the <button> element."
>
> I will therefore try the below version of this HTML element in my Tapestry
> template (will avoid input/submit elements, as there is no form involved
> when clicking to delete a user).
>
> <button type="button" t:type="actionlink" t:id="deleteUser" value="Delete
> User" class="opto-button delete-user-btn"/>
>
> Regards,
>
> Chris.
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: How to use CSS buttons outside of forms
Posted by "Thiago H. de Paula Figueiredo" <th...@gmail.com>.
On Wed, Dec 27, 2017 at 12:16 AM, Christopher Dodunski <
ChrisFromTapestry@christopher.net.nz> wrote:
> Hi Chris & Bob,
>
Hello!
> I had wrongly assumed that Tapestry left the HTML markup as is, parsing
> only the t:xxx markup for 'wiring' webpage components to Java code.
>
Well, most of the time, Tapestry does left HTML unchanged. You've found one
of the exceptions. :)
--
Thiago
Re: How to use CSS buttons outside of forms
Posted by Christopher Dodunski <Ch...@christopher.net.nz>.
Hi Chris & Bob,
Thanks, yes, it's all part of the learning process. :-) Now that I know
that Tapestry ActionLink and EventLink only emit <a> tags, I'll in future
style all my buttons as a.xxx rather than input.xxx (style.css).
I had wrongly assumed that Tapestry left the HTML markup as is, parsing
only the t:xxx markup for 'wiring' webpage components to Java code.
Thank you all for your valuable clues and insight.
Chris.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: How to use CSS buttons outside of forms
Posted by Chris Poulsen <ma...@nesluop.dk>.
I mostly use <a> elements styled as buttons for this - A standard bootstrap
thing.
It sounds like your CSS is off if your elements disappear when rendering
them with tapestry, take a look at the generated HTML to see what is going
on. Maybe your <input> is rendered as <a> (It is "link" components so it
could be plausible, but I do not have the sources handy on this machine to
check).
I guess you could make a plain HTML button that delegates its clicks to a
hidden link using Javascript, if you cannot fix your CSS, but it feels like
a hack compared to just styling the links.
--
Chris
On Mon, Dec 25, 2017 at 3:48 AM, Christopher Dodunski <
ChrisFromTapestry@christopher.net.nz> wrote:
> This problem has proved trickier to solve than expected.
>
> The below tag produces a displayed button, but obviously without any
> functionality, as the tag contains no Tapestry-specific elements.
>
> <input type="button" class="opto-button delete-user-btn" value="Delete
> User"/>
>
> The problem comes on adding Tapestry markup, with the intention of
> invoking a deleteUser() method in the page class. Neither of the below
> produce a displayed button. In other words, as soon as I attempt to
> 'Tapestry-ise' the button, it vanishes.
>
> <input type="button" t:type="eventlink" t:event="deleteUser"
> class="opto-button delete-user-btn" value="Delete User"/>
>
> <t:eventlink t:event="deleteUser" class="opto-button delete-user-btn"
> value="Delete User"/>
>
> Chris.
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
Re: How to use CSS buttons outside of forms
Posted by Christopher Dodunski <Ch...@christopher.net.nz>.
This problem has proved trickier to solve than expected.
The below tag produces a displayed button, but obviously without any
functionality, as the tag contains no Tapestry-specific elements.
<input type="button" class="opto-button delete-user-btn" value="Delete
User"/>
The problem comes on adding Tapestry markup, with the intention of
invoking a deleteUser() method in the page class. Neither of the below
produce a displayed button. In other words, as soon as I attempt to
'Tapestry-ise' the button, it vanishes.
<input type="button" t:type="eventlink" t:event="deleteUser"
class="opto-button delete-user-btn" value="Delete User"/>
<t:eventlink t:event="deleteUser" class="opto-button delete-user-btn"
value="Delete User"/>
Chris.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: How to use CSS buttons outside of forms
Posted by Christopher Dodunski <Ch...@christopher.net.nz>.
Thanks Geoff. Are you in Aus? Greetings from NZ.
Your tag...
<t:eventlink t:event="NextPage" t:context="literal:EventLink with class
btn" class="btn btn-default">
...looks like it should do the trick. I assume that the t:context
parameter is optional, in this case just for passing onNextPage() a
literal string as argument?
Also, to keep the website designers happy, it might be preferable to use a
slightly different form for your tag (as below)? Though it would work
just the same.
<button type="button" t:type="eventlink" t:event="NextPage"
t:context="literal:EventLink with class btn" class="btn btn-default">
Regards,
Chris.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: How to use CSS buttons outside of forms
Posted by Christopher Dodunski <Ch...@christopher.net.nz>.
Concerning use of the button HTML tag, I read the following...
"Definition and Usage
The <button> tag defines a clickable button.
Inside a <button> element you can put content, like text or images. This
is the difference between this element and buttons created with the
<input> element.
Tip: Always specify the type attribute for a <button> element. Different
browsers use different default types for the <button> element."
I will therefore try the below version of this HTML element in my Tapestry
template (will avoid input/submit elements, as there is no form involved
when clicking to delete a user).
<button type="button" t:type="actionlink" t:id="deleteUser" value="Delete
User" class="opto-button delete-user-btn"/>
Regards,
Chris.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: How to use CSS buttons outside of forms
Posted by Christopher Dodunski <Ch...@christopher.net.nz>.
Oh, I thought I had tried that but the button didn't render. Hence my post.
Nevermind, I'll try it again in case the problem was elsewhere.
If ActionLink and Eventlink indeed accept 'class' parameter, it should go
easily.
Thanks,
Chris.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org