Javascript error with borderlayout

[GoogleCodeExporter]

Hi,

I have created this very simple test file that shows the problem:

<zk>
    <borderlayout>
        <north>
            <vbox>
                <button label="1" />
                <button label="2" />
            </vbox>
        </north>
        <center flex="true">
            <gmaps hflex="true" vflex="true"/>
        </center>
        <south>
            <vbox>
                <button label="1" />
                <button label="2" />
            </vbox>
        </south>
    </borderlayout>
</zk>

The map doesn't show. Instead I can see a javascript error in firebug (the 
error happens in chrome as well):

"f is undefined"

The javascript line where this error happens is line 2 in zul.layout.wpd this 
are its contents:

(function(){var 
c={north:function(f,e,g,d){f.w=g-f.w;e.y=f.ts;e.h-=f.ts},south:function(f,e,g,d)
{f.w=g-f.w;f.y=d-f.y;e.h-=f.ts},east:function(e,d,f){e.y+=d.y;e.h=d.h-e.h;e.x=f-
e.x;d.w-=e.ts},west:function(e,d){e.y+=d.y;e.h=d.h-e.h;d.x+=e.ts;d.w-=e.ts}};fun
ction b(h,k,e){if(!h){return 0}var 
j=h.$n("real"),f=k?"offsetWidth":"offsetHeight",d=j[f];if(e){var 
i=h.$n("colled"),g=h.$n("split");if(i){d+=i[f]}if(g){d+=g[f]}}return d}var 
a=zul.layout.Borderlayout=zk.$extends(zul.Widget,{_ignoreOffsetTop:zk.ie<8,setRe
size:function(){this.resize()},onChildAdded_:function(e){this.$supers("onChildAd
ded_",arguments);var 
d=zul.layout.Borderlayout;if(e.getPosition()==d.NORTH){this.north=e}else{if(e.ge
tPosition()==d.SOUTH){this.south=e}else{if(e.getPosition()==d.CENTER){this.cente
r=e}else{if(e.getPosition()==d.WEST){this.west=e}else{if(e.getPosition()==d.EAST
){this.east=e}}}}}this.resize()},onChildRemoved_:function(d){this.$supers("onChi
ldRemoved_",arguments);if(d==this.north){this.north=null}else{if(d==this.south){
this.south=null}else{if(d==this.center){this.center=null}else{if(d==this.west){t
his.west=null}else{if(d==this.east){this.east=null}}}}}if(!this.childReplacing_)
{this.resize()}},getZclass:function(){return 
this._zclass==null?"z-borderlayout":this._zclass},bind_:function(){this.$supers(
a,"bind_",arguments);zWatch.listen({onSize:this})},unbind_:function(){zWatch.unl
isten({onSize:this});this.$supers(a,"unbind_",arguments)},beforeMinFlex_:functio
n(i){var g=this.east,e=this.west,h=this.north,f=this.south,d=this.center;return 
i=="w"?Math.max(b(h,true),b(f,true),b(g,true,true)+b(e,true,true)+b(d,true)):b(h
,false,true)+b(f,false,true)+Math.max(b(g),b(e),b(d))},afterChildrenFlex_:functi
on(){if(this._isOnSize){this._resize(true)}},resize:function(){if(this.desktop){
this._resize()}},_resize:function(m){this._isOnSize=m;if(!this.isRealVisible()){
return}var h=["north","south","west","east"],i=h.length;for(var 
n,l=0;l<i;++l){n=this[h[l]];if(n&&zk(n.$n()).isVisible()&&((n._nvflex&&n._vflexs
z===undefined)||(n._nhflex&&n._hflexsz===undefined))){return}}var 
f=this.$n(),e=f.offsetWidth,q=f.offsetHeight,d={x:0,y:0,w:e,h:q};if(zk.opera&&!q
&&(!f.style.height||f.style.height=="100%")){var 
o=f.parentNode;d.h=q=zk(o).revisedHeight(o.offsetHeight)}for(var 
n,p,g,l=0;l<i;++l){n=this[h[l]];if(n&&zk(n.$n()).isVisible()){p=n._ambit();c[h[l
]](p,d,e,q);this._resizeWgt(n,p)}}if(this.center&&zk(this.center.$n()).isVisible
()){var 
r=this.center.getCurrentMargins_();d.x+=r.left;d.y+=r.top;d.w-=r.left+r.right;d.
h-=r.top+r.bottom;this._resizeWgt(this.center,d)}this._isOnSize=false},_resizeWg
t:function(g,d,h){if(g._open){if(!h&&g.$n("split")){g._fixSplit();d=g._reszSplt(
d)}zk.copy(g.$n("real").style,{left:jq.px(d.x),top:jq.px(d.y)});this._resizeBody
(g,d)}else{g.$n("split").style.display="none";var e=g.$n("colled");if(e){var 
f=zk(e);zk.copy(e.style,{left:jq.px(d.x),top:jq.px(d.y),width:jq.px0(f.revisedWi
dth(d.w)),height:jq.px0(f.revisedHeight(d.h))})}}},_resizeBody:function(i,d){d.w
=Math.max(0,d.w);d.h=Math.max(0,d.h);var 
g=i.$n("real"),h=i.isFlex()&&i.firstChild,f=h?i.firstChild.$n():i.$n("cave");if(
!this._ignoreResize(g,d.w,d.h)){d.w=zk(g).revisedWidth(d.w);g.style.width=jq.px0
(d.w);d.w=zk(f).revisedWidth(d.w);f.style.width=jq.px0(d.w);d.h=zk(g).revisedHei
ght(d.h);g.style.height=jq.px0(d.h);if(i.$n("cap")){d.h=Math.max(0,d.h-i.$n("cap
").offsetHeight)}if(h){var 
e;if(e=i.$n("cave")){e.style.height=jq.px0(d.h)}}d.h=zk(f).revisedHeight(d.h);f.
style.height=jq.px0(d.h);if(i.isAutoscroll()){f.style.overflow="auto";f.style.po
sition="relative"}else{f.style.overflow="hidden";f.style.position=""}if(!this._i
sOnSize){zUtl.fireSized(i)}}},_ignoreResize:function(f,d,e){if(f._lastSize&&f._l
astSize.width==d&&f._lastSize.height==e){return 
true}else{f._lastSize={width:d,height:e};return 
false}},onSize:function(){this._resize(true)}},{NORTH:"north",SOUTH:"south",EAST
:"east",WEST:"west",CENTER:"center"})})();

I am using latest beta:

zk-Gmaps-bin-3.0.0-Beta-2012-02-22.zip

Original issue reported on code.google.com by javier.i...@gmail.com on 23 Feb 2012 at 10:24

[GoogleCodeExporter]

Hi,

This is caused by the bind_ process is delayed in gmaps since it should load 
the resources of Google Map API at first.

The workaround:
wrap the gmaps by a div
<center flex="true">
    <div>
        <gmaps hflex="true" vflex="true"/>
    </div>
</center>

Regards,
ben

Original comment by benbai...@gmail.com on 24 Feb 2012 at 7:12

• Changed state: Accepted

[GoogleCodeExporter]

And please use the zk-Gmaps-bin-3.0.0-Beta-2012-02-24.zip
Another issue of hflex/vflex fixed

Original comment by benbai...@gmail.com on 24 Feb 2012 at 7:30

[GoogleCodeExporter]

Hi I found another bug. If I wrap it with a div, the error goes away, but then 
the google map is misaligned. The google map only shows map imagery for the top 
half of the div, for the bottom half I get the google maps grey background. 
Then after some experimentation I found that if I set a one time timer and then 
call .redraw() on the map when getting the timer message, this is fixed. My 
guess here is that the map is drawn before the resize code, so the map is given 
wrong location/size. Because redraw happens after the borderlayout layout code, 
at that point the map code is given the right size/position. I don't know if 
you want to create a new bug from this or you want to incorporate this 
information on this report.

Original comment by javier.i...@gmail.com on 24 Feb 2012 at 10:27

[GoogleCodeExporter]

Sorry, in my previous message, where I say .redraw() it should say .invalidate()

Original comment by javier.i...@gmail.com on 24 Feb 2012 at 10:31

[GoogleCodeExporter]

Hi,

The bug in Comment 2 should be fixed in the latest freshly,
if there still any problem, would you provide a sample that can reproduce it?

Thanks,
Ben

Original comment by benbai...@gmail.com on 3 Mar 2012 at 2:31

[GoogleCodeExporter]

Fixed since 2012-03-06.

Original comment by benbai...@gmail.com on 6 Mar 2012 at 8:58

• Changed state: Fixed