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());
	}
}
}}}