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
- 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:
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
Posts
0 comments :
Post a Comment