ignicolist

IPC using client side java script

The client-side mechanism to communicate portlets is based on events, uses events instead of direct js calls accross portlets is very important
since it's not possible to know at deployment time which other portlets will be available in a given page.By firing/triggering an event one portlet just notifies that something has happened,
and then one or more of the other portlets in the page might be listening and act accordingly.

API used for doing client side PPC is follows,
1.Liferay.trigger(eventName, data) :
            Trigger an event in which n number of listners can catch the event and act according to the event.
2.Liferay.bind(eventName, function, [scope]) :
            Listen in for any arbitrary event (it could be anything the developer decides, or an existing one)

Bellow is the snippet for PPC using Javascript based IPC

Prerequesite:
1. create two jsp portlet using create.bat/sh of plugin sdk
         a. create.bat ipctrigger "Triggring Portlet"
         b. create.bat ipclistener "Listening Portlet"
2. deploy these newly created portlets to the server by running "ant deploy"
3. Add the above portlets in to a Portal Page, "IPC Demo"
4. Make sure that both the portlets are appearing fine.
5. Keep the listening portlet on the right side.


IPC using client side java script - Example 1


Example1: Updating a label inside listener portlet using a link provided in the triggering portlet.

snippet-1: insert the below code in to docroot/view.jsp of ipctrigger-portlet.

<script>
jQuery(
        function () {
          jQuery('a.update_label').click(
            function(event) {
              Liferay.trigger('updateLabel');
              return false;
            }
          );
          jQuery('a.remove_label').click(
            function(event) {
              Liferay.trigger('removeLabel');
              return false;
            }
          );
          
          // you'll put the snippet for next example here
        }
);
</script>
<br/><a class="update_label">Update Label Using PPC</a>
<br/><a class="remove_label">Remove Label Using PPC</a>

snippet-2: insert the below code in to docroot/view.jsp of ipclistener-portlet.

<script>
        Liferay.bind(
           'updateLabel',
           function(event) {
             jQuery('label.ppc_label_info').html('The portlet is invoked.......');
           }
        );
        Liferay.bind(
           'removeLabel',
           function(event) {
             jQuery('label.ppc_label_info').html('');
           }
        );
        
        // you'll put the snippet for next example here
        
</script>
<br/><label class="ppc_label_info" />

Redeploy these portlets and check how they work.

IPC using client side java script - Example 2

Example2: Passing a data using PPC.


snippet-1: insert the below code in to docroot/view.jsp of ipctrigger-portlet (inside the <script> tag)

function send() {
   
 var value = jQuery('input.ppc_text').val();
 Liferay.trigger('retrieveValue', {key: value});
 return false;
   }

<input type="text" class="ppc_text" value="Sample Data" />
<br/><input type="button" onclick="send()" class="ppc_button" value="Update Label" ></input>

snippet-2: insert the below code in to docroot/view.jsp of ipclistener-portlet (inside the <script> tag).

Liferay.bind(
           'retrieveValue',
           function(event, data) {
             jQuery('label.ppc_label_info1').html('Input:' + data.key);
           }
        );

<br/><label class="ppc_label_info1" />

From: Liferay