Override BeanEditForm Submit Button

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

Override BeanEditForm Submit Button

Christopher
Hi,

I would simply like to override Tapestry's BeanEditForm default submit
button.  I've searched the internet but not found example code to achieve
this.  Below is my template code, which is for a BeanEditForm component
with two added fields.  The submit tag is not having the desired effect.
Of course, in addition to having my button appear, the default submit
button must not appear (I don't want two buttons).

Your help would be much appreciated.

Regards,

Chris.

[CODE]
    <form t:type="beaneditform" t:id="updateForm" object="user"
include="userName,firstName,lastName,phone,email,status"
add="passwordField,profileImage"
reorder="profileImage,userName,passwordField,firstName,lastName,phone,email,status"
t:submitLabel="message:title.updateUser">
        <p:passwordField>
            <label t:type="label" t:for="passwordField">Password</label>
            <t:passwordfield t:id="passwordField" value="password"
placeholder="*******"/>
        </p:passwordField>
        <p:profileImage>
            <label t:type="label" t:for="profileImage"/>
            <input t:type="upload" t:id="profileImage"
t:value="profileImage" placeholder="select profile image"/>
        </p:profileImage>
        <div>
            <input t:type="submit" value="${message:title.updateUser}"
class="button-user buttonGreen" />
        </div>
    </form>
[/CODE]


---------------------------------------------------------------------
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: Override BeanEditForm Submit Button

Kalle Korhonen-2
You want to use the underlying BeanEditor component that does most of the
work and build your own form around it, could start by copying the
BeanEditForm source:
https://github.com/apache/tapestry-5/blob/master/tapestry-core/src/main/resources/org/apache/tapestry5/corelib/components/BeanEditForm.tml

Kalle

On Fri, Dec 15, 2017 at 3:31 PM, Christopher Dodunski <
[hidden email]> wrote:

> Hi,
>
> I would simply like to override Tapestry's BeanEditForm default submit
> button.  I've searched the internet but not found example code to achieve
> this.  Below is my template code, which is for a BeanEditForm component
> with two added fields.  The submit tag is not having the desired effect.
> Of course, in addition to having my button appear, the default submit
> button must not appear (I don't want two buttons).
>
> Your help would be much appreciated.
>
> Regards,
>
> Chris.
>
> [CODE]
>     <form t:type="beaneditform" t:id="updateForm" object="user"
> include="userName,firstName,lastName,phone,email,status"
> add="passwordField,profileImage"
> reorder="profileImage,userName,passwordField,firstName,lastName,phone,
> email,status"
> t:submitLabel="message:title.updateUser">
>         <p:passwordField>
>             <label t:type="label" t:for="passwordField">Password</label>
>             <t:passwordfield t:id="passwordField" value="password"
> placeholder="*******"/>
>         </p:passwordField>
>         <p:profileImage>
>             <label t:type="label" t:for="profileImage"/>
>             <input t:type="upload" t:id="profileImage"
> t:value="profileImage" placeholder="select profile image"/>
>         </p:profileImage>
>         <div>
>             <input t:type="submit" value="${message:title.updateUser}"
> class="button-user buttonGreen" />
>         </div>
>     </form>
> [/CODE]
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>
Reply | Threaded
Open this post in threaded view
|

Re: Override BeanEditForm Submit Button

JumpStart
An example:

http://jumpstart.doublenegative.com.au/jumpstart/examples/input/morecontroledit1/1

Geoff

> On 17 Dec 2017, at 1:02 am, Kalle Korhonen <[hidden email]> wrote:
>
> You want to use the underlying BeanEditor component that does most of the
> work and build your own form around it, could start by copying the
> BeanEditForm source:
> https://github.com/apache/tapestry-5/blob/master/tapestry-core/src/main/resources/org/apache/tapestry5/corelib/components/BeanEditForm.tml
>
> Kalle
>
> On Fri, Dec 15, 2017 at 3:31 PM, Christopher Dodunski <
> [hidden email]> wrote:
>
>> Hi,
>>
>> I would simply like to override Tapestry's BeanEditForm default submit
>> button.  I've searched the internet but not found example code to achieve
>> this.  Below is my template code, which is for a BeanEditForm component
>> with two added fields.  The submit tag is not having the desired effect.
>> Of course, in addition to having my button appear, the default submit
>> button must not appear (I don't want two buttons).
>>
>> Your help would be much appreciated.
>>
>> Regards,
>>
>> Chris.
>>
>> [CODE]
>>    <form t:type="beaneditform" t:id="updateForm" object="user"
>> include="userName,firstName,lastName,phone,email,status"
>> add="passwordField,profileImage"
>> reorder="profileImage,userName,passwordField,firstName,lastName,phone,
>> email,status"
>> t:submitLabel="message:title.updateUser">
>>        <p:passwordField>
>>            <label t:type="label" t:for="passwordField">Password</label>
>>            <t:passwordfield t:id="passwordField" value="password"
>> placeholder="*******"/>
>>        </p:passwordField>
>>        <p:profileImage>
>>            <label t:type="label" t:for="profileImage"/>
>>            <input t:type="upload" t:id="profileImage"
>> t:value="profileImage" placeholder="select profile image"/>
>>        </p:profileImage>
>>        <div>
>>            <input t:type="submit" value="${message:title.updateUser}"
>> class="button-user buttonGreen" />
>>        </div>
>>    </form>
>> [/CODE]
>>
>>
>> ---------------------------------------------------------------------
>> 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: Override BeanEditForm Submit Button

Christopher
In reply to this post by Christopher
Thanks for your advice; apologies for the delay in responding.

Yes, I did exactly as you suggested.  Using the java/tml source code for
BeanEditForm, I created my own OptoEditForm component.  BeanEditForm
accepted a parameter for the submit button label.  In addition to this,
OptoEditForm accepts three more parameters: cancel button label, and CSS
child class names for each button.  The CSS parent class name is hard
coded, ensuring OptoEditForm always renders buttons should the overriding
CSS child parameters not be given (the child class merely overrides button
images and button colours, also hover effects).

The end result is an edit form that allows complete control over button
rendering.  I prefer to use large, graphical buttons, incorporating images
alongside the label, and with hover effects.  Now I can with ease.

If you feel this might be useful as a BeanEditForm enhancement for a next
Tapestry release, I'd be very happy to contribute the source code.

Regards,

Chris Dodunski.


> You want to use the underlying BeanEditor component that does most of the
> work and build your own form around it, could start by copying the
> BeanEditForm source:
> https://github.com/apache/tapestry-5/blob/master/tapestry-core/src/main/resources/org/apache/tapestry5/corelib/components/BeanEditForm.tml
>
> Kalle
>
> On Fri, Dec 15, 2017 at 3:31 PM, Christopher Dodunski <
> [hidden email]> wrote:
>
>> Hi,
>>
>> I would simply like to override Tapestry's BeanEditForm default submit
>> button.  I've searched the internet but not found example code to
>> achieve
>> this.  Below is my template code, which is for a BeanEditForm component
>> with two added fields.  The submit tag is not having the desired effect.
>> Of course, in addition to having my button appear, the default submit
>> button must not appear (I don't want two buttons).
>>
>> Your help would be much appreciated.
>>
>> Regards,
>>
>> Chris.
>>
>> [CODE]
>>     <form t:type="beaneditform" t:id="updateForm" object="user"
>> include="userName,firstName,lastName,phone,email,status"
>> add="passwordField,profileImage"
>> reorder="profileImage,userName,passwordField,firstName,lastName,phone,
>> email,status"
>> t:submitLabel="message:title.updateUser">
>>         <p:passwordField>
>>             <label t:type="label" t:for="passwordField">Password</label>
>>             <t:passwordfield t:id="passwordField" value="password"
>> placeholder="*******"/>
>>         </p:passwordField>
>>         <p:profileImage>
>>             <label t:type="label" t:for="profileImage"/>
>>             <input t:type="upload" t:id="profileImage"
>> t:value="profileImage" placeholder="select profile image"/>
>>         </p:profileImage>
>>         <div>
>>             <input t:type="submit" value="${message:title.updateUser}"
>> class="button-user buttonGreen" />
>>         </div>
>>     </form>
>> [/CODE]
>>
>>
>> ---------------------------------------------------------------------
>> 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.