Advanced Field Error Handling

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

Advanced Field Error Handling

Matt White-4
Hi Y'all -

I am converting some old code from HTML4 to HTML5 to get better mobile
support. So far things have been pretty smooth sailing - a testament to
how well Stripes was designed.

I've been using the Twitter Bootstrap framework to make my job easier
since it handles a lot of the task of creating a responsive layout for
you. (See http://twitter.github.com/bootstrap/index.html) I've found
Stripes and Bootstrap to be a great combo since we've got the dynamic
attribute versions of the taglibs -- just pass the new HTML5 stuff off
as a dynamic attribute and away you go.

There's one thing I'm trying to figure out how to do the best --
field-level error handling.

If you look at the "Validation states" part of the docs, located here:
http://twitter.github.com/bootstrap/base-css.html#forms you can see that
Bootstrap brings with it a lot of nice things for showing field-level
validation errors.

An example of a field with a validation error is:

<div class="control-group warning">
        <label class="control-label" for="inputWarning">Input with warning</label>
        <div class="controls">
        <input type="text" id="inputWarning">
        <span class="help-inline">Something may have gone wrong</span>
</div>


There's two things to note here:
1.) There's a span of type "help-inline" that you can append to fields
with errors. This is super simple to do with Stripes' built in
field-level validation today, it just goes in as an entry in the
StripesResources.properties file under stripes.fieldErrors.afterError.

2.) There's an extra class added to the outmost enclosing div (it goes
from "control-group" to "control-group warning"). This is the one I'm
trying to figure out how to light up the cleanest way possible.


I've been trying to think of ways to get the extra class to appear in
that div and mostly coming up empty. The most obvious thing to do to me
is create a new tag that looks at the field errors to see if this field
is include and output "error" (or "warning", "info", "success") if
needed, but this seems kinda crude to me.

Anyone have an idea on how to light up this functionality using Stripes?

Thanks!

- Matt



------------------------------------------------------------------------------
Master HTML5, CSS3, ASP.NET, MVC, AJAX, Knockout.js, Web API and
much more. Get web development skills now with LearnDevNow -
350+ hours of step-by-step video tutorials by Microsoft MVPs and experts.
SALE $99.99 this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122812
_______________________________________________
Stripes-users mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/stripes-users
Reply | Threaded
Open this post in threaded view
|

Re: Advanced Field Error Handling

Marcus Kraßmann-2
Hi Matt,

Assuming you refer to different error states like shown on
http://twitter.github.com/bootstrap/base-css.html#inputWarning , I think
that this is a problem you cannot easily solve within Stripes. In
contrast to JSF or other Java web frameworks, Stripes does not provide
different validation states. The whole validation mechanism is based on
just one implicit state: Error. Introduction of new states would require
rewriting some core classes of Stripes.

In case that you "just" want to use the error class in the appropiate
(outer) HTML tags, I think you will need custom JSP tags which allow you
to render the HTML in a Bootstrap compatible way - including any needed
error classes on the different HTML tags. Instead of <sd:text...> you
could then use something like <bs:text...> which would render the outer
div, label, input and span, depending on the error state of the input.
But I fear that you will have a lot of implementation work as this
affects all Stripes tags that can have an error state.

Probably the easiest solution for the "outer div gets extra class"
problem would be using JavaScript because it gives you full control over
the whole DOM. Just render the whole block in a way that it is
compatible with Bootstrap's CSS. After a form submit, just check any
input fields for the existance of the error class and then modify the
outer div class that belong to the input tag. I must admit that I would
generally prefer a Stripes solution, but probably this is the fastest to
implement solution which should solve the problem.

Kind regards,
Marcus


Am 28.12.2012 01:33, schrieb Matt White:

> Hi Y'all -
>
> I am converting some old code from HTML4 to HTML5 to get better mobile
> support. So far things have been pretty smooth sailing - a testament to
> how well Stripes was designed.
>
> I've been using the Twitter Bootstrap framework to make my job easier
> since it handles a lot of the task of creating a responsive layout for
> you. (See http://twitter.github.com/bootstrap/index.html) I've found
> Stripes and Bootstrap to be a great combo since we've got the dynamic
> attribute versions of the taglibs -- just pass the new HTML5 stuff off
> as a dynamic attribute and away you go.
>
> There's one thing I'm trying to figure out how to do the best --
> field-level error handling.
>
> If you look at the "Validation states" part of the docs, located here:
> http://twitter.github.com/bootstrap/base-css.html#forms you can see that
> Bootstrap brings with it a lot of nice things for showing field-level
> validation errors.
>
> An example of a field with a validation error is:
>
> <div class="control-group warning">
> <label class="control-label" for="inputWarning">Input with warning</label>
> <div class="controls">
> <input type="text" id="inputWarning">
> <span class="help-inline">Something may have gone wrong</span>
> </div>
>
>
> There's two things to note here:
> 1.) There's a span of type "help-inline" that you can append to fields
> with errors. This is super simple to do with Stripes' built in
> field-level validation today, it just goes in as an entry in the
> StripesResources.properties file under stripes.fieldErrors.afterError.
>
> 2.) There's an extra class added to the outmost enclosing div (it goes
> from "control-group" to "control-group warning"). This is the one I'm
> trying to figure out how to light up the cleanest way possible.
>
>
> I've been trying to think of ways to get the extra class to appear in
> that div and mostly coming up empty. The most obvious thing to do to me
> is create a new tag that looks at the field errors to see if this field
> is include and output "error" (or "warning", "info", "success") if
> needed, but this seems kinda crude to me.
>
> Anyone have an idea on how to light up this functionality using Stripes?
>
> Thanks!
>
> - Matt
>
>


------------------------------------------------------------------------------
Master HTML5, CSS3, ASP.NET, MVC, AJAX, Knockout.js, Web API and
much more. Get web development skills now with LearnDevNow -
350+ hours of step-by-step video tutorials by Microsoft MVPs and experts.
SALE $99.99 this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122812
_______________________________________________
Stripes-users mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/stripes-users
Reply | Threaded
Open this post in threaded view
|

Re: Advanced Field Error Handling

Iwao AVE!
In reply to this post by Matt White-4
Hi Matt,

By defining a method like below in your action bean...

public getControlGroupClass(String field) {
  // checks the field status and returns an appropriate css class.
  return getContext().getValidationErrors().containsKey(field) ? " error" : "" ;
}

...you can write the outmost div as follows (JSP 2.1+ required).

<div class="control-group ${actionBean.getControlGroupClass('inputWarning')}">

Regards,
Iwao



2012/12/28 Matt White <[hidden email]>
Hi Y'all -

I am converting some old code from HTML4 to HTML5 to get better mobile
support. So far things have been pretty smooth sailing - a testament to
how well Stripes was designed.

I've been using the Twitter Bootstrap framework to make my job easier
since it handles a lot of the task of creating a responsive layout for
you. (See http://twitter.github.com/bootstrap/index.html) I've found
Stripes and Bootstrap to be a great combo since we've got the dynamic
attribute versions of the taglibs -- just pass the new HTML5 stuff off
as a dynamic attribute and away you go.

There's one thing I'm trying to figure out how to do the best --
field-level error handling.

If you look at the "Validation states" part of the docs, located here:
http://twitter.github.com/bootstrap/base-css.html#forms you can see that
Bootstrap brings with it a lot of nice things for showing field-level
validation errors.

An example of a field with a validation error is:

<div class="control-group warning">
        <label class="control-label" for="inputWarning">Input with warning</label>
        <div class="controls">
        <input type="text" id="inputWarning">
        <span class="help-inline">Something may have gone wrong</span>
</div>


There's two things to note here:
1.) There's a span of type "help-inline" that you can append to fields
with errors. This is super simple to do with Stripes' built in
field-level validation today, it just goes in as an entry in the
StripesResources.properties file under stripes.fieldErrors.afterError.

2.) There's an extra class added to the outmost enclosing div (it goes
from "control-group" to "control-group warning"). This is the one I'm
trying to figure out how to light up the cleanest way possible.


I've been trying to think of ways to get the extra class to appear in
that div and mostly coming up empty. The most obvious thing to do to me
is create a new tag that looks at the field errors to see if this field
is include and output "error" (or "warning", "info", "success") if
needed, but this seems kinda crude to me.

Anyone have an idea on how to light up this functionality using Stripes?

Thanks!

- Matt



------------------------------------------------------------------------------
Master HTML5, CSS3, ASP.NET, MVC, AJAX, Knockout.js, Web API and
much more. Get web development skills now with LearnDevNow -
350+ hours of step-by-step video tutorials by Microsoft MVPs and experts.
SALE $99.99 this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122812
_______________________________________________
Stripes-users mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/stripes-users


------------------------------------------------------------------------------
Master HTML5, CSS3, ASP.NET, MVC, AJAX, Knockout.js, Web API and
much more. Get web development skills now with LearnDevNow -
350+ hours of step-by-step video tutorials by Microsoft MVPs and experts.
SALE $99.99 this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122812
_______________________________________________
Stripes-users mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/stripes-users
Reply | Threaded
Open this post in threaded view
|

Re: Advanced Field Error Handling

Matt White-4
On 12/28/2012 12:34 AM, Iwao AVE! wrote:

> By defining a method like below in your action bean...
>
> public getControlGroupClass(String field) {
>    // checks the field status and returns an appropriate css class.
>    return getContext().getValidationErrors().containsKey(field) ? "
> error" : "" ;
> }
>
> ...you can write the outmost div as follows (JSP 2.1+ required).
>
> <div class="control-group
> ${actionBean.getControlGroupClass('inputWarning')}">

This works great -- this is basically what I was picturing doing with my
own tag, but I didn't realize it was this easy.

Thanks, Iwao. :)

- Matt

------------------------------------------------------------------------------
Master HTML5, CSS3, ASP.NET, MVC, AJAX, Knockout.js, Web API and
much more. Get web development skills now with LearnDevNow -
350+ hours of step-by-step video tutorials by Microsoft MVPs and experts.
SALE $99.99 this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122812
_______________________________________________
Stripes-users mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/stripes-users
Reply | Threaded
Open this post in threaded view
|

Re: Advanced Field Error Handling

Matt White-4
In reply to this post by Marcus Kraßmann-2
On 12/28/2012 12:10 AM, Marcus Kraßmann wrote:
> Assuming you refer to different error states like shown on
> http://twitter.github.com/bootstrap/base-css.html#inputWarning  , I think
> that this is a problem you cannot easily solve within Stripes. In
> contrast to JSF or other Java web frameworks, Stripes does not provide
> different validation states. The whole validation mechanism is based on
> just one implicit state: Error. Introduction of new states would require
> rewriting some core classes of Stripes

Marcus -

Agreed that it would take a fairly major overhaul to the internals of
how Stripes keeps track of errors. I'd actually been thinking about what
it would take to add additional states, but haven't had the time/desire
to get that deep into the framework.

- Matt

------------------------------------------------------------------------------
Master HTML5, CSS3, ASP.NET, MVC, AJAX, Knockout.js, Web API and
much more. Get web development skills now with LearnDevNow -
350+ hours of step-by-step video tutorials by Microsoft MVPs and experts.
SALE $99.99 this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122812
_______________________________________________
Stripes-users mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/stripes-users
Reply | Threaded
Open this post in threaded view
|

Re: Advanced Field Error Handling

Lionel-2
In reply to this post by Matt White-4
Matt White a exprimé avec précision :
> I am converting some old code from HTML4 to HTML5 to get better mobile
> support.

Hello,

Did you manage to handle html 5 new input types with stripes ?
Like <input type="number">.
I'd like to make my application user friendly on ipad.




------------------------------------------------------------------------------
Master Visual Studio, SharePoint, SQL, ASP.NET, C# 2012, HTML5, CSS,
MVC, Windows 8 Apps, JavaScript and much more. Keep your skills current
with LearnDevNow - 3,200 step-by-step video tutorials by Microsoft
MVPs and experts. ON SALE this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122712
_______________________________________________
Stripes-users mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/stripes-users
Reply | Threaded
Open this post in threaded view
|

Re: Advanced Field Error Handling

Luis Tiago Rico
Hi there, for html 5 attributes:

Insted of using the Standard Tag Library<%@ taglib prefix="stripes" uri="http://stripes.sourceforge.net/stripes.tld" %>
Use DynAttr Tag Library<%@ taglib prefix="stripes" uri="http://stripes.sourceforge.net/stripes-dynattr.tld" %>

like <stripes:text name="phone" type="number"/>

Cheers


2013/1/3 Lionel <[hidden email]>
Matt White a exprimé avec précision :
> I am converting some old code from HTML4 to HTML5 to get better mobile
> support.

Hello,

Did you manage to handle html 5 new input types with stripes ?
Like <input type="number">.
I'd like to make my application user friendly on ipad.




------------------------------------------------------------------------------
Master Visual Studio, SharePoint, SQL, ASP.NET, C# 2012, HTML5, CSS,
MVC, Windows 8 Apps, JavaScript and much more. Keep your skills current
with LearnDevNow - 3,200 step-by-step video tutorials by Microsoft
MVPs and experts. ON SALE this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122712
_______________________________________________
Stripes-users mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/stripes-users



--
Luís Tiago Barreto Rico

------------------------------------------------------------------------------
Master Visual Studio, SharePoint, SQL, ASP.NET, C# 2012, HTML5, CSS,
MVC, Windows 8 Apps, JavaScript and much more. Keep your skills current
with LearnDevNow - 3,200 step-by-step video tutorials by Microsoft
MVPs and experts. ON SALE this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122712
_______________________________________________
Stripes-users mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/stripes-users
Reply | Threaded
Open this post in threaded view
|

Re: Advanced Field Error Handling

Lionel-2
Luis Tiago Rico vient de nous annoncer :
> Hi there, for html 5 attributes:
>
> Insted of using the Standard Tag Library<%@ taglib prefix="stripes" uri="
> http://stripes.sourceforge.net/stripes.tld" %>
> Use DynAttr Tag Library<%@ taglib prefix="stripes" uri="
> http://stripes.sourceforge.net/stripes-dynattr.tld" %>
>
> like <stripes:text name="phone" type="number"/>

Excellent ! I'll try this.
I thought the type attribute would be overridden by a hardcoded
type="text".




------------------------------------------------------------------------------
Master HTML5, CSS3, ASP.NET, MVC, AJAX, Knockout.js, Web API and
much more. Get web development skills now with LearnDevNow -
350+ hours of step-by-step video tutorials by Microsoft MVPs and experts.
SALE $99.99 this month only -- learn more at:
http://p.sf.net/sfu/learnmore_122812
_______________________________________________
Stripes-users mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/stripes-users