I'd like PopupPanel centred in the screen calling the center() method. It is placed incorrectly the first time I load it. All subsequent times, it centers just fine.
It seems like the styles contained in < ui:style> aren't being injected. I've tried creating an interface to the style in the View (per GWT docs) and calling ensureInjected() in the constructor but this has no effect.
How to have consistent centering?
There is a defect which is said to be fixed in GWT 2.5. For me the issue still exists in 2.5, and for my situation the fix was to set width and height of the panel explicitly:
popup.setWidth("800px");
popup.setHeight("700px");
For me, this works with the following simple snippet (tested on Firefox 3.6 and Chrome 10.0):
#Override
public void onModuleLoad() {
final PopupPanel popupPanel = new PopupPanel();
popupPanel.center();
}
Are you doing something differently?
Related
I am learning GWT Widget. I am having a simple EntryPoint class using which I am adding a Widget(ToggleButton). Initially it was working. Then I have just added the changes to change the attributes of my button. Then nothing came up in the specific HTML. I have done a clean-build too.
Below is my onModuleLoad()
#Override
public void onModuleLoad()
{
// Create Instance for your Widget
ToggleButton aToggleButton = new ToggleButton("Normal State", "Clicked State");
// Apply required style as per your wish
aToggleButton.setPixelSize(50, 10);
aToggleButton.setTitle("My first Simple Widget");
// Add it to the panel of your wish
RootPanel.get().add(aToggleButton);
}
Am I missing something. But I am sure that I haven't done anything apart from adding the lines that setting the size and title.
There's nothing wrong with this code. Compile to javascript, clean browser cache and try again.
I know there are some questions out there about the GWT ScrollPanel and how it works, but allow me to explain the situation.
I'm working on a project to implement QoS on routers. I'm now at the developping stage of the project and I need to make a webinterface to add protocols such as ssh and http and give them their bandwidth.
To save memory usage and network traffic, I do not use GWT-EXT or Smart GWT. So to set the bandwidths I use a ScrollPanel with an empty SimplePanel in it (which is way too big), leaving only the scrollbar.
Now here's the problem:
I want each scrollbar for each added protocol to start at the bottom, not the top. I can get it working through the code if I manually move the scrollbar first, then any function works, like a scrollToBottom(), or a setScrollPosition(). If I want to move scrollbars through code before moving the scrollbar manually, however, I can't call a function on it.
(I would post a picture but I can't yet - new user)
Summary:
So if I add a protocol (using a button called btnAjouter), the two slidebars (One for guaranteed bandwidth and one for the maximum bandwidth) for each protocol start at the top. I want them to start at the bottom on the load of the widget.
Is there a way to do this?
Thanks in advance!
Glenn
Okay, my colleage found the solution. It's a rather dirty one, though.
The thing is, the functions only work when the element in question is attached to the DOM. I did do a check with a Window.alert() to see if it was attached, and it was. But the prolem was that the functions were called to early, for example on a buttonclick it would've worked. The creation and attachment of the elements all happens very fast, so the Javascript can't keep up, this is the solution:
Timer t1 = new Timer()
{
#Override
public void run()
{
s1.getScroll().scrollToBottom();
s2.getScroll().scrollToBottom();
}
};
t1.schedule(20);
Using a timer isn't the most clean solution around, but it works. s1 and s2 are my custom slidebars, getScroll() gets the ScrollPanel attached to it.
You can extend ScrollPanel and override the onLoad method. This method is called immediately after a widget becomes attached to the browser's document.
#Override
protected void onLoad() {
scrollToBottom();
}
Could you attach a handler to listen to the add event and inside that handler do something like this:
panel.getElement().setScrollTop(panel.getElement().getScrollHeight());
"panel" is the panel that you add your protocol to. It doesn't have to be a ScrollPanel. An HTMLPanel will work.
You can wrap this method in a command and pass it to Schedule.scheduleDeferred if it needs to be called after the browser event loop returns:
Schedule.scheduleDeferred(new Scheduler.ScheduledCommand(
public void execute() {
panel.getElement().setScrollTop(panel.getElement().getScrollHeight());
}
));
In GXT, I've got a control with an important panel added to the bottom component, basically like this:
public class SamplePanel extends ContentPanel {
ContentPanel panel = new ContentPanel();
public SamplePanel() {
setBottomComponent(panel);
}
public void setVisible(boolean isVisible) {
panel.setVisible(isVisible);
}
The panel is being set as the "bottom component" because it needs to stay at the bottom of the widget and viewable at all times.
The problem is, while the visibility of the panel toggles correctly, the 'bottom component' area doesn't resize to become smaller and fit the new dimensions of the bottom area.
However, I've noticed that the bottom area does resize when I manually change the size of the widget with the mouse.
Is there any way to programatically force a redraw/repaint/re-layout... anything to have the bottom component change to reflect the new size of its contents?
I've tried all of these and they don't work:
public void setVisibility(boolean isVisible) {
panel.setVisible(isVisible);
doLayout(true);
recalculate();
repaint();
}
Thanks
In the last gxt you can do.
this.layout(true);
Otherwise you can fire an Events.Resize event.
I don't know about GXT, but in GWT I would use one of the force() or forceLayout() methods on my panel. Perhaps there is a similar API for doing that!
HTH.
Have you tried using the setLayoutOnChange() method of the ConentPanel?
I would suggest looking at this:
http://davidmaddison.blogspot.com/2008/12/gwt-rendering-process.html
What you can try to do is addListeners to the Panel and try calling panel.layout() there
This post claims that the top and bottom components to not participate in layout once the panel has been rendered and suggests a manual workaround (using RowLayout) or manually setting the size of the panel.
Consider finding the sizes from the parent and calling onResize(width, height)
I need a custom widget height. I tried using this
Integer.toString(yourWidget.getElement().getOffsetHeight())
but,
If I use it when I create it or add it to the container panel, it returns 0
If I use it in the contrainer panel's onLoad method, it returns the widget height before the style is applied
So, when should I use it to get the widget height after the style is applied?
Thanks a lot!
I don't known if you've solved your problem already, but an option to use JSNI would be making sure that the widget creation is finished.
A way of achieving that is with the Deferred command:
DeferredCommand.addCommand(new Command() {
public void execute() {
// Ask here for the height
}
});
Seems to be the same kind of problem that the one exposed here: GWT - Retrieve size of a widget that is not displayed
They used a workaround using JSNI to do what they wanted, maybe a similiar trick will work for you as well.
I think onAttach or onLoad would be a good catch..
#Override
protected void onLoad() {
super.onLoad();
//do sth
}
Working with Google Web Toolkit (with Google Maps Extension) I got a little problem:
I want to insert a Google Map into a TabLayoutPanel. Without that TabLayoutPanel everything worked fine. But as soon as the Map is inside of a tab it behaves really strange (its not centered right, and "jumps" when you try to scroll.).
The same Problem is when using TabPanel instead of TabLayoutPanel.
extract from my code:
in the onModuleLoad - method of my EntryPoint class:
DockLayoutPanel mainPanel;
MainUITabs tabWidget = new MainUITabs();
mainPanel.add(tabWidget);
RootLayoutPanel.get().add(mainPanel);
the MainUITabsWiget looks about like that:
public class MainUITabs extends Composite {
public MainUITabs(){
TabLayoutPanel tabPanel = new TabLayoutPanel(10, Unit.PCT);
MapWidget googleMapsTab = buildMapWidget();
tabPanel.add(googleMapsTab, "Google Maps");
initWidget(tabPanel);
}
private MapWidget buildMapWidget() {
LatLng coord = LatLng.newInstance(51.509, 11.434);
final MapWidget map = new MapWidget(coord, 2);
map.setSize("600px", "300px");
map.setCenter(coord);
map.addControl(new LargeMapControl());
map.addOverlay(new Marker(coord));
return map;
}
}
Seems like the Map doesn't like to be inside a tab..does anyone have an idea where the problem could be?
Thanks.
Andy
The TabPanel docs say that "This widget will only work in quirks mode. If your application is in Standards Mode, use TabLayoutPanel instead."
So, if your page has a DOCTYPE and thus is in Standards Mode, that suggests you'll have problems.
I found that when using a TabPanel in Standards Mode, widgets on tabs after the first one (which aren't visible at first) don't always render correctly. A workaround was to render these elements when the tab is shown, by using SelectionHandler.onSelection, as noted in the docs for the deprecated method TabPanel#onTabSelected. But reading the bit I quoted above, that's probably asking for trouble and in Standards Mode you ought to use TabLayoutPanel instead.
At first glance this looks like a problem I had with integrating TinyMCE (a WYSIWYG editor) with GWT - generally, components like these don't like when the DOM changes - in this case, it happens when you switch tabs (in my case it was drag & drop).
IIRC, the solution was to remove the TinyMCE widget from the text field it wrapped around when it wasn't shown on the screen. In your case, you'd want to remove the MapWidget from tabPanel, while it's not shown. I'm not familiar enough with the Google Maps API to know if there's a designated method to do that, but you can try a simple tabPanel.remove(googleMapsTab);.