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.
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? The full list of options is documented here: http://cubiq.org/iscroll-4

Events

HTMLView supports the standard events.

Example (Basic)

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

Scroll to the bottom of the HTMView (BASIC or JavaScript)

  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>"

Example (JavaScript)

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

Output

(as seen in the image above)