WebView Tools is an extension which provides a range of methods for adjusting settings for a WebViewer component in App Inventor. With 25 different blocks available this post won’t document every block in the extension, however, it will document the most popular blocks and the ways you could use them in your mobile apps.
Before you use any of the methods in this extension you first must use the ”SetWebViewer” block, this sets the WebViewer in the extension and will be the WebViewer that the extension will apply settings to.
When you are finished applying settings to a WebViewer you can use the RemoveWebViewer method to disassociate the WebViewer from the extension, this will also disassociate the WebViewer from the ”OnPageFinished” event, if working with multiple WebViewers if you don’t remove the WebViewer the ”OnPageFinished” event will fire for all WebViewers.
This method allows you to set the user agent string for the WebViewer to use when loading websites, this can be useful if you need to stop websites detecting whether the device is a mobile device or not.
This method allows you to disable a WebViews built-in zoom mechanisms, note this will not disable the zoom controls in the WebView, but it will disable zoom gestures such as pinch to zoom.
This method can be extremely useful if you are building web-based mobile apps, if your mobile website makes use of HTML5’s AppCache then you can use this block to enable AppCache in the WebView enabling your users to view your app even when offline.
Sets whether the URL should be checked prior to loading, enabling this will stop the page from loading if it does not contain the specified URL in the destination URL.
This event can be used to detect page changes in your applications, the event fires each time a page finishes loading, note if you are using this extension with multiple WebViewers this event will still fire if you set the current WebViewer to a different WebViewer in your app, you need to use the ”RemoveWebViewer” block to disassociate the WebViewer from the event.
In the following example, I cover a couple of the methods you can use, not all of the methods are easy to demonstrate and there are too many methods to cover in an example but this will cover at least a few of the different methods available in this extension.
The following example allows you to play with a couple of the different methods by using buttons to either enable or disable functionality. When you set the WebViewer, you get an alert when a page finished loading, you can disable zoom gestures in the WebView and get the User-agent string.
All the blocks used in this example, click the image to see a bigger version.
New in Version 5 Popup Handling
In version 5 the extension is able to handle popups which are usually needed in OAuth login flow. Popups are especially important in OAuth login used in a lot of websites (e.g., www.feedly.com). The popups in this project open in a dialog and can be dismissed by a close button or pressing Back or if the popup window closes itself (like what happens on most login authentication flow).
-While it is possible to disable zoom gestures in this extension all of the methods I tried to use to disable the onscreen zoom controls didn’t work. There doesn’t look like there’s a good way to achieve this at this time.
Thanks to ady_irawan for contributing the following changes into Version 7
– Pop-up now has 2 buttons.
– Changed the method click on the popup, so that the popup is not immediately closed when the button is clicked. This method will helps the Back Button work properly.
– Added the Back button, to navigate Back or close the popup if Back is not possible.
– Added the “OnPopupBackPressed” event
– Added the “OnPopupDismissed” event
– Added the “DismissPopup” function
Due to user request I have added the following functions:
Thanks to Haider Alwasiti for contributing the onCloseWindow method which now enables the ability to load webpages with popups such as google oauth
-Added ”OnPageFinished” event
-Removed ”SetAppCachePath” – Now internally set to the app’s default internal cache directory.
-Removed ”SetDisplayZoomControls” – In testing, this method made no difference to showing or hiding onscreen zoom controls.