Roku Developer Program

Developers and content creators—a complete solution for growing an audience directly.
cancel
Showing results for 
Search instead for 
Did you mean: 
parag
Level 7

Horizontal MarkupGrid w/ a single row focus issue?

I am trying to create a horizontal list of labels at top of screen for navigation similar to what iHeartRadio uses. I am new to Brightscript and could not figure out a way to use LabelList horizontally which would be all I need. So, I am using a MarkupGrid with number of rows set to 1 which does work. However, when I select a label, I would like to change the font of the label to bold and not highlight it. I tried using 'focusPercent' in the gridItem, but have 2 issues:

1. The font is changed for the first element even before the MarkupGrid has focus.
2. The font is not changed back even when I leave the element.

Since I am new to the platform, I am sure that there are better ways of going about what I am doing. Any help would be appreciated. (Please ignore the image - just some more test code)

My code is below:


function showFocus()
'    if (m.top.gridHasFocus <> invalid)
        if m.top.focusPercent = 1.0
            m.itemText.font="font:MediumBoldSystemFont"
            print m.top.itemContent.labelText
        else if m.top.focusPercent = 0.0
            m.itemText.font="font:MediumStyleFont"
        end if
'    end if
    
'    if focus
'        m.itemText.text=m.top.itemContent.labelText
'    else
'        m.itemText.font="font:MediumSystemFont"
'    end if
'    print m.top.itemContent.labelText
end function


<?xml version="1.0" encoding="utf-8" ?>
<!--********** Copyright 2016 Roku Corp.  All Rights Reserved. **********-->

<component name="SimpleGridItem" extends="Group" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="https://devtools.web.roku.com/schema/RokuSceneGraph.xsd">
 
<interface> 
  <field id="itemContent" type="node" onChange="itemContentChanged"/> 
  <field id="focusPercent" type="float" onChange="showfocus"/>
</interface>

<script type="text/brightscript" uri="pkg:/components/SimpleGridItem.brs" />
 
<children> 
<LayoutGroup layoutDirection="vert" vertAlignment="top" itemSpacings="20" translation="[0,0]" >
<Poster id="itemImage" translation="[17,3]" width="195" height="150" />

<LayoutGroup layoutDirection="horiz" horizAlignment="center" itemSpacings="0" >
<Label id="itemText" font="font:MediumSystemFont" horizAlign="center"/>
</LayoutGroup>
</LayoutGroup>
</children>

</component>

0 Kudos