¿Cómo enviar el formulario utilizando la solicitud de Ajax en Liferay?

liferay-6

Question

Soy novato en el portal de liferay. He desarrollado un portlet en liferay para demo. Utilicé la comunicación entre portlets en este ejemplo. Lo que estoy haciendo es: - Tengo un portlet de búsqueda en el que tengo un campo de texto para la búsqueda. Cuando hago clic en el botón de búsqueda, recupera los datos de la base de datos y los visualizo utilizando la búsqueda contenida en otro portlet. Usé las anotaciones ProcessEvent y ActionEvent para este proyecto.

Ahora lo que quiero es que cuando haga clic en el botón de búsqueda, la página no deba actualizarse (es decir, deseo usar el concepto de AJAX) y los datos se muestren en el otro portlet.

Fragmento de código

Portlet A - ver.jsp

<%@include file="/html/init.jsp"%>
<portlet:defineObjects />

<!--

<portlet:actionURL var="actionURL" name="pitchBall"></portlet:actionURL>

//-->
**Change to Resource URL**
<portlet:resourceURL var="resourceURL">
</portlet:resourceURL>


<aui:form method="POST" action="<%= resourceURL%>" name="    <portlet:namespace>fm1</portlet:namespace>">
    <aui:input name="search" id="search" />
    <aui:button type="submit" name="Search" value="Search" />
</aui:form>

Portlet A - Clase SearchPortlet

package com.test;

/**
 * Portlet implementation class SearchPortlet
 */
public class SearchPortlet extends GenericPortlet {

    @Override
    public void render(RenderRequest request, RenderResponse response)
            throws PortletException, IOException {
        // TODO Auto-generated method stub
        super.render(request, response);

    }

    @ProcessAction(name="pitchBall") 
    public void pitchBall(ActionRequest request, ActionResponse response) throws SystemException {
        String name = ParamUtil.getString(request, "search");       
        QName qName = new QName("http://liferay.com/events", "ipc.pitch");
        response.setEvent(qName, name);
    }

    public void init() {
        editJSP = getInitParameter("edit-jsp");
        helpJSP = getInitParameter("help-jsp");
        viewJSP = getInitParameter("view-jsp");
    }

    public void doEdit(
            RenderRequest renderRequest, RenderResponse renderResponse)
        throws IOException, PortletException {

        include(editJSP, renderRequest, renderResponse);
    }

    public void doHelp(
            RenderRequest renderRequest, RenderResponse renderResponse)
        throws IOException, PortletException {

        include(helpJSP, renderRequest, renderResponse);
    }

    @Override
    public void doView(
            RenderRequest renderRequest, RenderResponse renderResponse)
        throws IOException, PortletException {
        //super.doView(renderRequest, renderResponse);
        System.out.println("In doView code");

        renderResponse.setContentType(renderRequest.getResponseContentType());

        // file to display...
        String url = "/html/searchportlet/view.jsp";

        // read the above file and output it...
        getPortletContext().getRequestDispatcher(url).include(renderRequest, renderResponse);
        //include(viewJSP, renderRequest, renderResponse);
    }

    @Override
    public void serveResource(ResourceRequest request, ResourceResponse response)
            throws PortletException, IOException {
        // TODO Auto-generated method stub
        //super.serveResource(request, response);
         System.out.println("In serveResource code");

         response.setContentType("text/html");

         String name = request.getParameter("search");

         // this seems to be the page that was calling...?
         String resourceID = request.getResourceID();
         System.out.println("resourceId was : " + resourceID);


         System.out.println("message was : " + name);
         PrintWriter writer = response.getWriter();

         writer.print(name);
    }

    protected void include(
            String path, RenderRequest renderRequest,
            RenderResponse renderResponse)
        throws IOException, PortletException {

        PortletRequestDispatcher portletRequestDispatcher =
            getPortletContext().getRequestDispatcher(path);

        if (portletRequestDispatcher == null) {
            _log.error(path + " is not a valid include");
        }
        else {
            portletRequestDispatcher.include(renderRequest, renderResponse);
        }
    }

    protected String editJSP;
    protected String helpJSP;
    protected String viewJSP;

    private static Log _log = LogFactoryUtil.getLog(SearchPortlet.class);

}

Portlet B - ver.jsp

<%@include file="/html/init.jsp"%>
<portlet:defineObjects />

<%
String name = (String)renderRequest.getParameter("name");
%>

<liferay-ui:search-container
    emptyResultsMessage="author-empty-results-message">

    <liferay-ui:search-container-results
        results="<%= KeyurAuthorLocalServiceUtil.getStudentByName(name) %>" />

    <liferay-ui:search-container-row className="com.test.model.KeyurAuthor">

        <liferay-ui:search-container-column-text name="authorId"
            property="authorId" />
        <liferay-ui:search-container-column-text name="authorName"
            property="authorName" />
        <liferay-ui:search-container-column-text name="authorEmail"
            property="authorEmail" />
    </liferay-ui:search-container-row>

    <liferay-ui:search-iterator></liferay-ui:search-iterator>


</liferay-ui:search-container>

Portlet B - Clase SearchResultPortlet

/**
 * Portlet implementation class SearchResultPortlet
 */
public class SearchResultPortlet extends GenericPortlet {

    public void init() {
        editJSP = getInitParameter("edit-jsp");
        helpJSP = getInitParameter("help-jsp");
        viewJSP = getInitParameter("view-jsp");
    }

    @ProcessEvent(qname="{http://liferay.com/events}ipc.pitch")
    public void catchBall(EventRequest request, EventResponse response) {
        Event event = request.getEvent();
        String name = (String)event.getValue();
        response.setRenderParameter("name", name);
    }

    public void doEdit(
            RenderRequest renderRequest, RenderResponse renderResponse)
    throws IOException, PortletException {

        include(editJSP, renderRequest, renderResponse);
    }

    public void doHelp(
            RenderRequest renderRequest, RenderResponse renderResponse)
    throws IOException, PortletException {

        include(helpJSP, renderRequest, renderResponse);
    }

    public void doView(
            RenderRequest renderRequest, RenderResponse renderResponse)
    throws IOException, PortletException {

        include(viewJSP, renderRequest, renderResponse);
    }

    protected void include(
            String path, RenderRequest renderRequest,
            RenderResponse renderResponse)
    throws IOException, PortletException {

        PortletRequestDispatcher portletRequestDispatcher =
            getPortletContext().getRequestDispatcher(path);

        if (portletRequestDispatcher == null) {
            _log.error(path + " is not a valid include");
        }
        else {
            portletRequestDispatcher.include(renderRequest, renderResponse);
        }
    }

    protected String editJSP;
    protected String helpJSP;
    protected String viewJSP;

    private static Log _log = LogFactoryUtil.getLog(SearchResultPortlet.class);

}

Answer 1

Al realizar solicitudes ajax en el portal, su portlet debe implementar

javax.portlet.ResourceServingPortlet

GenericPortlet ya lo hace pero desea anularlo, y en lugar de usar <portlet:actionURL /> debe usar <portlet:resourceURL /> fro from action.

Y en su configuración debería tener un formulario de búsqueda con un campo oculto para las palabras clave, y al hacer clic en el botón enviar en el portlet de búsqueda debería copiar las palabras clave de ese formulario, con IPC, para buscar el portlet de resultados e invocar el envío del resultado de la búsqueda desde (sin enviar el formulario en portlet de búsqueda (A)).

Tu clase SearchResultPortlet debería ser

public class SearchResultPortlet extends GenericPortlet {
    ...
    public void serveResource(ResourceRequest request, ResourceResponse response) throws PortletException, java.io.IOException {
       // do search and return result
    }
    ...
}

EDITAR: ejemplo completo

Formulario de búsqueda

import java.io.IOException;

import javax.portlet.GenericPortlet;
import javax.portlet.PortletException;
import javax.portlet.RenderRequest;
import javax.portlet.RenderResponse;

public class SearchForm extends GenericPortlet {

    @Override
    protected void doView(RenderRequest p_request, RenderResponse p_response) throws PortletException, IOException {
        getPortletContext().getRequestDispatcher("/WEB-INF/jsp/search.jsp").include(p_request, p_response);
    }
}

Resultado de búsqueda

import java.io.IOException;

import javax.portlet.GenericPortlet;
import javax.portlet.PortletException;
import javax.portlet.RenderRequest;
import javax.portlet.RenderResponse;
import javax.portlet.ResourceRequest;
import javax.portlet.ResourceResponse;

public class SearchResult extends GenericPortlet {

    @Override
    protected void doView(RenderRequest p_request, RenderResponse p_response) throws PortletException, IOException {
        getPortletContext().getRequestDispatcher("/WEB-INF/jsp/result.jsp").include(p_request, p_response);
    }

    @Override
    public void serveResource(ResourceRequest p_request, ResourceResponse p_response) throws PortletException, IOException {
                    //do your search here and put results in ''result''
        p_request.setAttribute("result", "results for: " + p_request.getParameter("search"));

        getPortletContext().getRequestDispatcher("/WEB-INF/jsp/html.jsp").include(p_request, p_response);
    }
}

search.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet" %>

<portlet:defineObjects />

<script type="text/javascript">

    function doSearch() {
        Liferay.fire(''searchKeywords'', document.getElementById("<portlet:namespace/>search").value);    
    }

</script>

<form>
    <input type="text" name="search" id="<portlet:namespace/>search" />
    <button name="Search" value="Search" onclick="doSearch()" type="button">Search</button>
</form>

resultado.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>

<portlet:defineObjects />
<portlet:resourceURL var="rurl" />

<script type="text/javascript">
    Liferay.on(''searchKeywords'', function(event, p_data){
        var A = AUI(); 
        A.use(''aui-io-request'', function(aui) {
            A.io.request("<%= rurl %>", { 
                method : ''POST'', 
                data: {search: p_data},
                dataType : ''html'', 
                on : { 
                    success : function() { 
                        AUI().one("#<portlet:namespace/>placeholder").html(this.get(''responseData''));
                    } 
                } 
            });
        });
    });
</script>

Search Results:<br />
<div id="<portlet:namespace/>placeholder">
</div>

html.jsp (esto es para representar resultados)

<%= request.getAttribute("result") %>

Answer 2

Podría utilizar la comunicación de portlet Inter en el lado del cliente. Llamemos a portletA, el portlet de búsqueda y portletB, el contenido de búsqueda en otro portlet. Supongo que está utilizando Liferay 6+.

Paso 1 : hacer clic en el botón de búsqueda en el portletA activará la siguiente función javascript en el navegador:

var A = AUI(); 
A.use(''aui-io-request'', 
    function(aui) {
        A.io.request(<portletA_serch_action_url>, { 
            method : ''GET'', 
            dataType : ''json'', 
            on : { 
                success : function() { 
                    Liferay.fire(''myEvent'', this.get(''responseData'');                    
                } 
            } 
        });
    }
);

Tenga en cuenta la llamada a A.io.request(<portletA_serch_action_url>... esta es la url de acción del lado del servidor PortletA. Consulte el siguiente blog de Liferay para obtener más información acerca de Liferay 6 y ajax: http://www.liferay.com/web/nathan.cavanaugh/blog/-/blogs/alloyui-working-with-ajax .

Paso 2 : en la respuesta del servidor portletA, el lado del cliente portletA lanzará un evento con los datos recuperados del servidor. Tenga en cuenta la llamada a Liferay.fire(''myEvent'', this.get(''responseData''); esta es la forma en que Liferay admite la comunicación de Port Portlet del lado del cliente en el lado del cliente (consulte http://www.liferay.com/community/wiki/-/wiki/Main/Client-side+Inter-Portlet+Communication ).

myEvent es el evento myEvent , this.get(''responseData''); Son los datos recuperados del servidor.

Paso 3 : el portletB del lado del cliente escucha en myEvent y representa los datos

portletB escuchará en myEvent y luego procesará los datos:

Liferay.on(
 ''myEvent'',
 function(event, data){
   var portletId = data.portletId;
   var portlet = data.portlet;

   if(portletId.indexOf(''YOUR_PORTLET_A_ID'') > -1){
        alert(data);
   }
 }
 );

Tenga en cuenta la comprobación de la procedencia de los datos del portletA:

   if(portletId.indexOf(''YOUR_PORTLET_A_ID'') > -1){...

Puede eliminar esa comprobación si no tiene otros portlets que activen el mismo evento.

Espero que esto ayude.