Runtime UI Manipulation

Runtime UI Manipulation

Method 1: Using a Lua or TIScript script tag

Sandcat can associate the HTML elements of a Sandcat Extension User Interface with a Lua table. In order to enable this, just add a SandcatUIX meta tag to the extension UI code, as exemplified below.


<meta name="SandcatUIX" content="MyExtension">
<script type="text/lua">
function MyExtension:changeit()
  self.plaintext1.value = 'New text!'
end
</script>
<plaintext id="plaintext1"></plaintext>
<button onclick="MyExtension:changeit()">Demo</button>
<button onclick="MyExtension.plaintext1.value = 'Another value'">Demo 2</button>

As seen above, elements that have an id attribute can be manipulated via [tablename].[yourelementid], which returns an UI element object - the available methods and properties of a Sandcat UI element object are described here.

Alternatively, you can use a TIScript script tag:


<script type="text/tiscript">
$(#btndemo).onControlEvent = function(evt) {
 if (evt.type == Event.BUTTON_CLICK ) {
  $("#myplaintext").value = "New text!";
  }
}
</script>
<plaintext id="myplaintext"></plaintext>
<button #btndemo>Demo</button>

Method 2: Using Lua

You can associate the HTML elements of a Sandcat Extension User Interface with a Lua table by supplying a table name as a second parameter of the UI zone's loadx() method, as exemplified below.

interface.html:


<plaintext id="myplaintext"></plaintext>
<button onclick="MyExtension:changeit()">Demo</button>

interface.lua:


MyExtension = extensionpack:new()
MyExtension.filename = 'Demo.scx'
MyExtension.zone = browser.bottombar

function MyExtension:show()
  local html = self:getfile('interface.html')
  self.zone:loadx(html,'MyExtension')
end

function MyExtension:changeit()
  self.myplaintext.value = 'New text!'
end

Method 3: Using TIScript and the UI zone's eval() method

interface.html:


<plaintext id="myplaintext"></plaintext>
<button onclick="MyExtension:changeit()">Demo</button>

interface.lua:


MyExtension = extensionpack:new()
MyExtension.filename = 'Demo.scx'
MyExtension.zone = browser.bottombar

function MyExtension:show()
  local html = self:getfile('interface.html')
  self.zone:loadx(html)
end

function MyExtension:changeit()
  self.zone:eval('$("#myplaintext").value = "New text!"')
end
Page last modified on May 26, 2013, at 05:28 AM
© 2023 Syhunt