RE: successful dojo use in Liferay portlets?

[Michael E Los, modificado 15 Anos atrás.]

Does anyone know whether Dojo along with Dijit and Dojox widgets have been successfully employed in Liferay portlets?

I haven't found many discussions on this topic in the forums, which suggests it is really easy to do (making me the dummy) or there isn't much usage.

Being a newbie in developing porlets that use Dojo, I think my problems are basic and have to do with getting dojo loaded in such a way that the page can be parsed so declarative widgets are recognized and the calls to dojo.require find the proper files to load.

I've reviewed the twoAjax example suggested in an earlier thread as well as Sun's original. Yep, those work, but they don't incorporate any dijit widgets.

Thanks,
Mike

[Alice C Wang, modificado 15 Anos atrás.]

I am also having the same issue. I've put all my dojo codes in the view.jsp file, copied all the folders/files for dojo-release-1.1.1(digit, dojo, dojox, util) under docroot/js folder. built the war file and deployed it (I am using Liferay 5.1.1 with Tomcat bundle). But somehow I'm always gettting the error complaining 'dijit' is undefined.

Could someone help us please?

Thanks in advance!
Alice

[Jack Bakker, modificado 14 Anos atrás.]

I have dijit widgets working by put declarations in the theme; but still need to think on a way to conditionally include widgets based on whether a portlet needs it or not...

[S. Glatt, modificado 14 Anos atrás.]

Hi Jack,

could you provide a very basic sample portlet that uses dojo, showing somthing like the dijit.form.DateTextBox

iam new into this portlet thing and help would be great.

regards
Serk

[Jack Bakker, modificado 13 Anos atrás.]

in tomcat's webapps/ROOT/html/js I created folder /dojo and in that /1.4 which has all the dojo 1.4 files

ROOT/html/js/dojo/1.4

in the theme portal_normal.vm I put the following just before the closing </head> tag

<script type="text/javascript" src="/html/js/dojo/1.4/dojo/dojo.js" djconfig="parseOnLoad: true">
</script>
<link rel="stylesheet" type="text/css" href="/html/js/dojo/1.4/dijit/themes/tundra/tundra.css">

and in the same portal_normal.vm I put the below way down at the bottom, just before the closing </html> tag

<script type="text/javascript">
    dojo.require("dijit.form.DateTextBox");
</script>

above is not ideal... why require this for every page in a site that uses that theme...

then in the jsp of a Struts 2 portlet I reference dojo stuff as usual

<s:form action="someAction" method="POST">
<s:textfield label="FROM" key="dateFromStr" required="false" dojoType="dijit.form.DateTextBox" />
<s:textfield label="TO" key="dateToStr" required="false" dojoType="dijit.form.DateTextBox" />
<s:submit />
</s:form>

while the above lines up fine for just two date pickers, better to use a struts2 simple theme and put in html to lay it out

<s:form action="someAction" method="POST" theme="simple">
<table>
<tbody><tr>
<td><s:textfield label="FROM" key="dateFromStr" required="false" dojoType="dijit.form.DateTextBox" /></td>
<td><s:textfield label="TO" key="dateToStr" required="false" dojoType="dijit.form.DateTextBox" /></td>
</tr>
<tr>
<td colspan="2" align="right">
<s:submit />
</td>
</tr>
</tbody></table>
</s:form>

[Garrett Reimer, modificado 13 Anos atrás.]

I was able to get it working like this:

1) I made a script (called foundation.js) that loads dojo dynamically and calls back when it is finished.
2) put a reference to that script in liferay-portal.xml. <header-portlet-javascript>/js/foundation.js</header-portlet-javascript> . What this does is includes this script before the portlet is loaded. I suppose you could also put a script tag above your dojo code in your jsp.
3) Then when that script calls back, you will have access to the dojo object.
4) From there you can call dojo.require("dijit.blahblah").
5) Then, do a dojo.addOnLoad(function() {// your dojo code});

My foundation.js script contains a class with a method called addOnLoad, which takes a function. When the script is loaded, this method gets called.

Now, to dynamically load the script and add a done-loading listener:

var script = document.createElement("script");
script.type = "text/javascript";
script.loader = this; // remember this is in a class

// different browsers handle loading differently.
// Some use onreadystatechange and some use onload
script.onreadystatechange = function () {
if (this.readyState === 'loaded' || this.readyState === "complete") {
this.loader.scriptDidLoad();
}
};
script.onload = function() {
this.loader.scriptDidLoad();
};

script.src = this._url;
// append the tag to the head element
document.getElementsByTagName("head")[0].appendChild(script);

.....

scriptDidLoad: function() {
// make your callbacks
}

[Vikrant Mahajan, modificado 13 Anos atrás.]

Hi i am able to add Dojo in my portlet using the above approach.But the problem that i am facing is my dojo components are without Dojo CSS applied .I mean they are naked controls without any dojo given css applied.

What can be the problem can any please help me out

[Chris Schulz, modificado 12 Anos atrás.]

Don't know if anyone's still interested in this topic but I was able to get dojo working with liferay by doing the following. Figured I'd post it up here in case anyone else was still messing with this.

I wanted the logic contained in the portlet so I didn't have to enforce a theme.
I tossed dojo into my portlet's docroot /js directory of my portlet.
Grabbed a simple dojo example and put in in view.jsp:

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<portlet:defineobjects />

<button id="progButtonNode" type="button"></button>
<div id="result1"></div>

<button dojotype="dijit.form.Button" type="button">
	Click me too!
	<script type="dojo/method" event="onClick" args="evt">
		// Do something:
		dojo.byId("result2").innerHTML += "Thank you! ";
	</script>
</button>
<div id="result2"></div>

Updated liferay-portlet.xml to include dojo:

	<portlet>
		<portlet-name>dojo-test</portlet-name>
		<icon>/icon.png</icon>
		<instanceable>true</instanceable>
		<header-portlet-css>/js/dojo/dijit/themes/soria/soria.css</header-portlet-css>
		<header-portlet-javascript>/js/dojo/dojo/dojo.js</header-portlet-javascript>
		<header-portlet-javascript>/js/main.js</header-portlet-javascript>
		<css-class-wrapper>dojo-test-portlet</css-class-wrapper>
	</portlet>

And added the following in main.js:

dojo.require("dijit.form.Button");
dojo.require("dojo.parser");

dojo.addOnLoad(function() {
	 document.body.className += ' soria ';
	 dojo.parser.parse();

	// Create a button programmatically:
	var button = new dijit.form.Button({
		label: "Click me!",
		onClick: function() {
			// Do something:
			dojo.byId("result1").innerHTML += "Thank you! ";
		}
	},
	"progButtonNode");
	
	init();
});
	

Initially, only the programmatic button would load, but adding an explicit call to dojo.parser.parse() got the declarative button working too.

It still has an issue when the portlet is initially added to a page, but every time the page is browsed to after that it seems to be working fine.

[Kirk Stork, modificado 11 Anos atrás.]

I've done this in liferay-portlet.xml

		<header-portal-javascript>
			http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js
		</header-portal-javascript>

which results in the page head element containing:

 <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" type="text/javascript"></script>

This gives me access to the two dojo global functions (require and define) in any portlet on the page and (I hope) prevents multiple tries to include dojo on the page by multiple portlets. You can just

<script>
require(["dojo/dom", ...
</script>

anywhere in your jsp.

The thing is, it doesn't allow for activating the AMD Mode. According to dojo docs, you want your page head element to have something more like this in it:

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" data-dojo-config="async: true"></script>

So, as handy as the include mechanism in liferay-portlet.xml is, I don't see how to include dojo correctly by this mechanism.

What would be the right way? A hook portlet maybe? Any ideas out there?