Creating Picker Views - Gideros (iOS only)

Corey created Wax, opened up the iOS platform to Lua. Andy Bower revisited this and brought it as a plug-in for Gideros. Now creating UI elements in Gideros is easy and fun, you get the complete power and functionality from Apple in-built into your Lua application. In this article, we shall look at how to create a picker view.


This is what we shall create

First let us include the wax library

  require "wax"

The first thing we need to do is create a picker view by initialising a new UIPickerView.

  local picker = UIPickerView:init()
  getRootViewController():view():addSubview(picker)

If we run this as is now, we see a black rectangle on the screen. Let us show the selection Indicator on the picker.

  picker:setShowsSelectionIndicator(true)

Now we can see an empty picker on the screen with the selection indicator.

We need to set the protocols UIPickerViewDataSource and UIPickerViewDelegate, one shall provide the data for drawing the picker while the delegate shall provide the functions to handle when an item is selected.

So first we set up the delegate and the dataSource as

  waxClass{"UIPickerView", NSObject, protocols={"UIPickerViewDataSource", "UIPickerViewDelegate"}}

  picker:setDelegate(self)
  picker:setDataSource(self)

We need to set up the number of components in the pickerView via the function numberOfComponentsInPickerView and pickerView_numberOfRowsInComponent function. The first tells the picker view about the number of sections in the pickerView and the other function tells the pickerView about the number of Rows in the section (called the component).

  function numberOfComponentsInPickerView(self, theView)
    return 2
  end 

  function pickerView_numberOfRowsInComponent(self, theView, component)
    return 10
  end 

Now if we run the app, we can see two sections but all you can see are '?' question marks. We need to set the title of the items on the picker.

  function pickerView_titleForRow_forComponent(self, theView, row, component)
    return "Item " .. row
  end 

Now, when we run the app, we can see the Picker with the items.

The last step is to capture when an item is selected, we can capture that with the pickerView_didSelectRow_inComponent function.

  function pickerView_didSelectRow_inComponent(self, theView, row, component)
    print("Selected :", row, "in component", component)
  end 

And voila, we have a functional ListView

  require "wax"

  waxClass{"UIPickerView", NSObject ,protocols={"UIPickerViewDataSource", "UIPickerViewDelegate"}}

  local picker = UIPickerView:init()
  getRootViewController():view():addSubview(picker)

  picker:setShowsSelectionIndicator(true)

  function numberOfComponentsInPickerView(self, theView)
    return 2
  end 

  function pickerView_numberOfRowsInComponent(self, theView, component)
    return 10
  end 

  picker:setDelegate(self)
  picker:setDataSource(self)

  function pickerView_titleForRow_forComponent(self, theView, row, component)
    print(row, component)
    return "Item " .. row
  end 

  function pickerView_didSelectRow_inComponent(self, theView, row, component)
    print("Selected :", row, "in component", component)
  end 

If you need to know how to get the Wax Plug-in, then you can head over to Andy Bower's blog at (http://bowerhaus.eu/blog/files/hot_wax.html) or to directly download the same from GitHub at (https://github.com/bowerhaus/BhWax) and compile the plug-in with the Gideros Player for the simulator or the device.