<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<portlet:resourceURL id="getJson" var="resouceURL"></portlet:resourceURL>
<portlet:defineObjects />
<style type="text/css">
.red {
background: red;
}
.black {
background: black;
}
.white {
background: white;
}
.toolTip {
background: white;
border-radius : 0;
border: 4px solid blue;
}
</style>
<h1>This is the AUI Demo portlet.</h1>
<!-- Example 1 -->
<h4>Color Test Example</h4>
<ul id="colorList">
<li>red</li>
<li>black</li>
<li>blue</li>
<li>green</li>
<li>white</li>
</ul>
<br/>
<aui:button cssClass="colorBtn" value="colorTest"></aui:button>
<br/>
<aui:button cssClass="applyColorBtn" value="applyColor"></aui:button>
<aui:button cssClass="unApplyColorBtn" value="unApplyColor"></aui:button>
<br/>
<br/>
<aui:button cssClass="ajaxCall" value="Ajax Call"></aui:button>
<div id="ajaxResponse">Waiting for ajax response</div>
<br/>
<br/>
<aui:button cssClass="auiDialog" value="Open Dialog"></aui:button>
<br/>
<br/>
<div id="check" style="width: 200px" align="left">Tooltip on mouse hover</div>
<br/>
<br/>
<h4>Start typing the name of a state (such as Alaska, California, or Maine)</h4>
<div id="myAutoComplete"></div>
<br/>
<h4>Alloy - Editable Demo</h4>
<div id="editor1">Edit Me</div>
<br/>
<div id="editor2">
Edit Me Heloo world Edit Me Heloo worldEdit
Edit Me Heloo worldEdit Me Heloo worldEdit
Edit Me Heloo worldEdit Me Heloo worldEdit
</div>
<br/>
<h4>Alloy - Toolbar demo</h4>
<div id="demo1"></div>
<br/>
<h4>Alloy - Panel demo</h4>
<div id="myId"></div>
<br/>
<h4>Alloy - Sort demo</h4>
<ul class="vertical" id="vertical">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
</ul>
<br/>
<h4>Alloy - Calender demo</h4>
<input type="text" name="input1" size="55" value="" id="input1" />
<br/>
<h1>Alloy - AUI tag demo w.r.t Liferay</h1>
<aui:form>
<!-- AUI Layout -->
<h4>AUI tag layout</h4>
<aui:layout>
<aui:column columnWidth="25" first="true">
Heloo
</aui:column>
<aui:column columnWidth="75" last="true">
World
</aui:column>
</aui:layout>
<br/>
<h4>AUI tag panel</h4>
<aui:panel collapsible="true" label="Personal Information" >
Helloooooo
</aui:panel>
<br/>
<h4>AUI tag button</h4>
<aui:button value="Click me"></aui:button>
<br/>
<h4>AUI tag button-row</h4>
<aui:button-row>
<aui:button name="saveButton" type="submit" value="save" />
<aui:button name="cancelButton" type="button" value="cancel" />
</aui:button-row>
<br/>
<h4>AUI tag input</h4>
<aui:input name="firstName" lebel="FirstName" type="text"></aui:input>
</aui:form>
<aui:script >
AUI().ready("node", "aui-dialog", "aui-tooltip", function(A){
/******************** Example1*****************************/
A.one('.colorBtn').on("click", function(){
//This line get "colorList" object
var colorList = A.one("#colorList");
//This will get li elements list inside "colorList" ul
var colors = colorList.all("li");
//Following code returns list of all li elemetns on page
var totalLiTags = A.all("li");
alert("No of colors in list are "+colors.size() + "\n" +
"Total li elements of page are "+totalLiTags.size());
});
/******************* Example2*******************************/
A.one('.applyColorBtn').on("click", function(){
A.all("#colorList li").each(function(currentNode,index,nodeList){
if(currentNode.text() == "red"){
currentNode.addClass("red");
}else if(currentNode.text() == "black"){
currentNode.addClass("black");
}else if(currentNode.text() == "white"){
currentNode.addClass("white");
}
});
});
A.one('.unApplyColorBtn').on("click", function(){
A.all("#colorList li").each(function(currentNode,index,nodeList){
if(currentNode.text() == "red"){
currentNode.removeClass("red");
}else if(currentNode.text() == "black"){
currentNode.removeClass("black");
}else if(currentNode.text() == "white"){
currentNode.removeClass("white");
}
});
});
A.one('.ajaxCall').on('click', function() {
A.io.request('${resouceURL}', {
dataType: 'json',
on: {
success: function() {
//alert(this.get('responseData')); //alerts 2
var dataRes = this.get('responseData');
//alert("Response"+dataRes.length)
var rowData = ""
for(var index = 0; index < dataRes.length; index++){
rowData = rowData+dataRes[index].Content+" "+dataRes[index].content_button+"<br/>";
}
A.one('#ajaxResponse').html(rowData);
}
}
});
});
A.one('.auiDialog').on('click', function() {
var instance = new A.Dialog({
bodyContent: 'This is helooworld Dialog body',
centered: true,
constrain2view: true,
destroyOnClose: true,
draggable: true,
height: 150,
resizable: false,
stack: true,
title: 'Dialog title',
width: 500,
close:true,
modal:true,
buttons : [
{
text: 'Submit',
handler: function() {
this.set('bodyContent', 'Processing tour data');
//ajaxCall();
}
}]
}).render();
});
new A.Tooltip({
trigger: '#check',
align: { points: [ 'tl', 'tr' ] }, //lc, rc
showArrow: false,
bodyContent: 'This is my tooltip.Enjoy the toolTip',
cssClass : 'toolTip'
})
.render();
});
AUI().use('aui-autocomplete', 'aui-editable', 'aui-toolbar', 'aui-panel', 'aui-sortable','aui-calendar-base', function(A) {
/******************** Example3*********************************/
var states = [
['AL', 'Alabama', 'The Heart of Dixie'],
['AK', 'Alaska', 'The Land of the Midnight Sun'],
['AZ', 'Arizona', 'The Grand Canyon State'],
['AR', 'Arkansas', 'The Natural State'],
['CA', 'California', 'The Golden State'],
['CO', 'Colorado', 'The Mountain State'],
['CT', 'Connecticut', 'The Constitution State'],
['DE', 'Delaware', 'The First State'],
['DC', 'District of Columbia', "The Nation's Capital"],
['FL', 'Florida', 'The Sunshine State'],
['GA', 'Georgia', 'The Peach State'],
['HI', 'Hawaii', 'The Aloha State'],
['ID', 'Idaho', 'Famous Potatoes'],
['IL', 'Illinois', 'The Prairie State'],
['IN', 'Indiana', 'The Hospitality State'],
['IA', 'Iowa', 'The Corn State'],
['KS', 'Kansas', 'The Sunflower State'],
['KY', 'Kentucky', 'The Bluegrass State'],
['LA', 'Louisiana', 'The Bayou State'],
['ME', 'Maine', 'The Pine Tree State'],
['MD', 'Maryland', 'Chesapeake State'],
['MA', 'Massachusetts', 'The Spirit of America'],
['MI', 'Michigan', 'Great Lakes State'],
['MN', 'Minnesota', 'North Star State'],
['MS', 'Mississippi', 'Magnolia State'],
['MO', 'Missouri', 'Show Me State'],
['MT', 'Montana', 'Big Sky Country'],
['NE', 'Nebraska', 'Beef State'],
['NV', 'Nevada', 'Silver State'],
['NH', 'New Hampshire', 'Granite State'],
['NJ', 'New Jersey', 'Garden State'],
['NM', 'New Mexico', 'Land of Enchantment'],
['NY', 'New York', 'Empire State'],
['NC', 'North Carolina', 'First in Freedom'],
['ND', 'North Dakota', 'Peace Garden State'],
['OH', 'Ohio', 'The Heart of it All'],
['OK', 'Oklahoma', 'Oklahoma is OK'],
['OR', 'Oregon', 'Pacific Wonderland'],
['PA', 'Pennsylvania', 'Keystone State'],
['RI', 'Rhode Island', 'Ocean State'],
['SC', 'South Carolina', 'Nothing Could be Finer'],
['SD', 'South Dakota', 'Great Faces, Great Places'],
['TN', 'Tennessee', 'Volunteer State'],
['TX', 'Texas', 'Lone Star State'],
['UT', 'Utah', 'Salt Lake State'],
['VT', 'Vermont', 'Green Mountain State'],
['VA', 'Virginia', 'Mother of States'],
['WA', 'Washington', 'Green Tree State'],
['WV', 'West Virginia', 'Mountain State'],
['WI', 'Wisconsin', "America's Dairyland"],
['WY', 'Wyoming', 'Like No Place on Earth']
];
window.AC = new A.AutoComplete(
{
dataSource: states,
schema: {
resultFields: ['key', 'name', 'description']
},
matchKey: 'name',
delimChar: ',',
typeAhead: true,
contentBox: '#myAutoComplete'
}
);
AC.render();
/**************************** Example4***********************************/
(new A.Editable(
{
node: '#editor1'
}
));
(new A.Editable({
node: '#editor2',
inputType: 'textarea'
}));
/**************************** Example5***********************************/
new A.Toolbar({
activeState: true, children: [ {label: 'Add', icon: 'plus'}, {label: 'Remove', icon: 'minus'}, {label: 'Config', icon: 'gear'} ]
}).render('#demo1');
/**************************** Example6***********************************/
new A.Panel({
headerContent: 'Panel Container',
collapsible: true,
boundingBox: '#myId',
bodyContent: "Heloo World"
}).render();
/**************************** Example7***********************************/
new A.Sortable(
{
nodes: '#vertical li',
constrain: {
stickY: true
}
}
);
/**************************** Example8***********************************/
new A.Calendar({
trigger: '#input1',
dates: ['09/14/2009', '09/15/2009','09/16/2009'],
//dateFormat: '%d/%m/%y %A',
dateFormat: '%d/%m/%y',
setValue: true,
selectMultipleDates: false
}).render();
});
</aui:script>
