getter in ListViewStyler for separatorColor

This commit is contained in:
zh-m
2017-01-05 11:29:39 +02:00
parent ee4b790728
commit 6e07d0e61d
2 changed files with 86 additions and 41 deletions

View File

@@ -9,6 +9,7 @@ import { Label } from "ui/label";
import helper = require("../helper"); import helper = require("../helper");
import { Page } from "ui/page"; import { Page } from "ui/page";
import { View, KeyedTemplate } from "ui/core/view"; import { View, KeyedTemplate } from "ui/core/view";
import { separatorColorProperty } from "ui/styling/style";
// >> article-require-listview-module // >> article-require-listview-module
import listViewModule = require("ui/list-view"); import listViewModule = require("ui/list-view");
@@ -698,6 +699,35 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
TKUnit.assert(weakRef.get(), weakRef.get() + " died prematurely!"); TKUnit.assert(weakRef.get(), weakRef.get() + " died prematurely!");
} }
public test_separatorColor_setInCSS_is_respected() {
let listView = this.testView;
let items = ["John", "Joshua", "Gregory"];
listView.items = items;
helper.buildUIAndRunTest(listView, function (views) {
let page = views[1];
page.css = "ListView { separator-color: #FF0000; }";
TKUnit.assertEqual(listView.style.separatorColor.hex, "#FF0000", "separatorColor property");
});
}
public test_separatorColor_reset() {
let listView = this.testView;
let items = ["John", "Joshua", "Gregory"];
listView.items = items;
helper.buildUIAndRunTest(listView, function (views) {
let defaultsSeparatorColor = listView.style.separatorColor;
listView.style._setValue(separatorColorProperty, "#FF0000");
TKUnit.assertEqual(listView.style.separatorColor.hex, "#FF0000", "set separatorColor property");
listView.style._resetValue(separatorColorProperty);
TKUnit.assertEqual(listView.style.separatorColor, defaultsSeparatorColor, "reset separatorColor property");
});
}
private assertNoMemoryLeak(weakRef: WeakRef<listViewModule.ListView>) { private assertNoMemoryLeak(weakRef: WeakRef<listViewModule.ListView>) {
this.tearDown(); this.tearDown();
TKUnit.waitUntilReady(() => { TKUnit.waitUntilReady(() => {
@@ -785,7 +815,7 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
TKUnit.wait(0.1); TKUnit.wait(0.1);
let firstNativeElementText = this.getTextFromNativeElementAt(listView, 0); let firstNativeElementText = this.getTextFromNativeElementAt(listView, 0);
TKUnit.assertEqual(firstNativeElementText, "default", "first element text"); TKUnit.assertEqual(firstNativeElementText, "default", "first element text");
} }
@@ -820,19 +850,19 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
public test_ItemTemplateSelector_ItemTemplatesAreCorrectlyParsedFromString() { public test_ItemTemplateSelector_ItemTemplatesAreCorrectlyParsedFromString() {
let listView = this.testView; let listView = this.testView;
listView.itemTemplates = this._itemTemplatesString; listView.itemTemplates = this._itemTemplatesString;
let itemTemplatesArray = <any>listView.itemTemplates; let itemTemplatesArray = <any>listView.itemTemplates;
TKUnit.assertEqual(itemTemplatesArray.length, 3, "itemTemplates array length"); TKUnit.assertEqual(itemTemplatesArray.length, 3, "itemTemplates array length");
let template0 = <KeyedTemplate>itemTemplatesArray[0]; let template0 = <KeyedTemplate>itemTemplatesArray[0];
TKUnit.assertEqual(template0.key, "red", "template0.key"); TKUnit.assertEqual(template0.key, "red", "template0.key");
TKUnit.assertEqual((<Label>template0.createView()).text, "red", "template0 created view text"); TKUnit.assertEqual((<Label>template0.createView()).text, "red", "template0 created view text");
let template1 = <KeyedTemplate>itemTemplatesArray[1]; let template1 = <KeyedTemplate>itemTemplatesArray[1];
TKUnit.assertEqual(template1.key, "green", "template1.key"); TKUnit.assertEqual(template1.key, "green", "template1.key");
TKUnit.assertEqual((<Label>template1.createView()).text, "green", "template1 created view text"); TKUnit.assertEqual((<Label>template1.createView()).text, "green", "template1 created view text");
let template2 = <KeyedTemplate>itemTemplatesArray[2]; let template2 = <KeyedTemplate>itemTemplatesArray[2];
TKUnit.assertEqual(template2.key, "blue", "template2.key"); TKUnit.assertEqual(template2.key, "blue", "template2.key");
TKUnit.assertEqual((<Label>template2.createView()).text, "blue", "template2 created view text"); TKUnit.assertEqual((<Label>template2.createView()).text, "blue", "template2 created view text");
@@ -849,7 +879,7 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
let firstNativeElementText = this.getTextFromNativeElementAt(listView, 0); let firstNativeElementText = this.getTextFromNativeElementAt(listView, 0);
let secondNativeElementText = this.getTextFromNativeElementAt(listView, 1); let secondNativeElementText = this.getTextFromNativeElementAt(listView, 1);
TKUnit.assertEqual(firstNativeElementText, "red", "first element text"); TKUnit.assertEqual(firstNativeElementText, "red", "first element text");
TKUnit.assertEqual(secondNativeElementText, "green", "second element text"); TKUnit.assertEqual(secondNativeElementText, "green", "second element text");
} }
@@ -864,23 +894,23 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
TKUnit.wait(0.05); TKUnit.wait(0.05);
// Forward // Forward
for(let i = 0, length = listView.items.length; i < length; i++){ for (let i = 0, length = listView.items.length; i < length; i++) {
listView.scrollToIndex(i);
TKUnit.wait(0.05);
}
// Back
for(let i = listView.items.length - 1; i >= 0; i--){
listView.scrollToIndex(i); listView.scrollToIndex(i);
TKUnit.wait(0.05); TKUnit.wait(0.05);
} }
if (listView.android){ // Back
for (let i = listView.items.length - 1; i >= 0; i--) {
listView.scrollToIndex(i);
TKUnit.wait(0.05);
}
if (listView.android) {
//(<any>listView)._dumpRealizedTemplates(); //(<any>listView)._dumpRealizedTemplates();
let realizedItems = <Map<android.view.View, View>>(<any>listView)._realizedItems; let realizedItems = <Map<android.view.View, View>>(<any>listView)._realizedItems;
TKUnit.assertTrue(realizedItems.size <= 6, 'Realized items must be 6 or less'); TKUnit.assertTrue(realizedItems.size <= 6, 'Realized items must be 6 or less');
let realizedTemplates = <Map<string, Map<android.view.View, View>>>(<any>listView)._realizedTemplates; let realizedTemplates = <Map<string, Map<android.view.View, View>>>(<any>listView)._realizedTemplates;
TKUnit.assertEqual(realizedTemplates.size, 3, 'Realized templates'); TKUnit.assertEqual(realizedTemplates.size, 3, 'Realized templates');
TKUnit.assertTrue(realizedTemplates.get("red").size <= 2, 'Red realized items must be 2 or less'); TKUnit.assertTrue(realizedTemplates.get("red").size <= 2, 'Red realized items must be 2 or less');
TKUnit.assertTrue(realizedTemplates.get("green").size <= 2, 'Green realized items must be 2 or less'); TKUnit.assertTrue(realizedTemplates.get("green").size <= 2, 'Green realized items must be 2 or less');
@@ -899,7 +929,7 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
<Label text='blue' style.backgroundColor='blue' minHeight='100' maxHeight='100'/> <Label text='blue' style.backgroundColor='blue' minHeight='100' maxHeight='100'/>
</template> </template>
`; `;
private static generateItemsForMultipleTemplatesTests(count: number): Array<Item> { private static generateItemsForMultipleTemplatesTests(count: number): Array<Item> {
let items = new Array<Item>(); let items = new Array<Item>();
for (let i = 0; i < count; i++) { for (let i = 0; i < count; i++) {

View File

@@ -5,7 +5,7 @@ import stackLayout = require("ui/layouts/stack-layout");
import proxy = require("ui/core/proxy"); import proxy = require("ui/core/proxy");
import dependencyObservable = require("ui/core/dependency-observable"); import dependencyObservable = require("ui/core/dependency-observable");
import definition = require("ui/list-view"); import definition = require("ui/list-view");
import {ProxyViewContainer} from "ui/proxy-view-container"; import { ProxyViewContainer } from "ui/proxy-view-container";
import * as layoutBase from "ui/layouts/layout-base"; import * as layoutBase from "ui/layouts/layout-base";
import * as colorModule from "color"; import * as colorModule from "color";
import { separatorColorProperty, registerHandler, Styler, StylePropertyChangedHandler } from "ui/styling/style"; import { separatorColorProperty, registerHandler, Styler, StylePropertyChangedHandler } from "ui/styling/style";
@@ -43,7 +43,7 @@ function onSeparatorColorPropertyChanged(data: dependencyObservable.PropertyChan
export class ListView extends common.ListView { export class ListView extends common.ListView {
private _androidViewId: number = -1; private _androidViewId: number = -1;
private _android: android.widget.ListView; private _android: android.widget.ListView;
public _realizedItems = new Map<android.view.View, viewModule.View>(); public _realizedItems = new Map<android.view.View, viewModule.View>();
public _realizedTemplates = new Map<string, Map<android.view.View, viewModule.View>>(); public _realizedTemplates = new Map<string, Map<android.view.View, viewModule.View>>();
public _createUI() { public _createUI() {
@@ -82,12 +82,12 @@ export class ListView extends common.ListView {
} }
// clear bindingContext when it is not observable because otherwise bindings to items won't reevaluate // clear bindingContext when it is not observable because otherwise bindings to items won't reevaluate
this._realizedItems.forEach((view, nativeView, map) => { this._realizedItems.forEach((view, nativeView, map) => {
if (!(view.bindingContext instanceof observable.Observable)) { if (!(view.bindingContext instanceof observable.Observable)) {
view.bindingContext = null; view.bindingContext = null;
} }
}); });
(<android.widget.BaseAdapter>this.android.getAdapter()).notifyDataSetChanged(); (<android.widget.BaseAdapter>this.android.getAdapter()).notifyDataSetChanged();
} }
@@ -120,16 +120,16 @@ export class ListView extends common.ListView {
}); });
} }
public _dumpRealizedTemplates(){ public _dumpRealizedTemplates() {
console.log(`Realized Templates:`); console.log(`Realized Templates:`);
this._realizedTemplates.forEach((value, index, map) => { this._realizedTemplates.forEach((value, index, map) => {
console.log(`\t${index}:`); console.log(`\t${index}:`);
value.forEach((value, index, map) => { value.forEach((value, index, map) => {
console.log(`\t\t${index.hashCode()}: ${value}`); console.log(`\t\t${index.hashCode()}: ${value}`);
}); });
}); });
console.log(`Realized Items Size: ${this._realizedItems.size}`); console.log(`Realized Items Size: ${this._realizedItems.size}`);
} }
private clearRealizedCells(): void { private clearRealizedCells(): void {
// clear the cache // clear the cache
@@ -148,16 +148,16 @@ export class ListView extends common.ListView {
} }
public _onItemTemplatesPropertyChanged(data: dependencyObservable.PropertyChangeData) { public _onItemTemplatesPropertyChanged(data: dependencyObservable.PropertyChangeData) {
this._itemTemplatesInternal = new Array<viewModule.KeyedTemplate>(this._defaultTemplate); this._itemTemplatesInternal = new Array<viewModule.KeyedTemplate>(this._defaultTemplate);
if (data.newValue){ if (data.newValue) {
this._itemTemplatesInternal = this._itemTemplatesInternal.concat(data.newValue); this._itemTemplatesInternal = this._itemTemplatesInternal.concat(data.newValue);
} }
if (this.android){ if (this.android) {
ensureListViewAdapterClass(); ensureListViewAdapterClass();
this.android.setAdapter(new ListViewAdapterClass(this)); this.android.setAdapter(new ListViewAdapterClass(this));
} }
this.refresh(); this.refresh();
} }
} }
@@ -200,7 +200,7 @@ function ensureListViewAdapterClass() {
} }
public getViewTypeCount() { public getViewTypeCount() {
return this._listView._itemTemplatesInternal.length; return this._listView._itemTemplatesInternal.length;
} }
public getItemViewType(index: number) { public getItemViewType(index: number) {
@@ -208,10 +208,10 @@ function ensureListViewAdapterClass() {
let itemViewType = this._listView._itemTemplatesInternal.indexOf(template); let itemViewType = this._listView._itemTemplatesInternal.indexOf(template);
return itemViewType; return itemViewType;
} }
public getView(index: number, convertView: android.view.View, parent: android.view.ViewGroup): android.view.View { public getView(index: number, convertView: android.view.View, parent: android.view.ViewGroup): android.view.View {
//this._listView._dumpRealizedTemplates(); //this._listView._dumpRealizedTemplates();
if (!this._listView) { if (!this._listView) {
return null; return null;
} }
@@ -224,9 +224,9 @@ function ensureListViewAdapterClass() {
// Recycle an existing view or create a new one if needed. // Recycle an existing view or create a new one if needed.
let template = this._listView._getItemTemplate(index); let template = this._listView._getItemTemplate(index);
let view: viewModule.View; let view: viewModule.View;
if (convertView){ if (convertView) {
view = this._listView._realizedTemplates.get(template.key).get(convertView); view = this._listView._realizedTemplates.get(template.key).get(convertView);
if (!view){ if (!view) {
throw new Error(`There is no entry with key '${convertView}' in the realized views cache for template with key'${template.key}'.`); throw new Error(`There is no entry with key '${convertView}' in the realized views cache for template with key'${template.key}'.`);
} }
} }
@@ -273,10 +273,10 @@ function ensureListViewAdapterClass() {
// Cache the view for recycling // Cache the view for recycling
let realizedItemsForTemplateKey = this._listView._realizedTemplates.get(template.key); let realizedItemsForTemplateKey = this._listView._realizedTemplates.get(template.key);
if (!realizedItemsForTemplateKey){ if (!realizedItemsForTemplateKey) {
realizedItemsForTemplateKey = new Map<android.view.View, viewModule.View>(); realizedItemsForTemplateKey = new Map<android.view.View, viewModule.View>();
this._listView._realizedTemplates.set(template.key, realizedItemsForTemplateKey); this._listView._realizedTemplates.set(template.key, realizedItemsForTemplateKey);
} }
realizedItemsForTemplateKey.set(convertView, args.view); realizedItemsForTemplateKey.set(convertView, args.view);
this._listView._realizedItems.set(convertView, args.view); this._listView._realizedItems.set(convertView, args.view);
} }
@@ -290,22 +290,37 @@ function ensureListViewAdapterClass() {
export class ListViewStyler implements Styler { export class ListViewStyler implements Styler {
// separator-color // separator-color
private static getSeparatorColorProperty(view: viewModule.View): any {
let listView = <android.widget.ListView>view._nativeView;
return listView.getDivider();
}
private static setSeparatorColorProperty(view: viewModule.View, newValue: any) { private static setSeparatorColorProperty(view: viewModule.View, newValue: any) {
let listView = <android.widget.ListView>view._nativeView; let listView = <android.widget.ListView>view._nativeView;
listView.setDivider(new android.graphics.drawable.ColorDrawable(newValue));
if (newValue instanceof android.graphics.drawable.Drawable) {
listView.setDivider(newValue);
} else {
listView.setDivider(new android.graphics.drawable.ColorDrawable(newValue));
}
listView.setDividerHeight(1); listView.setDividerHeight(1);
} }
private static resetSeparatorColorProperty(view: viewModule.View, nativeValue: any) { private static resetSeparatorColorProperty(view: viewModule.View, nativeValue: any) {
let listView = <android.widget.ListView>view._nativeView; let listView = <android.widget.ListView>view._nativeView;
listView.setDivider(new android.graphics.drawable.ColorDrawable(nativeValue));
listView.setDividerHeight(1); if (nativeValue instanceof android.graphics.drawable.Drawable) {
listView.setDivider(nativeValue);
} else {
listView.setDivider(new android.graphics.drawable.ColorDrawable(nativeValue));
}
} }
public static registerHandlers() { public static registerHandlers() {
registerHandler(separatorColorProperty, new StylePropertyChangedHandler( registerHandler(separatorColorProperty, new StylePropertyChangedHandler(
ListViewStyler.setSeparatorColorProperty, ListViewStyler.setSeparatorColorProperty,
ListViewStyler.resetSeparatorColorProperty), "ListView"); ListViewStyler.resetSeparatorColorProperty,
ListViewStyler.getSeparatorColorProperty), "ListView");
} }
} }