Using Google Custom Search engine in PrimeFaces Overlay Panels

Thursday February 20, 2014 ()

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.


12,805

Comments (Using Google Custom Search engine in PrimeFaces Overlay Panels)