Placing the messages in other panel

Is it possible to put the message component, another panel?

We want to display validation client side messages, in a panel that is different from the form. The objective is to make our application, a status bar such as Internet Explorer, to show all errors of users, validation messages, a progress bar, etc.

Now we're placing the message component, alongside its form field, but when we put it in a different panel, the debugger returns us the next message:

"Execution: Method "validate" not defined."

Thanks for your help.

Placing the messages in other panel

Hi gdperellon,

Yes, it is possible to have your validation message somewhere else. You can have an validation message placed in other element and then trigger the validation/error message when the error is occured.

Could you post some more code for test case ?

Cheers,

Yudi

Placing the messages in other panel

We have three files:

1º- A index.jsp file in which the panels definition are in, with the following structure:

<!--  -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://www.backbase.com/2007/jsf" prefix="bjsf"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<f:view>
<html>
        <head>
                <title>Guia de maquetación y usabilidad MapfreSoft</title>
        </head>
        <body>
                <bjsf:application  id="main" skin="#{sessionData.skin}" clientDebug="true" nsMap="wtw,http://www.mapfre.com/mapfreNamespace">
                       
                        <xi:include href="wtwImporte/wtwImporte.xml" />
                        <xi:include href="../../docs/behaviors/wtw-forms-validation.xml" />

                        <jsp:include page="wtw/msoft_wtw_valuelist.jsp" />
                       
                        <bjsf:loadBundle basename="messages" var="msgs" />
                        <bjsf:panelSet rows="27px * 20px" splitter="false" fullScreen="true" height="100%" width="100%" >
                                <bjsf:panel>
                                        <f:subview id="cabecera">
                                                <jsp:include page="cabecera.jsp" />
                                        </f:subview>
                                </bjsf:panel>
                                <bjsf:panelSet binding="#{menuTronweb.menuPanelSet}" columns="220px *" splitter="true" fullScreen="true" height="100%" width="100%">
                                        <bjsf:panel style="overflow:hidden;">
                                                <f:subview id="menu">
                                                        <jsp:include page="menu.jsp" />
                                                </f:subview>
                                        </bjsf:panel>
                                        <bjsf:panel padding="10px" style="overflow:hidden;" binding="#{navigationBean.destPanel}">
                                                <f:subview id="principal">
                                                        <jsp:include page="catalog_presentacion.jsp" />
                                                </f:subview>
                                        </bjsf:panel>
                                </bjsf:panelSet>
                                <bjsf:panel>
                                        <f:subview id="barraEst">
                                                <!--This is the panel for the messages-->
                                                <jsp:include page="barra.jsp" />
                                        </f:subview>
                                </bjsf:panel>
                        </bjsf:panelSet>
                </bjsf:application>
        </body>
</html>
</f:view>

2º- Into the panel called "principal", we have a file with a form inside and a client-side validation.

<bjsf:form id="form1">
        <bjsf:box>
                <bjsf:outputText styleClass="TD W50" value="Criterios de búsqueda"></bjsf:outputText>
                <bjsf:outputText styleClass="W50 D" value="* Campos obligatorios"></bjsf:outputText>
        </bjsf:box>
        <bjsf:box styleClass="MAD">
                <bjsf:panelGroup styleClass="W25">
                        <bjsf:outputLabel value="Nº siniestro:* " style="width:30% !important;" styleClass="W30 D"></bjsf:outputLabel>
                        <bjsf:inputText id="numSini" size="25" clientValidationEvent="blur" clientValidators="required" required="true" value="" tabindex="10"></bjsf:inputText>
                </bjsf:panelGroup>     
                <bjsf:panelGroup styleClass="W25">
                        <bjsf:outputLabel value="Referencia:* " style="width:30% !important;"  styleClass="W30 D"></bjsf:outputLabel>
                        <bjsf:inputText  size="25" id="ref" value="" clientValidationEvent="blur" clientValidators="required" required="true" tabindex="20"></bjsf:inputText>
                </bjsf:panelGroup>
                <bjsf:panelGroup styleClass="W25">
                        <bjsf:outputLabel value="F. Notificación: " style="width:35% !important; display:inline !important"  styleClass="W40 D"></bjsf:outputLabel>
                        <bjsf:inputText id="fecNot" size="10" value="" readonly="true" tabindex="-1" styleClass="Dis"></bjsf:inputText>
                </bjsf:panelGroup>
        </bjsf:box>
</bjsf:form>

3º- And finally, we want the error messages or warnings, appear on the panel called "barraEst". In it, there´s a file "barra.jsp" with the following structure:

<!--  -->
<%@ taglib uri="http://www.backbase.com/2007/jsf" prefix="bjsf"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<bjsf:box styleClass="BE">
        <bjsf:messages id="message"></bjsf:messages>
</bjsf:box>

Thanks for your help.

validationMessage in panel

Hi gdperellon,

We can put the validationMessage everywhere we want. I created a testcase about this validationMessage in the panel.

<bjsf:panelSet rows="* 20%">
                <bjsf:panel>
                <bjsf:form id="form1">
                        <bjsf:inputText id="text001" binding="#{panel.text1}"
                                value="Enter less than 7 chars">

                                <f:validateLength minimum="7" />
                        </bjsf:inputText>
                        <bjsf:inputText id="text002" value="Wipe this one blank" required="true">
                        </bjsf:inputText>
                </bjsf:form>
               
                <bjsf:commandButton value="submit to validate" submitForms="form1"
                        action="#{panel.someBusinessLogic2}" />

                </bjsf:panel>
                <bjsf:panel>
                        <bjsf:messages errorStyle="color:red" layout="table" />
                </bjsf:panel>  
        </bjsf:panelSet>

Hope that helps

:)

Placing the messages in other panel

Thanks for your help.

But my problem is the message component must be placed in another panel, and inside of a different file like the example of before.

:(

messages in other panel

Hi gdperellon,

It is possible to have the message/messages in another panelSet and even loaded dinamycally. I have seen your code deeply and realize that you actually want to have clientValidationEvent which will be triggered in client "blur" event.

There are two ways of situation that you can use:
1. If you want to implement the 'clientValidationEvent', you can put this code below into your barra.jsp

<bjsf:message for="cabecera:form1:numSini"></bjsf:message>
<bjsf:message for="cabecera:form1:ref"></bjsf:message>

what we need to realize here is the value for @for. Because it is loaded dynamically, so the parent id will be also included. In this case cabecera:form1

2. If you want to show the validation message on submit event.
For this kind of situation, you can just use the original barra.jsp that you have already had. The difference is, you need to add the button to trigger the form validation.

<bjsf:form id="form1">
        <bjsf:box>
                <bjsf:outputText styleClass="TD W50" value="Criterios de búsqueda"></bjsf:outputText>
                <bjsf:outputText styleClass="W50 D" value="* Campos obligatorios"></bjsf:outputText>
        </bjsf:box>
        <bjsf:box styleClass="MAD">
                <bjsf:panelGroup styleClass="W25">
                        <bjsf:outputLabel value="Nº siniestro:* " style="width:30% !important;" styleClass="W30 D"></bjsf:outputLabel>
                        <bjsf:inputText id="numSini" size="25" clientValidationEvent="blur" clientValidators="required" required="true" value="" tabindex="10"></bjsf:inputText>
                       
                </bjsf:panelGroup>
                <bjsf:panelGroup styleClass="W25">
                        <bjsf:outputLabel value="Referencia:* " style="width:30% !important;"  styleClass="W30 D"></bjsf:outputLabel>
                        <bjsf:inputText  size="25" id="ref" value="" clientValidationEvent="blur" clientValidators="required" required="true" tabindex="20"></bjsf:inputText>
                </bjsf:panelGroup>
                <bjsf:panelGroup styleClass="W25">
                        <bjsf:outputLabel value="F. Notificación: " style="width:35% !important; display:inline !important"  styleClass="W40 D"></bjsf:outputLabel>
                        <bjsf:inputText id="fecNot" size="10" value="" readonly="true" tabindex="-1" styleClass="Dis"></bjsf:inputText>
                </bjsf:panelGroup>
                <bjsf:commandButton value="submit to validate" submitForms="form1"
                                        action="#{panelBean.someBusinessLogic2}" />

               
        </bjsf:box>        
</bjsf:form>

Those are two kind of different situation that you might have with this validation messages.

Hope this helps

Andys

clientValidationEvent

Hi Andys,
The first way is what we're interested in, but we can't use it because we couldn't write a bjsf:message node for each input component to validate.
barra.jsp is a generic and reusable file (is our status bar) to use in every application, it must include a mechanism to show all the error, conversion and validation messages ocurred into the application. We thought use the bjsf:messages component but it only displays messages after a sync().
I hope you could understand our requirement and If you've got any idea please let us know, we'll thank you.
Kind regards.
David

ClientValidation Evevnt

Hi David,

This is now still being investigated by our developer team. And I have already reported this problem into our issue tracking system.

Thank you

Andys