Can we style dialog boxes?

Archived
1

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.

2

yes :slightly_smiling_face:

3

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?
4

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
5

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.

6

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.”

7

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

8

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:

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”

9

@RobMich Thank 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?

10

Any Solution for this.

11

I have not experimented with this setting, but according to the documentation, the focusedTextColor field on the buttongroup should be working.

optiondialog.ButtonGroup.focusedTextColor = "0xFFFFFFFF"

Are you using a custom font for the button text? That could be causing it not to work.

12

No, I don’t use Custom Font. I tried the same as per Document mention. My Example is here. But no luck.

13

I managed to make this by using a darker white

dialog.buttonGroup.textColor = "0xFFFFFFFF"
dialog.buttonGroup.focusedTextColor = "0xDDD9D7FF". 'darker white (shows as white)

hope it helps