I have been researching the tableView control and from what I see it is mainly for one column? Is there any way to add more than one column? I guess buy formatting the text that has the text in it I can space it out?
Thanks
Warren
[import]uid: 184193 topic_id: 34966 reply_id: 334966[/import]
It’s one column in that it’s really difficult to add independently scrolling columns. But if you want the columns to scroll in unison, all you have to do is edit the render function to make everything appear to your liking. (For example, you could make multiple text objects and adjust the maximum width of each, or make seperate newRects() and place text inside each, then make the Rect() invisible, there are tons of options) [import]uid: 41884 topic_id: 34966 reply_id: 138997[/import]
@warrenwsav a tableView is by definition a single column view. That’s the intent Apple created when designing the widget. A widget.newPickerView is the multi-column widget. But as @richard9 pointed out, each row is a rectangular display group and you can make you’re own columns within the row. [import]uid: 199310 topic_id: 34966 reply_id: 139109[/import]
Thanks Rob but I don’t see anything for newPickerView. Is that available now? I did a search for it and came up with nothing. Maybe I’m missing something?
Warren
[import]uid: 184193 topic_id: 34966 reply_id: 139179[/import]
I did see the PickerWheel which supports columns. Is this what you mean? If so, it’s not really what I am looking for. I would like to display data like in a grid. Is there any way I can display html? I could at least create a html table to show the data. I am trying to do a business app and display a report with multiple columns.
Thanks,
Warren
[import]uid: 184193 topic_id: 34966 reply_id: 139180[/import]
@warren - What Richard and Rob are saying is that if the columns don’t scroll independently, you are probably best off to just *visually* simulate columns through the formatting of your rows… Visually delineating the columns by color, or vertical lines in each row. Text in each column would be formatted when they are created to fit within their limitde areas (the height and width parameters when creating text will limit its size).
Rough code for the key onRowRender() that uses colored rectangles for positioning of simulated columns is below.
[code]
local function onRowRender( event )
local row = event.target
local rowGroup = event.view
local rowHeight=42
local rowWidth=620
local leftCol = display.newRect(0,0,rowWidth/3,rowHeight)
leftCol.strokeWidth = 3
leftCol:setStrokeColor(255,255,255)
leftCol:setFillColor(128,16,16,255)
leftCol.x = rowWidth/3 – Left third of row is one column
leftCol.y = rowHeight/2
rowGroup:insert( leftCol )
local midCol = display.newRect(0,0,rowWidth/3,rowHeight)
midCol.strokeWidth = 3
midCol:setStrokeColor(255,255,255)
midCol:setFillColor(16,128,16,255)
midCol.x = rowWidth/2 – Middle third of row is second column
midCol.y = rowHeight/2
rowGroup:insert( midCol )
local rightCol = display.newRect(0,0,rowWidth/3,rowHeight)
rightCol.strokeWidth = 3
rightCol:setStrokeColor(255,255,255)
rightCol:setFillColor(16,16,128,255)
rightCol.x = (rowWidth*2)/3 – Right third of row is last column
rightCol.y = rowHeight/2
rowGroup:insert( rightCol )
end
[/code] [import]uid: 79933 topic_id: 34966 reply_id: 139187[/import]
Thanks for the explanation and code example. One question - where do I put the actual text for each column? Do I create a text and insert it into each column? Sorry if I’m way off.
Warren
[import]uid: 184193 topic_id: 34966 reply_id: 139192[/import]
Yes, it sounds like you’re on the right track.
You create the text for each column in the onRowRender, and position its X coord so it is lined up with those above and below. You can limit the width of the text to the column width when creating it (width, height params).
You probably would want to enclose each column with rectangles to visually separate them / reinforce the perception of columns.
[import]uid: 79933 topic_id: 34966 reply_id: 139193[/import]
It’s one column in that it’s really difficult to add independently scrolling columns. But if you want the columns to scroll in unison, all you have to do is edit the render function to make everything appear to your liking. (For example, you could make multiple text objects and adjust the maximum width of each, or make seperate newRects() and place text inside each, then make the Rect() invisible, there are tons of options) [import]uid: 41884 topic_id: 34966 reply_id: 138997[/import]
@warrenwsav a tableView is by definition a single column view. That’s the intent Apple created when designing the widget. A widget.newPickerView is the multi-column widget. But as @richard9 pointed out, each row is a rectangular display group and you can make you’re own columns within the row. [import]uid: 199310 topic_id: 34966 reply_id: 139109[/import]
Thanks Rob but I don’t see anything for newPickerView. Is that available now? I did a search for it and came up with nothing. Maybe I’m missing something?
Warren
[import]uid: 184193 topic_id: 34966 reply_id: 139179[/import]
I did see the PickerWheel which supports columns. Is this what you mean? If so, it’s not really what I am looking for. I would like to display data like in a grid. Is there any way I can display html? I could at least create a html table to show the data. I am trying to do a business app and display a report with multiple columns.
Thanks,
Warren
[import]uid: 184193 topic_id: 34966 reply_id: 139180[/import]
@warren - What Richard and Rob are saying is that if the columns don’t scroll independently, you are probably best off to just *visually* simulate columns through the formatting of your rows… Visually delineating the columns by color, or vertical lines in each row. Text in each column would be formatted when they are created to fit within their limitde areas (the height and width parameters when creating text will limit its size).
Rough code for the key onRowRender() that uses colored rectangles for positioning of simulated columns is below.
[code]
local function onRowRender( event )
local row = event.target
local rowGroup = event.view
local rowHeight=42
local rowWidth=620
local leftCol = display.newRect(0,0,rowWidth/3,rowHeight)
leftCol.strokeWidth = 3
leftCol:setStrokeColor(255,255,255)
leftCol:setFillColor(128,16,16,255)
leftCol.x = rowWidth/3 – Left third of row is one column
leftCol.y = rowHeight/2
rowGroup:insert( leftCol )
local midCol = display.newRect(0,0,rowWidth/3,rowHeight)
midCol.strokeWidth = 3
midCol:setStrokeColor(255,255,255)
midCol:setFillColor(16,128,16,255)
midCol.x = rowWidth/2 – Middle third of row is second column
midCol.y = rowHeight/2
rowGroup:insert( midCol )
local rightCol = display.newRect(0,0,rowWidth/3,rowHeight)
rightCol.strokeWidth = 3
rightCol:setStrokeColor(255,255,255)
rightCol:setFillColor(16,16,128,255)
rightCol.x = (rowWidth*2)/3 – Right third of row is last column
rightCol.y = rowHeight/2
rowGroup:insert( rightCol )
end
[/code] [import]uid: 79933 topic_id: 34966 reply_id: 139187[/import]
Thanks for the explanation and code example. One question - where do I put the actual text for each column? Do I create a text and insert it into each column? Sorry if I’m way off.
Warren
[import]uid: 184193 topic_id: 34966 reply_id: 139192[/import]
Yes, it sounds like you’re on the right track.
You create the text for each column in the onRowRender, and position its X coord so it is lined up with those above and below. You can limit the width of the text to the column width when creating it (width, height params).
You probably would want to enclose each column with rectangles to visually separate them / reinforce the perception of columns.
[import]uid: 79933 topic_id: 34966 reply_id: 139193[/import]