apps-infra

    Forum Stats

  • 3,873,697 Users
  • 2,266,629 Discussions
  • 7,911,601 Comments

Discussions

Using Dojo in a Shell

655513
655513 Member Posts: 18
edited Oct 21, 2008 11:03PM in WebLogic Portal
I'd like to use some Dojo widgets (dijits) as part of my navigation elements for a modified portal shell that we've created (left column holding portlets).

Because the shell is validating against the xhtml-netuix-modified schema, I'm not able to add the dojoType attribute (used for declaring dijits) to the html tags in the shell.

I suppose I could try setting them programmatically, but I'd rather use the declarative form if possible.

Has anyone had success using Dojo's dijits in the Portal 10.2 shell?

Thanks for any help,
Dan Turkenkopf
Tagged:

Best Answer

  • 648832
    648832 Member Posts: 88
    Answer ✓
    Hi Dan,

    The .shell file is used to specify WHERE various child controls of the shell will fall, in the scope of the desktop. For example, you'd modify a .shell file to control the relationship between the header, the footer, and the rest of the content of your page. The actual, HTML implementation of the shell is handled by the shell's skeleton file, which is a JSP. In your particular case, you probably want to add a <div> with your dojoType attribute somewhere within /framework/skeletons/bighorn/shell.jsp, or /framework/skeletons/bighorn/header.jsp.

    Here's an overview of skeletons, as a part of the Look and Feel feature of WLP: http://download.oracle.com/docs/cd/E13155_01/wlp/docs103/portals/develop_ui_lookfeel.html#wp1035267 .

    George
«1

Answers

  • 665334
    665334 Member Posts: 40
    Hi Dan,

    I've not used dijits but if you don't need to have the attributes in the html elements themselves but instead include div:s with dojo attributes in the shell then maybe you could just use a <netuix:jspContent contentUri="dojoContent.jsp"> in the relevant places in the shell definition and then inlining the necessary divs and whatnot in the .jsp files? At least on 10.3 there is a sample leftPaneHeaderFooter.shell that includes a leftpane.jsp where you can dump whatever stuff you need. The included jsp content won't be validated against the schema.

    Just a thought, good luck :)

    Best regards,
    Petri
    665334
  • 648832
    648832 Member Posts: 88
    Answer ✓
    Hi Dan,

    The .shell file is used to specify WHERE various child controls of the shell will fall, in the scope of the desktop. For example, you'd modify a .shell file to control the relationship between the header, the footer, and the rest of the content of your page. The actual, HTML implementation of the shell is handled by the shell's skeleton file, which is a JSP. In your particular case, you probably want to add a <div> with your dojoType attribute somewhere within /framework/skeletons/bighorn/shell.jsp, or /framework/skeletons/bighorn/header.jsp.

    Here's an overview of skeletons, as a part of the Look and Feel feature of WLP: http://download.oracle.com/docs/cd/E13155_01/wlp/docs103/portals/develop_ui_lookfeel.html#wp1035267 .

    George
  • 655513
    655513 Member Posts: 18
    edited Oct 16, 2008 10:53AM
    Thanks George,

    We'll look into that. I see from the documentation that we can use HTML tags inside the skeleton JSPs. It definitely wasn't clear from the out of the box Bighorn shell.jsp that we could include HTML.

    Regards,
    Dan

    Edited by: dturkenk on Oct 16, 2008 10:53 AM
  • 655513
    655513 Member Posts: 18
    Thanks Petri,

    We were able to get that working, at least in terms of putting HTML tags into a JSP. Looking at George's answer, the skeleton seems to be the preferred place to put things, so we're going to head down that path.

    Thanks again for the response,
    Dan
  • 655513
    655513 Member Posts: 18
    Hi George,

    Are you aware of a way to embed a given portlet within the skeleton jsps?

    It's something we can definitely do directly in the shell, but that makes it so we can't use the dijits.

    Thanks for the help,
    Dan
  • 648832
    648832 Member Posts: 88
    Hi Dan,

    Hmm, I'm not sure that's something you'd want to do. Could you explain your use case a little bit more, please? Maybe there's another solution.

    George
  • 655513
    655513 Member Posts: 18
    Hi George,

    Sure thing.

    We currently have two navigation type portlets that we've embedded into our shell on the left hand side of the screen so that they show up on every page.

    Unfortunately we're running into a bit of a space issue, so we'd like to do two things. We'd first like to make the entire left navigation column collapsible through Javascript. Second, we'd like to use a [ Dojo Accordion Container|http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/accordion-container] and embed a portlet in each one of the accordion panes - so that we only see one at a time.

    We'd still like for that navigation pane to show up on every page - which suggests somehow putting it into the framework. Using custom HTML and Dojo seems to indicate it should be in the skeleton or in some JSP content. But embedding the portlets seems to suggest it needs to be in the shell. So I'm thoroughly confused :-).

    Thanks for your help to this point and any suggestions you've got with this scenario.

    -- Dan
  • 648832
    648832 Member Posts: 88
    Thanks for clarifying your use case. Sounds awesome!

    It sounds like your left-hand navigation piece should be a netuix:header component. Header's can contain netuix:layouts, and netuix:layouts can contain placeholders and portlets. Also, even though it's called a "header", it doesn't have to be at the top of your document -- you can modify the body.jsp skeleton file to change where the header renders in relation to everything else on the page. Something like this:

    <skeleon:context type="bodypc">
    <skeleton:control name="body" presentationContext="${bodypc}">
    <!-- set up HTML structure of page -->
    <table>
    <tr>
    <td style="width: 30%;">
    <skeleton:child presentationContext="${bodypc.headerPresentationContext}"/>
    </td>
    <td>
    <skeleton:children/>
    </td>
    </skeleton:control>
    </skeleton:context>

    This says "render the header control in the first table cell, and the rest of the body's children controls in the second table cell". So something like this would help you handle WHERE the header is, in relation to everything else on the page.

    Next step is to control what's in the header. For that, you'd modify the .shell file itself, and add a layout, placeholder, and portlets to it. You can use Workshop's Shell Editor to help there: http://download.oracle.com/docs/cd/E13155_01/wlp/docs103/portals/develop_ui_lookfeel.html#wp1060001. In your case, I think you'd want to use a one-column flow layout (so that your portlets flow vertically) and add your two portlets to it.

    Last step is to add Dojo to the mix. I'd add the Dojo JS file(s) as a dependency to your portlets (http://download.oracle.com/docs/cd/E13155_01/wlp/docs103/portlets/building.html#wp1073505), so that Dojo is always available to the page when those portlets are present. Then, you can modify the header.jsp skeleton to add the Dojo hooks for the expand/collapse functionality. The accordion-ing of the portlets might be a little trickier, since all portlets use the same window.jsp skeleton file, but I'm sure something similar to the shell solution could be done there, too -- maybe with some selection logic in place to enable the functionality only on portlets with a particular definition label.

    I hope that helps! Let us know how it goes!

    George
    648832
  • 655513
    655513 Member Posts: 18
    Thanks George!

    We're still trying to digest your advice and try it out. I'll let you know how it turns out.


    Regards,
    Dan
  • 655513
    655513 Member Posts: 18
    Hi George,

    The line: <skeleton:child presentationContext="${bodypc.headerPresentationContext}"/> fails because it can't find a getHeaderPresentationContext method on the bodypc.

    I also tried <skeleton:child presentationContext="<%= bodypc.getFirstChild("header") %>"/> but I'm not sure what the tag name to provide is. I've also tried "headpc" there.

    Thanks again for your help,

    Dan
This discussion has been closed.
apps-infra