7 Replies Latest reply on Dec 13, 2010 6:52 AM by Lukáš Fryč

    Feature Request - Input Number Slider - @onchanging

    Lukáš Fryč Master

      Hi guys,

      I see one usability issue with inputNumberSlider:

      the only defined event handle for that component is onchange.

      It can be triggered in two ways:

      1. change the input tied to slider and then blur
      2. by moving the slider by mouse

      And there (2) is problem: when you are using mouse, it triggers ajax request with each move of slider.



      Imagine scenario where you are filtering the table by slider - it will  fire too much events, so you have to use queue with delay great enough  to not flood your database.

      So you will use for example <a4j:queue requestDelay="1000" /> because you have very loaded database.

      It will solve the problem with flooding when user is moving the slider.

      But it will also bring the problem when user selects the value by  changing the input by typing and bluring the input for slider and also  when user selects value by click to slider instead of moving it - we can  expect that user don't want to wait for 1000ms to trigger the reload of  table.


      I suggest to add one more event handlers:

      onchanging

      which will trigger:

      1. when input gets keyup
      2. when slider is moving by mouse
      3. when slider is continuously moved by keys (by holding arrow key)

      onchange will be then requested when

      1. input is blurred
      2. mouse click to slider
      3. arrow keyup when slider focused



      What do you think?

      - Lukas

        • 1. Re: Feature Request - Input Number Slider - @onchanging
          Ilya Shaikovsky Master

          Good catch! I agree that it works not correct for now and RFC definitely should be risen. But my opinion that we could solve that with simpler requirements change: onchange should be fired only after value changed and component lost focus(as for standard input). If users need we could additionally add onslide  event(fired during sliding and click to slider), onarrowkey* events(fired after arrow keys usage). I think it simpler and looks more semantically.

           

          WDYT?

          • 2. Re: Feature Request - Input Number Slider - @onchanging
            Lukáš Fryč Master

            I agree with your opinion

             

            1) but also I wanted to integrate also a keyup event on input. Do you think it is needed?

            For example user wants to change the value on slider as writing into the input box - this is currently impossible, but also minor use case probably.

             

             

            2) Another question is when user wants to tie a4j:ajax to listener:

             

            Afaik a4j:ajax nor f:ajax doesn't support several events listed in @event attribute. So when you want use over-configured a4j:ajax with, e.g. execute, render, action and so on, you must repeat the settings:

             

            <rich:inputNumberSlider ...>
                 <a4j:ajax event="slide" action="..." execute="..." render="..." />
                 <a4j:ajax event="arrowkey" action="..." execute="..." render="..." />
            </rich:inputNumberSlider>
            

             

            I'm really not sure about the multiple events support like <a4j:ajax event="slide, arrowkey" ... />, but if isn't present, shouldn't be considered for adding to RF and spec?

            • 3. Re: Feature Request - Input Number Slider - @onchanging
              Ilya Shaikovsky Master

              for 1) - oninput* events should be definitelly there I think.

               

              2) Could talk but I concerned with the fact that it conflicts with JSF behaviors spec.

              • 4. Re: Feature Request - Input Number Slider - @onchanging
                Kriya Studio Newbie

                it should be more events, keyboard and mouse in all controls... (Imo) (hard to do everything painfully in javascript and tie it to the controls, works... but a richface should do the work, so the programmer consentrates on the output and the integration of a good user expirience)

                • 5. Re: Feature Request - Input Number Slider - @onchanging
                  Lukáš Fryč Master

                  I'm ready to fire feature request with this description, please comment if you have concerns about usability, naming, etc. with proposal:

                   

                  Description

                   

                  Change the behavior and extend the attributes to improve usability.
                  Current state:
                  - only @onchange is in place, but firing for input blur or slider movement
                  - that's why it cannot be used e.g. for updating concent from database
                  Explanation:
                  - arrowkey = the keyboard's arrow buttons
                  - arrow = the arrow sign on left and right side of slider to move slider by mouse
                  The requirements:
                  1) change semantics of @onchange - should be fired only after value changed and then component focus lost (default ajax action)
                  2) add @onslide - fired when slider was moved (by mouse click/move or arrows or arrowkeys)
                  4) add @oninputkeyup, @oninputkeydown, @oninputkeypress
                  5) add @oncomponentblur - fired when focus of input or slider lost and changed to another component (specifically not change it when focus moving from input to slider or vice versa)
                  6) add @oncomponentfocus - fired when one of input or slider focus obtained (specifically not change when focus moving from input to slider or vice versa)

                  Change the behavior and extend the attributes to improve usability.

                   

                  Current state:

                   

                  - only @onchange is in place, but firing for input blur or slider movement

                  - that's why it cannot be used e.g. for updating concent from database

                   

                  Explanation:

                  - arrowkey = the keyboard's arrow buttons

                  - arrow = the arrow sign on left and right side of slider to move slider by mouse

                   

                  The requirements:

                   

                  1) change semantics of @onchange - should be fired only after value changed and then component focus lost (default ajax action)

                  2) add @onslide - fired when slider was moved (by mouse click/move or arrows or arrowkeys)

                  4) add @oninputkeyup, @oninputkeydown, @oninputkeypress

                  5) add @oncomponentblur - fired when focus of input or slider lost and changed to another component (specifically not change it when focus moving from input to slider or vice versa)

                  6) add @oncomponentfocus - fired when one of input or slider focus obtained (specifically not change when focus moving from input to slider or vice versa)

                   

                  Notes


                  @oncomponentfocus, @oncomponentblur - avoid conflict with input's events onfocus/onblur