Development Guide

To Bookmark this document, click

BOOK MARK 4

Creating Dynamic Web Pages

Published 2014-04-09 | Web Article. (Compatible with SDK 2.5,3.5,4.5,5.0,5.1 and 2011,2012,2013,2014 models)

Creating Dynamic Web Pages

To make dynamic web pages, use one of the following functions:

createElement
This is the standard method dealing with HTML DOM on computers, but its disadvantage is lower operating speed compared to innerHTML.
innerHTML
This is the recommended function because TVs provide a less optimized operating environment compared to computers.

Source Files

Note

The files needed for the sample application are here.

Dynamic Loading of CSS

Dynamic loading of CSS files can be done simply by adding a child node to <head>.

Note

CSS files must be loaded prior to the composition of the document-object model (DOM) tree in the browser. If DOM is configured with loaded CSS files, CSS style applies to DOM. However, if CSS is loaded after DOM configuration, CSS style is not applicable to DOM.

The following example illustartes how to add HTML Elements after dynamically loading the CSS:

  1. Load red_box.css dynamically
  2. Add the div after 3 seconds. After 3 seconds, CSS style is applied and a red box appears on screen because CSS file is loaded before DOM.
var Main = {},
    WIDGET = new Common.API.Widget();       // For sendReadyEvent()

Main.onLoad = function() {                  // The first function
    alert("Main : onLoad()");
    WIDGET.sendReadyEvent();
    includeCSS ('red_box.css');
    setTimeout("insertHTML()", 3000);
    //    insertHTML();
    //    setTimeout("includeCSS ('red_box.css')", 3000);
}

function includeCSS(path) {
    alert('+=====+ includeCSS +=====+');
    var linkNode = document.createElement('link');
    linkNode.type = 'text/css';
    linkNode.rel = 'stylesheet';
    linkNode.href = path;
    document.getElementsByTagName('head')[0].appendChild(linkNode);
}

function insertHTML() {
    alert('+=====+ insertHTML +=====+');
    var divNode = document.createElement('div');
    divNode.id = 'red_box';
    document.body.appendChild(divNode);
}

red_box.css

#red_box {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;

    border: 3px solid #FF0000;
}

To add HTML Elements and load CSS dynamically, remove the annotation from Main.onLoad() in the example above.

CSS is loaded 3 secs after HTML Div element is added. Therefore, there is no change.

insertHTML();
setTimeout("includeCSS ('red_box.css')", 3000);

To Bookmark this document, click

BOOK MARK 4