add web view

Author: Nikolay Tsonev

Diff for: app/main-page.ts

@@ -1,14 +1,26 @@
-import { EventData } from "data/observable";
+import { EventData, Observable } from "data/observable";
 import { Page } from "ui/page";
 import { HelloWorldModel } from "./main-view-model";
-import {openUrl} from "utils/utils"
+import {openUrl} from "utils/utils";
 // Event handler for Page "navigatingTo" event attached in main-page.xml
 export function navigatingTo(args: EventData) {
     // Get the event sender
     var page = <Page>args.object;
+
+    let myobservable = new Observable();
+
+    myobservable.set("webviewid", "https://www.google.com");
+    myobservable.set("webviewprop", "<span><font color='#ff0000'>Sample html code</font></span>");
+
+    page.bindingContext = myobservable;
 }
 
 export function onTap(args:EventData){
     console.log(args.object.get("id"));
     openUrl(args.object.get("id"));
+}
+
+export function onWebViewTap(args:EventData){
+    console.log(args.object.get("id"));
+    openUrl(args.object.get("id"));
 }

Diff for: app/main-page.xml

@@ -1,8 +1,9 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
-  <StackLayout>
-    <Label text="Tap the button" class="title"/>
-    <Button class="icon" text="&#xe986;" id="https://www.google.com" tap="onTap" />
-    <Label text="{{ message }}" class="message" textWrap="true"/>
-    <HtmlView html="https://google.com" />
-  </StackLayout>
+<GridLayout rows="70 70 100 40" columns="* 70 *">
+    <Label row="0" col="0" colSpan="3" text="Tap the button" class="title"/>
+    <Button row="1" col="1" class="icon" text="&#xe986;" id="https://www.google.com" tap="onTap" />
+    <WebView row="2" col="0" colSpan="3"  width="100px" isUserInteractionEnabled="true" id="{{webviewid}}" tap="onWebViewTap" src="{{webviewprop}}" />
+    
+    <HtmlView row="3" col="0" colSpan="3"  html="https://google.com" />
+</GridLayout>
 </Page>