This wiki does not contain official documentation and is currently deprecated and read only. Please try reading the documentation on the Liferay Developer Network, the new site dedicated to Liferay documentation. DISCOVER Build your web site, collaborate with your colleagues, manage your content, and more. DEVELOP Build applications that run inside Liferay, extend the features provided out of the box with Liferay's APIs. DISTRIBUTE Let the world know about your app by publishing it in Liferay's marketplace. PARTICIPATE Become a part of Liferay's community, meet other Liferay users, and get involved in the open source project. « Back to UI Guidelines
Using Yahoo UI in Liferay
Table of Contents [-]
As of Liferay 6, Liferay uses AlloyUI natively, which is built on top of YUI. For more information, see Alloy UI.
Introduction #
The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD license and are free for all uses.
To learn more, visit http://developer.yahoo.com/yui/
Let us create a tree in our portlet . Do the following steps
- Download API for tree view control . You can download it from here http://sourceforge.net/project/downloading.php?group_id=165715&filename=yui_2.5.2.zip
- Unzip the downloaded zip file under webapps and you will get yui folder.
- Create a jsp page named yahoo-ui.jsp and it contains the following
<html>
<head>
<link type="text/css" rel="stylesheet"href="yui/build/treeview/assets/skins/sam/treeview.css"/>
<script src = "/yui/build/yahoo/yahoo-min.js" ></script>
<script src = "/yui/build/event/event-min.js" ></script>
<script src = "/yui/build/treeview/treeview-min.js" ></script>
<script src = "/yui/build/yahoo.js" ></script>
<script type="text/javascript" src="/yui/build/yahoo-dom-event/ yahoo-dom-event.js"></script>
<script type="text/javascript" src="/yui/build/connection/connection-min.js"></script>
</head>
<script>
function treeInit() {
// Get the instance of tree
var tree = new YAHOO.widget.TreeView(document.getElementById("treeDiv1"));
// Get the root instance of the tree
var root = tree.getRoot();
//Add a node (here the node name is First Generation) under root
var firstGeneration = new YAHOO.widget.TextNode("First Generation", root, false);
//Add a node(here the node name is first) under firstGeneration and so on.............
var first = new YAHOO.widget.TextNode("first", firstGeneration, false);
var second = new YAHOO.widget.TextNode("second", firstGeneration, false);
var third = new YAHOO.widget.TextNode("third", firstGeneration, false);
var fourth = new YAHOO.widget.TextNode("fourth", firstGeneration, false);
var secondGeneration = new YAHOO.widget.TextNode("Second Generation", root, false);
var label1 = new YAHOO.widget.TextNode("label1", secondGeneration, false);
var label2 = new YAHOO.widget.TextNode("label2", secondGeneration, false);
var label3 = new YAHOO.widget.TextNode("label3", secondGeneration, false);
var label4 = new YAHOO.widget.TextNode("label4", secondGeneration, false);
var label41 = new YAHOO.widget.TextNode("label4-1", label4 , false);
var label42 = new YAHOO.widget.TextNode("label4-2", label4 , false);
var label43 = new YAHOO.widget.TextNode("label4-3", label4 , false);
var label44 = new YAHOO.widget.TextNode("label4-4", label4 , false);
var label45 = new YAHOO.widget.TextNode("label4-1", label4 , false);
// Finally draw the tree //
tree.draw();
}
</script>
</body>- Now create another jsp named view.jsp and it contains the folllowing
<%@ include file="/html/mpower/common/addressbook/yahoo-ui.jsp" %>
Here is the rest
<html> <body class="yui-skin-sam" onLoad="treeInit()"> <table cellpadding='2' cellspacing='2' width='98%' > <tbody > <tr> <td> // Hereby we are mentioning where to show our tree// <span id="treeDiv1" ></span> </td> </tr> </tbody> </table> </body> </html>
N.B. Keep both yahoo-ui.jsp and view.jsp in the same folder
- Refresh the the page and you will see the tree
35946 Views
