Trouble creating a View with a scroll ability

I feel like my current implementation should work, but have had no success in the simulator. Hopefully someone can help me with this or suggest a more efficient way of doing so.

The problem is, I want to display a lot of text, and want to enable the user to be able to scroll down to read through it all.  I'm trying to accomplish this by adjust my 'Y' variable in View from my up/down keys in the delegate.

I can successfully get it to print, but for some reason it can't find the variable 'Y'

Thanks in advanced! 

class seeWorkoutView extends Ui.View {

	var scroll;
	function initialize() {
		View.initialize();
		scroll = 0;
		return true;
	}
	function onUpdate(dc) {
		clearScreen(dc); 
		drawPlan(dc);	
	}
	function drawPlan(dc) {
		var y = 5 + scroll;
		var x = $.screenWidth / 2;
		var font = Gfx.FONT_MEDIUM;
		var justification = Gfx.TEXT_JUSTIFY_CENTER;
		
		for (var i = 0; i < trainingPlan.steps; i++) {
			var text = trainingPlan.getDisplayArray(i);
			dc.drawText(x, y, font, text, justification);
			y += 35;
		}	
	}
	function up() {
		System.println("scroll");                   //THIS WORKS
		scroll += 5;                                //THIS DOES NOT WORK
		                                            //>> I GET A 'SCROLL' CAN'T
		                                            //   BE FOUND ERROR
	}
}
class seeWorkoutDelegate extends Ui.BehaviorDelegate {
	function initialize() {
		BehaviorDelegate.initialize();
	}
	function onSelect() {
		Ui.switchToView(
			new SummitPairingView(), 
			new SummitPairingDelegate(), 
			Ui.SLIDE_IMMEDIATE
		);
	}
	function onNextPage() {
		seeWorkoutView.up();                        //HERE IS WHERE I'M TRYING
		                                            //TO ADD TO 'Y'

    }
	function onPreviousPage() {
		
	}
	function onBack() {

	}
}

  • The quickest way to get things moving is to move line 3 before line 1 (make scroll a global).

    once you change scroll, you're not updating the view, so in up() you'll also want to do a 

    Ui.requestUpdate()

    but the way I'd do it is eliminate up(), and in onNextPage() just do

    scroll+=5;

    Ui.requestUpdate();

    You'll also want to check the range of scroll

    onPreviousPage() would be the same but with scroll-=5; and again a range check.

  • The actual problem is on line 44. Your seeWorkoutDelegate class doesn't have a variable named seeWorkoutView. When you reference the symbol seeWorkoutView, the runtime will locate the class of the same name and it will get a reference to the class (not an instance of that class) and then it will call up on it. When up is called, it will try to locate a variable scroll, and this will fail (because the variable would have to be static or in an outer scope to be found).

     suggested moving scroll to be a global variable. This will effectively and efficiently solve the problem. Another option is to give your delegate a reference to the view.

    class seeWorkoutView extends Ui.View {
    
    	hidden var mScroll;
    	
    	function initialize() {
    		View.initialize();
    		mScroll = 0;
    	}
    	
    	function onUpdate(dc) {
    		clearScreen(dc); 
    		drawPlan(dc);	
    	}
    
    	function drawPlan(dc) {
    		var y = 5 + mScroll;
    		var x = $.screenWidth / 2;
    		var font = Gfx.FONT_MEDIUM;
    		var justification = Gfx.TEXT_JUSTIFY_CENTER;
    		
    		// where it trainingPlan coming from? is it a global?
    		
    		for (var i = 0; i < trainingPlan.steps; i++) {
    			var text = trainingPlan.getDisplayArray(i);
    			dc.drawText(x, y, font, text, justification);
    			y += 35;
    		}	
    	}
    	
    	function up() {
    		mScroll += 5;
    		WatchUi.requestUpdate();
    	}
    }
    class seeWorkoutDelegate extends Ui.BehaviorDelegate {
    
        hidden var mView;
        
    	function initialize(view) {
    		BehaviorDelegate.initialize();
    		mView = view;
    	}
    	
    	function onSelect() {
    		Ui.switchToView(
    			new SummitPairingView(), 
    			new SummitPairingDelegate(), 
    			Ui.SLIDE_IMMEDIATE
    		);
    	}
    	
    	function onNextPage() {
    		mView.up();
    		return true;
        }
        
    	function onPreviousPage() {
    		// mView.down();
    		// return true;
    	}
    }

    When you create the delegate, you'll need to pass a reference to the view. e.g.,

    function getInitialView() {
        var view = new seeWorkoutView();
        var delegate = new seeWorkoutDelegate(view);
        return [ view, delegate ];
    }

    One thing that may help you here to make things a bit more clear is to use a naming convention. In MonkeyC our convention is

    1. Module and type names are camel case with an initial uppercase letter.
    2. Local variables are camel case and start with an initial lowercase letter.
    3. Class member variables use a prefix and are camel case. Typically the prefix is m.

    With this convention, your class seeWorkoutView would be SeeWorkoutView. When calling SeeWorkoutView.up(), you'd notice that you were calling a function on a class type. This itself isn't illegal, but it won't do what you want unless the function being called is a static class function (which it is not in this case).

  • Travis this helped me out immensely!

    Thanks so much for the tips, this was the exact answer I was looking for!