HTMLView

Description

The HTMLView control is used to display html formatted text. The view can be scrolled in the window by using a finger.

To add an HTMLView to your app, choose the HTMLView icon in the Toolbar. Use the Property Editor to set the properties. The onclick event can be used to check for clicks.

If you want to have your view scroll, turn scrolling on. After the view has been drawn, you need to set the scroller by doing HTMLview1.refresh(). If you have images you wish to scroll, their height and width need to be specified.

Methods and Properties

Standard properties are supported, plus:

borderStyle	The style of the border around the view. Choices are dotted, dashed, solid, double, groove, ridge, inset and outset.
innerHTML	The initial contents of the control. Almost any HTML is allowed, including text markup, images and URL’s. However, care must be taken that the HTML is valid. For example, forgetting to match a <div> or <font> tag with a matching </div> or </font> tag will cause other problems in your project. </script> tags are not allowed.
refresh()	Recalculate the size of the scrolling area after area has been updated or after you move to a new form.
scrolling	On/off. Controls whether the contents can be scrolled.
scrollTo(x, y, time, relative)	Scrolls the wrapper contents to the x/y coordinates in a give timeframe. Applies to the _ref.
scroll_options	This control makes use of iScroll. It has a number of options, including: bounce: true/false. When the end of the scroll area is reached, should the image bounce? zoom: true/false. Allow two finger zoom in gesture? A reasonable set of options is zoom:true,bounce:true, mouseWheel:true, scrollbars:true The full list of options is documented here: https://github.com/cubiq/iscroll. Do not leave this field blank.

Events

HTMLView supports the standard events.

Example

You can also put most of these values into innerHTML at Design Time.

Button1.onclick = function() {
  HTMLview1.innerHTML=HTMLview1.innerHTML + "<br>Len is now"
  HTMLview1.innerHTML += HTMLview1.innerHTML.length;
  setTimeout(HTMLview1_ref.refresh(),100);
}

Function Button1_onclick()
  HTMLview1.innerHTML=HTMLview1.innerHTML & "<br>Len is now " &  Len(HTMLview1.innerHTML)
  SetTimeout(HTMLview1.refresh(),100)
End Function

Scroll to the bottom of the HTMView

  HTMLview1_ref.scrollTo(0,-HTMLview1.clientHeight)

Reset the width of the html area after changing the width of the control (BASIC or JavaScript)

  HTMLview1.style.width="100%"

Make a link:

HTMLview1.innerHTML="<a href=""http://example.com/"">My Link</a>"

Make a phone link:

HTMLview1.innerHTML="<a href=""tel:5551212"">Call 555-1212</a>"

Show a web page:

HTMLview1.innerHTML="<iframe src='http://www.nsbasic.com'></iframe>"

Download a pdf

HTMLview1.innerHTML="<a href='http://www.newfangled.com/site/images/pdftest.pdf' download>Download test pdf!</a>"

Display an SVG image. Put this into the innerHTML property at Design Time:

<svg width='100' height='100'>
  <circle cx='50' cy='50' r='40' stroke='green' stroke-width='4' fill='yellow' />
</svg>

Output

(as seen in the image above)