0

I'm sure a lot of people need this, but so far I have not been able to find a good solution.

Environment: AIR app for iOS and Android created with Flash CS6.

What I'm trying to do: Display a table (5 columns, 200 rows). Nothing fancy, just text data. The table should be sortable and scroll smoothly in response to swipe gesture.

The DataGrid component is too "heavy" and not recommended for mobile. Is there a simple solution for this?

user1566515
  • 1,637
  • 4
  • 17
  • 25
  • Just FYI: swipe gesture is a discrete gesture, so it won't work for scrolling. – average dev Aug 07 '12 at 18:37
  • Thank you for the correction. So what do you call the gesture commonly used for scrolling iOS lists? – user1566515 Aug 07 '12 at 20:02
  • Pan (UIPanGestureRecognizer to be certain) which is continuous gesture. People usually say "swipe" when talking about touch-scrolling meaning action (swipe across the screen), that's where confusion comes from. – average dev Aug 07 '12 at 20:37

3 Answers3

1

I haven't tried them yet, but Mad Components (technically it's the Extended Mad Components lib) has a UIDataGrid class.

Other than that, since your grid/table is only intending to display text, you might want to give the components from Adobe a try. Their grids are flexible, and as a result can be "heavy".

Since you only want to render text, you won't pay the price of trying to render heavier objects (check boxes, buttons, etc) inside the grid. The performance (when only rendering text inside the grid) may be acceptable.

Sunil D.
  • 17,983
  • 6
  • 53
  • 65
  • Extended Mad Components seems really cool, although I feel a little apprehensive about using version 0.1.8 in production code. – user1566515 Aug 08 '12 at 16:28
1

For table display (even fancy) I would use the StageWebView, of course if you can afford to not be able to overlay anything over it. Quick Sample below:

webView = new StageWebView();
webView.viewPort = new Rectangle(0, 44, 480, 756);
webView.loadString('<html><head><style type="text/css">tr:nth-child(odd)    { background-color:#eee; } tr:nth-child(even)    { background-color:#fff; } .header_button { width:100%;}</style></head><body><table width="200" border="1"><tr><td><input name="Name" type="button" value="Name" class="header_button"></td><td>Id</td></tr><tr><td>Mark</td><td>0</td></tr><tr><td>Bob</td><td>1</td></tr></table></body></html>');

webView.stage = stage;

you should read through documentation as loadString is pretty limiting:) to see all possible ways of using this class, but the idea should by planted in you by now:) e.g. CSS, JQuery etc. can be used, and scrolling is really fast:)

Lukasz 'Severiaan' Grela
  • 6,078
  • 7
  • 43
  • 79
  • That would work great for displaying static text, but not for sorting. Correct? – user1566515 Aug 10 '12 at 05:40
  • not at all, that is the beauty, you will get the WebKit browser for your command, so whatever you can do in the browser you will do in the StageWebView, just add the JQUery and it will sort it for you, CSS will make it eye-candy:) and native browser will make it FAST:) – Lukasz 'Severiaan' Grela Aug 10 '12 at 09:05
  • did I mention that with native browser you also get the gesture recognition?:) so no problem with swipe:) – Lukasz 'Severiaan' Grela Aug 16 '12 at 10:41
  • I actually tried this and yes, it works great. The only problem is how to make the table sortable. Could you point me to some sample code? Also, not all mobile devices support StageWebView. That could be a dealbreaker. – user1566515 Aug 16 '12 at 17:58
  • Sorting depends on the way you choose to build your html page, e.g. using jquery (http://stackoverflow.com/questions/3160277/jquery-table-sort). What exactly you mean not all? I was looking for a lis tof devices that supports it but couldn't, haev you checked? Also if you have such problem then you have to gracefuly degrade the experience, e.g. not swipe but button activated table navigation (pagination). – Lukasz 'Severiaan' Grela Aug 21 '12 at 12:48
  • Take a look at this [page](http://cookbooks.adobe.com/post_Create_a_basic_web_browser_with_StageWebView-18850.html). He writes that _"Within this function we first test to see if StageWebView is supported."_ and checks `if(StageWebView.isSupported== true)` in the code. I agree that this is probably very rare a problem and I like your solution in general. – user1566515 Aug 21 '12 at 17:02
  • Still for non suporting devices you can present simplified solution like paginated display of X rows at once with page by page navigation. Also you could mark the answer you think is best for you:) And this is nice article as well: http://help.adobe.com/en_US/as3/dev/WS901d38e593cd1bac3ef1d28412ac57b094b-8000.html#WS901d38e593cd1bac-5a0b8b512ac674f48f-8000 – Lukasz 'Severiaan' Grela Aug 22 '12 at 07:45
0

Forget the Flex DataGrid, even with static text you won't get acceptable scrolling performance (I got about 5fps for a real time data grid).

The way to go is a normal List with a custom LabelItemRenderer and a button group for the header. You can make the renderer look like a grid very easily.

I haven't tested Alex Harui's list based grid, but it should work out of the box. If not, you should get the idea. Just roll your own AS3 based renderer and performance should be over 25fps even with fast scrolling. I get around 30 on an iPad2.

AlBirdie
  • 2,071
  • 1
  • 25
  • 45
  • Darn, I was totally focussed on Flex here, didn't see you meant Flash AS3. Sorry that probably won't work then. Although there is a List class in Flash, I'm not sure if you can replace the Flex LabelItemRenderer properly. – AlBirdie Aug 17 '12 at 06:20
  • Not a problem. I'm thinking of switching to Flex, so perhaps I'll try that. – user1566515 Aug 17 '12 at 16:39