Tabris.js Widgets: WebView
This widget can display content from a web page. There are two ways of providing content for a WebView. First, you can fill the url property to get HTML from a source. It doesn’t mean that you will always need network connection since you can provide a relative URL and ship the HTML file as a part of your application. Another option is to pass the HTML code directly to the html property. If html is filled, the url value will be ignored.
WebView comes in handy when you need some functionality, e.g., to display the original look of some web resources. User will be able to interact with elements on the page, follow links and see dynamical content, but will be limited in some actions. For example, download event is available only on Android devices.
To create a simple WebView, you will need the following JS code:
|
1 2 3 4 5 6 |
import { WebView, contentView } from 'tabris'; new WebView({ left: 0, right: 0, top: 0, bottom: 0, url: "https://tabris.com" }).appendTo(contentView); |
Or, if you prefer a JSX syntax:
|
1 2 3 4 5 |
import { WebView, contentView } from 'tabris'; contentView.append( <WebView left={0} right={0} top={0} bottom={0} url="https://tabris.com" /> ); |
By default, WebView will show only the HTML content, without any control elements. You can easily create them with the help of other widgets. Here is how to get yourself a URL bar:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { contentView, TextInput, WebView } from 'tabris'; contentView.append( <$> <TextInput left={16} right={16} top={8} message='Enter URL...' text='http://en.wikipedia.org' floatMessage={false} onAccept={loadUrl} /> <WebView stretchX bottom top='prev() 8' /> </$> ); function loadUrl() { $(WebView).only().url = $(TextInput).only().text; } loadUrl(); |
If you have access to the source code of the webpage you want to display, you can set up communication between the webpage and the WebView. It is possible because of Window.postMessage() API. Run the code below using Tabris.js Developer App to see an example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import {Button, Composite, TextView, WebView, contentView} from 'tabris'; new Button({ left: 16, right: 16, bottom: 16, text: 'Send message to WebView' }).onSelect(() => webView.postMessage('Hello from Tabris.js', '*')) .appendTo(contentView); const statusTextView = new TextView({ left: 16, right: 16, bottom: 'prev()', height: 48, alignment: 'centerX', text: 'No message received from WebView' }).appendTo(contentView); new Composite({ left: 0, right: 0, bottom: 'prev()', height: 1, background: '#e1e1e1' }).appendTo(contentView); const webView = new WebView({ left: 0, top: 0, right: 0, bottom: 'prev()' }).appendTo(contentView); fetch('./resources/website.html') .then(result => result.text()) .then(text => webView.html = text); webView.onMessage(({data}) => statusTextView.text = 'Message received: ' + data); |
Use the WebView documentation page to find out more about the widget. And lots of examples of Tabris.js tools usage in the Playground – check it out!
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
