[Staff Post] Use Case Question For Widget Users (Tableview Related)

Hey everyone.

I have another question for you all. I have seen a lot of posts requesting row.reRender be added back to tableViews. I am making this post to get feedback on what exactly you would expect row.reRender to do?

Please give me your wish-list for this feature by replying to this topic.

Thanks

Hey Danny, the new tableviews are very “heavy” I guess this has to do with hiding rows as opposed to destroying them. With large tableviews and multiple tableviews on the same screen this makes their performance less then optimal. I experience slow ui and jittery scrolling and performance when using a large/multiple tableview(600+ rows).

 

My wish list for row.reRender() is to behave similar to how it used to… to re-draw a row. Look at how the Mail app works on an iPad in Landscape, this can’t be done in Corona using widgets 2.0 but was possible using the old widgets. In my app I have a message/mail center that used to function like that iOS Mail app, tap message on left and row changes color to indicate the current message.  

 

Hey Chevol.

 

That is the point I want to make clearer. By redraw I presume you mean something along these lines.

(NOTE: Below code is just pseudo code and is a concept for how reRender may work, it will NOT work at the present time)

 

-- Listener called by reRender local function listener( event ) local row = event.row -- redraw the row, set row color, insert items etc. -- How about this function for changing the background color of the row row:setRowColor( { default = { 255, 255, 255 }, over = { 0, 255, 0 } } ) end -- Function to initiate reRendering of the tableView rows tableView:reRender( listener )

Hey Danny, the new tableviews are very “heavy” I guess this has to do with hiding rows as opposed to destroying them. With large tableviews and multiple tableviews on the same screen this makes their performance less then optimal. I experience slow ui and jittery scrolling and performance when using a large/multiple tableview(600+ rows).

 

My wish list for row.reRender() is to behave similar to how it used to… to re-draw a row. Look at how the Mail app works on an iPad in Landscape, this can’t be done in Corona using widgets 2.0 but was possible using the old widgets. In my app I have a message/mail center that used to function like that iOS Mail app, tap message on left and row changes color to indicate the current message.  

 

Hey Chevol.

 

That is the point I want to make clearer. By redraw I presume you mean something along these lines.

(NOTE: Below code is just pseudo code and is a concept for how reRender may work, it will NOT work at the present time)

 

-- Listener called by reRender local function listener( event ) local row = event.row -- redraw the row, set row color, insert items etc. -- How about this function for changing the background color of the row row:setRowColor( { default = { 255, 255, 255 }, over = { 0, 255, 0 } } ) end -- Function to initiate reRendering of the tableView rows tableView:reRender( listener )

Danny,

I am new to Corona and have been looking for a method to reRender a row. My use is for a business app that looks like the iOS mail app but the right side is an edit form. When a user edits the data associated with a row I update the list behind the table to flip a boolean that causes the renderer to draw a check mark. The current problem is that it will only show the mark after the row has scrolled out of view and returned to view.

On another note… I also have two tableviews in the form, the second being based on the value of the first. I have the same problem with these tableviews. I need to have a method to show the user what value they selected. I first used picker wheels for this, but picker wheel don’t support events so I have to use a button between them to cause the second wheel to populate. I’m fine with the lists if there is a way to update and reRender.

Frank

Danny,

I am new to Corona and have been looking for a method to reRender a row. My use is for a business app that looks like the iOS mail app but the right side is an edit form. When a user edits the data associated with a row I update the list behind the table to flip a boolean that causes the renderer to draw a check mark. The current problem is that it will only show the mark after the row has scrolled out of view and returned to view.

On another note… I also have two tableviews in the form, the second being based on the value of the first. I have the same problem with these tableviews. I need to have a method to show the user what value they selected. I first used picker wheels for this, but picker wheel don’t support events so I have to use a button between them to cause the second wheel to populate. I’m fine with the lists if there is a way to update and reRender.

Frank

Hey Danny, did you ever get this finalized? I have a tableview with a mask so it only occupies part of the screen. I’d like to be able to highlight the selected row, so people can tell which row they’ve selected. I tried

    list._view._rows[event.target.index]._view:setRowColor()

And that works to set the highlighted row initially, but when I try to set the unselected rows back to the original color, it doesn’t work, they just remain at the highlighted color.

In my eyes, there is no need to a separate reRender Listener. Just a tableView:reRender() function which reRender all visible rows. You can include all potential cases in the standard onRowRender function. 

Lets say, you want to show a delete button in each row, if the user hits a button at the toolbar:

function onRowRender() -- generate standard row items here if editButtonFlag == true then -- generate deletebutton here end end function editButtonListener(event) editButtonFlag == true myTableView:reRender() end

thats it. My actual approach is to delete and recreate all rows, what probably is not the most efficient way. I have a tableView which updates on the fly by user input in a textfield, so it should be as fast as possible. Thats my actual solution:

-- eventListener on table (list) updates function MyClass:atUpdate(event)          local tableview = self.tableView local list = self.list     if #list == 0 then         self:hideTableView()     else         tableview:deleteAllRows()                  for i=1,#list,1 do             tableview:insertRow{                 rowHeight=64,                 isCategory=false,             }          end         self:showTableView()      end end  

Hope that helps, and thanks for asking for our needs.

 

uups, I saw only now that this thread is a bit older  :rolleyes:

… anyway, the issue is ongoing

Hey guys. The below code is valid and should work for your needs.

-- local function listener( event ) local row = event.row -- redraw the row, set row color, insert items etc. -- Change the the background color of the row row:setRowColor( { default = { 255, 255, 255 }, over = { 0, 255, 0 } } ) end

Hey Danny,

I don’t see how this works. Is this a additional listener? And how to call it?

You can call that function from either your tableView onRowTouch listener or your onRowRender function.

No additional listeners are needed, you call it as shown above.

Thanks

Sorry, that makes no sense for me. The aim is to reRender all visible rows. If I put new content in a function which is called by the standard onRowRender function, which is just called if the row is moved on screen, how will this function called if the row is already visible? 

The onRowTouch is certainly just called if the row is touched, but what if the event is not initialized by a row touch event?

Maybe you can make it clear with a sample? Like my mentioned case above. The user presses an edit button in the toolbar, and all rows should show a delete button in consequence.

Thanks

Sorry sunmils, I was replying to mutatron’s question which was related to changing the color of rows at runtime.

Your best bet for doing what you ask, would be to loop through all of the rows in a for loop. I believe a convenience version of this was being worked on. Let me ask my fellow engineer about it for you.

Edit: I have checked with my fellow engineer and he has informed me that the row re-rendering function will be available shortly.

I am closing this thread now as the original post no longer applies, the row’s do get culled when they are off screen.

Please feel free to open up your own thread to discuss any issues at hand

Hey Danny, did you ever get this finalized? I have a tableview with a mask so it only occupies part of the screen. I’d like to be able to highlight the selected row, so people can tell which row they’ve selected. I tried

    list._view._rows[event.target.index]._view:setRowColor()

And that works to set the highlighted row initially, but when I try to set the unselected rows back to the original color, it doesn’t work, they just remain at the highlighted color.

In my eyes, there is no need to a separate reRender Listener. Just a tableView:reRender() function which reRender all visible rows. You can include all potential cases in the standard onRowRender function. 

Lets say, you want to show a delete button in each row, if the user hits a button at the toolbar:

function onRowRender() -- generate standard row items here if editButtonFlag == true then -- generate deletebutton here end end function editButtonListener(event) editButtonFlag == true myTableView:reRender() end

thats it. My actual approach is to delete and recreate all rows, what probably is not the most efficient way. I have a tableView which updates on the fly by user input in a textfield, so it should be as fast as possible. Thats my actual solution:

-- eventListener on table (list) updates function MyClass:atUpdate(event)          local tableview = self.tableView local list = self.list     if #list == 0 then         self:hideTableView()     else         tableview:deleteAllRows()                  for i=1,#list,1 do             tableview:insertRow{                 rowHeight=64,                 isCategory=false,             }          end         self:showTableView()      end end  

Hope that helps, and thanks for asking for our needs.

 

uups, I saw only now that this thread is a bit older  :rolleyes:

… anyway, the issue is ongoing

Hey guys. The below code is valid and should work for your needs.

-- local function listener( event ) local row = event.row -- redraw the row, set row color, insert items etc. -- Change the the background color of the row row:setRowColor( { default = { 255, 255, 255 }, over = { 0, 255, 0 } } ) end

Hey Danny,

I don’t see how this works. Is this a additional listener? And how to call it?