Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.

Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.

The main emphasis of this section is p:autocomplete, a component for gathering strings in a textfield that has suggestions in a dropdown box. This section also covers the much simpler p:inputMask, a textfield that shows template text and only allows certain types of characters in each position. See http://www.coreservlets.com/JSF-Tutorial/primefaces/ for the full tutorial, associated code, exercises, and exercise solutions. You can also download PDF files of each lecture for saving or printing.

5.
p:autocomplete: Overview
• Appearance and behavior
– Textfield with dropdown of suggested completions
– Developer can choose whether user is forced to accept
one of the suggestions or can also enter arbitrary text
• Purpose: for collecting strings from user
– In most basic usage, value is not converted: bean property
must be String.
7

6.
p:autocomplete: Summary of
Most Important Attributes
• <p:autoComplete …/>
– value
• Should point to bean property of type String.
– completeMethod
• A bean property referring to a server-side method that takes a
String as input (the text entered so far) and returns a List<String>
(the suggestions to show).
– forceSelection (true or false [default])
• Is user constrained to choose a selection (true), or is free text
allowed (false).
– minQueryLength (integer [default 1])
• Number of chars before suggestions start.
– queryDelay (integer [default 300])
• Number of milliseconds before contacting server. Default 300.
– multiple (true or false [default])
• Can user select more than one choice and send it as List?
8

7.
More Details on forceSelection
• forceSelection="false" [default]
– User can choose a selection from the menu or type in
something else. Either is accepted.
• forceSelection="true"
– User can choose a selection or type something in that
exactly matches a selection (including case). Anything
else is rejected: field is cleared and it fails “required”
validation rule
• Warning when using multiple="true"
– forceSelection is automatically true, but in older
PrimeFaces releases, the widget breaks if you actually say
forceSelection="true"
• See upcoming slides on multiple selections
9

8.
Example: Constrained Input
• Input page collects
– A computer programming language.
• User can only choose a suggestion, and cannot enter
languages not in the list (forceSelection="true")
• Completions start after first character (default of 1 for
minQueryLength)
• Small delay after typing before server contacted (default of
300 for queryDelay)
• Results page shows
– Confirmation of selection
10

10.
Bean (Completion Method)
// Autocompleter method
public List<String> completeLanguage(String languagePrefix) {
List<String> matches = new ArrayList<>();
for(String possibleLanguage: languageArray) {
if(possibleLanguage.toUpperCase()
.startsWith(languagePrefix.toUpperCase())) {
matches.add(possibleLanguage);
}
}
return(matches);
}
// Action controller method
public String register() {
return("show-language");
}
}
12
Unlike many client-side autocompleters, there
are no builtin rules as to how matches are done
(front of text vs. middle of text, case sensitive,
etc.). The method returns a List designating the
suggestions, and the way the List is created is
totally up to the developer. Here, I choose to do
a case-insensitive match against the front of the
user data.

14.
Example: Unconstrained Input
• Input page collects
– A computer programming language.
• User can either choose a suggestion or enter a language
not in the list (default of false for forceSelection)
• Completions start after second character
(minQueryLength="2")
• One second delay after typing before server contacted
(queryDelay="1000")
• Results page and bean
– Same as previous example, so code not repeated here
16

18.
Multiple Selection
• multiple="true"
– Lets user choose more than one entry
– Corresponding bean property is of type
List<String> instead of String
• Ajax calls triggered on select/unselect
– <p:ajax event="itemSelect" listener="…" …/>
– <p:ajax event="itemUnselect" listener="…" …/>
• Ajax triggered when users adds or removes items from set
of selections. Listener method takes a SelectEvent or
UnSelectEvent as argument, and from that you can
discover the item added or removed.
– Instead of using listener, you could just track the List<String>,
which is updated automatically. However, it is usually more
convenient to use the Listener if you only care about the item that
was most recently added or removed.
20

19.
Example: Multiple Selections
• Input page collects
– Any number of computer programming languages
• User can only choose among suggestion, and cannot
enter languages not in the list. I.e., forceSelection is
automatically true for each individual entry, and this
behavior cannot be changed.
• Input page shows Ajax-updated message
– For every entry added to or removed from set of choices
• Results page shows
– Confirmation of list of languages selected.
• Uses ui:repeat to put them into <ul> list.
21

28.
p:inputMask: Overview
• Appearance and behavior
– Textfield with template text that constrains the values that
the user can enter.
• Purpose: for collecting strings from user
– Value is not converted. Bean property must be string.
Spaces, dashes and other template text are sent with the
string and must be parsed on server.
•
30

29.
Documentation for p:inputMask
• Very, very sparse in official User’s Guide
– At least as of 5.1
– No description of the interpretation of the special
characters (9, a, *, and ?)
• Underlying library is well documented
– http://digitalbush.com/projects/masked-input-plugin/
• Covered well in PrimeFaces Cookbook 2/e
– See page 54 and following
31

30.
The mask Attribute
• <p:inputMask mask="…" … />
– Each character has five possible values
• 9. Permits only a number to be entered there.
• a. Permits only a letter (upper or lower case) to be entered
there.
• *. Permits a letter or a number to be entered there.
• ?. Indicates that everything following is optional
• Anything else. Literal text that is displayed to the user and
is not editable. This text does become part of value sent to
server.
32

31.
The value and slotChar
Attributes
• <p:inputMask mask="…"
value="…" slotChar="…"/>
– value
• Should point to bean property of type String. Literal text in
textfield (e.g., parens and dashes in phone number) is part
of value sent to server, so server method must parse it
– slotChar
• The placeholder text. Defaults to underscore.
<p:inputText mask="(999) 999-9999"/>
• User sees “(___) ___-____” after clicking in field
<p:inputText mask="(999) 999-9999" slotChar="X"/>
• User sees “(XXX) XXX-XXXX” after clicking in field
33