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

Merge pull request #284 from NativeScript/lru

Browse Source 
Rewrote image-cache to use the native image caching features, i.e. LruCa...
This commit is contained in:
Rossen Hristov
2015-04-20 14:18:34 +03:00
parent 8c68b5d22e 3e9033c900
commit 9550ebc144
11 changed files with 214 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
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 imageSource="{{ thumbnailImageSource || defaultThumbnailImageSource }}" cssClass="thumbnail" rowSpan="2"/>
<Image src="{{ thumbnailImage }}" 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" />

65
apps/cuteness.io/reddit-item-view-model.ts
View File

@@ -8,7 +8,7 @@ var firstThumbnailImageSource = imageSource.fromFile("~/res/first-image.png");
var defaultImageSource = imageSource.fromFile("~/res/reddit-logo-transparent.png");
var ISLOADING = "isLoading";
var THUMBNAIL_IMAGE_SOURCE = "thumbnailImageSource";
var THUMBNAIL_IMAGE = "thumbnailImage";
var IMAGE_SOURCE = "imageSource";
export class RedditViewModel extends observable.Observable {
@@ -42,40 +42,39 @@ export class RedditViewModel extends observable.Observable {
}
}
private _thumbnailImageSource: imageSource.ImageSource;
get thumbnailImageSource(): imageSource.ImageSource {
if (this._source) {
if (this._source.title === "reddit 101") {
this._thumbnailImageSource = firstThumbnailImageSource;
} else if (redditAppViewModel.cache) {
var url = this._source.thumbnail;
var imgSource = redditAppViewModel.cache.get(url);
if (imgSource) {
this._thumbnailImageSource = imgSource;
}
else if (_isValidImageUrl(url)) {
this.isLoading = true;
redditAppViewModel.cache.push({
key: url,
url: url,
completed: (result: imageSource.ImageSource, key: string) => {
if (url === key) {
this.isLoading = false;
this._thumbnailImageSource = result;
this.notify({ object: this, eventName: observable.knownEvents.propertyChange, propertyName: THUMBNAIL_IMAGE_SOURCE, value: result });
}
}
});
} else {
this._thumbnailImageSource = redditAppViewModel.defaultNoThumbnailImageSource;
}
}
get thumbnailImage(): imageSource.ImageSource {
if (!this._source) {
return redditAppViewModel.defaultThumbnailImageSource;
}
return this._thumbnailImageSource || redditAppViewModel.defaultThumbnailImageSource;
if (this._source.title === "reddit 101") {
return firstThumbnailImageSource;
}
var url = this._source.thumbnail;
if (!_isValidImageUrl(url)) {
return redditAppViewModel.defaultNoThumbnailImageSource
}
var image = redditAppViewModel.cache.get(url);
if (image) {
return image;
}
this.isLoading = true;
redditAppViewModel.cache.push({
key: url,
url: url,
completed: (image: any, key: string) => {
if (url === key) {
this.isLoading = false;
this.notify({ object: this, eventName: observable.knownEvents.propertyChange, propertyName: THUMBNAIL_IMAGE, value: image });
}
}
});
return redditAppViewModel.defaultThumbnailImageSource;
}
get imageSource(): imageSource.ImageSource {

12
apps/tests/ui/image-cache/image-cache-tests.ts
View File

@@ -19,22 +19,22 @@ export function test_DummyTestForSnippetOnly() {
//// Enable download while not scrolling
cache.enableDownload();
var src: imageSource.ImageSource;
var imgSouce: imageSource.ImageSource;
var url = "https://github.com/NativeScript.png";
//// Try to read the image from the cache
var result = cache.get(url);
if (result) {
var image = cache.get(url);
if (image) {
//// If present -- use it.
src = result;
imgSouce = imageSource.fromNativeSource(image);
}
else {
//// If not present -- request its download.
cache.push({
key: url,
url: url,
completed: (result: imageSource.ImageSource, key: string) => {
completed: (image: any, key: string) => {
if (url === key) {
src = result;
imgSouce = imageSource.fromNativeSource(image);
}
}
});

42
ui/image-cache/image-cache-common.ts
View File

@@ -9,7 +9,7 @@ export module knownEvents {
export interface DownloadRequest {
url: string;
key: string;
completed?: (result: imageSource.ImageSource, key: string) => void;
completed?: (image: any, key: string) => void;
}
export class Cache extends observable.Observable implements definition.Cache {
@@ -17,7 +17,6 @@ export class Cache extends observable.Observable implements definition.Cache {
public maxRequests = 5;
private _enabled = true;
private _cache = {};
private _pendingDownloads = {};
private _queue: Array<DownloadRequest> = [];
private _currentDownloads = 0;
@@ -98,47 +97,42 @@ export class Cache extends observable.Observable implements definition.Cache {
}
}
public get(key: string): imageSource.ImageSource {
var value = this._cache[key];
if (value) {
return value;
}
return undefined;
public get(key: string): any {
// This method is intended to be overridden by the android and ios implementations
throw new Error("Abstract");
}
public set(key: string, source: imageSource.ImageSource): void {
this._cache[key] = source;
public set(key: string, image: any): void {
// This method is intended to be overridden by the android and ios implementations
throw new Error("Abstract");
}
public remove(key: string): void {
delete this._cache[key];
// This method is intended to be overridden by the android and ios implementations
throw new Error("Abstract");
}
public clear() {
var keys = Object.keys(this._cache);
var i;
var length = keys.length;
for (i = 0; i < length; i++) {
delete this._cache[keys[i]];
}
// This method is intended to be overridden by the android and ios implementations
throw new Error("Abstract");
}
/* tslint:disable:no-unused-variable */
public _downloadCore(request: definition.DownloadRequest) {
// This method is intended to be overridden by the android and ios implementations
throw new Error("Abstract");
}
/* tslint:enable:no-unused-variable */
public _onDownloadCompleted(key: string, result: imageSource.ImageSource) {
public _onDownloadCompleted(key: string, image: any) {
var request = <DownloadRequest>this._pendingDownloads[key];
this._cache[request.key] = result;
this.set(request.key, image);
this._currentDownloads--;
if (request.completed) {
request.completed(result, request.key);
request.completed(image, request.key);
}
if (this.hasListeners(knownEvents.downloaded)) {
@@ -146,7 +140,7 @@ export class Cache extends observable.Observable implements definition.Cache {
eventName: knownEvents.downloaded,
object: this,
key: key,
image: result
image: image
});
}
@@ -156,7 +150,7 @@ export class Cache extends observable.Observable implements definition.Cache {
}
private _shouldDownload(request: definition.DownloadRequest, onTop: boolean): boolean {
if (request.key in this._cache || request.key in this._pendingDownloads) {
if (this.get(request.key) || request.key in this._pendingDownloads) {
return false;
}

49
ui/image-cache/image-cache.android.ts
View File

@@ -1,20 +1,44 @@
import common = require("ui/image-cache/image-cache-common");
import imageSource = require("image-source");
module.exports.knownEvents = common.knownEvents;
class LruBitmapCache extends android.util.LruCache<string, android.graphics.Bitmap> {
constructor(cacheSize: number) {
super(cacheSize);
return global.__native(this);
}
protected sizeOf(key: string, bitmap: android.graphics.Bitmap): number {
// The cache size will be measured in kilobytes rather than
// number of items.
var result = Math.round(bitmap.getByteCount() / 1024);
//console.log("sizeOf key: " + result);
return result;
}
//protected entryRemoved(evicted: boolean, key: string, oldValue: android.graphics.Bitmap, newValue: android.graphics.Bitmap): void {
// console.log("entryRemoved("+evicted+", "+key+", "+oldValue+", "+newValue+")");
//}
};
export class Cache extends common.Cache {
private _callback: any;
private _cache: LruBitmapCache;
constructor() {
super();
var maxMemory = java.lang.Runtime.getRuntime().maxMemory() / 1024;
var cacheSize = maxMemory / 8;
//console.log("cacheSize: " + cacheSize);
this._cache = new LruBitmapCache(cacheSize);
var that = new WeakRef(this);
this._callback = new (<any>com).tns.Async.CompleteCallback({
onComplete: function (result: any, context: any) {
var instance = that.get();
if (instance) {
instance._onBitmapDownloaded(result, context);
instance._onDownloadCompleted(context, result)
}
}
});
@@ -24,11 +48,20 @@ export class Cache extends common.Cache {
(<any>com).tns.Async.DownloadImage(request.url, this._callback, request.key);
}
/* tslint:disable:no-unused-variable */
private _onBitmapDownloaded(result: android.graphics.Bitmap, context: any) {
// as a context we are receiving the key of the request
var source = imageSource.fromNativeSource(result);
this._onDownloadCompleted(context, source);
public get(key: string): any {
var result = this._cache.get(key);
return result;
}
public set(key: string, image: any): void {
this._cache.put(key, image);
}
public remove(key: string): void {
this._cache.remove(key);
}
public clear() {
this._cache.evictAll();
}
/* tslint:enable:no-unused-variable */
}

8
ui/image-cache/image-cache.d.ts vendored
View File

@@ -20,7 +20,7 @@ declare module "ui/image-cache" {
/**
* An optional function to be called when the download is complete.
*/
completed?: (result: imageSource.ImageSource, key: string) => void;
completed?: (image: any, key: string) => void;
}
/**
@@ -57,11 +57,11 @@ declare module "ui/image-cache" {
/**
* Gets the image for the specified key. May be undefined if the key is not present in the cache.
*/
get(key: string): imageSource.ImageSource;
get(key: string): any;
/**
* Sets the image for the specified key.
*/
set(key: string, source: imageSource.ImageSource): void;
set(key: string, image: any): void;
/**
* Removes the cache for the specified key.
*/
@@ -73,7 +73,7 @@ declare module "ui/image-cache" {
//@private
_downloadCore(request: DownloadRequest);
_onDownloadCompleted(key: string, result: imageSource.ImageSource);
_onDownloadCompleted(key: string, image: any);
//@endprivate
}

89
ui/image-cache/image-cache.ios.ts
View File

@@ -1,15 +1,94 @@
import common = require("ui/image-cache/image-cache-common");
import imageSource = require("image-source");
import httpRequest = require("http/http-request");
import utils = require("utils/utils");
import trace = require("trace");
module.exports.knownEvents = common.knownEvents;
//class NSCacheDelegateImpl extends NSObject implements NSCacheDelegate {
// public static ObjCProtocols = [NSCacheDelegate];
// static new(): NSCacheDelegateImpl {
// return <NSCacheDelegateImpl>super.new();
// }
// public cacheWillEvictObject(cache: NSCache, obj: any): void {
// trace.write("NSCacheDelegateImpl.cacheWillEvictObject(" + obj + ");", trace.categories.Debug);
// }
//}
class MemmoryWarningHandler extends NSObject {
static new(): MemmoryWarningHandler {
return <MemmoryWarningHandler>super.new();
}
private _cache: NSCache;
public initWithCache(cache: NSCache): MemmoryWarningHandler {
this._cache = cache;
NSNotificationCenter.defaultCenter().addObserverSelectorNameObject(this, "clearCache", "UIApplicationDidReceiveMemoryWarningNotification", null);
trace.write("[MemmoryWarningHandler] Added low memory observer.", trace.categories.Debug);
return this;
}
public dealloc(): void {
NSNotificationCenter.defaultCenter().removeObserverNameObject(this, "UIApplicationDidReceiveMemoryWarningNotification", null);
trace.write("[MemmoryWarningHandler] Removed low memory observer.", trace.categories.Debug);
super.dealloc();
}
public clearCache(): void {
trace.write("[MemmoryWarningHandler] Clearing Image Cache.", trace.categories.Debug);
this._cache.removeAllObjects();
utils.GC();
}
public static ObjCExposedMethods = {
"clearCache": { returns: interop.types.void, params: [] }
};
}
export class Cache extends common.Cache {
private _cache: NSCache;
//private _delegate: NSCacheDelegate;
private _memoryWarningHandler: MemmoryWarningHandler;
constructor() {
super();
this._cache = new NSCache();
//this._delegate = NSCacheDelegateImpl.new();
//this._cache.delegate = this._delegate;
this._memoryWarningHandler = MemmoryWarningHandler.new().initWithCache(this._cache);
}
public _downloadCore(request: common.DownloadRequest) {
// TODO: WeakRef?
var that = this;
imageSource.fromUrl(request.url).
then(function (value) {
that._onDownloadCompleted(request.key, value);
httpRequest.request({ url: request.url, method: "GET" })
.then(response => {
var image = UIImage.alloc().initWithData(response.content.raw);
that._onDownloadCompleted(request.key, image);
});
}
public get(key: string): any {
return this._cache.objectForKey(key);
}
public set(key: string, image: any): void {
this._cache.setObjectForKey(image, key);
}
public remove(key: string): void {
this._cache.removeObjectForKey(key);
}
public clear() {
this._cache.removeAllObjects();
utils.GC();
}
}

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

@@ -15,15 +15,11 @@ var IMAGE = "Image";
var ISLOADING = "isLoading";
var STRETCH = "stretch";
function isValidSrc(src: any): boolean {
return types.isString(src);
}
function onSrcPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var image = <Image>data.object;
var value = data.newValue;
if (isValidSrc(value)) {
if (types.isString(value)) {
value = value.trim();
image.imageSource = null;
image["_url"] = value;
@@ -46,6 +42,9 @@ function onSrcPropertyChanged(data: dependencyObservable.PropertyChangeData) {
// Support binding the iamgeSource trough the src propoerty
image.imageSource = value;
}
else {
image._setNativeImage(value);
}
}
export class Image extends view.View implements definition.Image {
@@ -54,7 +53,7 @@ export class Image extends view.View implements definition.Image {
SRC,
IMAGE,
new proxy.PropertyMetadata(
"",
undefined,
dependencyObservable.PropertyMetadataSettings.None,
onSrcPropertyChanged
)
@@ -99,10 +98,10 @@ export class Image extends view.View implements definition.Image {
this._setValue(Image.imageSourceProperty, value);
}
get src(): string {
get src(): any {
return this._getValue(Image.srcProperty);
}
set src(value: string) {
set src(value: any) {
this._setValue(Image.srcProperty, value);
}
@@ -117,6 +116,10 @@ export class Image extends view.View implements definition.Image {
this._setValue(Image.stretchProperty, value);
}
public _setNativeImage(nativeImage: any) {
//
}
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
// We don't call super because we measure native view with specific size.

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

@@ -36,9 +36,7 @@ function onImageSourcePropertyChanged(data: dependencyObservable.PropertyChangeD
return;
}
if (image.android) {
image.android.setImageBitmap(data.newValue ? data.newValue.android : null);
}
image._setNativeImage(data.newValue ? data.newValue.android : null);
}
// register the setNativeValue callback
@@ -55,4 +53,8 @@ export class Image extends imageCommon.Image {
public _createUI() {
this._android = new android.widget.ImageView(this._context);
}
public _setNativeImage(nativeImage: any) {
this.android.setImageBitmap(nativeImage);
}
}

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

@@ -31,9 +31,9 @@ declare module "ui/image" {
imageSource: imageSource.ImageSource;
/**
* Gets or sets the URL of the image.
* Gets or sets the source of the Image. This can be either an URL string or a native image instance.
*/
src: string;
src: any;
/**
* Gets a value indicating if the image is currently loading

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

@@ -30,11 +30,7 @@ function onStretchPropertyChanged(data: dependencyObservable.PropertyChangeData)
function onImageSourcePropertyChanged(data: dependencyObservable.PropertyChangeData) {
var image = <Image>data.object;
image.ios.image = data.newValue ? data.newValue.ios : null;
if (isNaN(image.width) || isNaN(image.height)) {
image.requestLayout();
}
image._setNativeImage(data.newValue ? data.newValue.ios : null);
}
// register the setNativeValue callback
@@ -43,7 +39,7 @@ function onImageSourcePropertyChanged(data: dependencyObservable.PropertyChangeD
export class Image extends imageCommon.Image {
private _ios: UIImageView;
constructor(options?: definition.Options) {
super(options);
@@ -57,4 +53,12 @@ export class Image extends imageCommon.Image {
get ios(): UIImageView {
return this._ios;
}
public _setNativeImage(nativeImage: any) {
this.ios.image = nativeImage;
if (isNaN(this.width) || isNaN(this.height)) {
this.requestLayout();
}
}
}