I am a new GWT developer, just do some coding practice on the MVP framework of GWT, I encounter a interesting problem with the ui template file,
WHen I use HtmlPanel as the root element for widgets in the template, everything show up after module is loaded.
this template works as expected, however if I remove the tag, using an absolutePanel instead nothing shows up,
can anyone tell what could cause the problem, thanks a lot.
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.
Sorry but I see no way to use it at all!
If I create GWT project with sample code, then SDK is generating a page with a HTML table where positions for sample TextBox-es and Button are already marked. So, if I open sample file with GWT designer and move button slightly down-right, I will get errors during run.
If I create GWT project without sample code, then GWT designer appears to be unable to open file with empty GUI.
Is there any way to design GUI from scratch or to see GWT designer usage sample?
Thanks
The problem is when you want GWT to create sample code for you, it puts the container parts of layout hard-coded in your projects html file. The generated sample uses RootPanel.get("someId").add(someWidget); to access these containers. When you open designer and move these widgets around, designer generates RootPanel.get("someId").add(someWidget,left,top); which doesn't work with this method.
On another note, when you want to create a class from scratch and open it with designer, you can simply add a reference to RootPanel to get around "this is not a gui class issue" such as :
public class SimpleClass {
RootPanel r = RootPanel.get();
public SimpleClass() {}
}
This question already has an answer here:
GWT 2.1 Places example without Activities
(1 answer)
Closed 3 years ago.
On an existing project we’re using MVP (hand crafted) reasonably well. It’s understood and does mostly what we need. For a new project I'm looking at using the MVP framework built into GWT 2.1 (Activities and Places).
Our applications are mostly tabbed displays with each tab bound to a single view widget.
I’ve tried to use Activities and Places without success for this type of display. Part of the problem is that the example Hello World article ended up leaving me chasing my tail, too many new concepts for my brain to digest.
The Hello World sample IMO is not a sufficient introduction and doesn’t deal with many of the real world use cases. I was hoping someone could point me in the direction of any sample applications that use MVP for tabbed displays. Thomas Broyer has some excellent posts on his blog but these have still left me a little perplexed.
Previously I’ve used an AppController to handle tabs changes and single presenters for each tab. The new architecture in GWT 2.1 leaves me more confused that it should.
I'm using the gwt Activities/Places framework for a tabbed display, and it works great, BUT: I decided to abandon the TabLayoutPanel widget we had been using and create my own navbar (that looks like tabs) and a content pane. The effect is the same - it looks identical - but the implementation is much cleaner.
I think the problem is in trying to mix Activities/Places, which has its own idea of navigation, with a TabPanel, which has another idea of navigation. At first I tried to throw them together, overriding tab button behavior to trigger a PlaceController, which in turn switched the tabs around, but... it was messy. With the independent navbar / content pane, the PlaceController could do everything just like it wanted to. You just have to manually switch the views, instead of letting a TabPanel do it for you.
I also faced this problem but managed to make it work using one activity per Tab and each activity using a presenter (or more) to display the components of the tab.
Regarding the solution found by Riley Lark, I, instead, opted by using a Decorator pattern and, so, keep the original TabbedPanel. How ? Each activity gets injected (GIN) a presenter that contains a decorator for the TabbedPanel.
So, for example:
Tab1Activity gets injected with Tab1Presenter, which, in turn, gets injected with Tab1Decorator which decorates the TabbedPanel with a Tab1ContentPanel (this panel contains all the widgets to be displayed on the Tab1 tab)
Tab2Activity gets injected with Tab2Presenter, which, in turn, gets injected with Tab2Decorator which decorates the same TabbedPanel with a Tab2ContentPanel (this panel contains all the widgets to be displayed on the Tab2 tab)
Seems complex but, after creating the first decorator, it really paid off and I was able to keep the TabbedPanel and take advantage of the URL history management implicit in the framework.
I have a basic GWT Maven project going. I added SmartGWT and started playing around with some widgets and nothing displays correctly. The ListGrid seems to somewhat render but things are off and even data isnt showing up (though the rows respond to indicate there is data within the row). Sorting arrows dont appear but are clickable, and filters are wildy off. Whats causing this. I deleted everything in the .css file.
GWT newbie here.
Did you add the following to your host html file?
var isomorphicDir = "MODULE_NAME/sc/";
where MODULE_NAME is the name of your GWT module. ie the name you have in your GWT module xml file.
See http://forums.smartclient.com/showthread.php?t=8159#aImages
fyi the next release of Smart GWT will no longer require users to add the isomorphicDir variable to the host html file.
I'm new to GWT, and I'm sure this is answered in SO somewhere but I've yet to find
I downloaded the GWT 2.0 eclipse plugin, and was pleased to see it comes with a starter project.
However, I was surprised that when running it, there is an unpleasent flickering...
The text loads without the CSS first
It takes a while untill the select box apears
(If you don't see the flicker, try and press F5 to refresh)
All mature GWT apps seem to have a loader before that but I didn't find an easy, standard way to add it.
It seems this app loads in this order: (correct me please if I mixed it up, its only my guess)
Basic layout HTML,
All JavaScript, and CSS
Runs the logic on the "onload" event (soonest time your compiled javaScript can start - ?)
So I can't programmatically add a loading spinner before GWT was loaded, a bit of a catch 22 for me
Am I missing something basic? is there a best practice way to add that initial spinner?
I was thinking simply adding a div with an animated gif, and in the onload event - hide it.
But I'm sure there is something better.
Let me know if this is a duplicate question
Update: found this related question, not answering mine though...
I've handled this problem before by not using the GWT module to load CSS, but loading it directly in the tag itself. If you do this, the browser will always load the CSS first, even before the GWT JS is loaded.
This means you'll lose a bit of flexibility and speed, but its the only workaround I've used so far.
EDIT: Extra info cause I want the bounty :D
If you do not remove the
<inherits name='com.google.gwt.user.theme.standard.Standard'/> from your module.gwt.xml file, then the GWT standard theme is loaded in the JS file that GWT creates. This JS file loads after the HTML page renders, and injects the CSS after load. Hence the flicker.
To avoid the flicker, you can comment out that line and insert your own stylesheet into the <head> of your HTML file. This ensures your CSS loads before the HTML renders, avoiding any flicker. If you really want the GWT theme, you get it out of the source code.
To use a spinner with GWT is quite easy. One simple way would be to keep it in a div with an id in the HTML file itself. Then, in the onModuleLoad(), simply hide that div by calling RootPanel.get("spinner").setVisible(false);
That should show the spinner till GWT loads itself.
Here's what we do to implement a spinner.
You put something like the following HTML just below the script line that loads your application (ie. the one with nocache.js). e.g.:
<div id="loading">
<div id="loading-msg">
<img src="icons/loading-page.gif" lt="loading">
<span>Loading the application, please wait...</span>
</div>
</div>
Then in your application EntryPoint you reach into the page using the DOM and remove that div. e.g.
final RootPanel loading = RootPanel.get("loading");
if (loading != null) {
DOM.removeChild(RootPanel.getBodyElement(),
loading.getElement());
}
Ehrann: I'm afraid the practice mentioned in the above answers is the only way for now. GWT doesn't provide similar features to show/hide a "loading" frame "on the fly". I guess one of the reason is that this requirement is not so "common" for all GWT users, one person might want a very different style of the "loading" than others. So you have to do that by yourself.
You can have a look at the GXT showcase page (based on GWT too): http://www.extjs.com/explorer/ for how they do that. For the source of it, download Ext GWT 2.1.0 SDK here: http://www.extjs.com/products/gxt/download.php and check the samples/explorer folder after extracting it. For details see the edit below:
EDIT
Check the source code for http://www.extjs.com/examples/explorer.html and you can see a div with id "loading". For each samples (extending Viewport), GXT.hideLoadingPanel(loadingPanelId) is called in onAttach() (the initialization), which hides the loading frame.
Check source code of Viewport here
Check source code of GXT.hideLoadingPanel here
You can do it in a similar way.
You could put an HTML loading message in the host page (use style attributes or embed the style tag in the header to make sure that it's styled), and remove the message once your modules has loaded, e. g. Document.get().getBody() with .setInnerHTML("") or .removeChild(), and then present your application programmatically however you want.