Fancier Scrolling List

#!/usr/bin/env lua5.1

-- A script to create a scrollable area in an interesting way
-- with kinetics and a fading scrollbar

-- FancyPants Lua includes
require [[fp]]
require [[fptheme]]
require [[fpwidgets]]

-- Width and height of scrollbar area.
SWIDTH = 200
SHIGHT = 400

-- Height of each entry line in the scrollbar
EHEIGHT = 56

-- Start x and y coordinates for each entry in the list
STARTX = 100
STARTY = 20

-- Add a background from the theme.  This looks into the theme and get the
-- background property.
bg = fp.image{ style = "background" }

-- The Lua dofile function imports another file and executes it as Lua.
dofile("data/sblist_data");

-- Create the scrollbar, set kinetic and fading
scroller = fp.scrollbar{ x = STARTX, y = STARTY, w = SWIDTH, h = SHIGHT, 
			 kinetic = 1, fading = 1 }

-- Create a vertical layout to put the entries into.  The layout 
-- will automatically place the entries one after the other.
layout = fp.layout{ dir = "vertical", x = STARTX, y = STARTY, 
		    w = SWIDTH, h = SHIGHT }

-- Declare the table of entries and clips.
entry = {}
clip  = {}
t  = {}

-- We need to keep track of the total height manually so that we can 
-- resize the clip at the end.
totalheight = 0

-- We iterate over the list of contacts.
for i, v in ipairs(Contacts) do

   even = ((i % 2) == 0)

   -- Create a container for grouping the elements within each entry.
   entry[i] = fp.container{}

   if (even) then
      -- Every second line is to have a different background colour.  
      -- This is achieved by creating a coloured rectangle and putting
      -- it behind the other elements in the entry.
      entry[i]:add(fp.rectangle{ x = EHEIGHT, y = 0,
				 w = SWIDTH, h = EHEIGHT, 
				 r = 5, g = 5, b = 5, a = 50 })
   end

   -- The elements in an entry are:
   --	checkbox
   --	name, we use a "strong" text style for this
   --	location, we use a "small" text style for this
   --	image, the image has special handing to resize it and
   --	centre it
   entry[i]:add(fp.checkbox{})
   entry[i]:add(fp.text{ text = v[1], style ="strong" }, 50, 10)
   entry[i]:add(fp.text{ text = v[2], style ="small" }, 50, 30)

   -- Align the image in the vertical middle of the list item.
   img = fp.image{ file = v[3] }
   g = img:geometry_get()
   entry[i]:add(img, 130, (EHEIGHT - g.h) / 2 )

   -- Create a clip as a dummy child of scrollbar.
   -- Each entry has its own clip as a clip can only be associated with
   -- one object at a time.  The clip is at the correct offset from the 
   -- top for the entry and the width of the scrollbar and height of
   -- an entry.
   -- This is necessary as the scrollbar only displays shows to the extent
   -- of something being in the scrollable area.
   y_offset = STARTY + ((i - 1) * EHEIGHT)
   clip[i] = fp.clip{ w = SWIDTH, h = EHEIGHT }

   -- We move the clip into position after we add it to the scrollbar
   -- as the scrollbar moves everything to its (0, 0) upon adding.
   scroller:add(clip[i])
   clip[i]:move(STARTX, y_offset)

   -- Setting the clip on the entry makes it only visible within the 
   -- shape / size of the scrollbar area
   entry[i]:clip_set(clip[i])	

   -- We are going to move the entries into position with a
   -- transform effect.  This will give them a nice slide-in.
   -- To do this we need the start and end coordinates of each entry.
   -- The start and end y coordinates are the same for this effect
   -- as the elements slide from left to right and left only.
   y = STARTY + ((i - 1) * EHEIGHT)

   -- We set up the transform by moving even elements to the right
   -- and odd elements to the left to start with.  The transform
   -- effect will slide them in.
   if (even) then
      entry[i]:move(STARTX + (3 * SWIDTH), y)
   else
      entry[i]:move(STARTX - (3 * SWIDTH), y)
   end

   -- We keep a count of the entries as the transform finishes as the 
   -- order of them completing is not guaranteed.
   count = 0

   -- Transform the entries to the final location.
   -- The anonymous function is called when the transform is complete.
   g = { x = STARTX, y = y, w = SWIDTH, h = EHEIGHT }

   entry[i]:transform(g, function()
			    count = count + 1

			    -- Unset the clip from the entry and hide the 
			    -- clip 
			    entry[i]:clip_set()
			    clip[i]:hide()

			    -- Add the entry to the entry layout once 
			    -- the transform is complete.
			    layout:child_add(entry[i])

			    -- Once all the entries have completed their
			    -- transform add the layout to the scrollable
			    -- area and hide the clip
			    if (count == #Contacts) then
			       scroller:add(layout)
			    end
			 end)
end

-- Finally, begin the main loop.
fp.begin()