Can't get Image to load, even though it's added to RootPanel? - gwt

I want to display an "img" element as a child of a panel. Should we be using the Image widget for this? I'm doing the following:
Image img = new Image();
img.getElement().getStyle().setWidth(80, Style.Unit.PX);
img.getElement().getStyle().setHeight(80, Style.Unit.PX);
// add it to a panel, which eventually gets added to the root panel.
somePanel.add(img);
// set the url
img.setUrl("stuff/test.png");
This works fine on FF. When I run the same code in mobile safari, the images never load. I've added a LoadHandler to the Image instance. I can see that on FF, the event callbacks are triggered. But on mobile safari, they're never triggered.
I recall that an Image must be added to the RootPanel in order for it to ever load, but I am indeed doing that. What else could be causing this? I'm sure the png resource is located correctly.
Thanks

Rule of thumb: always use absolute URLs, possibly using GWT.getModuleBaseURL(), GWT.getHostPageBaseURL() or GWT.getModuleBaseForStaticFiles() as a prefix:
img.setUrl(GWT.getHostPageBaseURL() + "stuff/test.png");
This is because GWT code runs in an iframe and is loaded from within a subfolder, and browsers differ in behavior on whether to use the host page or the iframe URL to resolve relative URLs.

Related

How to make facebook canvas shrink?

I have set canvas to have fluid size, but after resizing window of browser, size of iframe doesn't change. It stays permanently at 760px.
I need it becouse my client wants to have resposive front-end in fb application, but I'm not sure if it is possible anyway.
The question is: how to make it works?
Hm, I guess you're talking about horizontal resizing - this should definitely happening (even without calling FB.setAutoGrow) as soon as you activate the according option:
In fact this works even if you don't load the JS-SDK at all.
Here's a demo: https://apps.facebook.com/lastfm-og-scrobbler/

Reloading an iframe in GWT

I am currently working on a GWT project where I am displaying an HTML file within an iframe in my application. This HTML file is actually being written to as it is getting displayed, and I am hoping to be able to reload the frame so that the changes made to the HTML file are reflected on screen. I am able to do this two different ways that both work when running in development mode, however neither seem to work when the project is deployed.
The first method I tried was setting the frame's URL to itself:
frame.setUrl(frame.getUrl());
The second method I tried using JSNI:
public native void refresh() /*-{
if($doc.getElementById('__reportFrame') != null) {
$doc.getElementById('__reportFrame').src =
$doc.getElementById('__reportFrame').src;
}
}-*/;
When deployed, the frame gets displayed in a Window, and when the file is finished being written to, a call to either of these refresh methods is made, and the frame refreshes to contain the finished HTML file. When I am deployed, the call to refresh does not reload the contents of the frame, however if I bring up the frame's context menu (in Firefox), then go into 'This Frame', and click Reload, it successfully reloads the frame to contain the finished HTML file. I have tested this on multiple versions of Firefox without any luck.
Does anyone have any suggestions? Why would the behavior be different from one mode to the other?
Thanks.
wow, google is really fast with his search^^
You can use some JSNI to do this. Create a method such as
protected native void reloadIFrame(Element iframeEl) /-{
iframeEl.contentWindow.location.reload(true); }-/;
Then call it with your iFrame element
so your question you posted twice was already answerd here
http://groups.google.com/group/google-web-toolkit/browse_thread/thread/64aa7712890652d3
We had a requirement where one GWT application(parent) had another GWT application(child) loaded in an iframe. The child application had to refresh the iframe after it performs certain DB operations. We used JSNI to accomplish the same.
private native void refreshChild(String url)/*-{
$wnd.location.href=url;
}-*/
In case, if the child frame needs to be redirected to another webpage, the url can be modified accordingly.
We did try to use the reload() method, but it did not help.
The above piece of code, of course needs to be written in the child application.

How do I clear the opengraph's image tag proxy cache?

I have a page with og tags (including a source and an image - a youtube-like video view page).
I've replaced the image the og:image tag points to, to another image by the same name. However, when using the facebook linter/debugger, the image shown is the old image, while clicking the image itself, opens and shows the new image.
Facebook uses some kind of a proxy cache for the content of the image - how can I clear it without changing the name of the image file ?
This thread gives an answer.
To reiterate (in case thread goes down),
Go to http://developers.facebook.com/tools/debug
Enter the URL (of the page that holds your og meta tags) and include the query data: fbrefresh=CAN_BE_ANYTHING
e.g. http://www.example.com/mypage.html?fbrefresh=CAN_BE_ANYTHING
Using the debugger/linter should force a full recache. I suspect the caching you're seeing is in your browser. Have you tried emptying your cache or using incognito mode?
If that doesn't work (and depending on how much traffic you're getting) it might have something to do with the names being the same - but I don't think this should be the case. Try replacing the image with another with a different name, hit the URL in the debugger so FB receives the new one, then swap back to the one you want. Kinda janky, but will probably do what you want.

Javascript won't run on UIWebView

I am trying to run javascript on UIWebView and so far everything has been great, but I got a problem where I need to change a value in selection box, I am doing this document.getElementById('dt').selectedIndex = 5; somehow UIWebView won't change it, I can read the value perfectly, but somehow it doesn't change.
You can try to parse the HTML of the page, and change the selected value. Because the HTML is available for you when a page is loaded, it shouldn't be hard to do a replace or whatever.
If you want to use javascript, check this link

Prevent cached iPhone webapp from reloading (scrolling to top)

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.