Scrollable screen in app lab

CS Principles
1

Is it possible somwhow to make the screen in app lab scrollable?

2

@jesyversen I found a previous thread that addressed this question. Check it out here. Please let us know if this doesn’t fill your need.

3

First off: THE DEMO HAS A VERTICAL SLIDER.
Here is a theory of operation.
A good task would be to have the slider size and/or scale relate to the span of the elements that need scrolling.

4

for making a screen scrollable, go to text mode and use below code:
setStyle(“screen_id”,“width:318px;height:425px;overflow-y:auto;overflow-x:auto;”);

This will give you a vertical and horizontal slider, if applicable

5

I would do it a bit differently like this:

setStyle("screen1","height:600px");
setStyle("divApplab","overflow:scroll");

The problem with making the screen scrollable is that you have to use coordinates to place elements on the screen. App Lab won’t let you drag and drop on a screen bigger than 450 pixels tall. Demo:

6

You also have to ask yourself if you need to scroll the screen or scroll the data across the screen. That is, do you need to draw an enormous screen with lots of elements, potentially repeated, or is it better to leave a fixed size screen and move the data across that?

Consider a spreadsheet program. You would like it to handle sheets much bigger than the cells seen on the screen. Let’s say a sheet can be 20 x 20 but you can only fit 4 x 10 cells on the screen at a time.

One way to handle this is to create 400 buttons to represent each cell and scroll all 400 buttons across the screen. That can work by either setting the screen to be big enough to hold all 400 buttons and setting the properties for it to scroll. Or by moving all 400 button coordinates in parallel.

The other way to handle this is to create 40 buttons to represent the visible cells in a 4 x 10 grid and scroll the data from the 20 x 20 sheet across those fixed position buttons. In this example, I choose to do the latter. It makes sense to do it that way. Code.org - App Lab. Use the arrow keys to see how scrolling works with a fixed screen and scrolling data.

Which is easier? Scrolling the screen is actually easier after you create all those buttons. But it doesn’t scale up well. If you decide to increase the size of your sheet you increase the number of buttons. By reusing a fixed set of buttons we can make our spreadsheet as big as we want.

2 Likes