Introduction:
Liferay have very good java script library that AUI java script we have many modules in AUI for different use.
In the post I just explain how to use AUI animation in liferay portlet. In AUI we have some animation related java script modules from which we can do some animation for html elements.
Here AUI we have module called “anim” this will make animation for html elements.
In the animmodule we have method which take animation related properties as an array of options so that we can apply animation to element
The following is simple Animation Method Syntax
var a = new A.Anim( { node: '#foo', to: { width: 100, height: 100, opacity: 0.5 }, duration: 0.6, easing: A.Easing.bounceOut } ); a.run(); The following is important options node: This will decide on which element we need to apply animation. to: This is an array of option consist of width, height and opacity this will decide animation appearance. duration: This is the time in seconds for animation effect can be done with that time. Default value is one second. |
Implementation steps
- We need to load required AUI modules using AUI use method
- Initiate animation object for specific element
- Use run method to apply animation upon element
Concept:
We will implement search box and here when we mouse over on search icon then we will see the search input text box to enter key words when we mouse leave then we will disappear text box so that we can see only search icon.
Screen: 1Initial state of search or on mouse leave state
Screen: 2 on mouse over state
Note:
This is just example no server side functionality for search data.
Environment:
Liferay 6.1EE +Tomcat 7.x+MySQL 5.1
Note:
The code will work for portal 6.2 version you can try for 6.0 too because it’s just jsp page.
Download Liferay AUI Animation from following location
You can find source and war file
Procedure for deploy portlet:
You can use war file and directly place in your portal deploy folder and test or you can also use source to deploy portlet.
Once portlet is deployed successfully you can see the portlet in sample category name as LiferayAUIAnimation.
Complete Code for JSP Page
<%@ 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/security" prefix="liferay-security" %> <%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %> <%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %> <%@ taglib uri="http://liferay.com/tld/util" prefix="liferay-util" %> <%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %> <portlet:defineObjects /> <liferay-theme:defineObjects /> <style> .searchAnimcationContainer { display: inline-block; position: relative; height: 34px; padding-left: 36px; background-color: #9575be; top: -6px; z-index: 1000; border:0px solid red; } .searchAnimcationContainer .searchButton { position: absolute; top: 0; left: 0; display: block; width: 35px; height: 35px; } .searchAnimcationContainer .searchInputDiv { position: relative; display: block; overflow: hidden; width: 0; left: 1px; text-align: left; } .searchInputDiv input[type="text"] { border: 0; border-left: 1px solid #d5cfcf; width: 260px; height: 18px; line-height: 18px; font-size: 12px; outline: 0; background-color: transparent; background: 0; color: #fff; font-weight:bold; } </style> <portlet:actionURL var="actionURL"> </portlet:actionURL> <div class="searchAnimcationContainer" id="searchAnimcationContainer" > <form action="<%=actionURL.toString()%>" method="post" name="themeSearchForm" id="themeSearchForm"> <div class="searchButton" id="searchButton"> <a href="#"> <img src="<%=renderRequest.getContextPath() %>/images/btn-search.png"/> </a> </div> <div class="searchInputDiv" id="searchInputDiv" style="width:1px;"> <input type="text" value="" placeholder="enter keywords" name="keywords" id="keywords"> </div> </form> </div> <aui:script> //anim AUI().use('aui-base','aui-node','aui-io', 'aui-event','anim', function (A) { // intiate animation over searchInputDiv element var b = new A.Anim( { node: '#searchInputDiv', duration: 0.1, easing: A.Easing.bounceOut }); //on mouseover event so that when we movuse over on searchAnimcationContainer //element then animation will apply A.one('#searchAnimcationContainer').on('mouseenter', function(event){ // define animation property array with width and opacity var toArrat={width:300,opacity: 0.5}; b.set("to",toArrat); //run animation b.run(); }); //on mouseleave event so that when we mouseleave on searchAnimcationContainer element then //animation will apply here we will bring back animation to inti A.one('#searchAnimcationContainer').on('mouseleave', function(event){ var toArrat1={width:1,opacity: 0.5}; b.set("to",toArrat1); b.run(); b.destroy(); }); A.one('#searchButton').on('click', function(event){ document.themeSearchForm.submit(); }); }); </aui:script> |
Implement search functionality In theme
We will use same animation text box in theme for search and the following is steps to apply for theme.
Add following code in portal_normal.vm file(docroot\_diffs\templates\ portal_normal.vm)
<div class="righ-header-search" id="righ-header-search"> #set ($searchPortletId = "77") #set ($searchPortletURL = $portletURLFactory.create($request, $searchPortletId, $layout.plid, "RENDER_PHASE")) #set ($VOID1 = $searchPortletURL.setWindowState("MAXIMIZED")) #set ($VOID1 = $searchPortletURL.setPortletMode("view")) #set ($VOID1 = $searchPortletURL.setParameter("struts_action", "/journal_content_search/search")) <form action="${searchPortletURL.toString()}" method="post" name="themeSearchForm" id="themeSearchForm"> <div class="searchBtn" id="searchBtn"><a href="#"><img src="$images_folder/common/btn-search.png"></a></div> <div class="searchinput" id="searchinput" style="width:1px;"> <input class="searchinputText" type="text" value="" placeholder="enter keywords" name="keywords" id="keywords"> </div> </form> </div> |
Add following CSS in your theme custome.css file (\docroot\_diffs\css\ custom.css)
.righ-header-search{ display: inline-block; position: relative; height: 34px; padding-left: 36px; background-color: #9575be; top: -6px; z-index: 1000; border:0px solid red; } .righ-header-search .searchButton { position: absolute; top: 0; left: 0; display: block; width: 35px; height: 35px; } .righ-header-search .searchBtn { position: relative; display: block; overflow: hidden; width: 0; left: 1px; text-align: left; } .searchinput input[type="text"] { border: 0; border-left: 1px solid #d5cfcf; width: 260px; height: 18px; line-height: 18px; font-size: 12px; outline: 0; background-color: transparent; background: 0; color: #fff; font-weight:bold; } |
Add following script in theme main.js(docroot\_diffs\js\main.js)
//anim AUI().use('aui-base','aui-node','aui-io', 'aui-event','anim', function (A) { //search box animataion var a = new A.Anim( { node: '#searchinput', duration: 0.1, easing: A.Easing.bounceOut }); A.one('#righ-header-search').on('mouseenter', function(event){ var toArrat={width:300,opacity: 0.5}; a.set("to",toArrat); a.run(); }); A.one('#righ-header-search').on('mouseleave', function(event){ var toArrat1={width:1,opacity: 0.5}; a.set("to",toArrat1); a.run(); a.destroy(); }); A.one('#searchBtn').on('click', function(event){ document.themeSearchForm.submit(); }); }); |
Note:
I have used following image
<img src="$images_folder/ common/ btn-search.png"> in portal_normal.vm file
btn-search.png image available in downloaded portlet images directory and please take that image and place in your theme images/common directory(docroot\images\common)
Theme Screen:
Note:
You may need to do small css adjustments in the css that is I have given for search box according to your theme.
Related Articles
Reference Links
Author
0 comments:
Post a Comment