Roku Developer Program

[jmendoza]

Hi everyone!,  I have a trouble with MarkupGrid fixedlayout, this is a example project where I reproduce the problem. The purpose of the project is to show a grid with two rows with 5 items each. This works if you have numColumns=5 (property value assigned on SimpleMarkupListScene.brs ln 16) . If I set numColumns=4, I expect that the last column will hide and I can scroll horizontally to it (I'm wrong?, this happens if I add multiple items on one row, just one row) but I got errors about cells already occupied. I added some comments on the code about the issues.

Let me know what you think, Thanks!

SimpleMarkupListScene.brs

function init()
    m.simpleMarkupGrid = m.top.findNode("SimpleMarkupGrid")
    m.simpleMarkupGrid.content = getGridData()
    m.simpleMarkupGrid.SetFocus(true)
end function

function onKeyEvent(key as String, press as Boolean) as Boolean
    handled = false
    return handled
end function

function getGridData() as object

    data = CreateObject("roSGNode", "ContentNode")

    m.simpleMarkupGrid.numColumns = 5
    
    'if we have rows = 1, items = 10 and numColumns = 5 we can scroll horizontally
    'if we have rows = 2, items = 5 and numColumns = 4 we have "cell was already occupied" errors
    'if we have rows = 2, items = 5 and numColumns = 5 we can see a 2x5 grid    
    
    rows = 2
    items = 5

    for i=0 to rows-1
        for j=0 to items -1
            dataItem = data.CreateChild("ItemData")
            dataItem.text = stri(j) + "," + stri(i)
            dataItem.X = j
            dataItem.Y = i
            dataItem.W = 1
            dataItem.H = 1
        end for
    end for

    ' I can't add an item on the row [0,1]  or [1,1], etc, because there is a "cell" already there if the numColumns is 4, Why is this?
'    ------ Running dev 'Simple MarkupList' main ------
'    ** Error - ArrayGrid: 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

    return data
end function

SimpleMarkupListScene.xml

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

<component name="SimpleMarkupListScene" extends="Scene" >

<script type="text/brightscript" uri="pkg:/components/SimpleMarkupListScene.brs" />

<children>
    <MarkupGrid
      id="SimpleMarkupGrid"
      itemSize="[50,50]"
      itemComponentName="Item"
      fixedLayout="true"
      translation="[105,210]"
   drawFocusFeedback = "false"
      numRows="6"
      itemSpacing="[3,3]">
   </MarkupGrid>
</children>

</component>

ItemData.xml

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

<component name="ItemData" extends="ContentNode">

<interface>
  <field id="text" type="string" />
</interface>

</component>

Item.xml

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

<component name="Item" extends="Group">

<interface>
  <field id="itemContent" type="node" onChange="itemContentChanged"/>
  <field id = "focusPercent" type = "float" onChange = "showfocus"/>
  <field id = "rowFocusPercent" type = "float" onChange = "showrowfocus"/>
</interface>

<script type="text/brightscript" >
<![CDATA[
  function itemContentChanged()
    itemData = m.top.itemContent

    m.text.text = itemData.text

    m.boundRect = m.top.findNode("boundingRect")
    m.boundRect.width *= itemData.W
  end function

  function init()
    m.text = m.top.findNode("text")
  end function

  function showfocus()
   if m.top.focusPercent = 1 then
         m.boundRect.opacity = 1
      else
         if m.top.focusPercent > .5 then
            m.boundRect.opacity = m.top.focusPercent
         else
            m.boundRect.opacity = .5
         end if
      end if
  end function

  function showrowfocus()

  end function
]]>
</script>

<children>
   <Rectangle
      id="boundingRect"
      color="#ffffff"
      height="50"
      width="50"
      opacity=".5">
         <Label id="text"
         color="#000000"
         translation="[5,20]"
         font="font:SmallestSystemFont"
         height="10"
         vertAlign="center"
         horizAlign="left"/>
     </Rectangle>
</children>

</component>