mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-17 04:41:36 +08:00
How-To md files with markdown-snippet-injector
This commit is contained in:
Nikolay Iliev
@ -1,27 +1,19 @@
|
||||
// <snippet module="ui/frame" title="frame">
|
||||
// # Frame
|
||||
// To perform navigation, you will need a reference to the topmost frame of the application.
|
||||
// ``` JavaScript
|
||||
// >> frame-require
|
||||
import frameModule = require("ui/frame");
|
||||
var topmost = frameModule.topmost();
|
||||
// ```
|
||||
// </snippet>
|
||||
// << frame-require
|
||||
|
||||
import labelModule = require("ui/label");
|
||||
import pagesModule = require("ui/page");
|
||||
|
||||
export var ignore_test_DummyTestForSnippetOnly0 = function () {
|
||||
// <snippet module="ui/frame" title="frame">
|
||||
// ### Navigating to a Module
|
||||
// ``` JavaScript
|
||||
// >> frame-navigating
|
||||
topmost.navigate("details-page");
|
||||
// ```
|
||||
// </snippet>
|
||||
// << frame-navigating
|
||||
}
|
||||
|
||||
export var ignore_test_DummyTestForSnippetOnly1 = function () {
|
||||
// <snippet module="ui/frame" title="frame">
|
||||
// ### Navigating with a Factory Function
|
||||
// ``` JavaScript
|
||||
// >> frame-factory-func
|
||||
var factoryFunc = function () {
|
||||
var label = new labelModule.Label();
|
||||
label.text = "Hello, world!";
|
||||
@ -30,29 +22,22 @@ export var ignore_test_DummyTestForSnippetOnly1 = function () {
|
||||
return page;
|
||||
};
|
||||
topmost.navigate(factoryFunc);
|
||||
// ```
|
||||
// </snippet>
|
||||
// <<frame-factory-func
|
||||
}
|
||||
|
||||
export var ignore_test_DummyTestForSnippetOnly2 = function () {
|
||||
// <snippet module="ui/frame" title="frame">
|
||||
// ### Navigating with NavigationEntry
|
||||
// ``` JavaScript
|
||||
// >> frame-naventry
|
||||
var navigationEntry = {
|
||||
moduleName: "details-page",
|
||||
context: { info: "something you want to pass to your page" },
|
||||
animated: false
|
||||
};
|
||||
topmost.navigate(navigationEntry);
|
||||
// ```
|
||||
// </snippet>
|
||||
// << frame-naventry
|
||||
}
|
||||
|
||||
export var ignore_test_DummyTestForSnippetOnly3 = function () {
|
||||
// <snippet module="ui/frame" title="frame">
|
||||
// ### Navigating Back
|
||||
// ``` JavaScript
|
||||
// >> frame-back
|
||||
topmost.goBack();
|
||||
// ```
|
||||
// </snippet>
|
||||
// << frame-back
|
||||
}
|
||||
20
apps/tests/frame.md
Normal file
20
apps/tests/frame.md
Normal file
@ -0,0 +1,20 @@
|
||||
---
|
||||
nav-title: "frame How-To"
|
||||
title: "How-To"
|
||||
description: "Examples for using frame"
|
||||
---
|
||||
# Frame
|
||||
To perform navigation, you will need a reference to the topmost frame of the application.
|
||||
<snippet id='frame-require'/>
|
||||
|
||||
### Navigating to a Module
|
||||
<snippet id='frame-navigating'/>
|
||||
|
||||
### Navigating with a Factory Function
|
||||
<snippet id='frame-factory-func'/>
|
||||
|
||||
### Navigating with NavigationEntry
|
||||
<snippet id='frame-naventry'/>
|
||||
|
||||
### Navigating Back
|
||||
<snippet id='frame-back'/>
|
||||
@ -5,28 +5,15 @@ import imageModule = require("ui/image");
|
||||
import platform = require("platform");
|
||||
import color = require("color");
|
||||
|
||||
// <snippet module="ui/activity-indicator" title="activity-indicator">
|
||||
// # ActivityIndicator
|
||||
// Using the activity indicator requires the ActivityIndicator module.
|
||||
// ``` JavaScript
|
||||
// >> activity-indicator-require
|
||||
import activityIndicatorModule = require("ui/activity-indicator");
|
||||
// ```
|
||||
// ### Binding the activity indicator busy property to a view-model property.
|
||||
//``` XML
|
||||
// <Page>
|
||||
// {%raw%}<ActivityIndicator busy="{{ isLoading }}" />{%endraw%}
|
||||
// </Page>
|
||||
//```
|
||||
// </snippet>
|
||||
// << activity-indicator-require
|
||||
|
||||
var ASYNC = 0.2;
|
||||
export function test_default_TNS_values() {
|
||||
// <snippet module="ui/activity-indicator" title="activity-indicator">
|
||||
// ### Creating an activity indicator
|
||||
// ``` JavaScript
|
||||
// >> activity-indicator-create
|
||||
var indicator = new activityIndicatorModule.ActivityIndicator();
|
||||
// ```
|
||||
// </snippet>
|
||||
// << activity-indicator-create
|
||||
|
||||
TKUnit.assertEqual(indicator.busy, false, "Default indicator.busy");
|
||||
}
|
||||
@ -76,9 +63,7 @@ if (platform.device.os === platform.platformNames.ios) {
|
||||
function binding_busy_to_image() {
|
||||
/* tslint:enable:no-unused-variable */
|
||||
|
||||
// <snippet module="ui/activity-indicator" title="activity-indicator">
|
||||
// ### Showing activity indicator while image is loading
|
||||
// ``` JavaScript
|
||||
// >> activity-indicator-loading
|
||||
var image = new imageModule.Image();
|
||||
var indicator = new activityIndicatorModule.ActivityIndicator();
|
||||
indicator.width = 100;
|
||||
@ -89,8 +74,7 @@ function binding_busy_to_image() {
|
||||
sourceProperty: "isLoading",
|
||||
targetProperty: "busy"
|
||||
}, image);
|
||||
// ```
|
||||
// </snippet>
|
||||
// << activity-indicator-loading
|
||||
}
|
||||
|
||||
function getNativeBusy(indicator: activityIndicatorModule.ActivityIndicator): boolean {
|
||||
|
||||
@ -5,9 +5,8 @@ description: "Examples for using activity-indicator"
|
||||
---
|
||||
# ActivityIndicator
|
||||
Using the activity indicator requires the ActivityIndicator module.
|
||||
``` JavaScript
|
||||
var activityIndicatorModule = require("ui/activity-indicator");
|
||||
```
|
||||
<snippet id='activity-indicator-require'/>
|
||||
|
||||
### Binding the activity indicator busy property to a view-model property.
|
||||
``` XML
|
||||
<Page>
|
||||
@ -15,18 +14,7 @@ var activityIndicatorModule = require("ui/activity-indicator");
|
||||
</Page>
|
||||
```
|
||||
### Creating an activity indicator
|
||||
``` JavaScript
|
||||
var indicator = new activityIndicatorModule.ActivityIndicator();
|
||||
```
|
||||
<snippet id='activity-indicator-create'/>
|
||||
|
||||
### Showing activity indicator while image is loading
|
||||
``` JavaScript
|
||||
var image = new imageModule.Image();
|
||||
var indicator = new activityIndicatorModule.ActivityIndicator();
|
||||
indicator.width = 100;
|
||||
indicator.height = 100;
|
||||
// Bind the busy property of the indicator to the isLoading property of the image
|
||||
indicator.bind({
|
||||
sourceProperty: "isLoading",
|
||||
targetProperty: "busy"
|
||||
}, image);
|
||||
```
|
||||
<snippet id='activity-indicator-loading'/>
|
||||
|
||||
@ -7,13 +7,9 @@ import stackLayoutModule = require("ui/layouts/stack-layout");
|
||||
import colorModule = require("color");
|
||||
import enums = require("ui/enums");
|
||||
|
||||
// <snippet module="ui/animation" title="animation">
|
||||
// # Animation
|
||||
// Animating view properties requires the "ui/animation" module.
|
||||
// ``` JavaScript
|
||||
// >> animation-require
|
||||
import animation = require("ui/animation");
|
||||
// ```
|
||||
// </snippet>
|
||||
// << animation-require
|
||||
|
||||
export var test_AnimatingProperties = function(done) {
|
||||
var mainPage: pageModule.Page;
|
||||
@ -31,9 +27,7 @@ export var test_AnimatingProperties = function(done) {
|
||||
helper.navigate(pageFactory);
|
||||
TKUnit.waitUntilReady(() => { return label.isLoaded });
|
||||
|
||||
// <snippet module="ui/animation" title="animation">
|
||||
// # Animating properties
|
||||
// ``` JavaScript
|
||||
// >> animation-properties
|
||||
label.animate({
|
||||
opacity: 0.75,
|
||||
backgroundColor: new colorModule.Color("Red"),
|
||||
@ -47,19 +41,18 @@ export var test_AnimatingProperties = function(done) {
|
||||
})
|
||||
.then(() => {
|
||||
////console.log("Animation finished.");
|
||||
// <hide>
|
||||
// >> (hide)
|
||||
assertIOSNativeTransformIsCorrect(label);
|
||||
done();
|
||||
// </hide>
|
||||
// << (hide)
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e.message);
|
||||
// <hide>
|
||||
// >> (hide)
|
||||
done(e);
|
||||
// </hide>
|
||||
// << (hide)
|
||||
});
|
||||
// ```
|
||||
// </snippet>
|
||||
// << animation-properties
|
||||
}
|
||||
|
||||
export var test_CancellingAnimation = function(done) {
|
||||
@ -78,20 +71,18 @@ export var test_CancellingAnimation = function(done) {
|
||||
helper.navigate(pageFactory);
|
||||
TKUnit.waitUntilReady(() => { return label.isLoaded });
|
||||
|
||||
// <snippet module="ui/animation" title="animation">
|
||||
// # Cancelling animation
|
||||
// ``` JavaScript
|
||||
// >> animation-cancel
|
||||
var animation1 = label.createAnimation({ translate: { x: 100, y: 100 }, duration: 500 });
|
||||
animation1.play()
|
||||
.then(() => {
|
||||
////console.log("Animation finished");
|
||||
// <hide>
|
||||
// >> (hide)
|
||||
throw new Error("Cancelling Animation - Should not be in the Promise Then()");
|
||||
// </hide>
|
||||
// << (hide)
|
||||
})
|
||||
.catch((e) => {
|
||||
////console.log("Animation cancelled");
|
||||
// <hide>
|
||||
// >> (hide)
|
||||
if (!e) {
|
||||
done(new Error("Cancel path did not have proper error"));
|
||||
} else if (e.toString() === "Error: Animation cancelled.") {
|
||||
@ -99,11 +90,10 @@ export var test_CancellingAnimation = function(done) {
|
||||
} else {
|
||||
done(e);
|
||||
}
|
||||
// </hide>
|
||||
// << (hide)
|
||||
});
|
||||
animation1.cancel();
|
||||
// ```
|
||||
// </snippet>
|
||||
// << animation-cancel
|
||||
}
|
||||
|
||||
export var test_CancellingAnimate = function(done) {
|
||||
@ -122,19 +112,17 @@ export var test_CancellingAnimate = function(done) {
|
||||
helper.navigate(pageFactory);
|
||||
TKUnit.waitUntilReady(() => { return label.isLoaded });
|
||||
|
||||
// <snippet module="ui/animation" title="animation">
|
||||
// # Cancelling animation
|
||||
// ``` JavaScript
|
||||
// >> animation-cancel2
|
||||
var animation1 = label.animate({ translate: { x: 100, y: 100 }, duration: 500 })
|
||||
.then(() => {
|
||||
////console.log("Animation finished");
|
||||
// <hide>
|
||||
// >> (hide)
|
||||
throw new Error("Cancelling Animate - Should not be in Promise Then()");
|
||||
// </hide>
|
||||
// << (hide)
|
||||
})
|
||||
.catch((e) => {
|
||||
////console.log("Animation cancelled");
|
||||
// <hide>
|
||||
// >> (hide)
|
||||
if (!e) {
|
||||
done(new Error("Cancel path did not have proper error"));
|
||||
} else if (e.toString() === "Error: Animation cancelled.") {
|
||||
@ -142,11 +130,10 @@ export var test_CancellingAnimate = function(done) {
|
||||
} else {
|
||||
done(e);
|
||||
}
|
||||
// </hide>
|
||||
// << (hide)
|
||||
});
|
||||
animation1.cancel();
|
||||
// ```
|
||||
// </snippet>
|
||||
// << animation-cancel2
|
||||
}
|
||||
|
||||
export var test_ChainingAnimations = function(done) {
|
||||
@ -164,9 +151,7 @@ export var test_ChainingAnimations = function(done) {
|
||||
helper.navigate(pageFactory);
|
||||
TKUnit.waitUntilReady(() => { return label.isLoaded });
|
||||
|
||||
// <snippet module="ui/animation" title="animation">
|
||||
// # Chaining animations
|
||||
// ``` JavaScript
|
||||
// >> animation-chaining
|
||||
label.animate({ opacity: 0 })
|
||||
.then(() => label.animate({ opacity: 1 }))
|
||||
.then(() => label.animate({ translate: { x: 200, y: 200 } }))
|
||||
@ -177,19 +162,18 @@ export var test_ChainingAnimations = function(done) {
|
||||
.then(() => label.animate({ rotate: 0 }))
|
||||
.then(() => {
|
||||
////console.log("Animation finished");
|
||||
// <hide>
|
||||
// >> (hide)
|
||||
assertIOSNativeTransformIsCorrect(label);
|
||||
done();
|
||||
// </hide>
|
||||
// << (hide)
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e.message);
|
||||
// <hide>
|
||||
// >> (hide)
|
||||
done(e);
|
||||
// </hide>
|
||||
// << (hide)
|
||||
});
|
||||
// ```
|
||||
// </snippet>
|
||||
// << animation-chaining
|
||||
}
|
||||
|
||||
export var test_ReusingAnimations = function(done) {
|
||||
@ -208,9 +192,7 @@ export var test_ReusingAnimations = function(done) {
|
||||
helper.navigate(pageFactory);
|
||||
TKUnit.waitUntilReady(() => { return label.isLoaded });
|
||||
|
||||
// <snippet module="ui/animation" title="animation">
|
||||
// # Reusing animations
|
||||
// ``` JavaScript
|
||||
// >> animation-reusing
|
||||
var animation1 = label.createAnimation({ translate: { x: 100, y: 100 } });
|
||||
var animation2 = label.createAnimation({ translate: { x: 0, y: 0 } });
|
||||
|
||||
@ -222,19 +204,18 @@ export var test_ReusingAnimations = function(done) {
|
||||
.then(() => animation2.play())
|
||||
.then(() => {
|
||||
////console.log("Animation finished");
|
||||
// <hide>
|
||||
// >> (hide)
|
||||
assertIOSNativeTransformIsCorrect(label);
|
||||
done();
|
||||
// </hide>
|
||||
// << (hide)
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e.message);
|
||||
// <hide>
|
||||
// >> (hide)
|
||||
done(e);
|
||||
// </hide>
|
||||
// << (hide)
|
||||
});
|
||||
// ```
|
||||
// </snippet>
|
||||
// << animation-reusing
|
||||
}
|
||||
|
||||
export var test_AnimatingMultipleViews = function(done) {
|
||||
@ -260,9 +241,7 @@ export var test_AnimatingMultipleViews = function(done) {
|
||||
helper.navigate(pageFactory);
|
||||
TKUnit.waitUntilReady(() => { return label1.isLoaded && label2.isLoaded });
|
||||
|
||||
// <snippet module="ui/animation" title="animation">
|
||||
// # Animating multiple views simultaneously
|
||||
// ``` JavaScript
|
||||
// >> animation-multiple-views
|
||||
var animations: Array<animation.AnimationDefinition> = [
|
||||
{ target: label1, translate: { x: 200, y: 200 }, duration: 1000, delay: 0 },
|
||||
{ target: label2, translate: { x: 200, y: 200 }, duration: 1000, delay: 333 },
|
||||
@ -272,21 +251,20 @@ export var test_AnimatingMultipleViews = function(done) {
|
||||
a.play()
|
||||
.then(() => {
|
||||
////console.log("Animations finished");
|
||||
// <hide>
|
||||
// >> (hide)
|
||||
assertIOSNativeTransformIsCorrect(label1);
|
||||
assertIOSNativeTransformIsCorrect(label2);
|
||||
assertIOSNativeTransformIsCorrect(label3);
|
||||
done();
|
||||
// </hide>
|
||||
// << (hide)
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e.message);
|
||||
// <hide>
|
||||
// >> (hide)
|
||||
done(e);
|
||||
// </hide>
|
||||
// << (hide)
|
||||
});
|
||||
// ```
|
||||
// </snippet>
|
||||
// << animation-multiple-views
|
||||
}
|
||||
|
||||
export var test_AnimateOpacity = function(done) {
|
||||
|
||||
23
apps/tests/ui/animation/animation.md
Normal file
23
apps/tests/ui/animation/animation.md
Normal file
@ -0,0 +1,23 @@
|
||||
---
|
||||
nav-title: "animation How-To"
|
||||
title: "How-To"
|
||||
description: "Examples for using animation"
|
||||
---
|
||||
# Animation
|
||||
Animating view properties requires the "ui/animation" module.
|
||||
<snippet id='animation-require'/>
|
||||
|
||||
# Animating properties
|
||||
<snippet id='animation-properties'/>
|
||||
|
||||
# Cancelling animation
|
||||
<snippet id='animation-cancel'/>
|
||||
|
||||
# Chaining animations
|
||||
<snippet id='animation-chaining'/>
|
||||
|
||||
# Reusing animations
|
||||
<snippet id='animation-reusing'/>
|
||||
|
||||
# Animating multiple views simultaneously
|
||||
<snippet id='animation-multiple-views'/>
|
||||
@ -1,16 +1,3 @@
|
||||
// <snippet module="ui/border" title="Border">
|
||||
// # Border
|
||||
// Using borders requires the "ui/border" module.
|
||||
// ``` JavaScript
|
||||
// var borderModule = require("ui/border");
|
||||
// ```
|
||||
|
||||
// ### Declaring a Border.
|
||||
//``` XML
|
||||
// <Page>
|
||||
// <Border borderRadius="10" borderWidth="1" borderColor="#FF0000">
|
||||
// <Button text="OK"/>
|
||||
// </Border>
|
||||
// </Page>
|
||||
//```
|
||||
// </snippet>
|
||||
// >> border-require
|
||||
var borderModule = require("ui/border");
|
||||
// << border-require
|
||||
|
||||
17
apps/tests/ui/border/border.md
Normal file
17
apps/tests/ui/border/border.md
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
nav-title: "Border How-To"
|
||||
title: "How-To"
|
||||
description: "Examples for using Border"
|
||||
---
|
||||
# Border
|
||||
Using borders requires the "ui/border" module.
|
||||
<snippet id='border-require'/>
|
||||
|
||||
### Declaring a Border.
|
||||
``` XML
|
||||
<Page>
|
||||
<Border borderRadius="10" borderWidth="2" borderColor="#FF0000">
|
||||
<Button text="OK"/>
|
||||
</Border>
|
||||
</Page>
|
||||
```
|
||||
@ -8,28 +8,14 @@ import enums = require("ui/enums");
|
||||
import formattedStringModule = require("text/formatted-string");
|
||||
import spanModule = require("text/span");
|
||||
|
||||
// <snippet module="ui/button" title="button">
|
||||
// # Button
|
||||
// ### Declaring button module
|
||||
// Button module is required to use any button feature.
|
||||
// ``` JavaScript
|
||||
// >> button-require
|
||||
import buttonModule = require("ui/button");
|
||||
// ```
|
||||
// << button-require
|
||||
|
||||
// Other frequently used modules when working with buttons include:
|
||||
// ``` JavaScript
|
||||
// >> button-require-others
|
||||
import bindable = require("ui/core/bindable");
|
||||
import observable = require("data/observable");
|
||||
// ```
|
||||
|
||||
// ### Attaching event handler for the button tap event.
|
||||
//``` XML
|
||||
// <Page>
|
||||
// <Button tap="buttonTap" />
|
||||
// </Page>
|
||||
//```
|
||||
|
||||
// </snippet>
|
||||
// << button-require-others
|
||||
|
||||
export var testSetText = function () {
|
||||
helper.buildUIAndRunTest(_createButtonFunc(), _testSetText);
|
||||
@ -90,24 +76,18 @@ export var testMemoryLeak = function (done) {
|
||||
}
|
||||
|
||||
var _createButtonFunc = function (): buttonModule.Button {
|
||||
// <snippet module="ui/button" title="button">
|
||||
// ### Creating a button
|
||||
// ``` JavaScript
|
||||
// >>button-create
|
||||
var button = new buttonModule.Button();
|
||||
// ```
|
||||
// </snippet>
|
||||
button.text = "Button";
|
||||
// << button-create
|
||||
button.text = "Button";
|
||||
return button;
|
||||
}
|
||||
|
||||
var _testSetText = function (views: Array<viewModule.View>) {
|
||||
var button = <buttonModule.Button>views[0];
|
||||
// <snippet module="ui/button" title="button">
|
||||
// ### Setting the text of a button
|
||||
// ``` JavaScript
|
||||
// >> button-settext
|
||||
button.text = "Hello, world!";
|
||||
// ```
|
||||
// </snippet>
|
||||
// << button-settext
|
||||
|
||||
var expectedValue = button.text;
|
||||
var actualValue = buttonTestsNative.getNativeText(button);
|
||||
@ -119,17 +99,14 @@ var _testOnClick = function (views: Array<viewModule.View>) {
|
||||
var button = <buttonModule.Button>views[0];
|
||||
|
||||
var actualValue = false;
|
||||
// <snippet module="ui/button" title="button">
|
||||
// ### Responding to the tap event
|
||||
// ``` JavaScript
|
||||
// >> button-tap
|
||||
button.on(buttonModule.Button.tapEvent, function (args: observable.EventData) {
|
||||
//// Do something
|
||||
// <hide>
|
||||
// >> (hide)
|
||||
actualValue = true;
|
||||
// </hide>
|
||||
// << (hide)
|
||||
});
|
||||
// ```
|
||||
// </snippet>
|
||||
// << button-tap
|
||||
|
||||
buttonTestsNative.performNativeClick(button);
|
||||
TKUnit.assert(actualValue === true, "Actual: " + actualValue + "; Expected: " + true);
|
||||
@ -138,9 +115,7 @@ var _testOnClick = function (views: Array<viewModule.View>) {
|
||||
var _testBindTextDirectlyToModel = function (views: Array<viewModule.View>) {
|
||||
var button = <buttonModule.Button>views[0];
|
||||
|
||||
// <snippet module="ui/button" title="button">
|
||||
// ### Binding text property directly to model
|
||||
// ``` JavaScript
|
||||
// >> button-bind
|
||||
var model = new observable.Observable();
|
||||
model.set("buttonTitle", "OK");
|
||||
var options: bindable.BindingOptions = {
|
||||
@ -149,16 +124,15 @@ var _testBindTextDirectlyToModel = function (views: Array<viewModule.View>) {
|
||||
}
|
||||
button.bind(options, model);
|
||||
//// button.text is now "OK"
|
||||
// <hide>
|
||||
// >> (hide)
|
||||
TKUnit.assert(button.text === "OK", "Actual: " + button.text + "; Expected: " + "OK");
|
||||
// </hide>
|
||||
// << (hide)
|
||||
model.set("buttonTitle", "Cancel");
|
||||
//// button.text is now "Cancel"
|
||||
// <hide>
|
||||
// >> (hide)
|
||||
TKUnit.assert(button.text === "Cancel", "Actual: " + button.text + "; Expected: " + "Cancel");
|
||||
// </hide>
|
||||
// ```
|
||||
// </snippet>
|
||||
// << (hide)
|
||||
// << button-bind
|
||||
}
|
||||
|
||||
var _testBindTextToBindingContext = function (views: Array<viewModule.View>) {
|
||||
|
||||
30
apps/tests/ui/button/button.md
Normal file
30
apps/tests/ui/button/button.md
Normal file
@ -0,0 +1,30 @@
|
||||
---
|
||||
nav-title: "button How-To"
|
||||
title: "How-To"
|
||||
description: "Examples for using button"
|
||||
---
|
||||
# Button
|
||||
### Declaring button module
|
||||
Button module is required to use any button feature.
|
||||
<snippet id='button-require'/>
|
||||
|
||||
Other frequently used modules when working with buttons include:
|
||||
<snippet id='button-require-others'/>
|
||||
|
||||
### Attaching event handler for the button tap event.
|
||||
``` XML
|
||||
<Page>
|
||||
<Button tap="buttonTap" />
|
||||
</Page>
|
||||
```
|
||||
### Creating a button
|
||||
<snippet id='button-create'/>
|
||||
|
||||
### Setting the text of a button
|
||||
<snippet id='button-settext'/>
|
||||
|
||||
### Responding to the tap event
|
||||
<snippet id='button-tap'/>
|
||||
|
||||
### Binding text property directly to model
|
||||
<snippet id='button-bind'/>
|
||||
@ -4,13 +4,9 @@ import datePickerTestsNative = require("./date-picker-tests-native");
|
||||
import color = require("color");
|
||||
import platform = require("platform");
|
||||
|
||||
// <snippet module="ui/date-picker" title="DatePicker">
|
||||
// # DatePicker
|
||||
// Using a DatePicker requires the "ui/date-picker" module.
|
||||
// ``` JavaScript
|
||||
// >> date-picker-require
|
||||
import datePickerModule = require("ui/date-picker");
|
||||
// ```
|
||||
// </snippet>
|
||||
// << date-picker-require
|
||||
|
||||
function assertDate(datePicker: datePickerModule.DatePicker, expectedYear: number, expectedMonth: number, expectedDay: number) {
|
||||
TKUnit.assertEqual(datePicker.year, expectedYear, "datePicker.year");
|
||||
@ -62,16 +58,13 @@ export class DatePickerTest extends testModule.UITest<datePickerModule.DatePicke
|
||||
|
||||
public test_DummyForCodeSnippet() {
|
||||
let datePicker = new datePickerModule.DatePicker();
|
||||
// <snippet module="ui/date-picker" title="DatePicker">
|
||||
// ## Configuring a DatePicker
|
||||
// ``` JavaScript
|
||||
// >> date-picker-configure
|
||||
datePicker.year = 1980;
|
||||
datePicker.month = 2;
|
||||
datePicker.day = 9;
|
||||
datePicker.minDate = new Date(1975, 0, 29);
|
||||
datePicker.maxDate = new Date(2045, 4, 12);
|
||||
// ```
|
||||
// </snippet>
|
||||
// << date-picker-configure
|
||||
}
|
||||
|
||||
public test_set_color() {
|
||||
|
||||
11
apps/tests/ui/date-picker/date-picker.md
Normal file
11
apps/tests/ui/date-picker/date-picker.md
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
nav-title: "DatePicker How-To"
|
||||
title: "How-To"
|
||||
description: "Examples for using DatePicker"
|
||||
---
|
||||
# DatePicker
|
||||
Using a DatePicker requires the "ui/date-picker" module.
|
||||
<snippet id='date-picker-require'/>
|
||||
|
||||
## Configuring a DatePicker
|
||||
<snippet id='date-picker-configure'/>
|
||||
@ -1,15 +1,9 @@
|
||||
// <snippet module="ui/dialogs" title="dialogs">
|
||||
// # Dialogs
|
||||
// Displaying dialogs requires the "ui/dialogs" module.
|
||||
// ``` JavaScript
|
||||
// >> dialog-require
|
||||
import dialogs = require("ui/dialogs");
|
||||
// ```
|
||||
// </snippet>
|
||||
// << dialog-require
|
||||
|
||||
export function test_DummyTestForSnippetOnly0() {
|
||||
// <snippet module="ui/dialogs" title="dialogs">
|
||||
// ### Action
|
||||
// ``` JavaScript
|
||||
// >> dialog-action
|
||||
var options = {
|
||||
title: "Race Selection",
|
||||
message: "Choose your race",
|
||||
@ -19,14 +13,11 @@ export function test_DummyTestForSnippetOnly0() {
|
||||
dialogs.action(options).then((result) => {
|
||||
console.log(result);
|
||||
});
|
||||
// ```
|
||||
// </snippet>
|
||||
// << dialog-action
|
||||
}
|
||||
|
||||
export function test_DummyTestForSnippetOnly1() {
|
||||
// <snippet module="ui/dialogs" title="dialogs">
|
||||
// ### Confirm
|
||||
// ``` JavaScript
|
||||
// >> dialog-confirm
|
||||
var options = {
|
||||
title: "Race Selection",
|
||||
message: "Are you sure you want to be an Elf?",
|
||||
@ -38,14 +29,11 @@ export function test_DummyTestForSnippetOnly1() {
|
||||
//// result can be true/false/undefined
|
||||
console.log(result);
|
||||
});
|
||||
// ```
|
||||
// </snippet>
|
||||
// << dialog-confirm
|
||||
}
|
||||
|
||||
export function test_DummyTestForSnippetOnly2() {
|
||||
// <snippet module="ui/dialogs" title="dialogs">
|
||||
// ### Alert
|
||||
// ``` JavaScript
|
||||
// >> dialog-alert
|
||||
var options = {
|
||||
title: "Race Selection",
|
||||
message: "Race Chosen: Elf",
|
||||
@ -54,14 +42,11 @@ export function test_DummyTestForSnippetOnly2() {
|
||||
dialogs.alert(options).then(() => {
|
||||
console.log("Race Chosen!");
|
||||
});
|
||||
// ```
|
||||
// </snippet>
|
||||
// << dialog-alert
|
||||
}
|
||||
|
||||
export function test_DummyTestForSnippetOnly3() {
|
||||
// <snippet module="ui/dialogs" title="dialogs">
|
||||
// ### Login
|
||||
// ``` JavaScript
|
||||
// >> dialog-login
|
||||
var options = {
|
||||
title: "Login",
|
||||
message: "Login",
|
||||
@ -72,14 +57,11 @@ export function test_DummyTestForSnippetOnly3() {
|
||||
//// true or false.
|
||||
console.log(loginResult.result);
|
||||
});
|
||||
// ```
|
||||
// </snippet>
|
||||
// << dialog-login
|
||||
}
|
||||
|
||||
export function test_DummyTestForSnippetOnly4() {
|
||||
// <snippet module="ui/dialogs" title="dialogs">
|
||||
// ### Prompt
|
||||
// ``` JavaScript
|
||||
// >> dialog-prompt
|
||||
var options = {
|
||||
title: "Name",
|
||||
defaultText: "Enter your name",
|
||||
@ -88,6 +70,5 @@ export function test_DummyTestForSnippetOnly4() {
|
||||
dialogs.prompt(options).then((result: dialogs.PromptResult) => {
|
||||
console.log("Hello, " + result.text);
|
||||
});
|
||||
// ```
|
||||
// </snippet>
|
||||
// << dialog-prompt
|
||||
}
|
||||
23
apps/tests/ui/dialogs/dialog.md
Normal file
23
apps/tests/ui/dialogs/dialog.md
Normal file
@ -0,0 +1,23 @@
|
||||
---
|
||||
nav-title: "dialogs How-To"
|
||||
title: "How-To"
|
||||
description: "Examples for using dialogs"
|
||||
---
|
||||
# Dialogs
|
||||
Displaying dialogs requires the "ui/dialogs" module.
|
||||
<snippet id='dialog-require'/>
|
||||
|
||||
### Action
|
||||
<snippet id='dialog-action'/>
|
||||
|
||||
### Confirm
|
||||
<snippet id='dialog-confirm'/>
|
||||
|
||||
### Alert
|
||||
<snippet id='dialog-alert'/>
|
||||
|
||||
### Login
|
||||
<snippet id='dialog-login'/>
|
||||
|
||||
### Prompt
|
||||
<snippet id='dialog-prompt'/>
|
||||
Reference in New Issue
Block a user