RE: YUI3 DataTable

3866105, modified 15 Years ago.

YUI3 DataTable

New Member Posts: 6 Join Date: 8/24/09 Recent Posts

How do you use YUI3 DataTable in Liferay 6.0.5?

I get an undefined type error when running this simple example:


<script>
YUI().use("datatable-base", function(Y) {
    var cols = ["id","name","price"],
    data = [
        {id:"ga-3475", name:"gadget", price:"$6.99"},
        {id:"sp-9980", name:"sprocket", price:"$3.75"},
        {id:"wi-0650", name:"widget", price:"$4.25"}
    ],
    dt = new Y.DataTable.Base({
        columnset: cols,
        recordset: data,
        summary: "Price sheet for inventory parts",
        caption: "Example table with simple columns"
    }).render("#example");
})
</script>

<div id="example"></div>

3866105, modified 15 Years ago.

RE: YUI3 DataTable

New Member Posts: 6 Join Date: 8/24/09 Recent Posts

Liferay 6.0.5 ships with YUI version 3.2.0PR1. Looks like DataTable is supported in version 3.3.0.

Anyone know how to upgrade to the latest version of YUI3?

7392784, modified 15 Years ago.

RE: YUI3 DataTable

New Member Posts: 24 Join Date: 2/3/11 Recent Posts

I'm having the same issue...I want to be able to use components from the 3.3 release as well.

I will admit that I am new to Liferay/Alloy UI but is there way to have the loader load the components directly from yahooapis instead of the ones bundled with liferay?

7392784, modified 15 Years ago.

RE: YUI3 DataTable

New Member Posts: 24 Join Date: 2/3/11 Recent Posts

So I've dug into this a little more and maybe someone can help explain a few things to me.

I have the following in my portlet in liferay-portlet.xml

<portlet>
<portlet-name>whiteboard</portlet-name>
<icon>/icon.png</icon>
<instanceable>true</instanceable>
<header-portlet-javascript>http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js</header-portlet-javascript>
</portlet>

And in my JSP I have the following:

<script type="text/javascript">

YUI().use("datatable-base", function(Y){
alert("version: " + YUI().version + ", comboBase: " + Y.config.comboBase + ", base: " + Y.config.base);
var node = Y.one('#demo');
var used = [];
Y.each(Y.Env._attached, function(v, k) {
used[used.length] = k;
});
used.sort();
node.setContent('<strong>Modules Loaded:</strong> ' + used.join(', '));
});

</script>

And here is what I get in the alert box:

version: 3.3.0, comboBase: /combo/?browserId=firefox&minifierType=js&languageId=en_US&t=1281973494000&p=/html/js&, base: http://yui.yahooapis.com/3.3.0/build/

And the loaded modules output:

Modules Loaded: arraylist, attribute, attribute-base, attribute-complex, base, base-base, base-build, base-pluginhost, classnamemanager, dom, dom-base, dom-screen, dom-style, dom-style-ie, event, event-base, event-custom, event-custom-base, event-custom-complex, event-delegate, event-focus, event-key, event-mouseenter, event-mousewheel, event-resize, event-synthetic, features, get, intl-base, loader, loader-base, loader-rollup, loader-yui3, node-base, node-event-delegate, node-style, oop, pluginhost, rls, selector, selector-css2, selector-native, substitute, widget, widget-base, widget-htmlparser, yui-base, yui-later, yui-log, yui-throttle

When tracing the GET methods I see the get for combo as

http://localhost:8080/combo/?browserId=firefox&minifierType=js&languageId=en_US&t=1281973494000&p=/html/js&m=/aui/oop/oop-min.js&m=/aui/event-custom/event-custom-min.js&m=/aui/pluginhost/pluginhost-min.js&m=/aui/attribute/attribute-min.js&m=/aui/base/base-min.js&m=/aui/collection/arraylist-min.js&m=/aui/recordset/recordset-base-min.js&m=/aui/dom/dom-min.js&m=/aui/event/event-min.js&m=/aui/node/node-base-min.js&m=/aui/node/node-style-min.js&m=/aui/classnamemanager/classnamemanager-min.js&m=/aui/node/node-event-delegate-min.js&m=/aui/widget/widget-min.js&m=/aui/substitute/substitute-min.js&m=/aui/datatable/datatable-base-min.js

What I don't understand is how the aui stuff got into the YUI config. My understanding was that AlloyUI used the AUI global as opposed to the YUI so that you could use YUI if you wanted to.

Can someone help me here?

7392784, modified 15 Years ago.

RE: YUI3 DataTable

New Member Posts: 24 Join Date: 2/3/11 Recent Posts

I'm not sure what this does to anything else but I finally got a workable solution to at least get the basic datatable example from YUI working. Here are the changes I made...if someone sees a problem or a better way to do this I would love to hear it.

In liferay-portlet added the following to the portlets I wanted to use YUI3 with:


<portlet>
  <portlet-name>whiteboard</portlet-name>
  <icon>/icon.png</icon>
  <instanceable>true</instanceable>
  <header-portlet-javascript>http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js</header-portlet-javascript>
</portlet>

In my jsp I did the following:



<div id="example"></div>

<script type="text/javascript"></script>

YUI({comboBase: "http://yui.yahooapis.com/combo?", root: "3.3.0/build/", filter: null}).use("datatable-base", function(Y){
	    
var cols = ["id","name","price"],
   data = [{id:"ga-3475", name:"gadget", price:"$6.99"},
	   {id:"sp-9980", name:"sprocket", price:"$3.75"},
	   {id:"wi-0650", name:"widget", price:"$4.25"}
	  ];

dt = new Y.DataTable.Base({columnset: cols,
	                   recordset: data,
	                   summary: "Price sheet for inventory parts",
	                   caption: "Example table with simple columns"
	                 }).render("#example");
});

792741, modified 15 Years ago.

RE: YUI3 DataTable

Regular Member Posts: 137 Join Date: 5/12/08 Recent Posts

The issue with the dataTable is the version AlloyUI relies on ... with AlloyUI 1.0.1, YUI 3.2 is used. YUI 3.2 does not know dataTable. With AlloyUI 1.0.2 YUI 3.3 is used and dataTable should be available.

Ian Harrigan, modified 14 Years ago.

RE: YUI3 DataTable

New Member Posts: 19 Join Date: 11/22/11 Recent Posts

Hi All,

Has anyone managed to use the YUI3 "datatable-base" module inside a liferay portlet, i have managed to create one, however, its completely unstyled.

Anyone managed to get a work instance of Y.DataTable.Base working?

Thanks in advance,
Ian

Svetoslav Kostadinov, modified 13 Years ago.

RE: YUI3 DataTable

New Member Posts: 6 Join Date: 6/27/12 Recent Posts

Yes, I have managed to get DataTable.Base module working, however I am having issues with getting DataTable.Scroll module working.

Any ideas?

Thanks!

Svetoslav Kostadinov, modified 13 Years ago.

RE: YUI3 DataTable

New Member Posts: 6 Join Date: 6/27/12 Recent Posts

I just got the Scrollable DataTable to work.

Here is the setup of my liferay-portlet.xml file:


<portlet>
		<portlet-name>coursecatalog</portlet-name>
		<icon>/icon.png</icon>
		<instanceable>false</instanceable>
		<header-portlet-css>/css/main.css</header-portlet-css>
		<header-portlet-javascript>http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js</header-portlet-javascript>
		<footer-portlet-javascript>
			/js/main.js
		</footer-portlet-javascript>
		<css-class-wrapper>coursecatalog-portlet</css-class-wrapper>
	</portlet>

and here is my code, placed in main.js:

YUI({comboBase: "http://yui.yahooapis.com/combo?", root: "3.6.0/build/", 
	filter: null}).use("datatable-scroll",function(Y){
    
	//	 A table from data with keys that work fine as column names
	var cols = [
	            {key: "courseName", label: "Course Name"},
	            {key: "courseDescription", label: "Course Description"},
	            {key: "courseNumber", label: "Course Number"},
	            {key: "courseLevel", label: "Course Level"},
	            {key: "coursePrerequisits", label: "Prerequisits"},
	            ];

	// Columns must match data parameter names
	var mydata = coursesList;
		//coursesList is generic JavaScript Array of Objects.

	// Creates a DataTable with 3 columns and 3 rows
	var table = new Y.DataTable.Base({
	    columnset: cols,
	    recordset: mydata
	})
	table.plug(Y.Plugin.DataTableScroll,{scrollable: "y", height: "200px",});
	table.render("#courseTableWrapper");
});

since DataTableScroll is plugin and not constructor we have to call it as a plugin.

I hope that helps!
Good luck to you all...

Community

Company

Feedback

Ask Questions and Find Answers

Important:

Ask is now read-only. You can review any existing questions and answers, but not add anything new.

But - don't panic! While ask is no more, we've replaced it with discuss - the new Liferay Discussion Forum! Read more here here or just visit the site here:

discuss.liferay.com

RE: YUI3 DataTable