September 23, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Hacking the Weblogic Portal UI Framework

  • February 28, 2006
  • By Scott Nelson
  • Send Email »
  • More Articles »

There's nothing like the feeling of the first production release of a new portal. After weeks or months of hard work and long hours, the application you and your team have put their heart, soul, and talent into is being accessed by real users. E-mails fly around the network with congratulations and the textual equivalents of oohs and ahhs. Your audience is applauding and thanking you for putting many disparate enterprise pieces into one place for easy access and integration. And what makes this euphoria so wonderful is that it only lasts until the first person asks the inevitable portal questions "Can we add this?" And you know they're right to ask for it. Back to work.

This article will present some useful hacks of the BEA portal that will give your users functionality that they want and the extensibility that you crave.

Customizing the Titlebar: 3 Features Your Users Will Love

Okay, so if you are already using all of the built-in titlebar functionality, the last thing you want to do is to put more icons there. That disclaimer out of the way, if you are using all of them, you probably want to re-examine your design. Take a look at the functionality you have built in:

  • Minimize: If there are so many portlets on the page that the user wants to minimize some to clearly see others, it would probably be better to break them up into separate pages (and with your extra navigation hack up your sleeve, you can).
  • Maximize: This is sometimes useful in a multi-column layout, though it is usually more user friendly to go to a single column layout.
  • Delete: This icon doesn't store as a user preference without a bunch of coding, so you annoy the user by having it come back every time, not to mention they have to start a new session if they actually want it back.
  • Help: No doubt about it, this is useful to have.

So, it looks like you have only one icon in the titlebar that users will like. You can give them two more that they will actually use.

Print Me All by Myself

Remember when the paperless office was right around the corner? Like space exploration, that corner seems to be a lot longer than we thought. Whether you agree that printouts of Web pages should already be as quaint as gas-fueled street lights, portal users still hit the print icon all the time. And, except for expense reports and travel plans, what they really want to print out is just one part of the page: a single portlet. As developers, are job is to give the people what they want, whether we think it sane or not. So, here's how you print a single portlet.

This hack depends on naming conventions. For whatever reason, the naming used out of the box won't do the trick, but changing the frameworks use of IDs doesn't effect the application itself, so what the heck? Starting with the window.jsp in your skeletons path, find the following line:

<render:writeAttribute name="id"
   value="<%= window.getPresentationId() %>"/>

Here, you just need to change the ID value to window.getDefinitionLabel() because it is accessible in all version of the portal from anywhere where you have the Window context.

Now that you have a handle on the portlet, you can create a short script that will open a printable page.

function printPortlet(appPath, portletId, portletName)
{
   var pageString = appPath+'/resources/jsp/
      printPage.jsp?portletId='+portletId;
   var printWindow = window.open(pageString, 'PrintPage',
      "location=no,scrollbars=no,resizable");
   printWindow.focus();
}

The above script should live in a .js file so that only a single copy is loaded per page.

Next, open titlebar.jsp and find:

<td class="bea-portal-window-titlebar-buttons"
    nowrap="nowrap">

Inside this empty TD (populated by the BEA icons), put your print icon and a call to your script, passing in the parameters dynamically for portability:

<img src="<render:getSkinPath
     imageName="printerIcon.gif" />"
     style="cursor:pointer; position:relative; top:-2px"
     onclick="printPortlet('<%=request.getContextPath()%>',
        '<%=window.getDefinitionLabel()%>')">

Which result in your new icon your users' titlebar:



Click here for a larger image.

Finally, you need to create your print page to make the icon do something useful. Because the page is not part of the portal context, you'll need to hard-code your style references. Also, due to the inheritance features of the nested DIVs in the the standard framework, you'll need some of the HTML normally rendered for you, followed by your script to render and print the portlet:

<%@ page language="java"
    contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="netui-tags-html.tld" prefix="netui"%>
<netui:html>
   <head>
      <title>
         Portlet Print Page
      </title>
      <meta name="bea-portal-meta-skin"
            content="/framework/skins/default"/>
      <meta name="bea-portal-meta-skin-images"
            content="/framework/skins/default/images"/>
      <link href="/snelsondemo/framework/skins/default/
                   css/body.css"
            rel="stylesheet" type="text/css"/>
      <link href="/snelsondemo/framework/skins/default/
                   css/button.css"
            rel="stylesheet"
            type="text/css"/>
      <link href="/snelsondemo/framework/skins/default/
                   alert/css/window-alert.css"
            rel="stylesheet"
            type="text/css"/>
      <link href="/snelsondemo/framework/skins/default/
                   css/window.css"
            rel="stylesheet"
            type="text/css"/>
      <link href="/snelsondemo/framework/skins/default/
                   plain/css/window-plain.css"
            rel="stylesheet"
            type="text/css"/>
      <link href="/snelsondemo/framework/skins/default/
                   css/portlet.css"
            rel="stylesheet"
            type="text/css"/>
      <link href="/snelsondemo/framework/skins/default/
                   css/book.css"
            rel="stylesheet"/>
      <link href="/snelsondemo/framework/skins/default/
                   css/layout.css"
            rel="stylesheet"
            type="text/css"/>
      <link href="/snelsondemo/framework/skins/default/
                   css/form.css"
            rel="stylesheet"
            type="text/css"/>
      <script type="text/javascript"
              src="/snelsondemo/framework/skins/default/js/
              menu.js"></script>
      <script type="text/javascript"
              src="/snelsondemo/framework/skins/default/js/
                    util.js"></script>
      <script type="text/javascript"
              src="/snelsondemo/framework/skins/default/js/
                    delete.js"></script>
      <script type="text/javascript"
              src="/snelsondemo/framework/skins/default/js/
                    float.js"></script>
      <script type="text/javascript"
              src="/snelsondemo/framework/skins/default/js/
                    menufx.js"></script>
      <script type="text/javascript"
              src="/snelsondemo/framework/skins/default/js/
                    skin.js"></script>
      <style type="text/css">
         .bea-portal-window-titlebar-title{font-weight:bold}
      </style>
   </head>
   <body class="bea-portal-body">
      <div class="bea-portal-book-primary">
         <div class="bea-portal-book-primary-content">
            <div class="bea-portal-book-primary-page"
                 style="margin-right:10px">
               <div id="portletHtml"
                    class="bea-portal-window">
               </div>
            </div>
         </div>
      </div>
      <script language="JavaScript">
         var portletId = '<%=request.getParameter("portletId")%>';
         document.getElementById('portletHtml').innerHTML =
            self.opener.document.getElementById(portletId).
            innerHTML;
            window.print();
      </script>
   </body>
</netui:html>

Reading the markup and code above, you'll see that our definition label has been carried along is now used to populate our pop-up with just the portlet, leaving out the rest of the page for printing, like this:



Click here for a larger image.

There are refinements you can make to the print page, such as disabling links or feeding the page to a hidden iFrame and calling print for the user. If there are enough readers who ask for the specifics for these tweaks, I'll write them in a follow-up article.





Page 1 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel