List With Changing Orientation

Download the source code.
Play the video
Back








10









20









30









40









50









60









70







#!/usr/bin/env lua5.1
require [[fp]]
require [[fptheme]]
require [[fpwidgets]]

-- Width and height of an entry.
EWIDTH  = 200
EHEIGHT = 56

-- Width and height of the scrollable area when in 
-- portrait mode
SPORTRAIT_H = (3/4)*fp.h
SPORTRAIT_W = EWIDTH

-- Width and height of the scrollable area when in 
-- landscape mode
SLANDSCAPE_H = EHEIGHT * 1.6
SLANDSCAPE_W = (1/2)*fp.w

-- 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 scrollable area in portrait mode and set kinetic scrolling
scroller = fp.scrollbar{ x = 130, y = 50, w = SPORTRAIT_W, h = SPORTRAIT_H,
			 kinetic = true }

-- Create a vertical layout to put the entries into.  The layout 
-- will automatically place the entries one after the other.
list = fp.layout{ dir = "vertical" }
scroller:add(list)

-- We add a button to generate the orientation change event.  On a device
-- this event would be generated by an accelerometer.
dirbutton = fp.button{ x = fp.w - 150, y = 50, text = "vertical" }

-- There can be more than one callback for each event so they
-- need to be named.
dirbutton.cb.mouse_up.me = 
   function ()
      -- Toggle button to change orientation of the scrollable
      -- area.  The text on the button changes along with the 
      -- orientation of the scrollable area.
      g = scroller:geometry_get()
      if (dirbutton:text_get() == "vertical") then
	 newdir = "horizontal"
	 g.w    = SLANDSCAPE_W
	 g.h    = SLANDSCAPE_H
      else
	 newdir = "vertical"
	 g.w    = SPORTRAIT_W
	 g.h    = SPORTRAIT_H
      end
      dirbutton:text_set(newdir)
      list:direction_set(newdir)
      -- We resize the scrollbar widget to make best use of the on
      -- screen area.
      scroller:resize(g.w, g.h)
   end

entry = {}
for i, v in ipairs(Contacts) do
   -- Create a container to store the items in a list element. 
   entry[i] = fp.container{}
   list:child_add(entry[i])

   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)
   entry[i]:add(fp.image{ file = v[3], w=40, h=40 }, 130, 10)
   entry[i]:resize(EWIDTH, EHEIGHT)
   entry[i]:show()
end

fp.begin()