>
> would be cool if there would be some client-side validation hook,
instead of "just" server-side
?
HTML5 <input> element's min and max attributes are there for it. Form won't
be submitted and a warning will be displayed if value is not between
min-max. This validation is provided by the browser (just Opera yet).
A validation with same min-max will be done on server side too.
However, the logic should be driven by a JSF validator.
Ok, code below seems clear:
<!-- - - - - - - - - -usage- - - - - - - - - - - - - - - - - - - - -- -->
<hx:inputNumberSlider value="#{someBean.someNumberField}" >
<*fx*:validateNumberRange maximum="1000" minimum="100" /> *<!-- New
validator -->*
</hx:inputNumberSlider>
<!-- expected HTML5 code -->
<input type="range" value="" min="100" step="9" max="1000" />
This can do both server-side validation and client-side validation of
input(basically rendering min and max attributes). "max" and "min"
attributes can be set by validator on its facelet handler, thus no need to
iterate on children on parent.
But, what about this:
<!-- - - - - - - - - -usage- - - - - - - - - - - - - - - - - - - - -- -->
<hx:inputNumberSlider value="#{someBean.someNumberField}" >
<*f:*validateLongRange maximum="1000" minimum="100" /> *<!-- JSF Core
validator-->*
</hx:inputNumberSlider>
<!-- expected HTML5 code -->
<input type="range" value="" min="100" step="9" max="1000" />
If we support this, in order to render min and max attributes of input
element, <hx:inputNumberSlider> will get those values from its attached
validators.
I would not like parent iterating on validators and looking for certain
types of validators.
Another way to achieve this?
Thanks,
Ali
On Thu, May 27, 2010 at 4:53 PM, Matthias Wessendorf <[email protected]>wrote:
> On Thu, May 27, 2010 at 2:07 PM, Ali Ok <[email protected]> wrote:
> > Hi,
> >>
> >> why not breaking this into two components ?
> >>
> >> <hx:inputNumberSpinner> and <hx:inputNumberSlider>
> >
> > Ok. My initial prototypes were separate already on my workspace.
> >>
> >> the min/max should be driven by a range validator component
> >
> > Then I am removing "min" and "max" properties from the component(s).
>
> it is fine to have maximum/minimum on the component itself. However,
> the logic should be driven by a JSF validator.
>
> would be cool if there would be some client-side validation hook,
> instead of "just"
> server-side
>
> > Or, another alternative, should we keep them and allow overriding by a
> range
> > validator? At the initial prototype, an implicit validator will be
> attached
> > with the values of min and max. So, may be we can keep them and if an
> > explicit validator is not set, implicit one can be attached.
> > Just an alternative idea, IMHO, removing "min" and "max" is better :)
> > Thanks,
> > Ali
> >
> > On Thu, May 27, 2010 at 2:49 PM, Bruno Aranda <[email protected]>
> wrote:
> >>
> >> +1 I agree with Matthias.
> >>
> >> Thanks!
> >>
> >> Bruno
> >>
> >> On 27 May 2010 12:44, Matthias Wessendorf <[email protected]> wrote:
> >>>
> >>> Hi,
> >>>
> >>> why not breaking this into two components ?
> >>>
> >>> <hx:inputNumberSpinner> and <hx:inputNumberSlider>
> >>>
> >>> the min/max should be driven by a range validator component
> >>>
> >>> -Matthias
> >>>
> >>> On Thu, May 27, 2010 at 1:11 PM, Ali Ok <[email protected]> wrote:
> >>> > Hi,
> >>> > This is <hx:inputNumber>, which can render a spinner or a slider.
> >>> > It may seem so straight forward, but here is the prototype.
> >>> > ===============================
> >>> > ==========<hx:inputNumber>======
> >>> > ===============================
> >>> > REFS:
> >>> >
> >>> > [0]
> http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#the-input-element
> >>> >
> >>> > [1]
> http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#range-state
> >>> >
> >>> > [2]
> http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#number-state
> >>> >
> >>> > [3]
> http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary
> >>> > EXTENDS:
> >>> > some input component
> >>> > ATTRIBUTES not present in ancestor:
> >>> > type(required): can be
> >>> > 'spinner': which renders a spinner text box
> >>> > 'slider': which renders a slider
> >>> > suggestions: same suggestion mechanism with <hx:inputText>
> >>> > min: minimum value that can be selected. default to 0.
> >>> > max: maximum that can be selected. default to 100.
> >>> > step: gap between each segment. if both 'step' and 'segmentCount' is
> >>> > not
> >>> > defined, 'step' is default to (max-min)/(100).
> >>> > segmentCount: used to calculate step with min and max. step ~=
> >>> > (max-min)/segmentCount. default to 100, if step is not defined too.
> >>> > either 'step' or 'segmentCount' should be defined, not both!
> >>> > autocomplete: to override owner form's autocomplete attribute for its
> >>> > children. can be 'on' 'off' 'default'(default)
> >>> > datalist: id of <hx:datalist> for suggestions mechanism. by this way,
> >>> > suggestion options(datalist) can be shared across several input
> >>> > elements.
> >>> > NOTES:
> >>> > Cannot extend hx:inputText, since this doesn't have size attribute!
> >>> > Will
> >>> > extend an abstract middle component.
> >>> > -->
> >>> > <!-- - - - - - - - - -usage- - - - - - - - - - - - - - - - - - - -
> --
> >>> > -->
> >>> > <hx:inputNumber type="spinner" value="#{someBean.someNumberField}"
> >>> > min="100" max="1000"/>
> >>> > <!-- expected HTML5 code -->
> >>> > <input type="number" value="" min="100" step="9" max="1000" />
> >>> >
> >>> >
> >>> >
> >>> > <!-- - - - - - - - - -usage- - - - - - - - - - - - - - - - - - - -
> --
> >>> > -->
> >>> > <hx:inputNumber type="slider" value="#{someBean.someNumberField}"
> >>> > min="100"
> >>> > max="1000" segmentCount="10"/>
> >>> > <!-- expected HTML5 code -->
> >>> > <input type="range" value="" min="100" step="90" max="1000" />
> >>> >
> >>> > Regards,
> >>> > Ali
> >>>
> >>>
> >>>
> >>> --
> >>> Matthias Wessendorf
> >>>
> >>> blog: http://matthiaswessendorf.wordpress.com/
> >>> sessions: http://www.slideshare.net/mwessendorf
> >>> twitter: http://twitter.com/mwessendorf
> >>
> >
> >
> >
> > --
> > My Blog: http://blog.aliok.com.tr
> > Twitter: http://twitter.com/aliok_tr
> >
> >
>
>
>
> --
> Matthias Wessendorf
>
> blog: http://matthiaswessendorf.wordpress.com/
> sessions: http://www.slideshare.net/mwessendorf
> twitter: http://twitter.com/mwessendorf
>
--
My Blog: http://blog.aliok.com.tr
Twitter: http://twitter.com/aliok_tr
