I little speak english :( (i use gtranslate...)
I create GWT2.5(with requestfactory)+GXT3 MVP application
My Main View is a BorderLayout
west: shortcut panel(verticalLayoutContainer)
south: toolbar (status)
north: toolbar (menu)
my codes:
DesktopView.ui.xml (Main view):
http://pastebin.com/xbeUzDwi
DesktopView.java
http://pastebin.com/WguE6CVf
DesktopActivity.java
http://pastebin.com/adejJwu0
about grid view:
http://pastebin.com/nFPrGpd1
my MVP auto call createGrid()
error image(pagingToolbar)
if i replace in gridView
verticalLayoutContainer.add(grid, new VerticalLayoutData(1, -1)); => verticalLayoutContainer.add(grid, new VerticalLayoutData(1, 1));
error image(do not show grid)
what is the problem my code ? ???
but if i add code to DesktopActivity:
public void onEvent(....){
.
.
DesktopActivity.getContentPanel().setWidget(event.getWidget());
if (event.getWidget() instanceof VerticalLayoutContainer) {
((VerticalLayoutContainer) event.getWidget()).onResize();
}
direct call onResize, then there is no problem if you add...
this GXT3 bug or I make a mistake on something
Thank you in advance for your help
The BorderLayoutContainer does not automatically find the size of the edge components. You will have to define the sizes of these areas manually.
<ui:with type="com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData"
field="northData">
<ui:attributes size="30" />
</ui:with>
This section says that the north section of the container should be 30 pixels high. The same can be done for all edges.
Related
Somewhere in materialize.min.css the slider class is getting its height assigned. I am simply not able to override this.
What I tried is to set the height in the constructor of my widget:
public class HomeViewImpl extends Composite implements HomeView {
public HomeViewImpl() {
initWidget(uiBinder.createAndBindUi(this));
int height = Window.getClientHeight();
slider.getElement().getStyle().setHeight(height, Unit.PX);
}
}
I also tried to overwrite it in my own css file and I also tried to override Widget.onLoad() with the same result. I can resize the slider afterwards but not on when its actually loaded. Since I want it to use up the entire available space it has to be resized "on load".
Please note that setting fullscreen="true" is not an option since this would mess up the arrangement of my parallax effect I am using here as well.
<m:MaterialSlider ui:field="slider" fullscreen="false">
<m:MaterialSlideItem height="100%">
<m:MaterialImage url="http://mayastepien.nl/googlecalendar/google-drinks.jpg" />
<m:MaterialSlideCaption textAlign="CENTER">
<m:MaterialTitle title="This is our big Tagline" description="Here's our small slogan." />
</m:MaterialSlideCaption>
</m:MaterialSlideItem>
<m:MaterialSlideItem height="100%">
<m:MaterialImage url="http://dreamatico.com/data_images/car/car-1.jpg" />
<m:MaterialSlideCaption textAlign="CENTER">
<m:MaterialTitle title="This is our big Tagline" description="Here's our small slogan." />
</m:MaterialSlideCaption>
</m:MaterialSlideItem>
</m:MaterialSlider>
According to the source code in
https://github.com/GwtMaterialDesign/gwt-material/blob/master/gwt-material/src/main/java/gwt/material/design/client/ui/MaterialSlider.java
..you can set the height attribute on MaterialSlider too (in your UiBinder xml).
You probably know this, but relative height only works when the height of parent elements is set too.
See for instance
Make div 100% height of browser window
I have a loading popup that I need to display on the top of the page, even if the user scroll down.
What I tried so far is to set the popup position as follows
setPopupPosition(Window.getClientWidth()/2 , 0);
The popup shows up on the absolut top.
The situation can be resolved easily if you view it from a different angle: Not the popup position should adjust to the page - instead, the page should scroll behind the centering popup, e.g.:
final ScrollPanel scrollPanel = new ScrollPanel();
RootLayoutPanel.get().add(scrollPanel);
pagePanel = new FlowPanel();
scrollPanel.setWidget(pagePanel);
pagePanel.add(...);
Now add the entire page contents to pagePanel (instead of adding them directly to rootPanel).
Then you can create popups like this:
final PopupPanel popupPanel = new PopupPanel();
popupPanel.add(...);
popupPanel.center();
You'll still have to re-center the popup when the window resizes, but apart from that, the popup will always be at the center in front of the scrolling page.
To achieve this you can implement Window.addWindowScrollHandler. It will always be on top whatever you do.
DialogBox dialog = new DialogBox();
dialog.setWidget(...);
Window.addWindowScrollHandler(new ScrollHandler() {
#Override
public void onWindowScroll(ScrollEvent event) {
dialog.setPopupPosition((Window.getClientWidth() - widthOfDialog) / 2, event.getScrollTop());
}
});
Hope this helps.. Thanks..
The solution that worked for me is this
setPopupPosition(Window.getClientWidth()/2 , Window.getScrollTop());
I'm using a GWT library (gwt-openlayers) which allows me to create a map popup containing arbitrary HTML, similar to Google Maps. I need this HTML to contain a GWT Button widget.
I'm creating some HTML elements on-the-fly like this:
Element outerDiv = DOM.createDiv();
outerDiv.getStyle().setOverflow(Overflow.HIDDEN);
outerDiv.getStyle().setWidth(100, Unit.PCT);
outerDiv.appendChild(new HTML(mapPOI.getHtmlDetails()).getElement());
Button popupButton = new Button("View Property");
popupButton.getElement().getStyle().setFloat(com.google.gwt.dom.client.Style.Float.RIGHT);
outerDiv.appendChild(popupButton.getElement());
Then I'm getting the source HTML for these elements by calling
String src = outerDiv.toString();
and inserting this html into my map marker. Now my map marker displays the content ok, including the button. However, the button won't respond to any events! From what I can gather, this is because the buttons onAttach() method is never being called.
Is there a better way to do this?
Thanks,
Jon
~~~~EDIT~~~~
I'm now trying a new way of doing this, which seems to be the accepted method looking at other similar posts.
First I'm creating my div:
String divId = "popup-" + ref;
String innerHTML = "<div id=\"" +divId + "\"></div>";
Then I'm adding this to my map popup and displaying it (which adds it to the DOM). After the popup has been displayed, I'm getting the Element as follows and trying to wrap a HTMLPanel around it:
Element element = Document.get().getElementById(divId);
HTMLPanel popupHTML = HTMLPanel.wrap(element);
My div element is successfully retrieved. However, HTMLPanel.wrap(element); doesn't complete. The reason for this is that wrap(..) calls RootPanel.detachOnWindowClose(Widget widget), which includes the following assertions:
assert !widgetsToDetach.contains(widget) : "detachOnUnload() called twice "
+ "for the same widget";
assert !isElementChildOfWidget(widget.getElement()) : "A widget that has "
+ "an existing parent widget may not be added to the detach list";
I put some breakpoints in and it seems that the 2nd assertion is failing!
Does anybody have any idea why this might be the case? Should failing this assertion really result in a complete failure of the method (no return)?
Your first approach is good, you just need to register onClick event for your button like this:
DOM.sinkEvents(popupButton.getElement(), Event.ONCLICK);
DOM.setEventListener(popupButton.getElement(), new EventListener() {
#Override
public void onBrowserEvent(Event event) {
//implement the logic after click
}
});
I have checked this, it works 100%!
You might try something like
RootPanel.get("idOfYourMapMarker").add(popupButton);
See RootPanel.get()
Unfortunately, RootPanels are AbsolutePanels which aren't so nice for layout but could work if you just have a simple button to add. You could also try RootLayoutPanel which will give you a LayoutPanel (also not so nice when you just want things to flow). You might end up creating a container widget that does the layout for you, and adding that to the RootPanel.
SimplePanel is a DIV. Perhaps that can be used instead?
You added the element, but you have to keep the hierarchy of the actual GWT Widgets too.
I don't see a clean way to do this, but you could use something like jQuery to grab the button by and ID and add a click handler back to it that would call the original click handler.
private static native void registerEvents(String buttonId, MyClass instance)/*-{
var $ = $wnd.$;
//check click
$('#'+buttonId).live('click', function(e) {
e.preventDefault();
instance.#com.package.MyClass::handleButtonClick(Lcom/google/gwt/event/dom/client/ClickEvent;)(null);
});
}-*/;
Call this registerEvents() either in your onAttach or constructor.
I once had a similar problem. You can use the gwt-openlayer's MapWidget as follows:
private MapWidget createMapWidget() {
final MapOptions defaultMapOptions = new MapOptions();
defaultMapOptions.setDisplayProjection(DEFAULT_PROJECTION);
defaultMapOptions.setNumZoomLevels(TOTAL_ZOOM_LEVELS);
MapWidget mapWidget = new MapWidget(MAP_WIDGET_WIDTH, MAP_WIDGET_HEIGHT, defaultMapOptions);
map = mapWidget.getMap();
return mapWidget;
}
And then add it to any panel be it vertical or horizontal.
MapWidget mapWgt = createMapWidget();
VerticalPanel mainPanel = new VerticalPanel();
mainPanel.add(mapWgt);
...
... add whatever you want
...
You can finally add the created Panel(containing the MapWidget and the gwt widget) to the PopupPanel. Also, you should now be able to add handlers to the gwt button.
I am using a TabLayoutPanel in GWT and I want to have the last tab show up on the right side of the page. Is it possible to do this?
Common idea:
set tab container width to "auto" instead of predefined "16384px"
set "float: right" css property to last tab
move last tab to firts position
public void onModuleLoad() {
.....
// init TabLayoutPanel
.....
Widget rightTab = tabPanel.getTabWidget(0).getParent();
DOM.setStyleAttribute(rightTab.getElement(), "float", "right");
Widget tabBar = rightTab.getParent();
tabBar.setWidth("auto");
tabPanel.selectTab(1);
}
If you want to align all tabs to right try this:
.gwt-TabBar .gwt-TabBarFirst {
width: 100%;
}
.gwt-TabBar .gwt-TabBarRest {
width: 4px;
}
.gwt-TabBar .gwt-TabBarFirst-wrapper {
width: 100%;
}
Short Answer - NO.
I drilled down to the source at GWT 2.3 and AFAIK it easier to build your own composite from TabBar and StackLayoutPanel than start fighting this implementation.
Just to save you an effort it cannot be centered easily too.
I am sorry it is like this.
it all hardcoded...
private static final int BIG_ENOUGH_TO_NOT_WRAP = 16384;
private final FlowPanel tabBar = new FlowPanel();
...
tabBar.getElement().getStyle().setWidth(BIG_ENOUGH_TO_NOT_WRAP, Unit.PX);
Why not pure CSS solution ? It is good practice to separate your code from design.
.gwt-TabLayoutPanelTabs {
width: auto!important;
}
.gwt-TabLayoutPanelTab {
float: right;
}
Remember that your tabs will come in reverse order (first added will be first on the right)
It is possible and will be very easy if you create your own tab.Just create an png image of tab shape (which is having rounded corner at top).Write one css rule.Take one FlextTable and apply that css to each cell that will be your tabs and then add that FlexTable into another mainTable. So in your mainTable in first row there will be tabFlexTable and in second row whatever you want to display after selecting particular tab.So for the first row apply horizontal alignment to right. This the way and same way I am also using in my professional projects.
Does anybody know how to resize a GWT DockLayoutPanel's child panels? When I add a directional panel I have to give it a size ie:
panel.addSouth(new HTML("south"), 2);
How can I then resize this south panel after the fact?
You can use the setWidgetSize method like this:
DockLayoutPanel panel = new DockLayoutPanel(Style.Unit.EM);
HTML html = new HTML("south");
panel.addSouth(html, 2);
// change the size of the html widget to 4em
panel.setWidgetSize(html, 4);