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

Add percent layouts test pages.

Browse Source
This commit is contained in:
Vasil Chimev
2016-01-07 17:29:07 +02:00
parent e4b670a5c2
commit 9c21f98142
14 changed files with 407 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
CrossPlatformModules.csproj
View File

@ -211,6 +211,21 @@
<Content Include="apps\ui-tests-app\html-view\html-view.xml">
<SubType>Designer</SubType>
</Content>
<Content Include="apps\ui-tests-app\layouts-percent\absolute.xml">
<SubType>Designer</SubType>
</Content>
<Content Include="apps\ui-tests-app\layouts-percent\dock.xml">
<SubType>Designer</SubType>
</Content>
<Content Include="apps\ui-tests-app\layouts-percent\grid.xml">
<SubType>Designer</SubType>
</Content>
<Content Include="apps\ui-tests-app\layouts-percent\stack.xml">
<SubType>Designer</SubType>
</Content>
<Content Include="apps\ui-tests-app\layouts-percent\wrap.xml">
<SubType>Designer</SubType>
</Content>
<Content Include="apps\ui-tests-app\segmented-bar\all.xml">
<SubType>Designer</SubType>
</Content>
@ -265,6 +280,22 @@
<TypeScriptCompile Include="apps\ui-tests-app\html-view\html-view.ts">
<DependentUpon>html-view.xml</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="apps\ui-tests-app\layouts-percent\absolute.ts">
<DependentUpon>absolute.xml</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="apps\ui-tests-app\layouts-percent\dock.ts">
<DependentUpon>dock.xml</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="apps\ui-tests-app\layouts-percent\grid.ts">
<DependentUpon>grid.xml</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="apps\ui-tests-app\layouts-percent\myview.ts" />
<TypeScriptCompile Include="apps\ui-tests-app\layouts-percent\stack.ts">
<DependentUpon>stack.xml</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="apps\ui-tests-app\layouts-percent\wrap.ts">
<DependentUpon>wrap.xml</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="apps\ui-tests-app\modal-view\login-page.ts">
<DependentUpon>login-page.xml</DependentUpon>
</TypeScriptCompile>

22
apps/ui-tests-app/layouts-percent/absolute.ts Normal file
View File

@ -0,0 +1,22 @@
import pageModule = require("ui/page");
import absoluteLayout = require("ui/layouts/absolute-layout");
import model = require("./myview");
var count = 0;
export function onLoaded(args: { eventName: string, object: any }) {
var page = <pageModule.Page>args.object;
page.bindingContext = new model.ViewModel();
}
export function onSetLeftSetTop(args: { eventName: string, object: any }) {
var layout = args.object.parent;
var child = layout.getViewById("setLeftSetTop");
if (++count % 2 === 1) {
absoluteLayout.AbsoluteLayout.setLeft(child, 175);
absoluteLayout.AbsoluteLayout.setTop(child, 375);
} else {
absoluteLayout.AbsoluteLayout.setLeft(child, 0);
absoluteLayout.AbsoluteLayout.setTop(child, 400);
}
}

15
apps/ui-tests-app/layouts-percent/absolute.xml Normal file
View File

@ -0,0 +1,15 @@
<Page loaded="onLoaded">
<AbsoluteLayout>
<!-- View Properties -->
<Button text="wh" tap="{{ onWidthHeight }}" id="widthHeight" style="background-color: lightpink;" width="75%" height="75%" />
<Button text="n" tap="{{ onMinWidthMinHeight }}" left="150" id="minWidthMinHeight" style="background-color: lightblue;" />
<Button text="m" tap="{{ onMargins }}" top="100" id="margins" style="background-color: lightsalmon;" width="40%" height="25%" />
<Button text="a" tap="{{ onAlignments }}" left="150" top="100" id="alignments" style="background-color: lightblue;" />
<Button text="c" tap="{{ onCollapse }}" top="200" id="collapse" style="background-color: lightblue;" />
<Button text="v" tap="{{ onVisibile }}" left="150" top="200" id="visible" style="background-color: lightblue;" />
<!-- Layout Properties -->
<Button text="p" tap="{{ onPaddings }}" top="300" id="paddings" style="background-color: lightgray;" />
<Button text="all" tap="{{ onAllProperties }}" left="150" top="300" id="allProperties" style="background-color: aquamarine;" />
<Button text="s" tap="onSetLeftSetTop" top="400" id="setLeftSetTop" style="background-color: lightgreen;" />
</AbsoluteLayout>
</Page>

16
apps/ui-tests-app/layouts-percent/dock.ts Normal file
View File

@ -0,0 +1,16 @@
import pageModule = require("ui/page");
import model = require("./myview");
export function onLoaded(args: { eventName: string, object: any }) {
var page = <pageModule.Page>args.object;
page.bindingContext = new model.ViewModel();
}
export function onStretchLastChild(args: { eventName: string, object: any }) {
var layout = args.object.parent;
if(layout.stretchLastChild === true) {
layout.stretchLastChild = false;
} else {
layout.stretchLastChild = true;
}
}

15
apps/ui-tests-app/layouts-percent/dock.xml Normal file
View File

@ -0,0 +1,15 @@
<Page loaded="onLoaded">
<DockLayout>
<!-- View Properties -->
<Button text="wh" tap="{{ onWidthHeight }}" id="widthHeight" style="background-color: lightpink;" width="15%" height="75%" />
<Button text="n" tap="{{ onMinWidthMinHeight }}" dock="right" id="minWidthMinHeight" style="background-color: lightblue;" />
<Button text="m" tap="{{ onMargins }}" dock="top" id="margins" style="background-color: lightsalmon;" />
<Button text="a" tap="{{ onAlignments }}" dock="top" id="alignments" style="background-color: lightblue;" />
<Button text="c" tap="{{ onCollapse }}" dock="bottom" id="collapse" style="background-color: lightblue;" />
<Button text="v" tap="{{ onVisibile }}" dock="bottom" id="visible" style="background-color: lightblue;" />
<!-- Layout Properties -->
<Button text="p" tap="{{ onPaddings }}" dock="top" id="paddings" style="background-color: lightgray;" />
<Button text="all" tap="{{ onAllProperties }}" dock="top" id="allProperties" style="background-color: aquamarine;" />
<Button text="tr" tap="onStretchLastChild" id="stretchLastChild" style="background-color: lightgreen;" />
</DockLayout>
</Page>

43
apps/ui-tests-app/layouts-percent/grid.ts Normal file
View File

@ -0,0 +1,43 @@
import buttonModule = require("ui/button");
import pageModule = require("ui/page");
import gridLayoutModule = require("ui/layouts/grid-layout");
import model = require("./myview");
export function onLoaded(args: { eventName: string, object: any }) {
var page = <pageModule.Page>args.object;
page.bindingContext = new model.ViewModel();
}
export function onAddRowColumn(args: { eventName: string, object: any }) {
var layout = <gridLayoutModule.GridLayout>args.object.parent.parent;
var row = new gridLayoutModule.ItemSpec(1, gridLayoutModule.GridUnitType.auto);
var column = new gridLayoutModule.ItemSpec(1, gridLayoutModule.GridUnitType.auto);
layout.addRow(row);
layout.addColumn(column);
var btn0 = new buttonModule.Button();
var btn1 = new buttonModule.Button();
btn0.id = "b0";
btn1.id = "b1";
btn0.text = "b0";
btn1.text = "b1";
layout.addChild(btn0);
layout.addChild(btn1);
gridLayoutModule.GridLayout.setRow(btn0, 0);
gridLayoutModule.GridLayout.setColumn(btn0, 4);
gridLayoutModule.GridLayout.setRow(btn1, 4);
gridLayoutModule.GridLayout.setColumn(btn1, 0);
gridLayoutModule.GridLayout.setColumnSpan(btn1, 2);
gridLayoutModule.GridLayout.setRowSpan(btn0, 3);
}
export function onRemoveRowColumn(args: { eventName: string, object: any }) {
var layout = <gridLayoutModule.GridLayout>args.object.parent.parent;
var itemSpecs, count;
itemSpecs = layout.getRows();
count = itemSpecs.length;
layout.removeRow(itemSpecs[count - 1]);
itemSpecs = layout.getColumns();
count = itemSpecs.length;
layout.removeColumn(itemSpecs[count - 1]);
}

18
apps/ui-tests-app/layouts-percent/grid.xml Normal file
View File

@ -0,0 +1,18 @@
<Page loaded="onLoaded">
<GridLayout rows="auto, 50, auto, 50" columns="auto, 50, auto, 50">
<!-- View Properties -->
<Button text="wh" tap="{{ onWidthHeight }}" id="widthHeight" style="background-color: lightpink;" width="25%" height="25%" />
<Button text="n" tap="{{ onMinWidthMinHeight }}" col="1" id="minWidthMinHeight" style="background-color: lightblue;" />
<Button text="m" tap="{{ onMargins }}" col="2" id="margins" style="background-color: lightsalmon;" />
<Button text="a" tap="{{ onAlignments }}" row="1" id="alignments" style="background-color: lightblue;" />
<Button text="c" tap="{{ onCollapse }}" row="1" col="1" id="collapse" style="background-color: lightblue;" />
<Button text="v" tap="{{ onVisibile }}" row="1" col="2" id="visible" style="background-color: lightblue;" />
<!-- Layout Properties -->
<Button text="p" tap="{{ onPaddings }}" row="2" id="paddings" style="background-color: lightgray;" />
<Button text="all" tap="{{ onAllProperties }}" row="2" col="1" id="allProperties" style="background-color: aquamarine;" />
<StackLayout row="2" col="2" width="25%" height="25%">
<Button text="1" tap="onAddRowColumn" id="addRowColumn" style="background-color: lightgreen;" width="50%" height="50%" horizontalAlignment="left" />
<Button text="0" tap="onRemoveRowColumn" id="removeRowColumn" style="background-color: lightgreen;" width="50%" height="50%" horizontalAlignment="right" />
</StackLayout>
</GridLayout>
</Page>

167
apps/ui-tests-app/layouts-percent/myview.ts Normal file
View File

@ -0,0 +1,167 @@
import observable = require("data/observable");
import enums = require("ui/enums");
import view = require("ui/core/view");
import layouts = require("ui/layouts/layout-base");
export class ViewModel extends observable.Observable {
// View properties
public onWidthHeight(args: { eventName: string, object: any }): void {
var view: view.View = <view.View>args.object;
if ((<any>view).width !== "50%") {
(<any>view).width = "50%";
(<any>view).height = "50%";
} else {
(<any>view).width = "75%";
(<any>view).height = "75%";
}
}
public onMinWidthMinHeight(args: { eventName: string, object: any }): void {
var view: view.View = <view.View>args.object;
if (view.minWidth !== 105) {
view.minWidth = 105;
view.minHeight = 55;
} else {
view.minWidth = 0;
view.minHeight = 0;
}
}
public onMargins(args: { eventName: string, object: any }): void {
var view: view.View = <view.View>args.object;
if ((<any>view).marginLeft !== "10%") {
(<any>view).marginLeft = "10%";
(<any>view).marginTop = "10%";
(<any>view).marginRight = "10%";
(<any>view).marginBottom = "10%";
} else {
view.marginLeft = 0;
view.marginTop = 0;
view.marginRight = 0;
view.marginBottom = 0;
}
}
public onAlignments(args: { eventName: string, object: any }): void {
var view: view.View = <view.View>args.object;
if (view.horizontalAlignment === enums.HorizontalAlignment.stretch) {
view.horizontalAlignment = enums.HorizontalAlignment.left;
view.verticalAlignment = enums.VerticalAlignment.top;
} else if (view.horizontalAlignment === enums.HorizontalAlignment.left) {
view.horizontalAlignment = enums.HorizontalAlignment.center;
view.verticalAlignment = enums.VerticalAlignment.center;
} else if (view.horizontalAlignment === enums.HorizontalAlignment.center) {
view.horizontalAlignment = enums.HorizontalAlignment.right;
view.verticalAlignment = enums.VerticalAlignment.bottom;
} else {
view.horizontalAlignment = enums.HorizontalAlignment.stretch;
view.verticalAlignment = enums.VerticalAlignment.stretch;
}
}
public onCollapse(args: { eventName: string, object: any }): void {
var view: view.View = <view.View>args.object;
view.visibility = enums.Visibility.collapse;
}
public onVisibile(args: { eventName: string, object: any }): void {
var view: view.View = <view.View>args.object;
var layout = <layouts.LayoutBase>view.parent;
var child = layout.getViewById("collapse");
child.visibility = enums.Visibility.visible;
}
// Layout properties
public onPaddings(args: { eventName: string, object: any }): void {
var layout = args.object.parent;
if (layout.paddingLeft !== 5) {
layout.paddingLeft = 5;
layout.paddingTop = 5;
layout.paddingRight = 5;
layout.paddingBottom = 5;
} else {
layout.paddingLeft = 0;
layout.paddingTop = 0;
layout.paddingRight = 0;
layout.paddingBottom = 0;
}
}
public onAllProperties(args: { eventName: string, object: any }): void {
var child;
var layout = args.object.parent;
// WidthHeight
child = layout.getViewById("widthHeight");
if ((<any>child).width !== "50%") {
(<any>child).width = "50%";
(<any>child).height = "50%";
} else {
(<any>child).width = "75%";
(<any>child).height = "75%";
}
// MinWidthMinHeight
child = layout.getViewById("minWidthMinHeight");
if (child.minWidth !== 105) {
child.minWidth = 105;
child.minHeight = 55;
} else {
child.minWidth = 0;
child.minHeight = 0;
}
// Margins
child = layout.getViewById("margins");
if ((<any>child).marginLeft !== "10%") {
(<any>child).marginLeft = "10%";
(<any>child).marginTop = "10%";
(<any>child).marginRight = "10%";
(<any>child).marginBottom = "10%";
} else {
child.marginLeft = 0;
child.marginTop = 0;
child.marginRight = 0;
child.marginBottom = 0;
}
// Alignments
child = layout.getViewById("alignments");
if (child.horizontalAlignment === enums.HorizontalAlignment.stretch) {
child.horizontalAlignment = enums.HorizontalAlignment.left;
child.verticalAlignment = enums.VerticalAlignment.top;
} else if (child.horizontalAlignment === enums.HorizontalAlignment.left) {
child.horizontalAlignment = enums.HorizontalAlignment.center;
child.verticalAlignment = enums.VerticalAlignment.center;
} else if (child.horizontalAlignment === enums.HorizontalAlignment.center) {
child.horizontalAlignment = enums.HorizontalAlignment.right;
child.verticalAlignment = enums.VerticalAlignment.bottom;
} else {
child.horizontalAlignment = enums.HorizontalAlignment.stretch;
child.verticalAlignment = enums.VerticalAlignment.stretch;
}
// Collapse
child = layout.getViewById("collapse");
if (child.visibility === enums.Visibility.visible) {
child.visibility = enums.Visibility.collapse;
} else {
child.visibility = enums.Visibility.visible;
}
// Paddings
if (layout.paddingLeft !== 5) {
layout.paddingLeft = 5;
layout.paddingTop = 5;
layout.paddingRight = 5;
layout.paddingBottom = 5;
} else {
layout.paddingLeft = 0;
layout.paddingTop = 0;
layout.paddingRight = 0;
layout.paddingBottom = 0;
}
}
}

17
apps/ui-tests-app/layouts-percent/stack.ts Normal file
View File

@ -0,0 +1,17 @@
import enums = require("ui/enums");
import pageModule = require("ui/page");
import model = require("./myview");
export function onLoaded(args: { eventName: string, object: any }) {
var page = <pageModule.Page>args.object;
page.bindingContext = new model.ViewModel();
}
export function onOrientation(args: { eventName: string, object: any }) {
var layout = args.object.parent;
if(layout.orientation === enums.Orientation.vertical) {
layout.orientation = enums.Orientation.horizontal;
} else {
layout.orientation = enums.Orientation.vertical;
}
}

15
apps/ui-tests-app/layouts-percent/stack.xml Normal file
View File

@ -0,0 +1,15 @@
<Page loaded="onLoaded">
<StackLayout>
<!-- View Properties -->
<Button text="wh" tap="{{ onWidthHeight }}" id="widthHeight" style="background-color: lightpink;" width="90%" height="10%" />
<Button text="n" tap="{{ onMinWidthMinHeight }}" id="minWidthMinHeight" style="background-color: lightblue;" width="80%" height="10%" />
<Button text="m" tap="{{ onMargins }}" id="margins" style="background-color: lightsalmon;" width="70%" height="10%" />
<Button text="a" tap="{{ onAlignments }}" id="alignments" style="background-color: lightblue;" width="60%" height="10%" />
<Button text="c" tap="{{ onCollapse }}" id="collapse" style="background-color: lightblue;" width="50%" height="10%" />
<Button text="v" tap="{{ onVisibile }}" id="visible" style="background-color: lightblue;" width="40%" height="10%" />
<!-- Layout Properties -->
<Button text="p" tap="{{ onPaddings }}" id="paddings" style="background-color: lightgray;" width="30%" height="10%"/>
<Button text="all" tap="{{ onAllProperties }}" id="allProperties" style="background-color: aquamarine;" width="20%" height="10%" />
<Button text="o" tap="onOrientation" id="orientation" style="background-color: lightgreen;" width="10%" height="10%" />
</StackLayout>
</Page>

23
apps/ui-tests-app/layouts-percent/wrap.ts Normal file
View File

@ -0,0 +1,23 @@
import enums = require("ui/enums");
import pageModule = require("ui/page");
import model = require("./myview");
export function onLoaded(args: { eventName: string, object: any }) {
var page = <pageModule.Page>args.object;
page.bindingContext = new model.ViewModel();
}
export function onOrientation(args: { eventName: string, object: any }) {
var layout = args.object.parent;
if (layout.orientation === enums.Orientation.vertical) {
layout.orientation = enums.Orientation.horizontal;
} else {
layout.orientation = enums.Orientation.vertical;
}
}
export function onItemWidthItemHeight(args: { eventName: string, object: any }) {
var layout = args.object.parent;
layout.itemWidth = 100;
layout.itemHeight = 100;
}

16
apps/ui-tests-app/layouts-percent/wrap.xml Normal file
View File

@ -0,0 +1,16 @@
<Page loaded="onLoaded">
<WrapLayout>
<!-- View Properties -->
<Button text="wh" tap="{{ onWidthHeight }}" id="widthHeight" style="background-color: lightpink;" width="20%" height="10%" />
<Button text="n" tap="{{ onMinWidthMinHeight }}" id="minWidthMinHeight" style="background-color: lightblue;" />
<Button text="m" tap="{{ onMargins }}" id="margins" style="background-color: lightsalmon;" />
<Button text="a" tap="{{ onAlignments }}" id="alignments" style="background-color: lightblue;" width="20%" height="10%" />
<Button text="c" tap="{{ onCollapse }}" id="collapse" style="background-color: lightblue;" width="20%" height="10%" />
<Button text="v" tap="{{ onVisibile }}" id="visible" style="background-color: lightblue;" width="20%" height="10%" />
<!-- Layout Properties -->
<Button text="p" tap="{{ onPaddings }}" id="paddings" style="background-color: lightgray;" width="20%" height="10%" />
<Button text="all" tap="{{ onAllProperties }}" id="allProperties" style="background-color: aquamarine;" width="20%" height="10%" />
<Button text="o" tap="onOrientation" id="orientation" style="background-color: lightgreen;" width="20%" height="10%" />
<Button text="i" tap="onItemWidthItemHeight" id="itemWidthItemHeight" style="background-color: lightgreen;" width="20%" height="10%" />
</WrapLayout>
</Page>

5
apps/ui-tests-app/layouts/wrap.ts
View File

@ -18,11 +18,6 @@ export function onOrientation(args: { eventName: string, object: any }) {
export function onItemWidthItemHeight(args: { eventName: string, object: any }) {
var layout = args.object.parent;
if(layout.itemWidth !== 40) {
layout.itemWidth = 40;
layout.itemHeight = 60;
} else {
layout.itemWidth = Number.NaN;
layout.itemHeight = Number.NaN;
}
}

6
tsconfig.json
View File

@ -350,6 +350,12 @@
"apps/ui-tests-app/font/text-field.ts",
"apps/ui-tests-app/font/text-view.ts",
"apps/ui-tests-app/html-view/html-view.ts",
"apps/ui-tests-app/layouts-percent/absolute.ts",
"apps/ui-tests-app/layouts-percent/dock.ts",
"apps/ui-tests-app/layouts-percent/grid.ts",
"apps/ui-tests-app/layouts-percent/myview.ts",
"apps/ui-tests-app/layouts-percent/stack.ts",
"apps/ui-tests-app/layouts-percent/wrap.ts",
"apps/ui-tests-app/layouts/absolute.ts",
"apps/ui-tests-app/layouts/dock.ts",
"apps/ui-tests-app/layouts/grid.ts",