Switching between scenes TableView widget

mdayam · March 21, 2014, 9:54pm

Hi

When switching between scenes, the tableview on the first scene displays correctly, however when I switch scenes, the table view on the new scene displays the rows way down the table. Whichever scene I select first displays correctly, but the next scene displays the table view incorrectly. I was using storyboard on the earlier build Corona Graphics 2.0 2013.2078 and it worked fine. With the new build ( 2014.2205), I am using composer and can’t seem to figure out what went wrong.

See the attached images. Any ideas on what I may be doing wrong?

rob · March 22, 2014, 12:22am

Can you post some code?

mdayam · March 22, 2014, 6:17am

Hi Rob, here are code snippets. I can email you the code files if needed, since I can’t seem to attach them.

Audio.lua snippet:

function loadData()
local fileAudio = io.open( filePath, “r” )
if fileAudio then
  io.close( fileAudio )
else
  --native.setActivityIndicator( true )
  getMediaData()
end

local file = io.open( filePath, “r” )

if file then

  – Read file contents into a string
  local dataStr = file:read( “*a” )

  – Break string into separate variables and construct new table from resulting data

  --local datavars = str.split(dataStr, “,”)
  local datavars = str.split(dataStr, “\n”)
  --print (“datavars” … #datavars)
  for i = 1, #datavars do
   lectureVal[i] = {}
   local rowvars = str.split(datavars[i], “,”)
   --print (“rowvars” … #rowvars)
   for j = 1, #rowvars do
    – split each name/value pair
    local onevalue = str.split(rowvars[j], “=”)
    if onevalue[1]==“title” then
       lectureVal[i].title = onevalue[2]
       --print (“title:” … onevalue[1] …"-" … onevalue[2])
    elseif onevalue[1]==“lecturedate” then
       lectureVal[i].lecturedate = onevalue[2]
       --print (“lecturedate:” … onevalue[1] …"-" … onevalue[2])
    elseif onevalue[1]==“lectureDesc” then
       lectureVal[i].lectureDesc = onevalue[2]
       --print (“lectureDesc:” … onevalue[1] …"-" … onevalue[2])
    elseif onevalue[1]==“lectureURL” then
       lectureVal[i].lectureURL = onevalue[2]
       --print (“lectureURL:” … onevalue[1] …"-" … onevalue[2])
    elseif onevalue[1]==“lectureSize” then
       lectureVal[i].lectureSize = onevalue[2]
       --print (“lectureSize:” … onevalue[1] …"-" … onevalue[2])
    end
   end

  end

  io.close( file ) – important!

else
  print (“no file found”)
  --Default Values
  lectureVal[1] = {}
  lectureVal[1].title = “The Muslim World”
  lectureVal[1].lecturedate = “12 July 2012”
  lectureVal[1].lectureDesc = “The Muslim World”
  lectureVal[1].lectureURL = “http://www.muftimenk.co.za/wp-content/uploads/2012/06/MENK-TheMuslimWorld_64kb.mp3”
  lectureVal[1].lectureSize =“10”

  lectureVal[2] = {}
  lectureVal[2].title = “The Meaning of Zikr”
  lectureVal[2].lecturedate = “12 July 2012”
  lectureVal[2].lectureDesc = “The Meaning of Zikr”
  lectureVal[2].lectureURL = “http://www.muftimenk.co.za/wp-content/uploads/2012/06/MENK-TheMeaningofZikr_64kb.mp3”
  lectureVal[2].lectureSize =“10”

  lectureVal[3] = {}
  lectureVal[3].title = “Blessed Month of Ramadhan”
  lectureVal[3].lecturedate = “26 August 2012”
  lectureVal[3].lectureDesc = “Blessed Month of Ramadhan”
  lectureVal[3].lectureURL = “http://www.muftimenk.co.za/wp-content/uploads/2012/06/MENK-BlessedMonthofRamadhan_64kb.mp3”
  lectureVal[3].lectureSize =“10”

  lectureVal[4] = {}
  lectureVal[4].title = “Education”
  lectureVal[4].lecturedate = “23 August 2012”
  lectureVal[4].lectureDesc = “Education”
  lectureVal[4].lectureURL = “http://www.muftimenk.co.za/wp-content/uploads/2012/06/MENK-Education_64kb.mp3”
  lectureVal[4].lectureSize =“10”

  lectureVal[5] = {}
  lectureVal[5].title = “Qunoot Naazilah”
  lectureVal[5].lecturedate = “30 Sep 2011”
  lectureVal[5].lectureDesc = “Qunoot Naazilah”
  lectureVal[5].lectureURL = “http://www.muftimenk.co.za/wp-content/uploads/2012/06/MENK-QunootNaazilah_64kb.mp3”
  lectureVal[5].lectureSize =“10”
end
end

function PopulateTable()

  local newDefault
  local newDefaultOver
  local newChecked
  local CategorySelection
  local GroupHeader
  local nCount=0

  data = nil
  data = {}
  tableView:deleteAllRows()
  print("#rowsa:" … tableView:getNumRows())

  if(display.contentWidth==360) then
   newDefault=“listItemBgBlack360.png”
   newDefaultOver=“listItemBgNew_over360.png”
   GroupHeader=“GroupHeader360.png”
  else
   newDefault=“listItemBgBlack.png”
   newDefaultOver=“listItemBgNew_over.png”
   GroupHeader=“GroupHeader.png”
  end

  --Gets data from the file
  loadData()

  CategorySelection=""

  if lectureVal then
   --Populate list from file

   print("#lectureVal:" … #lectureVal)

            for n = 1, #lectureVal do

    nCount = nCount + 1

    --if ( CategorySelection ~= lectureVal[n].category ) then
    –   CategorySelection = lectureVal[n].category
    –
    –   data[nCount] = {}
    – data[nCount].title = CategorySelection
    – data[nCount].categoryBackground = GroupHeader

    – --Insert the category
    – tableView:insertRow{
    –  rowHeight = 40,
    –  rowColor = { default={ 255, 255, 255 } },
    –  lineColor = { 48/255, 112/255, 171/255 },
    –  id=CategorySelection,
    –  isCategory = true,
    – }

                –    nCount = nCount + 1
    --end

    --print(“lectureVal[n].title:” … lectureVal[n].title)
    data[nCount] = {}
    data[nCount].title = lectureVal[n].title
    data[nCount].lecturedate = lectureVal[n].lecturedate
    data[nCount].subtitle = lectureVal[n].lectureDesc
    data[nCount].info = lectureVal[n].lectureSize
    data[nCount].default = newDefault
    data[nCount].defaultOver = newDefaultOver

    tableView:insertRow{
     rowHeight = 45,
     isCategory = false,
     rowColor = { default={ 255, 255, 255 } },
     --lineColor = { 48/255, 112/255, 171/255 },
                    id = n,
     listener = onRowTouch,
    }

   end

  else
            --Default Values
   data[1] = {}
   data[1].title = “The Muslim World”
   data[1].lecturedate = “2 July 2012”
   data[1].subtitle = “The Muslim World”
   data[1].info = “36.5 MB”
   data[1].default = newDefault
   data[1].defaultOver = newDefaultOver

   tableView:insertRow{
     rowHeight = 45,
     isCategory = false,
     rowColor = { default={ 255, 255, 255 } },
     --lineColor = { 48/255, 112/255, 171/255 },
                    id = 1,
     listener = onRowTouch,
    }

   data[2] = {}
   data[2].title = “The Meaning of Zikr”
   data[2].lecturedate = “2 July 2012”
   data[2].subtitle = “The Meaning of Zikr”
   data[2].info = “36.5 MB”
   data[2].default = newDefault
   data[2].defaultOver = newDefaultOver

   tableView:insertRow{
     rowHeight = 45,
     isCategory = false,
     rowColor = { default={ 255, 255, 255 } },
     --lineColor = { 48/255, 112/255, 171/255 },
                    id = 2,
     listener = onRowTouch,
    }

   data[3] = {}
   data[3].title = “Blessed Month of Ramadhan”
   data[3].lecturedate = “2 July 2012”
   data[3].subtitle = “Blessed Month of Ramadhan”
   data[3].info = “36.5 MB”
   data[3].default = newDefault
   data[3].defaultOver = newDefaultOver

   tableView:insertRow{
     rowHeight = 45,
     isCategory = false,
     rowColor = { default={ 255, 255, 255 } },
     --lineColor = { 48/255, 112/255, 171/255 },
                    id = 3,
     listener = onRowTouch,
    }

   data[4] = {}
   data[4].title = “Education”
   data[4].lecturedate = “2 July 2012”
   data[4].subtitle = “Education”
   data[4].info = “36.5 MB”
   data[4].default = newDefault
   data[4].defaultOver = newDefaultOver

   tableView:insertRow{
     rowHeight = 45,
     isCategory = false,
     rowColor = { default={ 255, 255, 255 } },
     --lineColor = { 48/255, 112/255, 171/255 },
                    id = 4,
     listener = onRowTouch,
    }

   data[5] = {}
   data[5].title = “Qunoot Naazilah”
   data[5].lecturedate = “2 July 2012”
   data[5].subtitle = “Qunoot Naazilah”
   data[5].info = “36.5 MB”
   data[5].default = newDefault
   data[5].defaultOver = newDefaultOver

   tableView:insertRow{
     rowHeight = 45,
     isCategory = false,
     rowColor = { default={ 255, 255, 255 } },
     --lineColor = { 48/255, 112/255, 171/255 },
                    id = 5,
     listener = onRowTouch,
    }

  end

end

– Handle row rendering
local function onRowRender( event )
local phase = event.phase
local row = event.row
local isCategory = row.isCategory
local rowTitle
local RowId=row.id

– in graphics 2.0, the group contentWidth / contentHeight are initially 0, and expand once elements are inserted into the group.
– in order to use contentHeight properly, we cache the variable before inserting objects into the group

local groupContentHeight = row.contentHeight
print("#groupContentHeight:" … groupContentHeight)
print("#row.index:" … row.index)
print("#RowId:" … RowId)

--print("#IndexCount:" … IndexCount)
--if row.index == RowId then
if isCategory then

   if data[row.index].categoryBackground then
    local bg = display.newImage(row, data[row.index].categoryBackground , true)
      bg.x = 0
      bg.anchorX = 0
      bg.y = groupContentHeight * 0.5
   end

rowTitle = display.newText( row, data[row.index].title, 0, 0, native.systemFontBold, 16 )
rowTitle.x = display.contentWidth*.5

   rowTitle.y = groupContentHeight * 0.5
   rowTitle:setFillColor(255/255, 255/255,255/255)

  else
   if data[row.index].default then
    local bg = display.newImage(row, data[row.index].default , true)
      bg.x = 0
      bg.anchorX = 0
      bg.y = groupContentHeight * 0.5
   end

   rowTitle = display.newText( row, data[row.index].title, 0, 0, native.systemFontBold, 12 )
    – in Graphics 2.0, the row.x is the center of the row, no longer the top left.
   rowTitle.x = math.floor(rowTitle.width/2) + 12

– we also set the anchorX of the text to 0, so the object is x-anchored at the left
--rowTitle.anchorX = 0

rowTitle.y = 10 --groupContentHeight * 0.5
rowTitle:setFillColor(255/255, 255/255,255/255)

   if data[row.index].lecturedate then
    rowlecturedate= display.newText( row, data[row.index].lecturedate, 0, 0, native.systemFontBold, 10 )
    rowlecturedate.x = math.floor(rowlecturedate.width/2) + 18
    rowlecturedate.y = 23
    rowlecturedate:setFillColor(255/255, 255/255,255/255)
   end

   if data[row.index].info then
    rowinfo= display.newText( row, data[row.index].info, 0, 0, native.systemFontBold, 10 )
    rowinfo.x = math.floor(rowinfo.width/2) + 220
    rowinfo.y = 23
    rowinfo:setFillColor(255/255, 255/255,255/255)
   end

   if data[row.index].subtitle then
    rowsubtitle= display.newText( row, data[row.index].subtitle, 0, 0, native.systemFontBold, 8 )
    rowsubtitle.x = math.floor(rowsubtitle.width/2) + 12
    rowsubtitle.y = 35
    rowsubtitle:setFillColor(255/255, 255/255,255/255)
   end

end
end

– Handle row touch events
local function onRowTouch( event )
local phase = event.phase
local row = event.target

  if “press” == phase then
   --print( "Pressed row: " … row.index )
   --print( "Pressed row.id: " … row.id )

  elseif “release” == phase then
   – Update the item selected text
   --itemSelected.text = "You selected item " … row.index
   nisaabText.text = “AUDIO LECTURE”
   loadScreen(row.id)
   transition.to( tableView, { x = - tableView.contentWidth * 0.5, time = 400, transition = easing.outExpo } )
   transition.to(detailScreen, {alpha = 1, time=400, x=0, transition=easing.outExpo })
   transition.to( reloadBtn, { alpha = 0, time = 400, transition = easing.outQuad } )
   transition.to( backButton, { alpha = 1, time = 400, transition = easing.outQuad } )
   transition.to( segmentedControl, { alpha = 0, time = 400, transition = easing.outQuad } )

  end
end

local function tableViewListener( event )
local phase = event.phase

  if event.limitReached then
   print( "event.direction: " … event.direction )
   if “down” == event.direction then
    refreshTable()
   end
  end
end

–Create the scene
function scene:create( event )

group = self.view
display.setDefault( “background”, 0, 0, 0)

--local prevScene = composer.getSceneName( “previous” )
– if(prevScene) then
– composer.purgeScene( prevScene )
– end

– Create toolbar to go at the top of the screen

if(display.contentWidth==360) then
    NisaabBar = display.newImage(“Nisaab360.png”, 0, 0, true)
    NisaabBar.xScale = 360 / NisaabBar.contentWidth
else
  NisaabBar = display.newImage(“Nisaab.png”, 0, 0, true)
  NisaabBar.xScale = 320 / NisaabBar.contentWidth
end

--NisaabBar.anchorX = 0; NisaabBar.anchorY = 0 – TopLeft anchor
NisaabBar.x = display.contentWidth*.5
NisaabBar.y = math.floor(display.screenOriginY + NisaabBar.height*0.5)

– create embossed text to go on toolbar
nisaabText = display.newEmbossedText( “AUDIO LECTURES”, display.contentWidth*.5, NisaabBar.y, native.systemFontBold, 16 )
nisaabText:setFillColor(0/255, 0/255,0/255)

group:insert(NisaabBar)
group:insert(nisaabText)

– Function to create a tableView list
createList = function()
  if tableView then
   tableView:deleteAllRows()
   display.remove( tableView )
   tableView = nil
  end

  – Create a tableView
  tableView = widget.newTableView
  {
   --top = 38,
   top = 80,
   width = screenW,
   height = 448,
   backgroundColor = { 0, 0, 0 },
   maskFile = “assets/blackmask-320x366.png”,
   onRowRender = onRowRender,
   onRowTouch = onRowTouch,
   lineColor = { 48/255, 112/255, 171/255 },
   listener=tableViewListener,
  }

  --Insert widgets/images into a group
  group:insert(tableView)
  --print("#tableView:" … tableView:getContentPosition())

PopulateTable()

end

– Create the list
createList()

reloadBtn = widget.newButton{
  id = “reloadBtn”,
  defaultFile = “blackSmall.png”,
  overFile = “blackSmallover.png”,
  label = “Refresh”,
  fontSize=12,
  emboss=true,
  onRelease = reloadBtnRelease
}

if(display.contentWidth==360) then
reloadBtn.x = math.floor(reloadBtn.width/2) + reloadBtn.width + screenOffsetW + 210
else
reloadBtn.x = math.floor(reloadBtn.width/2) + reloadBtn.width + screenOffsetW + 185
end

reloadBtn.y = NisaabBar.y
--reloadBtn.alpha = 0

group:insert(reloadBtn)

  – The listener for our segmented control
local function segmentedControlListener( event )
  local target = event.target

  – Update the status box text
  --statusText.text = "Segmented Control\nSegment Pressed: " … target.segmentLabel

  if(target.segmentLabel==“Video”) then
      composer.gotoScene( “Video”, “slideLeft”, 800 )
  end

end

– Create a default segmented control (using widget.setTheme)
    segmentedControl = widget.newSegmentedControl
{
     left = 120,
     top = 45,
     segments = { “Audio”, “Video” },
     defaultSegment = 1,
     onPress = segmentedControlListener,
}
group:insert( segmentedControl )

--setup a destination for the list items
detailScreen = display.newGroup()
detailBg = display.newRect(0,0,display.contentWidth,display.contentHeight-display.screenOriginY-50)
detailBg:setFillColor(0,0,0)
detailScreen:insert(detailBg)
detailScreen.x = display.contentWidth
detailScreen.alpha = 0

end

function scene:show( event )

local phase = event.phase

if phase == “will” then
  – Called when the scene is still off screen and is about to move on screen
elseif phase == “did” then
  --tableView:deleteAllRows()
  --refreshTable()
end

end

– Called when scene is about to move offscreen:
function scene:hide( event )
   print( “Hide scene audio” )
   local phase = event.phase

if phase == “will” then
  – Called when the scene is still off screen and is about to move on screen
  if (detailScreen.alpha == 1) then
   detailScreen:remove(detailBar)
   detailScreen:remove(detailText)
   detailScreen:remove(statusText)
   detailScreen:remove(dateVal)
   detailScreen:remove(downloadButton)

   --Transition in the list, transition out the item selected text and the back button
   --nisaabText.text = “AUDIO LECTURES”
   --The table x origin refers to the center of the table in Graphics 2.0, so we translate with half the object’s contentWidth
   transition.to( tableView, { x = tableView.contentWidth * 0.5, time = 400, transition = easing.outExpo } )
   transition.to(detailScreen, {alpha = 0, time=400, x=display.contentWidth, transition=easing.outExpo })
   transition.to( reloadBtn, { alpha = 1, time = 400, transition = easing.outQuad } )
   transition.to( segmentedControl, { alpha = 1, time = 400, transition = easing.outQuad } )
   transition.to( backButton, { alpha = 0, time = 400, transition = easing.outQuad } )

   delta, velocity = 0, 0
  end

   if(webView~=nil) then
   webView:removeSelf()
   webView = nil
   end
elseif phase == “did” then
  print( “1: show event, phase did” )
     – remove previous scene’s view
  --composer.removeScene( “Video” )

end

end

– Called prior to the removal of scene’s “view” (display group)
function scene:destroy( event )
    print( “Destroy scene audio” )
if(webView~=nil) then
  webView:removeSelf()
  webView = nil
end
group:remove(segmentedControl)
    group:remove(reloadBtn)
group:remove(backButton)
group:remove(tableView)
group:remove(NisaabBar)
group:remove(nisaabText)
group:removeSelf()

end

– END OF YOUR IMPLEMENTATION

scene:addEventListener( “create”, scene )
scene:addEventListener( “show”, scene )
scene:addEventListener( “hide”, scene )
scene:addEventListener( “destroy”, scene )

return scene

Video.lua snippet:

function loadData()
local fileAudio = io.open( filePath, “r” )
if fileAudio then
  io.close( fileAudio )
else
  --native.setActivityIndicator( true )
  getMediaData()
end

local file = io.open( filePath, “r” )

if file then

  – Read file contents into a string
  local dataStr = file:read( “*a” )

  – Break string into separate variables and construct new table from resulting data

  --local datavars = str.split(dataStr, “,”)
  local datavars = str.split(dataStr, “\n”)
  --print (“datavars” … #datavars)
  for i = 1, #datavars do
   lectureVal[i] = {}
   local rowvars = str.split(datavars[i], “,”)
   --print (“rowvars” … #rowvars)
   for j = 1, #rowvars do
    – split each name/value pair
    local onevalue = str.split(rowvars[j], “=”)
    if onevalue[1]==“title” then
       lectureVal[i].title = onevalue[2]
       --print (“title:” … onevalue[1] …"-" … onevalue[2])
    elseif onevalue[1]==“lecturedate” then
       lectureVal[i].lecturedate = onevalue[2]
       --print (“lecturedate:” … onevalue[1] …"-" … onevalue[2])
    elseif onevalue[1]==“lectureDesc” then
       lectureVal[i].lectureDesc = onevalue[2]
       --print (“lectureDesc:” … onevalue[1] …"-" … onevalue[2])
    elseif onevalue[1]==“lectureURL” then
       lectureVal[i].lectureURL = onevalue[2]
       --print (“lectureURL:” … onevalue[1] …"-" … onevalue[2])
    end
   end

  end

  io.close( file ) – important!

else
  print (“no file found”)
  --Default Values
  lectureVal[1] = {}
  lectureVal[1].title = “Salaah”
  lectureVal[1].lecturedate = “21 Mar 2012”
  lectureVal[1].lectureDesc = “Salaah”
  lectureVal[1].lectureURL = “ESbxkIfi7h8”

  lectureVal[2] = {}
  lectureVal[2].title = “Rediscovering Our Moral Compass”
  lectureVal[2].lecturedate = “21 May 2012”
  lectureVal[2].lectureDesc = “Rediscovering Our Moral Compass”
  lectureVal[2].lectureURL = “wTfOV181x1Y”

  lectureVal[3] = {}
  lectureVal[3].title = “Preservation Of Marriage”
  lectureVal[3].lecturedate = “12 Aug 2012”
  lectureVal[3].lectureDesc = “Lecture at Kuraby Mosque Australia”
  lectureVal[3].lectureURL = “B7juLqhEWMo”

  lectureVal[4] = {}
  lectureVal[4].title = “Walking In The Footprints Of The Noble Companions (RA)”
  lectureVal[4].lecturedate = “30 Sep 2011”
  lectureVal[4].lectureDesc = “Walking In The Footprints Of The Noble Companions (RA)”
  lectureVal[4].lectureURL = “IOg7yz-F89o”

  lectureVal[5] = {}
  lectureVal[5].title = “Courage To Control The Lustful Soul”
  lectureVal[5].lecturedate = “30 Sep 2011”
  lectureVal[5].lectureDesc = “Courage To Control The Lustful Soul”
  lectureVal[5].lectureURL = “RYAfv4Su5fM”
end
end

function PopulateTable()

  local newDefault
  local newDefaultOver
  local newChecked
  local CategorySelection
  local GroupHeader
  local nCount=0

  data = nil
  data = {}
  tableView:deleteAllRows()
  print("#rowsa:" … tableView:getNumRows())

  if(display.contentWidth==360) then
   newDefault=“listItemBgBlack360.png”
   newDefaultOver=“listItemBgNew_over360.png”
   GroupHeader=“GroupHeader360.png”
  else
   newDefault=“listItemBgBlack.png”
   newDefaultOver=“listItemBgNew_over.png”
   GroupHeader=“GroupHeader.png”
  end

  --Gets data from the file
  loadData()

  CategorySelection=""

  if lectureVal then
   --Populate list from file

   print("#lectureVal:" … #lectureVal)

            for n = 1, #lectureVal do

    nCount = nCount + 1

    --if ( CategorySelection ~= lectureVal[n].category ) then
    –   CategorySelection = lectureVal[n].category
    –
    –   data[nCount] = {}
    – data[nCount].title = CategorySelection
    – data[nCount].categoryBackground = GroupHeader

    – --Insert the category
    – tableView:insertRow{
    –  rowHeight = 40,
    –  rowColor = { default={ 255, 255, 255 } },
    –  lineColor = { 48/255, 112/255, 171/255 },
    –  id=CategorySelection,
    –  isCategory = true,
    – }

                –    nCount = nCount + 1
    --end

    --print(“lectureVal[n].title:” … lectureVal[n].title)
    data[nCount] = {}
    data[nCount].title = lectureVal[n].title
    data[nCount].lecturedate = lectureVal[n].lecturedate
    data[nCount].subtitle = lectureVal[n].lectureDesc
    data[nCount].info = lectureVal[n].lectureSize
    data[nCount].default = newDefault
    data[nCount].defaultOver = newDefaultOver

    tableView:insertRow{
     rowHeight = 45,
     isCategory = false,
     rowColor = { default={ 255, 255, 255 } },
     --lineColor = { 48/255, 112/255, 171/255 },
                    id = n,
     listener = onRowTouch,
    }

   end

  else
            --Default Values
   data[1] = {}
   data[1].title = “Salaah”
   data[1].lecturedate = “21 Mar 2012”
   data[1].subtitle = “Salaah”
   data[1].default = newDefault
   data[1].defaultOver = newDefaultOver

   tableView:insertRow{
     rowHeight = 45,
     isCategory = false,
     rowColor = { default={ 255, 255, 255 } },
     --lineColor = { 48/255, 112/255, 171/255 },
                    id = 1,
     listener = onRowTouch,
    }

   data[2] = {}
   data[2].title = “Rediscovering Our Moral Compass”
   data[2].lecturedate = “21 May 2012”
   data[2].subtitle = “Rediscovering Our Moral Compass”
   data[2].default = newDefault
   data[2].defaultOver = newDefaultOver

   tableView:insertRow{
     rowHeight = 45,
     isCategory = false,
     rowColor = { default={ 255, 255, 255 } },
     --lineColor = { 48/255, 112/255, 171/255 },
                    id = 2,
     listener = onRowTouch,
    }

   data[3] = {}
   data[3].title = “Preservation Of Marriage”
   data[3].lecturedate = “12 Aug 2012”
   data[3].subtitle =“Lecture at Kuraby Mosque Australia”
   data[3].default = newDefault
   data[3].defaultOver = newDefaultOver

   tableView:insertRow{
     rowHeight = 45,
     isCategory = false,
     rowColor = { default={ 255, 255, 255 } },
     --lineColor = { 48/255, 112/255, 171/255 },
                    id = 3,
     listener = onRowTouch,
    }

   data[4] = {}
   data[4].title = “Walking In The Footprints Of The Noble Companions (RA)”
   data[4].lecturedate = “30 Sep 2011”
   data[4].subtitle = “Walking In The Footprints Of The Noble Companions (RA)”
   data[4].default = newDefault
   data[4].defaultOver = newDefaultOver

   tableView:insertRow{
     rowHeight = 45,
     isCategory = false,
     rowColor = { default={ 255, 255, 255 } },
     --lineColor = { 48/255, 112/255, 171/255 },
                    id = 4,
     listener = onRowTouch,
    }

   data[5] = {}
   data[5].title = “Courage To Control The Lustful Soul”
   data[5].lecturedate = “30 Sep 2011”
   data[5].subtitle = “Courage To Control The Lustful Soul”
   data[5].default = newDefault
   data[5].defaultOver = newDefaultOver

   tableView:insertRow{
     rowHeight = 45,
     isCategory = false,
     rowColor = { default={ 255, 255, 255 } },
     --lineColor = { 48/255, 112/255, 171/255 },
                    id = 5,
     listener = onRowTouch,
    }

  end

end

local function tableViewListener( event )
local phase = event.phase

  if event.limitReached then
   print( "event.direction: " … event.direction )
   if “down” == event.direction then
    refreshTable()
   end
  end
end

– Handle row rendering
local function onRowRender( event )
local phase = event.phase
local row = event.row
local isCategory = row.isCategory
local rowTitle
local RowId=row.id

– in graphics 2.0, the group contentWidth / contentHeight are initially 0, and expand once elements are inserted into the group.
– in order to use contentHeight properly, we cache the variable before inserting objects into the group
local groupContentHeight = row.contentHeight
--print("#groupContentHeight:" … groupContentHeight)
--print("#row.index:" … row.index)
--print("#RowId:" … RowId)

--print("#IndexCount:" … IndexCount)
--if row.index == RowId then
if isCategory then

   if data[row.index].categoryBackground then
    local bg = display.newImage(row, data[row.index].categoryBackground , true)
      bg.x = 0
      bg.anchorX = 0
      bg.y = groupContentHeight * 0.5
   end

rowTitle = display.newText( row, data[row.index].title, 0, 0, native.systemFontBold, 16 )
rowTitle.x = display.contentWidth*.5

   rowTitle.y = groupContentHeight * 0.5
   rowTitle:setFillColor(255/255, 255/255,255/255)

  else
   if data[row.index].default then
    local bg = display.newImage(row, data[row.index].default , true)
      bg.x = 0
      bg.anchorX = 0
      bg.y = groupContentHeight * 0.5
   end

   rowTitle = display.newText( row, data[row.index].title, 0, 0, native.systemFontBold, 12 )
    – in Graphics 2.0, the row.x is the center of the row, no longer the top left.
   rowTitle.x = math.floor(rowTitle.width/2) + 12

– we also set the anchorX of the text to 0, so the object is x-anchored at the left
--rowTitle.anchorX = 0

rowTitle.y = 10 --groupContentHeight * 0.5
rowTitle:setFillColor(255/255, 255/255,255/255)

   if data[row.index].lecturedate then
    rowlecturedate= display.newText( row, data[row.index].lecturedate, 0, 0, native.systemFontBold, 10 )
    rowlecturedate.x = math.floor(rowlecturedate.width/2) + 18
    rowlecturedate.y = 23
    rowlecturedate:setFillColor(255/255, 255/255,255/255)
   end

   if data[row.index].subtitle then
    rowsubtitle= display.newText( row, data[row.index].subtitle, 0, 0, native.systemFontBold, 8 )
    rowsubtitle.x = math.floor(rowsubtitle.width/2) + 12
    rowsubtitle.y = 35
    rowsubtitle:setFillColor(255/255, 255/255,255/255)
   end

   --print("#row.contentHeight:" … row.contentHeight)

end
end

– Handle row updates
local function onRowUpdate( event )
local phase = event.phase
local row = event.row

--print( row.index, “: is now onscreen” )
end

– Handle row touch events
local function onRowTouch( event )
local phase = event.phase
local row = event.target

  if “press” == phase then
   --print( "Pressed row: " … row.index )
   --print( "Pressed row.id: " … row.id )

  elseif “release” == phase then
   – Update the item selected text
   --itemSelected.text = "You selected item " … row.index
   nisaabText.text = “VIDEO LECTURE”
   loadScreen(row.id)
   transition.to( tableView, { x = - tableView.contentWidth * 0.5, time = 400, transition = easing.outExpo } )
   transition.to(detailScreen, {alpha = 1, time=400, x=0, transition=easing.outExpo })
   transition.to( reloadBtn, { alpha = 0, time = 400, transition = easing.outQuad } )
   transition.to( backButton, { alpha = 1, time = 400, transition = easing.outQuad } )
   transition.to( segmentedControl, { alpha = 0, time = 400, transition = easing.outQuad } )

  end
end

–Create the scene
function scene:create( event )

    group = self.view
display.setDefault( “background”, 0, 0, 0)

--local prevScene = composer.getSceneName( “previous” )
     --if(prevScene) then
–    composer.purgeScene( prevScene )
--end

– Create toolbar to go at the top of the screen

if(display.contentWidth==360) then
    NisaabBar = display.newImage(“Nisaab360.png”, 0, 0, true)
    NisaabBar.xScale = 360 / NisaabBar.contentWidth
else
  NisaabBar = display.newImage(“Nisaab.png”, 0, 0, true)
  NisaabBar.xScale = 320 / NisaabBar.contentWidth
end

--NisaabBar.anchorX = 0; NisaabBar.anchorY = 0 – TopLeft anchor
NisaabBar.x = display.contentWidth*.5
NisaabBar.y = math.floor(display.screenOriginY + NisaabBar.height*0.5)

– create embossed text to go on toolbar
nisaabText = display.newEmbossedText( “VIDEO LECTURES”, display.contentWidth*.5, NisaabBar.y, native.systemFontBold, 16 )
nisaabText:setFillColor(0/255, 0/255,0/255)

group:insert(NisaabBar)
group:insert(nisaabText)

– Function to create a tableView list
createList = function()
  if tableView then
   tableView:deleteAllRows()
   display.remove( tableView )
   tableView = nil
  end

  – Create a tableView
  tableView = widget.newTableView
  {
   --top = 38,
   top = 80,
   width = screenW,
   height = 448,
   backgroundColor = { 0, 0, 0 },
   maskFile = “assets/blackmask-320x366.png”,
   listener=tableViewListener,
   onRowRender = onRowRender,
   onRowUpdate = onRowUpdate,
   onRowTouch = onRowTouch,
   lineColor = { 48/255, 112/255, 171/255 },
  }

  --Insert widgets/images into a group
  group:insert(tableView)
        --print("#tableView:" … tableView:getContentPosition())
  PopulateTable()

end

– Create the list
createList()

reloadBtn = widget.newButton{
  id = “reloadBtn”,
  defaultFile = “blackSmall.png”,
  overFile = “blackSmallover.png”,
  label = “Refresh”,
  fontSize=12,
  emboss=true,
  onRelease = reloadBtnRelease
}

if(display.contentWidth==360) then
reloadBtn.x = math.floor(reloadBtn.width/2) + reloadBtn.width + screenOffsetW + 210
else
reloadBtn.x = math.floor(reloadBtn.width/2) + reloadBtn.width + screenOffsetW + 185
end

reloadBtn.y = NisaabBar.y
--reloadBtn.alpha = 0

group:insert(reloadBtn)

– The listener for our segmented control
local function segmentedControlListener( event )
  local target = event.target

  – Update the status box text
  --statusText.text = "Segmented Control\nSegment Pressed: " … target.segmentLabel

  if(target.segmentLabel==“Audio”) then
      composer.gotoScene( “Audio”, “slideRight”, 800 )
  end

end

– Create a default segmented control (using widget.setTheme)
segmentedControl = widget.newSegmentedControl
{
     left = 120,
     top = 45,
     segments = { “Audio”, “Video” },
     defaultSegment = 2,
     onPress = segmentedControlListener,
}
group:insert( segmentedControl )

--setup a destination for the list items
detailScreen = display.newGroup()
detailBg = display.newRect(0,0,display.contentWidth,display.contentHeight-display.screenOriginY-50)
detailBg:setFillColor(0,0,0)
detailScreen:insert(detailBg)
detailScreen.x = display.contentWidth
detailScreen.alpha = 0

end

function scene:show( event )

local phase = event.phase

if phase == “will” then
  – Called when the scene is still off screen and is about to move on screen
elseif phase == “did” then
– Called when the scene is now on screen
  –
  – INSERT code here to make the scene come alive
  – e.g. start timers, begin animation, play audio, etc.
end

end

– Called when scene is about to move offscreen:
function scene:hide( event )

    print( “Hide scene Video” )
local phase = event.phase

if phase == “will” then
     print( “Video: show event, phase will” )
  – Called when the scene is on screen and is about to move off screen
  –
  – INSERT code here to pause the scene
  – e.g. stop timers, stop animation, unload sounds, etc.)
  if (detailScreen.alpha == 1) then
   detailScreen:remove(detailBar)
   detailScreen:remove(detailText)
   detailScreen:remove(statusText)
   detailScreen:remove(dateVal)

   --Transition in the list, transition out the item selected text and the back button
   --nisaabText.text = “AUDIO LECTURES”
   --The table x origin refers to the center of the table in Graphics 2.0, so we translate with half the object’s contentWidth
   transition.to( tableView, { x = tableView.contentWidth * 0.5, time = 400, transition = easing.outExpo } )
   transition.to(detailScreen, {alpha = 0, time=400, x=display.contentWidth, transition=easing.outExpo })
   transition.to( reloadBtn, { alpha = 1, time = 400, transition = easing.outQuad } )
   transition.to( segmentedControl, { alpha = 1, time = 400, transition = easing.outQuad } )
   transition.to( backButton, { alpha = 0, time = 400, transition = easing.outQuad } )

   delta, velocity = 0, 0
  end

  if(webView~=nil) then
   webView:removeSelf()
   webView = nil
   end

elseif phase == “did” then
    – Called when the scene is now off screen
    print( “Video: show event, phase did” )
     – remove previous scene’s view

end
end

– Called prior to the removal of scene’s “view” (display group)
function scene:destroy( event )

if(webView~=nil) then
  webView:removeSelf()
  webView = nil
end
group:remove(segmentedControl)
    group:remove(reloadBtn)
group:remove(backButton)
group:remove(tableView)
group:remove(NisaabBar)
group:remove(nisaabText)
group:removeSelf()

end

– END OF YOUR IMPLEMENTATION

scene:addEventListener( “create”, scene )
scene:addEventListener( “show”, scene )
scene:addEventListener( “hide”, scene )
scene:addEventListener( “destroy”, scene )

return scene

rob · March 22, 2014, 5:11pm

I believe you are running into issues with global variables. In your code you are referencing “group”. You are not defining it as a local and in your scene:create() function you assign group self.view and afterwards you don’t set it. Because of the way events trigger at different times and with group being a global, it’s interfering with each other.

Each scene function should define:

local group = self.view.

If you need to reference this outside of the four composer scenes, then you would reference scene.view instead of self.view.

Rob

mdayam · March 22, 2014, 5:15pm

Hi Rob, thanks for the feedback , I will try changing it and let you know if it worked. Mohamed

mdayam · March 22, 2014, 6:30pm

Hi Rob I changed the scope of the variable as suggested, masking it local, but still get the same result. I will look at other declarations in the mean time as well.

mdayam · March 24, 2014, 6:20pm

Hi Rob

I managed to sort out the issue, there was a call ( tableView:deleteAllRows()) in the PopulateTable function which seemed to cause the issue. The createList function already caters for a delete so it was calling it twice.

if tableView then
   tableView:deleteAllRows()
   display.remove( tableView )
   tableView = nil
  end

Mohamed

rob · March 22, 2014, 12:22am

Can you post some code?

mdayam · March 22, 2014, 6:17am