Ajax and JSF2.x Advanced Web Technologies Ajax 6) Ajax in JSF2.x - PowerPoint PPT Presentation

Ajax and JSF2.x Advanced Web Technologies Ajax � 6) Ajax in JSF2.x AJAX Principles AJAX example in PHP (and some other rarities) Ajax in JSF � Emmanuel Benoist JSF1.2 vs JSF 2.0 Fall Term 2016-17 The f:ajax tag Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 1 2 Ajax AJAX Principles Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 3 4

Ajax Principles AJAX application life cycle. Use Javascript for collecting information AJAX example in PHP Create a HTTP Request (containing a random number in order to avoid caching) Send this request and organize a handler for being executed after the reception of the response. Display the results inside the DOM. . . . Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 5 6 AJAX Example The form containing a selection < form > Select a Customer: We have a Form containing a selection box < select name=”customer” onchange=”showCustomer(this.value ց On Change of the selection, the function → )” > showCustomer() is executed < option value=”ALFKI” > Alfreds Futterkiste < option value=”NORTS” > North/South The function creates an Object (XMLHttpRequest or its < option value=”WOLZA” > Wolski Zajazd MS-cousins) < /select > A request is sent to a PHP file, < /form > The PHP program generates a Table < p > The table is included in the html DOM. < div id=”txtHint” >< b > Customer info will be listed here. < /b ց → >< /div > < /p > Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 7 8

Show Customer Function for creating the XML/HTTP object We create a Request and send it using the XML/HTTP object function showCustomer(str) { function GetXmlHttpObject() { xmlHttp=GetXmlHttpObject(); var xmlHttp=null; if (xmlHttp==null) { try { // Firefox, Opera 8.0+, Safari alert (”Your browser does not support AJAX!”); xmlHttp=new XMLHttpRequest(); return; } catch (e) { // Internet Explorer } try { var url=”getcustomer.php”; xmlHttp=new ActiveXObject(”Msxml2.XMLHTTP”); url=url+”?q=”+str; } url=url+”&sid=”+Math.random(); catch (e) { xmlHttp.onreadystatechange=stateChanged; xmlHttp=new ActiveXObject(”Microsoft.XMLHTTP”); } xmlHttp.open(”GET”,url,true); } xmlHttp.send(null); return xmlHttp; } } Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 9 10 Handler for the Response The PHP Program used to generate the response Each Time the state change, the handler function is executed: The program reads the informtion and generate a It should only react for state 4 since it means: response response: received. $q=$ GET[”q”]; $db table = array(...); function stateChanged() { if (xmlHttp.readyState==4) { echo ” < table border=’1’ > < tr > < th > Firstname < /th > < th > Lastname < /th >< /tr > ”; document.getElementById(”txtHint”).innerHTML= xmlHttp.responseText; $row = $db table[$q]; echo ” < tr > echo ” < td > ” . $row[’FirstName’] . ” < /td > ”; } } echo ” < td > ” . $row[’LastName’] . ” < /td >< /tr > ”; echo ” < /table > ”; Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 11 12

Ajax in JSF JSF1.2 vs JSF 2.x Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 13 14 Ajax in JSF Principles JSF 2.x provides a set of predifined tags JSF 1.2 Offer a native AJAX support. Libraries of components f:ajax Designed for AJAX support (javascript and so on) Partial Rendering of the page Ajax4jsf or RichFaces For some events (specified in tag) JSF2.x Form is sent to the server Inherits from RichFaces functionalities Server executes life cycle Part of the default framework Rerenders only some elements Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 15 16

Sending an Ajax Request Use the tag f:ajax Is a client side behaviour it is always added as a child tag (behavior) to another UI The f:ajax tag component < h:form > < h:panelGrid > < h:inputText value=”# { bean.text } ” > < f:ajax event=”keyup”/ > < /h:inputText > < h:outputText id=”text” value=”# { bean.text } ” / > < /h:panelGrid > < /h:form > Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 17 18 Description of The Event Attribute Partial View Rendering Event: String on which event Ajax request will be fired. Only re-render the components that need it If not specified, a default behavior based on parent component Specify to the ajax component which component(s) need to be will be applied. re-rendered The default event is action for ActionSource (ie: button) The partial view is re-rendered on server components and valueChange for EditableValueHolder components (ie: input). The part of the form corresponding to the element is sent action and valueChange are actual String values that can be The corresponding component tree is updated, and the applied applied event attribute. corresponding backing beans, The partial view is re-rendered For the event attribute you do not specify the “onevent” Only the required part of the DOM is sent in XML (onkeyup) like in JavaScript, but only the event ( keyup ) Each component has a default event (if no event is specified) For h:inputText it is onchange Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 19 20

Partial View Rendering (Cont.) Execute a specific method (listener) Need the following bean < h:form > < h:panelGrid > @ManagedBean(name = ”bean”) < h:inputText value=”# { bean.text } ” > public class Bean { < f:ajax event=”keyup” render=”text”/ > private String text; // getter and setter < /h:inputText > ... < h:outputText id=”text” value=”# { bean.text } ” / > private Integer count; // getter and setter < /h:panelGrid > public void countListener(AjaxBehaviorEvent event) { < /h:form > count = text.length(); } http://localhost:8080/ajax2.0/faces/softSec.xhtml } Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 21 22 Listener The render attribute The listener Attribute Contains the listener method to invoke during Ajax request One can re-render many components, use space as In our example, render pointed to actual component id sperator we want to render back. render attribute could be set to the following values: < h:form > @all Render all components in view < h:panelGrid > @none Render no component in view (= default) < h:inputText value=”# { bean.text } ” > @this Render only the component that triggered the Ajax < f:ajax event=”keyup” render=”text count” request listener=”# { bean.countListener } ”/ > @form Render all components within this form id’s One or more id’s of components to be rendered < /h:inputText > EL EL expression which resolves to Collection of Strings < h:outputText id=”text” value=”# { bean.text } ” / > < h:outputText id=”count” value=”# { bean.count } ” / > < /h:panelGrid > < /h:form > Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 23 24