« Zurück zu 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

  1. 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
  2. Unzip the downloaded zip file under webapps and you will get yui folder.
  3. 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>
  1. 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

  1. Refresh the the page and you will see the tree
0 Anhänge
35944 Angesehen
Durchschnitt (0 Stimmen)
Die durchschnittliche Bewertung ist 0.0 von max. 5 Sternen.
Kommentare
Antworten im Thread Autor Datum
Very good!!! I'll proved it. Thank's. Roberto Tellado 27. Januar 2010 05:49
Hi I am new in liferay. If it is possible... M G 2. Mai 2010 22:57
You have to add these two jsp files under, "... Saranya Sethurajan 23. Juni 2010 04:08
if it is possible please let me know how and... ahmad abuoun 5. Oktober 2011 06:58
I cleaned up the wiki markup to show the code... Bob Fleischman 7. Oktober 2011 07:16
Replace : <link type="text/css"... Kurian Mathew 23. Januar 2012 04:56

Very good!!! I'll proved it. Thank's.
Gepostet am 27.01.10 05:49.
Hi

I am new in liferay.
If it is possible please let me know how and where can I add these two jsp files (view.jsp and yahoo-ui.jsp ) into ext (in eclipse) step by step. Thanks
Gepostet am 02.05.10 22:57.
You have to add these two jsp files under,

" Plugins->portlets->yui-portlet->docroot->view.jsp,yahoo-ui.jsp "
Gepostet am 23.06.10 04:08 als Antwort auf M G.
if it is possible please let me know how and where can I add these two jsp files without ide
Gepostet am 05.10.11 06:58.
I cleaned up the wiki markup to show the code better. The tags were not working correctly.
Gepostet am 07.10.11 07:16.
Replace : <link type="text/css" rel="stylesheet"href="yui/build/treeview/assets/skins/sam/treeview.css"/>

With :
<link type="text/css" rel="stylesheet"href="/yui/build/treeview/assets/skins/sam/treeview.css"/>
******­******************
The example will work fine
Gepostet am 23.01.12 04:56.