PDA

View Full Version : TabItem only shows on window resize.



bornsilly
17 Nov 2009, 11:41 AM
I am having a problem with TabPanel and TabItem. I followed the code from the Explorer demo on how to add tabs dynamicly.
In my webapplication after the user authenticates him/herself a welcome page needs to be shown as a tab in the Tabpanel, but this page doesnt show untill i resize the window. At first i thought it was a browser issue but i tried in on both ie explorer as mozilla and on both i need to resize the window for the Tab to become visible.

Question is when you add a tab like this:



TabItem newTab = new TabItem() ;
newTab.setClosable( false);
newTab.setId("WelcomePage");
newTab.setText("Welcome");
newTab.setLayout(new FitLayout());
newTab.add(new WelcomePage() );
tabPanel.add(newTab);


Do i need to perform a extra step to make this page visible in the viewport/tabpanel?

Martin.Trummer
18 Nov 2009, 2:07 AM
depends on your parent containers/layouts

show more code

bornsilly
18 Nov 2009, 8:38 AM
depends on your parent containers/layouts

show more code

Martin,

The way it is setup is exactly the same how it is done in the Explorer demo.

Northpanel, westpanel and a center panel created the same way as in the Explorer demo.

Martin.Trummer
18 Nov 2009, 8:46 AM
if it were the same, it would work :)

just make a small sample application and post the entry-point method - should only be some lines of code, then the chances, that someone can help you will increase dramatically ;)

bornsilly
18 Nov 2009, 10:57 AM
if it were the same, it would work :)

This is true, unless i have a wrong version of GWT 1.7.1?

this is however the code

Entrypoint:


public void onModuleLoad() {

DataServiceAsync service = (DataServiceAsync) GWT.create(DataService.class);
ServiceDefTarget endpoint = (ServiceDefTarget) service;
String moduleRelativeURL = DATA_SERVICE;
endpoint.setServiceEntryPoint(moduleRelativeURL);
Registry.register(DATA_SERVICE, service);

Dispatcher dispatcher = Dispatcher.get();
dispatcher.addController(new ApplicationController());
dispatcher.addController(new MenuController());
dispatcher.addController(new PageController());



dispatcher.dispatch(ApplicationEvents.Login);


}



ApplicationControllerView:


private void init {
viewport = new Viewport();
viewport.setLayout(new BorderLayout());
Registry.register(VIEWPORT, viewport);

createHeader();
createWest() ;
createCenter();

RootPanel.get().add(viewport);

viewport.layout(true);

}

private void createHeader() {
StringBuffer sb = new StringBuffer();
sb.append("<div class='application-header'></div>");

BorderLayoutData data = new BorderLayoutData(LayoutRegion.NORTH, 50 );
data.setMargins(new Margins(0, 0, 5, 0));

HtmlContainer northPanel = new HtmlContainer(sb.toString());
northPanel.setId("application-header") ;


viewport.add(northPanel, data);
}

private void createWest() {
BorderLayoutData data = new BorderLayoutData(LayoutRegion.WEST, 200, 150, 350);
data.setMargins(new Margins(5, 5, 5, 5));

navigationPanel = new ContentPanel();
navigationPanel.setBodyBorder(false);
navigationPanel.setLayout(new AccordionLayout());
navigationPanel.setLayoutOnChange(true);
navigationPanel.setHeading("Menu");

viewport.add(navigationPanel, data);
Registry.register(NAVIGATION_PANEL, navigationPanel);
}

private void createCenter() {
centerPanel = new ContentPanel();
centerPanel.setBorders(false);
centerPanel.setHeaderVisible(false);
centerPanel.setLayout(new FitLayout());

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

viewport.add(centerPanel, data);
Registry.register(CENTER_PANEL, centerPanel);
}

protected void handleEvent(AppEvent event) {
if (event.getType() == ApplicationEvents.Init) {
init();
}
}


PageControllerView:


public void initUI() {

TabPanel pController = new TabPanel() ;
pController .setCloseContextMenu(true);
pController .setBorderStyle(false);
pController .setBodyBorder(false);
pController .setTabScroll(true);
pController .setAnimScroll(true);

ContentPanel center = (ContentPanel) Registry.get(ApplicationControllerView.CENTER_PANEL);
center.add(pController );

TabItem newTab = new TabItem() ;
newTab.setClosable( false);
newTab.setId("WelcomePage");
newTab.setText("Welcome");
newTab.setLayout(new FitLayout());
newTab.add(new WelcomePage() );
pController .add(newTab);

}


And the WelcomePage():


public class WelcomePage extends LayoutContainer {

public WelcomePage() {
setLayout(new FitLayout());

UserInfo user = (UserInfo) Registry.get(EasyTrack.EASYTRACK_USER) ;

HtmlContainer welcome = new HtmlContainer(
"<div class='welcome-header' >Welkom " + user.getName() + " (" + user.getDepartment() + ")</div>"
) ;

add( welcome );

}
}

Martin.Trummer
19 Nov 2009, 2:03 AM
ok - reproducing this would be too much work
samples here should be in one small entry-point method - then it's easy to copy/past this into my demo app and try it

anyway, if I should guess, what's wrong, I'd try to change your initUI() method in the PageControllerView


try to first add the tab item to the tab-panel and then add the tab-panel to the center panes
if this also doesn't work, try to call layout() on the center panel

Arno.Nyhm
19 Nov 2009, 2:14 AM
i think the layout() stuff is the key, like described in other threads just this days.

bornsilly
19 Nov 2009, 3:20 AM
ok - reproducing this would be too much work
samples here should be in one small entry-point method - then it's easy to copy/past this into my demo app and try it

anyway, if I should guess, what's wrong, I'd try to change your initUI() method in the PageControllerView


try to first add the tab item to the tab-panel and then add the tab-panel to the center panes
if this also doesn't work, try to call layout() on the center panel


Martin
Sorry for the long listing. I thought you wanted to see the code as how it is in my application to get a real idea how things are build up.

Thanks for the suggestions, i will try this as soon as a get home to see if this is the key.
However i am wondering that your first solution would create a issue since after this i need to create other tabs as well. Or perhaps since i am building both the tabpanel as the tab in the same function that this is the issue.

Ill let you know how this works out.

bornsilly
19 Nov 2009, 3:24 AM
i think the layout() stuff is the key, like described in other threads just this days.

Arno.

Not to sound ungratefull for your involvement but it would be handy to know which thread exactly relates to my problem or which thread has the solution to my problem.

Arno.Nyhm
19 Nov 2009, 3:49 AM
Sorry for the long listing. I thought you wanted to see the code as how it is in my application to get a real idea how things are build up.


it was not a complaint agains a long listing, but in your listings always only parts and not the FULL listing. without a full listing you can not copy and paste all your code easy in a test environment. the idea is to copy this things and run it on a testsystem.

try it yourselft with your codesnippets. you can not copy and paste it in a "fresh" empty system without many work.

Arno.Nyhm
19 Nov 2009, 3:53 AM
Not to sound ungratefull for your involvement but it would be handy to know which thread exactly relates to my problem or which thread has the solution to my problem.

i read it in the forum many times in the last weeks

searching for layout in the forum gives me this threads:

http://www.extjs.com/forum/showthread.php?t=85656&highlight=layout
http://www.extjs.com/forum/showthread.php?t=85440&highlight=layout
http://www.extjs.com/forum/showthread.php?t=85241&highlight=layout


and i guess resizing calls the layout stuff and thats why you see it after resizing.

Martin.Trummer
19 Nov 2009, 4:14 AM
you should read the section LayoutContainer in the helpcenter to get a better idea of how and why to call layout()

http://www.extjs.com/helpcenter/index.jsp?topic=/com.extjs.gxt.help/html/reference/layoutcontainer.html

Arno.Nyhm
19 Nov 2009, 5:58 AM
@Martin: thanks for this link :-) i do not remember to see it before. :-)


BTW:
i think this part with the layout is the most confusing part if i read some forum threads.

i think it should be default to do a autoformat and then the developer should manualy disable it and do the layout stuff to get a performance boost.

Martin.Trummer
19 Nov 2009, 6:33 AM
i think it should be default to do a autoformat and then the developer should manualy disable it and do the layout stuff to get a performance boost.

I don't agree.

Sure beginners might benefit from this, but if anyone wants to build a real application using GXT there's no way round of learning (at least) the basics

The way it is now, is ok, because if you forget some calls, you'll notice it immediately.
And GXT does a pretty good job to get it right in most cases.

On the other hand, if you execute the layout too often, there's no (easy) way to find out which calls you can omit.

sven
19 Nov 2009, 6:46 AM
GXT should not call layout on every modification. You can turn it on if you dont want to call layout manually. But this is turned of by default for a very good reason. Browsers are just still too slow to handle this. And also if they would be faster, you should not do that.


The first thing when designing apps is too thing about performance. To get something fast at the end is quite impossible.

Arno.Nyhm
19 Nov 2009, 7:37 AM
ok. you are right.



BUT then it would be nice to place more stuff into the examples to point the people to a layout.



in the examples explorer i found only in this 4 places the usage of layout:



TemplateExample.java]
xpanel.layout(); [position 81:15]
DraggableExample.java
ct.layout(); [position 76:9]
HBoxLayoutExample.java
lccenter.layout(); [position 404:13]
VBoxLayoutExample.java
lccenter.layout(); [position 400:13]

sven
19 Nov 2009, 7:38 AM
The otherexamples dont modify content dynamically. So they dont need a layoutcall.

bornsilly
19 Nov 2009, 9:19 AM
Martin, Arno and Sven.

Thanks for all the information. The part that i had to call layout on one of mine ContentPanels was completly unknown to me.

In my code i now called layout() on the center ContentPanel and the Tab shows now straight away (without resizing).

Once again, thanks all for your efforts it is highly appriciated.

Marco

Arno.Nyhm
19 Nov 2009, 9:39 AM
The otherexamples dont modify content dynamically. So they dont need a layoutcall.

maybe we add some things in this examples so we need this layout and then everybody run over it if he looks in the examples!?

bornsilly
19 Nov 2009, 9:55 AM
Coming from gwt-ext i noticed that the examples provided are a bit more diverse and more informative then the Explorer demo. For Example the Grid examples all show a basic grid. None of them actually goes into Grid events while gwt-ext had a example specificly for Grid events, which proved itself usefull in my case.

Am however not complaining since the GXT forum is much more active and helpfull for newbies (like me) then the gwt-ext one(s).

No mather how many samples/information you provide (which in this case a detailed example would have been helpfull) when things dont go the way you expect it to go and for instance in my case you have no understanding what to look for it will always remain hard to find the answer/solution to a problem. I would not have made the link between having to call layout would solve the tabItem becoming visible while it already would be visible if i resize my browser (probably onResize calls layout() by default).