hosted mode vs browser

[jbalaji]

The behaviour in hosted env is as expected, whereas getting weird problem with browser.

Here is the scenario as given in the code below. A window is poped-up with a canvas inside. Components are placed in the canvas. I am able to drag the window and the components move along.
However the same apps running in a browser (ie and chrome), sticks the component to the browser panel(guess the viewport). The window is empty.

Am I missing something?

                Window window = new Window(); 
		window.setWidth(600);  
		window.setHeight(400);  
		window.setCanDragResize(true);
		
		window.setShowCustomScrollbars(true);
        

		Canvas canvas = new Canvas();
		canvas.setShowCustomScrollbars(true);
                ...
                window.addChild(canvas);
                window.draw();

[Isomorphic]

It wouldn't have this effect, but you almost certainly meant to use addItem(), not addChild().

[jbalaji]

calling window.addMember() didnot help. Moreover, addMember caused unwanted effect like the title bar elements (title, minimize, close buttons) are dropped down below the content of the canvas (these elements ended up inside the window)

I had isolated the code as below. If someone can verify two issues in their env, I will be grateful.
Issue 1: browser and hosted mode behave differently. Elements get attached directly to the browser plane than into the canvas.
Issue 2: hosted browser's scroll bar gets activated when an element is moved beyond the window boundary. (Expecting window or canvas's scroll bar to appear). (this is the issue mentioned at http://forums.smartclient.com/showthread.php?t=4387)

package com.trial.client;


import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.DragAppearance;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;

public class Trial implements EntryPoint {

	public void onModuleLoad() {	      
		IButton button = new IButton("Hello World");
		button.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {
            popOutWindow();
        }
		});

		System.out.println("Started");
		RootPanel.get().add(button);

	}

	public void popOutWindow()
	{
		Window window = new Window(); 
		
		
		window.setTitle("Pop up");  
		window.setWidth(600);  
		window.setHeight(400);  
		window.setCanDragResize(true);
		window.setCanDragReposition(true);
		
		window.setShowCustomScrollbars(true);
        

		Canvas canvas = new Canvas();
		canvas.setShowCustomScrollbars(true);
        
        Canvas task1 = getTask("Block1", 20, 100);
        canvas.addChild(task1);
        
        
        Canvas task2 = getTask("Block2", 200, 120);
        canvas.addChild(task2);
        
        Canvas task3 = getTask("Block3", 400, 120);
        canvas.addChild(task3);

        window.addChild(canvas);
        window.draw();
        System.out.println("window opened");
	}
	
	
	public Canvas getTask(String taskName, int x, int y)
	{
		Label label = new Label(taskName);
        label.setAlign(Alignment.CENTER);
        label.setContents(taskName);
        label.setShowEdges(true);  
        label.setBackgroundColor("lightgreen");  
        label.setOverflow(Overflow.HIDDEN);
        
        label.setLeft(x);  
        label.setTop(y);  
//        label.setWidth(100);
//        label.setHeight(100);
        
        label.setCanDragReposition(true);
        label.setDragAppearance(DragAppearance.OUTLINE);
//        canvas.setWidth(20);
        
        return label;
	}
}

[jbalaji]

when I clean the project and rebuilt, the browser displays as expected.

[Isomorphic]

Sorry, addItem() was what we meant.

[jbalaji]

thanks, Isomorphic. btw, what is the difference between addItem, addChild and addMember?

[Isomorphic]

Each of these methods embeds a widget (a canvas or subclass thereof) in some higher level DOM element.

The lowest level mechanism for embedding widgets in other widgets is children.
canvas.addChild() will apply a child to a canvas - a child is displayed inside the canvas in the DOM, and bubbles events up to its parent, etc. The child is absolutely positioned within the parent using normal left / top coordinates.

Layout is a subclass of Canvas which supports members. layout.addMember() will add a member to a layout. This is essentially a special kind of child - it will render inside the parent (the Layout) in the DOM and bubble events to it, but the layout will control the child's position and size, stacking members up horizontally or vertically.

A window is a subclass of canvas which renders as (typically) a header and a body. It supports items (via window.addItem()). Items are rendered out inside the body of the window.


There are a few other classes which handle rendering out a number of other widgets. For example:
SectionStacks support sections.
TabSets support tabs.

We'd recommend checking out the reference docs / examples to see these in action.