diff --git a/tests/app/ui/web-view/web-view.md b/tests/app/ui/web-view/web-view.md index f86c7bb6e..2b3583cf6 100644 --- a/tests/app/ui/web-view/web-view.md +++ b/tests/app/ui/web-view/web-view.md @@ -18,3 +18,73 @@ Using a WebView requires the web-view module. {%snippet webview-localfile%} ### Using WebView with raw HTML {%snippet webview-string%} +### Using WebView with gestures +```XML + + + + + + + + + + +``` + +```TypeScript +import { EventData } from 'data/observable'; +import { Page } from 'ui/page'; +import { HelloWorldModel } from './main-view-model'; +import { WebView } from "ui/web-view"; +import { isAndroid } from "platform" + + +export function navigatingTo(args: EventData) { + + let page = args.object; + + page.bindingContext = new HelloWorldModel(); +} + +export function webviewtouch(args){ + console.log("touch event"); +} + +export function webviewpan(args){ + console.log("pan gesture"); +} + +export function webviewloaded(args){ + var webview:WebView = args.object; + if(isAndroid){ + webview.android.getSettings().setDisplayZoomControls(false); + } +} +``` + +```JavaScript +var main_view_model_1 = require("./main-view-model"); +var platform_1 = require("platform"); +function navigatingTo(args) { + var page = args.object; + page.bindingContext = new main_view_model_1.HelloWorldModel(); +} +exports.navigatingTo = navigatingTo; +function webviewtouch(args) { + console.log("touch event"); +} +exports.webviewtouch = webviewtouch; +function webviewpan(args) { + console.log("pan gesture"); +} +exports.webviewpan = webviewpan; +function webviewloaded(args) { + var webview = args.object; + if (platform_1.isAndroid) { + webview.android.getSettings().setDisplayZoomControls(false); + } +} +exports.webviewloaded = webviewloaded; +``` +>Note: to be able to use gestures in `WebView` component on Android, we should first disabled the zoom control. To do that we could access the `android` property and with the help of `setDisplayZoomControls` to set this controll to `false`. \ No newline at end of file