HtmlView UI component added + test

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">
@@ -1752,7 +1753,7 @@
           <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
         </WebProjectProperties>
       </FlavorProperties>
-      <UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
+      <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
     </VisualStudio>
   </ProjectExtensions>
 </Project>

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.android.ts

@@ -11,6 +11,8 @@ function onHtmlPropertyChanged(data: dependencyObservable.PropertyChangeData) {
 
     if (types.isString(data.newValue)) {
         view.android.setText(<any>android.text.Html.fromHtml(data.newValue));
+    } else {
+        view.android.setText("");
     }
 }
 

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

@@ -6,7 +6,9 @@ declare module "ui/html-view" {
     import dependencyObservable = require("ui/core/dependency-observable");
 
     /**
-     * Represents a view with html content.
+     * Represents a view with html content. Use this component instead WebView when 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 {
 

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

@@ -8,16 +8,16 @@ import viewModule = require("ui/core/view");
 
 function onHtmlPropertyChanged(data: dependencyObservable.PropertyChangeData) {
     var view = <HtmlView>data.object;
-    if (!view.android) {
+    if (!view.ios) {
         return;
     }
 
     if (types.isString(data.newValue)) {
         var htmlString = NSString.stringWithString(data.newValue);
         var nsData = htmlString.dataUsingEncoding(NSUnicodeStringEncoding);
-        var options = NSDictionary.new();
+        view.ios.attributedText = NSAttributedString.alloc().initWithDataOptionsDocumentAttributesError(nsData, <any>{ [NSDocumentTypeDocumentAttribute]: NSHTMLTextDocumentType }, null);
-        options.setValueForKey(NSDocumentTypeDocumentAttribute, NSHTMLTextDocumentType);
+    } else {
-        view.ios.attributedText = NSAttributedString.alloc().initWithDataOptionsDocumentAttributesError(nsData, options, null);
+        view.ios.attributedText = NSAttributedString.new();
     }
 }
 
@@ -66,9 +66,8 @@ export class HtmlView extends common.HtmlView {
 
             var nativeSize = nativeView.sizeThatFits(CGSizeMake(width, height));
             var labelWidth = nativeSize.width;
-            //if (!this.textWrap) {
+
-                labelWidth = Math.min(labelWidth, width);
+            labelWidth = Math.min(labelWidth, width);
-            //}
 
             var measureWidth = Math.max(labelWidth, this.minWidth);
             var measureHeight = Math.max(nativeSize.height, this.minHeight);