we've used a combination of GWT and smart gwt to add some features to an app we've built.
The problem I have is that we decided to make use of the accordion functionality (SectionStack's) that SmartGWT offers and we are nesting our stock gwt widget inside a canvas and then nesting that inside the section stack. E.G
SectionStack(SmartGWT)->Section(SmartGWT)->Canvas (SmartGWT)->VerticalPanel(GWT) -> Other GWT Widgets (HTML, labels etc)
Before we mixed GWT and SmartGWT it was possible to select text in the standard GWT widgets and then copy and paste etc. Nesting the GWT widgets in the SmartGWT canvas means this is now not possible. Can anyone offer an explanation why this is the case and/or a solution on how to fix it.
I've tried canvas.setCanSelectText(true); but this doesn't seem to do anything either.
We're using GWT 2.1 with SmartGWT 2.2. The demo app using SmartGWT2.2 seems to exhibit the same problem over at http://www.smartclient.com/smartgwt/showcase/#featured_gwt_integration . I've also tried GWT 2.0.x with SmartGWT 2.2
Any help appreciated.
For those interested I've managed to find a bug registered for this at : code.google.com/p/smartgwt/issues/…
Actually it is not an issue. You have to call the setCanSelectText method on the WidgetCanvas wich is wrapping your GWT widget. The WidgetCanvas is created in the addItem(Widget) method. One way to go is to override the addItem method like this:
#Override
public void addItem(Widget widget) {
if (widget instanceof Canvas) {
addItem((Canvas) widget);
} else {
WidgetCanvas wg = new WidgetCanvas(widget);
wg.setCanSelectText(true);
addItem(wg);
}
}
Related
what should be used in Smart Gwt in Place of Root Panel in Gwt?
There's no need to use GWT's RootPanel.
To add / render widgets to the document, simply call BaseWidget#draw(). See how it's done on the SmartGWT's showcase.
Reference
draw() on the SmartGWT API docs
In some cases, you will need to still use RootPanel to draw your objects. This is the case for example if you are embedding your SmartGWT application into a portlet or into a page that already have non SmartGWT contents.
In a general way of thinking, calling draw is the best and the proper way of drawing SmartGWT objects.
However, for the reasons specified above, you can still use
VLayout mainLayout = new VLayout();
RootPanel.get("myDIV").add(mainLayout);
Keep in mind that calling RootPanel.get().add involves GWT DOM manipulation.
Does anyone know if there is a slider bar in gwt? I only found the one from GWT Incubator, which is unfortunately deprecated.
Try this:
http://code.google.com/p/gwt-slider-bar/
With help of this project it is possible create different slider bars.
There is no slide bar in the standard GWT library. But an alternative to the GWT incubator is in the sample project listwidget by David Chandler (he's on the Google GWT team). For this sample project he also needed a Slide bar. He took the sources from the GWT incubator and updated them.
What you can do is take these sources and put them in your own project (it has an apache licence). It's maybe not optimal but it worked for me. Here is a link to the sources http://code.google.com/p/listwidget/source/browse/#svn%2Ftrunk%2Fsrc%2Fmain%2Fjava%2Fcom%2Fgoogle%2Fgwt%2Fgen2%2Fclient (and for convenience here a link to the project: http://code.google.com/p/listwidget/)
You can now just use an HTML5 slider, like this:
<input ui:field="sliderInput" type="range" />
#UiField InputElement sliderInput;
sliderInput.setAttribute("min", "1");
sliderInput.setAttribute("max", "100");
sliderInput.setAttribute("step", "10");
Event.sinkEvents(sliderInput, Event.ONCHANGE);
Event.setEventListener(sliderInput, new EventListener() {
#Override
public void onBrowserEvent(Event event) {
// sliderInput.getValue();
}
});
You can use the slider from smartgwt. You only have to pay attention to the css definition. For the firefox it have to look like this:
#isc_4 td{
font-size:0px;
}
The slider is not a html5 slider and not touchable, but it works.
It is being solved by writing a new lib which uses the jquery slider. The author will release the code when it's stable :)
I want to wrap a CanvasElement (<canvas> in HTML) in a Canvas widget.
Many widgets (e.g. Label) have a static method SomeWidget.wrap(Element) for wrapping an existing DOM element.
I imagine Canvas does not feature such a method because not all browser support and therefore the user should be forced to go through createIfSupported().
Unfortunately the constructor in Canvas is private (protected would work), which means that Canvas can not be subclassed. (There isn't any constructor available in the derived class.)
Code snippets of createIfSupported and the constructor in the Canvas class:
public static Canvas createIfSupported() {
// check if canvas is supported; if it is not supported: return null
return new Canvas(element);
}
private Canvas(CanvasElement element) {
setElement(element);
}
I ended up copying the Canvas class and making the constructor public.
Is there a better way to do this?
If not, what is the reasoning behind it (besides that <canvas> might not be supported)?
I am using GWT version 2.4.0.rc1.
Thanks,
Julian
This question is old, but there is a solution in newer versions of GWT:
Canvas.wrap(canvasElement);
See javadocs.
I don't know in which version of GWT it was added, but It works on 2.7.0.
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);.
I have posted this question on the Ext-GWT forums, I am just hoping that someone here might have an answer for me!
I am struggling to do something I initially thought was simple but am beginning to believe is impossible...
I have got a "layout template" of sorts - simply consisting of a few GWT DockLayoutPanel's within each other and finally ending in LayoutPanels. GWT's LayoutPanel is designed to size the widget (or Composite) that's added to it to its full size and does so perfectly with pure GWT widgets.
The idea of my "layout template" is that I don't know the EXACT height and width of the very inner LayoutPanel's because I may set certain panels sizes (of the outer DockLayoutPanels) differently when instantiating this template. All I would like is to add a Grid component to one of the inner most LayoutPanels and have it size itself (height AND width) to fit as normal GWT widgets do (works perfectly with a GWT Label for instance).
I am VERY new to GXT (as in I started using it earlier today) and I do realize that GXT builds its Components differently to the way GWT builds its Widgets on the DOM.
Is there anyway to achieve the desired result? I have tried adding the grid to a ContentPanel with a Layout of FitLayout, I have tried AnchorLayout, I have tried adding the grid directly... Nothing seems to work... Any advice or even a push in the right direction would be greatly appreciated!
Thanks in advance!
Xandel
Just a note on this post and the direction I have taken. When I started my GWT project and I was learning the basics and reading through others posts and concerns and advice, the one bit of advice I overlooked initially was quite simple - when using the GWT framework use pure 100% GWT components only.
I initially ignored these fair warnings of fellow developers because in the age of open source tools, and open source projects, one develops the mind set of "Instead of building a tool which will give me certain functionality, let me rather see if someone else has done it already". This mindset speeds up development and almost standardizes projects and methods of implementation.
However, I have found over the last two months, that when working with GWT it is best to not follow this principle. Maybe because its not as widely spread as other frameworks, or demands a very certain type of coding style but non the less my search for a (simple, sortable, JSON loadable) grid component and (validating, neatly styled) form component has been nothing short of a nightmare.
This isn't because they don't exist. They do. I tried ext-gwt, gwt-ext, gwt-mosaic, and gwt-incubator. It is because many of the components break away from the very simple layout foundation that GWT provides (in other words, the panels that you place the widgets on mostly need to be the panels provided with the tools). This in turn makes mixing components and getting the desired result near impossible. Which in turn breaks away from the let-me-find-a-useful-component mindset.
Just an interesting and final point which I think might be worth mentioning. So due to my realisation of the above mentioned point, I set about to write my own grid and form components. Which I have completed and are working fine for me (obviously, because I wrote them , I don't suspect they will be useful to everybody else). But in the process of writing the grid component, and needing the columns to size and space themselves out automatically once drawn in their parent panel, I found that knowledge of the panels final width is not known until finally being drawn (this happens long after all your code executes). So ironically I set about building a set of panels that communicate to each other, from the parent panel (who ultimately NEEDS to have knowledge of its size) right down to the most inner panels so that when my grid component finally gets drawn, I can fire a method called onSizeKnown(int width, int height) and do whatever sizing is required.
After I completed this I could do nothing but laugh. Because it suddenly became clear to me why all the other GWT components out there require their own panels. I in essence had to do the same to get what I needed working.
So in short, if you are a newbie GWT developer like I was and are (is?) looking for cool stuff to make your project look awesome - this is my advice - if you are going to use an external framework such as some of the above mentioned - use ONLY that framework. Do not mix its components with other frameworks. Learn to love that framework, and build your project from the bottom up using their panels and design methods. If this scares you and makes you feel nervous and limited then do what I did and write your own using pure vanilla GWT components. You will save yourself A LOT of time in the long run by following this advice.
Xandel
This solution is for GXT 2.2.0 and GWT 2.0.4 *
While the original poster has since moved on I recently ran into this issue and thought I would post my solution in case anyone else stumbles on this.
There is no reason you can't add a GXT Grid directly to a GWT LayoutPanel. The problem is that the styling/positioning approach of the two libraries conflicts. Basically it boils down to the fact that the Grid is sized based on its parent's height attribute, which is not set meaning that the grid's body get assigned a height of 0 and the grid itself gets a height equal to that of the grid header (if present).
So the solution is to undo what GXT does once flow has passed back to GWT. Here is a template solution:
class MyGridWrapper extends Composite {
private LayoutPanel widget;
private Grid<?> grid;
public MyGridWrapper(Grid<? extends ModelData> grid) {
this.grid = grid;
widget = new LayoutPanel();
initWidget(widget);
widget.add(grid);
// Set the grid's vertical and horizontal constraints
// ... populate the rest of the panel
}
#Override
protected void onLoad() {
// onLoad is called after GXT is finished so we can do what we need to
// Redo what the LayoutPanel did originally
grid.el().setStyleAttribute("position", "absolute");
grid.el().setStyleAttribute("top", "0");
grid.el().setStyleAttribute("bottom", "0");
grid.el().setStyleAttribute("left", "0");
grid.el().setStyleAttribute("right", "0");
// Undo any height settings on the .x-grid3 element
El mainWrap = grid.el().firstChild();
assert mainWrap.hasStyleName("x-grid3") : "Wrong Element: " + mainWrap.getStyleName();
mainWrap.setStyleAttribute("height", "auto");
// Undo any height settings on the .x-grid3-scroller element
El scroller = grid.el().firstChild().firstChild().getChild(1); // FUN!
assert scroller.hasStyleName("x-grid3-scroller") : "Wrong Element: " + scroller.getStyleName();
scroller.setStyleAttribute("height", "auto");
}
}
The assertions are there to help protect against what is obviously very fragile code so beware that this is a GIANT, GIANT hack.
--
Just in case you're wondering where the GXT Grid's structure is defined, you can find it in a template file in the GXT JAR under com/extjs/gxt/ui/client/widget/grid/GridTemplates#master.html
Have a look at com.extjs.gxt.ui.client.widget.grid.GridView#renderUI() to get an idea of how the grid is built.