GTX 1.0 - problem with viewport - empty browser

**Speedbird** · 21 May 2008 8:21 AM

Hello,

for a sample application I want to add my Components to a Viewport to monitor window resizing. Unfortunately if I do so, the browser (hosted mode) shows an empty screen.

If I add them bei using the Rootpanel.get() method it works fine.

Here is the code of the entrypoint:

Code:

 
public class TestGWT implements EntryPoint {
 
    public void onModuleLoad() {
       Viewport vp = new Viewport(); 
       ContentPanel cp = new ContentPanel(); 
       cp.setCollapsible(true);
       cp.setWidth(200); 
       cp.setTitle("Collapsible"); 
       cp.addText("Sample"); 
       cp.setVisible(true);
       vp.add(cp); 
       vp.layout(true); 
   }
}

This is the HTML-Page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> 
<html>
<head>
    <title>TEST-GWT</title> 
    <link rel="stylesheet" type="text/css" href="css/ext-all.css" /> 
 
</head> 
<body style="overflow: hidden">
    <script type="text/javascript" language="javascript"
    src="com.testapp.TestGWT.nocache.js"></script>
</body>
</html>

...and the Module-Definition:

Code:

 
<module> 
<!-- Inherit the core Web Toolkit stuff. -->    <inherits name='com.google.gwt.user.User'/>
    <inherits name='com.google.gwt.i18n.I18N' />
 
<inherits name='com.extjs.gxt.ui.GXT'/> 
 
    <!-- Specify the app entry point class. -->
    <entry-point class='com.testapp.TestGWT'/>
</module>

[LEFT]If I copy the loading-indicator from the explorer sample into my HTML-page, the indicator won

**gslender** · 21 May 2008 11:57 AM

You need to add the viewport to the rootpanel... you were almost there !!

**Speedbird** · 23 May 2008 4:15 AM

So simple...

I overlooked that.

Thank you!

**Daniel Kurka** · 23 May 2008 5:55 AM

I seem to have the same problem

I tried out the Borderlayout code from the explorer demo.
And i dont get anything in the browser.

So i also added the viewport to the rootpanel, but nothing changes.

Heres the code:

Code:

package com.dvelop.d3web.client;

import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.RootPanel;

import com.extjs.gxt.ui.client.widget.Button; 

public class Explorer extends LayoutContainer implements EntryPoint {

    public void onModuleLoad() {
        Viewport v = new Viewport();
        v.add(this);
        v.layout(true);
        RootPanel.get().add(v);
    }

    public Explorer() {
        setData("layout", new FitLayout());
        
        
    }

    @Override
    protected void onRender(Element parent, int pos) {
        super.onRender(parent, pos);
        setLayout(new BorderLayout());

        ContentPanel north = new ContentPanel();
        ContentPanel west = new ContentPanel();
        ContentPanel center = new ContentPanel();
        ContentPanel east = new ContentPanel();
        ContentPanel south = new ContentPanel();

        BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH,
                100);
        northData.setSplit(true);
        northData.setMargins(new Margins(5, 5, 0, 5));

        BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 200);
        westData.setSplit(true);
        westData.setCollapsible(true);
        westData.setMargins(new Margins(5));

        BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
        centerData.setMargins(new Margins(5, 0, 5, 0));

        BorderLayoutData eastData = new BorderLayoutData(LayoutRegion.EAST, 200);
        eastData.setSplit(true);
        eastData.setCollapsible(true);
        eastData.setMargins(new Margins(5));

        BorderLayoutData southData = new BorderLayoutData(LayoutRegion.SOUTH,
                100);
        southData.setSplit(true);
        southData.setMargins(new Margins(0, 5, 5, 5));
        
        add(west, westData);
        add(center, centerData);
        add(east, eastData);
        add(south, southData);

    }

}

**gslender** · 23 May 2008 2:35 PM

you need to set a layout on the viewport

add this...

Code:

	v.setLayout(new FitLayout());

**Daniel Kurka** · 25 May 2008 10:23 PM

Okay thanks works fine now.

Someone should edit the explorer example and add those two lines in the onModuleLoad() then:

Code:

v.setLayout(new FitLayout());
RootPanel.get().add(v);

**mwildam** · 7 Aug 2009 5:23 AM

I tried to follow the advice but still an empty browser window opening.

Code:

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package org.TestGWT.client;

import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.RootPanel;


public class BorderLayoutExample extends LayoutContainer implements EntryPoint {

    @Override
    public void onModuleLoad() {
        Viewport v = new Viewport();
        v.add(this);
        v.layout(true);
        v.setLayout(new FitLayout());
        RootPanel.get().add(v);
    }

    public void BorderlayoutExample() {
        setData("layout", new FitLayout());
    }

    @Override
    protected void onRender(Element parent, int pos) {
        super.onRender(parent, pos);
        setLayout(new BorderLayout());

        ContentPanel north = new ContentPanel();
        ContentPanel west = new ContentPanel();
        ContentPanel center = new ContentPanel();
        ContentPanel east = new ContentPanel();
        ContentPanel south = new ContentPanel();

        BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH,
                100);
        northData.setSplit(true);
        northData.setMargins(new Margins(5, 5, 0, 5));

        BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 200);
        westData.setSplit(true);
        westData.setCollapsible(true);
        westData.setMargins(new Margins(5));

        BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
        centerData.setMargins(new Margins(5, 0, 5, 0));

        BorderLayoutData eastData = new BorderLayoutData(LayoutRegion.EAST, 200);
        eastData.setSplit(true);
        eastData.setCollapsible(true);
        eastData.setMargins(new Margins(5));

        BorderLayoutData southData = new BorderLayoutData(LayoutRegion.SOUTH,
                100);
        southData.setSplit(true);
        southData.setMargins(new Margins(0, 5, 5, 5));

        add(west, westData);
        add(center, centerData);
        add(east, eastData);
        add(south, southData);

        west.layout();
        center.layout();
        east.layout();
        south.layout();
    }

}

BTW: I am using GWT 1.7, GXT 2.0.1 and NetBeans 6.5 - not sure if the problem is related to a mistake in the setup procedure (which is only shown for Eclipse).

Any idea?

**mwildam** · 10 Aug 2009 7:30 AM

I tried now a very simple sample with NetBeans and GWT4NB:

Code:

package org.TestExtGWT.client;

import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class ExtEntryPoint extends LayoutContainer implements EntryPoint
{

    /** Creates a new instance of ExtEntryPoint */
    public ExtEntryPoint()
    {
    }


    @Override
    public void onModuleLoad()
    {
        VerticalPanel vPanel = new VerticalPanel();
        TabPanel tabs = new TabPanel();
        TabItem tab1 = new TabItem("Tab 1");
        TabItem tab2 = new TabItem("Tab 2");

        tabs.add(tab1);
        tabs.add(tab2);

        vPanel.setSpacing(10);
        vPanel.add(tabs);

        //add(vPanel);
        RootPanel.get().add(vPanel);
    }
}

And my Main.gwt.xml looks like:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<module>
    <inherits name="com.google.gwt.user.User"/>
    <inherits name="com.extjs.gxt.ui.GXT"/>
    <entry-point class="org.TestExtGWT.client.ExtEntryPoint"/>
    <!-- Do not define servlets here, use web.xml -->
</module>

And my WelcomeGWT.html content is:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta name='gwt:module' content='org.TestExtGWT.Main=org.TestExtGWT.Main'>
        <link rel="stylesheet" type="text/css" href="css/ext-all.css" />
        <title>TestExtGWT</title>
    </head>
    <body>
        <script language="javascript" src="org.TestExtGWT.Main/org.TestExtGWT.Main.nocache.js"></script>
    </body>
</html>

What I do get now as output is a bullet list:

Tab 1
Tab 2

What is (still) wrong here?

**Arno.Nyhm** · 10 Aug 2009 8:03 AM

did you include the css stuff?

**mwildam** · 11 Aug 2009 4:53 AM

You mean the line

Code:

<link rel="stylesheet" type="text/css" href="css/ext-all.css" />

?

Yes.

GTX 1.0 - problem with viewport - empty browser

Thread Tools

Search Thread

Display

GTX 1.0 - problem with viewport - empty browser

GTX 1.0 - problem with viewport - empty browser