1

I want to show jFreeChart generated SVG grapics in my JSP portlet. The size of the image should be as wide as the portlet and the height a fixed factor of the width.

I solved the problem but I wonder if there is a better way to accomplish the same task.

What I do:

  1. Define an invisibel element to find the portlet after rendering

    <div id="<%= myPortletNamespace %>test" style="display: none;"></div>
    
  2. Define a trigger which fires when rendering is complete and the width of my portlet is set. Here I find the afore mentioned element, check it's size, resize the table containing the graphic and make a resource call to get the graphic.

    Liferay.on('allPortletsReady',
        function() {
           AUI().use('node', function(A) {
                var test = A.one('#<%= myPortletNamespace %>test');
                var parent = test.ancestor('.portlet-body');;
                if (parent != null){
                    var table_width = parent.get('offsetWidth');;
                    <%= myResize %>(table_width);
                    <%= myGetTableCharts %>();
                }
           });
        }
    );
    

One problem is the trigger seems to fire three times which might become a performance problem.

Any better way to do this ?

Pandiyan Cool
  • 6,381
  • 8
  • 51
  • 87
  • why dont give 100% width? it will be bounded to portlet boundary and 100% is from or relative to portlet so if portlet is placed on page, based on the layout you selected, your image will take up 100% of width, so image will be displayed as size of portlet – Pritesh Shah Aug 13 '13 at 09:30
  • I want to calculate the height of the image using the width. But the width changes during rendering of the complete page. So if my portlet is on the left side it will have 100% of the complete space at the moment of rendering. But it will be smaller after the portlet on the right column is also rendered, – Volker Demel Aug 13 '13 at 15:47

1 Answers1

0

You could try the below code:

AUI().use(
    'node',
    function(A) {
        var onResizeFunc = function() {
            // my code.
        }

        A.getWin().on('resize', onResizeFunc);

        onResizeFunc();
    }
);

This has the added benefit of recalculating when the user resizes their browser. One thing that could defeat this is that if the render changes at any point after the document is rendered.

rp.
  • 3,435
  • 1
  • 21
  • 29