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

GridLayout now calls virtual methods when rows/columns are set through XML.

Browse Source 
Added test.
Improved code readability.
This commit is contained in:
Hristo Hristov
2016-01-21 13:54:58 +02:00
parent 0eee931948
commit 68cdff85bd
21 changed files with 351 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/tests/layouts/grid-layout-tests.ts
View File

@@ -673,6 +673,20 @@ export class GridLayoutTest extends testModule.UITest<GridLayout> {
layoutHelper.assertMeasure(btn, 75, 75);
layoutHelper.assertLayout(btn, 0, 75, 75, 75);
}
public test_parse_should_call_protected_methods() {
let grid = <GridLayout>builder.parse("<GridLayout rows='*, 100'/>");
TKUnit.assertNotNull(grid);
this.testView.addChild(grid);
this.waitUntilTestElementLayoutIsValid();
let rows = grid.getRows();
TKUnit.assertEqual(rows.length, 2, "Should have 2 rows.");
TKUnit.assertTrue(rows[0].isStar, "First row should be *");
TKUnit.assertTrue(rows[1].isAbsolute, "Second row should be Absolute");
}
}
export function createTestCase(): GridLayoutTest {

57
ui/layouts/absolute-layout/absolute-layout-common.ts
View File

@@ -1,11 +1,11 @@
import layouts = require("ui/layouts/layout-base");
import definition = require("ui/layouts/absolute-layout");
import dependencyObservable = require("ui/core/dependency-observable");
import view = require("ui/core/view");
import proxy = require("ui/core/proxy");
import definition = require("ui/layouts/absolute-layout");
import {LayoutBase} from "ui/layouts/layout-base";
import {View} from "ui/core/view";
import {PropertyMetadata} from "ui/core/proxy";
import {Property, PropertyChangeData} from "ui/core/dependency-observable";
import {registerSpecialProperty} from "ui/builder/special-properties";
function validateArgs(element: view.View): view.View {
function validateArgs(element: View): View {
if (!element) {
throw new Error("element cannot be null or undefinied.");
}
@@ -19,59 +19,58 @@ registerSpecialProperty("top", (instance, propertyValue) => {
AbsoluteLayout.setTop(instance, !isNaN(+propertyValue) && +propertyValue);
});
export class AbsoluteLayout extends layouts.LayoutBase implements definition.AbsoluteLayout {
export class AbsoluteLayout extends LayoutBase implements definition.AbsoluteLayout {
private static isValid(value: number): boolean {
return isFinite(value);
}
private static onLeftPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var uiView = data.object;
if (uiView instanceof view.View) {
var layout = uiView.parent;
private static onLeftPropertyChanged(data: PropertyChangeData) {
var view = data.object;
if (view instanceof View) {
var layout = view.parent;
if (layout instanceof AbsoluteLayout) {
layout.onLeftChanged(uiView, data.oldValue, data.newValue);
layout.onLeftChanged(view, data.oldValue, data.newValue);
}
}
}
private static onTopPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var uiView = data.object;
if (uiView instanceof view.View) {
var layout = uiView.parent;
private static onTopPropertyChanged(data: PropertyChangeData) {
var view = data.object;
if (view instanceof View) {
var layout = view.parent;
if (layout instanceof AbsoluteLayout) {
layout.onTopChanged(uiView, data.oldValue, data.newValue);
layout.onTopChanged(view, data.oldValue, data.newValue);
}
}
}
public static leftProperty = new dependencyObservable.Property("left", "AbsoluteLayout",
new proxy.PropertyMetadata(0, undefined, AbsoluteLayout.onLeftPropertyChanged, AbsoluteLayout.isValid));
public static leftProperty = new Property("left", "AbsoluteLayout",
new PropertyMetadata(0, undefined, AbsoluteLayout.onLeftPropertyChanged, AbsoluteLayout.isValid));
public static topProperty = new dependencyObservable.Property("top", "AbsoluteLayout",
new proxy.PropertyMetadata(0, undefined, AbsoluteLayout.onTopPropertyChanged, AbsoluteLayout.isValid));
public static topProperty = new Property("top", "AbsoluteLayout",
new PropertyMetadata(0, undefined, AbsoluteLayout.onTopPropertyChanged, AbsoluteLayout.isValid));
public static getLeft(element: view.View): number {
public static getLeft(element: View): number {
return validateArgs(element)._getValue(AbsoluteLayout.leftProperty);
}
public static setLeft(element: view.View, value: number): void {
public static setLeft(element: View, value: number): void {
validateArgs(element)._setValue(AbsoluteLayout.leftProperty, value);
}
public static getTop(element: view.View): number {
public static getTop(element: View): number {
return validateArgs(element)._getValue(AbsoluteLayout.topProperty);
}
public static setTop(element: view.View, value: number): void {
public static setTop(element: View, value: number): void {
validateArgs(element)._setValue(AbsoluteLayout.topProperty, value);
}
protected onLeftChanged(view: view.View, oldValue: number, newValue: number) {
protected onLeftChanged(view: View, oldValue: number, newValue: number) {
//
}
protected onTopChanged(view: view.View, oldValue: number, newValue: number) {
protected onTopChanged(view: View, oldValue: number, newValue: number) {
//
}
}
}

26
ui/layouts/absolute-layout/absolute-layout.android.ts
View File

@@ -1,17 +1,15 @@
import utils = require("utils/utils");
import common = require("./absolute-layout-common");
import dependencyObservable = require("ui/core/dependency-observable");
import proxy = require("ui/core/proxy");
import * as viewModule from "ui/core/view";
import {View} from "ui/core/view";
import {PropertyMetadata} from "ui/core/proxy";
import {PropertyChangeData} from "ui/core/dependency-observable";
global.moduleMerge(common, exports);
function setNativeProperty(data: dependencyObservable.PropertyChangeData, setter: (lp: org.nativescript.widgets.CommonLayoutParams) => void) {
var view: typeof viewModule = require("ui/core/view");
var uiView = data.object;
if (uiView instanceof view.View) {
var nativeView: android.view.View = (<any>uiView)._nativeView;
function setNativeProperty(data: PropertyChangeData, setter: (lp: org.nativescript.widgets.CommonLayoutParams) => void) {
var view = data.object;
if (view instanceof View) {
var nativeView: android.view.View = view._nativeView;
var lp = <org.nativescript.widgets.CommonLayoutParams>nativeView.getLayoutParams();
if (!(lp instanceof org.nativescript.widgets.CommonLayoutParams)) {
@@ -22,16 +20,16 @@ function setNativeProperty(data: dependencyObservable.PropertyChangeData, setter
}
}
function setNativeLeftProperty(data: dependencyObservable.PropertyChangeData) {
function setNativeLeftProperty(data: PropertyChangeData) {
setNativeProperty(data, (lp) => { lp.left = data.newValue * utils.layout.getDisplayDensity(); });
}
function setNativeTopProperty(data: dependencyObservable.PropertyChangeData) {
function setNativeTopProperty(data: PropertyChangeData) {
setNativeProperty(data, (lp) => { lp.top = data.newValue * utils.layout.getDisplayDensity(); });
}
(<proxy.PropertyMetadata>common.AbsoluteLayout.leftProperty.metadata).onSetNativeValue = setNativeLeftProperty;
(<proxy.PropertyMetadata>common.AbsoluteLayout.topProperty.metadata).onSetNativeValue = setNativeTopProperty;
(<PropertyMetadata>common.AbsoluteLayout.leftProperty.metadata).onSetNativeValue = setNativeLeftProperty;
(<PropertyMetadata>common.AbsoluteLayout.topProperty.metadata).onSetNativeValue = setNativeTopProperty;
export class AbsoluteLayout extends common.AbsoluteLayout {
@@ -48,4 +46,4 @@ export class AbsoluteLayout extends common.AbsoluteLayout {
public _createUI() {
this._layout = new org.nativescript.widgets.AbsoluteLayout(this._context);
}
}
}

21
ui/layouts/absolute-layout/absolute-layout.d.ts vendored
View File

@@ -1,42 +1,41 @@
declare module "ui/layouts/absolute-layout" {
import layout = require("ui/layouts/layout-base");
import view = require("ui/core/view");
import dependencyObservable = require("ui/core/dependency-observable");
import {LayoutBase} from "ui/layouts/layout-base";
import {View} from "ui/core/view";
import {Property} from "ui/core/dependency-observable";
/**
* A layout that lets you specify exact locations (left/top coordinates) of its children.
*/
class AbsoluteLayout extends layout.LayoutBase {
class AbsoluteLayout extends LayoutBase {
/**
* Represents the observable property backing the left property.
*/
public static leftProperty: dependencyObservable.Property;
public static leftProperty: Property;
/**
* Represents the observable property backing the top property.
*/
public static topProperty: dependencyObservable.Property;
public static topProperty: Property;
/**
* Gets the value of the Left property from a given View.
*/
static getLeft(view: view.View): number;
static getLeft(view: View): number;
/**
* Sets the value of the Left property from a given View.
*/
static setLeft(view: view.View, value: number): void;
static setLeft(view: View, value: number): void;
/**
* Gets the value of the Top property from a given View.
*/
static getTop(view: view.View): number;
static getTop(view: View): number;
/**
* Sets the value of the Top property from a given View.
*/
static setTop(view: view.View, value: number): void;
static setTop(view: View, value: number): void;
}
}

39
ui/layouts/absolute-layout/absolute-layout.ios.ts
View File

@@ -1,17 +1,16 @@
import utils = require("utils/utils");
import view = require("ui/core/view");
import common = require("./absolute-layout-common");
import {View} from "ui/core/view";
import {CommonLayoutParams, nativeLayoutParamsProperty} from "ui/styling/style";
global.moduleMerge(common, exports);
export class AbsoluteLayout extends common.AbsoluteLayout {
protected onLeftChanged(view: view.View, oldValue: number, newValue: number) {
protected onLeftChanged(view: View, oldValue: number, newValue: number) {
this.requestLayout();
}
protected onTopChanged(view: view.View, oldValue: number, newValue: number) {
protected onTopChanged(view: View, oldValue: number, newValue: number) {
this.requestLayout();
}
@@ -19,17 +18,17 @@ export class AbsoluteLayout extends common.AbsoluteLayout {
AbsoluteLayout.adjustChildrenLayoutParams(this, widthMeasureSpec, heightMeasureSpec);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
var measureWidth = 0;
var measureHeight = 0;
var width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
var widthMode = utils.layout.getMeasureSpecMode(widthMeasureSpec);
var height = utils.layout.getMeasureSpecSize(heightMeasureSpec);
var heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec);
var childMeasureSpec = utils.layout.makeMeasureSpec(0, utils.layout.UNSPECIFIED);
var density = utils.layout.getDisplayDensity();
let measureWidth = 0;
let measureHeight = 0;
let width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
let widthMode = utils.layout.getMeasureSpecMode(widthMeasureSpec);
let height = utils.layout.getMeasureSpecSize(heightMeasureSpec);
let heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec);
let childMeasureSpec = utils.layout.makeMeasureSpec(0, utils.layout.UNSPECIFIED);
let density = utils.layout.getDisplayDensity();
for (let i = 0, count = this.getChildrenCount(); i < count; i++) {
let child = this.getChildAt(i);
@@ -37,7 +36,7 @@ export class AbsoluteLayout extends common.AbsoluteLayout {
continue;
}
let childSize = view.View.measureChild(this, child, childMeasureSpec, childMeasureSpec);
let childSize = View.measureChild(this, child, childMeasureSpec, childMeasureSpec);
measureWidth = Math.max(measureWidth, AbsoluteLayout.getLeft(child) * density + childSize.measuredWidth);
measureHeight = Math.max(measureHeight, AbsoluteLayout.getTop(child) * density + childSize.measuredHeight);
}
@@ -48,8 +47,8 @@ export class AbsoluteLayout extends common.AbsoluteLayout {
measureWidth = Math.max(measureWidth, this.minWidth * density);
measureHeight = Math.max(measureHeight, this.minHeight * density);
var widthAndState = view.View.resolveSizeAndState(measureWidth, width, widthMode, 0);
var heightAndState = view.View.resolveSizeAndState(measureHeight, height, heightMode, 0);
let widthAndState = View.resolveSizeAndState(measureWidth, width, widthMode, 0);
let heightAndState = View.resolveSizeAndState(measureHeight, height, heightMode, 0);
this.setMeasuredDimension(widthAndState, heightAndState);
}
@@ -57,7 +56,7 @@ export class AbsoluteLayout extends common.AbsoluteLayout {
public onLayout(left: number, top: number, right: number, bottom: number): void {
super.onLayout(left, top, right, bottom);
var density = utils.layout.getDisplayDensity();
let density = utils.layout.getDisplayDensity();
for (let i = 0, count = this.getChildrenCount(); i < count; i++) {
let child = this.getChildAt(i);
if (!child._isVisible) {
@@ -74,7 +73,7 @@ export class AbsoluteLayout extends common.AbsoluteLayout {
let childRight = childLeft + childWidth + (lp.leftMargin + lp.rightMargin) * density;
let childBottom = childTop + childHeight + (lp.topMargin + lp.bottomMargin) * density;
view.View.layoutChild(this, child, childLeft, childTop, childRight, childBottom);
View.layoutChild(this, child, childLeft, childTop, childRight, childBottom);
}
AbsoluteLayout.restoreOriginalParams(this);

48
ui/layouts/dock-layout/dock-layout-common.ts
View File

@@ -1,20 +1,20 @@
import layouts = require("ui/layouts/layout-base");
import definition = require("ui/layouts/dock-layout");
import dependencyObservable = require("ui/core/dependency-observable");
import view = require("ui/core/view");
import enums = require("ui/enums");
import proxy = require("ui/core/proxy");
import {registerSpecialProperty} from "ui/builder/special-properties";
import definition = require("ui/layouts/dock-layout");
import platform = require("platform");
import {Dock} from "ui/enums";
import {LayoutBase} from "ui/layouts/layout-base";
import {View} from "ui/core/view";
import {PropertyMetadata} from "ui/core/proxy";
import {Property, PropertyChangeData, PropertyMetadataSettings} from "ui/core/dependency-observable";
import {registerSpecialProperty} from "ui/builder/special-properties";
// on Android we explicitly set propertySettings to None because android will invalidate its layout (skip unnecessary native call).
var AffectsLayout = platform.device.os === platform.platformNames.android ? dependencyObservable.PropertyMetadataSettings.None : dependencyObservable.PropertyMetadataSettings.AffectsLayout;
var AffectsLayout = platform.device.os === platform.platformNames.android ? PropertyMetadataSettings.None : PropertyMetadataSettings.AffectsLayout;
function isDockValid(value: any): boolean {
return value === enums.Dock.left || value === enums.Dock.top || value === enums.Dock.right || value === enums.Dock.bottom;
return value === Dock.left || value === Dock.top || value === Dock.right || value === Dock.bottom;
}
function validateArgs(element: view.View): view.View {
function validateArgs(element: View): View {
if (!element) {
throw new Error("element cannot be null or undefinied.");
}
@@ -25,29 +25,29 @@ registerSpecialProperty("dock", (instance, propertyValue) => {
DockLayout.setDock(instance, propertyValue);
});
export class DockLayout extends layouts.LayoutBase implements definition.DockLayout {
export class DockLayout extends LayoutBase implements definition.DockLayout {
private static onDockPropertyChanged(data: dependencyObservable.PropertyChangeData) {
var uiView = data.object;
if (uiView instanceof view.View) {
var layout = uiView.parent;
private static onDockPropertyChanged(data: PropertyChangeData) {
var view = data.object;
if (view instanceof View) {
var layout = view.parent;
if (layout instanceof DockLayout) {
layout.onDockChanged(uiView, data.oldValue, data.newValue);
layout.onDockChanged(view, data.oldValue, data.newValue);
}
}
}
public static dockProperty = new dependencyObservable.Property(
"dock", "DockLayout", new proxy.PropertyMetadata(enums.Dock.left, undefined, DockLayout.onDockPropertyChanged, isDockValid));
public static dockProperty = new Property(
"dock", "DockLayout", new PropertyMetadata(Dock.left, undefined, DockLayout.onDockPropertyChanged, isDockValid));
public static stretchLastChildProperty = new dependencyObservable.Property(
"stretchLastChild", "DockLayout", new proxy.PropertyMetadata(true, AffectsLayout));
public static stretchLastChildProperty = new Property(
"stretchLastChild", "DockLayout", new PropertyMetadata(true, AffectsLayout));
public static getDock(element: view.View): string {
public static getDock(element: View): string {
return validateArgs(element)._getValue(DockLayout.dockProperty);
}
public static setDock(element: view.View, value: string): void {
public static setDock(element: View, value: string): void {
validateArgs(element)._setValue(DockLayout.dockProperty, value);
}
@@ -58,7 +58,7 @@ export class DockLayout extends layouts.LayoutBase implements definition.DockLay
this._setValue(DockLayout.stretchLastChildProperty, value);
}
protected onDockChanged(view: view.View, oldValue: number, newValue: number) {
protected onDockChanged(view: View, oldValue: number, newValue: number) {
//
}
}
}

50
ui/layouts/dock-layout/dock-layout.android.ts
View File

@@ -1,17 +1,15 @@
import dependencyObservable = require("ui/core/dependency-observable");
import enums = require("ui/enums");
import proxy = require("ui/core/proxy");
import common = require("./dock-layout-common");
import * as viewModule from "ui/core/view";
import common = require("./dock-layout-common");
import {Dock} from "ui/enums";
import {View} from "ui/core/view";
import {PropertyMetadata} from "ui/core/proxy";
import {PropertyChangeData} from "ui/core/dependency-observable";
global.moduleMerge(common, exports);
function setNativeDockProperty(data: dependencyObservable.PropertyChangeData) {
var view: typeof viewModule = require("ui/core/view");
var uiView = data.object;
if (uiView instanceof view.View) {
var nativeView: android.view.View = (<any>uiView)._nativeView;
function setNativeDockProperty(data: PropertyChangeData) {
var view = data.object;
if (view instanceof View) {
var nativeView: android.view.View = view._nativeView;
var lp = <org.nativescript.widgets.CommonLayoutParams>nativeView.getLayoutParams();
if (!(lp instanceof org.nativescript.widgets.CommonLayoutParams)) {
@@ -19,36 +17,38 @@ function setNativeDockProperty(data: dependencyObservable.PropertyChangeData) {
}
switch (data.newValue) {
case enums.Dock.left:
case Dock.left:
lp.dock = org.nativescript.widgets.Dock.left;
break;
case enums.Dock.top:
case Dock.top:
lp.dock = org.nativescript.widgets.Dock.top;
break;
case enums.Dock.right:
case Dock.right:
lp.dock = org.nativescript.widgets.Dock.right;
break;
case enums.Dock.bottom:
case Dock.bottom:
lp.dock = org.nativescript.widgets.Dock.bottom;
break;
default:
throw new Error("Invalid dock value: " + data.newValue + " on element: " + uiView);
throw new Error("Invalid dock value: " + data.newValue + " on element: " + view);
}
nativeView.setLayoutParams(lp);
}
}
(<proxy.PropertyMetadata>common.DockLayout.dockProperty.metadata).onSetNativeValue = setNativeDockProperty;
(<PropertyMetadata>common.DockLayout.dockProperty.metadata).onSetNativeValue = setNativeDockProperty;
function setNativeStretchLastChildProperty(data: PropertyChangeData) {
let dockLayout = <DockLayout>data.object;
let nativeView = dockLayout._nativeView;
nativeView.setStretchLastChild(data.newValue);
}
(<PropertyMetadata>common.DockLayout.stretchLastChildProperty.metadata).onSetNativeValue = setNativeStretchLastChildProperty;
export class DockLayout extends common.DockLayout {
static setNativeStretchLastChildProperty(data: dependencyObservable.PropertyChangeData) {
var dockLayout = <DockLayout>data.object;
var nativeView = dockLayout._nativeView;
nativeView.setStretchLastChild(data.newValue);
}
private _layout: org.nativescript.widgets.DockLayout;
get android(): org.nativescript.widgets.DockLayout {
@@ -62,6 +62,4 @@ export class DockLayout extends common.DockLayout {
public _createUI() {
this._layout = new org.nativescript.widgets.DockLayout(this._context);
}
}
(<proxy.PropertyMetadata>common.DockLayout.stretchLastChildProperty.metadata).onSetNativeValue = DockLayout.setNativeStretchLastChildProperty;
}

16
ui/layouts/dock-layout/dock-layout.d.ts vendored
View File

@@ -1,32 +1,32 @@
declare module "ui/layouts/dock-layout" {
import view = require("ui/core/view");
import layout = require("ui/layouts/layout-base");
import dependencyObservable = require("ui/core/dependency-observable");
import {LayoutBase} from "ui/layouts/layout-base";
import {View} from "ui/core/view";
import {Property} from "ui/core/dependency-observable";
/**
* A Layout that arranges its children at its outer edges, and allows its last child to take up the remaining space.
*/
class DockLayout extends layout.LayoutBase {
class DockLayout extends LayoutBase {
/**
* Represents the observable property backing the dock property.
*/
public static dockProperty: dependencyObservable.Property;
public static dockProperty: Property;
/**
* Represents the observable property backing the stretchLastChild property of each DockLayout instance.
*/
public static stretchLastChildProperty: dependencyObservable.Property;
public static stretchLastChildProperty: Property;
/**
* Gets the value of the Left property from a given View.
*/
static getDock(view: view.View): string;
static getDock(view: View): string;
/**
* Sets the value of the Left property from a given View.
*/
static setDock(view: view.View, value: string): void;
static setDock(view: View, value: string): void;
/**
* Gets or sets a value that indicates whether the last child element within a DockLayout stretches to fill the remaining available space.

32
ui/layouts/dock-layout/dock-layout.ios.ts
View File

@@ -1,14 +1,14 @@
import utils = require("utils/utils");
import view = require("ui/core/view");
import enums = require("ui/enums");
import common = require("./dock-layout-common");
import {CommonLayoutParams, nativeLayoutParamsProperty} from "ui/styling/style";
import {Dock} from "ui/enums";
import {View} from "ui/core/view";
global.moduleMerge(common, exports);
export class DockLayout extends common.DockLayout {
protected onDockChanged(view: view.View, oldValue: number, newValue: number) {
protected onDockChanged(view: View, oldValue: number, newValue: number) {
this.requestLayout();
}
@@ -51,20 +51,20 @@ export class DockLayout extends common.DockLayout {
childHeightMeasureSpec = utils.layout.makeMeasureSpec(remainingHeight, heightMode === utils.layout.EXACTLY ? utils.layout.AT_MOST : heightMode);
}
let childSize = view.View.measureChild(this, child, childWidthMeasureSpec, childHeightMeasureSpec);
let childSize = View.measureChild(this, child, childWidthMeasureSpec, childHeightMeasureSpec);
let dock = DockLayout.getDock(child);
switch (dock) {
case enums.Dock.top:
case enums.Dock.bottom:
case Dock.top:
case Dock.bottom:
remainingHeight = Math.max(0, remainingHeight - childSize.measuredHeight);
tempHeight += childSize.measuredHeight;
measureWidth = Math.max(measureWidth, tempWidth + childSize.measuredWidth);
measureHeight = Math.max(measureHeight, tempHeight);
break;
case enums.Dock.left:
case enums.Dock.right:
case Dock.left:
case Dock.right:
default:
remainingWidth = Math.max(0, remainingWidth - childSize.measuredWidth);
tempWidth += childSize.measuredWidth;
@@ -80,8 +80,8 @@ export class DockLayout extends common.DockLayout {
measureWidth = Math.max(measureWidth, this.minWidth * density);
measureHeight = Math.max(measureHeight, this.minHeight * density);
var widthAndState = view.View.resolveSizeAndState(measureWidth, width, widthMode, 0);
var heightAndState = view.View.resolveSizeAndState(measureHeight, height, heightMode, 0);
var widthAndState = View.resolveSizeAndState(measureWidth, width, widthMode, 0);
var heightAndState = View.resolveSizeAndState(measureHeight, height, heightMode, 0);
this.setMeasuredDimension(widthAndState, heightAndState);
}
@@ -120,7 +120,7 @@ export class DockLayout extends common.DockLayout {
let dock = DockLayout.getDock(child);
switch (dock) {
case enums.Dock.top:
case Dock.top:
childLeft = x;
childTop = y;
childWidth = remainingWidth;
@@ -128,21 +128,21 @@ export class DockLayout extends common.DockLayout {
remainingHeight = Math.max(0, remainingHeight - childHeight);
break;
case enums.Dock.bottom:
case Dock.bottom:
childLeft = x;
childTop = y + remainingHeight - childHeight;
childWidth = remainingWidth;
remainingHeight = Math.max(0, remainingHeight - childHeight);
break;
case enums.Dock.right:
case Dock.right:
childLeft = x + remainingWidth - childWidth;
childTop = y;
childHeight = remainingHeight;
remainingWidth = Math.max(0, remainingWidth - childWidth);
break;
case enums.Dock.left:
case Dock.left:
default:
childLeft = x;
childTop = y;
@@ -152,11 +152,11 @@ export class DockLayout extends common.DockLayout {
break;
}
view.View.layoutChild(this, child, childLeft, childTop, childLeft + childWidth, childTop + childHeight);
View.layoutChild(this, child, childLeft, childTop, childLeft + childWidth, childTop + childHeight);
}
if (childToStretch) {
view.View.layoutChild(this, childToStretch, x, y, x + remainingWidth, y + remainingHeight);
View.layoutChild(this, childToStretch, x, y, x + remainingWidth, y + remainingHeight);
}
DockLayout.restoreOriginalParams(this);

114
ui/layouts/grid-layout/grid-layout-common.ts
View File

@@ -1,14 +1,14 @@
import layouts = require("ui/layouts/layout-base");
import definition = require("ui/layouts/grid-layout");
import dependencyObservable = require("ui/core/dependency-observable");
import view = require("ui/core/view");
import bindable = require("ui/core/bindable");
import numberUtils = require("../../../utils/number-utils");
import proxy = require("ui/core/proxy");
import definition = require("ui/layouts/grid-layout");
import {LayoutBase} from "ui/layouts/layout-base";
import {View, ApplyXmlAttributes} from "ui/core/view";
import {Bindable} from "ui/core/bindable";
import {PropertyMetadata} from "ui/core/proxy";
import {Property, PropertyMetadataSettings, PropertyChangeData} from "ui/core/dependency-observable";
import {registerSpecialProperty} from "ui/builder/special-properties";
import numberUtils = require("../../../utils/number-utils");
import * as typesModule from "utils/types";
function validateArgs(element: view.View): view.View {
function validateArgs(element: View): View {
if (!element) {
throw new Error("element cannot be null or undefinied.");
}
@@ -34,8 +34,7 @@ registerSpecialProperty("rowSpan", (instance, propertyValue) => {
GridLayout.setRowSpan(instance, !isNaN(+propertyValue) && +propertyValue);
});
export class ItemSpec extends bindable.Bindable implements definition.ItemSpec {
export class ItemSpec extends Bindable implements definition.ItemSpec {
private _value: number;
private _unitType: string;
@@ -72,6 +71,13 @@ export class ItemSpec extends bindable.Bindable implements definition.ItemSpec {
public index: number;
public _actualLength: number = 0;
public static create(value: number, type: string): ItemSpec {
let spec = new ItemSpec();
spec._value = value;
spec._unitType = type;
return spec;
}
public get actualLength(): number {
return this._actualLength;
}
@@ -104,51 +110,51 @@ export class ItemSpec extends bindable.Bindable implements definition.ItemSpec {
}
}
export class GridLayout extends layouts.LayoutBase implements definition.GridLayout, view.ApplyXmlAttributes {
export class GridLayout extends LayoutBase implements definition.GridLayout, ApplyXmlAttributes {
private _rows: Array<ItemSpec> = new Array<ItemSpec>();
private _cols: Array<ItemSpec> = new Array<ItemSpec>();
public static columnProperty = new dependencyObservable.Property("Column", "GridLayout",
new proxy.PropertyMetadata(0, dependencyObservable.PropertyMetadataSettings.None, GridLayout.onColumnPropertyChanged, numberUtils.notNegative));
public static columnProperty = new Property("Column", "GridLayout",
new PropertyMetadata(0, PropertyMetadataSettings.None, GridLayout.onColumnPropertyChanged, numberUtils.notNegative));
public static columnSpanProperty = new dependencyObservable.Property("ColumnSpan", "GridLayout",
new proxy.PropertyMetadata(1, dependencyObservable.PropertyMetadataSettings.None, GridLayout.onColumnSpanPropertyChanged, numberUtils.greaterThanZero));
public static columnSpanProperty = new Property("ColumnSpan", "GridLayout",
new PropertyMetadata(1, PropertyMetadataSettings.None, GridLayout.onColumnSpanPropertyChanged, numberUtils.greaterThanZero));
public static rowProperty = new dependencyObservable.Property("Row", "GridLayout",
new proxy.PropertyMetadata(0, dependencyObservable.PropertyMetadataSettings.None, GridLayout.onRowPropertyChanged, numberUtils.notNegative));
public static rowProperty = new Property("Row", "GridLayout",
new PropertyMetadata(0, PropertyMetadataSettings.None, GridLayout.onRowPropertyChanged, numberUtils.notNegative));
public static rowSpanProperty = new dependencyObservable.Property("RowSpan", "GridLayout",
new proxy.PropertyMetadata(1, dependencyObservable.PropertyMetadataSettings.None, GridLayout.onRowSpanPropertyChanged, numberUtils.greaterThanZero));
public static rowSpanProperty = new Property("RowSpan", "GridLayout",
new PropertyMetadata(1, PropertyMetadataSettings.None, GridLayout.onRowSpanPropertyChanged, numberUtils.greaterThanZero));
public static getColumn(element: view.View): number {
public static getColumn(element: View): number {
return validateArgs(element)._getValue(GridLayout.columnProperty);
}
public static setColumn(element: view.View, value: number): void {
public static setColumn(element: View, value: number): void {
validateArgs(element)._setValue(GridLayout.columnProperty, value);
}
public static getColumnSpan(element: view.View): number {
public static getColumnSpan(element: View): number {
return validateArgs(element)._getValue(GridLayout.columnSpanProperty);
}
public static setColumnSpan(element: view.View, value: number): void {
public static setColumnSpan(element: View, value: number): void {
validateArgs(element)._setValue(GridLayout.columnSpanProperty, value);
}
public static getRow(element: view.View): number {
public static getRow(element: View): number {
return validateArgs(element)._getValue(GridLayout.rowProperty);
}
public static setRow(element: view.View, value: number): void {
public static setRow(element: View, value: number): void {
validateArgs(element)._setValue(GridLayout.rowProperty, value);
}
public static getRowSpan(element: view.View): number {
public static getRowSpan(element: View): number {
return validateArgs(element)._getValue(GridLayout.rowSpanProperty);
}
public static setRowSpan(element: view.View, value: number): void {
public static setRowSpan(element: View, value: number): void {
validateArgs(element)._setValue(GridLayout.rowSpanProperty, value);
}
@@ -157,6 +163,7 @@ export class GridLayout extends layouts.LayoutBase implements definition.GridLay
itemSpec.owner = this;
this._rows.push(itemSpec);
this.onRowAdded(itemSpec);
this.invalidate();
}
public addColumn(itemSpec: ItemSpec) {
@@ -164,6 +171,7 @@ export class GridLayout extends layouts.LayoutBase implements definition.GridLay
itemSpec.owner = this;
this._cols.push(itemSpec);
this.onColumnAdded(itemSpec);
this.invalidate();
}
public removeRow(itemSpec: ItemSpec): void {
@@ -179,6 +187,7 @@ export class GridLayout extends layouts.LayoutBase implements definition.GridLay
itemSpec.index = -1;
this._rows.splice(index, 1);
this.onRowRemoved(itemSpec, index);
this.invalidate();
}
public removeColumn(itemSpec: ItemSpec): void {
@@ -194,6 +203,7 @@ export class GridLayout extends layouts.LayoutBase implements definition.GridLay
itemSpec.index = -1;
this._cols.splice(index, 1);
this.onColumnRemoved(itemSpec, index);
this.invalidate();
}
public removeColumns() {
@@ -212,20 +222,20 @@ export class GridLayout extends layouts.LayoutBase implements definition.GridLay
this.invalidate();
}
protected onRowChanged(element: view.View, oldValue: number, newValue: number) {
//
protected onRowChanged(element: View, oldValue: number, newValue: number) {
this.invalidate();
}
protected onRowSpanChanged(element: view.View, oldValue: number, newValue: number) {
//
protected onRowSpanChanged(element: View, oldValue: number, newValue: number) {
this.invalidate();
}
protected onColumnChanged(element: view.View, oldValue: number, newValue: number) {
//
protected onColumnChanged(element: View, oldValue: number, newValue: number) {
this.invalidate();
}
protected onColumnSpanChanged(element: view.View, oldValue: number, newValue: number) {
//
protected onColumnSpanChanged(element: View, oldValue: number, newValue: number) {
this.invalidate();
}
protected onRowAdded(itemSpec: ItemSpec) {
@@ -261,7 +271,7 @@ export class GridLayout extends layouts.LayoutBase implements definition.GridLay
}
protected invalidate(): void {
//
this.requestLayout();
}
_applyXmlAttribute(attributeName: string, attributeValue: any): boolean {
@@ -292,21 +302,21 @@ export class GridLayout extends layouts.LayoutBase implements definition.GridLay
private static convertGridLength(value: string): ItemSpec {
if (value === "auto") {
return <ItemSpec>new definition.ItemSpec(1, definition.GridUnitType.auto);
return ItemSpec.create(1, GridUnitType.auto);
}
else if (value.indexOf("*") !== -1) {
var starCount = parseInt(value.replace("*", "") || "1");
return <ItemSpec>new definition.ItemSpec(starCount, definition.GridUnitType.star);
return ItemSpec.create(starCount, GridUnitType.star);
}
else if (!isNaN(parseInt(value))) {
return <ItemSpec>new definition.ItemSpec(parseInt(value), definition.GridUnitType.pixel);
return ItemSpec.create(parseInt(value), GridUnitType.pixel);
}
else {
throw new Error("Cannot parse item spec from string: " + value);
}
}
private static onRowPropertyChanged(data: dependencyObservable.PropertyChangeData): void {
private static onRowPropertyChanged(data: PropertyChangeData): void {
var element = GridLayout.getView(data.object);
var grid = element.parent;
if (grid instanceof GridLayout) {
@@ -314,7 +324,7 @@ export class GridLayout extends layouts.LayoutBase implements definition.GridLay
}
}
private static onColumnPropertyChanged(data: dependencyObservable.PropertyChangeData): void {
private static onColumnPropertyChanged(data: PropertyChangeData): void {
var element = GridLayout.getView(data.object);
var grid = element.parent;
if (grid instanceof GridLayout) {
@@ -322,7 +332,7 @@ export class GridLayout extends layouts.LayoutBase implements definition.GridLay
}
}
private static onRowSpanPropertyChanged(data: dependencyObservable.PropertyChangeData): void {
private static onRowSpanPropertyChanged(data: PropertyChangeData): void {
var element = GridLayout.getView(data.object);
var grid = element.parent;
if (grid instanceof GridLayout) {
@@ -330,7 +340,7 @@ export class GridLayout extends layouts.LayoutBase implements definition.GridLay
}
}
private static onColumnSpanPropertyChanged(data: dependencyObservable.PropertyChangeData): void {
private static onColumnSpanPropertyChanged(data: PropertyChangeData): void {
var element = GridLayout.getView(data.object);
var grid = element.parent;
if (grid instanceof GridLayout) {
@@ -348,8 +358,8 @@ export class GridLayout extends layouts.LayoutBase implements definition.GridLay
}
}
private static getView(object: Object): view.View {
if (object instanceof view.View) {
private static getView(object: Object): View {
if (object instanceof View) {
return object;
}
@@ -357,12 +367,16 @@ export class GridLayout extends layouts.LayoutBase implements definition.GridLay
}
private _setColumns(value: string) {
this._cols = GridLayout.parseItemSpecs(value);
this.invalidate();
let columns = GridLayout.parseItemSpecs(value);
for (let i = 0, count = columns.length; i < count; i++) {
this.addColumn(columns[i]);
}
}
private _setRows(value: string) {
this._rows = GridLayout.parseItemSpecs(value);
this.invalidate();
let rows = GridLayout.parseItemSpecs(value);
for (let i = 0, count = rows.length; i < count; i++) {
this.addRow(rows[i]);
}
}
}
}

39
ui/layouts/grid-layout/grid-layout.android.ts
View File

@@ -1,18 +1,17 @@
import utils = require("utils/utils");
import dependencyObservable = require("ui/core/dependency-observable");
import proxy = require("ui/core/proxy");
import common = require("./grid-layout-common");
import {View} from "ui/core/view";
import {PropertyMetadata} from "ui/core/proxy";
import {PropertyChangeData} from "ui/core/dependency-observable";
global.moduleMerge(common, exports);
function setNativeProperty(data: dependencyObservable.PropertyChangeData, setter: (lp: org.nativescript.widgets.CommonLayoutParams) => void) {
var view = require("ui/core/view");
function setNativeProperty(data: PropertyChangeData, setter: (lp: org.nativescript.widgets.CommonLayoutParams) => void) {
let view = data.object;
if (view instanceof View) {
let nativeView: android.view.View = view._nativeView;
var uiView = data.object;
if (uiView instanceof view.View) {
var nativeView: android.view.View = (<any>uiView)._nativeView;
var lp = <org.nativescript.widgets.CommonLayoutParams>nativeView.getLayoutParams();
let lp = <org.nativescript.widgets.CommonLayoutParams>nativeView.getLayoutParams();
if (!(lp instanceof org.nativescript.widgets.CommonLayoutParams)) {
lp = new org.nativescript.widgets.CommonLayoutParams();
}
@@ -21,26 +20,26 @@ function setNativeProperty(data: dependencyObservable.PropertyChangeData, setter
}
}
function setNativeRowProperty(data: dependencyObservable.PropertyChangeData) {
function setNativeRowProperty(data: PropertyChangeData) {
setNativeProperty(data, (lp) => { lp.row = data.newValue; });
}
function setNativeRowSpanProperty(data: dependencyObservable.PropertyChangeData) {
function setNativeRowSpanProperty(data: PropertyChangeData) {
setNativeProperty(data, (lp) => { lp.rowSpan = data.newValue; });
}
function setNativeColumnProperty(data: dependencyObservable.PropertyChangeData) {
function setNativeColumnProperty(data: PropertyChangeData) {
setNativeProperty(data, (lp) => { lp.column = data.newValue; });
}
function setNativeColumnSpanProperty(data: dependencyObservable.PropertyChangeData) {
function setNativeColumnSpanProperty(data: PropertyChangeData) {
setNativeProperty(data, (lp) => { lp.columnSpan = data.newValue; });
}
(<proxy.PropertyMetadata>common.GridLayout.rowProperty.metadata).onSetNativeValue = setNativeRowProperty;
(<proxy.PropertyMetadata>common.GridLayout.rowSpanProperty.metadata).onSetNativeValue = setNativeRowSpanProperty;
(<proxy.PropertyMetadata>common.GridLayout.columnProperty.metadata).onSetNativeValue = setNativeColumnProperty;
(<proxy.PropertyMetadata>common.GridLayout.columnSpanProperty.metadata).onSetNativeValue = setNativeColumnSpanProperty;
(<PropertyMetadata>common.GridLayout.rowProperty.metadata).onSetNativeValue = setNativeRowProperty;
(<PropertyMetadata>common.GridLayout.rowSpanProperty.metadata).onSetNativeValue = setNativeRowSpanProperty;
(<PropertyMetadata>common.GridLayout.columnProperty.metadata).onSetNativeValue = setNativeColumnProperty;
(<PropertyMetadata>common.GridLayout.columnSpanProperty.metadata).onSetNativeValue = setNativeColumnSpanProperty;
function createNativeSpec(itemSpec: ItemSpec): org.nativescript.widgets.ItemSpec {
switch (itemSpec.gridUnitType) {
@@ -119,4 +118,8 @@ export class GridLayout extends common.GridLayout {
this._layout.removeColumnAt(index);
}
}
}
protected invalidate(): void {
// No need to request layout for android because it will be done in the native call.
}
}

42
ui/layouts/grid-layout/grid-layout.d.ts vendored
View File

@@ -1,6 +1,7 @@
declare module "ui/layouts/grid-layout" {
import layout = require("ui/layouts/layout-base");
import view = require("ui/core/view");
import {LayoutBase} from "ui/layouts/layout-base";
import {View} from "ui/core/view";
import {Property} from "ui/core/dependency-observable";
/**
* GridUnitType enum is used to indicate what kind of value the ItemSpec is holding.
@@ -68,7 +69,7 @@
/**
* Defines a rectangular layout area that consists of columns and rows.
*/
export class GridLayout extends layout.LayoutBase {
export class GridLayout extends LayoutBase {
///**
// * Initializes a new instance of GridLayout.
@@ -76,45 +77,64 @@
// */
//constructor(options?: Options);
/**
* Represents the observable property backing the column property.
*/
public static columnProperty: Property;
/**
* Represents the observable property backing the columnSpan property.
*/
public static columnSpanProperty: Property;
/**
* Represents the observable property backing the row property.
*/
public static rowProperty: Property;
/**
* Represents the observable property backing the rowSpan property.
*/
public static rowSpanProperty: Property;
/**
* Gets the value of the Column attached property from a given View.
*/
static getColumn(view: view.View): number;
static getColumn(view: View): number;
/**
* Sets the value of the Column attached property to a given View.
*/
static setColumn(view: view.View, value: number): void;
static setColumn(view: View, value: number): void;
/**
* Gets the value of the ColumnSpan attached property from a given View.
*/
static getColumnSpan(view: view.View): number;
static getColumnSpan(view: View): number;
/**
* Sets the value of the ColumnSpan attached property to a given View.
*/
static setColumnSpan(view: view.View, value: number): void;
static setColumnSpan(view: View, value: number): void;
/**
* Gets the value of the Row attached property from a given View.
*/
static getRow(view: view.View): number;
static getRow(view: View): number;
/**
* Sets the value of the Row attached property to a given View.
*/
static setRow(view: view.View, value: number): void;
static setRow(view: View, value: number): void;
/**
* Gets the value of the RowSpan attached property from a given View.
*/
static getRowSpan(view: view.View): number;
static getRowSpan(view: View): number;
/**
* Sets the value of the RowSpan attached property to a given View.
*/
static setRowSpan(view: view.View, value: number): void;
static setRowSpan(view: View, value: number): void;
/**
* Adds a column specification to a GridLayout.

35
ui/layouts/grid-layout/grid-layout.ios.ts
View File

@@ -1,8 +1,8 @@
import utils = require("utils/utils");
import {HorizontalAlignment, VerticalAlignment} from "ui/enums";
import {View} from "ui/core/view";
import common = require("./grid-layout-common");
import {View} from "ui/core/view";
import {CommonLayoutParams} from "ui/styling/style";
import {HorizontalAlignment, VerticalAlignment} from "ui/enums";
global.moduleMerge(common, exports);
@@ -19,44 +19,20 @@ export class GridLayout extends common.GridLayout {
protected onRowAdded(itemSpec: common.ItemSpec) {
this.helper.rows.push(new ItemGroup(itemSpec));
this.invalidate();
}
protected onColumnAdded(itemSpec: common.ItemSpec) {
this.helper.columns.push(new ItemGroup(itemSpec));
this.invalidate();
}
protected onRowRemoved(itemSpec: common.ItemSpec, index: number) {
this.helper.rows[index].children.length = 0;
this.helper.rows.splice(index, 1);
this.invalidate();
}
protected onColumnRemoved(itemSpec: common.ItemSpec, index: number) {
this.helper.columns[index].children.length = 0;
this.helper.columns.splice(index, 1);
this.invalidate();
}
protected onRowChanged(element: View, oldValue: number, newValue: number) {
this.invalidate();
}
protected onRowSpanChanged(element: View, oldValue: number, newValue: number) {
this.invalidate();
}
protected onColumnChanged(element: View, oldValue: number, newValue: number) {
this.invalidate();
}
protected onColumnSpanChanged(element: View, oldValue: number, newValue: number) {
this.invalidate();
}
protected invalidate(): void {
this.requestLayout();
}
public addChild(child: View): void {
@@ -281,8 +257,8 @@ class MeasureSpecs {
public child: View;
private column: common.ItemSpec;
private row: common.ItemSpec
private columnIndex: number;
private rowIndex: number;
private columnIndex: number = 0;
private rowIndex: number = 0;
constructor(child: View) {
this.child = child;
@@ -702,8 +678,7 @@ class MeasureHelper {
return result;
}
public measure(): void {
public measure(): void {
// Measure auto & pixel columns and rows (no spans).
let size = this.columns.length;
for (let i = 0; i < size; i++) {

21
ui/layouts/stack-layout/stack-layout-common.ts
View File

@@ -1,21 +1,20 @@
import layouts = require("ui/layouts/layout-base");
import definition = require("ui/layouts/stack-layout");
import dependencyObservable = require("ui/core/dependency-observable");
import enums = require("ui/enums");
import proxy = require("ui/core/proxy");
import definition = require("ui/layouts/stack-layout");
import platform = require("platform");
import {LayoutBase} from "ui/layouts/layout-base";
import {View} from "ui/core/view";
import {Orientation} from "ui/enums";
import {PropertyMetadata} from "ui/core/proxy";
import {Property, PropertyMetadataSettings} from "ui/core/dependency-observable";
// on Android we explicitly set propertySettings to None because android will invalidate its layout (skip unnecessary native call).
var AffectsLayout = platform.device.os === platform.platformNames.android ? dependencyObservable.PropertyMetadataSettings.None : dependencyObservable.PropertyMetadataSettings.AffectsLayout;
var AffectsLayout = platform.device.os === platform.platformNames.android ? PropertyMetadataSettings.None : PropertyMetadataSettings.AffectsLayout;
function validateOrientation(value: any): boolean {
return value === enums.Orientation.vertical || value === enums.Orientation.horizontal;
return value === Orientation.vertical || value === Orientation.horizontal;
}
export class StackLayout extends layouts.LayoutBase implements definition.StackLayout {
public static orientationProperty = new dependencyObservable.Property("orientation","StackLayout",
new proxy.PropertyMetadata(enums.Orientation.vertical, AffectsLayout, undefined, validateOrientation));
export class StackLayout extends LayoutBase implements definition.StackLayout {
public static orientationProperty = new Property("orientation", "StackLayout", new PropertyMetadata(Orientation.vertical, AffectsLayout, undefined, validateOrientation));
get orientation(): string {
return this._getValue(StackLayout.orientationProperty);

27
ui/layouts/stack-layout/stack-layout.android.ts
View File

@@ -1,18 +1,19 @@
import dependencyObservable = require("ui/core/dependency-observable");
import proxy = require("ui/core/proxy");
import common = require("./stack-layout-common");
import enums = require("ui/enums");
import common = require("./stack-layout-common");
import {Orientation} from "ui/enums";
import {PropertyMetadata} from "ui/core/proxy";
import {PropertyChangeData} from "ui/core/dependency-observable";
global.moduleMerge(common, exports);
function setNativeOrientationProperty(data: PropertyChangeData): void {
var stackLayout = <StackLayout>data.object;
var nativeView = stackLayout._nativeView;
nativeView.setOrientation(data.newValue === Orientation.vertical ? org.nativescript.widgets.Orientation.vertical : org.nativescript.widgets.Orientation.horizontal);
}
(<PropertyMetadata>common.StackLayout.orientationProperty.metadata).onSetNativeValue = setNativeOrientationProperty;
export class StackLayout extends common.StackLayout {
static setNativeOrientationProperty(data: dependencyObservable.PropertyChangeData): void {
var stackLayout = <StackLayout>data.object;
var nativeView = stackLayout._nativeView;
nativeView.setOrientation(data.newValue === enums.Orientation.vertical ? org.nativescript.widgets.Orientation.vertical : org.nativescript.widgets.Orientation.horizontal);
}
private _layout: org.nativescript.widgets.StackLayout;
get android(): org.nativescript.widgets.StackLayout {
@@ -26,6 +27,4 @@ export class StackLayout extends common.StackLayout {
public _createUI() {
this._layout = new org.nativescript.widgets.StackLayout(this._context);
}
}
(<proxy.PropertyMetadata>common.StackLayout.orientationProperty.metadata).onSetNativeValue = StackLayout.setNativeOrientationProperty;
}

9
ui/layouts/stack-layout/stack-layout.d.ts vendored
View File

@@ -1,16 +1,15 @@
declare module "ui/layouts/stack-layout" {
import layout = require("ui/layouts/layout-base");
import dependencyObservable = require("ui/core/dependency-observable");
import {LayoutBase} from "ui/layouts/layout-base";
import {Property} from "ui/core/dependency-observable";
/**
* A Layout that arranges its children horizontally or vertically. The direction can be set by orientation property.
*/
class StackLayout extends layout.LayoutBase {
class StackLayout extends LayoutBase {
/**
* Represents the observable property backing the orientation property of each StackLayout instance.
*/
public static orientationProperty: dependencyObservable.Property;
public static orientationProperty: Property;
/**
* Gets or sets if layout should be horizontal or vertical.

9
ui/layouts/stack-layout/stack-layout.ios.ts
View File

@@ -1,13 +1,12 @@
import utils = require("utils/utils");
import {Orientation, VerticalAlignment, HorizontalAlignment} from "ui/enums";
import common = require("./stack-layout-common");
import utils = require("utils/utils");
import {View} from "ui/core/view";
import common = require("./stack-layout-common");
import {Orientation, VerticalAlignment, HorizontalAlignment} from "ui/enums";
import {CommonLayoutParams, nativeLayoutParamsProperty} from "ui/styling/style";
global.moduleMerge(common, exports);
export class StackLayout extends common.StackLayout {
private _totalLength = 0;
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
@@ -104,7 +103,6 @@ export class StackLayout extends common.StackLayout {
}
private layoutVertical(left: number, top: number, right: number, bottom: number): void {
var density = utils.layout.getDisplayDensity();
var paddingLeft = this.paddingLeft * density;
var paddingRight = this.paddingRight * density;
@@ -146,7 +144,6 @@ export class StackLayout extends common.StackLayout {
}
private layoutHorizontal(left: number, top: number, right: number, bottom: number): void {
var density = utils.layout.getDisplayDensity();
var paddingLeft = this.paddingLeft * density;
var paddingRight = this.paddingRight * density;

29
ui/layouts/wrap-layout/wrap-layout-common.ts
View File

@@ -1,31 +1,26 @@
import layouts = require("ui/layouts/layout-base");
import definition = require("ui/layouts/wrap-layout");
import dependencyObservable = require("ui/core/dependency-observable");
import enums = require("ui/enums");
import proxy = require("ui/core/proxy");
import definition = require("ui/layouts/wrap-layout");
import platform = require("platform");
import {LayoutBase} from "ui/layouts/layout-base";
import {View} from "ui/core/view";
import {Orientation} from "ui/enums";
import {PropertyMetadata} from "ui/core/proxy";
import {Property, PropertyMetadataSettings} from "ui/core/dependency-observable";
// on Android we explicitly set propertySettings to None because android will invalidate its layout (so we skip unnecessary native call).
var AffectsLayout = platform.device.os === platform.platformNames.android ? dependencyObservable.PropertyMetadataSettings.None : dependencyObservable.PropertyMetadataSettings.AffectsLayout;
var AffectsLayout = platform.device.os === platform.platformNames.android ? PropertyMetadataSettings.None : PropertyMetadataSettings.AffectsLayout;
function isWidthHeightValid(value: any): boolean {
return (value >= 0.0 && value !== Number.POSITIVE_INFINITY);
}
function isValidOrientation(value: any): boolean {
return value === enums.Orientation.vertical || value === enums.Orientation.horizontal;
return value === Orientation.vertical || value === Orientation.horizontal;
}
export class WrapLayout extends layouts.LayoutBase implements definition.WrapLayout {
public static orientationProperty = new dependencyObservable.Property("orientation", "WrapLayout",
new proxy.PropertyMetadata(enums.Orientation.horizontal, AffectsLayout, undefined, isValidOrientation));
public static itemWidthProperty = new dependencyObservable.Property("itemWidth", "WrapLayout",
new proxy.PropertyMetadata(0, AffectsLayout, undefined, isWidthHeightValid));
public static itemHeightProperty = new dependencyObservable.Property("itemHeight", "WrapLayout",
new proxy.PropertyMetadata(0, AffectsLayout, undefined, isWidthHeightValid));
export class WrapLayout extends LayoutBase implements definition.WrapLayout {
public static orientationProperty = new Property("orientation", "WrapLayout", new PropertyMetadata(Orientation.horizontal, AffectsLayout, undefined, isValidOrientation));
public static itemWidthProperty = new Property("itemWidth", "WrapLayout", new PropertyMetadata(0, AffectsLayout, undefined, isWidthHeightValid));
public static itemHeightProperty = new Property("itemHeight", "WrapLayout", new PropertyMetadata(0, AffectsLayout, undefined, isWidthHeightValid));
get orientation(): string {
return this._getValue(WrapLayout.orientationProperty);

55
ui/layouts/wrap-layout/wrap-layout.android.ts
View File

@@ -1,31 +1,34 @@
import dependencyObservable = require("ui/core/dependency-observable");
import proxy = require("ui/core/proxy");
import utils = require("utils/utils");
import common = require("./wrap-layout-common");
import enums = require("ui/enums");
import utils = require("utils/utils");
import {Orientation} from "ui/enums";
import {PropertyMetadata} from "ui/core/proxy";
import {PropertyChangeData} from "ui/core/dependency-observable";
global.moduleMerge(common, exports);
function setNativeOrientationProperty(data: PropertyChangeData): void {
var wrapLayout = <WrapLayout>data.object;
var nativeView = wrapLayout._nativeView;
nativeView.setOrientation(data.newValue === Orientation.vertical ? org.nativescript.widgets.Orientation.vertical : org.nativescript.widgets.Orientation.horizontal);
}
function setNativeItemWidthProperty(data: PropertyChangeData): void {
var wrapLayout = <WrapLayout>data.object;
var nativeView = wrapLayout._nativeView;
nativeView.setItemWidth(data.newValue * utils.layout.getDisplayDensity());
}
function setNativeItemHeightProperty(data: PropertyChangeData): void {
var wrapLayout = <WrapLayout>data.object;
var nativeView = wrapLayout._nativeView;
nativeView.setItemHeight(data.newValue * utils.layout.getDisplayDensity());
}
(<PropertyMetadata>common.WrapLayout.orientationProperty.metadata).onSetNativeValue = setNativeOrientationProperty;
(<PropertyMetadata>common.WrapLayout.itemWidthProperty.metadata).onSetNativeValue = setNativeItemWidthProperty;
(<PropertyMetadata>common.WrapLayout.itemHeightProperty.metadata).onSetNativeValue = setNativeItemHeightProperty;
export class WrapLayout extends common.WrapLayout {
static setNativeOrientationProperty(data: dependencyObservable.PropertyChangeData): void {
var wrapLayout = <WrapLayout>data.object;
var nativeView = wrapLayout._nativeView;
nativeView.setOrientation(data.newValue === enums.Orientation.vertical ? org.nativescript.widgets.Orientation.vertical : org.nativescript.widgets.Orientation.horizontal);
}
static setNativeItemWidthProperty(data: dependencyObservable.PropertyChangeData): void {
var wrapLayout = <WrapLayout>data.object;
var nativeView = wrapLayout._nativeView;
nativeView.setItemWidth(data.newValue * utils.layout.getDisplayDensity());
}
static setNativeItemHeightProperty(data: dependencyObservable.PropertyChangeData): void {
var wrapLayout = <WrapLayout>data.object;
var nativeView = wrapLayout._nativeView;
nativeView.setItemHeight(data.newValue * utils.layout.getDisplayDensity());
}
private _layout: org.nativescript.widgets.WrapLayout;
get android(): org.nativescript.widgets.WrapLayout {
@@ -39,8 +42,4 @@ export class WrapLayout extends common.WrapLayout {
public _createUI() {
this._layout = new org.nativescript.widgets.WrapLayout(this._context);
}
}
(<proxy.PropertyMetadata>common.WrapLayout.orientationProperty.metadata).onSetNativeValue = WrapLayout.setNativeOrientationProperty;
(<proxy.PropertyMetadata>common.WrapLayout.itemWidthProperty.metadata).onSetNativeValue = WrapLayout.setNativeItemWidthProperty;
(<proxy.PropertyMetadata>common.WrapLayout.itemHeightProperty.metadata).onSetNativeValue = WrapLayout.setNativeItemHeightProperty;
}

12
ui/layouts/wrap-layout/wrap-layout.d.ts vendored
View File

@@ -1,27 +1,27 @@
declare module "ui/layouts/wrap-layout" {
import layout = require("ui/layouts/layout-base");
import dependencyObservable = require("ui/core/dependency-observable");
import {LayoutBase} from "ui/layouts/layout-base";
import {Property} from "ui/core/dependency-observable";
/**
* WrapLayout position children in rows or columns depending on orientation property
* until space is filled and then wraps them on new row or column.
*/
class WrapLayout extends layout.LayoutBase {
class WrapLayout extends LayoutBase {
/**
* Represents the observable property backing the orientation property of each WrapLayout instance.
*/
public static orientationProperty: dependencyObservable.Property;
public static orientationProperty: Property;
/**
* Represents the observable property backing the itemWidth property of each WrapLayout instance.
*/
public static itemWidthProperty: dependencyObservable.Property;
public static itemWidthProperty: Property;
/**
* Represents the observable property backing the itemHeight property of each WrapLayout instance.
*/
public static itemHeightProperty: dependencyObservable.Property;
public static itemHeightProperty: Property;
/**
* Gets or sets the flow direction. Default value is horizontal.

1
ui/layouts/wrap-layout/wrap-layout.ios.ts
View File

@@ -7,7 +7,6 @@ import {CommonLayoutParams, nativeLayoutParamsProperty} from "ui/styling/style";
global.moduleMerge(common, exports);
export class WrapLayout extends common.WrapLayout {
private _lengths: Array<number> = new Array<number>();
private static getChildMeasureSpec(parentMode: number, parentLength: number, itemLength): number {