Text fields and tabs

I am trying to set up an app that allows the user to enter some information i into a database. I am still trying to get some of the UI details sorted out.

I have set up a tab bar with 4 tabs. Each tab controls a text box/text label pair which are in a group. When I select the different tabs, the previously selected group is supposed to disappear (alpha set to 0). However, only the label is removed, the text box still remains on the screen in the simulator.

I’m not sure how to get both elements of the group to disappear.


– main.lua


– require widget to use tab bar

local widget = require (“widget”) 

–Create table of pages. Each page is a display group

local page = {}

page[1]=display.newGroup()

page[2]=display.newGroup()

page[3]=display.newGroup()

page[4]=display.newGroup()

–text box and label for group 1

local datefieldlabel = display.newText (“Date:”, (display.contentWidth*.05), (display.contentHeight*.15), native.systemFont, 20)

local datefield = native.newTextField((display.contentWidth*.05), (display.contentHeight*.2), (display.contentWidth*.3), 30)

datefield.isEditable=true

datefield.inputType = “number”

page[1]:insert (datefieldlabel)

page[1]:insert (datefield)

–text box and label for group 2

local attendancefieldlabel = display.newText (“Attendees:”, (display.contentWidth*.05), (display.contentHeight*.33), native.systemFont, 20)

local attendancefield = native.newTextField((display.contentWidth*.05), (display.contentHeight*.37), (display.contentWidth*.3), 30)

attendancefield.isEditable=true

attendancefield.inputType=“number”

page[2]:insert (attendancefieldlabel)

page[2]:insert (attendancefield)

–text box and label for group 3

local infofieldlabel = display.newText (“Event Information:”, (display.contentWidth*.05), (display.contentHeight*.42), native.systemFont, 20)

local infofield = native.newTextField((display.contentWidth*.05), (display.contentHeight*.45), (display.contentHeight*.5), (display.contentHeight*.45))

infofield.isEditable=true

infofield.inputType=“default”

page[3]:insert (infofieldlabel)

page[3]:insert (infofield)

–text bx and label for group 4

local stufflabel = display.newText( “stuff”, (display.contentWidth*.05), (display.contentHeight*.05), native.systemFont, 20 )

local stufffield = native.newTextField( (display.contentWidth*.05), (display.contentHeight*.50), (display.contentHeight*.5) , (display.contentHeight*.45))

page[4]:insert (stufflabel)

page[4]:insert (stufffield)

–make all pages transparent. Set alpha to 0

page[1].alpha=0

page[2].alpha=0

page[3].alpha=0

page[4].alpha=0

–variable to select page to be shown

local selectedOnLoad = 1

–[[local function onTabSelect( event )

   local pressedTab = event.target

   print( pressedTab._id…" pressed!" )

end]]

local function onTabSelect( e )

   for i=1, #page do

      if (i==e.target._id) then 

         page[i].alpha=1

      else

         page[i].alpha=0

      end

   end

   print (e.target._id)

end

local tabButtons = 

{

   {

      id=1,

      label = “Event Contact”,

      width = 32, height = 32,

      labelColor = { default = {0,0,0}, over = {255,255,255} },

      onPress = onTabSelect,

      selected = true,

      defaultFile = “assets/tabIcon.png”,

      overFile = “assets/tabIcon-down.png”

   },

   {

      id=2,

      label = “Event Info”,

      width = 32, height = 32,

      labelColor = { default = {0,0,0}, over = {255,255,255} },

      onPress = onTabSelect,

      selected = false,

      defaultFile = “assets/tabIcon.png”,

      overFile = “assets/tabIcon-down.png”

   },

   {

      id=3,

      label = “Resources Used”,

      width = 32, height = 32,

      labelColor = { default = {0,0,0}, over = {255,255,255} },

      onPress = onTabSelect,

      selected = false,

      defaultFile = “assets/tabIcon.png”,

      overFile = “assets/tabIcon-down.png”

   },

   {

      id=4,

      label = “Additional Info”,

      width = 32, height = 32,

      labelColor = { default = {0,0,0}, over = {255,255,255} },

      onPress = onTabSelect,

      selected = false,

      defaultFile = “assets/tabIcon.png”,

      overFile = “assets/tabIcon-down.png”

   },

}

–set tab to be selected

tabButtons[selectedOnLoad].selected=true

page[selectedOnLoad].alpha=1

local tabBar = widget.newTabBar

{

    top = display.contentHeight - 50,

    width = display.contentWidth,

    backgroundFile = “assets/tabbar.png”,

    tabSelectedLeftFile = “assets/tabBar_tabSelectedLeft.png”,

    tabSelectedMiddleFile = “assets/tabBar_tabSelectedMiddle.png”,

    tabSelectedRightFile = “assets/tabBar_tabSelectedRight.png”,

    tabSelectedFrameWidth = 20,

    tabSelectedFrameHeight = 52,

    buttons = tabButtons

}