Fóruns

Início » Liferay Portal » English » 3. Development

Visualização combinada Visão plana Exibição em árvore
Tópicos [ Anterior | Próximo ]
toggle
Michael E Los
successful dojo use in Liferay portlets?
3 de Outubro de 2008 13:10
Resposta

Michael E Los

Ranking: New Member

Mensagens: 1

Data de entrada: 3 de Outubro de 2008

Mensagens recentes

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?
7 de Outubro de 2008 13:00
Resposta

Alice C Wang

Ranking: New Member

Mensagens: 1

Data de entrada: 7 de Outubro de 2008

Mensagens recentes

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?
4 de Março de 2010 12:10
Resposta

Jack Bakker

Ranking: Liferay Master

Mensagens: 598

Data de entrada: 3 de Janeiro de 2010

Mensagens recentes

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?
26 de Março de 2010 05:52
Resposta

S. Glatt

Ranking: New Member

Mensagens: 4

Data de entrada: 26 de Março de 2010

Mensagens recentes

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?
12 de Junho de 2010 10:55
Resposta

Jack Bakker

Ranking: Liferay Master

Mensagens: 598

Data de entrada: 3 de Janeiro de 2010

Mensagens recentes

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?
15 de Julho de 2010 12:01
Resposta

Garrett Reimer

Ranking: New Member

Mensagens: 1

Data de entrada: 15 de Julho de 2010

Mensagens recentes

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?
15 de Fevereiro de 2011 04:50
Resposta

Vikrant Mahajan

Ranking: New Member

Mensagens: 1

Data de entrada: 9 de Fevereiro de 2011

Mensagens recentes

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?
10 de Maio de 2011 11:44
Resposta

Chris Schulz

Ranking: New Member

Mensagens: 2

Data de entrada: 2 de Maio de 2011

Mensagens recentes

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?
8 de Maio de 2012 09:47
Resposta

Kirk Stork

Ranking: Junior Member

Mensagens: 29

Data de entrada: 19 de Maio de 2010

Mensagens recentes

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?