TableView Widget

Getting Started Newbie Questions
#1

I’ve been sticking to tutorials on the site and can’t get the table to populate.  The lines show, the springy bounce is there, but no words populating.  Can you take a look at my code below and tell me what I’m missing.  I’ve used Rob Miracle’s tut.

[lua]

display.setStatusBar( display.HiddenStatusBar )

local widget = require (“widget”)

–CREATES EMPTY TABLE VIEW–

local navBarHeight = 60

local tabBarHeight = 50

local myList = widget.newTableView {

   top = navBarHeight, 

   width = display.contentWidth, 

   height = display.contentHeight - navBarHeight - tabBarHeight,

   onRowRender = onRowRender,

   onRowTouch = onRowTouch,

   listener = scrollListener

}

    --POPULATE THE ROWS–

local myData = {}

myData[1] = { name=“Fred”,    phone=“555-555-1234” }

myData[2] = { name=“Barney”,  phone=“555-555-1235” }

myData[3] = { name=“Wilma”,   phone=“555-555-1236” }

myData[4] = { name=“Betty”,   phone=“555-555-1237” }

myData[5] = { name=“Pebbles”, phone=“555-555-1238” }

myData[6] = { name=“BamBam”,  phone=“555-555-1239” }

myData[7] = { name=“Dino”,    phone=“555-555-1240” }

for i = 1, #myData do

   myList:insertRow (

       {

          rowHeight = 50,

          isCategory = false,

          rowColor = { 1, 1, 1 },

          lineColor = { 0.90, 0.90, 0.90 },

           params = {

                 name = myData[i].name,

                 phone = myData[i].phone

                  }

        }

    )

end

  --onRowRender–

local function onRowRender( event )

   --Set up the localized variables to be passed via the event table

   local row = event.row

   local id = row.index

   local params = event.row.params

   row.bg = display.newRect( 0, 0, display.contentWidth, 60 )

   row.bg.anchorX = 0

   row.bg.anchorY = 0

   row.bg:setFillColor( 1, 1, 1 )

   row:insert( row.bg )

    if ( event.row.params ) then

       row.nameText = display.newText( myData[id].name, 12, 0, native.systemFontBold, 18 )

       row.nameText.anchorX = 0

       row.nameText.anchorY = 0.5

       row.nameText:setFillColor( 0 )

       row.nameText.y = 20

       row.nameText.x = 42

       row.phoneText = display.newText( myData[id].phone, 12, 0, native.systemFont, 18 )

       row.phoneText.anchorX = 0

       row.phoneText.anchorY = 0.5

       row.phoneText:setFillColor( 0.5 )

       row.phoneText.y = 40

       row.phoneText.x = 42

       – row.rightArrow = display.newImageRect( “rightarrow.png”, 15 , 40, 40 )

       – row.rightArrow.x = display.contentWidth - 20

       – row.rightArrow.y = row.height / 2

       row:insert( row.nameText )

       row:insert( row.phoneText )

       --row:insert( row.rightArrow )

    end

    return true

end

[/lua]

#2

Its a scope problem, so move onRowRender up before where you define the tableview.

If you want to use myData in the onRowRender function instead of params.name then you have move that up above onRowRender as well.

#3

Thanks for replying, Jon.  I tried as you said but I still got errors such as  “Attempt to index local myList a nil value”.  

Anyway, after searching around older posts I cobbled together this below and got it to work.   Clear as mud. ; )

If you, like me, are trying to figure it out you can find some info here as well: 

http://forums.coronalabs.com/topic/34047-tableview-rows-add-an-image/

This is muy importante and can be seen from Line 90 onwards- insertion of rows: “You should insert the rows outside of the function OnRowRender after you have created the tableView.”

[lua]

display.setStatusBar( display.HiddenStatusBar )

local widget = require (“widget”)

    --POPULATE THE ROWS–

local myData = {}

myData[1] = { name=“Fred”,    phone=“555-555-1234” }

myData[2] = { name=“Barney”,  phone=“555-555-1235” }

myData[3] = { name=“Wilma”,   phone=“555-555-1236” }

myData[4] = { name=“Betty”,   phone=“555-555-1237” }

myData[5] = { name=“Pebbles”, phone=“555-555-1238” }

myData[6] = { name=“BamBam”,  phone=“555-555-1239” }

myData[7] = { name=“Dino”,    phone=“555-555-1240” }

  --onRowRender–

local function onRowRender(event)

   --Set up the localized variables to be passed via the event table

   local row = event.row

   local id = row.index

   local params = event.row.params

   row.bg = display.newRect(0, 0, display.contentWidth, 60 )

   row.bg.anchorX = 0

   row.bg.anchorY = 0

   row.bg:setFillColor( 1, 1, 1 )

   row:insert( row.bg )

    if ( event.row.params ) then

       row.nameText = display.newText( myData[id].name, 12, 0, native.systemFontBold, 18 )

       row.nameText.anchorX = 0

       row.nameText.anchorY = 0.5

       row.nameText:setFillColor( 0 )

       row.nameText.y = 20

       row.nameText.x = 42

       row.phoneText = display.newText( myData[id].phone, 12, 0, native.systemFont, 18 )

       row.phoneText.anchorX = 0

       row.phoneText.anchorY = 0.5

       row.phoneText:setFillColor( 0.5 )

       row.phoneText.y = 40

       row.phoneText.x = 42

       – row.rightArrow = display.newImageRect( “rightarrow.png”, 15 , 40, 40 )

       – row.rightArrow.x = display.contentWidth - 20

       – row.rightArrow.y = row.height / 2

       row:insert( row.nameText )

       row:insert( row.phoneText )

       --row:insert( row.rightArrow )

    end

    return true

end

local function onRowTouch ()

      – do whatever needs to be done onRowTouch

end

–CREATES EMPTY TABLE VIEW–

local navBarHeight = 60

local tabBarHeight = 50

local myList = widget.newTableView {

   top = navBarHeight, 

   width = display.contentWidth, 

   height = display.contentHeight - navBarHeight - tabBarHeight,

   onRowRender = onRowRender,

   onRowTouch = onRowTouch,

   listener = scrollListener

}

for i = 1, #myData do

   myList:insertRow (

       {

          rowHeight = 50,

          isCategory = false,

          rowColor = { 1, 1, 1 },

          lineColor = { 0.90, 0.90, 0.90 },

           params = {

                 name = myData[i].name,

                 phone = myData[i].phone

                  }

        }

    )

end

[/lua]

#4

Hi,

Is this the common way to populate the rows with data?

Or is it also possible to use a tab delimited text table?

Or perhaps a SQL database?

What is the best method to use for 1000 records with 4 entries each?

#5

Its a scope problem, so move onRowRender up before where you define the tableview.

If you want to use myData in the onRowRender function instead of params.name then you have move that up above onRowRender as well.

#6

Thanks for replying, Jon.  I tried as you said but I still got errors such as  “Attempt to index local myList a nil value”.  

Anyway, after searching around older posts I cobbled together this below and got it to work.   Clear as mud. ; )

If you, like me, are trying to figure it out you can find some info here as well: 

http://forums.coronalabs.com/topic/34047-tableview-rows-add-an-image/

This is muy importante and can be seen from Line 90 onwards- insertion of rows: “You should insert the rows outside of the function OnRowRender after you have created the tableView.”

[lua]

display.setStatusBar( display.HiddenStatusBar )

local widget = require (“widget”)

    --POPULATE THE ROWS–

local myData = {}

myData[1] = { name=“Fred”,    phone=“555-555-1234” }

myData[2] = { name=“Barney”,  phone=“555-555-1235” }

myData[3] = { name=“Wilma”,   phone=“555-555-1236” }

myData[4] = { name=“Betty”,   phone=“555-555-1237” }

myData[5] = { name=“Pebbles”, phone=“555-555-1238” }

myData[6] = { name=“BamBam”,  phone=“555-555-1239” }

myData[7] = { name=“Dino”,    phone=“555-555-1240” }

  --onRowRender–

local function onRowRender(event)

   --Set up the localized variables to be passed via the event table

   local row = event.row

   local id = row.index

   local params = event.row.params

   row.bg = display.newRect(0, 0, display.contentWidth, 60 )

   row.bg.anchorX = 0

   row.bg.anchorY = 0

   row.bg:setFillColor( 1, 1, 1 )

   row:insert( row.bg )

    if ( event.row.params ) then

       row.nameText = display.newText( myData[id].name, 12, 0, native.systemFontBold, 18 )

       row.nameText.anchorX = 0

       row.nameText.anchorY = 0.5

       row.nameText:setFillColor( 0 )

       row.nameText.y = 20

       row.nameText.x = 42

       row.phoneText = display.newText( myData[id].phone, 12, 0, native.systemFont, 18 )

       row.phoneText.anchorX = 0

       row.phoneText.anchorY = 0.5

       row.phoneText:setFillColor( 0.5 )

       row.phoneText.y = 40

       row.phoneText.x = 42

       – row.rightArrow = display.newImageRect( “rightarrow.png”, 15 , 40, 40 )

       – row.rightArrow.x = display.contentWidth - 20

       – row.rightArrow.y = row.height / 2

       row:insert( row.nameText )

       row:insert( row.phoneText )

       --row:insert( row.rightArrow )

    end

    return true

end

local function onRowTouch ()

      – do whatever needs to be done onRowTouch

end

–CREATES EMPTY TABLE VIEW–

local navBarHeight = 60

local tabBarHeight = 50

local myList = widget.newTableView {

   top = navBarHeight, 

   width = display.contentWidth, 

   height = display.contentHeight - navBarHeight - tabBarHeight,

   onRowRender = onRowRender,

   onRowTouch = onRowTouch,

   listener = scrollListener

}

for i = 1, #myData do

   myList:insertRow (

       {

          rowHeight = 50,

          isCategory = false,

          rowColor = { 1, 1, 1 },

          lineColor = { 0.90, 0.90, 0.90 },

           params = {

                 name = myData[i].name,

                 phone = myData[i].phone

                  }

        }

    )

end

[/lua]

#7

Hi,

Is this the common way to populate the rows with data?

Or is it also possible to use a tab delimited text table?

Or perhaps a SQL database?

What is the best method to use for 1000 records with 4 entries each?