Forums

Home » Liferay Portal » English » 3. Development

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Michael E Los
successful dojo use in Liferay portlets?
October 3, 2008 1:10 PM
Answer

Michael E Los

Rank: New Member

Posts: 1

Join Date: October 3, 2008

Recent Posts

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
RE: successful dojo use in Liferay portlets?
October 7, 2008 1:00 PM
Answer

Alice C Wang

Rank: New Member

Posts: 1

Join Date: October 7, 2008

Recent Posts

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
RE: successful dojo use in Liferay portlets?
March 4, 2010 12:10 PM
Answer

Jack Bakker

Rank: Liferay Master

Posts: 882

Join Date: January 3, 2010

Recent Posts

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
RE: successful dojo use in Liferay portlets?
March 26, 2010 5:52 AM
Answer

S. Glatt

Rank: New Member

Posts: 4

Join Date: March 26, 2010

Recent Posts

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
RE: successful dojo use in Liferay portlets?
June 12, 2010 10:55 AM
Answer

Jack Bakker

Rank: Liferay Master

Posts: 882

Join Date: January 3, 2010

Recent Posts

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

1
2<script type="text/javascript" src="/html/js/dojo/1.4/dojo/dojo.js" djConfig="parseOnLoad: true">
3</script>
4<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

1
2<script type="text/javascript">
3    dojo.require("dijit.form.DateTextBox");
4</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

1
2<s:form action="someAction" method="POST">
3<s:textfield label="FROM" key="dateFromStr" required="false" dojoType="dijit.form.DateTextBox"/>
4<s:textfield label="TO" key="dateToStr" required="false" dojoType="dijit.form.DateTextBox"/>
5<s:submit/>
6</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

 1
 2<s:form action="someAction" method="POST" theme="simple">
 3<table>
 4<tr>
 5<td><s:textfield label="FROM" key="dateFromStr" required="false" dojoType="dijit.form.DateTextBox"/></td>
 6<td><s:textfield label="TO" key="dateToStr" required="false" dojoType="dijit.form.DateTextBox"/></td>
 7</tr>
 8<tr>
 9<td colspan="2" align="right">
10<s:submit/>
11</td>
12</tr>
13</table>
14</s:form>
Garrett Reimer
RE: successful dojo use in Liferay portlets?
July 15, 2010 12:01 PM
Answer

Garrett Reimer

Rank: New Member

Posts: 1

Join Date: July 15, 2010

Recent Posts

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
RE: successful dojo use in Liferay portlets?
February 15, 2011 4:50 AM
Answer

Vikrant Mahajan

Rank: New Member

Posts: 1

Join Date: February 9, 2011

Recent Posts

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
RE: successful dojo use in Liferay portlets?
May 10, 2011 11:44 AM
Answer

Chris Schulz

Rank: New Member

Posts: 2

Join Date: May 2, 2011

Recent Posts

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:
 1<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
 2
 3<portlet:defineObjects />
 4
 5<button id="progButtonNode" type="button"></button>
 6<div id="result1"></div>
 7
 8<button dojoType="dijit.form.Button" type="button">
 9    Click me too!
10    <script type="dojo/method" event="onClick" args="evt">
11        // Do something:
12        dojo.byId("result2").innerHTML += "Thank you! ";
13    </script>
14</button>
15<div id="result2"></div>


Updated liferay-portlet.xml to include dojo:
 1    <portlet>
 2        <portlet-name>dojo-test</portlet-name>
 3        <icon>/icon.png</icon>
 4        <instanceable>true</instanceable>
 5        <header-portlet-css>/js/dojo/dijit/themes/soria/soria.css</header-portlet-css>
 6        <header-portlet-javascript>/js/dojo/dojo/dojo.js</header-portlet-javascript>
 7        <header-portlet-javascript>/js/main.js</header-portlet-javascript>
 8        <css-class-wrapper>dojo-test-portlet</css-class-wrapper>
 9    </portlet>


And added the following in main.js:
 1
 2dojo.require("dijit.form.Button");
 3dojo.require("dojo.parser");
 4
 5dojo.addOnLoad(function() {
 6     document.body.className += ' soria ';
 7     dojo.parser.parse();
 8
 9    // Create a button programmatically:
10    var button = new dijit.form.Button({
11        label: "Click me!",
12        onClick: function() {
13            // Do something:
14            dojo.byId("result1").innerHTML += "Thank you! ";
15        }
16    },
17    "progButtonNode");
18   
19    init();
20});
21   


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
RE: successful dojo use in Liferay portlets?
May 8, 2012 9:47 AM
Answer

Kirk Stork

Rank: Junior Member

Posts: 29

Join Date: May 19, 2010

Recent Posts

I've done this in liferay-portlet.xml

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


which results in the page head element containing:

1 <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

1
2<script>
3require(["dojo/dom", ...
4</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:

1
2<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
3               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?