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.
Related
I've been developing using GWT 2.3.0 and GXT 2.2.5. I was finally able to move up to GWT 2.4.0 and decided to look into what it would take to migrate to GXT 3.0, but right off the bat I hit a snag.
The application does a lot of blocking the user by masking the browser. I use the following commands to do so:
XDOM.getBodyEl.mask();
XDOM.getBodyEl.unmask();
First thing I noticed was that in 3.0, XDOM no longer has the getBodyEl() method, so I have no way of retrieving the top document widget from anywhere in the application. I do see there is now a Mask class, but since it requires an element parameter to work, I'm still in need of a reasonably easy way to get the document body element.
I've tried searching through the Sencha forums with no success. Any suggestions as to how I could do this?
This is one of those good news/bad news situations. The good news is that El is gone, no more confusion with when to wrap, when to El.fly, when to save a reference, etc. More good news: the new version is called XElement, and to turn an Element into an XElement, you simply cast (either java cast or jso .cast()):
Element elt = ...;
XElement oneWay = elt.cast();
XElement theOtherWay = (XElement) elt;
Either way works, no overhead. All the magic of El, with none of the confusion.
Except for the bad news. But first, some additional good news:
This change is part of a bigger strategy to try to do things The GWT Way, simplifying how many guides are needed to do anything, and getting rid of some of the duplication that GXT does of existing GWT features. Most of that duplication makes sense either when you look at how GWT has grown over the years, and the rest usually make sense when GXT needs a little more power than what GWT offers (layout panels vs layout containers, RootLayoutPanel vs Viewport, HasData vs Stores, etc). Other areas where GXT is now using GWT stuff: HTML, Label widgets, SafeHtml and other string formatting (except XTemplates, which is SafeHtmlTemplates plus awesome), supporting RPC/RequestFactory/anything-else-that-looks-like-an-object, the Cell API, the Editor framework, etc.
Bad news:
Now that it is Just That Easy to get an XElement out of anything, most of the convenience methods to transform things into El objects are gone too. XDOM is still there, but it only does a few things now, mostly things that DOM or Document can't do for whatever reason (side note: GWT's DOM class is at least half deprecated now and may be going away in GWT 3 or so).
So, when you get the dom element that you want to do something with (like mask), you have to cast it first. In the case of your body element masking, this will look a little like this in GXT 3:
Document.get().getBody().<XElement>cast().mask("Loading...");//or null if you don't want text
You could also grab the Mask class and do it that way (this time with a java cast to demonstrate that its all the same):
Mask.mask((XElement) Document.get().getBody(), "Loading...");
I am developing a web application in GWT.
In the base HTML page I am using htlm <table> tags like <tr>,<td> and I set the table size at 990px, because the panels used in gwt are measured in pixels(i.e. AbsolutePanel).
This works ok in 1024 but on any other resolution, does will this create a problem??
You are going about it the wrong way. gwt-ext is long dead.
Current Choices - Pure GWT UiBinder , Pure GWT LayoutPanel, Sencha GXT, Vaadin.
Using AbsolutePanel for building entire screens are not recommended. To get screens working across multiple resolution you need to start here https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels
Also ensure you understand the concepts related to LayoutPanel and RootLayoutPanel.
When ever and where ever ,to escape from the height width problems regardless of resolutions..
please consider to Use in '%'. It is better to avoid static pixel numbers in the code .
Is it possible to create a GWT form without manually specifying sizes of components ?
I'm looking for layout managers that work a bit like in Swing, where you can simply pack things in a panel with a proper layout manager and constraints and never care about size/width/height. However it seems like in GWT all typical layouts (eg. Dock, Horizontal/Vertical) either require size parameter or don't exist (GridBag, unless you count in very limited FlexTable).
Such layout exists in GXT, but I would recommend to use plain-old CSS + HTMLPanel. It will give you in the end the same result, but in a little bit different way.
I just want to know if this is the proper way to go about splitting up widgets in GWT that get too large, or if I am missing the concept of widgets/proper GWT usage all together.
I started out with a single class (widget), PCBuilder. As PCBuilder became too large, I decided to branch off and make two classes SuggestionPanel, and BuildControlPanel, both of which just split off PCBuilder's code into separate classes that still have access to the methods in PCBuilder:
This way, in my PCBuilder class, I can do something like this to add the SuggestionPanel and the BuildControlPanel to the tabs (TabLayoutPanel) that are specified in the UiBinder of PCBuilder while allowing for SuggestionPanel and BuildControlPanel to have their own separate UiBinder specifications:
My question is: Is this proper? Part of me thinks "no" just because it's not a nice way of doing it. On the other hand it works just fine, and my web application is somewhat broken up into manageable "sections" which is what I wanted.
Thanks for any insight.
It's fine apart from the fact that you have circular dependencies between classes.
Why do SuggestionPanel and BuildControlPanel need to call PCBuilder? Is there any business logic in it? RPC maybe? Separate that into another class.
First, you might want to take a look at GIN - this handles dependency injection. This is good for testability.
Second, if your app goes beyond one "page", then take a look at GWT MVP.
You should not consider your PCBuilder as a widget. Quoting gwt -
You construct user interfaces in GWT applications using widgets that are contained within panels. Widgets allow you to interact with the user. Panels control the placement of user interface elements on the page.
Coming back to your question, my take is to create widgets only if I can reuse the same element more than once. The rest of my layout logic goes into the view. Layout shouldn't be a part of the definition of the widget as much as possible.To conclude, push styling in css, push layout in the views; widgetize only if re-usable (and core) or if adding additional functionality to existing widgets.
I'm learning to use GWT 2.0 and I'm trying to convert the StockWatcher demo to use the UiBinder. the demo uses stocksFlexTable.getRowFormatter().addStyleName(0, "watchListHeader"); to add styles, but when I add <ui:style> to my XML and move my CSS I can't seem to figure out how to make the style work because there is no stocksFlexTable.getRowFormatter().addStyle(). Does <ui:style> just not work with FlexTables?
I tried to deal with it as well with no success. I believe though that dynamic widgets such as FlexTable are not fully supported for obvious reasons - i.e. you can't preset the style for the nth row when you don't really know how many rows the table will hold. Also, providing some arbitrary way to do it for the first only, or odd rows etc. would require more expressive power than what the GWT developers seem keen to offer (they try to stick close to XHTML) and i believe they state at the wiki at somepoint that declarative syntax is by no means a templating language. Anyway, you can always experiment with #UiFactory and #UiField(provided=true) to try and stick close to GWT recommendations. But still, you ll have to set any such values programmatically.
I had success by removing the section completely and moving all of the css for the FlexTable into the application css file.