Tuesday, March 4, 2014

Liferay AUI Animation Example

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 anim module 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

  1. We need to load required AUI modules using AUI use method
  2. Initiate animation object for specific element
  3. 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: 1 Initial 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

Popular Posts

Recent Posts

Recent Posts Widget