INNERHTML Property

PLBCMP GUI Only

The INNERHTML property allows rendering of user program HTML into a HTMLCONTROL object. The user HTML data must be properly formatted HTML as expected by normal client browser engines. The property uses the following format:

INNERHTML[={htmlpage}]

Note the following:

1. INNERHTML may be used in CREATE, SETPROP, or GETPROP statements of an HTMLCONTROL object.

2. {htmlpage} must be a Character String Variable or literal that contains:

 

1. Properly formatted HTML constructs.

 

Simple Example:

 

<button id='testb'>Testing</button>

 

2. A properly formatted URL that contains a leading '!' character.

 

Simple Example:

 

!http://www.google.com

 

3. The GETPROP operation retrieves the exact HTML {htmlstring} string rendered by the CREATE and SETPROP operations for the INNERHTML property of a HTMLCONTROL object. If the HTMLCONTROL object has been loaded using the InnerHtml method, the GETPROP of the INNERHTML property returns the HTML loaded by the InnerHTML method.

4. If the HTMLCONTROL contains user HTML, another SETPROP INNERHTML property operation replaces any previously loaded HTML existing in the HTMLCONTROL.

5. The HTMLCONTROL {htmlpage} data string can include the 'data-plbevent={eventnames}' attribute for a HTML object that is being declared in the HTML page data string. When the 'data-plbevent' is being used, the HTML object events can be only occur as follows:

 

1. The 'data-plbevent={eventnames}' must be declared for each HTML object which is to generate an event.

 

Where:

{eventnames}

This is a string of one or more JavaScript event names which must be separated by a whitespace character delimiter. See this URL Link for more information on events:

 

https://developer.mozilla.org/en-US/docs/Web/Events

 

The data-plbevent events for the Plbwin, Plbnet, and Plbserve runtimes are limited to blur, change, click, dblclick, focus, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup events.

 

2. The EVENTREGISTER must be executed to register the $JQueryEvent (event number 200) event for a HTMLCONTROL object using the 'InnerHtml' property. In this case, the $JQueryEvent routine receives all of the HTML events declared by the 'data-plbevent' in the 'InnerHtml' property data string. The ARG1 contains a JSON object string for the event data. See the EVENTREGISTER for more details on the $JQueryEvent.

 

Example of EventRegister Property:

 

HTML object sample with 'data-plbevent' declared:

 

HCtl HTMLCONTROL

.

HtmlPage INIT "<button data-plbevent='click' id='testb'>Testing</button>"

 

         SETPROP HCtl, InnerHtml=HtmPage

         EVENTREG HCtl,$JQueryEvent,HctlEvent, ARG1=JsonData

 

6. The HTMLCONTROL {htmlpage} data string can include the data-plbenable='on' attribute for a HTML object that is being declared in the HTML page data string. When the 'data-plbenable' is being used, the PL/B ENABLED property enables or disables those HTML objects.

 

HTML object sample with 'data-plbenable' declared:

 

<button data-plbenable='on' data-plbevent='click' id='testb'>Testing</button>

 

7. The HTMLCONTROL {htmlpage} data string can include the data-plbtabid={num} attribute for a HTML object that is being declared in the HTML page data string. When the 'data-plbtabid' is being used, the HTML objects are placed in the PL/B tabbing order as members of the HTMLCONTROL. A data-plbtabid of zero (0) causes the HTML object to be removed from the PL/B tabbing order.

 

The HTML object sample with 'data-plbtabid' declared:

 

<input type='text' data-plbenable='on' data-plbtabid='1' id='myEdit1'>

 

<input type='text' data-plbenable='on' data-plbtabid='2' id='myEdit2'>

 

<input type='text' data-plbenable='on' data-plbtabid='3' id='myEdit3'>

 

8. This property is implemented using the Windows 'IWebBrowser2' interface for the Windows PL/B runtimes.

9. This property behaves in the same manner as the InnerHTML method with the default flags settings of zero.

10. When an HTML page is being rendered into an HTMLCONTROL object, the HTML data can include specialized HTML comments that contain HTML data that is only used by a specific type of runtime ( PLBWIN or Plbwebsrv ). The format of the HTML comments MUST start with '<!-- PLBWIN' or '<!-- PLBPWS' to take affect. Otherwise, the comments ignored.

 

<!-- PLBWIN

When a HTML page contains a comment that starts with this comment identifier and a PLBWIN runtime is loading the HTML page, the PLBWIN removes the comment tags before loading the HTML data into a HTMLCONTROL. If this HTML page is loaded into a HTMLCONTROL by a PL/B Web Server, the commented lines are ignored and not used.

<!-- PLBPWS

When a HTML page contains a comment that starts with this comment identifier and a PWS runtime is loading the HTML page, the PWS server removes the comment tags before loading the HTML data into a HTMLCONTROL. If this HTML page is loaded into a HTMLCONTROL by a PLBWIN type type of runtime, the commented lines are ignored and not used.

Example when loading the HTML page into a HTMLCONTROL object:

 

In this example, the '<!-- PLBWIN' commented <head> lines are only invoked/loaded into an HTMLCONTROL when the PLBWIN runtime is being used. If a PWS server runtime is being used,the '<!-- PLBWIN' comment lines are ignored.

 

<html>

  <head>

  <!-- PLBWIN

  <meta http-equiv='X-UA-Compatible' content='IE=edge' />

  <title>Bootstrap Example using PLBWIN</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width,

  initial-scale=1">

  <link rel="stylesheet"

  href="file:///sunbelt/plbwebsrv.102A/http_root/css/bootstrap.min.css">

  -->

    <style>

    </style>

  </head>

  <body>

    <div class="container">

      <h2>Button Group</h2>

      <p>The .btn-group class creates a button group:</p>

      <div class="btn-group">

        <button id="apple" data-plbevent="click" type="button"

            class="btn btn-primary">Apple</button>

        <button id="sam" data-plbevent="click" type="button"

            class="btn btn-primary">Samsung</button>

        <button id="sony" data-plbevent="click" type="button"

            class="btn btn-primary">Sony</button>

      </div>

    </div>

  </body>

</html>

 

 

See Also: Object Properties, Object IO Instructions, Object Definitions