Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Collapsable / Nested tableView demo
Started by ksan Jan 08 2014 11:11 PM

53 replies to this topic
[TOPIC CONTROLS]
Page 2 of 3 1 2 3
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#26

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

Erm, Sorry to say but your version also seems to be affected by the Corona SDK bug that I was talking about above. The one that leaves gaps when you do multiple row deletes. See attached screenshot. Hopefully Corona Labs will fix this bug soon so we can get this thing going again.

 

Thanks for your effort in any case. 

Attached Files



[TOPIC: post.html]
#27

primoz.cerar

[GLOBAL: userInfoPane.html]
primoz.cerar
  • Contributor

  • 455 posts
  • Corona SDK

Are you deleting lines in code or did you get this just by opening and closing categories?

As I've said the tableView source has not been changed so any bugs that are in it are still there you should delete rows differently to avoid the bug. You can check the code where I close a category and see how. You can take that code and make a row delete function or fix it tableView source. I will try to fix it post the updated version with transitions. There was also a bug in my code which I missed the first time. Update soon.



[TOPIC: post.html]
#28

atanas

[GLOBAL: userInfoPane.html]
atanas
  • Contributor

  • 225 posts
  • Corona SDK

It seems to me the best approach would be to fix the tableView and make it possible to change the row height at runtime. Deleting/adding rows will probably be always subject to flickering, also management of the IDs in master-detail views will be fairly complicated

[TOPIC: post.html]
#29

primoz.cerar

[GLOBAL: userInfoPane.html]
primoz.cerar
  • Contributor

  • 455 posts
  • Corona SDK

I was thinking about that, but that would mean you would have to insert another tableview for the details or handle detail lines by yourself which I don't think is very good. I have tracked down the delete row bug in managed in such a way that it should not flicker as I am not deleting all the rows just the rows that need to be deleted and inserting the details on expand in the right position. I am close but I still have some issues I have to sort out.



[TOPIC: post.html]
#30

primoz.cerar

[GLOBAL: userInfoPane.html]
primoz.cerar
  • Contributor

  • 455 posts
  • Corona SDK

Update.

 

Fixed the multiple row delete bug (in tableView source) fixed some bugs and added transitions.

Play with it to see if you find any strange behavior or bugs.

Attached Files



[TOPIC: post.html]
#31

atanas

[GLOBAL: userInfoPane.html]
atanas
  • Contributor

  • 225 posts
  • Corona SDK

Most grids have onExpand, onCollapse events - you can use to display details, but also info cards, charts. My comment was more in the general direction of the tableView. In any case - if you make it work nicely by deleting /inserting rows that would be great too.

[TOPIC: post.html]
#32

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

Are you deleting lines in code or did you get this just by opening and closing categories?

 

Yup. I was just opening & closing categories. 

 

The issue with the multiple tableView:deleteRow() calls causing this gap in tableView display is directly caused by the inefficient way tableView:deleteRow() is currently coded. First off it is applying the transition.to off to left to the row being deleted. Not everyone will want their rows to go off to the left, some might prefer transition up, right or just go pooff etc. So I think if I was re-writing the tableView:deleteRow() method I would make the transition style optional & selectable. 

 

Secondly it is going through a rigorous for loop going through all remaining rows of the tableView and moving them up by one. The onScreen rows are moved visually and offscreen ones are moved in terms of indexes. There has to be a better way of doing this. New inserts are handled very nicely with the lazy loading. We need something along the same lines

 

Lastly, when you call multiple tableView:deleteRow()s in a close progression, this fires off multiple instances of this method running in an asynchronous manner. Since they don't watch out for each other and yet they use same internal variables you end up getting the gap in the middle issue. If you delay your tableView:deleteRow() calls by as little as 400 milliseconds the issue goes away but deleting rows one after the other with a time delay in between gives you a huge eye-sore.

 

Anyways, I'm totally on board with Atanas's suggestion. While we can make do somehow with a makeshift collapse/expand solution for now this would ideally be implemented right inside the widget. To do that the widget also needs to recognize the Category rows and the child rows under them in relation with the category rows a little different than it is now. Right now there is no relationship at all. 

 

While I'm typing I see there are new posts and an updated sample. Thanks much for that. I'll go and give it a spin and see how it looks now. Appreciate all your insight and input.



[TOPIC: post.html]
#33

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

@primoz, it is looking much better! I took a quick look at your tableView fix and it seems like you have targeted exactly what I was talking about. Will give this a bigger shakedown later in the day with more records. Thanks much for your contribution. 



[TOPIC: post.html]
#34

primoz.cerar

[GLOBAL: userInfoPane.html]
primoz.cerar
  • Contributor

  • 455 posts
  • Corona SDK

Yes the bug was due to multiple transitions running on the same rows that were supposed to move up.



[TOPIC: post.html]
#35

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

Yes the bug was due to multiple transitions running on the same rows that were supposed to move up.

 

See how quick it was for you to fix it yet the official fix will probably take another couple months to arrive if at all... :-(

 

Thanks so much!



[TOPIC: post.html]
#36

primoz.cerar

[GLOBAL: userInfoPane.html]
primoz.cerar
  • Contributor

  • 455 posts
  • Corona SDK

What no bugs or issues? :)



[TOPIC: post.html]
#37

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

Looked great when I tried it shortly. I will try it with ~ 500 records sometime later this week. Thanks much for your help.



[TOPIC: post.html]
#38

primoz.cerar

[GLOBAL: userInfoPane.html]
primoz.cerar
  • Contributor

  • 455 posts
  • Corona SDK

Let me know if you need assistance or you need this to be put in a separate module includable module.



[TOPIC: post.html]
#39

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

Will do. Thank you very much for the offer. For the time being this was just an experiment in UI design. Not using the collapsing tableView in an app for real but will definitely consider it now that we have a viable sample. 



[TOPIC: post.html]
#40

pspk

[GLOBAL: userInfoPane.html]
pspk
  • Observer

  • 15 posts
  • Corona SDK

I've modified the widget library source code and added two new methods - one for inserting and another for deleting - any number of rows, and at any index position. I've uploaded a demo of this along with the modified widget library to github. I have done limited testing - so one caveat is that you should not mix these new methods with the old insert/delete methods. And of course, graphics 2.0 is a requirement. Check it out and see if it solves your problems....

 

https://github.com/pspk/NewTableViewDemo



[TOPIC: post.html]
#41

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

Great! Thanks much for your contribution.



[TOPIC: post.html]
#42

VincentV

[GLOBAL: userInfoPane.html]
VincentV
  • Enthusiast

  • 58 posts
  • Enterprise

Hi ksan!

 

Do you have an improved version to what primoz did? The current one looks nice but will crash when i collapse/expand in quick succession.

 

Regards,

Vincent



[TOPIC: post.html]
#43

primoz.cerar

[GLOBAL: userInfoPane.html]
primoz.cerar
  • Contributor

  • 455 posts
  • Corona SDK

@vincent.form This was just an exercise into possible bug fixes/improvements. It has not been updated in a long time and uses old corona widgets source code. What you are experiencing is probably due to starting a new collapse/expand operation before the last one has finished and this should be disabled (made impossible until the last one finished) in code or possibly update it so that it handles more than one event at the same time. I'm talking off the top of my head here but that's probably what's happening. If you want to use this code you should test it thoroughly and fix any bugs or optimize it.

 

Regards,

Primoz



[TOPIC: post.html]
#44

VincentV

[GLOBAL: userInfoPane.html]
VincentV
  • Enthusiast

  • 58 posts
  • Enterprise

Yup thanks for the contribution on this primoz! I've been editing and meddling with it but is running into some problem in preventing the events from double activating. Wanted to check if theres any updates on this before i delve into it deeper . Thanks!



[TOPIC: post.html]
#45

VincentV

[GLOBAL: userInfoPane.html]
VincentV
  • Enthusiast

  • 58 posts
  • Enterprise

Improved the current one to fix the crashes that comes with quick succession of expanding/collapsing. Would love to hear from any one whom have developed their own Collapsable/Nested TableView widget.

Attached Files



[TOPIC: post.html]
#46

mok0208

[GLOBAL: userInfoPane.html]
mok0208
  • Observer

  • 5 posts
  • Corona SDK

Hi, 

 

Running in corona give me error "main.lua:66: attempt to call method 'setFillColor' (a nil value)

 

Appreciate if anyone can help me on this 

 

thank you in advance

 

Mok



[TOPIC: post.html]
#47

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 23,917 posts
  • Corona Staff

@mok0208, you're going to need to post some code, in particular around main.lua's line 66.

 

Make sure to use the <> button in the edit bar (same row with Bold, Italics, Underline, etc.) to post your code properly.

 

Rob



[TOPIC: post.html]
#48

mok0208

[GLOBAL: userInfoPane.html]
mok0208
  • Observer

  • 5 posts
  • Corona SDK

Hi Rob,

 

The codes as follows 

 

--Text to show which item we selected
local itemSelected = display.newText( "You selected", 0, 0, native.systemFontBold, 24 )
itemSelected:setFillColor( 0 )
itemSelected.x = display.contentWidth + itemSelected.contentWidth * 0.5
itemSelected.y = display.contentCenterY
widgetGroup:insert( itemSelected )
 
FYI, I just download the earlier collapsingTableView.zip, unzipped it and run main.lua.
 
The error "main.lua:66: attempt to call method 'setFillColor' (a nil value)" pops up instanteously upon running main.lua 
 
No modification of codes are done.
 
I'm using corona 2013.1137 (2013.6.7)
 
Thank you in advance
 
regards,
 
Mok


[TOPIC: post.html]
#49

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 23,917 posts
  • Corona Staff

Version 2013.1137 is really - really old. It's from 2013. Today our public build is 2015.2731.  Between then and today, changed a bunch of things. Build 1137 doesn't have a :setFillColor() option for display.newText() objects. Back then it was :setTextColor().  I highly recommend that you upgrade to the latest public build.

 

You won't be able to deploy 1137 to Apple. You won't be able to use many plugins for Android with a build that old either.

 

Rob



[TOPIC: post.html]
#50

mok0208

[GLOBAL: userInfoPane.html]
mok0208
  • Observer

  • 5 posts
  • Corona SDK

Hi Rob,

 

Thank you for the insight on the changes of coding in varous build version. Will take note of it and update to the latest build.

 

Thanks again

 

regards,

 

mok




[topic_controls]
Page 2 of 3 1 2 3
 
[/topic_controls]