Roku Developer Program

Developers and content creators—a complete solution for growing an audience directly.
cancel
Showing results for 
Search instead for 
Did you mean: 
vojneski
Level 7

Roku Scene Graph - Grid Screen with User login

Hi,

I want to make video player with user authentication (user must login for watching).
I want to use Roku Scene Graph - Grid Screen with Keyboard dialog.
When user start application, first appear Keyboard for user login and if login is success then appear Grid Screen.

main.brs
Sub RunUserInterface()
    screen = CreateObject("roSGScreen")
    scene = screen.CreateScene("HomeScene")
    port = CreateObject("roMessagePort")
    screen.SetMessagePort(port)
    screen.Show(
while true
        msg = wait(0, port)
        print "------------------"
        print "msg = "; msg
    end while
    
    if screen <> invalid then
        screen.Close()
        screen = invalid
    end if
End Sub


HomeScene.brs
Function Init()
    ' listen on port 8089
    ? "[HomeScene] Init"

    ' GridScreen node with RowList
    m.gridScreen = m.top.findNode("GridScreen")
    m.gridScreen.visible=false

    ' DetailsScreen Node with description, Video Player
    m.detailsScreen = m.top.findNode("DetailsScreen")
    m.detailsScreen.visible=false


    m.labelScreen = m.top.findNode("LabelScreen")
    m.labelScreen.visible=false

    m.keyboardScreen = m.top.findNode("KeyboardScreen")
    m.keyboardScreen.setFocus(true)
    

    ' Observer to handle Item selection on RowList inside GridScreen (alias="GridScreen.rowItemSelected")
    m.top.observeField("rowItemSelected", "OnRowItemSelected")
    
    ' loading indicator starts at initializatio of channel
    m.loadingIndicator = m.top.findNode("loadingIndicator")
    'm.loadingIndicator.visible=false

End Function 


HomeScene.xml
<?xml version="1.0" encoding="utf-8" ?> 
<!--********** Copyright 2016 Roku Corp.  All Rights Reserved. **********--> 

<!-- 
    main node which handles home screen children 
    -->
<component name="HomeScene" extends="Scene">
    
    <interface>
        <!-- Content for RowList in GridScreen on Home Scene -->
        <field id="gridContent" type="node" alias="GridScreen.content" onChange="OnChangeContent" />

        <!-- Row item selection handler -->
        <field id="rowItemSelected" type="intarray" alwaysNotify="true" alias="GridScreen.rowItemSelected"/>
    </interface>
    
    <!-- main handler -->
    <script type="text/brightscript" uri="pkg:/components/screens/HomeScene/HomeScene.brs" />
    
    <children>

        <!-- Grid screen with RowList on Home Scene -->
        <GridScreen
            id="GridScreen"
            visible="true"
            translation="[0,0]" />

        <!-- Overhang logo -->
        <Poster
            translation="[79, 36]"
            uri="pkg:/images/overhangLogo.png"
            width="156"
            height="49"  />

        <!-- Details screen with Play button -->
        <DetailsScreen
            id="DetailsScreen"
            visible="false"/>
            
        <LabelScreen
            id="LabelScreen"
            visible="true"/>
            
        <KeyboardScreen
            id="KeyboardScreen"
            visible="true"/>
            
            
        <LoadingIndicator
      id="loadingIndicator"
      imageUri="pkg:/components/screens/LoadingIndicator/loader.png"
      clockwise="true"
      spinInterval="2"
      fadeInterval="0.5"
      spacing="20"
      imageWidth="100"
      text="Loading..."
      width="1280"
      height="720"
      centered="false"
              translation="[0, 0]"
      textPadding="10"
      font="fontSmiley FrustratedmallBoldSystemFont"
      backgroundColor="0x551A8B"
      backgroundOpacity="0"/>

    </children>
</component>


KeyboardScreen.brs
Function init()
        ? "[KeyboardScreen] init"
      example = m.top.findNode("Keyboard")
      example.title = "Enter your Username"
      example.buttons = ["OK","Cancel"]
      m.top.setFocus(true)
end Function


KeyboardScreen.xml
<?xml version="1.0" encoding="UTF-8"?>
<component name="KeyboardScreen" extends="Group" initialFocus = "Keyboard" xsi:noNamespaceSchemaLocation="https://devtools.web.roku.com/schema/RokuSceneGraph.xsd">

<script type="text/brightscript" uri="pkg:/components/screens/KeyboardScreen/KeyboardScreen.brs" />
  <children >
  <KeyboardDialog id="Keyboard"/>
  </children>
</component>


Pls help me if you have any advice.
0 Kudos
1 Reply
ajaya_paudel
Level 7

Re: Roku Scene Graph - Grid Screen with User login

i have used this code but gives error of "Error creating XML component HomeScene
-- Could not create node of unknown type "LabelScreen"
-- Error found at line 40 of file pkg:/components/screens/HomeScene/HomeScene.xml"
how can i solve this problem can you guys help me?since i am a new coder in roku
0 Kudos