« Voltar para 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 Anexos
35947 Visualizações
Média (0 Votos)
A média da avaliação é 0.0 estrelas de 5.
Comentários
Respostas do tópico Autor Data
Very good!!! I'll proved it. Thank's. Roberto Tellado 27 de Janeiro de 2010 05:49
Hi I am new in liferay. If it is possible... M G 2 de Maio de 2010 22:57
You have to add these two jsp files under, "... Saranya Sethurajan 23 de Junho de 2010 04:08
if it is possible please let me know how and... ahmad abuoun 5 de Outubro de 2011 06:58
I cleaned up the wiki markup to show the code... Bob Fleischman 7 de Outubro de 2011 07:16
Replace : <link type="text/css"... Kurian Mathew 23 de Janeiro de 2012 04:56

Very good!!! I'll proved it. Thank's.
Postado em 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
Postado em 02/05/10 22:57.
You have to add these two jsp files under,

" Plugins->portlets->yui-portlet->docroot->view.jsp,yahoo-ui.jsp "
Postado em 23/06/10 04:08 em resposta a M G.
if it is possible please let me know how and where can I add these two jsp files without ide
Postado em 05/10/11 06:58.
I cleaned up the wiki markup to show the code better. The tags were not working correctly.
Postado em 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
Postado em 23/01/12 04:56.