Add a MarkupList

components/ConfigurationItem.xml

@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<component name="ConfigItem" extends="Group">
+  <children>
+    <Rectangle
+      id="selectionOutline"
+      translation="[0,0]"
+      color="#a2a2a2"
+      opacity="0"
+      width="196"
+      height="40"
+      />
+
+    <Rectangle
+      translation="[4, 4]"
+      color="#000b35"
+      opacity="1"
+      width="188"
+      height="32"
+      />
+
+    <LayoutGroup
+      layoutDirection="horiz"
+      vertAlignment="center"
+      itemSpacings="20"
+      translation="[8,40]" >
+      <!-- above translation is itemspacings + item height / 2 -->
+      <Label id="itemName" horizAlign="left" width="196" height="60" />
+      <Label id="itemValue" horizAlign="left" width="196" height="60" />
+    </LayoutGroup>
+  </children>
+
+  <interface>
+    <field id="itemContent" type="node" onChange="itemContentChanged" />
+    <field id="focusPercent" type="float" onChange="focusChanged" />
+    <field id="itemHasFocus" type="bool" onChange="focusChanged" />
+  </interface>
+
+  <script type="text/brightscript">
+    <![CDATA[
+    sub Init()
+      m.itemName = m.top.findNode("itemName")
+      m.itemValue = m.top.findNode("itemValue")
+      m.selectedBox = m.top.findNode("selectionOutline")
+    end sub
+
+    sub itemContentChanged() as void
+      itemData = m.top.itemContent
+
+      m.itemName.text = itemData.labelText
+      if itemData.valueText <> ""
+        m.itemValue.color = "#ffffff"
+        m.itemValue.text = itemData.valueText
+      else
+        m.itemValue.color = "#444444"
+        m.itemValue.text = "Enter a value..."  ' TODO - get a placeholder
+      end if
+    end sub
+
+    sub focusChanged() as void
+      m.selectedBox.opacity = m.top.focusPercent
+    end sub
+    ]]>
+  </script>
+
+</component>

components/ConfigurationItemData.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<component name="ConfigItemData" extends="ContentNode">
+  <interface>
+    <field id="labelText" type="string" />
+    <field id="valueText" type="string" />
+  </interface>
+</component>

components/ConfigurationList.xml

@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<component name="ConfigList" extends="MarkupList">
+    <interface>
+        <field id="SelectedItem" type="int" />
+    </interface>
+    <script type="text/brightscript" uri="pkg:/source/config.brs" />
+    <script type="text/brightscript">
+    <![CDATA[
+    sub init()
+      m.top.itemComponentName = "ConfigItem"
+      m.top.content = getData()
+
+      m.top.drawFocusFeedback = false  ' We're going to draw our own focus
+      m.top.vertFocusAnimationStyle = "floatingFocus"
+
+      m.top.observeField("itemSelected", "onItemSelected")
+
+      m.top.setfocus(true)
+
+    end sub
+
+    function getData()
+      data = CreateObject("roSGNode", "ContentNode")
+
+      items = [
+        {"field": "server", "label": "Host"},
+        {"field": "port", "label": "Port"}
+      ]
+
+      for each item in items
+        config = data.CreateChild("ConfigItemData")
+        config.labelText = item["label"]
+        config.valueText = get_setting(item["field"])
+
+      end for
+      return data
+    end function
+
+    function onItemSelected()
+      i = m.top.itemSelected
+      itemField =  m.top.content.getchild(i)
+
+      show_dialog(itemField)
+
+    end function
+
+    function onDialogButton()
+      d = m.dialog
+      button_text = d.buttons[d.buttonSelected]
+
+      if button_text = "OK"
+        m.configField.valueText = d.text
+        dismiss_dialog()
+        return true
+      else if button_text = "Cancel"
+        dismiss_dialog()
+        return false
+      end if
+    end function
+
+
+    sub show_dialog(configField)
+      dialog = createObject("roSGNode", "KeyboardDialog")
+      m.configField = configField
+      dialog.title = "Enter the " + configField.labelText
+      dialog.buttons = ["OK", "Cancel"]
+
+      if configField.valueText <> "" then
+        dialog.text = configField.valueText
+      end if
+
+      m.top.getparent().dialog = dialog
+      m.dialog = dialog
+
+      dialog.observeField("buttonSelected", "onDialogButton")
+    end sub
+
+    sub dismiss_dialog()
+      m.dialog.close = true
+    end sub
+
+    function submit()
+      ' TODO - get proper field names, and set_setting
+      for each content in  m.top.content.getchildren(-1, 0)
+        print content.labelText + ": " + content.valueText
+        'set_setting(?field_name, content.valueText)
+      end for
+    end function
+    ]]>
+    </script>
+</component>

components/ServerScene.brs

@@ -5,18 +5,6 @@ sub init()
     m.top.setFocus(true)
 end sub
 
-
-
-sub focus_node(node)
-  node.textColor = "#ffffff"
-  node.hintTextColor = "#999999"
-end sub
-
-sub unfocus_node(node)
-  node.textColor = "#777777"
-  node.hintTextColor = "#555555"
-end sub
-
 function onDialogButton()
   d = m.top.dialog
   button_text = d.buttons[d.buttonSelected]

components/ServerScene.xml

@@ -1,11 +1,15 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <component name="ServerSelection" extends="Scene">
   <children>
-    <label text="Connect to Server" translation="[150, 150]" />
+    <label text="Connect to Server"
+      height="70"
+      font="font:MediumBoldSystemFont"
+      translation="[150, 150]" />
     <ConfigList
-      id="config_options"
-      translation="[150, 200]"
-      itemSize="[440, 48]"
+      id="configOptions"
+      translation="[150, 250]"
+      itemSize="[440, 40]"
+      itemSpacing="[0, 20]"
       numRows="12" >
 
     </ConfigList>
@@ -13,7 +17,8 @@
   </children>
 
   <interface>
-    <field id="itemSelected" type="intarray" alias="config_options.itemSelected" />
+    <field id="itemSelected" type="intarray"
+      alias="configOptions.itemSelected" />
   </interface>
 
   <script type="text/brightscript" uri="pkg:/components/ServerScene.brs"/>

source/Main.brs

@@ -48,7 +48,7 @@ sub ShowServerSelect()
   scene = screen.CreateScene("ServerSelection")
   screen.show()
 
-  debug(scene)
+  'debug(scene)
 
   await_response()
 end sub
@@ -56,14 +56,21 @@ end sub
 sub debug(scene)
   ' TODO - find out why itemName.text is "Host" but still displays as empty
   x = scene.findNode("config_server")
+  print
+  print scene.getallmeta()
   print 
   for each x in scene.getall()
     if x.id <> "config_server" then goto continuex
     print x.id
     print x.itemContent.labelText
     print x.findNode("itemName").text
+    ' This says "A" for both. the node and label are set properly...
+    ' why is it empty on the screen
     continuex:
   end for
+
+  print
+  print scene.getallmeta()
 end sub
 
 sub await_response()