Skip to content

Fix code formatting in DialogExample README #81

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
chrisdp wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix code formatting in DialogExample README #81

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 17 additions & 19 deletions ux components/dialogs/DialogExample/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,10 @@ In this example, and in the remaining dialog node class examples, we'll cause th

**Basic Message Dialog Example**

```
<component name = "DialogExample" extends = "Scene" >

<script type = "text/brightscript" >

```brightscript
<component name="DialogExample" extends="Scene" >
<script type="text/brightscript" >
<![CDATA[

sub init()
m.top.backgroundURI = "pkg:/images/rsgde_bg_hd.jpg"
example = m.top.findNode("instructLabel")
Expand Down Expand Up @@ -53,29 +50,30 @@ In this example, and in the remaining dialog node class examples, we'll cause th
end function
]]>
</script>
<children >

<children>
<Label
id = "instructLabel"
text = "Press OK For Dialog" />
id="instructLabel"
text="Press OK For Dialog" />
</children>
</component>
```

Note that most of the code in the component is there just to create and center a **Label** node with an instruction to press the **OK** remote key to show the dialog. Then we use an **onKeyEvent()** function to call `showdialog()` when the **OK** key is pressed:

```
sub showdialog()`
` dialog = createObject("roSGNode", "Dialog")`
` dialog.backgroundUri = "pkg:/images/rsgde_dlg_bg_hd.9.png"`
` dialog.title = "Example Dialog"`
` dialog.optionsDialog = true`
` dialog.message = "Press * To Dismiss"`
` m.top.dialog = dialog`
`end sub
```brightscript
sub showdialog()
dialog = createObject("roSGNode", "Dialog")
dialog.backgroundUri = "pkg:/images/rsgde_dlg_bg_hd.9.png"
dialog.title = "Example Dialog"
dialog.optionsDialog = true
dialog.message = "Press * To Dismiss"
m.top.dialog = dialog
end sub
```

Again, the first step to show a dialog is to create a dialog node object, in this case, creating a **Dialog** node class object. The next step is configure the dialog node object. In this example, we set a custom background for the dialog, by setting the `backgroundUri` field to the location of a custom 9-patch PNG graphic image. Then we configure the dialog title by setting the string to be used as the value of the `title` field. We want users to be able to dismiss this dialog by pressing the **Options** remote key in addition to the default **Back** key, so we set the `optionsDialog` field value to true. And finally, we add the message we want to convey to users by setting the `message` field value to the string to be used (this example does not have much of a message, just a reminder that the **Options** remote key can be used to dismiss the dialog).

So if you press the **OK** remote key as instructed, this is the dialog that is shown:

![img](https://sdkdocs.roku.com/download/attachments/4262970/dialogdoc.jpg?version=2&modificationDate=1472838198183&api=v2)
![img](https://sdkdocs.roku.com/download/attachments/4262970/dialogdoc.jpg?version=2&modificationDate=1472838198183&api=v2)