javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4062 from NativeScript/tsonevn_webview_gestures

Browse Source 
add an example how to use webview with gestures for both iOS and Android
This commit is contained in:
Nikolay Tsonev
2017-05-15 17:23:27 +03:00
committed by GitHub
parent 66c381d195 10bcf9f8e9
commit 7cec0eb7fc
2 changed files with 41 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
tests/app/ui/web-view/web-view-code-snippet.ts Normal file
View File

@@ -0,0 +1,24 @@
// >> web-view-loaded
import { EventData } from 'tns-core-modules/data/observable';
import { WebView } from "tns-core-modules/ui/web-view";
import { isAndroid } from "tns-core-modules/platform"
export function navigatingTo(args: EventData) {
console.log("page navigating to");
}
export function webViewTouch(args){
console.log("touch event");
}
export function webViewPan(args){
console.log("pan gesture");
}
export function webViewLoaded(args){
var webview:WebView = <WebView>args.object;
if(isAndroid){
webview.android.getSettings().setDisplayZoomControls(false);
}
}
// >> web-view-loaded

17
tests/app/ui/web-view/web-view.md
View File

@@ -18,3 +18,20 @@ Using a WebView requires the web-view module.
{%snippet webview-localfile%}
### Using WebView with raw HTML
{%snippet webview-string%}
### Using WebView with gestures
```XML
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
<Page.actionBar>
<ActionBar title="My App" icon="" class="action-bar">
</ActionBar>
</Page.actionBar>
<GridLayout>
<WebView loaded="webViewLoaded" touch="webViewTouch" pan="webViewPan" src="<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>" />
</GridLayout>
</Page>
```
{%snippet web-view-loaded%}
>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`.