Fórumok
using dojo in liferay portlet
sulman sarwar, módosítva 12 év-val korábban
using dojo in liferay portlet
New Member Bejegyzések: 13 Csatlakozás dátuma: 2009.10.20. Legújabb bejegyzések
Hi All,
I am trying to use dojo in liferay portlets but i am having issues.
following is the dojo code:
<script>
dojo.ready(function()
{
dojo.parser.parse();
});
</script>
<div id="<portlet:namespace/>_container">
<div id="<portlet:namespace/>_borderContainer" data-dojo-type="dijit.layout.BorderContainer" style="width: 760px; height: 440px;position:absolute;z-index:2000; border:1px solid;">
<div id="<portlet:namespace/>_topPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">Top pane</div>
<div id="<portlet:namespace/>_leadingRegion" data-dojo-type="dijit.layout.AccordionContainer" data-dojo-props="region:'leading'">
<div id="<portlet:namespace/>_accordion1" data-dojo-type="dijit.layout.AccordionPane" title="pane #1">accordion pane #1</div>
<div id="<portlet:namespace/>_accordion2" data-dojo-type="dijit.layout.AccordionPane" title="pane #2">accordion pane #2</div>
<div id="<portlet:namespace/>_accordion3" data-dojo-type="dijit.layout.AccordionPane" title="pane #3">accordion pane #3</div>
</div>
<div id="<portlet:namespace/>_tabContainer" data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center'">
<div id="<portlet:namespace/>_tab1" data-dojo-type="dijit.layout.ContentPane" title="tab #1">tab pane #1</div>
<div id="<portlet:namespace/>_tab2" data-dojo-type="dijit.layout.ContentPane" title="tab #2">tab pane #2</div>
<div id="<portlet:namespace/>_tab3" data-dojo-type="dijit.layout.ContentPane" title="tab #3">tab pane #3</div>
</div>
<div id="<portlet:namespace/>_trailingRegion" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'trailing'">Trailing pane</div>
<div id="<portlet:namespace/>_bottomRegion" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">Bottom pane</div>
</div>
</div>
<script type="text/javascript" >
dojo.require("dojo.parser");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.registry");
</script>
Following is my liferay-portlet.xml entry:
<portlet>
<portlet-name>liferay-test-portlet</portlet-name>
<icon>/icon.png</icon>
<instanceable>true</instanceable>
<header-portlet-css>/css/main.css</header-portlet-css>
<header-portlet-css>http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/soria/soria.css</header-portlet-css>
<header-portlet-javascript>http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js</header-portlet-javascript>
<footer-portlet-javascript>/js/main.js</footer-portlet-javascript>
</portlet>
After deploying the portlet to the liferay portal following is what i get.
As you can see dojo widgets are not displaying within the portlet and secondly css is not being applied. How do i solve this issue?
I am trying to use dojo in liferay portlets but i am having issues.
following is the dojo code:
<script>
dojo.ready(function()
{
dojo.parser.parse();
});
</script>
<div id="<portlet:namespace/>_container">
<div id="<portlet:namespace/>_borderContainer" data-dojo-type="dijit.layout.BorderContainer" style="width: 760px; height: 440px;position:absolute;z-index:2000; border:1px solid;">
<div id="<portlet:namespace/>_topPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">Top pane</div>
<div id="<portlet:namespace/>_leadingRegion" data-dojo-type="dijit.layout.AccordionContainer" data-dojo-props="region:'leading'">
<div id="<portlet:namespace/>_accordion1" data-dojo-type="dijit.layout.AccordionPane" title="pane #1">accordion pane #1</div>
<div id="<portlet:namespace/>_accordion2" data-dojo-type="dijit.layout.AccordionPane" title="pane #2">accordion pane #2</div>
<div id="<portlet:namespace/>_accordion3" data-dojo-type="dijit.layout.AccordionPane" title="pane #3">accordion pane #3</div>
</div>
<div id="<portlet:namespace/>_tabContainer" data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center'">
<div id="<portlet:namespace/>_tab1" data-dojo-type="dijit.layout.ContentPane" title="tab #1">tab pane #1</div>
<div id="<portlet:namespace/>_tab2" data-dojo-type="dijit.layout.ContentPane" title="tab #2">tab pane #2</div>
<div id="<portlet:namespace/>_tab3" data-dojo-type="dijit.layout.ContentPane" title="tab #3">tab pane #3</div>
</div>
<div id="<portlet:namespace/>_trailingRegion" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'trailing'">Trailing pane</div>
<div id="<portlet:namespace/>_bottomRegion" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">Bottom pane</div>
</div>
</div>
<script type="text/javascript" >
dojo.require("dojo.parser");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.registry");
</script>
Following is my liferay-portlet.xml entry:
<portlet>
<portlet-name>liferay-test-portlet</portlet-name>
<icon>/icon.png</icon>
<instanceable>true</instanceable>
<header-portlet-css>/css/main.css</header-portlet-css>
<header-portlet-css>http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/soria/soria.css</header-portlet-css>
<header-portlet-javascript>http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js</header-portlet-javascript>
<footer-portlet-javascript>/js/main.js</footer-portlet-javascript>
</portlet>
After deploying the portlet to the liferay portal following is what i get.
As you can see dojo widgets are not displaying within the portlet and secondly css is not being applied. How do i solve this issue?
Mellékletek:
Daniel P., módosítva 12 év-val korábban
RE: using dojo in liferay portlet
New Member Bejegyzések: 9 Csatlakozás dátuma: 2009.10.29. Legújabb bejegyzések
For me it works fine to use DOJO 1.7 on Liferay. Are you sure that you added DOJO's theme css?
In my theme I have following:
<html>
<head>
<link rel="stylesheet" href="${theme_display.getPathThemeRoot()}/dojotoolkit/dijit/themes/claro/claro.css" type="text/css">
<script src="${theme_display.getPathThemeRoot()}/dojotoolkit/dojo/dojo.js" data-dojo-config="async:true" type="text/javascript"></script>
<script type="text/javascript">
require(["dojo/parser", /* lots of dependencies */, "dojo/domReady!"], function(parser){
parser.parse();
});
</script>
</head>
<body class="$css_class claro">
...
</body>
</html>
In my theme I have following:
<html>
<head>
<link rel="stylesheet" href="${theme_display.getPathThemeRoot()}/dojotoolkit/dijit/themes/claro/claro.css" type="text/css">
<script src="${theme_display.getPathThemeRoot()}/dojotoolkit/dojo/dojo.js" data-dojo-config="async:true" type="text/javascript"></script>
<script type="text/javascript">
require(["dojo/parser", /* lots of dependencies */, "dojo/domReady!"], function(parser){
parser.parse();
});
</script>
</head>
<body class="$css_class claro">
...
</body>
</html>
Luis Beltran, módosítva 12 év-val korábban
RE: using dojo in liferay portlet
New Member Bejegyzés: 1 Csatlakozás dátuma: 2012.03.20. Legújabb bejegyzések
Hi Sulman,
Did you manage to make Dojo work with Liferay? I'm also stuck with it, and can't even my Daniel method work. I'm getting the following error in the JavaScript console:
mypage:8Uncaught TypeError: Object function (_c,_d){if(/input|button/i.test(_c.nodeName)){return on(_c,"click",_d);}else{function _e(e){return (e.keyCode==_2.ENTER||e.keyCode==_2.SPACE)&&!e.ctrlKey&&!e.shiftKey&&!e.altKey&&!e.metaKey;};var _f=[on(_c,"keypress",function(e){if(_e(e)){_7=e.target;e.preventDefault();}}),on(_c,"keyup",function(e){if(_e(e)&&e.target==_7){_7=null;_d.call(this,e);}}),on(_c,"click",function(e){_d.call(this,e);})];return {remove:function(){_1.forEach(_f,function(h){h.remove();});}};}} has no method 'include'
I don't understand why it's so hard to include Dojo in a Liferay portlet... It´s even worse when including the Dojo files in my project, I can't even deploy it without Liferay complaining about some files...
Please help!
Did you manage to make Dojo work with Liferay? I'm also stuck with it, and can't even my Daniel method work. I'm getting the following error in the JavaScript console:
mypage:8Uncaught TypeError: Object function (_c,_d){if(/input|button/i.test(_c.nodeName)){return on(_c,"click",_d);}else{function _e(e){return (e.keyCode==_2.ENTER||e.keyCode==_2.SPACE)&&!e.ctrlKey&&!e.shiftKey&&!e.altKey&&!e.metaKey;};var _f=[on(_c,"keypress",function(e){if(_e(e)){_7=e.target;e.preventDefault();}}),on(_c,"keyup",function(e){if(_e(e)&&e.target==_7){_7=null;_d.call(this,e);}}),on(_c,"click",function(e){_d.call(this,e);})];return {remove:function(){_1.forEach(_f,function(h){h.remove();});}};}} has no method 'include'
I don't understand why it's so hard to include Dojo in a Liferay portlet... It´s even worse when including the Dojo files in my project, I can't even deploy it without Liferay complaining about some files...
Please help!