Search on blog

Petition by Java EE Guardians

Twitter

luni, 13 iunie 2016

JSF 2.3 - Generating a JavaScript function in the global JavaScript scope which allows the end user to execute a JSF AJAX request by just a function call in the JavaScript context

Sometimes, it may be useful to encapsulate the AJAX requests in
JavaScript functions placed in the JavaScript global scope in such way that we
can simply call them by name, without arguments, or with arguments that represent
the data that should be passed to the server‐side via the encapsulated AJAX request. Obviously the jsf.ajax.request()
and mojarra.ab()
functions donʹt allow us to accomplish that, but as you will see, JSF 2.3
(and OmniFaces)
will call the jsf.ajax.request()
from a JavaScript global scoped function that can be easily called by its name.

Letʹs take a look at this simple HTML code:

<h5>Your
Feedback About JSF 2.3: </h5>

<div>

Your Name: <input id="userId"
type="text"/>

<p id="feedbackId"
contenteditable="true">type your feedback here</p>

</div>

<br/>

<button
onclick="sendFeedback();">Send Feedback</button>

Note that the sendFeedback()
function should be defined as a global scoped JavaScript function capable to
fire an JSF AJAX request. The user name and feedback should be added as
parameters of the AJAX request.

JSF 2.3 comes with a handy new component named CommandScript (starting with JSF 2.3.0-m06)
which is capable to solve this kind of tasks. This component be used by the
page authors via the <h:commandScript/>
tag. This component extends the javax.faces.component.UICommand
(<h:commandXxx/>) which means that it
inherits the major features of JSF commands, like action, actionListener, immediate, etc. Moreover, this component also
supports nesting of <f:param/>,
<f:actionListener/>
and <f:setPropertyActionListener/>,
exactly as in <h:commandXxx/>.

In addition, the foundation of CommandScript consists of the fact that it can generate a
JavaScript function in the global JavaScript scope. Via this function call, the
end‐user can execute JSF AJAX requests. There are two requirements for this
component:

- The name
attribute is mandatory, and it indicates the name of the generated JavaScript
function (you can define namespaced function name also by using a dot, ".", inside the
function name).

- The <h:commandScript/>
must be nested in a <h:form/>.

For example, the simplest way to use <h:commandScript/>, is listed below:

<h:form>

<h:commandScript
name="sendFeedback"/>

</h:form>

This example is correct, but is doesnʹt do much! Basically, it
generates in page a snippet of code as below:

<span
id="j_idt5:j_idt6">

<script
type="text/javascript">

var sendFeedback=function(o){

var o=(typeof o==='object')&&o?o:{};

mojarra.ab('j_idt5:j_idt6',null,'action',0,0,{'params':o})

}

</script>

</span>

It is important to notice that this is just a simple JSF AJAX request,
so when we call the sendFeedback()
function, we will fire an ʺemptyʺ JSF AJAX request. Obviously, we are interested to control the
values of the execute
and render
attributes. This is very simple, because <h:commandScript/> supports the execute and render attributes exactly
as <f:ajax/>,
so we can do this:

So far, so good! If you donʹt have extra information to pass to the
server‐side, or it is collected from the form (e.g. <h:inputText/>), then this should
be enough. But, in our case we have extra information to pass and this
information comes through plain HTML code, so we have to find a solution for
adding this information into the JSF AJAX request. Thanks to the <h:commandScript/>
the generated function also supports a JavaScript object as an argument which
will then end up in the HTTP request parameter map (donʹt forget about <f:param/>). In
order to pass an object to the generated function, we need to wrap its call
into a global JavaScript function, as below:

Abonaţi-vă la JSF/OmniFaces Fans

Visitors Starting 4 September 2015

Others

[OmniFaces utilities]

Renderers

Collection of utility methods for the JSF API with respect to working with Renderer

Platform

This class provides access to (Java EE 6) platform services from the view point of JSF

Map Wrapper

Implementation of Map that wraps another map. This allows interception of one or more method on this wrapped map

JNDI

Utility class for simplifying some web related tasks that use JNDI under the hood, such as getting the <env-entry> from web.xml

State

Helper class for StateHelper that uses generic type-inference to make code that uses the StateHelper slightly less verbose

Beans

Collection of utility methods for the CDI API that are mainly shortcuts for obtaining stuff from the BeanManager

Components

Collection of utility methods for the JSF API with respect to working with UIComponent. There are several traversal/lookup methods, there are several UIForm and UIInput related methods which makes it easier to deal with forms and inputs

.Events

Collection of utility methods for the JSF API with respect to working with system and phase events