I am busy writing my own JSF2 UIComponents and their relevant renderers. All of my UIComponents implements ClientBehaviorHolder. What I don't understand is how to really render ClientBehaviorHolder.
For example, the following code illustrates how ClientBehaviorHolder is rendered in Mojarra.
private static void renderHandler(FacesContext context,
UIComponent component,
Collection<ClientBehaviorContext.Parameter> params,
String handlerName,
Object handlerValue,
String behaviorEventName,
String submitTarget,
boolean needsSubmit,
boolean includeExec)
throws IOException {
ResponseWriter writer = context.getResponseWriter();
String userHandler = getNonEmptyUserHandler(handlerValue);
List<ClientBehavior> behaviors = getClientBehaviors(component, behaviorEventName);
// Don't render behavior scripts if component is disabled
if ((null != behaviors) &&
(behaviors.size() > 0) &&
Util.componentIsDisabled(component)) {
behaviors = null;
}
if (params == null) {
params = Collections.emptyList();
}
String handler = null;
switch (getHandlerType(behaviors, params, userHandler, needsSubmit, includeExec)) {
case USER_HANDLER_ONLY:
handler = userHandler;
break;
case SINGLE_BEHAVIOR_ONLY:
handler = getSingleBehaviorHandler(context,
component,
behaviors.get(0),
params,
behaviorEventName,
submitTarget,
needsSubmit);
break;
case SUBMIT_ONLY:
handler = getSubmitHandler(context,
component,
params,
submitTarget,
true);
break;
case CHAIN:
handler = getChainedHandler(context,
component,
behaviors,
params,
behaviorEventName,
userHandler,
submitTarget,
needsSubmit);
break;
default:
assert(false);
}
writer.writeAttribute(handlerName, handler, null);
}
For submit handlers, Mojarra adds the mojarra.jsfcljs javascript, UIParameters and other scripts. For chain handlers, jsf.util.chain is used.
My question is:
How does one determine if we have to render handlers in chain or a single behaviour or user specific handler?
mojarra.jsfcljs is only unique to Mojarra. PrimeFaces have their own implementation, so does Apache Tomahawk. Question is: what does mojarra.jsfcljs do and what is its use? This is so that I can write one for my own? Also, where can I find the implementation of mojarra.jsfcljs?
What is the specification to render ClientBehaviorHolder?
My sincere thanks in advance.
How does one determine if we have to render handlers in chain or a single behaviour or user specific handler?
Imagine that the enduser (read: the JSF developer who's using your component) programmed:
<your:component onclick="return foo()" />
And you intented to ultimately render for your component's own purpose:
<someHtmlElement onclick="jsf.ajax.request(...); return false;" />
Then you can't just concatenate the enduser's onclick in front of your component's jsf.ajax.request() like so
<someHtmlElement onclick="return foo(); jsf.ajax.request(...); return false;" />
Even if it returned true, your component's jsf.ajax.request won't be invoked at all. You ultimately want to end up something like:
<someHtmlElement onclick="if returnsTrue('return foo();') { jsf.ajax.request(...); } return false;" />
That's exactly what jsf.util.chain() is doing under the covers.
mojarra.jsfcljs is only unique to Mojarra. PrimeFaces have their own implementation, so does Apache Tomahawk. Question is: what does mojarra.jsfcljs do and what is its use? This is so that I can write one for my own? Also, where can I find the implementation of mojarra.jsfcljs?
It's inside the jsf.js file. Easy way to find it is to open a JSF page with <f:ajax> embedded and look in the generated <head> source for the <script> with its URL. This file is by default minified. If you set javax.faces.PROJECT_STAGE context param to Development, then this will be served unminified. The task of the jsfcljs() function is to submit the parent form with the necessary parameters. Here's an extract of relevance coming from Mojarra 2.1.21.
/*
* This is called by command link and command button. It provides
* the form it is nested in, the parameters that need to be
* added and finally, the target of the action. This function
* will delete any parameters added <em>after</em> the form
* has been submitted to handle DOM caching issues.
*
* #param f - the target form
* #param pvp - associative array of parameter
* key/value pairs to be added to the form as hidden input
* fields.
* #param t - the target of the form submission
*/
mojarra.jsfcljs = function jsfcljs(f, pvp, t) {
What is the specification to render ClientBehaviorHolder?
Use ClientBehavior#getScript() to get the autogenerated script. It requires a ClientBehaviorContext argument which can be created using ClientBehaviorContext#createClientBehaviorContext(). It's in turn your responsibility to render it into the appropriate HTML attribute, such as onclick.
FacesContext context = FacesContext.getCurrentInstance();
UIComponent inputOrCommandComponent = ...; // Your component.
String event = "click"; // Just the particular HTML DOM event name you need to listen on.
ClientBehaviorContext clientBehaviorContext = ClientBehaviorContext.createClientBehaviorContext(context, component, event, component.getClientId(context), null);
StringBuilder builder = new StringBuilder();
for (ClientBehavior behavior : component.getClientBehaviors().get(event)) { // Collect all <f:ajax> declarations on the given event.
builder.append(behavior.getScript(clientBehaviorContext));
builder.append(';');
}
String script = builder.toString();
// Write it to the desired HTML attribute.
Note that you absolutely don't need to worry about writing JSF implementation specific scripts this way. They will be generated for you.
All with all, ClientBehaviorHolder is just an abstraction of ajax support. It allows developers to nest <f:ajax> in your component. All standard JSF UIInput and UICommand components implement it.
Related
I have a function to call which component on my XPage performs a submit to the server:
//Used to check which if a component triggered an update
function submittedBy( componentId ){
try {
var eventHandlerClientId = param.get( '$$xspsubmitid' );
var eventHandlerId = #RightBack( eventHandlerClientId, ':' );
var eventHandler = getComponent( eventHandlerId );
if( !eventHandler ){
return false;
}
var parentComponent = eventHandler.getParent();
if( !parentComponent ){
return false;
}
return ( parentComponent.getId() === componentId );
} catch( e ){ /*Debug.logException( e );*/ }
}
I have a validator which is called normally via expression language:
validator="#{applicationValidators.valPhone}"
I would like to make the validator conditioned by a check if the submit is done by the element/component with the btnSave id on it e.g.
<xp:this.validator><![CDATA[#{javascript:if (submittedBy('btnSave')){
return applicationValidators.valPhone();
}}]]></xp:this.validator>
but the valPhone funktion expects some inputs which are injected automatically if I call the method via EL:
public void valPhone(FacesContext facesContext, UIComponent component, Object value)
Is there a way to include the submittedBy function in the EL or must I supply the objects when calling the function in SSJS cause for now I get the error message:
Error while executing JavaScript action expression Script interpreter
error, line=2, col=38: Java method 'valPhone()' on java class
'org.acme.projectx.test.ApplicationValidators' not found
When I apply the objects e.g.
applicationValidators.valPhone(facesContext,getComponent("inpPhone"),getComponent("inpPhone").getValue());
it does run the validator method but does not seem to know how to handle the response (in my case I throw a ValidatorExeption with a message.
Error while executing JavaScript action expression Script interpreter
error, line=4, col=31: Error calling method
'valPhone(com.ibm.xsp.domino.context.DominoFacesContext,
com.ibm.xsp.component.xp.XspInputText, java.lang.String)' on java
class 'org.acme.projectx.test.ApplicationValidators' Phone is not
valid
Phone is not valid is the string message that I included in the FacesMessagge that I throw in the ValidatorExeption.
I'd take a totally different approach:
create a page controller class
call a method in the controller when the button is clicked
do your validation based on your value(s) in that method
if validation fails create a message in the validation error stack
I don't have a reference right now but this would be much easier to program and control in general.
I have a lot of code with standard required validation.
Something like this
<h:inputText required="true" requiredMessage="it is required!"/>
Now, I need to change behavior of RequiredValidator: put error message to the context, but do not interrupt cycle. May be to do something more.
I tried to add custom validator with the same id, but it did not work.
<validator>
<validator-id>javax.faces.Required</validator-id>
<validator-class>my.RequiredValidator</validator-class>
</validator>
Is it possible?
Empty fields are not committed to validators. I could not find a matching documentation, but I tested the environment and please take a look at Get empty strings from <h:inputText> go through validation.
This question also handles an empty string input and BalusC says:
JSF 1.x does by default not fire validators on empty fields.
OK, it's about JSF 1.X, but it seems it didn't change.
Validators are to interrupt the request, but that's not what you want. So could it be a workaround to use the setter method for your needs?
Ommit the required attribute from your inputText and add a FacesMessage in the setter for your textInput. Assumed the assingned value is #{myBean.description}, the setter may look like this:
public void setDescription(String value) {
String _tmp = value.trim();
if (_tmp.equals("")) {
FacesContext ctx = FacesContext.getCurrentInstance();
ctx.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR
, "Error:", "Input must not be empty"));
this.description = null;
return;
}
this.description = _tmp;
}
I'm writing a validator method in JSF 2. I have a ui:repeat element in my page that renders a list of items. Each item has a date property, and I need to ensure the dates correspond to each other in a specific sequence, e.g. the date of the last item in the list doesn't come before the date of the first item. I was trying to get all the child elements inside the ui:repeat and iterate over them to do the comparison, but I don't really know where to start. I've seen how to get a specific element by ID:
UIInput input = (UIInput) context.getViewRoot().findComponent(elementId);
However, within the ui:repeat the ID values are made unique by JSF, so I don't know what they are at compile time. Furthermore, at compile time I don't know how many items there will be in the list.
I've looked at the Javadoc for UIViewRoot and other associated classes, and have tried a couple things, but I'm getting errors, things aren't working, and I don't really know if I'm even close to getting anywhere. I'm leaving the code of my attempts out of this post, becuase they're probably a joke.
There's physically only one UIInput component whose state changes depending on the current iteration round of UIRepeat. It's available by just its client ID without the UIRepeat index: findComponent("formId:inputId") (the UIRepeat index is only of significance in the client side). However, when the component is programmatically been accessed outside the context of UIRepeat this way, then it'll indeed return a seemingly empty state.
In order to visit the UIInput component in all those states as they are inside the UIRepeat and collect their values, you need to run UIComponent#visitTree() on the UIRepeat.
Here's a kickoff example:
<ui:repeat value="#{bean.items}" var="item">
<f:event type="postValidate" listener="#{bean.validateOrder}" />
<h:inputText value="#{item.value}" />
</ui:repeat>
With this validateOrder() method (again, just a kickoff example, this approach naively assumes that there's only one UIInput component in the repeater):
#SuppressWarnings("rawtypes")
public void validateOrder(ComponentSystemEvent event) {
final FacesContext context = FacesContext.getCurrentInstance();
final List<Comparable> values = new ArrayList<Comparable>();
event.getComponent().visitTree(VisitContext.createVisitContext(context), new VisitCallback() {
#Override
public VisitResult visit(VisitContext context, UIComponent target) {
if (target instanceof UIInput) {
values.add((Comparable) ((UIInput) target).getValue());
}
return VisitResult.ACCEPT;
}
});
boolean ordered = new ArrayList<Comparable>(new TreeSet<Comparable>(values)).equals(values);
if (!ordered) {
event.getComponent().visitTree(VisitContext.createVisitContext(context), new VisitCallback() {
#Override
public VisitResult visit(VisitContext context, UIComponent target) {
if (target instanceof UIInput) {
((UIInput) target).setValid(false);
}
return VisitResult.ACCEPT;
}
});
context.validationFailed();
context.addMessage(null, new FacesMessage("Values are not in order!"));
}
}
Note that it visits the tree twice; first time to collect the values and second time to mark those inputs invalid. Also note that this very specific requirement can't be done with a standard JSF validator. You can't attach a <f:validator> on <ui:repeat>. Attaching it on <h:inputText> is theoretically possible, but it would cause the very same validator to run as many times as the amount of repeated items, which doens't make sense. Also, the validator would need to take getSubmittedValue() vs getValue() into account this way.
OmniFaces has an <o:validateOrder> component which does a similar thing on fixed components, but it isn't designed for usage in dynamically repeated components.
I am looking for a possibility to write programmatically ajax call on every element.
I have to ways, to build the UI Components
first - panelGroup binding- )
HtmlSelectOneMenu HSOM = new HtmlSelectOneMenu();
UISelectItems items = new UISelectItems();
List<SelectItem> comboList = new ArrayList<SelectItem>();
comboList.add(new SelectItem(" "));
comboList.add(new SelectItem("1"));
comboList.add(new SelectItem("2"));
comboList.add(new SelectItem("3"));
items.setValue(comboList);
HSOM.getChildren().add(items);
HSOM.setValueExpression("value", buildValueExpression("#{productDetails.productOptionValue}"));
AjaxBehavior ajax = new AjaxBehavior();
ajax.setValueExpression("value", buildValueExpression("#{productDetails.updateProduct()}"));
HSOM.addClientBehavior("valueChange", ajax);
HSOM.addValidator(new BeanValidator());
productOptions.getChildren().add(HSOM);
private ValueExpression buildValueExpression(String exp) {
FacesContext facesInstance = FacesContext.getCurrentInstance();
Application application = facesInstance.getApplication();
ExpressionFactory expressionFactory = application.getExpressionFactory();
String expression = exp;
return expressionFactory.createValueExpression(facesInstance.getELContext(), expression, String.class);
}
I can see, that a Ajax Call is linked to the component, but the updateProduct() function did not get called.
the other possibility to create the dynamic components is)
public void encodeEnd(FacesContext context) throws IOException {
System.out.println("Start encoding");
ResponseWriter responseWriter = context.getResponseWriter();
responseWriter.startElement("span", null);
responseWriter.writeAttribute("id",getClientId(context),"id");
responseWriter.writeAttribute("name", getClientId(context),"clientId");
responseWriter.write("Farbe");
responseWriter.endElement("span");
responseWriter.startElement("select", null);
responseWriter.writeAttribute("id",getClientId(context),"id");
responseWriter.writeAttribute("name", getClientId(context),"clientId");
responseWriter.writeAttribute("value", "#{artikelDetails.productOptionValue}", "value");
responseWriter.startElement("option", null);
responseWriter.write("Gelb");
responseWriter.endElement("option");
responseWriter.startElement("option", null);
responseWriter.write("Blau");
responseWriter.endElement("option");
responseWriter.endElement("select");
System.out.println("End encoding");
}
How to add a ajax call on every select ele here ?
And which of both method's do you prefer ?
This is a very simple example, where i do not build lot of select ele via loop
first i need to get this work...
You need to give all programmatically created input and command components a fixed ID, so that JSF can find the desired submitted information in the request parameter map. Otherwise they end up getting an autogenerated ID which is different during postback.
In your case, that's thus:
HSOM.setId("someId");
And which of both method's do you prefer ?
None of both. I'm confident that Java is the wrong tool for the purpose of declaring components in the view. JSF already ships with Facelets out the box which allows declaring components in a much easier and cleaner way by XML means. If you intend to build the view dynamically based on some preconditions, look at JSTL. See also among others How to make a grid of JSF composite component? and JSTL in JSF2 Facelets... makes sense?
I have an Ajax request that sends some data to a page and expects back a truthy or falsey value depending on if the data was saved. In my controller I do everything and set the content to a true or false value. I really don't want to create a view just to output 1 variable, so I was wondering if there was a way that I don't have to use a view and only use the controller to output simple strings.
I believe you cannot disable views completely, but there's a pretty simple workaround: you can create one view and use it for many actions.
Let's say we've created the view views/main/ajax.cfm, what could be inside it? Obviously, simplest way is:
<cfoutput>#HTMLEditFormat(rc.response)#</cfoutput>
Personally I like returning JSON, it allows me to have status field, plus data, if needed. This way my view looks like this:
<cfheader name="Content-Type" value="application/json" />
<cfoutput>#SerializeJSON(rc.response)#</cfoutput>
Any way, now in our action we need to do something like this:
// prevent displaying the layout
request.layout = false;
// force special view
variables.fw.setView("main.ajax");
// init response (according to the choice made earlier)
rc.response["status"] = "OK";
rc.response = "";
There's one more gotcha for this. Sometimes you don't want AJAX page to be accessed directly (like opened in browser), or vise-versa -- want to do some debugging when it is.
There's a cool helper isAjax in CFWheels framework, it is easy to port to the FW/1. It could be as simple as adding method like this to controller:
/*
* Check if request is performed via AJAX
*/
private boolean function isAjax() {
return (cgi.HTTP_X_REQUESTED_WITH EQ "XMLHTTPRequest");
}
Actually, that setup code above is also helper method in my apps:
/*
* Set up for AJAX response
*/
private struct function setAjax() {
// prevent displaying the layout
request.layout = false;
// force special view
variables.fw.setView("main.ajax");
local.response["status"] = "OK";
return local.response;
}
So in my action code whole check looks like this, which is pretty compact and convenient:
if (isAjax()) {
rc.response = setAjax();
}
else {
return showNotFound();
}
Hope this helps.
You can't output directly from a Controller: its job is just to call the Model and pass data to the View, so you'll need a view template to do the outputting.
However, you can avoid having to create a separate view for each controller method by using the framework's setView() method. This allows you to override the convention and apply a single view to multiple controller methods. So you could set up a generic "ajax view" and then use it to output the data from any of your controllers:
views/main/ajax.cfm
<!---Prevent any layouts from being applied--->
<cfset request.layout=false>
<!--- Minimise white space by resetting the output buffer and only returning the following cfoutput --->
<cfcontent type="text/html; charset=utf-8" reset="yes"><cfoutput>#rc.result#</cfoutput>
controller.cfc
function init( fw )
{
variables.fw=arguments.fw;
return this;
}
function getAjaxResponse( rc )
{
rc.result=1;
fw.setView( "main.ajax" );
}
function getAnotherAjaxResponse( rc )
{
rc.result=0;
fw.setView( "main.ajax" );
}
You can use onMissingView in you Application.cfc to handle the response for ajax calls, this way you don't need to perform any extra logic in your controller methods.
// Application.cfc
function onMissingView(rc) {
if(structKeyExists(rc, "ajaxdata") && isAjaxRequest()) {
request.layout = false;
content type="application/json";
return serializeJSON(rc.ajaxdata);
}
else {
return view("main/notfound");
}
}
function isAjaxRequest() {
var headers = getHttpRequestData().headers;
return structKeyExists(headers, "X-Requested-With")
&& (headers["X-Requested-With"] eq "XMLHttpRequest");
}
// controller cfc
function dosomething(rc) {
rc.ajaxdata = getSomeService().doSomething();
}
This checks if the request context has an ajaxdata key, and is a genuine ajax request, then returns the serialize data. If it doesn't then it renders the main.notfound view