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

Image src and imageSource properties defined

Browse Source
This commit is contained in:
vakrilov
2015-03-11 17:07:12 +02:00
parent 3131757e5f
commit 9113faacc4
14 changed files with 69 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/TelerikNEXT/main-page.xml
View File

@ -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">

2
apps/cuteness.io/details-page.xml
View File

@ -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>

4
apps/cuteness.io/main-page.xml
View File

@ -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>

2
apps/gallery-app/views/image.xml
View File

@ -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>

2
apps/paylocity/login.ts
View File

@ -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) {

2
apps/perf-tests/ApplicationLoadTimeAndFPS/mainPage.ts
View File

@ -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);

6
apps/tests/pages/page14.xml
View File

@ -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>

33
apps/tests/ui/image/image-tests.ts
View File

@ -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>) {

2
apps/tests/ui/scroll-view/scroll-view-tests.ts
View File

@ -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>
//```

2
apps/tests/xml-declaration/mainPage.ts
View File

@ -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));
}

58
ui/image/image-common.ts
View File

@ -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(
URL,
public static srcProperty = new dependencyObservable.Property(
SRC,
IMAGE,
new proxy.PropertyMetadata(
"",
dependencyObservable.PropertyMetadataSettings.None,
onUrlPropertyChanged
onSrcPropertyChanged
)
);
public static sourceProperty = new dependencyObservable.Property(
SOURCE,
public static imageSourceProperty = new dependencyObservable.Property(
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 {
return this._getValue(Image.sourceProperty);
get imageSource(): imageSource.ImageSource {
return this._getValue(Image.imageSourceProperty);
}
set source(value: imageSource.ImageSource) {
this._setValue(Image.sourceProperty, value);
set imageSource(value: imageSource.ImageSource) {
this._setValue(Image.imageSourceProperty, value);
}
get url(): string {
return this._getValue(Image.urlProperty);
get src(): string {
return this._getValue(Image.srcProperty);
}
set url(value: string) {
this._setValue(Image.urlProperty, value);
set src(value: string) {
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 nativeHeight = this.source ? this.source.height : 0;
var nativeWidth = this.imageSource ? this.imageSource.width : 0;
var nativeHeight = this.imageSource ? this.imageSource.height : 0;
var measureWidth = Math.max(nativeWidth, this.minWidth);
var measureHeight = Math.max(nativeHeight, this.minHeight);

4
ui/image/image.android.ts
View File

@ -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 {

4
ui/image/image.d.ts vendored
View File

@ -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

4
ui/image/image.ios.ts
View File

@ -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;