[jira] Updated: (WICKET-1716) make autocompleter more customizable

["Peter Ertl (JIRA)" <ji...@apache.org>]

     [ https://issues.apache.org/jira/browse/WICKET-1716?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Peter Ertl updated WICKET-1716:
-------------------------------

    Attachment: wicket-autocompleter-with-css-class-for-1.4.x.patch
                wicket-autocompleter-with-css-class-for-1.3.x.patch

> make autocompleter more customizable
> ------------------------------------
>
>                 Key: WICKET-1716
>                 URL: https://issues.apache.org/jira/browse/WICKET-1716
>             Project: Wicket
>          Issue Type: New Feature
>          Components: wicket-extensions
>            Reporter: Peter Ertl
>         Attachments: wicket-autocompleter-with-css-class-for-1.3.x.patch, wicket-autocompleter-with-css-class-for-1.4.x.patch
>
>
> disclaimer: Excuse this somehow large explanation :-(
> Problems in current wicket autocompleter implementation (including patch)
> Wicket will by default make the width of the autocompleter the same as the width of the related input field. This is often useful but also can be really nasty sometimes. Imagine you have a input control to enter the ISBN of a book (size: 13 digits). While typing any parts of the book's title, author, genre, year or ISBN the autocompleter should popup a list of book entries like which contains the matching input string:
>   autocompleter output (structure)
>   --- item 1 ---
>   ISBN 1
>   AUTHOR 1
>   TITLE 1
>   GENRE 1
>   YEAR 1 
>   --- item 2 ---
>   ISBN 2
>   AUTHOR 2
>   TITLE 2
>   GENRE 2
>   YEAR 2
>   --------------
>   ...
>   --- item n ---
> When pressing enter the input field will be filled with the ISBN of the currently selected book.
> BTW since WICKET-488 is resolved the other read-only fields of the form will contain title, author, etc. (Thanks, Igor!! :-)
> Now the problem: Typically the autocompleter entry (especially the book title) will be a lot a longer than the 13 digit ISBN number. The only chance is to make the wicket autocompleter selection as large as required is to make the input field ridiculously long (something like 80 chars or even more). This is really ugly and wastes a lot of space in the user interface for no reason. Also it will confuse the user who thinks the input really needs to be that long.
> Typically wicket's autocompleter markup looks like this:
>  HTML
>   <div id="isbn1-autocomplete-container" style="overflow: auto; position: absolute; left: 8px; top: 30px; width: 155px;" class="wicket-aa-container">
>   	  <div class="wicket-aa" id="text1-autocomplete">
> 		  <ul>
>   		      <li class="selected" textvalue="978-1932394986">.....</li>
> 		      <li textvalue="978-1932394222">.....</li>
> 		      ....
> 		      <li textvalue="978-1932311186">.....</li>
> 		  </ul>
> 	  </div>
>   </div>
> The 'style' attribute in the <div> contains 'width:155px' and is impossible to override from CSS because 'style' is "stronger" (the 'cascading' in css).
> So I attached a patch to enable / disable the adjustment of the width to the input field.
>   JAVA
>     final AutoCompleteSettings opts = new AutoCompleteSettings();
>     opts.setAdjustInputWidth(false);
>     field.add(new AutoCompleteBehavior(renderer, opts)
>     ...
> The markup will now look like this:
>   HTML
>     <div id="isbn1-autocomplete-container" style="overflow: auto; position: absolute; left: 8px; top: 30px;" class="wicket-aa-container">
> Notice the lack of the 'width' attribute...
> Now to resolve problem #1 you could write:
>   MYSTYLE.CSS
>     .wicket-aa-container {
>       width: 600px; 
>     }
> However this will not only grow the great book autocompleter to the desired width but also other autocompleters ever being used on that as well. Also you can _NOT_ do this:
>   MYSTYLE.CSS
>     #isbn1-autocomplete-container {
>       width: 600px;
>     }
> Because a linked stylesheet is typically static (and cached by the browser) and the DOM id of the autocompleter is generated dynamically. I don't consider generating dynamic CSS an option for such a simple problem.
> So what would be just great is the possibility to add an extra css class to the container tag:
>   JAVA
>     final AutoCompleteSettings opts = new AutoCompleteSettings();
>     opts.setCssClassName("book-autocompleter");
>     opts.setAdjustInputWidth(false);
>     field.add(new AutoCompleteBehavior(renderer, opts)
>     ...
>   HTML
>     <div id="isbn1-autocomplete-container" style="overflow: auto; position: absolute; left: 8px; top: 30px;" class="wicket-aa-container book-autocompleter">
> You will immediately notice the additional class name 'book-autocompleter'
>   MYSTYLE.CSS
>     .book-autocompleter {
>       width: 600px;
>     }
> To summarize my patch:
> To extra methods in org.apache.wicket.extensions.ajax.markup.html.autocomplete.AutoCompleteSettings
>   /**
>    * Sets an CSS class name to add to the autocompleter markup container
>    * <p/>
>    * This makes it easier to have multiple autocompleters in your application
>    * with different style and layout.
>    *
>    * @param cssClassName valid CSS class name
>    */
>   public void setCssClassName(final String cssClassName)
>   /**
>    * Adjust the width of the autocompleter selection window to the width of the related input field.
>    * <p/>
>    * Otherwise the size will depend on the default browser behavior and CSS.
>    *
>     * @param adjustInputWidth  <code>true</code> if the autocompleter should have the same size  as
>    *                           the input field, <code>false</code> for default browser behavior
>    */
>     public void setAdjustInputWidth(final boolean adjustInputWidth)
> Unless you call these methods the autocompleter will behave exactly as before so this will not break previous code.
> Would be just great to see this patch applied :-)

-- 
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.