Comment soumettre un formulaire en utilisant la requête Ajax dans Liferay?

Question

Je suis un débutant dans le portail liferay. J'ai développé un portlet dans liferay pour la démo. J'ai utilisé la communication interportlet dans cet exemple. Ce que je fais est: - J'ai un portlet de recherche dans lequel j'ai un textfield pour la recherche. Quand je clique sur le bouton de recherche, il extrait les données de la base de données et affiche ces données en utilisant la recherche contenue dans un autre portlet. J'ai utilisé l'annotation de ProcessEvent et ActionEvent pour ce projet.

Maintenant ce que je veux, c'est quand je clique sur le bouton de recherche, alors la page ne devrait pas être rafraîchie (je veux utiliser le concept AJAX) et les données devraient être affichées sur l'autre portlet.

Code Snippet

Portlet A - view.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 - SearchPortlet Classe

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); 

} 

portlets B - view.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> 

portlets B - SearchResultPortlet classe

/** 
* 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

Lors de la demande sur le portail ajax votre portlet doit implemet

javax.portlet.ResourceServingPortlet 

GenericPortlet fait déjà, mais vous voulez la remplacer, et au lieu d'utiliser <portlet:actionURL /> vous devez utiliser <portlet:resourceURL /> vient de l'action. Dans votre configuration, vous devez avoir un formulaire de recherche avec un champ caché pour les mots clés, et en cliquant sur soumettre dans le portlet de recherche, vous devez copier les mots clés de ce formulaire, avec IPC, pour rechercher le portlet des résultats et invoquer sans soumettre de formulaire dans le portlet de recherche (A)).

Votre classe SearchResultPortlet devrait être

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

EDIT: exemple complet

SearchForm

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); 
    } 
} 

SearchResult

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> 

result.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 (ce qui est pour le rendu des résultats)

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

Answer 2

Vous pouvez utiliser la communication Inter portlet sur le côté client. Appelons portletA le portlet de recherche et portletB la recherche contenue dans un autre portlet. Je suppose que vous utilisez Liferay 6+.

Étape 1: en cliquant sur le bouton de recherche sur portletA déclenche la fonction javascript folowing sur le navigateur:

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');      
       } 
      } 
     }); 
    } 
); 

Notez l'appel à A.io.request(<portletA_serch_action_url>... c'est l'URL d'action côté serveur portletA. Voir le blog Liferay suivant pour plus d'informations sur Liferay 6 et ajax: http://www.liferay.com/web/nathan.cavanaugh/blog/-/blogs/alloyui-working-with-ajax.

Étape 2: Sur la réponse du serveur portletA, le client côté portlet lancera un événement avec les données extraites du serveur. Notez que l'appel à Liferay.fire('myEvent', this.get('responseData'); est la manière dont Liferay prend en charge la communication Inter Portlet côté client côté client (voir http://www.liferay.com/community/wiki/-/wiki/Main/Client-side+Inter-Portlet+Communication).

myEvent est l'événement déclenché, this.get('responseData'); sont les données récupérées à partir du serveur.

Étape 3: côté client portletB écouter sur myEvent et rendre les données

portletB écoutera myEvent puis rendre les données:

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

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

Notez le contrôle du provenience des données à partir de portletA:

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

Vous pouvez supprimer cette vérification si d'autres portlets ne sont pas identiques t.

Espérons cette aide.