Merge pull request #441 from NativeScript/html-view

HtmlView component

CrossPlatformModules.csproj

@@ -236,6 +236,7 @@
     <TypeScriptCompile Include="apps\tests\ui\search-bar\search-bar-tests.ts" />
     <TypeScriptCompile Include="apps\tests\ui\style\style-properties-tests.ts" />
     <TypeScriptCompile Include="apps\tests\ui\view\view-tests.d.ts" />
+    <TypeScriptCompile Include="apps\tests\ui\html-view\html-view-tests.ts" />
     <TypeScriptCompile Include="apps\tests\ui\web-view\web-view-tests.ts" />
     <TypeScriptCompile Include="apps\editable-text-demo\app.ts" />
     <TypeScriptCompile Include="apps\editable-text-demo\main-page.ts">
@@ -277,7 +278,7 @@
     <TypeScriptCompile Include="apps\ui-tests-app\pages\text\label.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\pages\text\button.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\web-view\webview.ts">
-	  <DependentUpon>webview.xml</DependentUpon>
+      <DependentUpon>webview.xml</DependentUpon>
     </TypeScriptCompile>
     <TypeScriptCompile Include="es-collections.d.ts" />
     <TypeScriptCompile Include="es6-promise.d.ts" />
@@ -436,6 +437,10 @@
     <TypeScriptCompile Include="ui\action-bar\action-bar.ios.ts">
       <DependentUpon>action-bar.d.ts</DependentUpon>
     </TypeScriptCompile>
+    <TypeScriptCompile Include="ui\html-view\html-view-common.ts" />
+    <TypeScriptCompile Include="ui\html-view\html-view.android.ts" />
+    <TypeScriptCompile Include="ui\html-view\html-view.d.ts" />
+    <TypeScriptCompile Include="ui\html-view\html-view.ios.ts" />
     <TypeScriptCompile Include="ui\repeater\repeater.ts">
       <DependentUpon>repeater.d.ts</DependentUpon>
     </TypeScriptCompile>
@@ -797,7 +802,7 @@
     <Content Include="apps\ui-tests-app\pages\text\text-view.xml" />
     <Content Include="apps\ui-tests-app\pages\text\label.xml" />
     <Content Include="apps\ui-tests-app\pages\text\button.xml" />
-	<Content Include="apps\ui-tests-app\web-view\webview.xml" />
+    <Content Include="apps\ui-tests-app\web-view\webview.xml" />
     <Content Include="js-libs\reworkcss-value\reworkcss-value.js" />
     <Content Include="ui\layouts\stack-layout\package.json">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
@@ -1685,6 +1690,9 @@
     <Content Include="ui\action-bar\package.json">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
+    <Content Include="ui\html-view\package.json">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
   </ItemGroup>
   <ItemGroup>
     <None Include="build\tslint.json" />

apps/tests/testRunner.ts

@@ -70,6 +70,7 @@ allTests["LIST-PICKER"] = require("./ui/list-picker/list-picker-tests");
 allTests["DATE-PICKER"] = require("./ui/date-picker/date-picker-tests");
 allTests["TIME-PICKER"] = require("./ui/time-picker/time-picker-tests");
 allTests["WEB-VIEW"] = require("./ui/web-view/web-view-tests");
+allTests["HTML-VIEW"] = require("./ui/html-view/html-view-tests");
 allTests["WEAK-EVENTS"] = require("./weak-event-listener-tests");
 allTests["REPEATER"] = require("./ui/repeater/repeater-tests");
 allTests["SEARCH-BAR"] = require('./ui/search-bar/search-bar-tests');

apps/tests/ui/html-view/html-view-tests.ts

@@ -0,0 +1,56 @@
+import TKUnit = require("../../TKUnit");
+import helper = require("../helper");
+import page = require("ui/page");
+import types = require("utils/types");
+
+// <snippet module="ui/html-view" title="HtmlView">
+// # WebView
+// Using a HtmlView requires the html-view module.
+// ``` JavaScript
+import htmlViewModule = require("ui/html-view");
+// ```
+// </snippet>
+
+// ### Declaring a HtmlView.
+//```XML
+//  <Page>
+//      <HtmlView html="{{ htmlString }}" />
+//  </Page>
+//```
+
+// </snippet>
+
+var _createHtmlViewFunc = function (): htmlViewModule.HtmlView {
+    // <snippet module="ui/html-view" title="HtmlView">
+    // ### Creating a HtmlView
+    // ``` JavaScript
+    var htmlView = new htmlViewModule.HtmlView();
+    // ```
+    // </snippet>
+    return htmlView;
+}
+
+export var testLoadHTMLString = function () {
+    var newPage: page.Page;
+    var htmlView = _createHtmlViewFunc();
+    var pageFactory = function (): page.Page {
+        newPage = new page.Page();
+        newPage.content = htmlView;
+        return newPage;
+    };
+
+    helper.navigate(pageFactory);
+
+    // <snippet module="ui/html-view" title="HtmlView">
+    // ### Using HtmlView
+    // ``` JavaScript
+    htmlView.html = '<span><font color="#ff0000">Test</font></span>';
+
+    helper.goBack();
+
+    if (htmlView.ios) {
+        TKUnit.assert(!types.isNullOrUndefined(htmlView.ios.attributedText), "HTML string not loaded properly. Actual: " + htmlView.ios.attributedText);
+    } else if (htmlView.android) {
+        TKUnit.assert(htmlView.android.getText(), "HTML string not loaded properly. Actual: " + htmlView.android.getText());
+    }
+}

apps/tests/xml-declaration/mainPage.xml

@@ -7,6 +7,8 @@
         <TabViewItem.view>
           <StackLayout>
 
+            <HtmlView html="&lt;span&gt;&lt;font color='#ff0000'&gt;Test&lt;/font&gt;&lt;/span&gt;" />
+
             <WebView src="&lt;html&gt;&lt;body&gt;&lt;span style='color:red'&gt;Test&lt;/span&gt;&lt;/body&gt;&lt;/html&gt;" />
 
             <!--<ToolBar>

ui/builder/component-builder.ts

@@ -31,6 +31,7 @@ var MODULES = {
     "FormattedString": "text/formatted-string",
     "Span": "text/span",
     "WebView": "ui/web-view",
+    "HtmlView": "ui/html-view",
     "SegmentedBar": "ui/segmented-bar",
     "SegmentedBarItem": "ui/segmented-bar",
     "ToolBar": "ui/tool-bar",

ui/html-view/html-view-common.ts

@@ -0,0 +1,23 @@
+import definition = require("ui/html-view");
+import dependencyObservable = require("ui/core/dependency-observable");
+import proxy = require("ui/core/proxy");
+import view = require("ui/core/view");
+
+export class HtmlView extends view.View implements definition.HtmlView {
+    public static htmlProperty = new dependencyObservable.Property(
+        "html",
+        "HtmlView",
+        new proxy.PropertyMetadata(false, dependencyObservable.PropertyMetadataSettings.AffectsLayout)
+        );
+
+    constructor(options?: definition.Options) {
+        super(options);
+    }
+
+    get html(): string {
+        return this._getValue(HtmlView.htmlProperty);
+    }
+    set html(value: string) {
+        this._setValue(HtmlView.htmlProperty, value);
+    }
+}

ui/html-view/html-view.android.ts

@@ -0,0 +1,36 @@
+import common = require("ui/html-view/html-view-common");
+import dependencyObservable = require("ui/core/dependency-observable");
+import proxy = require("ui/core/proxy");
+import types = require("utils/types");
+
+function onHtmlPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var view = <HtmlView>data.object;
+    if (!view.android) {
+        return;
+    }
+
+    if (types.isString(data.newValue)) {
+        view.android.setText(<any>android.text.Html.fromHtml(data.newValue));
+    } else {
+        view.android.setText("");
+    }
+}
+
+// register the setNativeValue callback
+(<proxy.PropertyMetadata>common.HtmlView.htmlProperty.metadata).onSetNativeValue = onHtmlPropertyChanged;
+
+// merge the exports of the common file with the exports of this file
+declare var exports;
+require("utils/module-merge").merge(common, exports);
+
+export class HtmlView extends common.HtmlView {
+    private _android: android.widget.TextView;
+
+    get android(): android.widget.TextView {
+        return this._android;
+    }
+
+    public _createUI() {
+        this._android = new android.widget.TextView(this._context);
+    }
+}

ui/html-view/html-view.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Contains the HtmlView class, which represents a standard html view widget.
+ */
+declare module "ui/html-view" {
+    import view = require("ui/core/view");
+    import dependencyObservable = require("ui/core/dependency-observable");
+
+    /**
+     * Represents a view with html content. Use this component instead WebView when you want to show just static HTML content.
+     * [iOS support](https://developer.apple.com/library/ios/documentation/UIKit/Reference/NSAttributedString_UIKit_Additions/#//apple_ref/occ/instm/NSAttributedString/initWithData:options:documentAttributes:error:)
+     * [android support](http://developer.android.com/reference/android/text/Html.html)
+     */
+    export class HtmlView extends view.View {
+
+        /**
+         * Dependency property used to support binding operations for the html of the current HtmlView instance.
+         */
+        public static htmlProperty: dependencyObservable.Property;
+
+        constructor(options?: Options);
+
+        /**
+         * Gets the native [android widget](http://developer.android.com/reference/android/widget/TextView.html) that represents the user interface for this component. Valid only when running on Android OS.
+         */
+        android: android.widget.TextView;
+
+        /**
+         * Gets the native [UILabel](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UILabel_Class/) that represents the user interface for this component. Valid only when running on iOS.
+         */
+        ios: UILabel;
+
+        /**
+         * Gets or sets html string for the HtmlView.
+         */
+        html: string;
+    }
+
+    /**
+     * Provides a set of most common options for creating a HtmlView.
+     */
+    export interface Options extends view.Options {
+        /**
+         * Gets or sets the html content of a HtmlView.
+         */
+        html?: string;
+    }
+}

ui/html-view/html-view.ios.ts

@@ -0,0 +1,81 @@
+import common = require("ui/html-view/html-view-common");
+import definition = require("ui/html-view");
+import dependencyObservable = require("ui/core/dependency-observable");
+import proxy = require("ui/core/proxy");
+import utils = require("utils/utils");
+import types = require("utils/types");
+import viewModule = require("ui/core/view");
+
+function onHtmlPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var view = <HtmlView>data.object;
+    if (!view.ios) {
+        return;
+    }
+
+    if (types.isString(data.newValue)) {
+        var htmlString = NSString.stringWithString(data.newValue);
+        var nsData = htmlString.dataUsingEncoding(NSUnicodeStringEncoding);
+        view.ios.attributedText = NSAttributedString.alloc().initWithDataOptionsDocumentAttributesError(nsData, <any>{ [NSDocumentTypeDocumentAttribute]: NSHTMLTextDocumentType }, null);
+    } else {
+        view.ios.attributedText = NSAttributedString.new();
+    }
+}
+
+// register the setNativeValue callback
+(<proxy.PropertyMetadata>common.HtmlView.htmlProperty.metadata).onSetNativeValue = onHtmlPropertyChanged;
+
+// merge the exports of the common file with the exports of this file
+declare var exports;
+require("utils/module-merge").merge(common, exports);
+
+export class HtmlView extends common.HtmlView {
+    private _ios: UILabel;
+
+    constructor(options?: definition.Options) {
+        super(options);
+
+        this._ios = new UILabel();
+        super._prepareNativeView(this._ios);
+    }
+
+    get ios(): UILabel {
+        return this._ios;
+    }
+
+    get _nativeView(): UILabel {
+        return this._ios;
+    }
+
+    public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
+        var nativeView = this._nativeView;
+        if (nativeView) {
+
+            var width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
+            var widthMode = utils.layout.getMeasureSpecMode(widthMeasureSpec);
+
+            var height = utils.layout.getMeasureSpecSize(heightMeasureSpec);
+            var heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec);
+
+            if (widthMode === utils.layout.UNSPECIFIED) {
+                width = Number.POSITIVE_INFINITY;
+            }
+
+            if (heightMode === utils.layout.UNSPECIFIED) {
+                height = Number.POSITIVE_INFINITY;
+            }
+
+            var nativeSize = nativeView.sizeThatFits(CGSizeMake(width, height));
+            var labelWidth = nativeSize.width;
+
+            labelWidth = Math.min(labelWidth, width);
+
+            var measureWidth = Math.max(labelWidth, this.minWidth);
+            var measureHeight = Math.max(nativeSize.height, this.minHeight);
+
+            var widthAndState = viewModule.View.resolveSizeAndState(measureWidth, width, widthMode, 0);
+            var heightAndState = viewModule.View.resolveSizeAndState(measureHeight, height, heightMode, 0);
+
+            this.setMeasuredDimension(widthAndState, heightAndState);
+        }
+    }
+} 

ui/html-view/package.json

@@ -0,0 +1,2 @@
+{ "name" : "html-view",
+  "main" : "html-view.js" }