Switching between the Tabs

Now that the “For You” screen is also ready, we can make it possible to switch between the two screens.

So when we tap on the “Library” tab this screen should be visible, while the “For You” screen should be hidden.

$.Tab_Library.onTap ->
    scroll_library.visible = yes
    scroll_for_you.visible = no

And the reverse should happen when tapping the “For You” tab.

$.Tab_For_You.onTap ->
    scroll_for_you.visible = yes
    scroll_library.visible = no

By the way, here’s how you can quickly add an event to any imported layer:

But the correct tab should also be made active. We do that by adding these lines to both event handlers:

# Make all tabs gray
for tab in $.Tabs.children
    tab.saturate = 0
    tab.opacity = .6
# Except this one
@saturate = 100
@opacity = 1

The for…in loop makes all the tabs gray, just like we did earlier, and the two last lines make the current tab red again.

In those last two lines we’re actually writing this:

this.saturate = 100
this.opacity = 1

With ‘this’ being the tab that received the event, the one that was tapped. But instead of ‘this.’ you can also write ‘@’.

We add one more line underneath these onTap handlers because when the prototype starts, the “For You” screen should be hidden:

# Initially hide the “For You” screen
scroll_for_you.visible = no