SOS

Shane O'Sullivan's technical blog… really ties the room together

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.

About these ads

72 Responses to “Cool Portlets in Dojo”

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

  2. 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)?

  3. 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

  4. 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!

  5. Chris said

    Demo looks great! I am looking forward to this.

  6. Mike said

    great job, dijits are looking really cool. no source yet? :) thanks!

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

  8. Niall said

    well cool :-)

    been working on dojox charting recently
    and this will make a nice dashboard for
    showing off those charts

    thanks
    Niall

  9. 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

  10. 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 :)

  11. 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.

  12. 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.

  13. @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

  14. Thorsten Marx said

    Hi,

    are there any news when this will be part of the dojotoolkit?

  15. 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.

  16. 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.

  17. 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

  18. 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

  19. @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

  20. Mike said

    ->Neel
    check this out :
    I think answers to your questions can be found there

  21. @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

  22. [...] 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 [...]

  23. 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.

  24. @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.

  25. 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.

  26. @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

  27. Mike said

    :) seems like I’ve overlooked that one… thanks.

  28. 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

  29. 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

  30. 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.

  31. 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”.

  32. 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.

  33. 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.

  34. 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,

      • 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,

    • 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!

  35. Grégory said

    Hi Shane,

    The demo is very wondeful!
    But it doesn’t work on IE 8…
    Did you made something about this?

  36. Can you define “doesn’t work”? I haven’t gotten a chance to test in IE8 yet unfortunately

    Shane

  37. 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

  38. 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…

  39. Grégory said

    Hi Shane,

    Is there a way to save portlet position for next page access?

    Thanks in advance.

  40. 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!

      • The widget does not save the position of the cells for you – to do that you have to look through each of the cells, and recording the positions of the contained widgets.

        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.

  41. Grégory said

    Thanks a lot for your quick response.

  42. 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

  43. 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

  44. 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?

  45. 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/

  46. 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

  47. 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

  48. 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

  49. 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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 533 other followers

%d bloggers like this: