Roku Developer Program

Join our online forum to talk to Roku developers and fellow channel creators. Ask questions, share tips with the community, and find helpful resources.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
georgejecook
Streaming Star

Can we style dialog boxes?

Is it possible to make custom dialogs which have a very distinct style from the ones in the samples?

I'm in the process of rolling my own and want to check before I get too far into that.
George Cook
https://georgejecook.github.io/
https://linkedin.com/in/georgejecook/
Roku developers slack group (https://join.slack.com/t/rokudevelopers/shared_invite/zt-4vw7rg6v-NH46oY7hTktpRIBM_zGvwA) : georgejecook

Contact me on roku developer slack group, or via pm to discuss consultancy/work opportunities/rooibos unit testing framework
0 Kudos
12 REPLIES 12
joetesta
Roku Guru

Re: Can we style dialog boxes?

yes 🙂
aspiring
0 Kudos
georgejecook
Streaming Star

Re: Can we style dialog boxes?

Thanks @joetesta - don't suppose you could elaborate? 

I'll add some more questions:

1. Can we set a totally custom, semi transparent background
2. Can we add more buttons/controls and style them to our specific need
3. Can we respond to key events in the dialog
4. How?
George Cook
https://georgejecook.github.io/
https://linkedin.com/in/georgejecook/
Roku developers slack group (https://join.slack.com/t/rokudevelopers/shared_invite/zt-4vw7rg6v-NH46oY7hTktpRIBM_zGvwA) : georgejecook

Contact me on roku developer slack group, or via pm to discuss consultancy/work opportunities/rooibos unit testing framework
0 Kudos
joetesta
Roku Guru

Re: Can we style dialog boxes?

Here is some redacted code from one of my projects that I hope will help answer some of your questions:

sub showWrongMessage()
  m.Message = createObject("RoSGNode","Dialog")
  bg = createFullScreenBg()
  m.Message.insertchild(bg,0)
  m.Message.titleColor = "0xff0000ff"
  m.Message.title = "TRY AGAIN"
  m.Message.message = "You did something wrong:" + chr(10) + "* message on second line " + chr(10) + "* message on third line "
  m.Message.buttons = ["OK"]
  m.Message.observefield("buttonSelected","closeMessageonOK")
  m.Message.observefield("wasClosed","DialogClosed")
  m.top.dialog = m.Message
end sub


sub createFullScreenBg() As Object
  bg = createObject("roSGNode", "Rectangle")
  bg.height = 1080
  bg.width = 1920
  bg.color = "0x00000044"
  return bg
end sub
aspiring
0 Kudos
joetesta
Roku Guru

Re: Can we style dialog boxes?

In my code "createFullScreenBg" you can create a semi-transparent background.  I'm using a rectangle but just as easily you can use a poster with the correct dimensions and opacity.  My dimensions are for fhd (setting in the manifest).

You can create more buttons in the array and detect which button is pressed on the buttonSelected value.  You could also create custom controls that you'd have to manage the navigation of.  you should be able to manage all navigation and keypress handling with an onKeyEvent function in the parent scene.

I left out the two functions called by observers, but they should be fairly easy, lemme know if you need them.
aspiring
0 Kudos
joetesta
Roku Guru

Re: Can we style dialog boxes?

I haven't experimented with "buttonGroup" yet but https://sdkdocs.roku.com/display/sdkdoc/Dialog says
"This allows the appearance attributes of all the Button nodes in the dialog to be easily modified. Since the ButtonGroup node class is derived from the LayoutGroup node class, additional non-Button node children can also be added."
aspiring
0 Kudos
chaklasiyanikun
Roku Guru

Re: Can we style dialog boxes?

I have the same issue with how to set a button group inside a dialog box. Do you have any luck?

0 Kudos
RobMich
Channel Surfer

Re: Can we style dialog boxes?

Here is an example of how I've set a button group in a dialog.  Hopefully this is what you are looking for:

The code defines a dialog control in the XML:

<Dialog
id="ControlDialog"
visible="false"
/>

Then in the brs file, it accesses the control, creates a group of buttons and sets the focus bitmap:

m.top.ControlDialog = m.top.findNode("ControlDialog")
m.top.ControlDialog.buttonGroup.buttons = [tr("BUTTON1"), tr("BUTTON2"), tr("BUTTON3")]
m.top.ControlDialog.buttonGroup.focusBitmapUri="pkg:/images/Button_Blue_HD.9.png"

chaklasiyanikun
Roku Guru

Re: Can we style dialog boxes?

@RobMichThank you for your response, It's working. Is it possible to change the focused text color?. I tried with "focusedTextColor" like below. But no luck.

' optiondialog.focusedTextColor = "0xFFFFFFFF" 'nonexistent field
' optiondialog.ButtonGroup.focusedTextColor = "0xFFFFFFFF"

For the keyboard dialog box, the "focusedKeyColor" field is Works. But, It's only available for alphabet and digit. Is there any option available for focused text color in the dialog box?

0 Kudos
chaklasiyanikun
Roku Guru

Re: Can we style dialog boxes?


@chaklasiyanikun wrote:

@RobMichThank you for your response, It's working. Is it possible to change the focused text color?. I tried with "focusedTextColor" like below. But no luck.

' optiondialog.focusedTextColor = "0xFFFFFFFF" 'nonexistent field
' optiondialog.ButtonGroup.focusedTextColor = "0xFFFFFFFF"

For the keyboard dialog box, the "focusedKeyColor" field is Works. But, It's only available for alphabet and digit. Is there any option available for focused text color in the dialog box?


Any Solution for this.

0 Kudos
Need Assistance?
Welcome to the Roku Community! Feel free to search our Community for answers or post your question to get help.

Become a Roku Streaming Expert!

Share your expertise, help fellow streamers, and unlock exclusive rewards as part of the Roku Community. Learn more.