Mailing-List: contact callback-dev-help@incubator.apache.org; run by ezmlm
Precedence: bulk
Reply-To: callback-dev@incubator.apache.org
Date: Tue, 28 Aug 2012 05:43:09 +1100 (NCT)
From: "Rob Van Wicklen (JIRA)" <jira@apache.org>
To: callback-dev@incubator.apache.org
Message-ID: <1426424287.2506.1346092989156.JavaMail.jiratomcat@arcas>
In-Reply-To: <977706589.14831.1345052738327.JavaMail.jiratomcat@arcas>
Subject: [jira] [Commented] (CB-1247) An option similar to "webviewbounce"
 is needed that works on Windows Phone
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 7bit


    [ 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