Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 3.1.0.BETA1, 3.1
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      ICEfaces 3, ACE Components
    • Assignee Priority:
      P1
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial

      Description

      Add a new ace:textEntry component with the following features:

      - ThemeRoller styling support
      - ace:ajax support
      - promptLabel attribute (displays inside the inputText when the component doesn't have a value and is not focussed)
      - Custom styling for invalid state (red border, etc. if entered value fails validation), and required (see ICE-7868).

      - "autoTab" boolean attribute, when true the component will automatically tab to the next component once the "maxLength" number of characters have been entered. Facilitates high-speed data-entry use-cases.
      1. screenshot-1.png
        251 kB
      2. screenshot-10.png
        284 kB
      3. screenshot-11.png
        223 kB
      4. screenshot-12.png
        229 kB
      5. screenshot-13.png
        243 kB
      6. screenshot-14.png
        242 kB
      7. screenshot-2.png
        259 kB
      8. screenshot-3.png
        276 kB
      9. screenshot-4.png
        294 kB
      10. screenshot-5.png
        300 kB
      11. screenshot-6.png
        280 kB
      12. screenshot-7.png
        283 kB
      13. screenshot-8.png
        284 kB
      14. screenshot-9.png
        278 kB

        Issue Links

          Activity

          Hide
          yip.ng added a comment - - edited

          adapting it to work with the maskedEntry: (and autocompleteEntry and dateTimeEntry)

          renderer:

          First attempt at moving some utility methods to super InputRenderer class. See them working in MaskedEntry: screenshot-14.png. Note that in-field label is not applicable because the input field has all kinds of masks, placeholders, formatting, key listeners, etc. controlled by the component plugin JS.

          component:

          Should move common attributes to some common super meta class. But how? (Adding directly to HtmlInputTextMeta or adding an intermediate meta class didn't work.) Also, DateTimeEntry doesn't inherit from HtmlInputText, so has to repeat the attributes? (No multiple inheritance.)

          Show
          yip.ng added a comment - - edited adapting it to work with the maskedEntry: (and autocompleteEntry and dateTimeEntry) renderer: First attempt at moving some utility methods to super InputRenderer class. See them working in MaskedEntry: screenshot-14.png. Note that in-field label is not applicable because the input field has all kinds of masks, placeholders, formatting, key listeners, etc. controlled by the component plugin JS. component: Should move common attributes to some common super meta class. But how? (Adding directly to HtmlInputTextMeta or adding an intermediate meta class didn't work.) Also, DateTimeEntry doesn't inherit from HtmlInputText, so has to repeat the attributes? (No multiple inheritance.)
          Hide
          yip.ng added a comment -

          Additional attributes copied and pasted to component meta classes for MaskedEntry, AutoCompleteEntry and DateTimeEntry. DateTimeEntry requires extra label property because it doesn't inherit from HtmlInputText.

          Label/indicator (except in-field position and related JS handling) and optional/required/invalid states done for MaskedEntry, AutoCompleteEntry and DateTimeEntry, using refactored utility methods.

          Show
          yip.ng added a comment - Additional attributes copied and pasted to component meta classes for MaskedEntry, AutoCompleteEntry and DateTimeEntry. DateTimeEntry requires extra label property because it doesn't inherit from HtmlInputText. Label/indicator (except in-field position and related JS handling) and optional/required/invalid states done for MaskedEntry, AutoCompleteEntry and DateTimeEntry, using refactored utility methods.
          Hide
          yip.ng added a comment - - edited

          autoTab implemented with some limitations (see below) using keypress event.

          ice.ace.util.findNextTabElement() function created from code at link suggested previously: http://stackoverflow.com/a/7329696.

          Can't use keyup event because key combinations like Ctrl-A generate separate key events, but somehow the event.ctrlKey flag is not set for the "A" character event, making it indistinguishable from the non-modified "A" character event.

          In keypress event, character isn't inserted until after listener. Therefore the submit (triggered by current element blur, which in turn is triggered by the next element focus) will always have one character missing.

          To overcome this, we have to intercept the character and insert it manually before the next element focusing. However, this creates other even more complicated problems. If we assume that the cursor is always at the end, we can just append the character. But what if the cursor is not at the end?

          Another related limitation: can't type to replace highlighted text. To solve this we need to resort to messy browser-specific text selection API?

          General limitation: likely works in common cases only. Impossible for it to work with all browsers, all keyboards, all input methods, ... That will be the job of the textinput event in DOM 3. (Hopefully.) See David Flanagan, "JavaScript: The Definitive Guide" 6th ed., sections 17.8, 17.9.

          Show
          yip.ng added a comment - - edited autoTab implemented with some limitations (see below) using keypress event. ice.ace.util.findNextTabElement() function created from code at link suggested previously: http://stackoverflow.com/a/7329696 . Can't use keyup event because key combinations like Ctrl-A generate separate key events, but somehow the event.ctrlKey flag is not set for the "A" character event, making it indistinguishable from the non-modified "A" character event. In keypress event, character isn't inserted until after listener. Therefore the submit (triggered by current element blur, which in turn is triggered by the next element focus) will always have one character missing. To overcome this, we have to intercept the character and insert it manually before the next element focusing. However, this creates other even more complicated problems. If we assume that the cursor is always at the end, we can just append the character. But what if the cursor is not at the end? Another related limitation: can't type to replace highlighted text. To solve this we need to resort to messy browser-specific text selection API? General limitation: likely works in common cases only. Impossible for it to work with all browsers, all keyboards, all input methods, ... That will be the job of the textinput event in DOM 3. (Hopefully.) See David Flanagan, "JavaScript: The Definitive Guide" 6th ed., sections 17.8, 17.9.
          Hide
          yip.ng added a comment - - edited

          New JIRA for labels and indicators: ICE-8154. Relevant check-in's are at revisions: 29001, 29035, 29138, 29141.

          Separate JIRA for required and invalid states: ICE-7868. Relevant check-in at revision: 29145.

          Show
          yip.ng added a comment - - edited New JIRA for labels and indicators: ICE-8154 . Relevant check-in's are at revisions: 29001, 29035, 29138, 29141. Separate JIRA for required and invalid states: ICE-7868 . Relevant check-in at revision: 29145.
          Hide
          yip.ng added a comment -

          Moved findNextTabElement() to core.js to avoid having to load ace-yui.js.

          Modified: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\core\core.js
          Modified: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\textentry\textentry.js
          Modified: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\util\util.js
          Completed: At revision: 29226

          Show
          yip.ng added a comment - Moved findNextTabElement() to core.js to avoid having to load ace-yui.js. Modified: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\core\core.js Modified: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\textentry\textentry.js Modified: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\util\util.js Completed: At revision: 29226

            People

            • Assignee:
              yip.ng
              Reporter:
              Ken Fyten
            • Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: