incubator-callback-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Rob Van Wicklen (JIRA)" <j...@apache.org>
Subject [jira] [Commented] (CB-1247) An option similar to "webviewbounce" is needed that works on Windows Phone
Date Mon, 27 Aug 2012 18:43:09 GMT

    [ https://issues.apache.org/jira/browse/CB-1247?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13442601#comment-13442601
] 

Rob Van Wicklen commented on CB-1247:
-------------------------------------

Hi Jesse. I'm able to reproduce the problem using the helloworld example app that comes with
the LimeJS framework. Links and code are below. If you run this app on a Windows Phone, you'll
find that if you repeatedly drag your finger quickly from top to bottom or from left to right
on an empty area of the screen, you'll see the web view bounce effect more times than not.
The behavior is specific to Windows Phone.

app download link: https://build.phonegap.com/apps/116657/download/winphone/?qr_key=sD1PSxyq7jxyjSKTwzyz
LimeJS framework used to build the app: http://www.limejs.com/0-getting-started

Here's the source code for the app. This is just the example app code generated by LimeJS,
with 2 modifications. The first modification was to take your suggestion and add event handlers
designed to prevent the webview bounce effect. The second modification was to add a background
color, making it easy to see when the canvas is bouncing.

//set main namespace
goog.provide('helloworld');


//get requirements
goog.require('lime.Director');
goog.require('lime.Scene');
goog.require('lime.Layer');
goog.require('lime.Circle');
goog.require('lime.Label');
goog.require('lime.animation.Spawn');
goog.require('lime.animation.FadeTo');
goog.require('lime.animation.ScaleTo');
goog.require('lime.animation.MoveTo');


// entrypoint
helloworld.start = function(){

	var director = new lime.Director(document.body,1024,768),
	    scene = new lime.Scene(),

	    target = new lime.Layer().setPosition(512,384),
        circle = new lime.Circle().setSize(150,150).setFill(255,150,0),
        lbl = new lime.Label().setSize(160,50).setFontSize(30).setText('TOUCH ME!'),
        title = new lime.Label().setSize(800,70).setFontSize(60).setText('Now move me around!')
            .setOpacity(0).setPosition(512,80).setFontColor('#999').setFill(200,100,0,.1);


    //add circle and label to target object
    target.appendChild(circle);
    target.appendChild(lbl);

    //add target and title to the scene
    scene.appendChild(target);
    scene.appendChild(title);

	director.makeMobileWebAppCapable();

    //add some interaction
    goog.events.listen(target,['mousedown','touchstart'],function(e){

        //animate
        target.runAction(new lime.animation.Spawn(
            new lime.animation.FadeTo(.5).setDuration(.2),
            new lime.animation.ScaleTo(1.5).setDuration(.8)
        ));

        title.runAction(new lime.animation.FadeTo(1));

        //let target follow the mouse/finger
        e.startDrag();

        //listen for end event
        e.swallow(['mouseup','touchend'],function(){
            target.runAction(new lime.animation.Spawn(
                new lime.animation.FadeTo(1),
                new lime.animation.ScaleTo(1),
                new lime.animation.MoveTo(512,384)
            ));

            title.runAction(new lime.animation.FadeTo(0));
        });


    });

    // modification 1: add event handlers
    document.addEventListener('mousemove', function(e){e.preventDefault();});
    document.addEventListener('touchmove', function(e){e.preventDefault();});

    // modification 2: set background color
    document.body.style.backgroundColor = '#00CCCC';
        
	// set current scene active
	director.replaceScene(scene);

}


//this is required for outside access after code is compiled in ADVANCED_COMPILATIONS mode
goog.exportSymbol('helloworld.start', helloworld.start);

                
> An option similar to "webviewbounce" is needed that works on Windows Phone
> --------------------------------------------------------------------------
>
>                 Key: CB-1247
>                 URL: https://issues.apache.org/jira/browse/CB-1247
>             Project: Apache Cordova
>          Issue Type: Bug
>          Components: WP7
>    Affects Versions: 2.0.0
>         Environment: Windows Phone
>            Reporter: Rob Van Wicklen
>            Assignee: Jesse MacFadyen
>             Fix For: 2.1.0
>
>
> A "webviewbounce" option can be set to fix an app's viewable area in place on the iOS
screen, making it so that users cannot drag it and move it off the side of the screen. A similar
setting is needed for Windows Phone.
> Currently, even if the viewport size is set to the device screen dimensions and the scale
is fixed at 1.0, Windows Phone users can still drag the app's viewport which results in a
bounce effect similar to what's seen on iOS when the webviewbounce option isn't set to false.
> The Windows Phone WebBrowser control doesn't directly expose a property that lets you
eliminate the bounce, but the desired result can be acheived with a small amount of wrapper
code around the control. This would need to be implemented within Cordova. The following article
explains how to do it:
>  
> http://www.scottlogic.co.uk/blog/colin/2011/11/suppressing-zoom-and-scroll-interactions-in-the-windows-phone-7-browser-control
> Justification: the ability to eliminate the bounce effect is important for app developers
who want to create an experience that's similar to a native app. This is not currently possible
on Windows Phone.

--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators
For more information on JIRA, see: http://www.atlassian.com/software/jira

Mime
View raw message