iPhone onorientationchange event handling

205 views
Skip to first unread message

Jeff J.

unread,
Jun 3, 2008, 2:36:23 PM6/3/08
to Google Web Toolkit
Can someone please describe how I can implement an event handler for
the iPhone's onorientationchange event in GWT? I'd like to be able to
listen for the event and then fire my own listeners. Window.onresize
does not always seem to detect orientation change and I'd rather not
use the polling method. I'm using the latest GWT code from the trunk.

Thanks.
Jeff J.

Peter Blazejewicz

unread,
Jun 3, 2008, 4:27:57 PM6/3/08
to Google Web Toolkit
hi Jeff,

in theory it should be sufficient to call some JSNI at some point in
your code that way (written without IDE):

native void addListener(Handler handler)
/*-{
var callback = function(){
handler.@com.myproject.client.Handler::orientationChanged()();
};
$wnd.addEventListener("orientationchange", callback, false);
}-*/;

where handler is trivial:

interface Handler{
abstract void orientationChanged();
}
java class,

(of course that JSNI code could be hidden under java "implementation"
files to look like native java code without javascript touched),

that was theory, in practise you should also use onload/onunload
events on Window object to nicely manage different state of browser
view in mobile safari, e.g. if your page is redirected into different
page, user pick other page (there could be 8 active pages in iPhone/
iTouch) and rotate device and then go back to your page,
see that thread on iphone webdev where that issue was discussed and
solved (using current version of iPHone/iTouch sdk, not sdk 2.0):
http://groups.google.com/group/iphonewebdev/browse_thread/thread/66fb725fe24e3c27

regards,
Peter

Jeff J.

unread,
Jun 3, 2008, 10:17:04 PM6/3/08
to Google Web Toolkit
Hi Peter,

Thanks for the reply. I am unfortunately having some difficulty
getting the above JSNI code to work. With a simplified version of the
code:

public native void setHandler()
/*-{
var callback = function(){
$wnd.alert("test");
};
$wnd.addEventListener("onorientationchange", callback, false);
}-*/;

It generates an exception:
"com.google.gwt.core.client.JavaScriptException: (TypeError): Object
doesn't support this property or method" in the hosted browser.

Creating a separate Safari deferred binding so that the above code
would only be used on my iPhone allows it to compile but still no luck
listening for the "onorientationchange" event. The "test" alert is not
displayed when I change orientation on the iPhone.

Any suggestions on getting the above code to work? I'm not very
experienced to JSNI so this is still a bit new to me.

Thanks,
Jeff J.

On Jun 3, 3:27 pm, Peter Blazejewicz <peter.blazejew...@gmail.com>
wrote:
> hi Jeff,
>
> in theory it should be sufficient to call some JSNI at some point in
> your code that way (written without IDE):
>
> native void addListener(Handler handler)
> /*-{
> var callback = function(){
> handl...@com.myproject.client.Handler::orientationChanged()();
> };
> $wnd.addEventListener("orientationchange", callback, false);
>
> }-*/;
>
> where handler is trivial:
>
> interface Handler{
> abstract void orientationChanged();}
>
> java class,
>
> (of course that JSNI code could be hidden under java "implementation"
> files to look like native java code without javascript touched),
>
> that was theory, in practise you should also use onload/onunload
> events on Window object to nicely manage different state of browser
> view in mobile safari, e.g. if your page is redirected into different
> page, user pick other page (there could be 8 active pages in iPhone/
> iTouch) and rotate device and then go back to your page,
> see that thread on iphone webdev where that issue was discussed and
> solved (using current version of iPHone/iTouch sdk, not sdk 2.0):http://groups.google.com/group/iphonewebdev/browse_thread/thread/66fb...

Peter Blazejewicz

unread,
Jun 4, 2008, 11:16:43 AM6/4/08
to Google Web Toolkit
hi,

event is mobile safari specific and it is called
"orientationchange" (see your code event name),

try such code:

public class Test implements EntryPoint {
Label lbl;

public void onModuleLoad() {
lbl = new Label("orientation: ...");
addListener(new Handler() {
public void orientationChange(int orientation) {
lbl.setText("orientation: " + orientation);
}
});
RootPanel.get().add(lbl);
}

native void addListener(Handler handler)
/*-{
if(!$wnd.orientation){
return;
}
var callback = function(){
handler.@test.client.Test$Handler::orientationChange(I)
($wnd.orientation);
}
$wnd.addEventListener("orientationchange", callback, false);
}-*/;

interface Handler {
abstract void orientationChange(int orientation);
}
}

regards,
Peter
Reply all
Reply to author
Forward
0 new messages