In previous lesson, you have learnt how to create a classical static GUI like a Visual Form or an Image Visualizer, now it’s time to show you how to build a Dynamic GUI. For our example, we’re going to build a little thumbnails gallery from Youtube:

dynamic_layout

In part I, we will build a dynamic layout without event handling. We will see this in part II.

Let’s first do something very simple: show a single thumbnail from Youtube:


view layout [
    image load http://i2.ytimg.com/vi/e3wShd_bX8A/default.jpg
]

the single thumbnail will appear:
single_thumbnail

If you want to build the layout (block’s type) dynamically, you would write this:


layout-block: copy []
append layout-block 'image
append layout-block 'load
append layout-block http://i2.ytimg.com/vi/e3wShd_bX8A/default.jpg
view layout layout-block

So for building your gallery, you would just have to loop like this (this is nearly a “real-world” example so we have included the parsing of an url list of videos you copied and paste from youtube using the parse function - search parse for previous lessons):


youtube-urls: [
http://www.youtube.com/watch?v=AtyJbIOZjS8
http://www.youtube.com/watch?v=Uqxo1SKB0z8&feature=channel
http://www.youtube.com/watch?v=En-cHBv7UpA&feature=channel
http://www.youtube.com/watch?v=uG5NhkxQJQc&feature=channel
http://www.youtube.com/watch?v=2WjOn5TNjBM&feature=channel
http://www.youtube.com/watch?v=gCqQ2JcQWGs&feature=channel
http://www.youtube.com/watch?v=W61Q-EZ8R7M&feature=channel
http://www.youtube.com/watch?v=e3wShd_bX8A&feature=channel
http://www.youtube.com/watch?v=sEU9Q8NlOiY&feature=channel
http://www.youtube.com/watch?v=nDxsM5jLNxM&feature=channel
http://www.youtube.com/watch?v=AtyJbIOZjS8&feature=related
http://www.youtube.com/watch?v=o8rYl6K2STc&feature=related
http://www.youtube.com/watch?v=eZ0j0PbNA5g&feature=related
http://www.youtube.com/watch?v=xfZz-q8CRLE&feature=related
http://www.youtube.com/watch?v=PjtI2WZTZ9k&feature=related
]

layout-block: copy []

append layout-block 'across
counter: 0

foreach youtube-url youtube-urls [
    counter: counter + 1
    parse youtube-url [to "v=" thru "v=" [copy id to "&" | copy id to end] ]
    append layout-block 'image
    append layout-block 'load
    append layout-block rejoin [http://i2.ytimg.com/vi/ id "/default.jpg"]
    if ((mod counter 5) = 0) [append layout-block 'return]
]

;if you want to debug the layout-block content
;write clipboard:// mold layout-block

Window: layout layout-block
View/title Window "Michael Jackson Retrospective"

Bookmark and Share