5 Replies Latest reply: Mar 13, 2012 6:51 AM by donino doninos RSS

Portlet 286 edit mode not displayed correctly in the page editor

donino doninos Newbie

Hi,

 

I work on this portlet 286 birt report viewer project. This portlet uses jquery UI, and the javascript and css are invoked with the portlet 2.0 doHeaders method. It works perfectly in the view mode and the standard edit mode, but i encounter an issue with the edit mode displayed in the page editor, as described in the picture below: in this dialog the jquery css seem cancelled by a gatein script action, i cant see what's going on.

 

I verified in the logs the doHeaders method is correctly invoked in this page editor, and i can see all the necessary javascript and css files in the html markup header. Furthermore i have checked that the javascript in charge to intialize the jquery widgets is also executed  without any error. In fact, everything seems ok i don't understand why the jquery css are not used. I tried with 3.2CR01, on tomcat 6, 7 and jboss 6, same behavior.   And it works correctly with Jboss Enterprise Portal 5.2

 

Is it a known issue? Should i log a bug for this? What action is performed by this gatein dialog when we click on a tab header? Any ideas/suggestions would be much appreciated!

 

Thanks

 

editmodeIssue.png

  • 1. Re: Portlet 286 edit mode not displayed correctly in the page editor
    Marko Strukelj Master

    Unfortunately the way you described your problem isn't quite enough to pinpoint the exact cause. You say that the problem occurs in 3.2.CR01 (probably GateIn trunk as well?) while it works fine in EPP-5.2. There have been many changes between these two branches...

     

    First I suggest that you try with trunk, and see if you get the same problem, then try with different browsers to see if behaviour is the same in them all.

     

    Then I suggest you use latest Firefox debug tools, or Firebug plugin to determine in what way CSS becomes broken - if at all. Is it some kind of CSS selector collision, element class names collision, clashing ids or something like that. Or maybe it is some broken HTML that causes invalid rendering ...

     

    So, try to get closer to the problem, and maybe then we can find a bug and fix it.

  • 2. Re: Portlet 286 edit mode not displayed correctly in the page editor
    donino doninos Newbie

    Thanks for your response Marko,

     

    My first concern on this issue was to know if you already experienced this behaviour on other portlets, especially with portlets using a jQuery css selector. Thanks to your response, it appears this is not a known issue. I should be able to investigate more deeply and follow your suggestions this friday, i will let you know the results as soon as possible.

     

    Dominique

  • 3. Re: Portlet 286 edit mode not displayed correctly in the page editor
    donino doninos Newbie

    Well, i have something:

     

    I tried on IE, Firefox, Chrome, Safari, Opera and the result was the same. Incidentally, in my context Gatein UI has issues with opera, especially for popup menus.

    I also tried with the trunk gatein, the issue still occurs.

     

    To investigate, I built a very simple edit.jsp for my portlet:

     

    <%@page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>

    <div class="visioneo-redmond">

        <div class="ui-widget-header">

            This is the portlet edit mode !

        </div>

    </div>

     

    In this jsp, "visioneo-redmond" is my css selector for jQuery, and "ui-widget-header" is a standard jQuery UI class name.

    I got the same behaviour: the "ui-widget-header" was not applied when i was in the gatein page editor.

     

    Although i am absolutely sure the doHeaders method is correctly invoked,  I found a workaround by including directly the css within this jsp:

     

    <%@page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>

    <%@taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>

     

    <portlet:defineObjects/>

    <link rel="stylesheet" type="text/css" href="<%=renderRequest.getContextPath()%>/resources/css/visioneo-merged.0.9.0.css" />

     

    <div class="visioneo-redmond">

        <div class="ui-widget-header">

            This is the portlet edit mode!

        </div>

    </div>

     

    This time it works. Finally in the real edit.jsp i included the merged javascript file too, else i had an issue "jQuery function unknown" when the page was refreshed, after a portlet action submit. I don't really like this workaround, i prefered managing the resource files with doHeaders, but it works. And finally i must keep including the resources file in the doHeaders too: if i don't, the css and js won't work on a new page creation, when we drag the portlet from the application list to the new page. That's a bit confusing.

     

    May be i misunderstood something about the doHeaders method, but i think there is a bug somewhere when using the page editor. I suppose it doesn't occur for standard gatein portlets because their resource files may be loaded at a portal level, and not with doHeaders?  It can be easily reproduced with a very simple portlet such HelloWorld using one single css resource. However i'm not sure i will be able to give more details. Should i log a JIRA entry for this?  

  • 4. Re: Portlet 286 edit mode not displayed correctly in the page editor
    Trong Tran Master

    This is definitely a bug, so you could log a JIRA issue for this.

     

    A short explanation of this bug is that portal does not handle correctly the html markup headers from the portlet response.

  • 5. Re: Portlet 286 edit mode not displayed correctly in the page editor
    donino doninos Newbie

    Thanks Trong, the issue has been logged as GTNPORTAL-2374