Horizontal alignment as "Right" is not working in bright script

Question

I am trying to draw a button with a buttonText and right Text inside the button. XML file is as below.

<?xml version="1.0" encoding="utf-8" ?>
<component name="settingsButtons" extends="Group">

<interface>
  <field id="itemContent" type="node" onChange="itemContentChanged"/>
</interface>

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

        m.buttonRect.width = itemData.buttonWidth
        m.buttonRect.height = itemData.buttonHeight
        m.buttonRect.color = itemData.buttonColor

        m.buttonText.text = itemData.titleText
        m.buttonText.translation = m.defaultTextTranslation
        m.buttonText.color = itemData.textColor

        m.buttonRightText.text = itemData.rightText
        m.buttonRightText.translation = m.defaultRightTextTranslation
        m.buttonRightText.color = itemData.textColor
    end sub

    sub initCoordinates()
        m.defaultTextTranslation = "[30, 20]"
        m.defaultRightTextTranslation = "[790, 20]"
    end sub

    sub init()
        initCoordinates()
        m.buttonRect = m.top.findNode("buttonRect")
        m.buttonText = m.top.findNode("buttonText")
        m.buttonRightText = m.top.findNode("buttonRightText")
    end sub
]]>
</script>

<children>
    <Rectangle id="buttonRect" translation="[0, 0]" width="820" height="70">
        <Label id="buttonText" height="29" horizAlign = "left" vertAlign = "center" translation="[0, 0]" >
          <Font role="font" uri="pkg:/fonts/NHaasGroteskDSStd-75Bd.otf" size="24" />
        </Label>
        <Label id="buttonRightText" height="29" horizAlign = "right" vertAlign = "center" translation="[0, 0]" >
          <Font role="font" uri="pkg:/fonts/NHaasGroteskTXStd-55Rg.otf" size="24" />
        </Label>
    </Rectangle>
</children>

</component>

Even though I kept horizAlign as right, buttonRightText is getting displayed from the position where buttonText is getting displayed (i.e. getting displayed as left alignment). Can you please let me know how to fix this issue.

Answer 1

From the SDK doc, you need to have a width specified (not equal to zero) for horizAlign to work.

One option is to have all two labels share the same width with the rectangle, and keep the translation as [0, 0].

sub itemContentChanged()
  itemData = m.top.itemContent

  m.buttonRect.width = itemData.buttonWidth
  m.buttonRect.height = itemData.buttonHeight
  m.buttonRect.color = itemData.buttonColor

  m.buttonText.text = itemData.titleText
  m.buttonText.width = itemData.buttonWidth
  m.buttonText.color = itemData.textColor

  m.buttonRightText.text = itemData.rightText
  m.buttonRightText.width = itemData.buttonWidth
  m.buttonRightText.color = itemData.textColor
end sub