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:
- Load Google Search Java Script Source and its CSS
- Initialize Google Search Control and Pass Required Options
- 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&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&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 in
portal_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.xml
file 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
Posts
