Button1.onclick = function() {
HTMLview1.innerHTML=HTMLview1.innerHTML + "<br>Len is now"
HTMLview1.innerHTML += HTMLview1.innerHTML.length;
setTimeout(HTMLview1_ref.refresh(),100);
}
HTMLView: Difference between revisions
Jump to navigation
Jump to search
Created page with "file:HTMLview.jpg '''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 HTM..." |
|||
| (32 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
[[file:HTMLview.jpg]] | [[file:HTMLview.jpg]] | ||
== Description == | |||
The HTMLView control is used to display html formatted text. The view can be scrolled in the window by using a finger. | The HTMLView control is used to display html formatted text. The view can be scrolled in the window by using a finger. | ||
| Line 9: | Line 9: | ||
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. | 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 | Standard [[properties and methods|properties]] are supported, plus: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
| borderStyle || The style of the border around the view. Choices are dotted, dashed, solid, double, groove, ridge, inset and outset. | | 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 | | 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. | ||
|- | |||
| 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: | | scroll_options || This control makes use of iScroll. It has a number of options, including: | ||
| Line 28: | Line 30: | ||
zoom: true/false. Allow two finger zoom in gesture? | zoom: true/false. Allow two finger zoom in gesture? | ||
The full list of options is documented here: | 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. | HTMLView supports the standard [[events|events]]. | ||
== Example == | |||
You can also put most of these values into innerHTML at Design Time. | |||
< | <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" & | HTMLview1.innerHTML=HTMLview1.innerHTML & "<br>Len is now " & Len(HTMLview1.innerHTML) | ||
SetTimeout( | SetTimeout(HTMLview1.refresh(),100) | ||
End Function | End Function | ||
</syntaxhighlight> | |||
</tabber> | |||
Scroll to the bottom of the HTMView | |||
<pre> | |||
HTMLview1_ref.scrollTo(0,-HTMLview1.clientHeight) | |||
</pre> | |||
Reset the width of the html area after changing the width of the control (BASIC or JavaScript) | |||
<pre> | |||
HTMLview1.style.width="100%" | |||
</pre> | |||
Make a link: | |||
<pre> | |||
HTMLview1.innerHTML="<a href=""http://example.com/"">My Link</a>" | |||
</pre> | </pre> | ||
''' | Make a phone link: | ||
<pre> | |||
HTMLview1.innerHTML="<a href=""tel:5551212"">Call 555-1212</a>" | |||
</pre> | |||
Show a web page: | |||
<pre> | |||
HTMLview1.innerHTML="<iframe src='http://www.nsbasic.com'></iframe>" | |||
</pre> | |||
Download a pdf | |||
<pre> | |||
HTMLview1.innerHTML="<a href='http://www.newfangled.com/site/images/pdftest.pdf' download>Download test pdf!</a>" | |||
</pre> | |||
Display an SVG image. | |||
Put this into the innerHTML property at Design Time: | |||
<pre> | |||
<svg width='100' height='100'> | |||
<circle cx='50' cy='50' r='40' stroke='green' stroke-width='4' fill='yellow' /> | |||
</svg> | |||
</pre> | |||
== Output == | |||
<pre> | <pre> | ||
(as seen in the image above) | (as seen in the image above) | ||
</pre> | </pre> | ||
[[Category:Language Reference]] | |||
[[Category:Controls]] | |||
[[Category:General]] | |||
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.
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)