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

Merge pull request #1980 from NativeScript/feature/docs2-rebased

Browse Source 
Migrated some of the articles
This commit is contained in:
tsonevn
2016-04-15 16:30:36 +03:00
parent cdeba37c72 6f5bbd69c9
commit 65b1b8ea82
37 changed files with 743 additions and 721 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
apps/tests/ui/list-picker/list-picker-tests.ts
View File

@@ -4,21 +4,14 @@ import viewModule = require("ui/core/view");
import listPickerTestsNative = require("./list-picker-tests-native");
import application = require("application");
// <snippet module="ui/list-picker" title="ListPicker">
// # ListPicker
// Using a ListPicker requires the "ui/list-picker" module.
// ``` JavaScript
// >> article-require-module
import listPickerModule = require("ui/list-picker");
// ```
// </snippet>
// << article-require-module
function _createListPicker(): listPickerModule.ListPicker {
// <snippet module="ui/list-picker" title="ListPicker">
// ## Creating a ListPicker
// ``` JavaScript
// >> article-create-listpicker
var listPicker = new listPickerModule.ListPicker();
// ```
// </snippet>
// << article-create-listpicker
listPicker.id = "ListPicker";
return listPicker;
}
@@ -72,12 +65,9 @@ export var testWhenSettingItemsToEmptyArrayZeroNativeItemsAreCreated = function
export var testSelectedIndexBecomesZeroWhenItemsBoundToNonEmptyArray = function () {
helper.buildUIAndRunTest(_createListPicker(), function (views: Array<viewModule.View>) {
var listPicker = <listPickerModule.ListPicker>views[0];
// <snippet module="ui/list-picker" title="listPicker">
// ## Binding listPicker.items
// ``` JavaScript
// >> article-binding-listpickeritems
listPicker.items = [1, 2, 3];
// ```
// </snippet>
// << article-binding-listpickeritems
var expectedValue = 0;
var actualValue = listPicker.selectedIndex;
TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
@@ -88,12 +78,9 @@ export var testSelectedIndexBecomesUndefinedWhenItemsBoundToEmptyArray = functio
helper.buildUIAndRunTest(_createListPicker(), function (views: Array<viewModule.View>) {
var listPicker = <listPickerModule.ListPicker>views[0];
listPicker.items = _createItems(10);
// <snippet module="ui/list-picker" title="listPicker">
// ## Selecting an item programmatically
// ``` JavaScript
// >> article-selecting-item
listPicker.selectedIndex = 9;
// ```
// </snippet>
// << article-selecting-item
listPicker.items = [];
var expectedValue = undefined;
var actualValue = listPicker.selectedIndex;

14
apps/tests/ui/list-picker/list-picker.md Normal file
View File

@@ -0,0 +1,14 @@
---
nav-title: "ListPicker How-To"
title: "How-To"
description: "Examples for using ListPicker"
---
# ListPicker
Using a ListPicker requires the "ui/list-picker" module.
<snippet id='article-require-module'/>
## Creating a ListPicker
<snippet id='article-create-listpicker'/>
## Binding listPicker.items
<snippet id='article-binding-listpickeritems'/>
## Selecting an item programmatically
<snippet id='article-selecting-item'/>

140
apps/tests/ui/list-view/list-view-tests.ts
View File

@@ -7,76 +7,34 @@ import platform = require("platform");
import utils = require("utils/utils");
import { Label } from "ui/label";
// <snippet module="ui/list-view" title="list-view">
// # ListView
// Using a ListView requires the ListView module.
// ``` JavaScript
// >> article-require-module
import listViewModule = require("ui/list-view");
// ```
// Other modules which will be used in the code samples in this article:
// ``` JavaScript
// << article-require-module
// >> article-require-modules
import observableArray = require("data/observable-array");
import labelModule = require("ui/label");
// ```
// << article-require-modules
// ### Binding the ListView items property to collection in the view-model.
//``` XML
// <Page>
// {%raw%}<ListView items="{{ myItems }}" />{%endraw%}
// </Page>
//```
// ### Attaching event handler for the ListView itemTap event.
//``` XML
// <Page>
// {%raw%}<ListView items="{{ myItems }}" itemTap="listViewItemTap" />{%endraw%}
// </Page>
//```
//``` JavaScript
// function listViewItemTap(args) {
// var itemIndex = args.index;
// }
// exports.listViewItemTap = listViewItemTap;
//```
// >> article-item-tap
function listViewItemTap(args) {
var itemIndex = args.index;
}
exports.listViewItemTap = listViewItemTap;
// << article-item-tap
// ### Attaching event handler for the ListView loadMoreItems event.
//``` XML
// <Page>
// {%raw%}<ListView items="{{ myItems }}" loadMoreItems="listViewLoadMoreItems" />{%endraw%}
// </Page>
//```
//``` JavaScript
// function listViewLoadMoreItems(args) {
// // Expand your collection bound to the ListView with more items here!
// }
// exports.listViewLoadMoreItems = listViewLoadMoreItems;
//```
// >> article-load-items
function listViewLoadMoreItems(args) {
// Expand your collection bound to the ListView with more items here!
}
// << article-load-items
// ### Define the ListView itemTemplate property.
//``` XML
// <Page>
// {%raw%}<ListView items="{{ myItems }}">
// <ListView.itemTemplate>
// <Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" />
// </ListView.itemTemplate>
// </ListView>{%endraw%}
// </Page>
//```
// ### Define the ListView separatorColor property.
//``` XML
// <Page loaded="loaded">
// {%raw%}<ListView items="{{ items }}" separatorColor="red" />{%endraw%}
// </Page>
//```
//``` JavaScript
// function loaded(args) {
// args.object.bindingContext = { items: [1,2,3,4,5] };
// }
// exports.loaded = loaded;
//```
// </snippet>
var ASYNC = 0.2;
var FEW_ITEMS = [0, 1, 2];
@@ -92,12 +50,9 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
}
public test_default_TNS_values() {
// <snippet module="ui/list-view" title="list-view">
// ### Creating a ListView
// ``` JavaScript
// >> article-create-listview
var listView = new listViewModule.ListView();
// ```
// </snippet>
// << article-create-listview
TKUnit.assertEqual(listView.isScrolling, false, "Default listView.isScrolling");
TKUnit.assert(types.isUndefined(listView.items), "Default listView.items should be undefined");
@@ -107,10 +62,7 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
var listView = this.testView;
var indexes = {};
// <snippet module="ui/list-view" title="list-view">
// ### Using ListView with Array
// The itemLoading event is used to create the UI for each item that is shown in the ListView.
// ``` JavaScript
// >> article-listview-array
var colors = ["red", "green", "blue"];
listView.items = colors;
listView.on(listViewModule.ListView.itemLoadingEvent, function (args: listViewModule.ItemEventData) {
@@ -120,7 +72,7 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
}
(<labelModule.Label>args.view).text = colors[args.index];
//<hide>
// >> (hide)
indexes[args.index] = true;
if (args.index === (colors.length - 1)) {
try {
@@ -140,10 +92,9 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
done(e);
}
}
//</hide>
// << (hide)
});
// ```
// </snippet>
// << article-listview-array
}
public test_set_native_item_exposed() {
@@ -210,15 +161,11 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
TKUnit.waitUntilReady(() => { return this.getNativeViewCount(listView) === listView.items.length; }, ASYNC);
TKUnit.assertEqual(this.getNativeViewCount(listView), colors.length, "Native views count.");
// <snippet module="ui/list-view" title="list-view">
// > Note, that changing the array after the list view is shown will not update the UI.
// You can force-update the UI using the refresh() method.
// ``` JavaScript
// >> article-change-refresh-listview
colors.push("yellow");
//// Manually trigger the update so that the new color is shown.
listView.refresh();
// ```
// </snippet>
// << article-change-refresh-listview
TKUnit.waitUntilReady(() => { return this.getNativeViewCount(listView) === listView.items.length; }, ASYNC);
TKUnit.assertEqual(this.getNativeViewCount(listView), colors.length, "Native views count.");
}
@@ -300,9 +247,7 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
var listView = this.testView;
var indexes = {};
// <snippet module="ui/list-view" title="list-view">
// ### Using ListView with ObservableArray
// ``` JavaScript
// >> article-listview-observablearray
var colors = new observableArray.ObservableArray(["red", "green", "blue"]);
listView.items = colors;
listView.on(listViewModule.ListView.itemLoadingEvent, function (args: listViewModule.ItemEventData) {
@@ -314,8 +259,7 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
indexes[args.index] = true;
});
// ```
// </snippet>
// << article-listview-observablearray
TKUnit.waitUntilReady(() => { return this.getNativeViewCount(listView) === listView.items.length; }, ASYNC);
TKUnit.assert(indexes[0], "itemLoading not called for index 0");
@@ -333,13 +277,10 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
TKUnit.waitUntilReady(() => { return this.getNativeViewCount(listView) === listView.items.length; }, ASYNC);
TKUnit.assertEqual(this.getNativeViewCount(listView), 3, "getNativeViewCount");
// <snippet module="ui/list-view" title="list-view">
// > When using ObservableArray the list view will be automatically updated when items are added or removed form the array.
// ``` JavaScript
// >> article-push-in-observablearray
colors.push("yellow");
//// The ListView will be updated automatically.
// ```
// </snippet>
// << article-push-in-observablearray
TKUnit.waitUntilReady(() => { return this.getNativeViewCount(listView) === listView.items.length; }, ASYNC);
TKUnit.assertEqual(this.getNativeViewCount(listView), 4, "getNativeViewCount");
}
@@ -383,22 +324,17 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
var nativeTapRaised = false;
var itemIndex = -1;
/* tslint:disable:no-unused-variable */
// <snippet module="ui/list-view" title="list-view">
// ## Responding to other events
// ### ItemTap event
// The event will be raise when an item inside the ListView is tapped.
// ``` JavaScript
// >> article-itemtap-event
listView.on(listViewModule.ListView.itemTapEvent, function (args: listViewModule.ItemEventData) {
var tappedItemIndex = args.index;
var tappedItemView = args.view;
//// Do someting
//<hide>
// >> (hide)
nativeTapRaised = true;
itemIndex = args.index;
//</hide>
// << (hide)
});
// ```
// </snippet>
// << article-itemtap-event
/* tslint:enable:no-unused-variable */
TKUnit.waitUntilReady(() => { return this.getNativeViewCount(listView) === listView.items.length; }, ASYNC);
this.performNativeItemTap(listView, 1);
@@ -413,19 +349,15 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
var loadMoreItemsCount = 0;
listView.items = FEW_ITEMS;
listView.on(listViewModule.ListView.itemLoadingEvent, this.loadViewWithItemNumber);
// <snippet module="ui/list-view" title="list-view">
// ### LoadMoreItems event
// The event will be raised when the ListView is scrolled so that the last item is visible.
// This even is intended to be used to add additional data in the ListView.
// ``` JavaScript
// >> article-loadmoreitems-event
listView.on(listViewModule.ListView.loadMoreItemsEvent, function (data: observable.EventData) {
//// Do something.
//<hide>
// >> (hide)
loadMoreItemsCount++;
//</hide>
// << (hide)
});
// ```
// </snippet>
// << article-loadmoreitems-event
TKUnit.waitUntilReady(() => { return this.getNativeViewCount(listView) === listView.items.length; }, ASYNC);
TKUnit.assertEqual(loadMoreItemsCount, 1, "loadMoreItemsCount");
}

64
apps/tests/ui/list-view/list-view.md Normal file
View File

@@ -0,0 +1,64 @@
---
nav-title: "list-view How-To"
title: "How-To"
description: "Examples for using list-view"
---
# ListView
Using a ListView requires the ListView module.
<snippet id='article-require-module'/>
Other modules which will be used in the code samples in this article:
<snippet id='article-require-modules'/>
### Binding the ListView items property to collection in the view-model.
``` XML
<Page>
{%raw%}<ListView items="{{ myItems }}" />{%endraw%}
</Page>
```
### Attaching event handler for the ListView itemTap event.
``` XML
<Page>
{%raw%}<ListView items="{{ myItems }}" itemTap="listViewItemTap" />{%endraw%}
</Page>
```
<snippet id='article-item-tap'/>
### Attaching event handler for the ListView loadMoreItems event.
``` XML
<Page>
{%raw%}<ListView items="{{ myItems }}" loadMoreItems="listViewLoadMoreItems" />{%endraw%}
</Page>
```
<snippet id='article-load-items'>
### Define the ListView itemTemplate property.
``` XML
<Page>
{%raw%}<ListView items="{{ myItems }}">
<ListView.itemTemplate>
<Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" />
</ListView.itemTemplate>
</ListView>{%endraw%}
</Page>
```
### Creating a ListView
<snippet id='article-create-listview'/>
### Using ListView with Array
The itemLoading event is used to create the UI for each item that is shown in the ListView.
<snippet id='article-listview-array'/>
> Note, that changing the array after the list view is shown will not update the UI.
You can force-update the UI using the refresh() method.
<snippet id='article-change-refresh-listview'/>
### Using ListView with ObservableArray
<snippet id='article-listview-observablearray'/>
> When using ObservableArray the list view will be automatically updated when items are added or removed form the array.
<snippet id='article-push-in-observablearray'/>
## Responding to other events
### ItemTap event
The event will be raise when an item inside the ListView is tapped.
<snippet id='article-itemtap-event'/>
### LoadMoreItems event
The event will be raised when the ListView is scrolled so that the last item is visible.
This even is intended to be used to add additional data in the ListView.
<snippet id='article-loadmoreitems-event'/>

51
apps/tests/ui/page/page-tests-common.ts
View File

@@ -1,27 +1,16 @@
// <snippet module="ui/page" title="Page">
// # Page
// Using a page requires the Page module.
// ``` JavaScript
// >> article-require-module
import pageModule = require("ui/page");
//// FrameModule is needed in order to have an option to navigate to the new page.
import frameModule = require("ui/frame");
// ```
// << article-require-module
// ### Attaching event handler for the Page loaded event to set bindingContext.
//``` XML
// <Page loaded="pageLoaded">
// {%raw%}<Label text="{{ name }}" />{%endraw%}
// </Page>
//```
//``` JavaScript
// function pageLoaded(args) {
// var page = args.object;
// page.bindingContext = { name : "Some name" };
// }
// exports.pageLoaded = pageLoaded;
//```
// </snippet>
// >> article-set-bindingcontext
function pageLoaded(args) {
var page = args.object;
page.bindingContext = { name : "Some name" };
}
exports.pageLoaded = pageLoaded;
// << article-set-bindingcontext
import TKUnit = require("../../TKUnit");
import labelModule = require("ui/label");
import {StackLayout} from "ui/layouts/stack-layout";
@@ -99,13 +88,12 @@ export function test_PageLoaded_is_called_once() {
}
export function test_NavigateToNewPage() {
// >> artivle-create-navigate-to-page
var currentPage;
var topFrame = frameModule.topmost();
currentPage = topFrame.currentPage;
// <snippet module="ui/page" title="Page">
// ### Creating and navigating to the created page.
// ``` JavaScript
var testPage: Page;
var pageFactory = function (): Page {
testPage = new pageModule.Page();
@@ -119,17 +107,13 @@ export function test_NavigateToNewPage() {
animated: false
};
topFrame.navigate(navEntry);
// ```
// </snippet>
// << artivle-create-navigate-to-page
TKUnit.waitUntilReady(() => { return testPage.isLayoutValid });
// <snippet module="ui/page" title="Page">
// ### Navigating backward is as simple as calling a single method.
// ``` JavaScript
// >> article-navigating-backward
topFrame.goBack();
// ```
// </snippet>
// << article-navigating-backward
TKUnit.waitUntilReady(() => { return topFrame.currentPage !== null && topFrame.currentPage === currentPage });
TKUnit.assert(testPage.parent === undefined, "Page.parent should become undefined after navigating back");
@@ -221,9 +205,7 @@ function _test_PageNavigation_EventSequence(withTransition: boolean) {
export function test_NavigateTo_WithContext() {
let currentPage = frameModule.topmost().currentPage;
// <snippet module="ui/page" title="Page">
// ### Pass data to the new page.
// ``` JavaScript
// >> article-pass-data
var testPage: pageModule.Page;
var pageFactory = function (): pageModule.Page {
testPage = new pageModule.Page();
@@ -239,8 +221,7 @@ export function test_NavigateTo_WithContext() {
};
let topFrame = frameModule.topmost();
topFrame.navigate(navEntry);
// ```
// </snippet>
// << article-pass-data
TKUnit.waitUntilReady(() => topFrame.currentPage !== null && topFrame.currentPage !== currentPage && testPage.isLayoutValid);
var actualContextValue = testPage.navigationContext;

21
apps/tests/ui/page/page.md Normal file
View File

@@ -0,0 +1,21 @@
---
nav-title: "Page How-To"
title: "How-To"
description: "Examples for using Page"
---
# Page
Using a page requires the Page module.
<snippet id='article-require-module'/>
### Attaching event handler for the Page loaded event to set bindingContext.
``` XML
<Page loaded="pageLoaded">
{%raw%}<Label text="{{ name }}" />{%endraw%}
</Page>
```
<snippet id='article-set-bindingcontext'/>
### Creating and navigating to the created page.
<snippet id='artivle-create-navigate-to-page'/>
### Navigating backward is as simple as calling a single method.
<snippet id='article-navigating-backward'/>
### Pass data to the new page.
<snippet id='article-pass-data'/>

52
apps/tests/ui/placeholder/placeholder-tests.ts
View File

@@ -4,39 +4,29 @@ import utils = require("utils/utils");
import helper = require("../helper");
import viewModule = require("ui/core/view");
// <snippet module="ui/placeholder" title="placeholder">
// # Placeholder
// Using the placeholder requires the Placeholder module.
// ``` JavaScript
// >> article-require-module
import placeholderModule = require("ui/placeholder");
// ```
// << article-require-module
// Creating native view for the Placeholder using creatingView event.
//``` XML
// <Page>
// {%raw%}<Placeholder creatingView="creatingView" />{%endraw%}
// </Page>
//```
//``` JavaScript
//var platform = require("platform");
//var utils = require("utils/utils");
//
//function creatingView(args) {
// var nativeView;
// if (platform.device.os === platform.platformNames.ios) {
// nativeView = new UITextView();
// nativeView.text = "Native";
// } else if (platform.device.os === platform.platformNames.android) {
// nativeView = new android.widget.TextView(utils.ad.getApplicationContext());
// nativeView.setText("Native");
// }
//
// args.view = nativeView;
//}
//
//exports.creatingView = creatingView;
//```
// </snippet>
// >> article-creating-view
var platform = require("platform");
var utils = require("utils/utils");
function creatingView(args) {
var nativeView;
if (platform.device.os === platform.platformNames.ios) {
nativeView = new UITextView();
nativeView.text = "Native";
} else if (platform.device.os === platform.platformNames.android) {
nativeView = new android.widget.TextView(utils.ad.getApplicationContext());
nativeView.setText("Native");
}
args.view = nativeView;
}
exports.creatingView = creatingView;
// << article-creating-view
export function test_placeholder_creatingView() {
var nativeView;

15
apps/tests/ui/placeholder/placeholder.md Normal file
View File

@@ -0,0 +1,15 @@
---
nav-title: "placeholder How-To"
title: "How-To"
description: "Examples for using placeholder"
---
# Placeholder
Using the placeholder requires the Placeholder module.
<snippet id='article-require-module'/>
Creating native view for the Placeholder using creatingView event.
``` XML
<Page>
{%raw%}<Placeholder creatingView="creatingView" />{%endraw%}
</Page>
```
<snippet id='article-creating-view'/>

36
apps/tests/ui/progress/progress-tests.ts
View File

@@ -5,35 +5,16 @@ import observable = require("data/observable");
import color = require("color");
import platform = require("platform");
// <snippet module="ui/progress" title="progress">
// # Progress
// Using the progress view requires the Progress module.
// ``` JavaScript
// >> article-require-module
import progressModule = require("ui/progress");
// ```
// << article-require-module
// Binding the Progress value property to a view-model property.
//``` XML
// <Page loaded="pageLoaded">
// {%raw%}<Progress value="{{ someProperty }}" />{%endraw%}
// </Page>
//```
//``` JavaScript
// function pageLoaded(args) {
// var page = args.object;
// page.bindingContext = { someProperty : 42 };
// }
// exports.pageLoaded = pageLoaded;
//```
// </snippet>
export function test_default_TNS_values() {
// <snippet module="ui/progress" title="progress">
// ### Creating a progress view
// ``` JavaScript
// >> article-create-progress-view
var progress = new progressModule.Progress();
// ```
// </snippet>
// << article-create-progress-view
TKUnit.assertEqual(progress.value, 0, "Default progress.value");
TKUnit.assertEqual(progress.maxValue, 100, "Default progress.maxValue");
@@ -101,13 +82,10 @@ if (platform.device.os === platform.platformNames.ios) {
export function test_set_maxValue_should_adjust_value() {
var progress = new progressModule.Progress();
// <snippet module="ui/progress" title="progress">
// ### Setting up the progress view
// ``` JavaScript
// >> article-set-value
progress.maxValue = 255;
progress.value = 16;
// ```
// </snippet>
// << article-set-value
function testAction(views: Array<viewModule.View>) {
progress.maxValue = 10;

25
apps/tests/ui/progress/progress.md Normal file
View File

@@ -0,0 +1,25 @@
---
nav-title: "progress How-To"
title: "How-To"
description: "Examples for using progress"
---
# Progress
Using the progress view requires the Progress module.
<snippet id='article-require-module'/>
Binding the Progress value property to a view-model property.
``` XML
<Page loaded="pageLoaded">
{%raw%}<Progress value="{{ someProperty }}" />{%endraw%}
</Page>
```
``` JavaScript
function pageLoaded(args) {
var page = args.object;
page.bindingContext = { someProperty : 42 };
}
exports.pageLoaded = pageLoaded;
```
### Creating a progress view
<snippet id='article-create-progress-view'>
### Setting up the progress view
<snippet id='article-set-value'/>

94
apps/tests/ui/repeater/repeater-tests.ts
View File

@@ -10,64 +10,16 @@ import pageModule = require("ui/page");
import gestureModule = require("ui/gestures");
import { Label } from "ui/label";
// <snippet module="ui/repeater" title="repeater">
// # Repeater
// Using a Repeater requires the repeater module.
// ``` JavaScript
// >> article-require-module
import repeaterModule = require("ui/repeater");
// ```
// Other modules which will be used in the code samples in this article:
// ``` JavaScript
// << article-require-module
// >> article-require-modules
import observableArray = require("data/observable-array");
import labelModule = require("ui/label");
// ```
// << article-require-modules
// ### Binding the Repeater items property to collection in the view-model.
//``` XML
// <Page>
// {%raw%}<Repeater items="{{ myItems }}" />{%endraw%}
// </Page>
//```
// ### Define the Repeater itemTemplate property.
//``` XML
// <Page>
// {%raw%}<Repeater items="{{ myItems }}">
// <Repeater.itemTemplate>
// <Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" />
// </Repeater.itemTemplate>
// </Repeater>{%endraw%}
// </Page>
//```
// ### Define the Repeater itemsLayout property. Default is StackLayout with orientation="vertical".
//``` XML
// <Page>
// {%raw%}<Repeater items="{{ myItems }}">
// <Repeater.itemsLayout>
// <StackLayout orientation="horizontal" />
// </Repeater.itemsLayout>
// </Repeater>{%endraw%}
// </Page>
//```
// ### Repeater with WrapLayout inside ScrollView.
//``` XML
// <Page>
// {%raw%}<ScrollView>
// <Repeater items="{{ myItems }}">
// <Repeater.itemsLayout>
// <WrapLayout />
// </Repeater.itemsLayout>
// <Repeater.itemTemplate>
// <Label text="{{ $value }}" margin="10" />
// </Repeater.itemTemplate>
// </Repeater>
// </ScrollView>{%endraw%}
// </Page>
//```
// </snippet>
var ASYNC = 0.2;
var FEW_ITEMS = [0, 1, 2];
@@ -80,13 +32,10 @@ export function test_set_items_to_array_loads_all_items() {
var repeater = new repeaterModule.Repeater();
function testAction(views: Array<viewModule.View>) {
// <snippet module="ui/repeater" title="repeater">
// ### Using Repeater with Array
// ``` JavaScript
// >> article-repeater-with-array
var colors = ["red", "green", "blue"];
repeater.items = colors;
// ```
// </snippet>
// << article-repeater-with-array
TKUnit.wait(ASYNC);
@@ -121,15 +70,11 @@ export function test_refresh_after_adding_items_to_array_loads_new_items() {
TKUnit.wait(ASYNC);
TKUnit.assertEqual(getChildrenCount(repeater), colors.length, "views count.");
// <snippet module="ui/repeater" title="repeater">
// > Note, that changing the array after the repeater is shown will not update the UI.
// You can force-update the UI using the refresh() method.
// ``` JavaScript
// >> artcle-array-push-element
colors.push("yellow");
//// Manually trigger the update so that the new color is shown.
repeater.refresh();
// ```
// </snippet>
// << artcle-array-push-element
TKUnit.wait(ASYNC);
TKUnit.assertEqual(getChildrenCount(repeater), colors.length, "views count.");
};
@@ -183,15 +128,12 @@ export function test_set_itmes_to_null_clears_items() {
}
export function test_set_itemsLayout_accepted() {
// <snippet module="ui/repeater" title="repeater">
// ### Using Repeater with different layout.
// ``` JavaScript
// >> article-repeater-layout
var repeater = new repeaterModule.Repeater();
var stackLayout = new stackLayoutModule.StackLayout();
stackLayout.orientation = "horizontal";
repeater.itemsLayout = stackLayout;
// ```
// </snippet>
// << article-repeater-layout
function testAction(views: Array<viewModule.View>) {
@@ -240,13 +182,10 @@ export function test_set_items_to_observable_array_loads_all_items() {
var repeater = new repeaterModule.Repeater();
function testAction(views: Array<viewModule.View>) {
// <snippet module="ui/repeater" title="repeater">
// ### Using Repeater with ObservableArray
// ``` JavaScript
// >> article-repeater-observablearray
var colors = new observableArray.ObservableArray(["red", "green", "blue"]);
repeater.items = colors;
// ```
// </snippet>
// << article-repeater-observablearray
TKUnit.assert(getChildAtText(repeater, 0) === "red", "Item not created for index 0");
TKUnit.assert(getChildAtText(repeater, 1) === "green", "Item not created for index 1");
@@ -266,13 +205,10 @@ export function test_add_to_observable_array_refreshes_the_Repeater() {
TKUnit.wait(ASYNC);
TKUnit.assertEqual(getChildrenCount(repeater), 3, "getChildrenCount");
// <snippet module="ui/repeater" title="repeater">
// > When using ObservableArray the repeater will be automatically updated when items are added or removed form the array.
// ``` JavaScript
// >> article-push-to-observablearray
colors.push("yellow");
//// The Repeater will be updated automatically.
// ```
// </snippet>
// << article-push-to-observablearray
TKUnit.wait(ASYNC);
TKUnit.assertEqual(getChildrenCount(repeater), 4, "getChildrenCount");

62
apps/tests/ui/repeater/repeater.md Normal file
View File

@@ -0,0 +1,62 @@
---
nav-title: "repeater How-To"
title: "How-To"
description: "Examples for using repeater"
---
# Repeater
Using a Repeater requires the repeater module.
<snippet id='article-require-module'/>
Other modules which will be used in the code samples in this article:
<snippet id='article-require-modules'/>
### Binding the Repeater items property to collection in the view-model.
``` XML
<Page>
{%raw%}<Repeater items="{{ myItems }}" />{%endraw%}
</Page>
```
### Define the Repeater itemTemplate property.
``` XML
<Page>
{%raw%}<Repeater items="{{ myItems }}">
<Repeater.itemTemplate>
<Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" />
</Repeater.itemTemplate>
</Repeater>{%endraw%}
</Page>
```
### Define the Repeater itemsLayout property. Default is StackLayout with orientation="vertical".
``` XML
<Page>
{%raw%}<Repeater items="{{ myItems }}">
<Repeater.itemsLayout>
<StackLayout orientation="horizontal" />
</Repeater.itemsLayout>
</Repeater>{%endraw%}
</Page>
```
### Repeater with WrapLayout inside ScrollView.
``` XML
<Page>
{%raw%}<ScrollView>
<Repeater items="{{ myItems }}">
<Repeater.itemsLayout>
<WrapLayout />
</Repeater.itemsLayout>
<Repeater.itemTemplate>
<Label text="{{ $value }}" margin="10" />
</Repeater.itemTemplate>
</Repeater>
</ScrollView>{%endraw%}
</Page>
```
### Using Repeater with Array
<snippet id='article-repeater-with-array'/>
> Note, that changing the array after the repeater is shown will not update the UI.
You can force-update the UI using the refresh() method.
<snippet id='artcle-array-push-element'/>
### Using Repeater with different layout.
<snippet id='article-repeater-layout'/>
### Using Repeater with ObservableArray
<snippet id='article-repeater-observablearray'/>
> When using ObservableArray the repeater will be automatically updated when items are added or removed form the array.
<snippet id='article-push-to-observablearray'/>

26
apps/tests/ui/scroll-view/scroll-view-tests.ts
View File

@@ -7,23 +7,9 @@ import layoutHelper = require("../../layouts/layout-helper");
import {Page} from "ui/page";
import * as frame from "ui/frame";
// <snippet module="ui/scroll-view" title="scroll-view">
// # ScrollView
// Using a ScrollView requires the ScrollView module.
// ``` JavaScript
// >> article-require-module
import scrollViewModule = require("ui/scroll-view");
// ```
// ### Declaring the ScrollView.
//``` XML
// <Page>
// <ScrollView>
// {%raw%}<Image src="{{ someBigImageUrl }}" />{%endraw%}
// </ScrollView>
// </Page>
//```
// </snippet>
// << article-require-module
class ScrollLayoutTest extends testModule.UITest<scrollViewModule.ScrollView> {
@@ -44,13 +30,9 @@ class ScrollLayoutTest extends testModule.UITest<scrollViewModule.ScrollView> {
}
public test_snippets() {
/* tslint:disable:no-unused-variable */
// <snippet module="ui/scroll-view" title="scroll-view">
// ### Creating a ScrollView
// ``` JavaScript
// >> article-creating-scrollview
var scrollView = new scrollViewModule.ScrollView();
// ```
// </snippet>
// << article-creating-scrollview
}
public test_default_TNS_values() {

18
apps/tests/ui/scroll-view/scroll-view.md Normal file
View File

@@ -0,0 +1,18 @@
---
nav-title: "scroll-view How-To"
title: "How-To"
description: "Examples for using scroll-view"
---
# ScrollView
Using a ScrollView requires the ScrollView module.
<snippet id='article-require-module'/>
### Declaring the ScrollView.
``` XML
<Page>
<ScrollView>
{%raw%}<Image src="{{ someBigImageUrl }}" />{%endraw%}
</ScrollView>
</Page>
```
### Creating a ScrollView
<snippet id='article-creating-scrollview'/>

22
apps/tests/ui/search-bar/search-bar-tests.ts
View File

@@ -4,13 +4,9 @@ import viewModule = require("ui/core/view");
import searchBarTestsNative = require("./search-bar-tests-native");
import colorModule = require("color");
import observable = require("data/observable");
// <snippet module="ui/search-bar" title="search-bar">
// # SearchBar
// Using the SearchBar requires the "ui/search-bar" module.
// ``` JavaScript
// >> article-require-module
import searchBarModule = require("ui/search-bar");
// ```
// </snippet>
// << article-require-module
// ### Declaring a SearchBar.
//``` XML
@@ -21,12 +17,9 @@ import searchBarModule = require("ui/search-bar");
// </snippet>
var _createSearchBarFunc = function (): searchBarModule.SearchBar {
// <snippet module="ui/search-bar" title="SearchBar">
// ### Creating a SearchBar
// ``` JavaScript
// >> article-creating-searchbar
var searchBar = new searchBarModule.SearchBar();
// ```
// </snippet>
// << article-creating-searchbar
searchBar.text = "searchBar";
return searchBar;
};
@@ -75,9 +68,7 @@ export var testSearchBarFontSize = function () {
};
export function test_DummyTestForSnippetOnly() {
// <snippet module="ui/search-bar" title="search-bar">
// ### Searching
// ``` JavaScript
// >> article-searching
var searchBar = new searchBarModule.SearchBar();
searchBar.on(searchBarModule.SearchBar.submitEvent, function (args: observable.EventData) {
console.log("Search for " + (<searchBarModule.SearchBar>args.object).text);
@@ -85,6 +76,5 @@ export function test_DummyTestForSnippetOnly() {
searchBar.on(searchBarModule.SearchBar.clearEvent, function (args: observable.EventData) {
console.log("Clear");
});
// ```
// </snippet>
// << article-searching
}

12
apps/tests/ui/search-bar/search-bar.md Normal file
View File

@@ -0,0 +1,12 @@
---
nav-title: "search-bar How-To"
title: "How-To"
description: "Examples for using search-bar"
---
# SearchBar
Using the SearchBar requires the "ui/search-bar" module.
<snippet id='article-require-module'/>
### Creating a SearchBar
<snippet id='article-creating-searchbar'/>
### Searching
<snippet id='article-searching' />

41
apps/tests/ui/segmented-bar/segmented-bar-tests.ts
View File

@@ -6,31 +6,14 @@ import bindable = require("ui/core/bindable");
import observable = require("data/observable");
import color = require("color");
// <snippet module="ui/segmented-bar" title="SegmentedBar">
// # SegmentedBar
// Using a SegmentedBar requires the "ui/segmented-bar" module.
// ``` JavaScript
// >> article-require-module
import segmentedBarModule = require("ui/segmented-bar");
// ```
// </snippet>
// << article-require-module
function _createSegmentedBar(): segmentedBarModule.SegmentedBar {
// <snippet module="ui/segmented-bar" title="SegmentedBar">
// ## Creating a SegmentedBar
// ``` JavaScript
// >> article-create-segmentedbar
var segmentedBar = new segmentedBarModule.SegmentedBar();
// ```
// ``` XML
// <SegmentedBar>
// <SegmentedBar.items>
// <SegmentedBarItem title="Item 1" />
// <SegmentedBarItem title="Item 2" />
// <SegmentedBarItem title="Item 3" />
// </SegmentedBar.items>
// </SegmentedBar>
// ```
// </snippet>
// << article-create-segmentedbar
segmentedBar.id = "SegmentedBar";
return segmentedBar;
}
@@ -102,11 +85,7 @@ export var testWhenSettingItemsToEmptyArrayZeroNativeItemsAreCreated = function
export var testSelectedIndexBecomesZeroWhenItemsBoundToNonEmptyArray = function () {
helper.buildUIAndRunTest(_createSegmentedBar(), function (views: Array<viewModule.View>) {
var segmentedBar = <segmentedBarModule.SegmentedBar>views[0];
// <snippet module="ui/segmented-bar" title="SegmentedBar">
// ### Creating segmentedBar.items
// It is important that an items array gets created and filled with
// items first and then assigned to the segmented bar.
// ``` JavaScript
// >> article-creating-segmentedbar-items
var items = [];
var item1 = new segmentedBarModule.SegmentedBarItem();
item1.title = "Item1";
@@ -118,8 +97,7 @@ export var testSelectedIndexBecomesZeroWhenItemsBoundToNonEmptyArray = function
item3.title = "Item3";
items.push(item3);
segmentedBar.items = items;
// ```
// </snippet>
// << article-creating-segmentedbar-items
var expectedValue = 0;
var actualValue = segmentedBar.selectedIndex;
TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
@@ -130,12 +108,9 @@ export var testSelectedIndexBecomesUndefinedWhenItemsBoundToEmptyArray = functio
helper.buildUIAndRunTest(_createSegmentedBar(), function (views: Array<viewModule.View>) {
var segmentedBar = <segmentedBarModule.SegmentedBar>views[0];
segmentedBar.items = _createItems(10);
// <snippet module="ui/segmented-bar" title="SegmentedBar">
// ### Selecting an item programmatically
// ``` JavaScript
// >> artcile-selecting-item
segmentedBar.selectedIndex = 9;
// ```
// </snippet>
// << artcile-selecting-item
segmentedBar.items = [];
var expectedValue = undefined;
var actualValue = segmentedBar.selectedIndex;

25
apps/tests/ui/segmented-bar/segmented-bar.md Normal file
View File

@@ -0,0 +1,25 @@
---
nav-title: "SegmentedBar How-To"
title: "How-To"
description: "Examples for using SegmentedBar"
---
# SegmentedBar
Using a SegmentedBar requires the "ui/segmented-bar" module.
<snippet id='article-require-module'/>
## Creating a SegmentedBar
<snippet id='article-create-segmentedbar'/>
``` XML
<SegmentedBar>
<SegmentedBar.items>
<SegmentedBarItem title="Item 1" />
<SegmentedBarItem title="Item 2" />
<SegmentedBarItem title="Item 3" />
</SegmentedBar.items>
</SegmentedBar>
```
### Creating segmentedBar.items
It is important that an items array gets created and filled with
items first and then assigned to the segmented bar.
<snippet id='article-creating-segmentedbar-items'/>
### Selecting an item programmatically
<snippet id='artcile-selecting-item'/>

50
apps/tests/ui/slider/slider-tests.ts
View File

@@ -7,23 +7,13 @@ import observable = require("data/observable");
import color = require("color");
import platform = require("platform");
// <snippet module="ui/slider" title="slider">
// # Slider
// Using a slider requires the Slider module.
// ``` JavaScript
// >> article-require-slider
import sliderModule = require("ui/slider");
// ```
// << article-require-slider
// ### Binding the Progress and Slider value properties to a observable view-model property.
//``` XML
// <Page loaded="pageLoaded">
// <StackLayout orientation="vertical">
// {%raw%}<Progress value="{{ someProperty }}" />
// <Slider value="{{ someProperty }}" />{%endraw%}
// </StackLayout>
// </Page>
//```
//``` JavaScript
// >> article-binding-slider-properties
// function pageLoaded(args) {
// var page = args.object;
// var obj = new observable.Observable();
@@ -31,19 +21,15 @@ import sliderModule = require("ui/slider");
// page.bindingContext = obj;
// }
// exports.pageLoaded = pageLoaded;
//```
// << article-binding-slider-properties
// </snippet>
var TEST_VALUE = 5;
export function test_set_TNS_value_updates_native_value() {
// <snippet module="ui/slider" title="slider">
// ### Creating a slider
// ``` JavaScript
// >> article-creating-slider
var slider = new sliderModule.Slider();
// ```
// </snippet>
// << article-creating-slider
function testAction(views: Array<viewModule.View>) {
slider.value = TEST_VALUE;
@@ -172,14 +158,11 @@ export function test_set_maxValue_should_adjust_value() {
export function test_set_maxValue_should_adjust_value_and_minValue() {
var slider = new sliderModule.Slider();
// <snippet module="ui/slider" title="slider">
// ### Setting the slider value and bounds
// ``` JavaScript
// >> article-setting-slider-values
slider.maxValue = 120;
slider.value = 80;
slider.minValue = 50;
// ```
// </snippet>
// << article-setting-slider-values
function testAction(views: Array<viewModule.View>) {
slider.maxValue = 30;
@@ -335,9 +318,7 @@ export function test_binding_value_to_model() {
var slider = new sliderModule.Slider()
function testAction(views: Array<viewModule.View>) {
// <snippet module="ui/slider" title="slider">
// ### Binding value property to a model
// ``` JavaScript
// >> article-binding-value-property
var model = new observable.Observable();
model.set("age", 21);
var options: bindable.BindingOptions = {
@@ -346,16 +327,15 @@ export function test_binding_value_to_model() {
};
slider.bind(options, model);
//// slider.value is now 21
// <hide>
// >> (hide)
TKUnit.assertEqual(slider.value, 21, "slider.value");
// </hide>
// << (hide)
model.set("age", 22);
//// slider.value is now 22
// <hide>
// >> (hide)
TKUnit.assertEqual(slider.value, 22, "slider.value");
// </hide>
// ```
// </snippet>
// << (hide)
// << article-binding-value-property
}
helper.buildUIAndRunTest(slider, testAction);

24
apps/tests/ui/slider/slider.md Normal file
View File

@@ -0,0 +1,24 @@
---
nav-title: "slider How-To"
title: "How-To"
description: "Examples for using slider"
---
# Slider
Using a slider requires the Slider module.
<snippet id='article-require-slider'/>
### Binding the Progress and Slider value properties to a observable view-model property.
``` XML
<Page loaded="pageLoaded">
<StackLayout orientation="vertical">
{%raw%}<Progress value="{{ someProperty }}" />
<Slider value="{{ someProperty }}" />{%endraw%}
</StackLayout>
</Page>
```
<snippet id='article-binding-slider-properties'/>
### Creating a slider
<snippet id='article-creating-slider'/>
### Setting the slider value and bounds
<snippet id='article-setting-slider-values'/>
### Binding value property to a model
<snippet id='article-binding-value-property'/>

43
apps/tests/ui/style/style-tests.ts
View File

@@ -13,9 +13,7 @@ import viewModule = require("ui/core/view");
import styleModule = require("ui/styling/style");
import dependencyObservableModule = require("ui/core/dependency-observable");
// <snippet module="ui/styling" title="styling">
// # Styling
// </snippet>
export function test_css_dataURI_is_applied_to_backgroundImageSource() {
var stack = new stackModule.StackLayout();
@@ -133,20 +131,15 @@ export function test_css_is_applied_inside_NestedControls() {
// Basic selector tests
export function test_setting_css() {
// <snippet module="ui/styling" title="styling">
// ### Setting CSS to a page
// ``` JavaScript
// >> article-setting-css-page
var page = new pageModule.Page();
page.css = ".title { font-size: 20 }";
// ```
// </snippet>
// << article-setting-css-page
TKUnit.assert(page.css === ".title { font-size: 20 }", "CSS not set correctly.");
}
// <snippet module="ui/styling" title="styling">
// ## Using CSS selectors
// </snippet>
// Basic selector tests
export function test_type_selector() {
@@ -155,9 +148,7 @@ export function test_type_selector() {
let btn: buttonModule.Button;
let label: labelModule.Label;
// <snippet module="ui/styling" title="styling">
// ### Using type selector
// ``` JavaScript
// >> article-using-type-selector
page.css = "button { background-color: red; }";
//// Will be styled
@@ -165,8 +156,7 @@ export function test_type_selector() {
//// Won't be styled
label = new labelModule.Label();
// ```
// </snippet>
// << article-using-type-selector
let stack = new stackModule.StackLayout();
page.content = stack;
@@ -184,9 +174,7 @@ export function test_class_selector() {
let btnWithClass: buttonModule.Button;
let btnWithNoClass: buttonModule.Button;
// <snippet module="ui/styling" title="styling">
// ### Using class selector
// ``` JavaScript
// >> article-using-class-selector
page.css = ".test { color: red; }";
//// Will be styled
@@ -195,8 +183,7 @@ export function test_class_selector() {
//// Won't be styled
btnWithNoClass = new buttonModule.Button();
// ```
// </snippet>
// << article-using-class-selector
var stack = new stackModule.StackLayout();
page.content = stack;
@@ -231,9 +218,7 @@ export function test_id_selector() {
let btnWithId: buttonModule.Button;
let btnWithNoId: buttonModule.Button;
// <snippet module="ui/styling" title="styling">
// ### Using id selector
// ``` JavaScript
// >> article-using-id-selector
page.css = "#myButton { color: red; }";
//// Will be styled
@@ -242,8 +227,7 @@ export function test_id_selector() {
//// Won't be styled
btnWithNoId = new buttonModule.Button();
// ```
// </snippet>
// << article-using-id-selector
var stack = new stackModule.StackLayout();
page.content = stack;
@@ -275,15 +259,12 @@ export function test_type_and_state_selector() {
page.style._resetValue(styling.properties.colorProperty);
var btn: buttonModule.Button;
// <snippet module="ui/styling" title="styling">
// ### Using state selector
// ``` JavaScript
// >>article-using-state-selector
page.css = "button:pressed { color: red; }";
//// Will be red when pressed
btn = new buttonModule.Button();
// ```
// </snippet>
// << article-using-state-selector
var stack = new stackModule.StackLayout();
page.content = stack;
stack.addChild(btn);

18
apps/tests/ui/style/style.md Normal file
View File

@@ -0,0 +1,18 @@
---
nav-title: "styling How-To"
title: "How-To"
description: "Examples for using styling"
---
# Styling
### Setting CSS to a page
<snippet id='article-setting-css-page'/>
## Using CSS selectors
### Using type selector
<snippet id='article-using-type-selector'/>
### Using class selector
<snippet id='article-using-class-selector' />
### Using id selector
<snippet id='article-using-id-selector'/>
### Using state selector
<snippet id='article-using-state-selector'/>
For information and example how to use style properties please refer to special [**Styling**](../../../styling.md) topic.

64
apps/tests/ui/switch/switch-tests.ts
View File

@@ -5,41 +5,27 @@ import bindable = require("ui/core/bindable");
import observable = require("data/observable");
import color = require("color");
import platform = require("platform");
// <snippet module="ui/switch" title="switch">
// # Switch
// Using a switch requires the Switch module.
// ``` JavaScript
// >> article-require-switch
import switchModule = require("ui/switch");
// ```
// << article-require-switch
// ### Binding the Switch checked property and Button isEanbled property to a observable view-model property.
//``` XML
// <Page loaded="pageLoaded">
// <StackLayout orientation="vertical">
// {%raw%}<Switch checked="{{ someProperty }}" />
// <Button isEanbled="{{ someProperty }}" text="This is a Button!" />{%endraw%}
// </StackLayout>
// </Page>
//```
//``` JavaScript
// function pageLoaded(args) {
// var page = args.object;
// var obj = new observable.Observable();
// obj.set("someProperty", false);
// page.bindingContext = obj;
// }
// exports.pageLoaded = pageLoaded;
//```
// </snippet>
// >> article-binding-switch-property
function pageLoaded(args) {
var page = args.object;
var obj = new observable.Observable();
obj.set("someProperty", false);
page.bindingContext = obj;
}
exports.pageLoaded = pageLoaded;
// << article-binding-switch-property
export function test_default_TNS_values() {
// <snippet module="ui/switch" title="switch">
// ### Creating a switch
// ``` JavaScript
// >> article-create-switch
var mySwitch = new switchModule.Switch();
// ```
// </snippet>
// << article-create-switch
TKUnit.assertEqual(mySwitch.checked, false, "Default switch.checked");
}
@@ -81,12 +67,9 @@ if (platform.device.os === platform.platformNames.ios) {
export function test_set_TNS_checked_updates_native_checked() {
var mySwitch = new switchModule.Switch();
function testAction(views: Array<viewModule.View>) {
// <snippet module="ui/switch" title="switch">
// ### Setting the checked property of a switch
// ``` JavaScript
// >> article-setting-checked-property
mySwitch.checked = true;
// ```
// </snippet>
// << article-setting-checked-property
TKUnit.assertEqual(getNativeValue(mySwitch), true, "Native checked is different from TNS checked.");
};
@@ -131,9 +114,7 @@ export function test_binding_value_to_model() {
var mySwitch = new switchModule.Switch()
function testAction(views: Array<viewModule.View>) {
// <snippet module="ui/switch" title="switch">
// ### Binding checked property to a model
// ``` JavaScript
// >> aricle-binding-checked-property
var model = new observable.Observable();
model.set("enabled", true);
var options: bindable.BindingOptions = {
@@ -142,16 +123,15 @@ export function test_binding_value_to_model() {
};
mySwitch.bind(options, model);
//// mySwitch.checked is now true
// <hide>
// >> (hide)
TKUnit.assertEqual(mySwitch.checked, true, "mySwitch.checked");
// </hide>
// << (hide)
model.set("enabled", false);
//// mySwitch.checked is now false
// <hide>
// >> (hide)
TKUnit.assertEqual(mySwitch.checked, false, "mySwitch.checked");
// </hide>
// ```
// </snippet>
// << (hide)
// << aricle-binding-checked-property
}
helper.buildUIAndRunTest(mySwitch, testAction);

24
apps/tests/ui/switch/switch.md Normal file
View File

@@ -0,0 +1,24 @@
---
nav-title: "switch How-To"
title: "How-To"
description: "Examples for using switch"
---
# Switch
Using a switch requires the Switch module.
<snippet id='article-require-switch'/>
### Binding the Switch checked property and Button isEanbled property to a observable view-model property.
``` XML
<Page loaded="pageLoaded">
<StackLayout orientation="vertical">
{%raw%}<Switch checked="{{ someProperty }}" />
<Button isEanbled="{{ someProperty }}" text="This is a Button!" />{%endraw%}
</StackLayout>
</Page>
```
<snippet id='article-binding-switch-property'/>
### Creating a switch
<snippet id='article-create-switch'/>
### Setting the checked property of a switch
<snippet id='article-setting-checked-property'/>
### Binding checked property to a model
<snippet id='aricle-binding-checked-property'/>

47
apps/tests/ui/tab-view/tab-view-tests.ts
View File

@@ -5,44 +5,19 @@ import labelModule = require("ui/label");
import stackLayoutModule = require("ui/layouts/stack-layout");
import tabViewTestsNative = require("./tab-view-tests-native");
// <snippet module="ui/tab-view" title="TabView">
// # TabView
// ### Declaring the TabView in xml.
//``` XML
// <Page>
// <TabView>
// <TabView.items>
// <TabViewItem title="Tab 1">
// <TabViewItem.view>
// <Label text="Label in Tab1" />
// </TabViewItem.view>
// </TabViewItem>
// <TabViewItem title="Tab 2">
// <TabViewItem.view>
// <Label text="Label in Tab2" />
// </TabViewItem.view>
// </TabViewItem>
// </TabView.items>
// </TabView>
// </Page>
//```
// Using a TabView requires the "ui/tab-view" module.
// ``` JavaScript
// >> article-require-tabview-module
import tabViewModule = require("ui/tab-view");
// ```
// </snippet>
// << article-require-tabview-module
export class TabViewTest extends testModule.UITest<tabViewModule.TabView> {
public create(): tabViewModule.TabView {
// <snippet module="ui/tab-view" title="TabView">
// ## Creating a TabView
// ``` JavaScript
// >> article-create-tabview
var tabView = new tabViewModule.TabView();
// ```
// </snippet>
// << article-create-tabview
tabView.id = "TabView";
return tabView;
}
@@ -92,9 +67,7 @@ export class TabViewTest extends testModule.UITest<tabViewModule.TabView> {
public testSelectedIndexBecomesZeroWhenItemsBoundToNonEmptyArray = function () {
var tabView = this.testView;
// <snippet module="ui/tab-view" title="TabView">
// ### Binding TabView.items
// ``` JavaScript
// >> article-binding-tabview-items
var items = [];
var StackLayout0 = new stackLayoutModule.StackLayout();
var label0 = new labelModule.Label();
@@ -115,8 +88,7 @@ export class TabViewTest extends testModule.UITest<tabViewModule.TabView> {
};
items.push(tabEntry1);
tabView.items = items;
// ```
// </snippet>
// << article-binding-tabview-items
this.waitUntilTestElementIsLoaded();
@@ -131,12 +103,9 @@ export class TabViewTest extends testModule.UITest<tabViewModule.TabView> {
tabView.items = this._createItems(10);
this.waitUntilTestElementIsLoaded();
// <snippet module="ui/tab-view" title="TabView">
// ### Selecting a tab programmatically
// ``` JavaScript
// >> article-select-tab
tabView.selectedIndex = 9;
// ```
// </snippet>
// << article-select-tab
tabView.items = [];
var expectedValue = undefined;

33
apps/tests/ui/tab-view/tab-view.md Normal file
View File

@@ -0,0 +1,33 @@
---
nav-title: "TabView How-To"
title: "How-To"
description: "Examples for using TabView"
---
# TabView
### Declaring the TabView in xml.
``` XML
<Page>
<TabView>
<TabView.items>
<TabViewItem title="Tab 1">
<TabViewItem.view>
<Label text="Label in Tab1" />
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Tab 2">
<TabViewItem.view>
<Label text="Label in Tab2" />
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>
```
Using a TabView requires the "ui/tab-view" module.
<snippet id='article-require-tabview-module'/>
### Binding TabView.items
<snippet id='article-binding-tabview-items'/>
### Selecting a tab programmatically
<snippet id='article-select-tab'/>
## Creating a TabView
<snippet id='article-create-tabview'/>

120
apps/tests/ui/text-field/text-field-tests.ts
View File

@@ -9,47 +9,32 @@ import platform = require("platform");
import formattedStringModule = require("text/formatted-string");
import spanModule = require("text/span");
// <snippet module="ui/text-field" title="TextField">
// # TextField
// Using a TextField requires the text-field module.
// ``` JavaScript
// >> require-textfield
import textFieldModule = require("ui/text-field");
// ```
// << require-textfield
// Other frequently used modules when working with buttons include:
// ``` JavaScript
import bindable = require("ui/core/bindable");
// >> require-observable
import observable = require("data/observable");
// ```
// << require-observable
// ### Binding two TextFields text property to observable view-model property.
//``` XML
// <Page loaded="pageLoaded">
// <StackLayout orientation="vertical">
// {%raw%}<TextField text="{{ someProperty }}" />
// <TextField text="{{ someProperty }}" />{%endraw%}
// </StackLayout>
// </Page>
//```
//``` JavaScript
// function pageLoaded(args) {
// var page = args.object;
// var obj = new observable.Observable();
// obj.set("someProperty", "Please change this text!");
// page.bindingContext = obj;
// }
// exports.pageLoaded = pageLoaded;
//```
// >> binding-text-property
function pageLoaded(args) {
var page = args.object;
var obj = new observable.Observable();
obj.set("someProperty", "Please change this text!");
page.bindingContext = obj;
}
exports.pageLoaded = pageLoaded;
// << binding-text-property
// </snippet>
var _createTextFieldFunc = function (): textFieldModule.TextField {
// <snippet module="ui/text-field" title="TextField">
// ## Creating a TextField
// ``` JavaScript
// >> creating-textfield
var textField = new textFieldModule.TextField();
// ```
// </snippet>
// << creating-textfield
textField.text = "textField";
return textField;
}
@@ -58,12 +43,9 @@ export var testSetText = function () {
helper.buildUIAndRunTest(_createTextFieldFunc(), function (views: Array<viewModule.View>) {
var textField = <textFieldModule.TextField>views[0];
// <snippet module="ui/text-field" title="TextField">
// ### Setting the text of a TextField
// ``` JavaScript
// >> setting-text-property
textField.text = "Hello, world!";
// ```
// </snippet>
// << setting-text-property
var expectedValue = "Hello, world!";
var actualValue = textFieldTestsNative.getNativeText(textField);
@@ -101,12 +83,9 @@ export var testSetHintToNumber = function () {
var textField = <textFieldModule.TextField>views[0];
var expectedValue = 1;
// <snippet module="ui/text-field" title="TextField">
// ### Setting the text of a TextField
// ``` JavaScript
// >> setting-hint-property
textField.hint = <any>expectedValue;
// ```
// </snippet>
// << setting-hint-property
var actualValue = textFieldTestsNative.getNativeHint(textField);
TKUnit.assert(<any>actualValue == expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
@@ -117,9 +96,7 @@ export var testBindTextDirectlyToModel = function () {
helper.buildUIAndRunTest(_createTextFieldFunc(), function (views: Array<viewModule.View>) {
var textField = <textFieldModule.TextField>views[0];
// <snippet module="ui/text-field" title="TextField">
// ### Binding text property directly to model
// ``` JavaScript
// >> binding-text-property-second
var model = new observable.Observable();
model.set("username", "john");
var options: bindable.BindingOptions = {
@@ -128,18 +105,17 @@ export var testBindTextDirectlyToModel = function () {
}
textField.bind(options, model);
//// textField.text is now "john"
// <hide>
// >> (hide)
TKUnit.assert(textField.text === "john", "Actual: " + textField.text + "; Expected: " + "john");
TKUnit.assert(textFieldTestsNative.getNativeText(textField) === "john", "Actual: " + textFieldTestsNative.getNativeText(textField) + "; Expected: " + "john");
// </hide>
// << (hide)
model.set("username", "mary");
//// textField.text is now "mary"
// <hide>
// >> (hide)
TKUnit.assert(textField.text === "mary", "Actual: " + textField.text + "; Expected: " + "mary");
TKUnit.assert(textFieldTestsNative.getNativeText(textField) === "mary", "Actual: " + textFieldTestsNative.getNativeText(textField) + "; Expected: " + "mary");
// </hide>
// ```
// </snippet>
// << (hide)
// << binding-text-property-second
});
}
@@ -195,12 +171,9 @@ export var testSetHint = function () {
helper.buildUIAndRunTest(_createTextFieldFunc(), function (views: Array<viewModule.View>) {
var textField = <textFieldModule.TextField>views[0];
// <snippet module="ui/text-field" title="TextField">
// ### Setting the hint of a TextField
// ``` JavaScript
// >> setting-hint-text
textField.hint = "type your username here";
// ```
// </snippet>
// << setting-hint-text
var expectedValue = "type your username here";
var actualValue = textFieldTestsNative.getNativeHint(textField);
@@ -212,9 +185,7 @@ export var testBindHintDirectlyToModel = function () {
helper.buildUIAndRunTest(_createTextFieldFunc(), function (views: Array<viewModule.View>) {
var textField = <textFieldModule.TextField>views[0];
// <snippet module="ui/text-field" title="TextField">
// ### Binding hint property directly to model
// ``` JavaScript
// >> binding-hint-property
var model = new observable.Observable();
model.set("hint", "type your username here");
var options: bindable.BindingOptions = {
@@ -223,18 +194,17 @@ export var testBindHintDirectlyToModel = function () {
}
textField.bind(options, model);
//// textField.hint is now "type your username here"
// <hide>
// >> (hide)
TKUnit.assert(textField.hint === "type your username here", "Actual: " + textField.text + "; Expected: " + "type your username here");
TKUnit.assert(textFieldTestsNative.getNativeHint(textField) === "type your username here", "Actual: " + textFieldTestsNative.getNativeHint(textField) + "; Expected: " + "type your username here");
// </hide>
// << (hide)
model.set("hint", "type your password here");
//// textField.hint is now "type your password here"
// <hide>
// >> (hide)
TKUnit.assert(textField.hint === "type your password here", "Actual: " + textField.text + "; Expected: " + "type your password here");
TKUnit.assert(textFieldTestsNative.getNativeHint(textField) === "type your password here", "Actual: " + textFieldTestsNative.getNativeHint(textField) + "; Expected: " + "type your password here");
// </hide>
// ```
// </snippet>
// << (hide)
// << binding-hint-property
});
}
@@ -266,12 +236,9 @@ export var testSetSecure = function () {
helper.buildUIAndRunTest(_createTextFieldFunc(), function (views: Array<viewModule.View>) {
var textField = <textFieldModule.TextField>views[0];
// <snippet module="ui/text-field" title="TextField">
// ### Setting the secure property of a TextField
// ``` JavaScript
// >> setting-secure-property
textField.secure = true;
// ```
// </snippet>
// << setting-secure-property
var expectedValue = true;
var actualValue = textFieldTestsNative.getNativeSecure(textField);
@@ -283,9 +250,7 @@ export var testBindSecureDirectlyToModel = function () {
helper.buildUIAndRunTest(_createTextFieldFunc(), function (views: Array<viewModule.View>) {
var textField = <textFieldModule.TextField>views[0];
// <snippet module="ui/text-field" title="TextField">
// ### Binding secure property directly to model
// ``` JavaScript
// >> binding-secure-property
var model = new observable.Observable();
model.set("secure", true);
var options: bindable.BindingOptions = {
@@ -294,18 +259,17 @@ export var testBindSecureDirectlyToModel = function () {
}
textField.bind(options, model);
//// textField.secure is now true
// <hide>
// >> (hide)
TKUnit.assert(textField.secure === true, "Actual: " + textField.secure + "; Expected: " + true);
TKUnit.assert(textFieldTestsNative.getNativeSecure(textField) === true, "Actual: " + textFieldTestsNative.getNativeSecure(textField) + "; Expected: " + true);
// </hide>
// << (hide)
model.set("secure", false);
//// textField.secure is now false
// <hide>
// >> (hide)
TKUnit.assert(textField.secure === false, "Actual: " + textField.secure + "; Expected: " + false);
TKUnit.assert(textFieldTestsNative.getNativeSecure(textField) === false, "Actual: " + textFieldTestsNative.getNativeSecure(textField) + "; Expected: " + false);
// </hide>
// ```
// </snippet>
// << (hide)
// << binding-secure-property
});
}

35
apps/tests/ui/text-field/text-field.md Normal file
View File

@@ -0,0 +1,35 @@
---
nav-title: "TextField How-To"
title: "How-To"
description: "Examples for using TextField"
---
# TextField
Using a TextField requires the text-field module.
<snippet id='require-textfield'/>
<snippet id='require-observable'/>
### Binding two TextFields text property to observable view-model property.
```XML
<Page loaded="pageLoaded">
<StackLayout orientation="vertical">
{%raw%}<TextView text="{{ someProperty }}" />
<TextView text="{{ someProperty }}" />{%endraw%}
</StackLayout>
</Page>
```
<snippet id='binding-text-property'/>
## Creating a TextField
<snippet id='creating-textfield'/>
### Setting the text of a TextField
<snippet id='setting-text-property'/>
### Setting the text of a TextField
<snippet id='setting-hint-property'/>
### Binding text property directly to model
<snippet id='binding-text-property-second'/>
### Setting the hint of a TextField
<snippet id='setting-hint-text'/>
### Binding hint property directly to model
<snippet id='binding-hint-property'/>
### Setting the secure property of a TextField
<snippet id='setting-secure-property'/>
### Binding secure property directly to model
<snippet id='binding-secure-property'/>

103
apps/tests/ui/text-view/text-view-tests.ts
View File

@@ -7,29 +7,25 @@ import colorModule = require("color");
import enums = require("ui/enums");
import platform = require("platform");
// <snippet module="ui/text-view" title="TextView">
// # TextView
// Using a TextView requires the text-view module.
// ``` JavaScript
// >> require-textmodules
import textViewModule = require("ui/text-view");
// ```
// Other frequently used modules when working with buttons include:
// ``` JavaScript
import bindable = require("ui/core/bindable");
import observable = require("data/observable");
// ```
// << require-textmodules
// ### Binding two TextViews text property to observable view-model property.
//``` XML
// Other frequently used modules when working with buttons include:
import bindable = require("ui/core/bindable");
// >> require-observable
import observable = require("data/observable");
// << require-observable
// >> text-view-xml
// <Page loaded="pageLoaded">
// <StackLayout orientation="vertical">
// {%raw%}<TextView text="{{ someProperty }}" />
// <TextView text="{{ someProperty }}" />{%endraw%}
// </StackLayout>
// </Page>
//```
//``` JavaScript
// << text-view-xml
// >> observable-declare
// function pageLoaded(args) {
// var page = args.object;
// var obj = new observable.Observable();
@@ -37,17 +33,12 @@ import observable = require("data/observable");
// page.bindingContext = obj;
// }
// exports.pageLoaded = pageLoaded;
//```
// </snippet>
// << observable-declare
var _createTextViewFunc = function (): textViewModule.TextView {
// <snippet module="ui/text-view" title="TextView">
// ### Creating a TextView
// ``` JavaScript
// >> text-view-create
var textView = new textViewModule.TextView();
// ```
// </snippet>
// << text-view-create
textView.text = "textView";
return textView;
}
@@ -56,12 +47,9 @@ export var testSetText = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array<viewModule.View>) {
var textView = <textViewModule.TextView>views[0];
// <snippet module="ui/text-view" title="TextView">
// ### Setting the text of a TextView
// ``` JavaScript
// >> set-text-value
textView.text = "Hello, world!";
// ```
// </snippet>
// << set-text-value
var expectedValue = "Hello, world!";
var actualValue = textViewTestsNative.getNativeText(textView);
@@ -108,9 +96,7 @@ export var testBindTextDirectlyToModel = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array<viewModule.View>) {
var textView = <textViewModule.TextView>views[0];
// <snippet module="ui/text-view" title="TextView">
// ### Binding text property directly to model
// ``` JavaScript
// >> binding-text-property
var model = new observable.Observable();
model.set("username", "john");
var options: bindable.BindingOptions = {
@@ -119,18 +105,17 @@ export var testBindTextDirectlyToModel = function () {
}
textView.bind(options, model);
//// textView.text is now "john"
// <hide>
// >> (hide)
TKUnit.assert(textView.text === "john", "Actual: " + textView.text + "; Expected: " + "john");
TKUnit.assert(textViewTestsNative.getNativeText(textView) === "john", "Actual: " + textViewTestsNative.getNativeText(textView) + "; Expected: " + "john");
// </hide>
// << (hide)
model.set("username", "mary");
//// textView.text is now "mary"
// <hide>
// >> (hide)
TKUnit.assert(textView.text === "mary", "Actual: " + textView.text + "; Expected: " + "mary");
TKUnit.assert(textViewTestsNative.getNativeText(textView) === "mary", "Actual: " + textViewTestsNative.getNativeText(textView) + "; Expected: " + "mary");
// </hide>
// ```
// </snippet>
// << (hide)
// >> binding-text-property
});
}
@@ -176,12 +161,9 @@ export var testSetHint = function () {
var textView = <textViewModule.TextView>views[0];
textView.text = "";
// <snippet module="ui/text-view" title="TextView">
// ### Setting the hint of a TextView
// ``` JavaScript
// >> set-textview-hint
textView.hint = "type your username here";
// ```
// </snippet>
// << set-textview-hint
var expectedValue = "type your username here";
var actualValue = textViewTestsNative.getNativeHint(textView);
@@ -194,9 +176,7 @@ export var testBindHintDirectlyToModel = function () {
var textView = <textViewModule.TextView>views[0];
textView.text = "";
// <snippet module="ui/text-view" title="TextView">
// ### Binding hint property directly to model
// ``` JavaScript
// >> binding-hint-property
var model = new observable.Observable();
model.set("hint", "type your username here");
var options: bindable.BindingOptions = {
@@ -205,18 +185,17 @@ export var testBindHintDirectlyToModel = function () {
}
textView.bind(options, model);
//// TextView.hint is now "type your username here"
// <hide>
// >> (hide)
TKUnit.assert(textView.hint === "type your username here", "Actual: " + textView.hint + "; Expected: " + "type your username here");
TKUnit.assert(textViewTestsNative.getNativeHint(textView) === "type your username here", "Actual: " + textViewTestsNative.getNativeHint(textView) + "; Expected: " + "type your username here");
// </hide>
// << (hide)
model.set("hint", "type your password here");
//// TextView.hint is now "type your password here"
// <hide>
// >> (hide)
TKUnit.assert(textView.hint === "type your password here", "Actual: " + textView.hint + "; Expected: " + "type your password here");
TKUnit.assert(textViewTestsNative.getNativeHint(textView) === "type your password here", "Actual: " + textViewTestsNative.getNativeHint(textView) + "; Expected: " + "type your password here");
// </hide>
// ```
// </snippet>
// << (hide)
// << binding-hint-property
});
}
@@ -304,12 +283,9 @@ export var testSetEditable = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array<viewModule.View>) {
var textView = <textViewModule.TextView>views[0];
// <snippet module="ui/text-view" title="TextView">
// ### Setting the editable property of a TextView
// ``` JavaScript
// >> setting-editable-property
textView.editable = false;
// ```
// </snippet>
// << setting-editable-property
var expectedValue = false;
var actualValue = textViewTestsNative.getNativeEditable(textView);
@@ -321,9 +297,7 @@ export var testBindEditableDirectlyToModel = function () {
helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array<viewModule.View>) {
var textView = <textViewModule.TextView>views[0];
// <snippet module="ui/text-view" title="TextView">
// ### Binding editable property directly to model
// ``` JavaScript
// >> binding-editable-property
var model = new observable.Observable();
model.set("editable", false);
var options: bindable.BindingOptions = {
@@ -332,18 +306,17 @@ export var testBindEditableDirectlyToModel = function () {
}
textView.bind(options, model);
//// textView.editable is now false
// <hide>
// >> (hide)
TKUnit.assert(textView.editable === false, "Actual: " + textView.text + "; Expected: " + false);
TKUnit.assert(textViewTestsNative.getNativeEditable(textView) === false, "Actual: " + textViewTestsNative.getNativeEditable(textView) + "; Expected: " + false);
// </hide>
// << (hide)
model.set("editable", true);
//// textView.editable is now true
// <hide>
// >> (hide)
TKUnit.assert(textView.editable === true, "Actual: " + textView.text + "; Expected: " + true);
TKUnit.assert(textViewTestsNative.getNativeEditable(textView) === true, "Actual: " + textViewTestsNative.getNativeEditable(textView) + "; Expected: " + true);
// </hide>
// ```
// </snippet>
// << (hide)
// << binding-editable-property
});
}

26
apps/tests/ui/text-view/text-view.md Normal file
View File

@@ -0,0 +1,26 @@
---
nav-title: "TextView How-To"
title: "How-To"
description: "Examples for using TextView"
---
# TextView
Using a TextView requires the text-view module.
<snippet id='require-textmodules'/>
<snippet id='require-observable'/>
### Binding two TextViews text property to observable view-model property.
<snippet id='text-view-xml'/>
<snippet id='observable-declare'/>
### Creating a TextView
<snippet id='text-view-create'/>
### Setting the text of a TextView
<snippet id='set-text-value'/>
### Binding text property directly to model
<snippet id='binding-text-property'/>
### Setting the hint of a TextView
<snippet id='set-textview-hint'/>
### Binding hint property directly to model
<snippet id='binding-hint-property'/>
### Setting the editable property of a TextView
<snippet id='setting-editable-property'/>
### Binding editable property directly to model
<snippet id='binding-editable-property'/>

15
apps/tests/ui/time-picker/time-picker-tests.ts
View File

@@ -4,13 +4,9 @@ import timePickerTestsNative = require("./time-picker-tests-native");
import color = require("color");
import platform = require("platform");
// <snippet module="ui/time-picker" title="TimePicker">
// # TimePicker
// Using a TimePicker requires the "ui/time-picker" module.
// ``` JavaScript
// >> require-time-picker
import timePickerModule = require("ui/time-picker");
// ```
// </snippet>
// << require-time-picker
function assertTime(timePicker: timePickerModule.TimePicker, expectedHour: number, expectedMinute) {
TKUnit.assertEqual(timePicker.hour, expectedHour, "timePicker.hour");
@@ -28,14 +24,11 @@ export class TimePickerTest extends testModule.UITest<timePickerModule.TimePicke
}
public test_DummyForCodeSnippet() {
// <snippet module="ui/time-picker" title="TimePicker">
// ## Configuring a TimePicker
// ``` JavaScript
// >> declare-time-picker
var timePicker = new timePickerModule.TimePicker();
timePicker.hour = 9;
timePicker.minute = 25;
// ```
// </snippet>
// << declare-time-picker
}
private setUpTimePicker(hour?: number, minute?: number) {

10
apps/tests/ui/time-picker/time-picker.md Normal file
View File

@@ -0,0 +1,10 @@
---
nav-title: "TimePicker How-To"
title: "How-To"
description: "Examples for using TimePicker"
---
# TimePicker
Using a TimePicker requires the "ui/time-picker" module.
<snippet id='require-time-picker'/>
## Configuring a TimePicker
<snippet id='declare-time-picker'/>

56
apps/tests/ui/web-view/web-view-tests.ts
View File

@@ -1,42 +1,31 @@
import TKUnit = require("../../TKUnit");
import testModule = require("../../ui-test");
// <snippet module="ui/web-view" title="WebView">
// # WebView
// Using a WebView requires the web-view module.
// ``` JavaScript
// >> webview-require
import webViewModule = require("ui/web-view");
// ```
// </snippet>
// << webview-require
// <snippet module="ui/web-view" title="WebView">
// ### Declaring a WebView.
//``` XML
// >> declare-webview-xml
// <Page>
// {%raw%}<WebView src="{{ someUrl | pathToLocalFile | htmlString }}" />{%endraw%}
// </Page>
//```
// << declare-webview-xml
// </snippet>
export class WebViewTest extends testModule.UITest<webViewModule.WebView> {
public create(): webViewModule.WebView {
// <snippet module="ui/web-view" title="WebView">
// ### Creating a WebView
// ``` JavaScript
// >> declare-webview
let webView = new webViewModule.WebView();
// ```
// </snippet>
// << declare-webview
return webView;
}
public testLoadExistingUrl(done) {
let webView = this.testView;
// <snippet module="ui/web-view" title="WebView">
// ### Using WebView
// ``` JavaScript
// >> webview-url
webView.on(webViewModule.WebView.loadFinishedEvent, function (args: webViewModule.LoadEventData) {
let message;
if (!args.error) {
@@ -46,7 +35,7 @@ export class WebViewTest extends testModule.UITest<webViewModule.WebView> {
message = "Error loading " + args.url + ": " + args.error;
}
// <hide>
// >> (hide)
try {
TKUnit.assertNull(args.error, args.error);
TKUnit.assertEqual(args.url, "https://github.com/", "args.url");
@@ -56,21 +45,18 @@ export class WebViewTest extends testModule.UITest<webViewModule.WebView> {
done(e);
}
// </hide>
// << (hide)
});
webView.url = "https://github.com/";
// ```
// </snippet>
// << webview-url
}
public testLoadLocalFile(done) {
let webView = this.testView;
// <snippet module="ui/web-view" title="WebView">
// ### Using WebView
// ``` JavaScript
// >> webview-localfile
webView.on(webViewModule.WebView.loadFinishedEvent, function (args: webViewModule.LoadEventData) {
// <hide>
// >> (hide)
let actual;
let expectedTitle = 'MyTitle';
let expectedHtml = '<span style="color:red">TestÖ</span>';
@@ -89,7 +75,7 @@ export class WebViewTest extends testModule.UITest<webViewModule.WebView> {
catch (e) {
done(e);
}
// </hide>
// << (hide)
let message;
if (!args.error) {
@@ -100,18 +86,15 @@ export class WebViewTest extends testModule.UITest<webViewModule.WebView> {
}
});
webView.src = "~/ui/web-view/test.html";
// ```
// </snippet>
// << webview-localfile
}
public testLoadHTMLString(done) {
let webView = this.testView;
// <snippet module="ui/web-view" title="WebView">
// ### Using WebView
// ``` JavaScript
// >> webview-string
webView.on(webViewModule.WebView.loadFinishedEvent, function (args: webViewModule.LoadEventData) {
// <hide>
// >> (hide)
let actual;
let expected;
@@ -132,7 +115,7 @@ export class WebViewTest extends testModule.UITest<webViewModule.WebView> {
catch (e) {
done(e);
}
// </hide>
// << (hide)
let message;
if (!args.error) {
@@ -143,8 +126,7 @@ export class WebViewTest extends testModule.UITest<webViewModule.WebView> {
}
});
webView.src = '<!DOCTYPE html><html><head><title>MyTitle</title><meta charset="utf-8" /></head><body><span style="color:red">TestÖ</span></body></html>';
// ```
// </snippet>
// << webview-string
}
public testLoadInvalidUrl(done) {

18
apps/tests/ui/web-view/web-view.md Normal file
View File

@@ -0,0 +1,18 @@
---
nav-title: "WebView How-To"
title: "How-To"
description: "Examples for using WebView"
---
# WebView
Using a WebView requires the web-view module.
<snippet id='webview-require'/>
### Declaring a WebView.
<snippet id='declare-webview-xml'/>
### Creating a WebView
<snippet id='declare-webview'/>
### Using WebView
<snippet id='webview-url'/>
### Using WebView
<snippet id='webview-localfile'/>
### Using WebView
<snippet id='webview-string'/>

18
apps/tests/xml-parser-tests/xml-parser-tests.ts
View File

@@ -1,10 +1,6 @@
// <snippet module="xml" title="xml">
// # Xml module
// Using xml requires the Xml module.
// ``` JavaScript
// >> xml-module-snippet
//var xmlModule = require("xml");
// ```
// </snippet>
// << xml-module-snippet
import TKUnit = require("../TKUnit");
import xmlModule = require("xml");
@@ -61,7 +57,7 @@ export var test_XmlParser_OnErrorIsCalledWhenAnErrorOccurs = function () {
var e;
var xmlParser = new xmlModule.XmlParser(
function (event: xmlModule.ParserEvent) {
//
},
function (error: Error) {
e = error;
@@ -121,9 +117,8 @@ export var test_XmlParser_IntegrationTest = function () {
};
export var test_XmlParser_DummyDocumentationTest = function () {
// <snippet module="xml" title="xml">
// ### Parse XML
// ``` JavaScript
// >> xml-parser-snippet
var onEventCallback = function (event: xmlModule.ParserEvent) {
switch (event.eventType) {
@@ -168,8 +163,7 @@ export var test_XmlParser_DummyDocumentationTest = function () {
//// Text = "I am second"
//// EndElement Second
//// EndElement Document
// ```
// </snippet>
// << xml-parser-snippet
};
export var test_XmlParser_NamespacesTest = function () {

11
apps/tests/xml-parser-tests/xml-parser.md Normal file
View File

@@ -0,0 +1,11 @@
---
nav-title: "xml How-To"
title: "How-To"
description: "Examples for using xml"
---
# Xml module
Using xml requires the Xml module.
<snippet id='xml-module-snippet'/>
### Parse XML
<snippet id='xml-parser-snippet'/>

2
gruntfile.js
View File

@@ -429,7 +429,7 @@ module.exports = function(grunt) {
cmd: "grunt simplemocha:node"
},
injectArticles: {
cmd: "./node_modules/.bin/mdinject --root=<%= localCfg.srcAppsTests %> --docsroot=<%= localCfg.outArticlesDir %>"
cmd: "node node_modules/markdown-snippet-injector/index.js --root=<%= localCfg.srcAppsTests %> --docsroot=<%= localCfg.outArticlesDir %>"
}
},
multidest: {