Cool Portlets in Dojo
Posted by Shane O'Sullivan on March 11, 2009
I’ve been working on writing Portlets for the Dojo Ajax Toolkit for a while now, and they’re almost ready.
You can see a demo of it at http://www.skynet.ie/~sos/misc/dojo/dojox/widget/tests/test_PortletInGridContainer.html?theme=soria
A Portlet is similar to a dijit.TitlePane, in that it has a title bar, a content area, and is collapsible. However, it should also have the option of being configurable, perhaps using a dialog box or an expandable area. A nice example is the BBC website at http://bbc.co.uk, or the Google Portal http://www.google.com/ig.
Portlets are generally presented in a draggable grid, and a very cool new addition to Dojo is the dojox.layout.GridContainer, which provides this framework.
A number of types of Portlets and Setting widgets will be provided, hopefully in v1.4 (1.3 is in final beta, so this is too late for that).
- dojox.widget.Portlet – this is the basic Portlet, which provides a close button, a collapse button, and a settings button. All of these are optional.
- dojox.widget.FeedPortlet – this Portlet loads an external Atom or RSS feed and displays it as a list. Hovering over an item shows a dijit.Tooltip with a summary of the news story.
- dojox.widget.ExpandableFeedPortlet – similar to FeedPortlet, but instead of using tooltips, a toggle icon is used to show more or less of a news story.
- dojox.widget.PortletSettings – a widget that can be placed inside a Portlet to provide customizable settings for that widget.
- dojox.widget.PortletDialogSettings – like PortletSettings, but the configuration options are displayed in a dijit.Dialog.
- dojox.widget.PortletFeedSettings – provides one or more URLs to Atom or RSS feeds for a FeedPortlet to load.
These widgets offer pretty large set of functionality, which should be sufficient for the majority of peoples needs. However, this is still in active development, and if you have any ideas for cool additions or changes I could make, please let me know.
This entry was posted on March 11, 2009 at 11:54 pm and is filed under Ajax, Atom, Calendar, chart, charting, Date Picker, demo, dijit, Dojo, dojo.charting, dojo.data, dojox, open source, widget. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Dom Derroen said
Hi Shane,
I’m really impressed by the demo and the proposed updates for 1.4!
I’ve been a big fan of Dojo since 0.4. I really like how it evolves, how strong is its community, how clear are the guidelines. For now, I mostly to use it to render quickly and nicely data I gather over REST APIs. I never had a chance to address the continuous requirement of putting them in a trendy dashboard framework (for me, data are more important than the UI, and if I just want to get them fast enough before thinking about cool UIs
.
Your update make my day because I can see that I’ll have all support from Dojo to build an out-of-the-box portal. Many requirements will be met magically!
Thank you,
A+, Dom
redking said
Hey,
Excellent demo and I look forward to seeing them in 1.4!
One question – will these widgets be compliant with the Portlet API spec (JSR168, JSR286)?
Shane O'Sullivan said
Hi Redking,
The JSR specs are Java specific documents, that deal more with the server side implications of being able to move a full portlet application between different J2EE environments.
The portlets I have written are just for the client – side representation, and have no ties to any server backend. A J2EE portlet application can certainly use them to draw itself in the browser, but so can a PHP, Ruby ….. etc backend.
So, long story short, no, these portlets have nothing to do with Java specifications.
Shane
redking said
Yep, I suspected that the JSR specs were mostly server-side only – I’ve only just started working with them.
I’m not sure if this impacts on your implemementation but one thing tohowever is that the JSR recommends certain CSS class names for various client-side elements, to allow them to be properly styled when republished in other locations. See the appendix “CSS Style Definitions” in JSR 168.
Anyway, I’ll give your widgets a try once they make it into the source. They look excellent!
Chris said
Demo looks great! I am looking forward to this.
Mike said
great job, dijits are looking really cool. no source yet?
thanks!
Shane O'Sullivan said
Thanks Chris & Mike,
1.3 was tagged just a day or two ago, so hopefully this will make its way into the nightlies soon. When it is, I’ll write another post announcing it.
Shane
Niall said
well cool
been working on dojox charting recently
and this will make a nice dashboard for
showing off those charts
thanks
Niall
Shane O'Sullivan said
Hi Niall,
Yes, it’s quite a good way to showcase multiple different widgets/charts. It also proved to be a good way of finding layout bugs in different widgets.
If you use it to write chart demos, it’d be cool if you made the PortletSettings dialog do something useful, rather than the simple demo stuff in most of my portlets – changing chart type, data ranges etc.
Perhaps you could also write some chart-specific child widget of PortletSettings, e.g. a DataChartPortletSettings widget, for changing the new data chart?
By the way, where are all you guys seeing a reference to this post? It’s been up for two weeks, and just now people are seeing it.
Shane
Chris said
I ran across your site from the links in dojocampus.org and I was trying to do this exact thing so it caught my eye
Mike said
thanks for the update Shane. I’ve just created my own dijit, very similar to yours (extended) dijit.titlePane)..now looking towards the docking/dnd thing. thanks again mate.
Chris said
It might help if on mousedown on a title pane’s title area if the portlet view could be shown offset to the right slightly (5px or so), so that there’s some visual feedback to the user that the portlet is ready to be dragged. This is similar to what igoogle does on their site and seems to work well.
Shane O'Sullivan said
@Chris,
That’s not a bad idea. However, I’d like to get the initial code checked in, and then people can discuss what they want added.
Thanks
Shane
Thorsten Marx said
Hi,
are there any news when this will be part of the dojotoolkit?
Shane O'Sullivan said
It should definitely be in for 1.4. No new features are allowed into the 1.3.x releases, as they are for bug fixes only.
Thorsten Marx said
nice to hear.
i hope we haven’t wait to long for the next release. But v1.3 isn’t very old, so lets see.
Neel said
Hi Shane,
I have seen your example. It is very nice. I also have similar implementation. In my requirement, I have to set a cookie upon portlet drag and drop to remember its new position in the Grid container. I dont know how to identify the drop of portlet in grid container..
Can you please let me know hot to achive this..
Thanks,
Neel
Neel said
I have seen your example. It is very nice. I also have similar implementation. In my requirement, I have to set a cookie upon portlet drag and drop to remember its new position in the Grid container. I dont know how to identify the drop of portlet in grid container..
Can you please let me know how to achive this..
Thanks,
Neel
Shane O'Sullivan said
@Neel,
I’m not sure how to do that right now – GridContainer doesn’t seem to have a simple function that provides this information.
I might look into it further for my portlets, and if I figure it out, I’ll comment here.
Shane
Mike said
->Neel
check this out :
I think answers to your questions can be found there
Shane O'Sullivan said
@Mike,
That link just tells you how to listen for drop events. The unknown part is ‘where’ it was dropped – what index in what column of the GridContainer.
Shane
Mike said
mea culpa! I thought he is looking for the target only…
Cool Portlets added to Dojo! « SOS said
[...] To see a description of what they can do, see my original post announcing them at http://shaneosullivan.wordpress.com/2009/03/11/cool-portlets-in-dojo [...]
james said
Nice! If you can make it a lot more responsive (when panels are dragged) and generally faster to load initially that would be cool. When dragging the panels there is a delay and the cursor moves to the far left of the panel making it really hard to re-position. Customisable content (select from a list or choose via tick boxes like bbc) would be amazing! Thanks.
Shane O'Sullivan said
@James,
With regards to the loading, when the page is optimized using concatenated and compressed JavaScript files, this will be far far faster. It’s just that the demo page is using the source code directly, and I’m loading half the Dojo toolkit to show off as many items as possible.
For the dragging issues, that code belongs to someone else, so if you could open a ticket at bugs.dojotoolkit.org , user/password is guest/guest, we might hopefully get to that before 1.4.
Not sure what you mean by customisable content though – you can put whatever you want into the portlets.
Mike said
Shane, what will you use for compressing the javascript files? ShrinkSafe? I’ve never done that before so I’d welcome some tips n tricks. thanks much.
Shane O'Sullivan said
@Mike,
You can use the Dojo build system, see http://dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo/package-system-and-custom-builds for more details
Mike said
Mike said
Shane, I’d like to ask you for an advice on some minor ‘issue’ with the gridcontainer. I too have created some widgets (custom taskPanels) that I’m plugging in the grid container. Very similar to what you can found on your test page. But I’ve noticed, that hovering over the taskPanel (or portlet in your solution) show cursor always as pointer, even over the inner content. this is thanks to ‘dojoDndItem’ class that is gets. Do you have any idea on how to get rid of this behavior?
thanks heaps.
-m
Shane O'Sullivan said
Hi Mike,
Try adding the following CSS style to your page
.soria .dojoDndItemOver .dijitTitlePaneContentOuter {
cursor: auto;
}
Thanks for pointing it out, I’ll probaby put it into the Dojo styles.
Shane
Cosmo said
How are you able to get each content pane to align top and left? When I implement a GridContainer my content panes align center and left. I finally gave up on GridContainer and used a table. In the table I could specify this by using valign=”top” and align=”left”. Is there a way to do this with GridContainer or the ContentPanes within the GridContainer? I’m using version 1.2.3 of dojo. Maybe that is the problem.
Suresh said
How to change the Portlet title dynamically? If the user selects “Dojo Blatherings” the title should be changed to “Cool Blogs-Dojo Blatherings”, if the user selects “Ajaxian” the title should be displayed as “Cool Blogs-Ajaxian”.
Shane O'Sullivan said
Suresh,
You would have to listen for the setting of the “selectedIndex” attribute, and set the title based on that.
Take a look at the dojox/widget/tests/test_PortletInGridContainer.html file, at the “Cool Blogs -> Remembering Your Selection” portlet. That shows you how to add a listener to the “attr()” function.
Change the HTML to this:
<script type=”dojo/connect” event=”attr” args=”name, value”>
if(name == “selectedIndex”){
dojo.cookie(this.id + “-selectedIndex”, value);
// Set a custom title when selection changes.
if (this.portlet){
this.portlet.setTitle(“title”, “Cool Blogs – ” + this.text.options[value].innerHTML);
}
}
</script>
I’ve checked in a similar example just now too, thanks for the suggestion.
Suresh said
Hi Shane,
Thanks for the quick response.
When I have used the above code I am getting error “illegal character” @ this.portlet.setTitle(”title”, “Cool Blogs – ” + this.text.options[value].innerHTML);
I have changed the line to this.portlet.setTitle(“Cool Blogs – ” + this.text.options[value].innerHTML); , it works perfect.
Suresh said
I am able to change the Portlet title based on the Selection. But how can I keep the changed title retain even after refresh/reload. On refresh/reload this.portlet is undefined.
Shane O'Sullivan said
You’ll need to put the same code into the postCreate method of the portlet. You can do this by not putting an ‘event’ attribute on the <script> element, e.g
<script type=”dojo/connect”>/
this.portlet.setTitle(”title”, “Cool Blogs – ” + this.text.options[value].innerHTML);
<script>
Kamikaze said
Hi Shane,
So I have a iFrame inside your dojo Portlet (I need the iFrame as the content has Java Applet which code is generated by the Server using a custom/proprietary “CGI”/Web Script tags).
So, in this setup and even when the iFrame content is dojo widgets, if I collapse/minimize the Portlet and then move it to another location in the page, when I un-collapse/restore the Portlet, the Portlet is blank, I need to force a “reload frame” to have it display the content again.
Of course the content is dynamic, set by some custom JavaScript code, but this code also already takes care of its job and it works fine if I just move (drag and drop) the Portlet without collapsing/minimizing it.
How can I define custom JavaScript code to be run when you un-collapse the Portlets?
Thanks in advance,
Shane O'Sullivan said
Hi Kamikaze,
The Portlet publishes a message whenever it is collapsed, expanded or moved, which you can subscribe to using:
dojo.subscribe(“/Portlet/sizechange”, function(widget){
// do something with the widget.
});
If you just want to know when it is expanded, you can connect to the “onEnd” method of the _wipeIn animation, e.g.
dojo.connect(dijit.byId(“myPortlet”)._wipeIn, “onEnd”, function(){
// do something
});
Kamikaze said
Shane,
Make sure I will try this.
I will let you know.
Thanks a lot and please keep up the good work!
Kamikaze said
Shane,
I have not replied to you before because I was trying to make this work.
However, using the “connect – wipeIn – onEnd”, the action seems only to happen when I first load the page (Portlet).
By collapsing / minimizing I meant that down arrow button in the Portlet title bar (1 of the 3 default buttons: collapse (v), settings (?), close (x)).
Is that right?
I also tried “connect – wipeIn – afterExpand” but I guess it was almost the same.
Is the combined sequence of “collapsing – dragging/dropping – expanding” the Portlet too different from just “collapse – expand” or “drag and drop”, in such way that I need manually force a refresh after expand to try to have the content back?
Besides dojo book/dojocmapus and api reference, where can I learn and dig more into this without bugging you?
Anyways.
Thanks,
Shane O'Sullivan said
You can also check out the test file, dojox/widget/tests/test_PortletInGridContainer.html
I’ve done my best to include as many scenarios as possible in that. However, I presume you’ve already seen it.
The docs in the book still needs some work, which I hope to have time for in the coming weeks. If you come up with some good examples that solved your problems, please pass them on and I’ll see if I can include them in the docs.
Kamikaze said
Shane,
No, no, no.
At no circumstance I blame you.
I completely understand you have more a awesome job and went above and beyond.
No worries, buddy.
I just wanted to avoid bugging you… It took sometime before I decided to post here… And I do not want to keep going back and forth with you.
OK, I will keep “hammering” it and see if I can achieve what I want and if so, I will let you know for sure.
Thanks,
Kamikaze said
Shane,
Sorry, it was my bad.
Your initial suggestion does work fine.
So, again, thank you so much.
In any case, I think there still some some not so desired behaviors when you have dynamic widgets/content inside a Portlet when you collapse it, especially if you move it when it is collapsed.
I get some like 2 null errors in the console when the Portlet dynamic content is updated while it is collapsed.
It is probably related with the nodes being detached and reattached and also the display/hide.
Now in my specific case, I also have iFrames inside all these so…
If I can, I will try to simplify this and see how it behaves to see if it a user code or framework enhancement.
Thanks a lot again sir!
Grégory said
Hi Shane,
The demo is very wondeful!
But it doesn’t work on IE 8…
Did you made something about this?
Shane O'Sullivan said
Can you define “doesn’t work”? I haven’t gotten a chance to test in IE8 yet unfortunately
Shane
Grégory said
It doesn’t display anything… (blank page)
Error in IE 8 console for your test page :
‘this.chart’ is null or not an object
dojo.js Ligne:16
Code : 0 Caractère : 15213
URI : http://www.skynet.ie/~sos/misc/dojo/dojo/dojo.js
Shane O'Sullivan said
Ah, right. That looks like a charting problem. There have been reports of breakages in dojox.charting in IE8, something to do with the IE team messing up the VML engine, again.
Take out the charting portlet, and all the other portlets will work just fine.
Shane
Grégory said
I try to take out the charting portlets and all work find!
Thanks a lot for your quick response.
Grégory
muh.nuur said
i’ve seen your demo. it’s great.
but i need help to find some widget like container, but act like a window browser.. you can open and execute web page inside of it and you can exchange web page too.
i’ve seen that widget on dojo0.41 demos, but i can’t separate it from dojo-demos to my project.
can you help me… please.
i’ve been search to any where, but i can’t find any clue…
Grégory said
Hi Shane,
Is there a way to save portlet position for next page access?
Thanks in advance.
Shane O'Sullivan said
Hi Gregory,
You’ll have to save the position yourself. However, you can specify the column to place a Portlet in by setting ‘isAutoOrganized’ to false on the GridContainer, and then setting the ‘column’ attribute on each portlet.
Shane
Ann said
I am interested in this also – do you have any examples on how to save the position? I have been looking at the apis, doc, etc, but it is not clear how I can save and set the position of child widgets in the gridcontainer?
Thanks so much – enjoyed this blog!
Shane O'Sullivan said
The widget does not save the position of the cells for you – to do that you have to look through each of the
You can specify the column to place each widget in by specifying a “column” attribute on each contained widget, and set the “isAutoOrganized” attribute on the GridContainer to false.
Grégory said
Thanks a lot for your quick response.
Pete Hood said
Hi Shane,
This looks great. I have a question in relation to dojox portlets and google social gadgets. It it possible to wrap a google gagdet served up from shingig in a dojox portlet?
Regards
Pete
Shane O'Sullivan said
Hi Pete,
I’m not sure. If the Portlet would simply contain an iframe, then it should work well. I’m not familiar with how shingig loads Google gadgets however.
Pete Hood said
Thanks Shane,
Yeah, at the moment due to our ISV Security story we have google gadgets served up within an iFrame.
Will give it a go and let u know.
Thanks
Pete
Stefano said
Hi… there is some programmatically example? i need to dynamically add and remove portlets from a GridContainer, how to do this?
i tried:
myGridContainer.addService(portlet,0,pi);
it works but drag and drop remain inactive for the new added portlets
so i added:
myGridContainer.startup();
and drag started to work… but i get one more “drop-preview placeholder” any time i call the function to add a portlet (any time i call startup()) this is ugly and also very memory consuming…
so i need a method: shutdown() to call before startup(), but which is?
can you help me?
Matt said
I’ve implemented something similar using an extended titlepane. You must login to see a majority of the “widgets” developed, but you can get a good general idea of how it works by visiting the site (a college portal): https://my.champlain.edu/
Neej said
Hi Matt,
I saw your college portal, looks nice
Have a question here. Currently can a user persist its widget preferences? I mean if as a user If I login and change the positions of my widget and next time when I signin are they intact?
If yes then I would request you to help me in this regard.
Thanks in advance,
Neeraj
Matt said
Thanks Neej. Yes, if a user moves widgets around, their column and position is persisted. I’ve also built in xhr into the widget api, so widget specific preferences can easily be saved/persisted as well. Feel free to contact me if your interested in development details (matthuwiler@gmail.com).
Mike Stoddart said
Very nice! Is the Portal code open source to reference as a learning tool? Thanks
Shane O'Sullivan said
Yes, everything in Dojo is open source
Mike Stoddart said
I mean the code for the portal on https://my.champlain.edu/. Thanks
Shane O'Sullivan said
Mike,
I don’t know who owns that site, so you’d have to contact them
krishna said
Hi Shane,
I liked Dojo TabContainer Upgrade, its really a cool feature that you have added. I would like to implement this code.
How do I go about it.
Thanks
Krishna
Shane O'Sullivan said
Hi Krishna,
The best way to learn is by looking at the Dojo test pages. See the ones for TabContainer at http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/layout/
Shane
Charan said
I need the code , to implement , I have similar req for my Application ,
Neil Cowley said
Hi,
I’m trying to an AccordionContainer inside a portlet without any success – It just won’t render. I’m using dojo 1.4.3. Anyone else had this problem?
Thanks
Neil
Mike said
Hi,
I’m creating a GridContainer dynamically, and adding a FeedPortlet to it. The problem I’m having is that I am not able to move the portlet to another drop zone in the grid (I defined it with nbZones: 3). It works fine with a simple Portlet, however. Is this a bug, or am I doing something wrong?
Thanks,
Mike
shaggy said
Have you figured this out? Every sample that I’ve seen doesn’t allow the drop zones to go to other columns. Or I can’t duplicate. I’ve tried this one (http://www.skynet.ie/~sos/misc/dojo/dojox/widget/tests/test_PortletInGridContainer.html?theme=soria) but it sure doesn’t want to work for me. Is there something programmatic that needs to be done?
Tejo said
Hi, nice portlet sample,
I create one using ajax.google api, but it has weird behaviour
the portlet is moving when i am drag on portlet content. i expect, the portlet only move when i drag the portlet title
this is the app
http://kimjote.appspot.com/doremi