rss

Corona SDK: Lua Floating Picker UI

Tuesday, August 23, 2011

This post explains how to use the Picker UI implemented in XUI SDK.



In order to use this user interface, we need to import the Picker API:
local picker = require("Picker")
local toolkit = require("DateToolkit")

Then we have to initialize the picker data:
local data = {}
local dataDefts = {1, 1, 1}

-- Used for one wheel picker
local function setupOneWheels()
  data[1] = {"Yes", "No", "Maybe Yes", "Maybe No", "Maybe"}
  local dataDefts = {2}
end

-- Used for two wheels picker
local function setupTwoWheels()
  data[1] = {}
  data[2] = {}

  for j = 1, 9 do 
    data[1][j] = "0" .. j 
  end

  data[2]= { 
      "Jan", "Feb", "Mar",
      "Apr", "May", "Jun",
      "Jul", "Aug", "Sep",
      "Oct", "Nov", "Dec"
    }
end

-- Used for three wheels picker
local function setupDateWheels()
  data[1] = {}
  data[2] = {}
  data[3] = {}

  for j = 1, 9 do 
    data[1][j] = "0" .. j 
  end

  local i = 9
  for j = 10, 31 do 
    data[1][i] = j
    i = i + 1
  end

  data[2]= { 
      "Jan", "Feb", "Mar",
      "Apr", "May", "Jun",
      "Jul", "Aug", "Sep",
      "Oct", "Nov", "Dec"
    }

  -- Year
  local i = 1
  local iYear = 2011
  for j = iYear, 2020 do 
    data[3][i] = j
    i = i + 1
  end

  -- Setup today date
  local yy, mm, dd =  toolkit.getCurrentDateYMD()
  print((yy-iYear+1)..","..mm..","..dd)
  dataDefts = {dd, mm, yy-iYear+1}
end

We setup the event listener, which is used to retrieve the selected value.
local onRelease = function( event )
  if #event.values == 3 then
    local pickerdate = event.values[3] .. 
                       " " .. event.values[2] ..
                       " " .. event.values[1]

    print(toolkit.formatDate(pickerdate, 
                                  "yyyy/mm/dd",
                                  "(%d+) (%a+) (%d+)"))

  elseif #event.values > 0 then
    for j = 1, #event.values do
      print("Slot " .. j .. ": " .. event.values[1])
    end
  end
  print("onReleaseCallback")
end

We describe what to do when the user closes the picker.
local onClose = function( event )
  print ("onClose")
end

And we initialize the Picker UI using the desired parameters
--setupTwoWheels()
setupDateWheels()
--setupOneWheels()

picker.newPickerUI {

  -- Optional. Default is center
  --align = "floating",

  -- Optional. Used to handle multiple picker instances
  uid = 1,
    
  -- List of values for each selector
  data = data,
  
  -- On release event. Find picked values in event.values
  onRelease = onRelease,
  
  onClose = onClose,

  -- Optional. Offset x
  dx = 100,
  
  -- Optional. Offset y
  dy = 100,

  moveWheels = dataDefts,

  -- Optional
  contentWidth = display.contentWidth,
  contentHeight = display.contentHeight,

  withFadingBg = true

}

Now just enjoy it!

2 comments:


Anonymous said...

hi

how can i get the files?
and if you sell it how can I buy? how can I contact you?



Bruno Simões said...

Source code is available. Read the post and you will find the URL.