How to use CSS buttons outside of forms

classic Classic list List threaded Threaded
12 messages Options
Reply | Threaded
Open this post in threaded view
|

How to use CSS buttons outside of forms

Christopher
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: [hidden email]
For additional commands, e-mail: [hidden email]

"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away." - Antoine de Saint-Exupéry.
Reply | Threaded
Open this post in threaded view
|

Re: How to use CSS buttons outside of forms

Chris Poulsen
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 <
[hidden email]> 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: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>
Reply | Threaded
Open this post in threaded view
|

Re: How to use CSS buttons outside of forms

Christopher
In reply to this post by Christopher
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: [hidden email]
For additional commands, e-mail: [hidden email]

"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away." - Antoine de Saint-Exupéry.
Reply | Threaded
Open this post in threaded view
|

Re: How to use CSS buttons outside of forms

Christopher
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: [hidden email]
For additional commands, e-mail: [hidden email]

"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away." - Antoine de Saint-Exupéry.
Reply | Threaded
Open this post in threaded view
|

Re: How to use CSS buttons outside of forms

JumpStart
A working example:

        http://jumpstart.doublenegative.com.au/jumpstart/examples/styling/linksandsubmits1

Geoff

> On 24 Dec 2017, at 6:33 am, Christopher Dodunski <[hidden email]> 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: [hidden email]
> For additional commands, e-mail: [hidden email]
>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: How to use CSS buttons outside of forms

Christopher
In reply to this post by Christopher
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: [hidden email]
For additional commands, e-mail: [hidden email]

"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away." - Antoine de Saint-Exupéry.
Reply | Threaded
Open this post in threaded view
|

Re: How to use CSS buttons outside of forms

Christopher
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: [hidden email]
For additional commands, e-mail: [hidden email]

"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away." - Antoine de Saint-Exupéry.
Reply | Threaded
Open this post in threaded view
|

Re: How to use CSS buttons outside of forms

Chris Poulsen
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 <
[hidden email]> 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: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>
Reply | Threaded
Open this post in threaded view
|

Re: How to use CSS buttons outside of forms

Christopher
In reply to this post by Christopher
Hi Chris,

Yes, you were absolutely correct.  Tapestry was changing my <input> tags
to <a> tags, and then of course the input.opto-button CSS code got totally
ignored.  Modifying the CSS from 'input' to 'anchor' type wasn't so
trivial, particulary with vertically centreing button labels, which is
easy with 'input' elements (vertical-align="middle").

I'm not sure why Tapestry converts all 'input' tags to 'anchor' tags.
Certainly it is a trap for unsuspecting HTML (TML) designers.

Thanks & regards,

Chris.


> 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 <
> [hidden email]> 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: [hidden email]
>> For additional commands, e-mail: [hidden email]
>>
>>
>



---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away." - Antoine de Saint-Exupéry.
Reply | Threaded
Open this post in threaded view
|

Re: How to use CSS buttons outside of forms

bobharner
I think the EventLink component did the only thing it could reasonably be
expected to do. When you add t:type=foo to an HTML tag you're telling
Tapestry to change the tag to a foo component. In the case of
t:type=eventlink, the EventLink component emits an <a> tag. That's the only
type of tag it knows how to create.

On Dec 26, 2017 4:04 AM, "Christopher Dodunski" <
[hidden email]> wrote:

Hi Chris,

Yes, you were absolutely correct.  Tapestry was changing my <input> tags
to <a> tags, and then of course the input.opto-button CSS code got totally
ignored.  Modifying the CSS from 'input' to 'anchor' type wasn't so
trivial, particulary with vertically centreing button labels, which is
easy with 'input' elements (vertical-align="middle").

I'm not sure why Tapestry converts all 'input' tags to 'anchor' tags.
Certainly it is a trap for unsuspecting HTML (TML) designers.

Thanks & regards,

Chris.


> 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 <
> [hidden email]> 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: [hidden email]
>> For additional commands, e-mail: [hidden email]
>>
>>
>



---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]
Reply | Threaded
Open this post in threaded view
|

Re: How to use CSS buttons outside of forms

Christopher
In reply to this post by Christopher
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: [hidden email]
For additional commands, e-mail: [hidden email]

"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away." - Antoine de Saint-Exupéry.
Reply | Threaded
Open this post in threaded view
|

Re: How to use CSS buttons outside of forms

Thiago H de Paula Figueiredo
On Wed, Dec 27, 2017 at 12:16 AM, Christopher Dodunski <
[hidden email]> 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