Liferay Google Search Portlet

Introduction:

Some time we want to use Google search in our applications. Google have given different API to integrate their products into other websites.

Similarly we have Google Custom Search API from which we can use Google search functionality in our websites.

Google have given different API for custom search like REST API and Java Script API.

In the following article we will use Java Script API to implement search in our applications.

Steps:
  1. Load Google Search Java Script Source and its CSS
  2. Initialize Google Search Control and Pass Required Options
  3. Draw search Result

Load Google Search Java Script Source and its CSS

Google Search Java Script API have implemented in java script and all required functions available in java script source file so we need load that java script source in out jsp/html page. Similarly required CSS also we need load in the page

The following is code snippet to load Google Search Java Script and CSS


<script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0"></script>
<link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/>


Note:

In portlet example I just copy all css and place into portlet main.css file instead of loading from source.

Initialize Google Search Control and Pass Required Options

Now we already loaded all Google search Java script ,now we need to initialize the Google Search Controller and we need to define that what are the search areas you want search like blogs, videos, images, web and book.

We are writing java script so we need write all java scrip with in <script/> tag.

Initialize Search controller


var searchControl = new GSearchControl();


Add search areas or searcher to controller


searchControl.addSearcher(new google.search.WebSearch());
searchControl.addSearcher(new google.search.VideoSearch());
searchControl.addSearcher(new google.search.BlogSearch());


Draw search Result

We already initialize the search controller and its searcher, now we need to draw or display search result in our page.

We need choose specific HTML element where we will draw search result.

The following is code snippet to draw result


searchControl.draw(document.getElementById("<portlet:namespace/>searchcontrol");

 <div id="<portlet:namespace/>searchcontrol">Loading...</div>


When we draw result we have option to decide Draw Models

Example:

Draw Mode Tabbed


var drawOptions = new google.search.DrawOptions();
drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);    searchControl.draw(document.getElementById("<portlet:namespace/>searchcontrol"),
drawOptions);


Draw Mode Linear


var drawOptions = new google.search.DrawOptions();            
drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_LINEAR); searchControl.draw(document.getElementById("<portlet:namespace/>searchcontrol"),
drawOptions);


The final Code in JSP page


<script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0"></script>
<link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript">
    function <portlet:namespace/>OnLoad() {
      var searchControl = new GSearchControl();
      searchControl.addSearcher(new google.search.WebSearch());
      searchControl.addSearcher(new google.search.VideoSearch());
      searchControl.addSearcher(new google.search.BlogSearch());
      searchControl.addSearcher(new google.search.NewsSearch());
      searchControl.addSearcher(new google.search.ImageSearch());
      searchControl.addSearcher(new google.search.BookSearch());
      var localSearch = new google.search.LocalSearch();
      localSearch.setCenterPoint("India");
      searchControl.addSearcher(localSearch);
      var drawOptions = new google.search.DrawOptions();
      drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
      //drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_LINEAR);
      searchControl.draw(document.getElementById("<portlet:namespace/>searchcontrol"),drawOptions);
      searchControl.execute("Liferay Savvy");
      }
    GSearch.setOnLoadCallback(<portlet:namespace/>OnLoad);
    </script>
    <div id="<portlet:namespace/>searchcontrol">Loading...</div>


When we use above search it will search in all websites. If we want restrict the search which is specific to particular web site then we can restrict the search.

Search controller restriction on website


var siteSearch = new google.search.WebSearch();
siteSearch.setUserDefinedLabel("liferaysavvy.com");
    siteSearch.setSiteRestriction("liferaysavvy.com");
    searchControl.addSearcher(siteSearch);


Note:

In the above we will get all css styles which given by Google if we want modify use <style/> tag in JPS page simply find style class name and override in jsp page.

Add a custom search engine to our Website

This is another way to add Google search to our website. Here we will create custom search engine to require websites i.e. where you want search then it will generate embedded java script and html code then we can use the code snippet in our web site.

Steps: 1

We need to have Google account

Step: 2

Access custom search console by following URL


Create new Search engine


Give your website URL name where Google will search and give result.



Step: 3

Once you fill the data then click on create button then your search engine will be created.
Now we have button called Get Code when click on that we will get code snippet so that we can 
use in websites or JSP page.


The following is code snippet


Now we can use above code in any HTML page or JPS page of our application.

Adding More Websites to Search Engine

When we create search engine we have added only one web site URL so it will search only one website and give the result.

If we want add more search sites then edit the search engine and add more web sites URLs
Access Same above URL to get Control panel


Go Edit Search Engine and Select Existed Search Engine to Modify



In the sites Search Section we have Add button click on Add and Give another Web site URL to search.



Add another Website URL for Search Engine




Once we have done click on save button then another site will be added to our Custom Search Engine. Now the result will be searched from multiple websites.

Using Google Search Portlet in Theme

We have developed the portlet so we need drag and drop the portlet in page. Then we can use the search portlet in any portal page.

Some time we don’t want use page to display portlet when we click link then portlet should load dynamically and there we need to search the items. Generally we will use these scenarios in themes.

Scenario:

Assume When I click some icon or link then I need get Portlet and there I need enter data.

We can also open portlet in any page without and drag and drop in page that is called dynamic portlet loading.

Idea is we need to create Maximized window state Portlet Render URL so that when we click the URL then we can see the portlet in Maximized window state.

Using Search Portlet in the Theme

When we want use in theme we need to create some link in portal_normal.vm file and there we will create Portlet render URL and use the link in anchor tag.

The following is code inportal_normal.vm file


<div class="google-search">
#set ($googleSearchlocPortletId = "googlesearch_WAR_ASWGoogleSearchportlet")
#set ($googleSearchportletPreferencesFactoryUtil = $portal.getClass().forName("com.liferay.portlet.PortletPreferencesFactoryUtil"))
 #set ($googleSearchportletSetup = $googleSearchportletPreferencesFactoryUtil.getLayoutPortletSetup($layout, $googleSearchlocPortletId))
#if ($googleSearchportletSetup.getValue("portletSetupShowBorders", "") != "false")
#set ($temp = $googleSearchportletSetup.setValue("portletSetupShowBorders", "false"))
#set ($temp = $googleSearchportletSetup.store())
#end
#set ($googleSearchPortletURL = $portletURLFactory.create($request, $googleSearchlocPortletId, $layout.plid, "RENDER_PHASE"))
#set ($googleSearchVOID1 = $googleSearchPortletURL.setWindowState("MAXIMIZED"))
#set ($googleSearchVOID1 = $googleSearchPortletURL.setPortletMode("view"))
<a href="${googleSearchPortletURL.toString()}"><img src="$images_folder/common/icon_google_search.jpg" style="height:33px;"/></a>
</div>


Using in other Portlet JSP page.

If you want use in other portlet JSP page from there you want access search portlet

The following is code need to add in other portlet jsp page.


<%@page import="com.liferay.portal.kernel.portlet.LiferayWindowState"%>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %>
<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<portlet:defineObjects />
<liferay-theme:defineObjects />
<h1>Google Search Examples</h1>
<liferay-portlet:renderURL portletName="googlesearchportlet_WAR_GoogleSearchportlet"  var="dynamicalyLoadURL" plid="<%=themeDisplay.getPlid()%>"  varImpl="openPortletURL" windowState="<%=LiferayWindowState.MAXIMIZED.toString()%>">
<portlet:param name="mvcPath" value="/html/jsps/google.jsp"/>
</liferay-portlet:renderURL>
<br/>
<div>
<a href="<%=dynamicalyLoadURL.toString() %>"><img src="<%=renderRequest.getContextPath()%>/images/icon_google_search.jpg" style="height:33px;"/></a>
</div>



Note:

We need to make sure that the portlet liferay-portlet.xmlfile following tags should be present.


<add-default-resource>true</add-default-resource>
<system>true</system>


In portal-ext.properties file add portlet ID in list of portlet.add.default.resource.check.whitelist


portlet.add.default.resource.check.whitelist=3,56_INSTANCE_0000,58,82,86,87,
88,103,113,145,164,166,170,177, googlesearchportlet_WAR_GoogleSearchportlet


Google Search Icon and Search Portlet in Theme


Note:

Portlet will be loaded dynamically in the page with maximized window state.

Google Search Portlet in portal Page

Screen: 1


Screen: 2


Screen: 3



Download Portlet

Download the portlet and use in your portal I have given provide source and war file.


Note:

In the given portlet I have used custom search code with respect to my Google account so you can change accordingly.

Reference Links




Author
Share on Google Plus

About Meera Prince

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment