« 返回到 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 附件
35949 查看
平均 (0 票)
满分为 5,平均得分为 0.0。
评论
讨论主题回复 作者 日期
Very good!!! I'll proved it. Thank's. Roberto Tellado 2010年1月27日 上午5:49
Hi I am new in liferay. If it is possible... M G 2010年5月2日 下午10:57
You have to add these two jsp files under, "... Saranya Sethurajan 2010年6月23日 上午4:08
if it is possible please let me know how and... ahmad abuoun 2011年10月5日 上午6:58
I cleaned up the wiki markup to show the code... Bob Fleischman 2011年10月7日 上午7:16
Replace : <link type="text/css"... Kurian Mathew 2012年1月23日 上午4:56

Very good!!! I'll proved it. Thank's.
在 10-1-27 上午5: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
在 10-5-2 下午10:57 发帖。
You have to add these two jsp files under,

" Plugins->portlets->yui-portlet->docroot->view.jsp,yahoo-ui.jsp "
在 10-6-23 上午4:08 发帖以回复 M G
if it is possible please let me know how and where can I add these two jsp files without ide
在 11-10-5 上午6:58 发帖。
I cleaned up the wiki markup to show the code better. The tags were not working correctly.
在 11-10-7 上午7: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
在 12-1-23 上午4:56 发帖。