You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@tapestry.apache.org by Howard Lewis Ship <hl...@gmail.com> on 2011/03/11 22:30:43 UTC

[DISCUSS] Remove popup validation bubbles in 5.3?

I'd like to propose removing the pop-up validation bubbles as part of
JavaScript restructuring in 5.3.

Rationale:

- They can be clumsy, especially near the edges of the page
- There's a lot of bookkeeping involved in tracking fields with focus,
to trigger the right fade in/fade out animations
- They are really very difficult to override and customize
- Most people hate them and find them garish
- On a form submission, they can really obscure the page (for a moment)

I'd suggest, instead, something a little more basic.

Fields would be decorated with additional spans (this would be a
function of the ValidationDecorator I think, but possible all done on
the client side).

<span class="t-field-container">
      <input type="text" .../>
      <span class="t-field-icon"/>
      <div class="t-field-message"/>
    </span>

When a client-side validation error occurs, the div.t-field-message
could be modified in place, adding the error message and perhaps
making it visible. The details are in flux in my mind, but I kind of
see adding a CSS class name to span.t-field-container that would
trigger rules about how to draw it.  I.e., if t-error, then draw in
red, and so forth.  span.t-field-icon is used to display an error
icon, or perhaps an ajax "throbber".  In either case, this could be
done with modern CSS, using display:inline-block and background
properties.

The end result would be that the message would appear underneath the
field.  Further, clients could easily customize the L&F with just CSS
rules.

A bunch of variations occur to me; perhaps the ValidationDecorator
just puts the span.t-field-container in place, and the client-side JS
provides the rest, to optimize the amount of content sent over HTTP.
Perhaps the ValidationDecorator looks for meta-data to decide whether
t-field-message appears above or below.  With modern CSS, there's less
of a need to add additional levels of <divs> to create rounded corners
and nibs and the like.

I also haven't fully thought through what needs to happen with the
Label; it would be nice to wrap the Label with a similar span, and
perhaps put error icons on the label as well as the field.

-- 
Howard M. Lewis Ship

Creator of Apache Tapestry

The source for Tapestry training, mentoring and support. Contact me to
learn how I can get you up and productive in Tapestry fast!

(971) 678-5210
http://howardlewisship.com

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@tapestry.apache.org
For additional commands, e-mail: dev-help@tapestry.apache.org


Re: [DISCUSS] Remove popup validation bubbles in 5.3?

Posted by Massimo Lusetti <ml...@gmail.com>.
On Tue, Mar 15, 2011 at 1:45 AM, Howard Lewis Ship <hl...@gmail.com> wrote:

> In this situation, I'm in favor of just stripping out the popups as I
> first mentioned. If someone wants to create a plugin that re-instates
> them in some way (should be easier with the new 5.3 JS architecture
> I'm brewing up) that's fine as well.

Wise, it gets my +1

Cheers
-- 
Massimo
http://meridio.blogspot.com

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@tapestry.apache.org
For additional commands, e-mail: dev-help@tapestry.apache.org


Re: [DISCUSS] Remove popup validation bubbles in 5.3?

Posted by ael <al...@dash.com.ph>.
I really don't like iphone because due to the fact that im an android lover
but then
as a developer if you think everyone can benefit it & it is the best for all
its up to you.

"Don't forget to Keep moving FORWARD..." The Robinsons :)


Howard Lewis Ship wrote:
> 
> Has anyone read "The Paradox of Choice"?  Great book.
> 
> After reading it, you'll see that whenever you avoid a decision by
> saying "just make it configurable" you are doing your users a
> disservice.  The best apps (think the ones on the iPhone) have very,
> very few options. The developer is responsible for knowing what's
> best.
> 


--
View this message in context: http://tapestry.1045711.n5.nabble.com/DISCUSS-Remove-popup-validation-bubbles-in-5-3-tp3425806p3667797.html
Sent from the Tapestry - Dev mailing list archive at Nabble.com.

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@tapestry.apache.org
For additional commands, e-mail: dev-help@tapestry.apache.org


Re: [DISCUSS] Remove popup validation bubbles in 5.3?

Posted by jqzone <jq...@gmail.com>.
I agree with this. In our applications , we write a js path to override the
popup validation ( the message shows after the fileds)

Re: [DISCUSS] Remove popup validation bubbles in 5.3?

Posted by Howard Lewis Ship <hl...@gmail.com>.
Has anyone read "The Paradox of Choice"?  Great book.

After reading it, you'll see that whenever you avoid a decision by
saying "just make it configurable" you are doing your users a
disservice.  The best apps (think the ones on the iPhone) have very,
very few options. The developer is responsible for knowing what's
best.

It's more difficult for frameworks than for apps, since you don't have
control over how the code will ultimately be used.

In this situation, I'm in favor of just stripping out the popups as I
first mentioned. If someone wants to create a plugin that re-instates
them in some way (should be easier with the new 5.3 JS architecture
I'm brewing up) that's fine as well.


On Mon, Mar 14, 2011 at 4:35 PM, ael <al...@dash.com.ph> wrote:
> I really love the pop up validation bubbles.
>
> It can make your page wonderful especially because of the animation.
>
> Its true it can obscure your page (sometimes depends on your css). But not
> everyone hate it.
>
> What if you can disable it or enable this feature?
>
> You have an option if you want to use it or not.
>
> --
> View this message in context: http://tapestry.1045711.n5.nabble.com/DISCUSS-Remove-popup-validation-bubbles-in-5-3-tp3425806p3635504.html
> Sent from the Tapestry - Dev mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: dev-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: dev-help@tapestry.apache.org
>
>



-- 
Howard M. Lewis Ship

Creator of Apache Tapestry

The source for Tapestry training, mentoring and support. Contact me to
learn how I can get you up and productive in Tapestry fast!

(971) 678-5210
http://howardlewisship.com

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@tapestry.apache.org
For additional commands, e-mail: dev-help@tapestry.apache.org


Re: [DISCUSS] Remove popup validation bubbles in 5.3?

Posted by ael <al...@dash.com.ph>.
I really love the pop up validation bubbles. 

It can make your page wonderful especially because of the animation.

Its true it can obscure your page (sometimes depends on your css). But not
everyone hate it.

What if you can disable it or enable this feature?

You have an option if you want to use it or not.

--
View this message in context: http://tapestry.1045711.n5.nabble.com/DISCUSS-Remove-popup-validation-bubbles-in-5-3-tp3425806p3635504.html
Sent from the Tapestry - Dev mailing list archive at Nabble.com.

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@tapestry.apache.org
For additional commands, e-mail: dev-help@tapestry.apache.org


Re: [DISCUSS] Remove popup validation bubbles in 5.3?

Posted by "Thiago H. de Paula Figueiredo" <th...@gmail.com>.
+1. It would be nice to have them disabled by default and have some  
configuration symbol to enable them.

-- 
Thiago H. de Paula Figueiredo
Independent Java, Apache Tapestry 5 and Hibernate consultant, developer,  
and instructor
Owner, Ars Machina Tecnologia da Informação Ltda.
http://www.arsmachina.com.br

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@tapestry.apache.org
For additional commands, e-mail: dev-help@tapestry.apache.org


Re: [DISCUSS] Remove popup validation bubbles in 5.3?

Posted by Ulrich Stärk <ul...@spielviel.de>.
I don't really have an opinion on this. The current bubbles never bothered me, in fact I found them
quite neat. But I can completely understand if others don't feel the same and in that case I agree
that they are hard to override. So something more easily overridable would indeed be nice. I would
like to see the new decoration not that minimalistic though. Something appealing should be working
out of the box.

Uli

On 11.03.2011 22:30, Howard Lewis Ship wrote:
> I'd like to propose removing the pop-up validation bubbles as part of
> JavaScript restructuring in 5.3.
> 
> Rationale:
> 
> - They can be clumsy, especially near the edges of the page
> - There's a lot of bookkeeping involved in tracking fields with focus,
> to trigger the right fade in/fade out animations
> - They are really very difficult to override and customize
> - Most people hate them and find them garish
> - On a form submission, they can really obscure the page (for a moment)
> 
> I'd suggest, instead, something a little more basic.
> 
> Fields would be decorated with additional spans (this would be a
> function of the ValidationDecorator I think, but possible all done on
> the client side).
> 
> <span class="t-field-container">
>       <input type="text" .../>
>       <span class="t-field-icon"/>
>       <div class="t-field-message"/>
>     </span>
> 
> When a client-side validation error occurs, the div.t-field-message
> could be modified in place, adding the error message and perhaps
> making it visible. The details are in flux in my mind, but I kind of
> see adding a CSS class name to span.t-field-container that would
> trigger rules about how to draw it.  I.e., if t-error, then draw in
> red, and so forth.  span.t-field-icon is used to display an error
> icon, or perhaps an ajax "throbber".  In either case, this could be
> done with modern CSS, using display:inline-block and background
> properties.
> 
> The end result would be that the message would appear underneath the
> field.  Further, clients could easily customize the L&F with just CSS
> rules.
> 
> A bunch of variations occur to me; perhaps the ValidationDecorator
> just puts the span.t-field-container in place, and the client-side JS
> provides the rest, to optimize the amount of content sent over HTTP.
> Perhaps the ValidationDecorator looks for meta-data to decide whether
> t-field-message appears above or below.  With modern CSS, there's less
> of a need to add additional levels of <divs> to create rounded corners
> and nibs and the like.
> 
> I also haven't fully thought through what needs to happen with the
> Label; it would be nice to wrap the Label with a similar span, and
> perhaps put error icons on the label as well as the field.
> 

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@tapestry.apache.org
For additional commands, e-mail: dev-help@tapestry.apache.org


Re: [DISCUSS] Remove popup validation bubbles in 5.3?

Posted by Howard Lewis Ship <hl...@gmail.com>.
On Fri, Mar 11, 2011 at 10:29 PM, Andrea Chiumenti <ki...@gmail.com> wrote:
> +1 (non binding).
>
> I'd like things a bit simpler.
>
> Are you sure about a div inside a span. It makes me shiver a bit when
> thinking to MS IExploder

Well, this might be where the community can help in terms of making it
work and making it pretty across browsers.

>
> 2011/3/11 Howard Lewis Ship <hl...@gmail.com>
>
>> I'd like to propose removing the pop-up validation bubbles as part of
>> JavaScript restructuring in 5.3.
>>
>> Rationale:
>>
>> - They can be clumsy, especially near the edges of the page
>> - There's a lot of bookkeeping involved in tracking fields with focus,
>> to trigger the right fade in/fade out animations
>> - They are really very difficult to override and customize
>> - Most people hate them and find them garish
>> - On a form submission, they can really obscure the page (for a moment)
>>
>> I'd suggest, instead, something a little more basic.
>>
>> Fields would be decorated with additional spans (this would be a
>> function of the ValidationDecorator I think, but possible all done on
>> the client side).
>>
>> <span class="t-field-container">
>>      <input type="text" .../>
>>      <span class="t-field-icon"/>
>>      <div class="t-field-message"/>
>>    </span>
>>
>> When a client-side validation error occurs, the div.t-field-message
>> could be modified in place, adding the error message and perhaps
>> making it visible. The details are in flux in my mind, but I kind of
>> see adding a CSS class name to span.t-field-container that would
>> trigger rules about how to draw it.  I.e., if t-error, then draw in
>> red, and so forth.  span.t-field-icon is used to display an error
>> icon, or perhaps an ajax "throbber".  In either case, this could be
>> done with modern CSS, using display:inline-block and background
>> properties.
>>
>> The end result would be that the message would appear underneath the
>> field.  Further, clients could easily customize the L&F with just CSS
>> rules.
>>
>> A bunch of variations occur to me; perhaps the ValidationDecorator
>> just puts the span.t-field-container in place, and the client-side JS
>> provides the rest, to optimize the amount of content sent over HTTP.
>> Perhaps the ValidationDecorator looks for meta-data to decide whether
>> t-field-message appears above or below.  With modern CSS, there's less
>> of a need to add additional levels of <divs> to create rounded corners
>> and nibs and the like.
>>
>> I also haven't fully thought through what needs to happen with the
>> Label; it would be nice to wrap the Label with a similar span, and
>> perhaps put error icons on the label as well as the field.
>>
>> --
>> Howard M. Lewis Ship
>>
>> Creator of Apache Tapestry
>>
>> The source for Tapestry training, mentoring and support. Contact me to
>> learn how I can get you up and productive in Tapestry fast!
>>
>> (971) 678-5210
>> http://howardlewisship.com
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: dev-unsubscribe@tapestry.apache.org
>> For additional commands, e-mail: dev-help@tapestry.apache.org
>>
>>
>



-- 
Howard M. Lewis Ship

Creator of Apache Tapestry

The source for Tapestry training, mentoring and support. Contact me to
learn how I can get you up and productive in Tapestry fast!

(971) 678-5210
http://howardlewisship.com

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@tapestry.apache.org
For additional commands, e-mail: dev-help@tapestry.apache.org


Re: [DISCUSS] Remove popup validation bubbles in 5.3?

Posted by Andrea Chiumenti <ki...@gmail.com>.
+1 (non binding).

I'd like things a bit simpler.

Are you sure about a div inside a span. It makes me shiver a bit when
thinking to MS IExploder

2011/3/11 Howard Lewis Ship <hl...@gmail.com>

> I'd like to propose removing the pop-up validation bubbles as part of
> JavaScript restructuring in 5.3.
>
> Rationale:
>
> - They can be clumsy, especially near the edges of the page
> - There's a lot of bookkeeping involved in tracking fields with focus,
> to trigger the right fade in/fade out animations
> - They are really very difficult to override and customize
> - Most people hate them and find them garish
> - On a form submission, they can really obscure the page (for a moment)
>
> I'd suggest, instead, something a little more basic.
>
> Fields would be decorated with additional spans (this would be a
> function of the ValidationDecorator I think, but possible all done on
> the client side).
>
> <span class="t-field-container">
>      <input type="text" .../>
>      <span class="t-field-icon"/>
>      <div class="t-field-message"/>
>    </span>
>
> When a client-side validation error occurs, the div.t-field-message
> could be modified in place, adding the error message and perhaps
> making it visible. The details are in flux in my mind, but I kind of
> see adding a CSS class name to span.t-field-container that would
> trigger rules about how to draw it.  I.e., if t-error, then draw in
> red, and so forth.  span.t-field-icon is used to display an error
> icon, or perhaps an ajax "throbber".  In either case, this could be
> done with modern CSS, using display:inline-block and background
> properties.
>
> The end result would be that the message would appear underneath the
> field.  Further, clients could easily customize the L&F with just CSS
> rules.
>
> A bunch of variations occur to me; perhaps the ValidationDecorator
> just puts the span.t-field-container in place, and the client-side JS
> provides the rest, to optimize the amount of content sent over HTTP.
> Perhaps the ValidationDecorator looks for meta-data to decide whether
> t-field-message appears above or below.  With modern CSS, there's less
> of a need to add additional levels of <divs> to create rounded corners
> and nibs and the like.
>
> I also haven't fully thought through what needs to happen with the
> Label; it would be nice to wrap the Label with a similar span, and
> perhaps put error icons on the label as well as the field.
>
> --
> Howard M. Lewis Ship
>
> Creator of Apache Tapestry
>
> The source for Tapestry training, mentoring and support. Contact me to
> learn how I can get you up and productive in Tapestry fast!
>
> (971) 678-5210
> http://howardlewisship.com
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: dev-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: dev-help@tapestry.apache.org
>
>

Re: [DISCUSS] Remove popup validation bubbles in 5.3?

Posted by 9902468 <vi...@greenstreet.fi>.
+1, definitely

I think currently we have 0 apps running with the default js popups, when
first projects were shipped the popus were quickly removed after client
feedback. Today we default to shipping them off.

  -Ville

--
View this message in context: http://tapestry.1045711.n5.nabble.com/DISCUSS-Remove-popup-validation-bubbles-in-5-3-tp3425806p3555263.html
Sent from the Tapestry - Dev mailing list archive at Nabble.com.

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@tapestry.apache.org
For additional commands, e-mail: dev-help@tapestry.apache.org


Re: [DISCUSS] Remove popup validation bubbles in 5.3?

Posted by François Facon <fr...@atosorigin.com>.
+1 Users and Designers hate this current popup.

About default semantic that would be provide by the ValidationDecorator, It
would be fine to share your view with a designer. I know one who say that we
understand nothing in writing html.
It become more and more difficult to write right html because we have to
take in account:
- Accessibility - Xhtml - html5 - Web Mobile usage etc...

Fully agree with the possible all done on the client side.
In Tapestry-jQuery and Tapestry-jQuery-Mobile, we are using the jQuery
validation plug-in.
Thanks to some class added by jQuery-Mobile to the input field, the
validation error message is display under the textfield while it is display
on the right side of the field for desktop client.



2011/3/16 Igor Drobiazko <ig...@gmail.com>

> The first thing I do, when developing a form, is to switch off the client
> validation. These bubbles are very annoying; I hate them.
>
> On Fri, Mar 11, 2011 at 10:30 PM, Howard Lewis Ship <hlship@gmail.com
> >wrote:
>
> > I'd like to propose removing the pop-up validation bubbles as part of
> > JavaScript restructuring in 5.3.
> >
> > Rationale:
> >
> > - They can be clumsy, especially near the edges of the page
> > - There's a lot of bookkeeping involved in tracking fields with focus,
> > to trigger the right fade in/fade out animations
> > - They are really very difficult to override and customize
> > - Most people hate them and find them garish
> > - On a form submission, they can really obscure the page (for a moment)
> >
> > I'd suggest, instead, something a little more basic.
> >
> > Fields would be decorated with additional spans (this would be a
> > function of the ValidationDecorator I think, but possible all done on
> > the client side).
> >
> > <span class="t-field-container">
> >      <input type="text" .../>
> >      <span class="t-field-icon"/>
> >      <div class="t-field-message"/>
> >    </span>
> >
> > When a client-side validation error occurs, the div.t-field-message
> > could be modified in place, adding the error message and perhaps
> > making it visible. The details are in flux in my mind, but I kind of
> > see adding a CSS class name to span.t-field-container that would
> > trigger rules about how to draw it.  I.e., if t-error, then draw in
> > red, and so forth.  span.t-field-icon is used to display an error
> > icon, or perhaps an ajax "throbber".  In either case, this could be
> > done with modern CSS, using display:inline-block and background
> > properties.
> >
> > The end result would be that the message would appear underneath the
> > field.  Further, clients could easily customize the L&F with just CSS
> > rules.
> >
> > A bunch of variations occur to me; perhaps the ValidationDecorator
> > just puts the span.t-field-container in place, and the client-side JS
> > provides the rest, to optimize the amount of content sent over HTTP.
> > Perhaps the ValidationDecorator looks for meta-data to decide whether
> > t-field-message appears above or below.  With modern CSS, there's less
> > of a need to add additional levels of <divs> to create rounded corners
> > and nibs and the like.
> >
> > I also haven't fully thought through what needs to happen with the
> > Label; it would be nice to wrap the Label with a similar span, and
> > perhaps put error icons on the label as well as the field.
> >
> > --
> > Howard M. Lewis Ship
> >
> > Creator of Apache Tapestry
> >
> > The source for Tapestry training, mentoring and support. Contact me to
> > learn how I can get you up and productive in Tapestry fast!
> >
> > (971) 678-5210
> > http://howardlewisship.com
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: dev-unsubscribe@tapestry.apache.org
> > For additional commands, e-mail: dev-help@tapestry.apache.org
> >
> >
>
>
> --
> Best regards,
>
> Igor Drobiazko
> http://tapestry5.de
>

Re: [DISCUSS] Remove popup validation bubbles in 5.3?

Posted by Igor Drobiazko <ig...@gmail.com>.
The first thing I do, when developing a form, is to switch off the client
validation. These bubbles are very annoying; I hate them.

On Fri, Mar 11, 2011 at 10:30 PM, Howard Lewis Ship <hl...@gmail.com>wrote:

> I'd like to propose removing the pop-up validation bubbles as part of
> JavaScript restructuring in 5.3.
>
> Rationale:
>
> - They can be clumsy, especially near the edges of the page
> - There's a lot of bookkeeping involved in tracking fields with focus,
> to trigger the right fade in/fade out animations
> - They are really very difficult to override and customize
> - Most people hate them and find them garish
> - On a form submission, they can really obscure the page (for a moment)
>
> I'd suggest, instead, something a little more basic.
>
> Fields would be decorated with additional spans (this would be a
> function of the ValidationDecorator I think, but possible all done on
> the client side).
>
> <span class="t-field-container">
>      <input type="text" .../>
>      <span class="t-field-icon"/>
>      <div class="t-field-message"/>
>    </span>
>
> When a client-side validation error occurs, the div.t-field-message
> could be modified in place, adding the error message and perhaps
> making it visible. The details are in flux in my mind, but I kind of
> see adding a CSS class name to span.t-field-container that would
> trigger rules about how to draw it.  I.e., if t-error, then draw in
> red, and so forth.  span.t-field-icon is used to display an error
> icon, or perhaps an ajax "throbber".  In either case, this could be
> done with modern CSS, using display:inline-block and background
> properties.
>
> The end result would be that the message would appear underneath the
> field.  Further, clients could easily customize the L&F with just CSS
> rules.
>
> A bunch of variations occur to me; perhaps the ValidationDecorator
> just puts the span.t-field-container in place, and the client-side JS
> provides the rest, to optimize the amount of content sent over HTTP.
> Perhaps the ValidationDecorator looks for meta-data to decide whether
> t-field-message appears above or below.  With modern CSS, there's less
> of a need to add additional levels of <divs> to create rounded corners
> and nibs and the like.
>
> I also haven't fully thought through what needs to happen with the
> Label; it would be nice to wrap the Label with a similar span, and
> perhaps put error icons on the label as well as the field.
>
> --
> Howard M. Lewis Ship
>
> Creator of Apache Tapestry
>
> The source for Tapestry training, mentoring and support. Contact me to
> learn how I can get you up and productive in Tapestry fast!
>
> (971) 678-5210
> http://howardlewisship.com
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: dev-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: dev-help@tapestry.apache.org
>
>


-- 
Best regards,

Igor Drobiazko
http://tapestry5.de