HTMLView: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
 
(11 intermediate revisions by the same user not shown)
Line 18: Line 18:
| 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.
| 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.
| 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.
| scrolling || On/off. Controls whether the contents can be scrolled.
Line 32: Line 32:
A reasonable set of options is zoom:true,bounce:true, mouseWheel:true, scrollbars:true
A reasonable set of options is zoom:true,bounce:true, mouseWheel:true, scrollbars:true


The full list of options is documented here: http://iscrolljs.com/
The full list of options is documented here: https://github.com/cubiq/iscroll. Do not leave this field blank.
|}
|}


Line 39: Line 39:
HTMLView supports the standard [[events|events]].
HTMLView supports the standard [[events|events]].


== Example (Basic) ==
== Example ==
You can also put most of these values into innerHTML at Design Time.


<pre>
<tabber>
JavaScript=
<syntaxhighlight lang="JavaScript">
Button1.onclick = function() {
  HTMLview1.innerHTML=HTMLview1.innerHTML + "<br>Len is now"
  HTMLview1.innerHTML += HTMLview1.innerHTML.length;
  setTimeout(HTMLview1_ref.refresh(),100);
}
</syntaxhighlight>
|-|
BASIC=
<syntaxhighlight lang="vb.net">
Function Button1_onclick()
Function Button1_onclick()
   HTMLview1.innerHTML=HTMLview1.innerHTML & "<br>Len is now" & _ Len(HTMLview1.innerHTML)
   HTMLview1.innerHTML=HTMLview1.innerHTML & "<br>Len is now " & Len(HTMLview1.innerHTML)
   SetTimeout(HTMLview1_ref.refresh(),100)
   SetTimeout(HTMLview1.refresh(),100)
End Function
End Function
</pre>
</syntaxhighlight>
</tabber>
 


Scroll to the bottom of the HTMView (BASIC or JavaScript)
Scroll to the bottom of the HTMView
<pre>
<pre>
   HTMLview1_ref.scrollTo(0,-HTMLview1.clientHeight)
   HTMLview1_ref.scrollTo(0,-HTMLview1.clientHeight)
Line 76: Line 90:
</pre>
</pre>


Download a pdf (Chrome only)
Download a pdf  


<pre>
<pre>
Line 82: Line 96:
</pre>
</pre>


== Example (JavaScript) ==
Display an SVG image.
 
Put this into the innerHTML property at Design Time:
<pre>
<pre>
Button1.onclick = function() {
&lt;svg width='100' height='100'>
  HTMLview1.innerHTML=HTMLview1.innerHTML + "<br>Len is now"
   &lt;circle cx='50' cy='50' r='40' stroke='green' stroke-width='4' fill='yellow' />
   HTMLview1.innerHTML += HTMLview1.innerHTML.length;
&lt;/svg>
  setTimeout(HTMLview1_ref.refresh(),100);
}
</pre>
</pre>



Latest revision as of 16:03, 24 July 2019

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)