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

How-To files generated with markdown spippet injector

Browse Source
This commit is contained in:
Nikolay Iliev
2016-04-15 14:49:44 +03:00
parent ee292f771f
commit cdeba37c72
10 changed files with 204 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
apps/tests/layouts/absolute-layout-tests.ts
View File

@ -5,23 +5,9 @@ import colorModule = require("color");
import layoutHelper = require("./layout-helper");
import commonTests = require("./common-layout-tests");
// <snippet module="ui/layouts/absolute-layout" title="absolute-layout">
// # AbsoluteLayout
// Using a AbsoluteLayout requires the AbsoluteLayout module.
// ``` JavaScript
// >> absolute-layout-require
import absoluteLayoutModule = require("ui/layouts/absolute-layout");
// ```
// </snippet>
// ### Declaring a AbsoluteLayout.
//``` XML
// <Page>
// <AbsoluteLayout>
// <Label text="This is Label 1" left="30" top="70" />
// </AbsoluteLayout>
// </Page>
//```
// </snippet>
// << absolute-layout-require
export class AbsoluteLayoutTest extends testModule.UITest<absoluteLayoutModule.AbsoluteLayout> {
@ -31,9 +17,7 @@ export class AbsoluteLayoutTest extends testModule.UITest<absoluteLayoutModule.A
public snippet() {
// <snippet module="ui/layouts/absolute-layout" title="absolute-layout">
// ## Creating and populating a AbsoluteLayout with children
// ``` JavaScript
// >> absolute-layout-populating
var absoluteLayout = new absoluteLayoutModule.AbsoluteLayout();
absoluteLayout.width = 230;
absoluteLayout.height = 230;
@ -48,8 +32,7 @@ export class AbsoluteLayoutTest extends testModule.UITest<absoluteLayoutModule.A
label.id = "LT";
label.style.backgroundColor = new colorModule.Color("Red");
absoluteLayout.addChild(label);
// ```
// </snippet>
// << absolute-layout-populating
}
public testAll() {

19
apps/tests/layouts/absolute-layout.md Normal file
View File

@ -0,0 +1,19 @@
---
nav-title: "absolute-layout How-To"
title: "How-To"
description: "Examples for using absolute-layout"
---
# AbsoluteLayout
Using a AbsoluteLayout requires the AbsoluteLayout module.
<snippet id='absolute-layout-require'/>
``` XML
<Page>
<AbsoluteLayout>
<Label text="This is Label 1" left="30" top="70" />
</AbsoluteLayout>
</Page>
```
## Creating and populating a AbsoluteLayout with children
<snippet id='absolute-layout-populating'/>

51
apps/tests/layouts/dock-layout-tests.ts
View File

@ -6,32 +6,13 @@ import testModule = require("../ui-test");
import layoutHelper = require("./layout-helper");
import commonTests = require("./common-layout-tests");
// <snippet module="ui/layouts/dock-layout" title="dock-layout">
// # DockLayout
// Using a DockLayout requires the DockLayout module.
// ``` JavaScript
// >> <snippet id='dock-layout-require'/>
import dockModule = require("ui/layouts/dock-layout");
// ```
// << <snippet id='dock-layout-require'/>
// ### Declaring a DockLayout.
//``` XML
//<Page>
// <DockLayout stretchLastChild="true" >
// <Button dock="left" text="left" style="background-color: red; margin: 5;"/ >/ >
// <Button dock="top" text="top" style="background-color: lightblue; margin: 5;"/ >
// <Button dock="right" text="right" style="background-color: lightgreen; margin: 5;"/ >
// <Button dock="bottom" text="bottom" style="background-color: lightpink; margin: 5;"/ >
// <Button text="fill" style="background-color: wheat; margin: 5;"/ >
// </DockLayout >
//</Page>
//```
// </snippet>
// Other frequently used modules when working with a DockLayout include:
// ``` JavaScript
// >> dock-layout-others
import enums = require("ui/enums");
// ```
// </snippet>
// << dock-layout-others
export class DockLayoutTest extends testModule.UITest<DockLayout> {
@ -164,30 +145,24 @@ export class DockLayoutTest extends testModule.UITest<DockLayout> {
}
public test_codesnippets() {
// <snippet module="ui/layouts/dock-layout" title="dock-layout">
// ## Create DockLayout
// ``` JavaScript
// >> dock-layout-create
var dockLayout = new dockModule.DockLayout();
// ```
// ## Add child view to layout
// ``` JavaScript
// << dock-layout-create
// >> dock-layout-addchild
var btn = new button.Button();
dockLayout.addChild(btn);
// ```
// << dock-layout-addchild
// ## Remove child view from layout
// ``` JavaScript
// >> dock-layout-removechild
dockLayout.removeChild(btn);
// ```
// << dock-layout-removechild
// ## Setting the dock property
// ``` JavaScript
// >> dock-layout-setdocl
var btnDockedToRight = new button.Button();
dockModule.DockLayout.setDock(btnDockedToRight, enums.Dock.right);
dockLayout.addChild(btnDockedToRight);
// ```
// </snippet>
// << dock-layout-setdocl
}
public test_percent_support() {

37
apps/tests/layouts/dock-layout.md Normal file
View File

@ -0,0 +1,37 @@
---
nav-title: "dock-layout How-To"
title: "How-To"
description: "Examples for using dock-layout"
---
# DockLayout
Using a DockLayout requires the DockLayout module.
<snippet id='dock-layout-require'/>
### Declaring a DockLayout.
``` XML
<Page>
<DockLayout stretchLastChild="true">
<Button dock="left" text="left" style="background-color: red; margin: 5;" />
<Button dock="top" text="top" style="background-color: lightblue; margin: 5;" />
<Button dock="right" text="right" style="background-color: lightgreen; margin: 5;" />
<Button dock="bottom" text="bottom" style="background-color: lightpink; margin: 5;" />
<Button text="fill" style="background-color: wheat; margin: 5;" />
</DockLayout>
</Page>
```
Other frequently used modules when working with a DockLayout include:
<snippet id='dock-layout-others'/>
## Create DockLayout
<snippet id='dock-layout-create'/>
## Add child view to layout
<snippet id='dock-layout-addchild'/>
## Remove child view from layout
<snippet id='dock-layout-removechild'/>
## Setting the dock property
<snippet id='dock-layout-setdocl'/>

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

@ -561,27 +561,12 @@ export class GridLayoutTest extends testModule.UITest<GridLayout> {
}
public test_codesnippets = function () {
// <snippet module="ui/layouts/grid-layout" title="grid-layout">
// ## GridLayout sample
// ### Creating Grid Layout via code.
// ``` JavaScript
// >> grid-layout-require
//var layout = require("ui/layouts/grid-layout");
var gridLayout = new GridLayout();
// ```
// << grid-layout-require
// ### Create grid layout with an xml declaration
// ``` XML
// <GridLayout columns="80, *, auto" rows="auto, *" >
// <Button col="0" />
// <Button col="1" />
// <Button col="2" />
//// by default column and row are set to 0
// <Button row="1" colSpan="3" />
// </GridLayout>
// ```
// ### Add views to grid layout
// ``` JavaScript
// >> grid-layout-addviews
var btn1 = new Button();
var btn2 = new Button();
var btn3 = new Button();
@ -590,27 +575,23 @@ export class GridLayoutTest extends testModule.UITest<GridLayout> {
gridLayout.addChild(btn2);
gridLayout.addChild(btn3);
gridLayout.addChild(btn4);
// ```
// ### Set column property on views - btn1 in first column, btn2 is second and btn3 in third
// ``` JavaScript
// << grid-layout-addviews
// >> grid-layout-setcolumn
GridLayout.setColumn(btn1, 0);
GridLayout.setColumn(btn2, 1);
GridLayout.setColumn(btn3, 2);
// ```
// ### Set row property on btn4.
// ``` JavaScript
// << grid-layout-setcolumn
// >> grid-layout-setrow
GridLayout.setRow(btn4, 1);
// ```
// << grid-layout-setrow
// ### Set columnSpan property on btn4 to stretch into all columns
// ``` JavaScript
// >> grid-layout-columnspan
GridLayout.setColumnSpan(btn4, 3);
// ```
// << grid-layout-columnspan
// ### Create ItemSpec for columns and rows 3 columns - 80px, *, auto size and 2 rows - 100px and auto size
// ``` JavaScript
// >> grid-layout-itemspec
//// ItemSpec modes of the column refers to its width.
//// Absolute size of the column
var firstColumn = new ItemSpec(80, GridUnitType.pixel);
@ -622,17 +603,15 @@ export class GridLayoutTest extends testModule.UITest<GridLayout> {
//// Star and Auto modes for rows behave like corresponding setting for columns but refer to row height.
var firstRow = new ItemSpec(1, GridUnitType.auto);
var secondRow = new ItemSpec(1, GridUnitType.star);
// ```
// ### Add columns and rows to GridLayout
// ``` JavaScript
// << grid-layout-itemspec
// >> grid-layout-add-rowscols
gridLayout.addColumn(firstColumn);
gridLayout.addColumn(secondColumn);
gridLayout.addColumn(thirdColumn);
gridLayout.addRow(firstRow);
gridLayout.addRow(secondRow);
// ```
// </snippet>
// << grid-layout-add-rowscols
}
public test_percent_support() {

37
apps/tests/layouts/grid-layout.md Normal file
View File

@ -0,0 +1,37 @@
---
nav-title: "grid-layout How-To"
title: "How-To"
description: "Examples for using grid-layout"
---
## GridLayout sample
### Creating Grid Layout via code.
<snippet id='grid-layout-require'/>
### Create grid layout with an xml declaration
``` XML
<GridLayout columns="80, *, auto" rows="auto, *" >
<Button col="0" />
<Button col="1" />
<Button col="2" />
// by default column and row are set to 0
<Button row="1" colSpan="3" />
</GridLayout>
```
### Add views to grid layout
<snippet id='grid-layout-addviews'/>
### Set column property on views - btn1 in first column, btn2 is second and btn3 in third
<snippet id='grid-layout-setcolumn'/>
### Set row property on btn4.
<snippet id='grid-layout-setrow'/>
### Set columnSpan property on btn4 to stretch into all columns
<snippet id='grid-layout-columnspan'/>
### Create ItemSpec for columns and rows 3 columns - 80px, *, auto size and 2 rows - 100px and auto size
<snippet id='grid-layout-itemspec'/>
### Add columns and rows to GridLayout
<snippet id='grid-layout-add-rowscols'/>

36
apps/tests/layouts/stack-layout-tests.ts
View File

@ -161,42 +161,28 @@ export class StackLayoutTest extends testModule.UITest<StackLayout> {
}
public test_codesnippets() {
// <snippet module="ui/layouts/stack-layout" title="stack-layout">
// ### import StackLayout and Button classes
// >> stack-layout-new
// var StackLayout = require("ui/layouts/stack-layout").StackLayout;
// >> (hide)
// var Button = require("ui/button").Button;
// ### Create StackLayout
// ``` JavaScript
// << (hide)
var stackLayout = new StackLayout();
// ```
// << stack-layout-new
// ### Declaring a StackLayout.
//``` XML
// <Page>
// <StackLayout orientation="horizontal">
// <Label text="This is Label 1" />
// </StackLayout>
// </Page>
//```
// </snippet>
// ### Add child view to layout
// ``` JavaScript
// >> stack-layout-addchild
var btn = new Button();
stackLayout.addChild(btn);
// ```
// << stack-layout-addchild
// ### Remove child view from layout
// ``` JavaScript
// >> stack-layout-remove
stackLayout.removeChild(btn);
// ```
// << stack-layout-remove
// ### Change layout orientation to Horizontal
// ``` JavaScript
// >> stack-layout-horizontal
stackLayout.orientation = enums.Orientation.horizontal;
// ```
// << stack-layout-horizontal
// </snippet>
}
private setup_percent(): layoutHelper.MyButton {

29
apps/tests/layouts/stack-layout.md Normal file
View File

@ -0,0 +1,29 @@
---
nav-title: "stack-layout How-To"
title: "How-To"
description: "Examples for using stack-layout"
---
### import StackLayout and Button classes
var StackLayout = require("ui/layouts/stack-layout").StackLayout;
var Button = require("ui/button").Button;
### Create StackLayout
<snippet id='stack-layout-new'/>
### Declaring a StackLayout.
``` XML
<Page>
<StackLayout orientation="horizontal">
<Label text="This is Label 1" />
</StackLayout>
</Page>
```
### Add child view to layout
<snippet id='stack-layout-addchild'/>
### Remove child view from layout
<snippet id='stack-layout-remove'/>
### Change layout orientation to Horizontal
<snippet id='stack-layout-horizontal'/>

40
apps/tests/layouts/wrap-layout-tests.ts
View File

@ -4,41 +4,20 @@ import layoutHelper = require("./layout-helper");
import testModule = require("../ui-test");
import commonTests = require("./common-layout-tests");
// <snippet module="ui/layouts/wrap-layout" title="WrapLayout">
// # WrapLayout
// Using a WrapLayout requires the WrapLayout module.
// ``` JavaScript
// >> wrap-layout-require
import wrapLayoutModule = require("ui/layouts/wrap-layout");
// ```
// << wrap-layout-require
// Other frequently used modules when working with a WrapLayout include:
// ``` JavaScript
// >> wrap-layout-others
import enums = require("ui/enums");
// ```
// </snippet>
// << wrap-layout-others
export class WrapLayoutTest extends testModule.UITest<wrapLayoutModule.WrapLayout> {
public create(): wrapLayoutModule.WrapLayout {
// <snippet module="ui/layouts/wrap-layout" title="WrapLayout">
// ## Creating a WrapLayout
// ``` JavaScript
// >> wrap-layout-new
var wrapLayout = new wrapLayoutModule.WrapLayout();
// ```
// </snippet>
// ### Declaring a WrapLayout.
//``` XML
// <Page>
// <WrapLayout>
// <Label text="This is Label 1" />
// <Label text="This is Label 2" />
// <Label text="This is Label 3" />
// <Label text="This is Label 4" />
// </WrapLayout>
// </Page>
//```
// </snippet>
// << wrap-layout-new
wrapLayout.width = layoutHelper.dp(200);
wrapLayout.height = layoutHelper.dp(200);
@ -124,12 +103,9 @@ export class WrapLayoutTest extends testModule.UITest<wrapLayoutModule.WrapLayou
public testVerticalOrientation() {
var wrapLayout = this.testView;
// <snippet module="ui/layouts/wrap-layout" title="WrapLayout">
// ## Setting the orientation of a wrap-layout.
// ``` JavaScript
// >> wrap-layout-orientation
wrapLayout.orientation = enums.Orientation.vertical;
// ```
// </snippet>
// << wrap-layout-orientation
this.waitUntilTestElementLayoutIsValid();
let actualValue = this.testView.getChildAt(0)._getCurrentLayoutBounds();

29
apps/tests/layouts/wrap-layout.md Normal file
View File

@ -0,0 +1,29 @@
---
nav-title: "WrapLayout How-To"
title: "How-To"
description: "Examples for using WrapLayout"
---
# WrapLayout
Using a WrapLayout requires the WrapLayout module.
<snippet id='wrap-layout-require'/>
Other frequently used modules when working with a WrapLayout include:
<snippet id='wrap-layout-others'/>
## Creating a WrapLayout
<snippet id='wrap-layout-new'/>
### Declaring a WrapLayout.
``` XML
<Page>
<WrapLayout>
<Label text="This is Label 1" />
<Label text="This is Label 2" />
<Label text="This is Label 3" />
<Label text="This is Label 4" />
</WrapLayout>
</Page>
```
## Setting the orientation of a wrap-layout.
<snippet id='wrap-layout-orientation'/>