Image src and imageSource properties defined

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

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

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>

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>

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>

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

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

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>

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

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

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