Is there an example of using a TableView with a Network.Request to get the data asyncronously?

mmahon512 · December 2, 2012, 3:30pm

Hi I am trying to figure out how I can make the table wait to load the data until the network request has completed and decoded the json data. Is there an example of such a beast somewhere? [import]uid: 125860 topic_id: 33572 reply_id: 333572[/import]

rob · December 2, 2012, 6:17pm

The way I ended up doing it was to force the table to re-render itself after network.request() finishes and calls its onComplete handler. In that handler after you are done populating the tableRow. It’s kind of tricky keeping track of which tableView row you need to update. A lot depends on when and where you are calling networkRequest from.

Here is a little code snippet for forcing a tableView to re-render itself:

local function updateTable()  
 local y = myList:getContentPosition()  
 myList:scrollToY(y,0)  
end   
  
local function reRender()  
 for i=1,#myList.content.rows do  
 myList.content.rows[i].reRender = true  
 end  
 updateTable()  
end

[import]uid: 199310 topic_id: 33572 reply_id: 133426[/import]

rob · December 2, 2012, 6:17pm

The way I ended up doing it was to force the table to re-render itself after network.request() finishes and calls its onComplete handler. In that handler after you are done populating the tableRow. It’s kind of tricky keeping track of which tableView row you need to update. A lot depends on when and where you are calling networkRequest from.

Here is a little code snippet for forcing a tableView to re-render itself:

local function updateTable()  
 local y = myList:getContentPosition()  
 myList:scrollToY(y,0)  
end   
  
local function reRender()  
 for i=1,#myList.content.rows do  
 myList.content.rows[i].reRender = true  
 end  
 updateTable()  
end

[import]uid: 199310 topic_id: 33572 reply_id: 133426[/import]

facada · December 5, 2012, 1:22pm

Hi Rob,

Can you post a more complete example with list creation and the network request?
I’m having some dificulty positioning your code snippet.

Thanks [import]uid: 158485 topic_id: 33572 reply_id: 133914[/import]

rob · December 5, 2012, 2:47pm

Hi @facada.

I’m afraid I can’t because there are too many variables. What are you downloading? What content needs to go into the table row? What content do you have there to begin with? What just needs updated? Where are you downloading it from? What causes network.request() to be called?

It’s way too much to make into a forum type post. [import]uid: 199310 topic_id: 33572 reply_id: 133930[/import]

mpappas · December 5, 2012, 3:01pm

When asynchronous and lazy loading occurs correctly on screen, it all seems so smooth and simple. But there’s a lot that needs to go on behind the scenes to make it happen. On the plus side, Corona has all the right calls and hooks you’ll need to make lists load fast and scroll fast no matter how big they are (provided you approach managing your particular data well). Here’s one devs solution:

http://developer.coronalabs.com/forum/2012/01/11/asynchronous-image-loading-help-needed

I’m especially impressed with Coronas strategy to automatically render (load) rows when they come into view on screen, and automatically de-render (free) them when they scroll off screen. While there’s a tiny performance penalty as you scroll (not really noticeable), there’s an incredible advantage to the “lazy loading” that it provides. Lists with thousands of graphics (which would never all load at once) load flawlessly, and scroll very fast… If you’re using thumbnail sized images, they’re loaded and onscreen before you even notice… It’s pure genius, and if you follow their lead, pretty darn easy (for something so powerful).

Best of luck.

Note: to see how the lazy loading works, put a print statement showing the current row in your onRender function (and scroll up and down the list, sending items on/off the display)… Only the rows visible will be called to load up/render… When they go off screen, they are released (and reloaded if they are scrolled back on – all automatically). [import]uid: 79933 topic_id: 33572 reply_id: 133931[/import]

fac · December 6, 2012, 8:48am

Hi,

This is driving me nuts!! There must be a simple solution for this, but I think I’m too newbie for get it…
I have the tableview and the request for the JSON object. The problem is that the tableview is rendered before the network request is finished generating the “attempt to index field ‘?’ (a nil value)”

Please, analyse my code, and save my day

Thanks

[lua]local storyboard = require “storyboard”
local listScene = storyboard.newScene()

local data = {}
local json = require(“json”)
local URL = “https://example.com/json”

– network request json data
local function jsonGet(event)
if ( event.isError ) then
print ( “Network error - download failed” )
else
data = json.decode(event.response)
end
end
network.request( URL, “GET”, jsonGet )

– tableView scene
function listScene:createScene( event )
local group = self.view

local list = widget.newTableView{
data=data,
top = top+44,
height = 322,
maskFile = “assets/mask-320x322.png”
}

–Handle row rendering
local function onRowRender( event )
local row = event.row
local rowGroup = event.view

–local lbl_title = “Photo Title”
local lbl_title = data[event.row].photo_title

– title
row.title = display.newRetinaText( rowGroup, lbl_title … row.index, 0, 0, native.systemFontBold, 14 )
row.title:setTextColor( 0,0,0, 255 )
row.title:setReferencePoint( display.TopLeftReferencePoint )
row.title.x, row.title.y = 80, 5
rowGroup:insert( row.title )
end

– handles row presses/swipes
local function rowListener( event )
local row = event.row
local background = event.background

if event.phase == “release” or event.phase == “tap” then
background:setFillColor( 0, 110, 233, 255 )
row.reRender = true
– set chosen row index to this row’s index
chosenRowIndex = row.index
– go to row scene
storyboard.gotoScene( “listrowScene”, “slideLeft”, 350 )
end
end

– insert rows into list (tableView widget)
for i=1,1 do
local isCategory
local rowColor
local rowHeight = 80
local listener = rowListener
list:insertRow{
height = rowHeight,
rowColor = rowColor,
isCategory = isCategory,
onRender = onRowRender,
listener = listener
}
end

group:insert( list )
end
listScene:addEventListener( “createScene”, listScene )

return listScene[/lua] [import]uid: 189638 topic_id: 33572 reply_id: 134043[/import]

facada · December 5, 2012, 1:22pm

Hi Rob,

Can you post a more complete example with list creation and the network request?
I’m having some dificulty positioning your code snippet.

Thanks [import]uid: 158485 topic_id: 33572 reply_id: 133914[/import]

rob · December 5, 2012, 2:47pm

Hi @facada.

I’m afraid I can’t because there are too many variables. What are you downloading? What content needs to go into the table row? What content do you have there to begin with? What just needs updated? Where are you downloading it from? What causes network.request() to be called?

It’s way too much to make into a forum type post. [import]uid: 199310 topic_id: 33572 reply_id: 133930[/import]

rob · December 7, 2012, 4:54am

I think you are mixing the old tableView with the newer widget.tableView in how to do things.

The newer widget.tableView does not take a data parameter. See:
http://docs.coronalabs.com/api/library/widget/newTableView.html
But that’s being ignored, lets look at how network.request() works. It fires off and runs in the background retrieving your data. When it’s done it fires off a call back. In your code your tableView constructor and inserts run immediately after requesting the data but before it loads. data is nil at that point and your onRender functions will not work because of all the nil pointers.

You want to do those list:insertRows() inside your call back from network.request()
[import]uid: 199310 topic_id: 33572 reply_id: 134160[/import]

mpappas · December 5, 2012, 3:01pm

When asynchronous and lazy loading occurs correctly on screen, it all seems so smooth and simple. But there’s a lot that needs to go on behind the scenes to make it happen. On the plus side, Corona has all the right calls and hooks you’ll need to make lists load fast and scroll fast no matter how big they are (provided you approach managing your particular data well). Here’s one devs solution:

http://developer.coronalabs.com/forum/2012/01/11/asynchronous-image-loading-help-needed

I’m especially impressed with Coronas strategy to automatically render (load) rows when they come into view on screen, and automatically de-render (free) them when they scroll off screen. While there’s a tiny performance penalty as you scroll (not really noticeable), there’s an incredible advantage to the “lazy loading” that it provides. Lists with thousands of graphics (which would never all load at once) load flawlessly, and scroll very fast… If you’re using thumbnail sized images, they’re loaded and onscreen before you even notice… It’s pure genius, and if you follow their lead, pretty darn easy (for something so powerful).

Best of luck.

Note: to see how the lazy loading works, put a print statement showing the current row in your onRender function (and scroll up and down the list, sending items on/off the display)… Only the rows visible will be called to load up/render… When they go off screen, they are released (and reloaded if they are scrolled back on – all automatically). [import]uid: 79933 topic_id: 33572 reply_id: 133931[/import]

fac · December 6, 2012, 8:48am