CPScrollView on the iPad

[Bruno Ronchetti]

Hi everyone,

I really need my cappuccino app to scroll on the iPad.

After some dead-ends I have come up with this solution which sort of works, but is not complete (eg no scroll bars are shown). Here is the code:

in the appController:

function touchStart(event) {

    touchStartingPointX = event.touches[0].pageX;

    touchStartingPointY = event.touches[0].pageY;

}

function touchMove(event) {

    var deltaX = event.touches[0].pageX - touchStartingPointX;

    var deltaY = event.touches[0].pageY - touchStartingPointY;

    [verticalScrollView  moveByOffset:CGSizeMake(deltaX, deltaY)];

    [horizontalScrollView  moveByOffset:CGSizeMake(deltaX, deltaY)];

    touchStartingPointX = event.touches[0].pageX;

    touchStartingPointY = event.touches[0].pageY;

}

 

@implementation AppController : CPObject

{

    float       id      touchStartingPointX;

    float       id      touchStartingPointY;

}

- (void)applicationDidFinishLaunching:(CPNotification)aNotification

{    

    touchStartingPointX = 0.0;

    touchStartingPointY = 0.0;

    var theWindow = [[CPWindow alloc] initWithContentRect:CGRectMakeZero() styleMask:CPBorderlessBridgeWindowMask];

    [theWindow setAcceptsMouseMovedEvents:YES]

    [theWindow setAutorecalculatesKeyViewLoop:YES];

    

    windowContentView = [theWindow contentView];

    [windowContentView setBackgroundColor:KKRoAContentViewBackground];

    [windowContentView setPostsFrameChangedNotifications:YES];

   

    var element = windowContentView._DOMElement;

    element.addEventListener("touchstart", touchStart, false);

    element.addEventListener("touchmove", touchMove, false);

   

    verticalScrollView = [[CPScrollView alloc] initWithFrame:[windowContentView frame]];

    [verticalScrollView setHasVerticalScroller:YES];

    [verticalScrollView setHasHorizontalScroller:NO];

    [verticalScrollView setAutohidesScrollers:NO];

    [verticalScrollView setAutoresizingMask:CPViewWidthSizable | CPViewHeightSizable];

    verticalContentView = [[CPView alloc] initWithFrame:CGRectMake(0.0, 0.0, [windowContentView frame].size.width, 1060.0)];

    [verticalContentView setAutoresizingMask:CPViewWidthSizable | CPViewMaxYMargin];

    [verticalContentView setBackgroundColor:[CPColor greenColor]];

    [verticalScrollView setDocumentView:verticalContentView];

    horizontalScrollView = [[CPScrollView alloc] initWithFrame:CGRectMake(0.0, KKRoAY0, [windowContentView frame].size.width, [verticalContentView frame].size.height - KKRoAY0- KKRoAY2)];

    [horizontalScrollView setHasVerticalScroller:NO];

    [horizontalScrollView setHasHorizontalScroller:YES];

    [horizontalScrollView setBackgroundColor:[CPColor redColor]];

    [horizontalScrollView setAutoresizingMask:CPViewWidthSizable | CPViewHeightSizable];

    contentView = [[CPView alloc] initWithFrame:CGRectMake(0.0, 0.0, 1800.0, [horizontalScrollView frame].size.height)];

    [contentView setAutoresizingMask:CPViewWidthSizable | CPViewMaxYMargin];

    [horizontalScrollView setDocumentView:contentView];

    

    [windowContentView addSubview:verticalScrollView];

    [verticalContentView addSubview:horizontalScrollView];

               ...

               } 

Could someone please tell if I am doing something horrible or point me in the right direction to improve my solution (eg attach the eventListener to the scrollViews directly etc)?

Thanks a lot. Bruno. 

[Benjamin FROLICHER]

Hi
I dont read all your code but il would suggest to implement your code into a dedicated (or an overrided) scrollview and test your code with multiple scrollview and tableview to see if this is ok on touch devices and also on desktop.
You could also only activate your code if your are on touch devices. This can be done easily in javascript.

I'll read it all tomorrow and maybe test.

Ben

Envoyé de mon iPhone 5

[David Lewis]

Bruno,

We are currently trying to figure out the same problem and will help with testing your ideas.

Our Facebook app https://apps.facebook.com/shotklip has two dialogs that do not scroll on iPad and we are actively working on it.

David Lewis

--
You received this message because you are subscribed to the Google Groups "Cappuccino & Objective-J" group.
To unsubscribe from this group and stop receiving emails from it, send an email to objectivej+...@googlegroups.com.
To post to this group, send email to objec...@googlegroups.com.
Visit this group at http://groups.google.com/group/objectivej.
For more options, visit https://groups.google.com/groups/opt_out.

[Bruno Ronchetti]

Hi,

continuing on this, also with help from BiB1:

You can get smoother scrolling by using a threshold for triggering the move ( i.e. do not move the view if your finger moved by less than x pixels) like that:

function touchMove(event)

{

    var deltaX = event.touches[0].pageX - touchStartingPointX;

    var deltaY = event.touches[0].pageY - touchStartingPointY;

    if ( Math.abs(deltaX) > 5.0 || Math.abs(deltaY) > 5.0)

    {

        [verticalScrollView  moveByOffset:CGSizeMake(0.0, deltaY)];

        [horizontalScrollView  moveByOffset:CGSizeMake(deltaX, 0.0)];

        touchStartingPointX = event.touches[0].pageX;

        touchStartingPointY = event.touches[0].pageY;    

        event.stopPropagation();

    }

}

Also, if your view contains a CPCollectionView (as in my case) the drag event would normally start a collection item drag. You have to disable it by:

-(BOOL)collectionView:(CPCollectionView )aCollectionView canDragItemsAtIndexes:(CPIndexSet )indexes withEvent:(CPEvent)anEvent

{

    return NO;

}

in the CPCollectionView delegate.

Regards. Bruno

[Bruno Ronchetti]

Aha,

and you get scrollers if you say:

function touchMove(event)

{

    [verticalScrollView flashScrollers];

    [horizontalScrollView flashScrollers];

    ...

}

having previously defined:

    [verticalScrollView setScrollerStyle:CPScrollerStyleOverlay];

    [horizontalScrollView setScrollerStyle:CPScrollerStyleOverlay];

Regards. Bruno.

[Benjamin FROLICHER]

Works fine on iOS and Android : 

/*

 * TouchScrollView.j

 * iPadScrolling

 *

 * Created by Benjamin FROLICHER

 on December 8, 2013.

 * Copyright 2013, Benjamin FROLICHER All rights reserved.

 */

@import <Foundation/Foundation.j>

@import <AppKit/AppKit.j>

@implementation TouchScrollView : CPScrollView

{

    float touchStartingPointX;

    float touchStartingPointY;

}

- (id)initWithFrame:(CGRect)frame

{

self = [super initWithFrame:frame];

if(self)

{

[self addTouchListeners];

}

return self;

}

- (id)initWithCoder:(CPCoder)aCoder

{

self = [super initWithCoder:aCoder];

if(self)

{

[self addTouchListeners];

}

    return self;

}

- (void)addTouchListeners

{

if("ontouchstart" in document.documentElement)  // Works fine on iOS and Android

{ 

var element = self._DOMElement;

element.addEventListener("touchstart", function (event) {[self performTouchStart:event]}, false);

    element.addEventListener("touchmove", function (event) {[self performTouchMove:event]}, false);

}

}

- (void)performTouchStart:(id)event

{

self.touchStartingPointX = event.touches[0].pageX;

self.touchStartingPointY = event.touches[0].pageY;

}

- (void)performTouchMove:(id)event

{

var deltaX = event.touches[0].pageX - touchStartingPointX;

    var deltaY = event.touches[0].pageY - touchStartingPointY;

    [self moveByOffset:CGSizeMake(-deltaX, -deltaY)];

    touchStartingPointX = event.touches[0].pageX;

    touchStartingPointY = event.touches[0].pageY;

    event.stopPropagation();

}

@end

[Mathieu Monney]

If it fixes the problem on iOS and Android, why not embedding this piece of code into the stock CPScrollView and detecting the tablet case before enabling it?

Mathieu

[Benjamin FROLICHER]

it's only a patch for scrollview, tableview doesn't works correctly and also all other scrollview based component.

[Gerard Iglesias]

Thank for the trick, I just needed this kind of stuff today :)

[daboe01]

any further progress on this?

i really need to get our app up and running on ios.

best wishes,

daniel

[daboe01]

my hotfix: [CPScrollView setGlobalScrollerStyle:CPScrollerStyleLegacy];

[daboe01]

i just filed a PR that makes all scrollviews scroll with touch (tested on iphone):

https://github.com/cappuccino/cappuccino/pull/2612

[Martin Carlberg]

Hi,

I have now merged this into master.

- Martin

Visit this group at https://groups.google.com/group/objectivej.
For more options, visit https://groups.google.com/d/optout.