Roku Developer Program

[agale]

Is this the correct way to declare X,Y,W,H values for items in a MarkupGrid? Does it automatically know to look for these values when fixedLayout is set to "true" as described in the Fields table here?

<component name="GuideItemData" extends="ContentNode">
 
<interface> 
  <field id="labelText" type="string" />
  <field id="X" type="integer" />
  <field id="Y" type="integer" />  
  <field id="W" type="integer" />  
  <field id="H" type="integer" />
</interface>

</component>

[TheEndless]

You don't need to explicitly add the interface fields. They should already be present on ContentNode. And, yes, the grid knows to automatically look for those fields when fixedLayout is set to true.

[agale]

Thank you for the reply. Removing those interface fields fixed a crash I was experiencing when the grid tried to render.

[agale]

One more issue: the children itemComponents are not rendering in the grid properly. The first element displays as expected with a black rectangle background with the text on top, but the rest do not appear. I can navigate to the other cells (or at least where they should be) but the focus indicator shrinks and regrows to the proper size in the direction of the movement.

Am I setting sizes somewhere I shouldn't be? I only set the row and column sizes in the MarkupGrid and also the height/width of the children elements of the GuideItem as seen below.

My MarkupGrid:

		<MarkupGrid
			id="GuideGrid"
			itemComponentName="GuideItem"
			fixedLayout="true"
			translation="[300,310]" 
			numRows="2"
			numColumns="4"	
			rowHeights="80"
			columnWidths="390"
			itemSpacing="[3,3]"	>
		</MarkupGrid>

and my GuideItem.xml:

<?xml version="1.0" encoding="utf-8" ?>

<component name="GuideItem" extends="Group">
 
<interface> 
  <field id="itemContent" type="node" onChange="itemContentChanged"/> 
</interface>
 
<script type="text/brightscript" >
<![CDATA[ 
  function itemContentChanged() 
    itemData = m.top.itemContent
    m.itemText.text = itemData.labelText
  end function
    
  function init() 
    m.itemText = m.top.findNode("itemText") 
  end function
]]>
</script>

<children> 
	<Rectangle
		id="boundingRect"
		color="#000000"   
		height="80"
		width="390" >
        <Label id="itemText" font="font:MediumSystemFont" height="80" width="390" vertAlign="center" horizAlign="center"/>
     </Rectangle>
</children>

</component>

[agale]

Solved my own issue by setting itemSize on the MarkupGrid and also using "m.boundingRect.width *= itemData.W" in the "onContentChanged" function of GuideItem.xml

[agale]

You're probably sick of me by now, but is there a way to get the rows of MarkupGrid to scroll horizontally when the right of left edge of the grid is reached? I tried using horizFocusAnimationStyle = "floatingFocus" but it does not work as expected. The focus indicator simply continues offscreen and the elements do not scroll left or right to move onscreen and into focus.

[TheEndless]

Have you tried setting the numColumns value to just the visible column count?

[agale]

I have, since that method works fine for numRows, but setting numColumns to anything less than the highest X value in my data results in only the first element (0,0) displaying properly and debugger errors about Fixed Layout cells already being occupied (quoted below).

For instance, I create data items to fill two rows and five columns. Element 9 has W=2 so it spans two columns. Four full columns will fit in the space I've allotted for the MarkupGrid.

Setting numColumns to 5 results in all elements rendering properly, but the last column is 90% offscreen. This is what I want for a guide, but the last column does not shift onto the screen when focused.

Setting numColumns to 4 results in only the first element rendering, but the focus indicator can move to the spaces where the other elements should be.
I also receive this error from the debugger:

** Error - ArrayGrid Layout: Fixed Layout cell was already occupied
** cell 4, current item: 4, new item: 5
** Row (Y): 1 Column (X): 0 Width (W):1 Height (H): 1
** Error - ArrayGrid Layout: Fixed Layout cell was already occupied
** cell 8, current item: 0, new item: 8
** Row (Y): 1 Column (X): 3 Width (W):2 Height (H): 1

It should be drawing the 5th element at (4,0), but instead tries to put it at (0,1) since there is no 5th column.

I see that the definition of numRows says "Note that the actual number of rows may be more or less than the number of visible rows depending on the number of items in the grid content." and that this is not present in the numColumns definition, so I guess I'll just hope for that functionality to be added in the future and figure out an alternative approach for now (any suggestions appreciated).

[TheEndless]

What about checking the x/y coordinates of the focused item and moving the grid programmatically to ensure they're in view?

[agale]

Ok, so I get the focused child, check if it is in the offscreen column, and then try to reduce all the child X values by 4 so they all shift to the left (and supposedly all the items which were previously on screen will have X values less than 0 and they won't be drawn? Or is this an error to have X values less than 0?)

The code below does not work. I'm getting a "Type Mismatch" error on the decrement "m.guideGrid.content.getChild(count).X -= 4"

function onFocusChanged() as void
    print "Focus on item: " + stri(m.guideGrid.itemFocused)
    index = m.guideGrid.itemFocused
       
    'Check if focused on offscreen column'   
    if (m.guideGrid.content.getChild(index).X = 4) then
           
        count=0
        
        'Iterate through all child nodes and decrement'
        while (m.guideGrid.content.getChild(count) <> invalid)
            m.guideGrid.content.getChild(count).X -= 4
            count++
        end while
    endif
    
end function