Auf dieser Seite befinden sich einige Beispiele für den Einsatz von Activate JS und JSF Activate JS. Wie ein Framework angewendet werden kann, zeigt sich oft durch Code aus der Praxis. Hier finden Sie solche Ausschnitte.

Select2 Autocomplete Dropdown#

Folgendes Beispiel zeigt die Integration des auf JQuery basierenden Select2-Dropdowns (Dritthersteller) in das Activate JS Framework. Zunächst das Control selbst:

$.controls.extend({
	autocomplete: function(next) {
		var value = this.control.get();
		this.element.select2({
			multiple: value.type == "multiple",
			dropdownCssClass: "ui-widget",
			
			createSearchChoice: function(term, data) {
				return {id: term, text: term};
			},
			initSelection: function(element, callback) {
				if (value.value == null || value.value == "")
					return;
				if (value.type == "multiple") {
					callback($.map((value.value || "").split(","), function(value) {
						return {id: value, text: value};
					}));
				} else {
					callback({id: value.value, text: value.value});
				}
			},
			query: function(query) {
				var data = {element: value, search: query.term, page: query.page};
				query.element.trigger("autocomplete", {data: data, callback: function(response) {
					query.callback({results: response});
				}});
			}
		});
		this.element.select2("val", []);
		next();
	}
});

Folgender Code ist die Anwendung des Controls im JSF/XHTML mittels JSF Activate JS Basis-Tag <j:activate>:

<j:activate events="change autocomplete" value="#{autocompleteController.node}" variable="node" handler="#{autocompleteController}">
	<div control="{autocomplete: this.node, bind: this.node.value}"/>
</j:activate>

Schließlich der Java-Code:

public class AutocompleteController implements Serializable {
    [...]
	public Node getValue() {
	    if (value == null)
	        value = new Node();
	    return value;
        }
	public void change(Node node) {
		this.value = node;
	}
	
	public List<Select2Item> autocomplete(Query query) {
		return getComplete().stream()
			.filter(s -> s.contains(query.getSearch()))
			.map(Select2Item::new)
			.collect(Collectors.toList());
	}
}