Skip to main content

[jsr362-experts:] Proposed changes to function names in the JavaScript API

  • From: Neil Griffin < >
  • To:
  • Subject: [jsr362-experts:] Proposed changes to function names in the JavaScript API
  • Date: Tue, 8 Apr 2014 11:29:51 -0400

<html><head><meta http-equiv="Content-Type" content="text/html charset=us-ascii"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;">Hello Experts,<div><br></div><div>Regarding the following JavaScript (JS) functions:</div><div><br></div><div><div>&nbsp; &nbsp; register(portletID, onStateChangeHandler, onErrorHandler)</div><div>&nbsp; &nbsp; onStateChange(portletState, renderData)</div><div>&nbsp; &nbsp; createResourceURL(resParms, cacheParm, onErrorHandler)</div><div>&nbsp; &nbsp; setPortletState(portletState, onErrorHandler)</div><div>&nbsp; &nbsp; action(actionParameters, formElement, onErrorHandler)</div></div><div><br></div><div>I have the following recommendations...</div><div><br></div><div>-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-</div><div><br></div><div>1. Namespace JS functions with "portlet" (similar idea to "jsf" namespace).</div><div><br></div><div>var portlet = {};</div><div>portlet.registry = {};</div><div><br></div><div>-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-</div><div><br></div><div>2. Simplify the signature of the "register" function so that it only takes</div><div>&nbsp; &nbsp; one arg, and rename "portletID" to "portletId" to align with JS naming&nbsp;</div><div>&nbsp; &nbsp; conventions like document.getElementById()</div><div><br></div><div>portlet.register = function(portletId) {</div><div>&nbsp; &nbsp; var registeredPortlet = {};</div><div>&nbsp; &nbsp; registeredPortlet['portletId'] = portletId;</div><div>&nbsp; &nbsp; portlet.registry[portletId] = registeredPortlet;</div><div>}</div><div><div><br></div><div>-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-</div></div><div><br></div><div>3. Rather than pass "onStateChangeHandler" and "onErrorHandler" to the</div><div>&nbsp; &nbsp; register function, provide the following functions that provide more vanilla</div><div>&nbsp; &nbsp; event registration:</div><div><br></div><div>&nbsp; &nbsp; portlet.addOnEvent = function(portletId, callback) { ... }</div><div>&nbsp; &nbsp; portlet.addOnError = function(portletId, callback) { ... }</div><div><br></div><div>-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-</div><div><br></div><div>4. Provide a new function for broadcasting events:</div><div><br></div><div>portlet.broadcastEvent = function(portletId, eventData) {</div><div><div>&nbsp; &nbsp; var portletClient = portlet.registry[portletId];</div><div>&nbsp; &nbsp; var eventListeners = portletClient.eventListeners;</div><div>&nbsp; &nbsp; for (var i in eventListeners) {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; var eventListener = eventListeners[i];</div><div>&nbsp; &nbsp; &nbsp; &nbsp; if (eventListener) {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventListener.call(null, eventData);</div><div>&nbsp; &nbsp; &nbsp; &nbsp; }</div><div>&nbsp; &nbsp; }</div></div><div>}</div><div><br></div><div>&nbsp; &nbsp; This would make it possible for portlet developers to use the Portlet JS API</div><div>&nbsp; &nbsp; to send developer-defined events between portlet clients. Portal vendors</div><div>&nbsp; &nbsp; could broadcast vendor-specific events as well.</div><div><br></div><div>-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-</div><div><br></div><div>5. Rename the "action" function to "portlet.ajax.actionRequest" (similar naming</div><div>&nbsp; &nbsp; as jsf.ajax.request). Also rename "formElement" to "source". In addition,</div><div>&nbsp; &nbsp; the Portlet Hub needs to broadcast an 'actionParameters" event so that</div><div>&nbsp; &nbsp; other portlets on the portal page have a chance to participate in the Ajax</div><div>&nbsp; &nbsp; postback by contributing request parameters. For example, JSF portlets</div><div>&nbsp; &nbsp; need to contribute the "javax.faces.ViewState" parameter in order to</div><div>&nbsp; &nbsp; be able to have things work correctly when serveResource() is called.</div><div><br></div><div><div>portlet.ajax = function() {</div><div>&nbsp; &nbsp; return {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; actionRequest : function actionRequest(portletId, source) {</div><div><br></div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* Send 'actionParameters' event to each registered portlet in */</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* order to provide each portlet with the opportunity to supply */</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* additional namespaced parameters before the request */</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* is dispatched. */</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var otherParameters = {};</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for ( var curPortletId in portlet.registry) {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var eventData = {};</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventData.eventType = 'actionParameters';</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventData.portletId = portletId;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; otherParameters =</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; otherParameters.concat(eventListener.call(null, eventData));</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; broadcastEvent(portletId, eventData);</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }</div><div><br></div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* Send 'dispatchActionRequest' event to the portlet client that */</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* called this portlet.ajax.actionRequest function. That way the */</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* portlet client has an opportunity to dispatch the request itself. */</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var eventData = {};</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventData.eventType = 'dispatchActionRequest';</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventData.portletId = portletId;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventData.url = actionURL;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventData.parameters = otherParameters;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventData.source = source;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; broadcastEvent(portletId, eventData);</div><div>&nbsp; &nbsp; &nbsp; &nbsp; }</div><div>&nbsp; &nbsp; }</div><div>}</div></div><div><br></div><div><div>-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-</div></div><div><br></div><div>6. Replace the "onStateChange" callback with an "actionRequestComplete"</div><div>&nbsp; &nbsp; event that has the "portletState" and "renderData" supplied within "eventData".</div><div><br></div><div><div>portlet.ajax = function() {</div><div>&nbsp; &nbsp; return {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; actionResponse : function actionResponse(portletId, request) {</div></div><div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* Send 'actionResponseComplete' event to the portlet client */</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* called this portlet.ajax.actionResponse function. */</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var eventData = {};</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventData.eventType = 'actionRequestComplete';</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventData.portletId = portletId;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventData.portletState = _GET_PORTLET_STATE(portletId, request);</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventData.renderData = _GET_RENDER_DATA(portletId, request);</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; broadcastEvent(portletId, eventData); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; }</div></div><div>&nbsp; &nbsp; }</div><div>}</div><div><br></div><div>&nbsp; &nbsp; NOTE that the&nbsp;portlet.ajax.actionResponse function would need to be called</div><div>&nbsp; &nbsp; from the portlet client when the asynchronous response comes back from</div><div>&nbsp; &nbsp; the server. For example:</div><div><br></div><div><div>var request = new XMLHttpRequest();</div><div>request.onreadystatechange = function() {</div><div>&nbsp; &nbsp; if (request.readyState == 4 &amp;&amp; request.status == 200) {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; portlet.ajax.actionResponse(portletId, request);</div><div>&nbsp; &nbsp; }</div><div>};</div></div><div><br></div><div><div>-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-</div><div><br></div><div>7. Replace createResourceURL with "portlet.ajax.resourceRequest" and</div><div>&nbsp; &nbsp; have the "resourceURL" supplied within "eventData".</div><div><br></div><div><div>portlet.ajax = function() {</div><div>&nbsp; &nbsp; return {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; resourceRequest : function resourceRequest(portletId, source, resourceParams) {</div></div><div><br></div><div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* Send 'dispatchResourceRequest' event to the portlet client that */</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* called this portlet.ajax.resourceRequest function. */</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var eventData = {};</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventData.eventType = 'dispatchResourceRequest';</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventData.portletId = portletId;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventData.url = _GET_RESOURCE_URL(portletId, resourceParams);</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventData.parameters = resourceParams;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventData.source = source;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; broadcastEvent(portletId, eventData);</div><div>&nbsp; &nbsp; &nbsp; &nbsp; }</div></div><div>&nbsp; &nbsp; }</div><div>}</div></div><div><br></div><div>-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-</div><div><br></div><div>8. For consistency, broadcast "resourceRequestComplete" event as well.</div><div><div><br></div><div>portlet.ajax = function() {</div><div>&nbsp; &nbsp; return {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; resourceResponse : function resourceResponse(portletId, request) {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* Send 'resourceResponseComplete' event to the portlet client */</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* called this portlet.ajax.resourceResponse function. */</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var eventData = {};</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventData.eventType = 'resourceRequestComplete';</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventData.portletId = portletId;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventData.portletState = _GET_PORTLET_STATE(portletId, request);</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventData.renderData = _GET_RENDER_DATA(portletId, request);</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;broadcastEvent(portletId, eventData);</div><div>&nbsp; &nbsp; &nbsp; &nbsp; }</div><div>&nbsp; &nbsp; }</div><div>}</div></div><div><br></div><div><div>&nbsp; &nbsp; NOTE that the portlet.ajax.resourceResponse function would need to be called</div><div>&nbsp; &nbsp; from the portlet client when the asynchronous response comes back from</div><div>&nbsp; &nbsp; the server. For example:</div><div><br></div><div>var request = new XMLHttpRequest();</div><div>request.onreadystatechange = function() {</div><div>&nbsp; &nbsp; if (request.readyState == 4 &amp;&amp; request.status == 200) {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; portlet.ajax.resourceResponse(portletId, request);</div><div>&nbsp; &nbsp; }</div><div>};</div></div><div><br></div><div><br></div><div>-- Neil</div><div><br></div><div><img apple-inline="yes" id="5D5750DF-173E-4DC4-A0E4-8F1A1A4E1841" height="404" width="699" apple-width="yes" apple-height="yes" src="cid:205D1D81-6B45-4F6F-ADDB-6361B7D87AA6@cfl.rr.com"></div><div><br></div></body></html>

PNG image



[jsr362-experts:] Proposed changes to function names in the JavaScript API

Neil Griffin 04/08/2014

[jsr362-experts:] Re: Proposed changes to function names in the JavaScript API

Martin Scott Nicklous 04/10/2014
 
 
Close
loading
Please Confirm
Close