Xpages Reusable Bootstrap fields bound to a java bean: validation - xpages

Question

I found a Bootstrap reusable field custom control and have been using it in my latest project. It works well but the validation is done by SSJS within the Xpage going forward I am moving as much programming as I can out of the Xpage and into java beans.
I have validation working in my bean,but it puts the errors in the display errors control at the top of the form. I want my Java validation to use the Bootstrap style error.
I found a very good discussion of doing this on the BootstrapForXpages site.
Another question in StackOverflow addressed this same issue but I was not able to figure out how to get this to work.
How to use XPages Java code to set valid method of input control inside a custom control?
Here is the Field CC
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:div>
<xp:this.styleClass><![CDATA[#{javascript:"form-group" + ( getComponent("inputText1").isValid() ? "" : " has-error" )}]]></xp:this.styleClass>
<xp:label styleClass="col-sm-2 control-label" for="inputText1"
value="${compositeData.fieldLabel}" />
<div class="col-sm-10">
<xp:inputText type="text" id="inputText1"
loaded="${!empty compositeData.placeholder}" value="#{compositeData.dataSource[compositeData.fieldName]}"
required="${compositeData.required}">
<xp:this.attrs>
<xp:attr name="placeholder" value="${compositeData.placeholder}" />
</xp:this.attrs>
<xp:this.validators>
<xp:validateRequired
message="#{javascript:compositeData.fieldLabel + ' is required'}" />
</xp:this.validators>
</xp:inputText>
<xp:text escape="true" id="computedField1" styleClass="help-block"
value="${compositeData.helpText}">
<xp:this.rendered><![CDATA[#{javascript:getComponent("inputText1").isValid() && compositeData.helpText != null}]]></xp:this.rendered>
</xp:text>
<xp:message id="message1" for="inputText1" styleClass="help-block" />
</div>
</xp:div>
</xp:view>
and the code for a simple Xpage with the control on it:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xc:ccCustomField placeholder="Enter your email address"
fieldLabel="Email" helpText="Guess what you have to enter here..."
fieldName="model">
<xc:this.dataSource>
<xe:objectData var="PCModel">
<xe:this.createObject><![CDATA[#{javascript:var pc = new com.scoular.data.PC().create();
return pc;}]]></xe:this.createObject>
</xe:objectData>
</xc:this.dataSource>
</xc:ccCustomField>
</xp:view>

Answer 1

Define objectData outside the custom control include and
set property dataSource to objectData's variable PCModel: dataSource="#{PCModel}"
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:this.data>
<xe:objectData
var="PCModel">
<xe:this.createObject><![CDATA[#{javascript:
var pc = new com.scoular.data.PC();
pc.create();
return pc;
}]]></xe:this.createObject>
</xe:objectData>
</xp:this.data>
<xc:ccCustomField
placeholder="Enter your email address"
fieldLabel="Email"
helpText="Guess what you have to enter here..."
fieldName="model"
dataSource="#{PCModel}">
</xc:ccCustomField>
</xp:view>
So, it's not an issue with the bean but with setting dataSource property for custom control.
Also, be careful with bean's method create(). It won't probably return bean's instance. If that's the case then your code line
var pc = new com.scoular.data.PC().create();
won't set pc to an PC instance and dataSource won't be initialized correctly.

Answer 2

To pass a error message to specific field I have Utility method, to find the field and then add the error to the FacesContext referring to the clientId, which is found with the findComponent method
public static void addMessageToSpecificField(String fieldId, String message) {
String clientId = JSFUtil.findComponent(fieldId).getClientId(
JSFUtil.getFacesContext());
JSFUtil.getFacesContext().addMessage(clientId,
new javax.faces.application.FacesMessage(message));
}
/**
* Finds an UIComponent by its component identifier in the current
* component tree.
*
* #param compId the component identifier to search for
* #return found UIComponent or null
*
* #throws NullPointerException if <code>compId</code> is null
*/
public static UIComponent findComponent(String compId) {
return findComponent(FacesContext.getCurrentInstance().getViewRoot(), compId);
}
/**
* Finds an UIComponent by its component identifier in the component tree
* below the specified <code>topComponent</code> top component.
*
* #param topComponent first component to be checked
* #param compId the component identifier to search for
* #return found UIComponent or null
*
* #throws NullPointerException if <code>compId</code> is null
*/
#SuppressWarnings("unchecked")
public static UIComponent findComponent(UIComponent topComponent, String compId) {
if (compId==null)
throw new NullPointerException("Component identifier cannot be null");
if (compId.equals(topComponent.getId()))
return topComponent;
if (topComponent.getChildCount()>0) {
List<UIComponent> childComponents= topComponent.getChildren();
for (UIComponent currChildComponent : childComponents) {
UIComponent foundComponent=findComponent(currChildComponent, compId);
if (foundComponent!=null)
return foundComponent;
}
}
return null;
}