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

Common UI module implemented & used in cuteness.io

Browse Source
This commit is contained in:
Vladimir Enchev
2015-07-22 11:02:31 +03:00
parent f328638b7c
commit 2c886cb783
8 changed files with 181 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/cuteness.io/details-page.ts
View File

@@ -1,10 +1,10 @@
import pages = require("ui/page");
import observable = require("data/observable");
import {Page} from "ui";
import {EventData as ObservableEventData} from "data/observable";
// Event handler for Page "navigatedTo" event attached in details-page.xml
export function pageNavigatedTo(args: observable.EventData) {
export function pageNavigatedTo(args: ObservableEventData) {
// Get the event sender
var page = <pages.Page>args.object;
var page = <Page>args.object;
page.bindingContext = page.navigationContext;
}

25
apps/cuteness.io/main-page.ts
View File

@@ -1,34 +1,31 @@
import observable = require("data/observable");
import pages = require("ui/page");
import frames = require("ui/frame");
import listView = require("ui/list-view");
import {EventData as ObservableEventData} from "data/observable";
import {Page, ItemEventData, topmost as topmostFrame, ItemEventData as ListViewItemEventData} from "ui";
import {AppViewModel} from "./reddit-app-view-model";
import redditAppViewModel = require("./reddit-app-view-model");
var appViewModel = new redditAppViewModel.AppViewModel();
var appViewModel = new AppViewModel();
// Event handler for Page "loaded" event attached in main-page.xml
export function pageLoaded(args: observable.EventData) {
export function pageLoaded(args: ObservableEventData) {
// Get the event sender
var page = <pages.Page>args.object;
var page = <Page>args.object;
page.bindingContext = appViewModel;
// Enable platform specific feature (in this case Android page caching)
if (frames.topmost().android) {
frames.topmost().android.cachePagesOnNavigate = true;
if (topmostFrame().android) {
topmostFrame().android.cachePagesOnNavigate = true;
}
}
export function listViewItemTap(args: listView.ItemEventData) {
export function listViewItemTap(args: ListViewItemEventData) {
// Navigate to the details page with context set to the data item for specified index
frames.topmost().navigate({
topmostFrame().navigate({
moduleName: "./details-page",
context: appViewModel.redditItems.getItem(args.index)
});
}
export function listViewLoadMoreItems(args: observable.EventData) {
export function listViewLoadMoreItems(args: ObservableEventData) {
// Increase model items length with model items loadSize property value
appViewModel.redditItems.length += appViewModel.redditItems.loadSize;
}

66
apps/cuteness.io/reddit-app-view-model.ts
View File

@@ -1,53 +1,49 @@
import imageSource = require("image-source");
import virtualArray = require("data/virtual-array");
import http = require("http");
import observable = require("data/observable");
import imageCache = require("ui/image-cache");
import {ImageSource, fromFile as imageSourceFromFile} from "image-source";
import {VirtualArray, ItemsLoading as virtualArrayItemsLoadingData} from "data/virtual-array";
import {Observable} from "data/observable";
import {Cache as ImageCache} from "ui/image-cache";
import redditModel = require("./reddit-model");
import redditViewModel = require("./reddit-item-view-model");
import {Data as RedditData} from "./reddit-model";
import {RedditViewModel} from "./reddit-item-view-model";
var aboutText = "Cuteness is a proof of concept app demonstrating the Telerik's NativeScript for writing native mobile applications using JavaScript.";
export var defaultThumbnailImageSource = imageSource.fromFile("~/res/reddit-logo.png");
export var defaultNoThumbnailImageSource = imageSource.fromFile("~/res/no-image.png");
export var defaultThumbnailImageSource = imageSourceFromFile("~/res/reddit-logo.png");
export var defaultNoThumbnailImageSource = imageSourceFromFile("~/res/no-image.png");
var redditUrl = "http://www.reddit.com/r/aww.json?limit=";
var after: string;
var ISSCROLLING = "isLoading";
// initialize the image cache for the main list
export var cache = new imageCache.Cache();
export var cache = new ImageCache();
cache.placeholder = defaultThumbnailImageSource;
cache.maxRequests = 5;
export class AppViewModel extends observable.Observable {
export class AppViewModel extends Observable {
private _redditItems: virtualArray.VirtualArray<redditViewModel.RedditViewModel>;
get redditItems(): virtualArray.VirtualArray<redditViewModel.RedditViewModel> {
private _redditItems: VirtualArray<RedditViewModel>;
get redditItems(): VirtualArray<RedditViewModel> {
if (!this._redditItems) {
this._redditItems = new virtualArray.VirtualArray<redditViewModel.RedditViewModel>(1000);
this._redditItems = new VirtualArray<RedditViewModel>(1000);
this._redditItems.loadSize = 50;
this._redditItems.on(virtualArray.VirtualArray.itemsLoadingEvent, (args: virtualArray.ItemsLoading) => {
this._redditItems.on(VirtualArray.itemsLoadingEvent, (args: virtualArrayItemsLoadingData) => {
http.getJSON<redditModel.Data>(redditUrl + args.count +
(after ? "&after=" + after : "")).then(result => {
fetch(redditUrl + args.count + (after ? "&after=" + after : "")).then<RedditData>(response=> response.json()).then(result => {
var itemsToLoad = result.data.children.map(i=> {
return new redditViewModel.RedditViewModel(i.data);
});
this._redditItems.load(args.index, itemsToLoad);
var lastItem = itemsToLoad[itemsToLoad.length - 1];
if (lastItem) {
after = itemsToLoad[itemsToLoad.length - 1].source.name;
}
}, (e) => { console.log(e.message) })
.catch(function(e) {
setTimeout(function() { throw e; });
var itemsToLoad = result.data.children.map(i=> {
return new RedditViewModel(i.data);
});
;
this._redditItems.load(args.index, itemsToLoad);
var lastItem = itemsToLoad[itemsToLoad.length - 1];
if (lastItem) {
after = itemsToLoad[itemsToLoad.length - 1].source.name;
}
}).catch(e => {
setTimeout(() => { throw e; });
});
});
}
@@ -69,7 +65,7 @@ export class AppViewModel extends observable.Observable {
cache.enableDownload();
}
this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: ISSCROLLING, value: value });
this.notify({ object: this, eventName: Observable.propertyChangeEvent, propertyName: ISSCROLLING, value: value });
}
}
@@ -77,11 +73,11 @@ export class AppViewModel extends observable.Observable {
return aboutText;
}
get defaultThumbnailImageSource(): imageSource.ImageSource {
get defaultThumbnailImageSource(): ImageSource {
return defaultThumbnailImageSource;
}
get defaultNoThumbnailImageSource(): imageSource.ImageSource {
get defaultNoThumbnailImageSource(): ImageSource {
return defaultNoThumbnailImageSource;
}
}

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

@@ -1,20 +1,20 @@
import observable = require("data/observable");
import imageSource = require("image-source");
import {Observable} from "data/observable";
import {ImageSource, fromFile as imageSourceFromFile, fromUrl as imageSourceFromUrl} from "image-source";
import redditModel = require("./reddit-model");
import redditAppViewModel = require("./reddit-app-view-model");
import {ItemData} from "./reddit-model";
import {defaultThumbnailImageSource, defaultNoThumbnailImageSource, cache} from "./reddit-app-view-model";
var firstThumbnailImageSource = imageSource.fromFile("~/res/first-image.png");
var defaultImageSource = imageSource.fromFile("~/res/reddit-logo-transparent.png");
var firstThumbnailImageSource = imageSourceFromFile("~/res/first-image.png");
var defaultImageSource = imageSourceFromFile("~/res/reddit-logo-transparent.png");
var ISLOADING = "isLoading";
var THUMBNAIL_IMAGE = "thumbnailImage";
var IMAGE_SOURCE = "imageSource";
export class RedditViewModel extends observable.Observable {
export class RedditViewModel extends Observable {
private _source: redditModel.ItemData;
constructor(source: redditModel.ItemData) {
private _source: ItemData;
constructor(source: ItemData) {
super();
this._source = source;
@@ -27,7 +27,7 @@ export class RedditViewModel extends observable.Observable {
}
}
get source(): redditModel.ItemData {
get source(): ItemData {
return this._source;
}
@@ -38,13 +38,13 @@ export class RedditViewModel extends observable.Observable {
set isLoading(value: boolean) {
if (this._isLoading !== value) {
this._isLoading = value;
this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: ISLOADING, value: value });
this.notify({ object: this, eventName: Observable.propertyChangeEvent, propertyName: ISLOADING, value: value });
}
}
get thumbnailImage(): imageSource.ImageSource {
get thumbnailImage(): ImageSource {
if (!this._source) {
return redditAppViewModel.defaultThumbnailImageSource;
return defaultThumbnailImageSource;
}
if (this._source.title === "reddit 101") {
@@ -52,32 +52,32 @@ export class RedditViewModel extends observable.Observable {
}
var url = this._source.thumbnail;
if (!_isValidImageUrl(url)) {
return redditAppViewModel.defaultNoThumbnailImageSource
if (!_isValidImageUrl(url)) {
return defaultNoThumbnailImageSource
}
var image = redditAppViewModel.cache.get(url);
var image = cache.get(url);
if (image) {
return image;
}
this.isLoading = true;
redditAppViewModel.cache.push({
cache.push({
key: url,
url: url,
completed: (image: any, key: string) => {
if (url === key) {
this.isLoading = false;
this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: THUMBNAIL_IMAGE, value: image });
this.notify({ object: this, eventName: Observable.propertyChangeEvent, propertyName: THUMBNAIL_IMAGE, value: image });
}
}
});
return redditAppViewModel.defaultThumbnailImageSource;
return defaultThumbnailImageSource;
}
get imageSource(): imageSource.ImageSource {
get imageSource(): ImageSource {
if (this._source) {
var url;
try {
@@ -91,9 +91,9 @@ export class RedditViewModel extends observable.Observable {
this.isLoading = true;
imageSource.fromUrl(url).then(result => {
imageSourceFromUrl(url).then(result => {
this.isLoading = false;
this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: IMAGE_SOURCE, value: result });
this.notify({ object: this, eventName: Observable.propertyChangeEvent, propertyName: IMAGE_SOURCE, value: result });
});
}
}