I want to display a message (please wait...) or animated gif before the initial entire loading of my gwt application.
Can you give me a full example please.
Thanks
Because the GWT app is not yet loaded, you have to do it in pure HTML/CSS and/or JS in your HTML host page. The easiest is to just put it in your <body> and when the GWT app loads it starts by cleaning that "loading" message (e.g. Document.get().getElementByid("loading").removeFromParent())
Another possibility is to use code-splitting: make a first fragment that's as small as possible and will display your "loading" message, and load the rest of the app in the background. In the RunAsyncCallback, hide your "loading" message.
That said, if you feel the need to display such a "loading" message, then IMO you have a bigger problem than finding how to display it (and if you struggle to find how to display one, you're in bad shape to build an app that people will enjoy using; fortunately, this is fixable: keep learning!).
Related
We are developing some ads using google web designer tool
so far its good but one main issue with it is, slow loading.
its taking almost 3 seconds to load and we feel very bad about that.
can anyone know how to optimize it?
thanks.
In developing html5 banners, by default the 'polite load' is checked.
Which means you banner will not be visible and will not load until the page is loaded.
And when testing your banner, there is some moments before showing the banner to simulate the webpage load.
Why?
Because no publisher(Website) allows you to make their website slow. That is the rule. There is no way for you to force yourself to show first on a publisher website.
If you want this option. You should directly talk to the publisher/ when you get approval from them, you can uncheck 'Polite Load' when you are publishing your ad. Then your banner will show faster without any delay.
#cnu - I have experienced the same issue. The only workaround I have at the moment is to set an initial loading image - while the Ad is loading
Try adding a div with an ID of 'loading' immediately after your opening body tag.
<div id="loading" class="loading-image">
<img src="default.png"/>
</div>
Then find the following function, and set the div to block display
function handleDomContentLoaded(event) {
// This is a good place to show a loading or branding image while
// the ad loads.
document.getElementById('loading').style.display = 'block';
}
Then find the following function, and set the div to none - to hide the image after loading
function handleAdInitialized(event) {
// This marks the end of the polite load phase of the Ad. If a
// loading image was shown to the user, this is a good place to
// remove it.
document.getElementById('loading').style.display = 'none';
}
The official GWD instructions don’t match the functions actually generated in the source, which initially made this setup confusing. The code comments in the source indicate these are the correct functions to use. You can use the first frame of the Ad as the loading image, rather than a loading gif - so the user experience isn't affected too much.
Hope this helps.
I know the standard way of handling the wmode problem is to register a callback that pauses the flash app and replaces the flash area with an image while the flash object is hidden.
What I'm trying to avoid is the flash disappearing in mid-game because of the facebook-chat auto-flyout when somebody sends a message the user (user's friends can essentially pause the user's game remotely, simply by sending them an instant message).
It seems as if Angry Birds Friends and Zynga's Ruby Blast Adventure have solved this problem somehow. These games run on stage3d so their wmode is set to 'direct', and when an instant message is received, facebook shows only a small new-message-indicator instead of displaying the full messages-dialog right away.
I can't figure out how they've managed to do that.
For me, facebook always seems to pop up the messaging as soon as a message is received.
The game is in stage3d so having a wmode of 'direct' is a must.
Any help would be greatly appreciated.
I'm battling with the same issue, except imo the perfect solution would be to show both the chat (and other facebook menus) and the stage3d flash at the same time. It seems that setting the element containing the flash, e.g. div as:
display: block !important;
visibility: visible !important;
does the trick, but I'm not really confident that is the perfect solution.. It seems that on some browser/OS combination some (Facebook invoken) ui stuff is now shown behind the flash at least partially. Would appreciate a lot for "an official correct answer(tm)".
You can write a listener function to be called when your game loses or regains focus, and register it with the Facebook environment by passing it to FB.init() as the hideFlashCallback parameter. The listener will be passed a parameters dictionary which will contain a key called state, which will be set to opened if you should be hiding your game.
In that case, the listener should call the Flash app's exportScreenshot method, use the Base64-encoded image data to create a data URL, and make that the src of an img element; it should move your app's containing element offscreen using the FB.hideFlashElement method in the JS SDK, and replace it with that img. If the parameters dictionary passed to the listener does not have state: "opened" then, instead, bring your Flash app back onscreen using FB.Canvas.showFlashElement.
You can find more information here: https://developers.facebook.com/docs/games/gamesonfacebook/optimizing#handlingpopups
I'm looking for a tutorial without any javascript - pure CSS3.
I've created two pages (page1.html, page2.html) for the iPhone and I'm using CSS3 and the -webkit-properties.
To connect those sites I created a next- and a backbutton.
When tapping on the nextbutton page2.html is loaded, when tapping on the backbutton page1.html is loaded.
This is working so far.
I'd like to try using some more -webkit-properties to get the flip-effect like in this demo.
So, when clicking on my next-button page2.html should be flipped in. When clicking/tapping on the backbutton page1.html should be flipped in.
I'm new to this and hope to get some help here. Do you know a tutorial dealing with my problem?
Another question coming up to my mind was whether it is possible to load page2.html seperatly or whether I have to build only one page with the content of page1.html and page2.html?
You have to build only one page with two sections/divs with the flip-contents in it. Then you can use the transform: rotateY … or, maybe load the second page in with AXAJ or something else, but because it's CSS on my understanding you have to put everything in one page with two sections/divs
There are lots of pageflip demos on the interwebs. This is one we did It was inspired by Roman Cortes one - there are others that use more of a squeeze than a flip.
I have an iPhone webapp that uses a cache manifest to work offline. I add the webapp to my home screen, use it (say scroll to a certain location on a page), then go back to homescreen.
When I open the app again, for a brief moment I see where I used to be (at that scrolled location on that page), but then the app "reloads" and I get scrolled to the top of the mainpage. Is there a way to prevent this "reloading"? This happens even in airplane mode (ie everything is working off the cache).
You're just seeing the default startup image, which is just a screenshot of the last place you were at. It's not "reloading"; the app wasn't loaded to begin with.
Search for "apple-touch-startup-image" to set a real loading image.
What I'm struggling with here is that the app actually seems to stay "in memory" longer if I use regular Safari as opposed to running in "apple-mobile-web-app-capable" mode. In the later case something as simple as pressing the home button, then task-switching back to the app causes a reload. Doing the same thing just in Safari often does not reload. So I'm worse off by using "apple-mobile-web-app-capable".
I don't believe there is a real 'reload' event. onload and onunload are all we get.
the onload handler starts up as if it is your first time coming to the page.
the onunload handler is the key to clearing out old content.
I like to provide alternate content for people who are coming back to my web app.
window.onunload=function(){
document.getElementsByTagName('body')[0].className+=' unloading'
}
And let the CSS do the dirty work to hide most of the body and show alternate content.
(this answer does not rely on jQuery or other frameworks)
// on load
window.scroll(0,0);
To ensure no old content is displayed while launching I use this in my page:
window.addEventListener('unload', function() { $('body').hide(); } );
Thus the last state of the page is empty and is what is shown to the user when the page is opened again.
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.