You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Davor Hrg <hr...@gmail.com> on 2008/02/01 14:14:46 UTC
Re: [T5] best practice to cancel edit page
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