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>
