Image src and imageSource properties defined

apps/TelerikNEXT/main-page.xml

@@ -49,7 +49,7 @@
           <ListView.itemTemplate>
             <GridLayout columns="auto, *">
 
-              <Image url="{{ favorite ? '~/app/images/fav.png' : '~/app/images/addfav.png' }}" style.visibility="{{ canBeFavorited ? 'visible' : 'collapsed' }}"
+              <Image src="{{ favorite ? '~/app/images/fav.png' : '~/app/images/addfav.png' }}" style.visibility="{{ canBeFavorited ? 'visible' : 'collapsed' }}"
            tap="toggleFavorite" width="32" height="32" vertical-align="center" margin="20" />
 
               <StackLayout col="1">

apps/cuteness.io/details-page.xml

@@ -2,7 +2,7 @@
   <GridLayout rows="*, auto">
     <ScrollView>
       <StackLayout>
-        <Image source="{{ imageSource }}" stretch="aspectFill"/>
+        <Image imageSource="{{ imageSource }}" stretch="aspectFill"/>
         <Label text="{{ title }}" cssClass="detailsTitle" textWrap="true" />
       </StackLayout>
     </ScrollView>

apps/cuteness.io/main-page.xml

@@ -7,7 +7,7 @@
             <ListView.itemTemplate>
               <!-- Binding in template property of an component will use the bindingContext provided by the component. -->
               <GridLayout columns="auto, *, auto" rows="auto, 25">
-                <Image source="{{ thumbnailImageSource || defaultThumbnailImageSource }}" cssClass="thumbnail" rowSpan="2"/>
+                <Image imageSource="{{ thumbnailImageSource || defaultThumbnailImageSource }}" cssClass="thumbnail" rowSpan="2"/>
                 <Label text="{{ title || 'Downloading...' }}" textWrap="true" cssClass="title" col="1" colSpan="2" minHeight="50" />
                 <Label text="{{ author ? 'by ' + author : '' }}" cssClass="author" col="1" row="1" />
                 <Label text="{{ num_comments ? num_comments + ' comments' : '' }}" cssClass="comments" col="2" row="1" />
@@ -20,7 +20,7 @@
       <TabViewItem title="About">
         <TabViewItem.view>
           <StackLayout>
-            <Image margin="10" url="~/app/res/telerik-logo.png" />
+            <Image margin="10" src="~/app/res/telerik-logo.png" />
             <Label margin="10" textWrap="true" text="{{ aboutText }}" />
           </StackLayout>
         </TabViewItem.view>

apps/gallery-app/views/image.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <Page loaded="pageLoaded">
-  <Image margin="10" source="{{ imageSource }}" verticalAlignment="center" horizontalAlignment="center"/>
+  <Image margin="10" src="~/app/res/telerik-logo.png" verticalAlignment="center" horizontalAlignment="center"/>
 </Page>

apps/paylocity/login.ts

@@ -14,7 +14,7 @@ export function imageLoaded(args: observable.EventData) {
     var image = <imageDef.Image>args.object;
 
     var logoPath = fs.path.join(__dirname, "tagLine.png");
-    image.source = imageSourceDef.fromFile(logoPath);
+    image.imageSource = imageSourceDef.fromFile(logoPath);
 }
 
 export function loginButtonTap(args: observable.EventData) {

apps/perf-tests/ApplicationLoadTimeAndFPS/mainPage.ts

@@ -14,7 +14,7 @@ export function createPage() {
         StackLayout.orientation = enums.Orientation.horizontal;
 
         var image = new imageModule.Image();
-        image.source = logoImageSource;
+        image.imageSource = logoImageSource;
         image.width = 100;
         image.stretch = enums.Stretch.aspectFit;
         StackLayout.addChild(image);

apps/tests/pages/page14.xml

@@ -1,12 +1,12 @@
 <Page>
   <StackLayout>
     <Label text="resource:" />
-    <Image url="res://icon" stretch="none" horizontalAlignment="left"/>
+    <Image src="res://icon" stretch="none" horizontalAlignment="left"/>
     
     <Label text="url:" />
-    <Image url="http://www.google.com/images/errors/logo_sm_2.png" stretch="none" horizontalAlignment="left"/>
+    <Image src="http://www.google.com/images/errors/logo_sm_2.png" stretch="none" horizontalAlignment="left"/>
     
     <Label text="app file:" />
-    <Image  url="~/app/logo.png" stretch="none" horizontalAlignment="left" />
+    <Image  src="~/app/logo.png" stretch="none" horizontalAlignment="left" />
   </StackLayout>
 </Page>

apps/tests/ui/image/image-tests.ts

@@ -9,7 +9,7 @@ import ImageModule = require("ui/image");
 // Binding the image source property to a view-model property.
 //```XML
 // <Page>
-//   {%raw%}<Image source="{{ thumbnailImageSource }}" />{%endraw%}
+//   {%raw%}<Image src="{{ thumbnailImageUrl }}" />{%endraw%}
 // </Page>
 //```
 
@@ -26,7 +26,8 @@ var imagePath = __dirname + "../../logo.png";
 
 export var test_Image_Members = function () {
     var image = new ImageModule.Image();
-    TKUnit.assert(types.isDefined(image.url), "Image.url is not defined");
+    TKUnit.assert(types.isDefined(image.src), "Image.src is not defined");
+    TKUnit.assert(types.isDefined(image.imageSource), "Image.imageSource is not defined");
     TKUnit.assert(types.isDefined(image.isLoading), "Image.isLoading is not defined");
 }
 
@@ -36,7 +37,7 @@ export var test_settingImageSource = function () {
     // ### How to create an image and set its source.
     // ``` JavaScript
     var image = new ImageModule.Image();
-    image.source = ImageSourceModule.fromResource("logo");
+    image.imageSource = ImageSourceModule.fromResource("logo");
     // ```
     // </snippet>
     
@@ -55,12 +56,12 @@ export var test_settingImageSource = function () {
 }
 */
 
-export var test_SettingImageUrl = function (done) {
+export var test_SettingImageSrc = function (done) {
     // <snippet module="ui/image" title="Image">
-    // ### How to create an image and set its url.
+    // ### How to create an image and set its src.
     // ``` JavaScript
     var image = new ImageModule.Image();
-    image.url = "https://www.google.bg/images/srpr/logo11w.png";
+    image.src = "https://www.google.bg/images/srpr/logo11w.png";
     // ```
     // </snippet>
 
@@ -77,7 +78,7 @@ export var test_SettingImageUrl = function (done) {
 
     var testFunc = function (views: Array<ViewModule.View>) {
         var testImage = <ImageModule.Image> views[0];
-        imageIsLoaded = !!testImage.source;
+        imageIsLoaded = !!testImage.imageSource;
         try {
             TKUnit.assert(testModel.get("imageIsLoading") === false, "Expected: false, Actual: " + testModel.get("imageIsLoading"));
             TKUnit.assert(imageIsLoaded === true, "Expected: true, Actual: " + imageIsLoaded);
@@ -92,12 +93,12 @@ export var test_SettingImageUrl = function (done) {
     setTimeout(() => { helper.buildUIAndRunTest(image, testFunc) }, 3000);
 }
 
-export var test_SettingImageUrlToFileWithinApp = function (done) {
+export var test_SettingImageSrcToFileWithinApp = function (done) {
     // <snippet module="ui/image" title="Image">
-    // ### How to create an image and set its url to file within the application.
+    // ### How to create an image and set its src to file within the application.
     // ``` JavaScript
     var image = new ImageModule.Image();
-    image.url = "~/app/logo.png";
+    image.src = "~/app/logo.png";
     // ```
     // </snippet>
 
@@ -105,7 +106,7 @@ export var test_SettingImageUrlToFileWithinApp = function (done) {
 
     var testFunc = function (views: Array<ViewModule.View>) {
         var testImage = <ImageModule.Image> views[0];
-        imageIsLoaded = !!testImage.source;
+        imageIsLoaded = !!testImage.imageSource;
         try {
             TKUnit.assert(imageIsLoaded === true, "Expected: true, Actual: " + imageIsLoaded);
             done(null);
@@ -124,7 +125,7 @@ export var test_SettingStretch_AspectFit = function () {
     // ### How to set image stretching.
     // ``` JavaScript
     var image = new ImageModule.Image();
-    image.source = ImageSourceModule.fromFile(imagePath);
+    image.imageSource = ImageSourceModule.fromFile(imagePath);
     //// There are 4 modes of stretching none, fill, aspectFill, aspectFit
     //// The default value is aspectFit.
     //// Image stretch can be set by using ImageModule.stretch enum.
@@ -152,7 +153,7 @@ export var test_SettingStretch_AspectFit = function () {
 
 export var test_SettingStretch_Default = function () {
     var image = new ImageModule.Image();
-    image.source = ImageSourceModule.fromFile(imagePath);
+    image.imageSource = ImageSourceModule.fromFile(imagePath);
 
     var testFunc = function (views: Array<ViewModule.View>) {
         var testImage = <ImageModule.Image> views[0];
@@ -174,7 +175,7 @@ export var test_SettingStretch_Default = function () {
 
 export var test_SettingStretch_AspectFill = function () {
     var image = new ImageModule.Image();
-    image.source = ImageSourceModule.fromFile(imagePath);
+    image.imageSource = ImageSourceModule.fromFile(imagePath);
     image.stretch = enumsModule.Stretch.aspectFill;
 
     var testFunc = function (views: Array<ViewModule.View>) {
@@ -197,7 +198,7 @@ export var test_SettingStretch_AspectFill = function () {
 
 export var test_SettingStretch_Fill = function () {
     var image = new ImageModule.Image();
-    image.source = ImageSourceModule.fromFile(imagePath);
+    image.imageSource = ImageSourceModule.fromFile(imagePath);
     image.stretch = enumsModule.Stretch.fill;
 
     var testFunc = function (views: Array<ViewModule.View>) {
@@ -220,7 +221,7 @@ export var test_SettingStretch_Fill = function () {
 
 export var test_SettingStretch_none = function () {
     var image = new ImageModule.Image();
-    image.source = ImageSourceModule.fromFile(imagePath);
+    image.imageSource = ImageSourceModule.fromFile(imagePath);
     image.stretch = enumsModule.Stretch.none;
 
     var testFunc = function (views: Array<ViewModule.View>) {

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

@@ -17,7 +17,7 @@ import scrollViewModule = require("ui/scroll-view");
 //```XML
 // <Page>
 //  <ScrollView>
-//    {%raw%}<Image source="{{ someBigImage }}" />{%endraw%}
+//    {%raw%}<Image src="{{ someBigImageUrl }}" />{%endraw%}
 //  </ScrollView>
 // </Page>
 //```

apps/tests/xml-declaration/mainPage.ts

@@ -61,6 +61,6 @@ export function setPicture(args: observable.EventData) {
     var img = parent.getViewById<image.Image>("cameraImage");
 
     camera.takePicture().then(r=> {
-        img.source = r;
+        img.imageSource = r;
     }).catch(e => dialogs.alert("ERROR: " + e));
 }

ui/image/image-common.ts

@@ -6,9 +6,11 @@ import definition = require("ui/image");
 import trace = require("trace");
 import enums = require("ui/enums");
 import utils = require("utils/utils");
+import types = require("utils/types");
+
+var SRC = "src";
+var IMAGE_SOURCE = "imageSource";
 
-var SOURCE = "source";
-var URL = "url";
 var IMAGE = "Image";
 var ISLOADING = "isLoading";
 var STRETCH = "stretch";
@@ -27,54 +29,62 @@ function isAppFile(value: string): boolean {
     return value.indexOf("~/") === 0;
 }
 
-function isValidUrl(url: string): boolean {
+function isValidUrl(url: any): boolean {
+    if (!types.isString(url)) {
+        return false;
+    }
+
     var value = url ? url.trim() : "";
     return value !== "" && (isResource(value) || isAppFile(value) || isUrl(value));
 }
 
-function onUrlPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+function onSrcPropertyChanged(data: dependencyObservable.PropertyChangeData) {
     var image = <Image>data.object;
-    var value: string = data.newValue;
+    var value = data.newValue;
 
     if (isValidUrl(value)) {
         value = value.trim();
-        image.source = null;
+        image.imageSource = null;
         image["_url"] = value;
 
         image._setValue(Image.isLoadingProperty, true);
 
         if (isResource(value)) {
-            image.source = imageSource.fromResource(value.substr(RESOURCE_PREFIX.length));
+            image.imageSource = imageSource.fromResource(value.substr(RESOURCE_PREFIX.length));
             image._setValue(Image.isLoadingProperty, false);
         }
         else if (isAppFile(value)) {
-            image.source = imageSource.fromFile(value);
+            image.imageSource = imageSource.fromFile(value);
             image._setValue(Image.isLoadingProperty, false);
         } else {
             imageSource.fromUrl(value).then((r) => {
                 if (image["_url"] === value) {
-                    image.source = r;
+                    image.imageSource = r;
                     image._setValue(Image.isLoadingProperty, false);
                 }
             });
         }
     }
+    else if (value instanceof imageSource.ImageSource) {
+        // Support binding the iamgeSource trough the src propoerty
+        image.imageSource = value;
+    }
 }
 
 export class Image extends view.View implements definition.Image {
 
-    public static urlProperty = new dependencyObservable.Property(
+    public static srcProperty = new dependencyObservable.Property(
-        URL,
+        SRC,
         IMAGE,
         new proxy.PropertyMetadata(
             "",
             dependencyObservable.PropertyMetadataSettings.None,
-            onUrlPropertyChanged
+            onSrcPropertyChanged
             )
         );
 
-    public static sourceProperty = new dependencyObservable.Property(
+    public static imageSourceProperty = new dependencyObservable.Property(
-        SOURCE,
+        IMAGE_SOURCE,
         IMAGE,
         new proxy.PropertyMetadata(
             undefined,
@@ -104,18 +114,18 @@ export class Image extends view.View implements definition.Image {
         super(options);
     }
 
-    get source(): imageSource.ImageSource {
+    get imageSource(): imageSource.ImageSource {
-        return this._getValue(Image.sourceProperty);
+        return this._getValue(Image.imageSourceProperty);
     }
-    set source(value: imageSource.ImageSource) {
+    set imageSource(value: imageSource.ImageSource) {
-        this._setValue(Image.sourceProperty, value);
+        this._setValue(Image.imageSourceProperty, value);
     }
 
-    get url(): string {
+    get src(): string {
-        return this._getValue(Image.urlProperty);
+        return this._getValue(Image.srcProperty);
     }
-    set url(value: string) {
+    set src(value: string) {
-        this._setValue(Image.urlProperty, value);
+        this._setValue(Image.srcProperty, value);
     }
 
     get isLoading(): boolean {
@@ -139,8 +149,8 @@ export class Image extends view.View implements definition.Image {
         var heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec);
         trace.write(this + " :onMeasure: " + utils.layout.getMode(widthMode) + " " + width + ", " + utils.layout.getMode(heightMode) + " " + height, trace.categories.Layout);
 
-        var nativeWidth = this.source ? this.source.width : 0;
+        var nativeWidth = this.imageSource ? this.imageSource.width : 0;
-        var nativeHeight = this.source ? this.source.height : 0;
+        var nativeHeight = this.imageSource ? this.imageSource.height : 0;
 
         var measureWidth = Math.max(nativeWidth, this.minWidth);
         var measureHeight = Math.max(nativeHeight, this.minHeight);

ui/image/image.android.ts

@@ -30,7 +30,7 @@ function onStretchPropertyChanged(data: dependencyObservable.PropertyChangeData)
     }
 }
 
-function onSourcePropertyChanged(data: dependencyObservable.PropertyChangeData) {
+function onImageSourcePropertyChanged(data: dependencyObservable.PropertyChangeData) {
     var image = <Image>data.object;
     if (!image.android) {
         return;
@@ -42,7 +42,7 @@ function onSourcePropertyChanged(data: dependencyObservable.PropertyChangeData)
 }
 
 // register the setNativeValue callback
-(<proxy.PropertyMetadata>imageCommon.Image.sourceProperty.metadata).onSetNativeValue = onSourcePropertyChanged;
+(<proxy.PropertyMetadata>imageCommon.Image.imageSourceProperty.metadata).onSetNativeValue = onImageSourcePropertyChanged;
 (<proxy.PropertyMetadata>imageCommon.Image.stretchProperty.metadata).onSetNativeValue = onStretchPropertyChanged;
 
 export class Image extends imageCommon.Image {

ui/image/image.d.ts

@@ -28,12 +28,12 @@ declare module "ui/image" {
         /**
          * Gets or sets the image source of the image.
          */
-        source: imageSource.ImageSource;
+        imageSource: imageSource.ImageSource;
 
         /**
          * Gets or sets the URL of the image.
          */
-        url: string;
+        src: string;
 
         /**
          * Gets a value indicating if the image is currently loading

ui/image/image.ios.ts

@@ -28,7 +28,7 @@ function onStretchPropertyChanged(data: dependencyObservable.PropertyChangeData)
     }
 }
 
-function onSourcePropertyChanged(data: dependencyObservable.PropertyChangeData) {
+function onImageSourcePropertyChanged(data: dependencyObservable.PropertyChangeData) {
     var image = <Image>data.object;
     image.ios.image = data.newValue ? data.newValue.ios : null;
 
@@ -38,8 +38,8 @@ function onSourcePropertyChanged(data: dependencyObservable.PropertyChangeData)
 }
 
 // register the setNativeValue callback
+(<proxy.PropertyMetadata>imageCommon.Image.imageSourceProperty.metadata).onSetNativeValue = onImageSourcePropertyChanged;
 (<proxy.PropertyMetadata>imageCommon.Image.stretchProperty.metadata).onSetNativeValue = onStretchPropertyChanged;
-(<proxy.PropertyMetadata>imageCommon.Image.sourceProperty.metadata).onSetNativeValue = onSourcePropertyChanged;
 
 export class Image extends imageCommon.Image {
     private _ios: UIImageView;