Using Google Custom Search engine in PrimeFaces Overlay Panels
The following is an example on how to implement a custom Google Search engine in PrimeFaces version 4 <p:overlayPanel />. First create an account with Google Custom search (CSE) here https://www.google.com/cse. You will get your own Custom Search engine ID. From within your CSE account you will find a place to generate the following basic CSE Javascript code. Place this code in the head section or in the body just before the closing </body> tag, whichever is prefered.
<script> (function() { var cx = 'REPLACE WITH YOUR OWN ID'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); </script>
Replace line number 3 in the above Javascript code with your own Custom Search engine ID. The above code will look by default for a <div /> element with "gcse-search" class somewhere in your page. Create a <div /> like below. Place this where you want the search to appear in the page.
<div style="min-height:70px;max-height:600px;overflow-y:auto;"> <div class="gcse-search"> </div> </div>
Notice the wrapper <div /> line 1 above. This is where the size, etc., of input element and results panel is defined. You may want to create a CSS class for this in your implementation instead of inlined style. In your CSE account you are also able to define the "Look and Feel" of the custom search including a theme. Styling further is accomplished by overriding predefined CSS style rules. Below are sample overrides:
// The result items .gs-webResult { padding-bottom: 13px; font-size:11px; font-weight: normal; } // Search information (ex. About 53 results (0.38 seconds)) .gsc-result-info { font-weight: normal !important; font-size: 9px !important; } // The paginator .gsc-cursor-page { padding: 4px 8px; border: 1px solid darkseagreen; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } // The text input control input.gsc-input { font-size: 13px !important; font-weight:bold; }
Visit the link below for the complete CSS style rules for the default theme.
http://www.google.com/cse/style/look/default.css
To further customize the custom search visit the CSE documentation here.
https://developers.google.com/custom-search/docs/element
The custom search in PrimeFaces <p:overlayPanel />
Our custom search is lunched from a menu bar. Here is the complete menubar component with the overlay panel in the <f:facet /> section of this component. Note that the layout of the Custom Search engine defined in the settings of your account should be either compact or full width.
<h:form prependId="false"> <p:menubar autoDisplay="true" > <p:menuitem url="/home" icon="ui-icon-home" value="Home" /> <f:facet name="options"> <p:graphicImage styleClass="dimmed-image" id="gsePanel" value="/images/search-icon.png" alt="The Kahimyang Project" /> <p:overlayPanel styleClass="search-results-overlay" showEffect="slide" hideEffect="fade" for="gsePanel" showEvent="mousedown" hideEvent="mousedown"> <div class="google-s-wrapper" > <div class="gcse-search"> </div> </div> </p:overlayPanel> </f:facet> </p:menubar> </h:form>
Re-styling the menubar for your PrimeFaces theme.
// Change default menu bar background color .ui-menubar { background-color: darkseagreen !important; } // Change text color and weight of font .ui-menubar .ui-menuitem-link { font-weight: bold !important; color:#264026 !important; } // The dropdown in submenu .ui-menu-list { background-color: darkseagreen !important; }
As a demo, click on the search icon at the right side of the menu bar of this page (desktop version of this page only). That's it. Good luck.
