Scroll area scrollable viewport in the App studio

CS Principles Coding and Debugging Help
1

I am playing around in the App studio and looking to help my students make the richest apps they can and not finding anything in the UI toolkit related to a scrollable viewport.

Specifically, I am messing around here:

I would like to be able to place buttons and images in a scrollable area. Is there any way to do this?
I see I can scroll text in my text area, but if I want to make a simple task list sort of app, is there a way to isolate clickable elements in the text area?

3

I found a not terrible answer here: scrollingWindow - App Lab (code.org)

The difficult bit is that all elements in the scrollable area need to have known IDs and you must build your own scroll mechanics. But collecting all the IDs into an array isn’t the end of the world, I guess.

4

Thanks for sharing this!

5

The reason there is no scrolling “element” in app lab is because it cannot be a stand-alone element, it must be filled with other elements.
The best way to do this is to use a container and to give it overflow-y: scroll style.

var container = container("scrollContainer", "")
setStyle("scrollContainer", "max-height:100%; overflow-y:scroll")
setParent("button1", "scrollContainer")

Alternatively, you can use Nom, a framework for Applab. You can see a demo of the scrolling here, and a good (currently incomplete) example of what Nom can do here.

1 Like
6

You have written some very sophisticated code.

I am thinking that a Create Task judge isn’t going to want to scroll through a thousand lines of GUI rendering code to find the two dozen lines of code for a to do list. Instead, think outside the viewport. Look at the code in unit 5 lesson 3 bubble 6. It shows one element from a list of many. How would you modify that to show 2 consecutive elements from the list? Now, what about 3? Think about it.

7

@infinitestasis this is perfect!
I had been looking for a way to group my elements hierarchically for a handful of reasons and if I can push elements into a DIV and use CSS I am really good-to-go in all kinds of directions. Is there a limit to the parents of parents I can make (not that I would need much more than 1)? Also, if I move an element into a parent, do I lose my event attachments?

…well… regardless, I can play from here.

8

HTML is hiearchal, there is no limit to how many nested elements there can be. On most webpages, you can easily find up to 20 layers. Internally, html is managed by DOM. Since each element is an object, (hence document object model), event listeners should carry over when you change the parent.

9

Is there any limit to the HTML I can create? I see “container()” takes a content string. Can I shove any-ol HTML5 in there? I see there is even a method for reading web-services. Any chance there is a means of doing a post or a put?

10

It can take html5, but the tags are very limited. My suggestion is to create a new element, and then set the parent of the element to the parent element.
The bottom is suggested due to versatility and what not.

//this
var parent = container("parent", "<button>Click Me</button>")
//vs this
var parent = container("parent")
button("button", "Click Me")
setParent("button", "parent")

Post/put is not really allowed since most of the domains are blocked off. It is sort of possible to do it with a proxy, but generally you can’t do servers for a project.

1 Like