You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Mark Horn <ma...@agilesrc.com> on 2008/01/31 16:00:34 UTC
[T5] best practice to cancel edit page
Geoff, or others :)
I found the posting below suggesting making links/buttons/submits look
the same as described at
http://particletree.com/features/rediscovering-the-button-element/
and used by Jumpstart (http://files.doublenegative.com.au/jumpstart/)
I tried this out and all looks/works great in FireFox but does not
work correctly in IE. Any ideas on how to tweak these for IE? or any
other Best Practice on how to support this type of thing?
The original question was Best Practice for cancel an edit page. ie.
have a Submit button that is 'Save' a link that is 'Cancel' (don't
want validation) and want to have them together and look good.
[Save] [Cancel]
Thanks,
Mark
-------------------------------------
Re: [T5] best practice to cancel edit page
from Tapestry User by jeffrey ai <jf...@gmail.com>
That's great to know!
Thanks for your tips, Geoff.
Cheers,
Jeffrey Ai
Geoff Callender-2 wrote:
>
> Hi Jeffrey,
>
> What you do is change the submits and the links to look the same,
> which is not quite the same as the browser-generated button, but on
> the plus-side they'll look the same in any browser. This approach is
> used in many commercial sites eg. banking sites. One place that
> describes button-styling is
> http://particletree.com/features/rediscovering-the-button-element/
> .
>
> eg. Here are 3 "buttons" on a UserEdit page:
>
> <div class="buttons">
> <input type="submit" value="Save"/>
> Refresh
> Cancel
> </div>
>
> and here's some css to style them to look the same:
>
> .buttons a, .buttons input { margin:0 7px 0 0; background-
> color:#f5f5f5; border:1px solid #dedede; border-top:1px solid #eee;
> border-left:1px solid #eee; font-family:"Lucida Grande", Tahoma,
> Arial, Verdana, sans-serif; font-size:100%; line-height:130%; text-
> decoration:none; font-weight:bold; color:#565656; cursor:pointer;
> padding:5px 10px 6px 7px; /* Links and submits */ }
> .buttons input { width:auto; overflow:visible; padding:4px 10px 3px
> 7px; /* IE6 */ }
> .buttons input[type] { padding:5px 10px 5px 7px; /* Firefox */ line-
> height:17px; /* Safari */ }
> *:first-child+html input[type] { padding:4px 10px 3px 7px; /* IE7 */ }
> .buttons input img, .buttons a img { margin:0 3px -3px 0 !important;
> padding:0; border:none; width:16px; height:16px; }
>
> A fuller example is in the code of JumpStart.
>
> Cheers,
>
> Geoff
> http://files.doublenegative.com.au/jumpstart/
>
> On 22/12/2007, at 4:40 AM, jeffrey ai wrote:
>
>>
>> Geoff,
>>
>> I am not quite familiar with CSS.
>> I think ActionLink or PageLink could only be rendered to an Anchor
>> Link.
>> I doubt CSS can change its look like to a button.
>>
>> Cheers,
>> Jeffrey Ai
>>
>>
>> Geoff Callender-2 wrote:
>>>
>>> Another technique is to use an ActionLink or PageLink for cancel and
>>> refresh functions. To make the submit button and ActionLink share
>>> the
>>> same styling use css. I think Howard recommends this approach.
>>>
>>> Cheers,
>>> Geoff
>>>
>>> On 21/12/2007, at 4:37 AM, jeffrey ai wrote:
>>>
>>>>
>>>> Homburg,
>>>>
>>>> I noticed the same problem too. If you have a normal cancel button
>>>> in a T5
>>>> form as your save button, a post request will be sent back to the
>>>> page to
>>>> go through the validation method and even onSuccess() method.
>>>>
>>>> My solution to this problem is to create an ActionLinkButton
>>>> component. It's
>>>> almost the same with the ActionLink component, Instead of create a
>>>> normal
>>>> link, it creates a button link like below:
>>>>
>>>> <input type="button" value="cancel"
>>>> onclick="parent.location='/xxx/YOURPAGE.cancel'" id="cancel"/>
>>>>
>>>> In your page, you could have an onActionFromCancel() method to do
>>>> whatever
>>>> redirection you want.
>>>>
>>>> Cheers,
>>>> Jeffrey Ai
>>>>
>>>>
>>>>
>>>> Sven Homburg-2 wrote:
>>>>>
>>>>> hi there,
>>>>>
>>>>> who can me explain the best practice to cancel edit page?
>>>>>
>>>>> i have a save- and cancel button (both submit components)
>>>>> surrounded by
>>>>> a form component.
>>>>>
>>>>> if user press the cancel button, the edit form should make nothing
>>>>> than
>>>>> leave the page.
>>>>> without prepare, validation, etc
>>>>>
>>>>> is this possible?
>>>>>
>>>>> --
>>>>> best regards
>>>>> S.Homburg
>>>>>
>>>>>
>>>>>
>>>>> ---------------------------------------------------------------------
>>>>> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>>>>> For additional commands, e-mail: users-help@tapestry.apache.org
>>>>>
>>>>>
>>>>>
>>>>
>>>> --
>>>> View this message in context:
>>>> http://www.nabble.com/-T5--best-practice-to-cancel-edit-page-tp14427892p14441353.html
>>>> Sent from the Tapestry - User mailing list archive at Nabble.com.
>>>>
>>>>
>>>> ---------------------------------------------------------------------
>>>> 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
>>>
>>>
>>>
>>
>> --
>> View this message in context:
>> http://www.nabble.com/-T5--best-practice-to-cancel-edit-page-tp14427892p14459523.html
>> Sent from the Tapestry - User mailing list archive at Nabble.com.
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>> For additional commands, e-mail: users-help@tapestry.apache.org
>>
>
>
>
--
View this message in context:
http://www.nabble.com/-T5--best-practice-to-cancel-edit-page-tp14427892p14464072.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Add starShareEmailAdd tags
View more items from "Tapestry User"
Or go
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: [T5] best practice to cancel edit page
Posted by Kevin Menard <km...@servprise.com>.
IIRC, when I did this in the past, I had to add an onclick handler to the
button for IE. Also watch any hover effects you have for anchors, because
in IE, it'll render through the button (it won't in Firefox, Safari, or
Opera).
--
Kevin
On 1/31/08 10:00 AM, in article
d9107ff70801310700icd997bdx6b8424aa5068dc2@mail.gmail.com, "Mark Horn"
<ma...@agilesrc.com> wrote:
> Geoff, or others :)
>
> I found the posting below suggesting making links/buttons/submits look
> the same as described at
> http://particletree.com/features/rediscovering-the-button-element/
> and used by Jumpstart (http://files.doublenegative.com.au/jumpstart/)
>
> I tried this out and all looks/works great in FireFox but does not
> work correctly in IE. Any ideas on how to tweak these for IE? or any
> other Best Practice on how to support this type of thing?
>
> The original question was Best Practice for cancel an edit page. ie.
> have a Submit button that is 'Save' a link that is 'Cancel' (don't
> want validation) and want to have them together and look good.
>
> [Save] [Cancel]
>
> Thanks,
> Mark
>
> -------------------------------------
>
> Re: [T5] best practice to cancel edit page
> from Tapestry User by jeffrey ai <jf...@gmail.com>
>
> That's great to know!
> Thanks for your tips, Geoff.
>
> Cheers,
> Jeffrey Ai
>
>
> Geoff Callender-2 wrote:
>>
>> Hi Jeffrey,
>>
>> What you do is change the submits and the links to look the same,
>> which is not quite the same as the browser-generated button, but on
>> the plus-side they'll look the same in any browser. This approach is
>> used in many commercial sites eg. banking sites. One place that
>> describes button-styling is
>> http://particletree.com/features/rediscovering-the-button-element/
>> .
>>
>> eg. Here are 3 "buttons" on a UserEdit page:
>>
>> <div class="buttons">
>> <input type="submit" value="Save"/>
>> Refresh
>> Cancel
>> </div>
>>
>> and here's some css to style them to look the same:
>>
>> .buttons a, .buttons input { margin:0 7px 0 0; background-
>> color:#f5f5f5; border:1px solid #dedede; border-top:1px solid #eee;
>> border-left:1px solid #eee; font-family:"Lucida Grande", Tahoma,
>> Arial, Verdana, sans-serif; font-size:100%; line-height:130%; text-
>> decoration:none; font-weight:bold; color:#565656; cursor:pointer;
>> padding:5px 10px 6px 7px; /* Links and submits */ }
>> .buttons input { width:auto; overflow:visible; padding:4px 10px 3px
>> 7px; /* IE6 */ }
>> .buttons input[type] { padding:5px 10px 5px 7px; /* Firefox */ line-
>> height:17px; /* Safari */ }
>> *:first-child+html input[type] { padding:4px 10px 3px 7px; /* IE7 */ }
>> .buttons input img, .buttons a img { margin:0 3px -3px 0 !important;
>> padding:0; border:none; width:16px; height:16px; }
>>
>> A fuller example is in the code of JumpStart.
>>
>> Cheers,
>>
>> Geoff
>> http://files.doublenegative.com.au/jumpstart/
>>
>> On 22/12/2007, at 4:40 AM, jeffrey ai wrote:
>>
>>>
>>> Geoff,
>>>
>>> I am not quite familiar with CSS.
>>> I think ActionLink or PageLink could only be rendered to an Anchor
>>> Link.
>>> I doubt CSS can change its look like to a button.
>>>
>>> Cheers,
>>> Jeffrey Ai
>>>
>>>
>>> Geoff Callender-2 wrote:
>>>>
>>>> Another technique is to use an ActionLink or PageLink for cancel and
>>>> refresh functions. To make the submit button and ActionLink share
>>>> the
>>>> same styling use css. I think Howard recommends this approach.
>>>>
>>>> Cheers,
>>>> Geoff
>>>>
>>>> On 21/12/2007, at 4:37 AM, jeffrey ai wrote:
>>>>
>>>>>
>>>>> Homburg,
>>>>>
>>>>> I noticed the same problem too. If you have a normal cancel button
>>>>> in a T5
>>>>> form as your save button, a post request will be sent back to the
>>>>> page to
>>>>> go through the validation method and even onSuccess() method.
>>>>>
>>>>> My solution to this problem is to create an ActionLinkButton
>>>>> component. It's
>>>>> almost the same with the ActionLink component, Instead of create a
>>>>> normal
>>>>> link, it creates a button link like below:
>>>>>
>>>>> <input type="button" value="cancel"
>>>>> onclick="parent.location='/xxx/YOURPAGE.cancel'" id="cancel"/>
>>>>>
>>>>> In your page, you could have an onActionFromCancel() method to do
>>>>> whatever
>>>>> redirection you want.
>>>>>
>>>>> Cheers,
>>>>> Jeffrey Ai
>>>>>
>>>>>
>>>>>
>>>>> Sven Homburg-2 wrote:
>>>>>>
>>>>>> hi there,
>>>>>>
>>>>>> who can me explain the best practice to cancel edit page?
>>>>>>
>>>>>> i have a save- and cancel button (both submit components)
>>>>>> surrounded by
>>>>>> a form component.
>>>>>>
>>>>>> if user press the cancel button, the edit form should make nothing
>>>>>> than
>>>>>> leave the page.
>>>>>> without prepare, validation, etc
>>>>>>
>>>>>> is this possible?
>>>>>>
>>>>>> --
>>>>>> best regards
>>>>>> S.Homburg
>>>>>>
>>>>>>
>>>>>>
>>>>>> ---------------------------------------------------------------------
>>>>>> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>>>>>> For additional commands, e-mail: users-help@tapestry.apache.org
>>>>>>
>>>>>>
>>>>>>
>>>>>
>>>>> --
>>>>> View this message in context:
>>>>> http://www.nabble.com/-T5--best-practice-to-cancel-edit-page-tp14427892p14
>>>>> 441353.html
>>>>> Sent from the Tapestry - User mailing list archive at Nabble.com.
>>>>>
>>>>>
>>>>> ---------------------------------------------------------------------
>>>>> 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
>>>>
>>>>
>>>>
>>>
>>> --
>>> View this message in context:
>>> http://www.nabble.com/-T5--best-practice-to-cancel-edit-page-tp14427892p1445
>>> 9523.html
>>> Sent from the Tapestry - User mailing list archive at Nabble.com.
>>>
>>>
>>> ---------------------------------------------------------------------
>>> 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: [T5] best practice to cancel edit page
Posted by Davor Hrg <hr...@gmail.com>.
I've created a patch for submit component
https://issues.apache.org/jira/browse/TAPESTRY-2109
ior you can try this component (iti is a modified copy of original Submit)
public final class Submit2 extends AbstractField
{
static final String SELECTED_EVENT = "selected";
static final String CANCEL_EVENT = "cancel";
/**
* If true (the default), then any notification sent by the
component will be deferred until the end of the form
* submission (this is usually desirable).
*/
@Parameter
private boolean _defer = true;
/**
* Determines the button behavior, <b>"submit"</b> - a normal form
button, <b>"reset"</b> - reset form (locally),
* "cancel" - works like an actionlink, generates a "cancel" event
instead of "selected" and the form is not submitted
* (if javascript is disabled form will be submitted, and "cancel"
event fired as well),
* <b>"submitcancel"</b> - works like "cancel" but behaves
consistently with and without javascript
* submission (this is usually desirable).
*/
@Parameter(defaultPrefix=TapestryConstants.LITERAL_BINDING_PREFIX)
private String _type = "submit";
@Environmental
private FormSupport _formSupport;
@Environmental
private Heartbeat _heartbeat;
@Inject
private ComponentResources _resources;
@Inject
private Request _request;
@Inject
@Traditional
private ComponentEventResultProcessor _eventResultProcessor;
@SuppressWarnings("unused")
@Mixin
private RenderDisabled _renderDisabled;
public Submit2()
{
}
Submit2(Request request)
{
_request = request;
}
void beginRender(MarkupWriter writer)
{
String inputType = _type.equalsIgnoreCase("reset") ? "reset":"submit";
writer.element("input", "type", inputType, "name",
getElementName(), "id", getClientId());
//form will not be submitted (behaves like an action link) and
cancel event will be generated
if(_type.equalsIgnoreCase("cancel"))
writer.attributes("onclick",String.format("document,location='%s';return
false;", _resources.createActionLink(CANCEL_EVENT, true)));
//submit the form but skip client validation
if(_type.equalsIgnoreCase("submitcancel"))
writer.attributes("onclick",String.format("$('%s').onsubmit=null",
_formSupport.getClientId()));
_resources.renderInformalParameters(writer);
}
void afterRender(MarkupWriter writer)
{
writer.end();
}
@Override
protected void processSubmission(String elementName)
{
String value = _request.getParameter(elementName);
if (value == null) return;
Runnable sendNotification = new Runnable()
{
public void run()
{
// cancel event link will be generated with
javascript, if javascript is working this code
// will not be reached for type=cancel, however if
javascript is disabled we trigger the different event from here
boolean isCancel =
_type.equalsIgnoreCase("submitcancel") ||
_type.equalsIgnoreCase("cancel");
String eventType = isCancel ? CANCEL_EVENT : SELECTED_EVENT;
ComponentEventCallback callback = isCancel ? new
ComponentResultProcessorWrapper(_eventResultProcessor) : null;
_resources.triggerEvent(eventType, null, callback);
}
};
// When not deferred, don't wait, fire the event now
(actually, at the end of the current
// heartbeat). This is most likely because the Submit is
inside a Loop and some contextual
// information will change if we defer.
if (_defer) _formSupport.defer(sendNotification);
else _heartbeat.defer(sendNotification);
}
// For testing:
void setDefer(boolean defer)
{
_defer = defer;
}
void setType(String type)
{
_type = type;
}
void setup(ComponentResources resources, FormSupport support,
Heartbeat heartbeat)
{
_resources = resources;
_formSupport = support;
_heartbeat = heartbeat;
}
}
On Jan 31, 2008 11:51 PM, Geoff Callender
<ge...@gmail.com> wrote:
> I had to tweak it a bit for IE. Try this example as a starting point...
>
> [Save] [Password...][Refresh][Cancel]
>
> <div class="buttons">
> <table>
> <tr>
> <td><input type="submit" value="Save" class="positive"/></td>
> <td><a t:type="pagelink" t:page="security/UserPasswordChange"
> t:context="user.id" title="Change Password" href="#">Password...</a></
> td>
> <td><a t:type="pagelink" t:page="security/UserEdit"
> t:context="user.id" title="Refresh">Refresh</a></td>
> <td><a t:type="actionlink" t:id="Cancel" href="#">Cancel</a></td>
> </tr>
> </table>
> </div>
>
> /*
> Button styling based on http://particletree.com/features/rediscovering-the-button-element/
> */
> .buttons { float: right; }
> .buttons td { text-align: center; }
> .buttons a, .buttons input { font-family: Verdana, Arial, Helvetica,
> sans-serif; font-weight: bold;
> width: 7em; border: 2px solid #8cacbb; display: block; }
> .buttons a { padding: 4px 0; text-decoration: none; background:
> #e9f3f6; }
> .buttons input { padding: 3px 10px; margin: 0; cursor: pointer; }
> .buttons input[type] { /* Safari */ line-height: 17px; }
> *:first-child+html .buttons input[type] { /* IE 7 */ line-height:
> 13px; }
>
> /* Standard */
> .buttons a, .buttons input { background-color:#d5f5f5; color:#529214; }
> .buttons a:hover, .buttons input:hover
> { background-color:#dff4ff; color:#336699; }
> .buttons a:active { background-color:#6299c5; color:#fff; }
>
> /* Positive */
> .buttons a.positive, .buttons input.positive
> { color:#4d798e; }
> .buttons a.positive:hover, .buttons input.positive:hover
> { background-color:#E6EFC2; color:#529214; }
> .buttons a.positive:active { background-color:#529214; color:#fff; }
>
> /* Negative */
> .buttons a.negative, .buttons input.negative
> { color:#d12f19; }
> .buttons a.negative:hover, .buttons input.negative:hover
> { background:#fbe3e4; color:#d12f19; }
> .buttons a.negative:active { background-color:#d12f19; color:#fff; }
>
> Cheers,
>
> Geoff
>
>
> On 01/02/2008, at 2:00 AM, Mark Horn wrote:
>
> > Geoff, or others :)
> >
> > I found the posting below suggesting making links/buttons/submits look
> > the same as described at
> > http://particletree.com/features/rediscovering-the-button-element/
> > and used by Jumpstart (http://files.doublenegative.com.au/jumpstart/)
> >
> > I tried this out and all looks/works great in FireFox but does not
> > work correctly in IE. Any ideas on how to tweak these for IE? or any
> > other Best Practice on how to support this type of thing?
> >
> > The original question was Best Practice for cancel an edit page. ie.
> > have a Submit button that is 'Save' a link that is 'Cancel' (don't
> > want validation) and want to have them together and look good.
> >
> > [Save] [Cancel]
> >
> > Thanks,
> > Mark
> >
> > -------------------------------------
> >
> > Re: [T5] best practice to cancel edit page
> > from Tapestry User by jeffrey ai <jf...@gmail.com>
> >
> > That's great to know!
> > Thanks for your tips, Geoff.
> >
> > Cheers,
> > Jeffrey Ai
> >
> >
> > Geoff Callender-2 wrote:
> >>
> >> Hi Jeffrey,
> >>
> >> What you do is change the submits and the links to look the same,
> >> which is not quite the same as the browser-generated button, but on
> >> the plus-side they'll look the same in any browser. This approach is
> >> used in many commercial sites eg. banking sites. One place that
> >> describes button-styling is
> >> http://particletree.com/features/rediscovering-the-button-element/
> >> .
> >>
> >> eg. Here are 3 "buttons" on a UserEdit page:
> >>
> >> <div class="buttons">
> >> <input type="submit" value="Save"/>
> >> Refresh
> >> Cancel
> >> </div>
> >>
> >> and here's some css to style them to look the same:
> >>
> >> .buttons a, .buttons input { margin:0 7px 0 0; background-
> >> color:#f5f5f5; border:1px solid #dedede; border-top:1px solid #eee;
> >> border-left:1px solid #eee; font-family:"Lucida Grande", Tahoma,
> >> Arial, Verdana, sans-serif; font-size:100%; line-height:130%; text-
> >> decoration:none; font-weight:bold; color:#565656; cursor:pointer;
> >> padding:5px 10px 6px 7px; /* Links and submits */ }
> >> .buttons input { width:auto; overflow:visible; padding:4px 10px 3px
> >> 7px; /* IE6 */ }
> >> .buttons input[type] { padding:5px 10px 5px 7px; /* Firefox */ line-
> >> height:17px; /* Safari */ }
> >> *:first-child+html input[type] { padding:4px 10px 3px 7px; /* IE7
> >> */ }
> >> .buttons input img, .buttons a img { margin:0 3px -3px 0 !important;
> >> padding:0; border:none; width:16px; height:16px; }
> >>
> >> A fuller example is in the code of JumpStart.
> >>
> >> Cheers,
> >>
> >> Geoff
> >> http://files.doublenegative.com.au/jumpstart/
> >>
> >> On 22/12/2007, at 4:40 AM, jeffrey ai wrote:
> >>
> >>>
> >>> Geoff,
> >>>
> >>> I am not quite familiar with CSS.
> >>> I think ActionLink or PageLink could only be rendered to an Anchor
> >>> Link.
> >>> I doubt CSS can change its look like to a button.
> >>>
> >>> Cheers,
> >>> Jeffrey Ai
> >>>
> >>>
> >>> Geoff Callender-2 wrote:
> >>>>
> >>>> Another technique is to use an ActionLink or PageLink for cancel
> >>>> and
> >>>> refresh functions. To make the submit button and ActionLink share
> >>>> the
> >>>> same styling use css. I think Howard recommends this approach.
> >>>>
> >>>> Cheers,
> >>>> Geoff
> >>>>
> >>>> On 21/12/2007, at 4:37 AM, jeffrey ai wrote:
> >>>>
> >>>>>
> >>>>> Homburg,
> >>>>>
> >>>>> I noticed the same problem too. If you have a normal cancel
> >>>>> button
> >>>>> in a T5
> >>>>> form as your save button, a post request will be sent back to the
> >>>>> page to
> >>>>> go through the validation method and even onSuccess() method.
> >>>>>
> >>>>> My solution to this problem is to create an ActionLinkButton
> >>>>> component. It's
> >>>>> almost the same with the ActionLink component, Instead of create a
> >>>>> normal
> >>>>> link, it creates a button link like below:
> >>>>>
> >>>>> <input type="button" value="cancel"
> >>>>> onclick="parent.location='/xxx/YOURPAGE.cancel'" id="cancel"/>
> >>>>>
> >>>>> In your page, you could have an onActionFromCancel() method to do
> >>>>> whatever
> >>>>> redirection you want.
> >>>>>
> >>>>> Cheers,
> >>>>> Jeffrey Ai
> >>>>>
> >>>>>
> >>>>>
> >>>>> Sven Homburg-2 wrote:
> >>>>>>
> >>>>>> hi there,
> >>>>>>
> >>>>>> who can me explain the best practice to cancel edit page?
> >>>>>>
> >>>>>> i have a save- and cancel button (both submit components)
> >>>>>> surrounded by
> >>>>>> a form component.
> >>>>>>
> >>>>>> if user press the cancel button, the edit form should make
> >>>>>> nothing
> >>>>>> than
> >>>>>> leave the page.
> >>>>>> without prepare, validation, etc
> >>>>>>
> >>>>>> is this possible?
> >>>>>>
> >>>>>> --
> >>>>>> best regards
> >>>>>> S.Homburg
> >>>>>>
> >>>>>>
> >>>>>>
> >>>>>> ---------------------------------------------------------------------
> >>>>>> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> >>>>>> For additional commands, e-mail: users-help@tapestry.apache.org
> >>>>>>
> >>>>>>
> >>>>>>
> >>>>>
> >>>>> --
> >>>>> View this message in context:
> >>>>> http://www.nabble.com/-T5--best-practice-to-cancel-edit-page-tp14427892p14441353.html
> >>>>> Sent from the Tapestry - User mailing list archive at Nabble.com.
> >>>>>
> >>>>>
> >>>>> ---------------------------------------------------------------------
> >>>>> 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
> >>>>
> >>>>
> >>>>
> >>>
> >>> --
> >>> View this message in context:
> >>> http://www.nabble.com/-T5--best-practice-to-cancel-edit-page-tp14427892p14459523.html
> >>> Sent from the Tapestry - User mailing list archive at Nabble.com.
> >>>
> >>>
> >>> ---------------------------------------------------------------------
> >>> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> >>> For additional commands, e-mail: users-help@tapestry.apache.org
> >>>
> >>
> >>
> >>
> >
> > --
> > View this message in context:
> > http://www.nabble.com/-T5--best-practice-to-cancel-edit-page-tp14427892p14464072.html
> > Sent from the Tapestry - User mailing list archive at Nabble.com.
> >
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> > For additional commands, e-mail: users-help@tapestry.apache.org
> >
> >
> >
> >
> >
> >
> > Add starShareEmailAdd tags
> >
> >
> >
> >
> > View more items from "Tapestry User"
> >
> > Or go
> >
> > ---------------------------------------------------------------------
> > 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: [T5] best practice to cancel edit page
Posted by Geoff Callender <ge...@gmail.com>.
I had to tweak it a bit for IE. Try this example as a starting point...
[Save] [Password...][Refresh][Cancel]
<div class="buttons">
<table>
<tr>
<td><input type="submit" value="Save" class="positive"/></td>
<td><a t:type="pagelink" t:page="security/UserPasswordChange"
t:context="user.id" title="Change Password" href="#">Password...</a></
td>
<td><a t:type="pagelink" t:page="security/UserEdit"
t:context="user.id" title="Refresh">Refresh</a></td>
<td><a t:type="actionlink" t:id="Cancel" href="#">Cancel</a></td>
</tr>
</table>
</div>
/*
Button styling based on http://particletree.com/features/rediscovering-the-button-element/
*/
.buttons { float: right; }
.buttons td { text-align: center; }
.buttons a, .buttons input { font-family: Verdana, Arial, Helvetica,
sans-serif; font-weight: bold;
width: 7em; border: 2px solid #8cacbb; display: block; }
.buttons a { padding: 4px 0; text-decoration: none; background:
#e9f3f6; }
.buttons input { padding: 3px 10px; margin: 0; cursor: pointer; }
.buttons input[type] { /* Safari */ line-height: 17px; }
*:first-child+html .buttons input[type] { /* IE 7 */ line-height:
13px; }
/* Standard */
.buttons a, .buttons input { background-color:#d5f5f5; color:#529214; }
.buttons a:hover, .buttons input:hover
{ background-color:#dff4ff; color:#336699; }
.buttons a:active { background-color:#6299c5; color:#fff; }
/* Positive */
.buttons a.positive, .buttons input.positive
{ color:#4d798e; }
.buttons a.positive:hover, .buttons input.positive:hover
{ background-color:#E6EFC2; color:#529214; }
.buttons a.positive:active { background-color:#529214; color:#fff; }
/* Negative */
.buttons a.negative, .buttons input.negative
{ color:#d12f19; }
.buttons a.negative:hover, .buttons input.negative:hover
{ background:#fbe3e4; color:#d12f19; }
.buttons a.negative:active { background-color:#d12f19; color:#fff; }
Cheers,
Geoff
On 01/02/2008, at 2:00 AM, Mark Horn wrote:
> Geoff, or others :)
>
> I found the posting below suggesting making links/buttons/submits look
> the same as described at
> http://particletree.com/features/rediscovering-the-button-element/
> and used by Jumpstart (http://files.doublenegative.com.au/jumpstart/)
>
> I tried this out and all looks/works great in FireFox but does not
> work correctly in IE. Any ideas on how to tweak these for IE? or any
> other Best Practice on how to support this type of thing?
>
> The original question was Best Practice for cancel an edit page. ie.
> have a Submit button that is 'Save' a link that is 'Cancel' (don't
> want validation) and want to have them together and look good.
>
> [Save] [Cancel]
>
> Thanks,
> Mark
>
> -------------------------------------
>
> Re: [T5] best practice to cancel edit page
> from Tapestry User by jeffrey ai <jf...@gmail.com>
>
> That's great to know!
> Thanks for your tips, Geoff.
>
> Cheers,
> Jeffrey Ai
>
>
> Geoff Callender-2 wrote:
>>
>> Hi Jeffrey,
>>
>> What you do is change the submits and the links to look the same,
>> which is not quite the same as the browser-generated button, but on
>> the plus-side they'll look the same in any browser. This approach is
>> used in many commercial sites eg. banking sites. One place that
>> describes button-styling is
>> http://particletree.com/features/rediscovering-the-button-element/
>> .
>>
>> eg. Here are 3 "buttons" on a UserEdit page:
>>
>> <div class="buttons">
>> <input type="submit" value="Save"/>
>> Refresh
>> Cancel
>> </div>
>>
>> and here's some css to style them to look the same:
>>
>> .buttons a, .buttons input { margin:0 7px 0 0; background-
>> color:#f5f5f5; border:1px solid #dedede; border-top:1px solid #eee;
>> border-left:1px solid #eee; font-family:"Lucida Grande", Tahoma,
>> Arial, Verdana, sans-serif; font-size:100%; line-height:130%; text-
>> decoration:none; font-weight:bold; color:#565656; cursor:pointer;
>> padding:5px 10px 6px 7px; /* Links and submits */ }
>> .buttons input { width:auto; overflow:visible; padding:4px 10px 3px
>> 7px; /* IE6 */ }
>> .buttons input[type] { padding:5px 10px 5px 7px; /* Firefox */ line-
>> height:17px; /* Safari */ }
>> *:first-child+html input[type] { padding:4px 10px 3px 7px; /* IE7
>> */ }
>> .buttons input img, .buttons a img { margin:0 3px -3px 0 !important;
>> padding:0; border:none; width:16px; height:16px; }
>>
>> A fuller example is in the code of JumpStart.
>>
>> Cheers,
>>
>> Geoff
>> http://files.doublenegative.com.au/jumpstart/
>>
>> On 22/12/2007, at 4:40 AM, jeffrey ai wrote:
>>
>>>
>>> Geoff,
>>>
>>> I am not quite familiar with CSS.
>>> I think ActionLink or PageLink could only be rendered to an Anchor
>>> Link.
>>> I doubt CSS can change its look like to a button.
>>>
>>> Cheers,
>>> Jeffrey Ai
>>>
>>>
>>> Geoff Callender-2 wrote:
>>>>
>>>> Another technique is to use an ActionLink or PageLink for cancel
>>>> and
>>>> refresh functions. To make the submit button and ActionLink share
>>>> the
>>>> same styling use css. I think Howard recommends this approach.
>>>>
>>>> Cheers,
>>>> Geoff
>>>>
>>>> On 21/12/2007, at 4:37 AM, jeffrey ai wrote:
>>>>
>>>>>
>>>>> Homburg,
>>>>>
>>>>> I noticed the same problem too. If you have a normal cancel
>>>>> button
>>>>> in a T5
>>>>> form as your save button, a post request will be sent back to the
>>>>> page to
>>>>> go through the validation method and even onSuccess() method.
>>>>>
>>>>> My solution to this problem is to create an ActionLinkButton
>>>>> component. It's
>>>>> almost the same with the ActionLink component, Instead of create a
>>>>> normal
>>>>> link, it creates a button link like below:
>>>>>
>>>>> <input type="button" value="cancel"
>>>>> onclick="parent.location='/xxx/YOURPAGE.cancel'" id="cancel"/>
>>>>>
>>>>> In your page, you could have an onActionFromCancel() method to do
>>>>> whatever
>>>>> redirection you want.
>>>>>
>>>>> Cheers,
>>>>> Jeffrey Ai
>>>>>
>>>>>
>>>>>
>>>>> Sven Homburg-2 wrote:
>>>>>>
>>>>>> hi there,
>>>>>>
>>>>>> who can me explain the best practice to cancel edit page?
>>>>>>
>>>>>> i have a save- and cancel button (both submit components)
>>>>>> surrounded by
>>>>>> a form component.
>>>>>>
>>>>>> if user press the cancel button, the edit form should make
>>>>>> nothing
>>>>>> than
>>>>>> leave the page.
>>>>>> without prepare, validation, etc
>>>>>>
>>>>>> is this possible?
>>>>>>
>>>>>> --
>>>>>> best regards
>>>>>> S.Homburg
>>>>>>
>>>>>>
>>>>>>
>>>>>> ---------------------------------------------------------------------
>>>>>> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>>>>>> For additional commands, e-mail: users-help@tapestry.apache.org
>>>>>>
>>>>>>
>>>>>>
>>>>>
>>>>> --
>>>>> View this message in context:
>>>>> http://www.nabble.com/-T5--best-practice-to-cancel-edit-page-tp14427892p14441353.html
>>>>> Sent from the Tapestry - User mailing list archive at Nabble.com.
>>>>>
>>>>>
>>>>> ---------------------------------------------------------------------
>>>>> 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
>>>>
>>>>
>>>>
>>>
>>> --
>>> View this message in context:
>>> http://www.nabble.com/-T5--best-practice-to-cancel-edit-page-tp14427892p14459523.html
>>> Sent from the Tapestry - User mailing list archive at Nabble.com.
>>>
>>>
>>> ---------------------------------------------------------------------
>>> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>>> For additional commands, e-mail: users-help@tapestry.apache.org
>>>
>>
>>
>>
>
> --
> View this message in context:
> http://www.nabble.com/-T5--best-practice-to-cancel-edit-page-tp14427892p14464072.html
> Sent from the Tapestry - User mailing list archive at Nabble.com.
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
>
>
>
>
> Add starShareEmailAdd tags
>
>
>
>
> View more items from "Tapestry User"
>
> Or go
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>