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

How-To files generated with markdown spippet injector

Browse Source
This commit is contained in:
Nikolay Iliev
2016-04-15 12:14:06 +03:00
parent 9fe9d6e77d
commit ee292f771f
10 changed files with 237 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
apps/tests/gestures-tests.ts
View File

@ -1,226 +1,168 @@
/* tslint:disable:no-unused-variable */
// <snippet module="ui/gestures" title="gestures">
// # Gestures
// Detecting user gestures requires the "ui/gestures" module.
// ``` JavaScript
// >> gestures-require
import gestures = require("ui/gestures");
// ```
// </snippet>
// << gestures-require
import labelModule = require("ui/label");
export var test_DummyTestForSnippetOnly0 = function () {
// <snippet module="ui/gestures" title="gestures">
// ### Double Tap
// ``` JavaScript
// >> gestures-double-tap
var label = new labelModule.Label();
var observer = label.on(gestures.GestureTypes.doubleTap, function (args: gestures.GestureEventData) {
console.log("Double Tap");
});
// ```
// </snippet>
// << gestures-double-tap
}
export var test_DummyTestForSnippetOnly01 = function () {
// <snippet module="ui/gestures" title="gestures">
// ### Double Tap
// ``` JavaScript
// >> gestures-double-tap-alt
var label = new labelModule.Label();
var observer = label.on("doubleTap", function (args: gestures.GestureEventData) {
console.log("Double Tap");
});
// ```
// </snippet>
// << gestures-double-tap-alt
}
export var test_DummyTestForSnippetOnly1 = function () {
// <snippet module="ui/gestures" title="gestures">
// ### Long Press
// ``` JavaScript
// >> gestures-long-press
var label = new labelModule.Label();
var observer = label.on(gestures.GestureTypes.longPress, function (args: gestures.GestureEventData) {
console.log("Long Press");
});
// ```
// </snippet>
// << gestures-long-press
}
export var test_DummyTestForSnippetOnly11 = function () {
// <snippet module="ui/gestures" title="gestures">
// ### Long Press
// ``` JavaScript
// >> gestures-long-press-alt
var label = new labelModule.Label();
var observer = label.on("longPress", function (args: gestures.GestureEventData) {
console.log("Long Press");
});
// ```
// </snippet>
// << gestures-long-press-alt
}
export var test_DummyTestForSnippetOnly2 = function () {
// <snippet module="ui/gestures" title="gestures">
// ### Pan
// ``` JavaScript
// >> gestures-pan
var label = new labelModule.Label();
var observer = label.on(gestures.GestureTypes.pan, function (args: gestures.PanGestureEventData) {
console.log("Pan deltaX:" + args.deltaX + "; deltaY:" + args.deltaY + ";");
});
// ```
// </snippet>
// << gestures-pan
}
export var test_DummyTestForSnippetOnly22 = function () {
// <snippet module="ui/gestures" title="gestures">
// ### Pan
// ``` JavaScript
// >> gestures-pan-alt
var label = new labelModule.Label();
var observer = label.on("pan", function (args: gestures.PanGestureEventData) {
console.log("Pan deltaX:" + args.deltaX + "; deltaY:" + args.deltaY + ";");
});
// ```
// </snippet>
// << gestures-pan-alt
}
export var test_DummyTestForSnippetOnly3 = function () {
// <snippet module="ui/gestures" title="gestures">
// ### Pinch
// ``` JavaScript
// >> gestures-pan-pinch
var label = new labelModule.Label();
var observer = label.on(gestures.GestureTypes.pinch, function (args: gestures.PinchGestureEventData) {
console.log("Pinch scale: " + args.scale);
});
// ```
// </snippet>
// << gestures-pan-pinch
}
export var test_DummyTestForSnippetOnly33 = function () {
// <snippet module="ui/gestures" title="gestures">
// ### Pinch
// ``` JavaScript
// >> gestures-pan-pinch-alt
var label = new labelModule.Label();
var observer = label.on("pinch", function (args: gestures.PinchGestureEventData) {
console.log("Pinch scale: " + args.scale);
});
// ```
// </snippet>
// << gestures-pan-pinch-alt
}
export var test_DummyTestForSnippetOnly4 = function () {
// <snippet module="ui/gestures" title="gestures">
// ### Rotation
// ``` JavaScript
// >> gestures-rotation
var label = new labelModule.Label();
var observer = label.on(gestures.GestureTypes.rotation, function (args: gestures.RotationGestureEventData) {
console.log("Rotation: " + args.rotation);
});
// ```
// </snippet>
// << gestures-rotation
}
export var test_DummyTestForSnippetOnly44 = function () {
// <snippet module="ui/gestures" title="gestures">
// ### Rotation
// ``` JavaScript
// >> gestures-rotation-alt
var label = new labelModule.Label();
var observer = label.on("rotation", function (args: gestures.RotationGestureEventData) {
console.log("Rotation: " + args.rotation);
});
// ```
// </snippet>
// << gestures-rotation-alt
}
export var test_DummyTestForSnippetOnly5 = function () {
// <snippet module="ui/gestures" title="gestures">
// ### Swipe
// ``` JavaScript
// >> gestures-swipe
var label = new labelModule.Label();
var observer = label.on(gestures.GestureTypes.swipe, function (args: gestures.SwipeGestureEventData) {
console.log("Swipe direction: " + args.direction);
});
// ```
// </snippet>
// << gestures-swipe
}
export var test_DummyTestForSnippetOnly55 = function () {
// <snippet module="ui/gestures" title="gestures">
// ### Swipe
// ``` JavaScript
// >> gestures-swipe-alt
var label = new labelModule.Label();
var observer = label.on("swipe", function (args: gestures.SwipeGestureEventData) {
console.log("Swipe direction: " + args.direction);
});
// ```
// </snippet>
// << gestures-swipe-alt
}
export var test_DummyTestForSnippetOnly6 = function () {
// <snippet module="ui/gestures" title="gestures">
// ### Tap
// ``` JavaScript
// >> gestures-tap
var label = new labelModule.Label();
var observer = label.on(gestures.GestureTypes.tap, function (args: gestures.GestureEventData) {
console.log("Tap");
});
// ```
// </snippet>
// << gestures-tap
}
export var test_DummyTestForSnippetOnly66 = function () {
// <snippet module="ui/gestures" title="gestures">
// ### Tap
// ``` JavaScript
// >> gestures-tap-alt
var label = new labelModule.Label();
var observer = label.on("tap", function (args: gestures.GestureEventData) {
console.log("Tap");
});
// ```
// </snippet>
// << gestures-tap-alt
}
export var test_DummyTestForSnippetOnly7 = function () {
// <snippet module="ui/gestures" title="gestures">
// ### Stop observing
// ``` JavaScript
// >> gestures-stop-observe
var label = new labelModule.Label();
var observer = label.on(gestures.GestureTypes.tap, function (args: gestures.GestureEventData) {
console.log("Tap");
});
observer.disconnect();
// ```
// </snippet>
// << gestures-stop-observe
}
export var test_DummyTestForSnippetOnly8 = function () {
// <snippet module="ui/gestures" title="gestures">
// ### Multiple gestures
// ``` JavaScript
// >> gestures-multiple
var label = new labelModule.Label();
var observer = label.on(gestures.GestureTypes.tap | gestures.GestureTypes.doubleTap | gestures.GestureTypes.longPress, function (args: gestures.GestureEventData) {
console.log("Event: " + args.eventName);
});
// ```
// </snippet>
// << gestures-multiple
}
export var test_DummyTestForSnippetOnly88 = function () {
// <snippet module="ui/gestures" title="gestures">
// ### Multiple gestures as comma separated string
// ``` JavaScript
// >> gestures-string
var label = new labelModule.Label();
var observer = label.on("tap, doubleTap, longPress", function (args: gestures.GestureEventData) {
console.log("Event: " + args.eventName);
});
// ```
// </snippet>
// << gestures-string
}
export var test_DummyTestForSnippetOnly9 = function () {
// <snippet module="ui/gestures" title="gestures">
// ### Events combined with gestures as comma separated string
// ``` JavaScript
// >> gestures-events-string
var label = new labelModule.Label();
var observer = label.on("loaded, tap, longPress", function (args: gestures.GestureEventData) {
console.log("Event: " + args.eventName);
});
// ```
// </snippet>
// << gestures-events-string
}

62
apps/tests/gestures.md Normal file
View File

@ -0,0 +1,62 @@
---
nav-title: "gestures How-To"
title: "How-To"
description: "Examples for using gestures"
---
# Gestures
Detecting user gestures requires the "ui/gestures" module.
<snippet id='gestures-require'/>
### Double Tap
<snippet id='gestures-double-tap'/>
### Double Tap
<snippet id='gestures-double-tap-alt'/>
### Long Press
<snippet id='gestures-long-press'/>
### Long Press
<snippet id='gestures-long-press-alt'/>
### Pan
<snippet id='gestures-pan'/>
### Pan
<snippet id='gestures-pan-alt'/>
### Pinch
<snippet id='gestures-pan-pinch'/>
### Pinch
<snippet id='gestures-pan-pinch-alt'/>
### Rotation
<snippet id='gestures-rotation'/>
### Rotation
<snippet id='gestures-rotation-alt'/>
### Swipe
<snippet id='gestures-swipe'/>
### Swipe
<snippet id='gestures-swipe-alt'/>
### Tap
<snippet id='gestures-tap'/>
### Tap
<snippet id='gestures-tap-alt'/>
### Stop observing
<snippet id='gestures-stop-observe'/>
### Multiple gestures
<snippet id='gestures-multiple'/>
### Multiple gestures as comma separated string
<snippet id='gestures-string'/>
### Events combined with gestures as comma separated string
<snippet id='gestures-events-string'/>

20
apps/tests/ui/html-view/htm-view.md Normal file
View File

@ -0,0 +1,20 @@
---
nav-title: "HtmlView How-To"
title: "How-To"
description: "Examples for using HtmlView"
---
# HtmlView
Using a HtmlView requires the html-view module.
<snippet id='htmlview-require'/>
### Declaring a HtmlView.
``` XML
<Page>
{%raw%}<HtmlView html="{{ htmlString }}" />{%endraw%}
</Page>
```
### Creating a HtmlView
<snippet id='htmlview-create'/>
### Using HtmlView
<snippet id='htmlview-using'/>

32
apps/tests/ui/html-view/html-view-tests.ts
View File

@ -2,31 +2,14 @@
import helper = require("../helper");
import types = require("utils/types");
// <snippet module="ui/html-view" title="HtmlView">
// # HtmlView
// Using a HtmlView requires the html-view module.
// ``` JavaScript
// >> htmlview-require
import htmlViewModule = require("ui/html-view");
// ```
// </snippet>
// <snippet module="ui/html-view" title="HtmlView">
// ### Declaring a HtmlView.
//``` XML
// <Page>
// {%raw%}<HtmlView html="{{ htmlString }}" />{%endraw%}
// </Page>
//```
// </snippet>
// << htmlview-require
var _createHtmlViewFunc = function (): htmlViewModule.HtmlView {
// <snippet module="ui/html-view" title="HtmlView">
// ### Creating a HtmlView
// ``` JavaScript
// >> htmlview-create
var htmlView = new htmlViewModule.HtmlView();
// ```
// </snippet>
// << htmlview-create
return htmlView;
}
@ -35,12 +18,9 @@ export var testLoadHTMLString = function () {
let htmlView = _createHtmlViewFunc();
page.content = htmlView;
// <snippet module="ui/html-view" title="HtmlView">
// ### Using HtmlView
// ``` JavaScript
// >> htmlview-using
htmlView.html = '<span><font color="#ff0000">Test</font></span>';
// ```
// </snippet>
// << htmlview-using
if (htmlView.ios) {
TKUnit.assert(!types.isNullOrUndefined(htmlView.ios.attributedText), "HTML string not loaded properly. Actual: " + htmlView.ios.attributedText);

15
apps/tests/ui/image-cache/image-cache-tests.ts
View File

@ -1,17 +1,11 @@
// <snippet module="ui/image-cache" title="image-cache">
// # ImageCache
// Using the ImageCache requires the "ui/image-cache" module.
// ``` JavaScript
// >> image-cache-require
import imageCacheModule = require("ui/image-cache");
import imageSource = require("image-source");
import fs = require("file-system");
// ```
// </snippet>
// << image-cache-require
export function test_DummyTestForSnippetOnly() {
// <snippet module="ui/image-cache" title="image-cache">
// ### Requesting Images
// ``` JavaScript
// >> image-cache-request-images
var cache = new imageCacheModule.Cache();
cache.placeholder = imageSource.fromFile(fs.path.join(__dirname, "res/no-image.png"));
cache.maxRequests = 5;
@ -42,6 +36,5 @@ export function test_DummyTestForSnippetOnly() {
//// Disable download while scrolling
cache.disableDownload();
// ```
// </snippet>
// << image-cache-request-images
}

11
apps/tests/ui/image-cache/image-cache.md Normal file
View File

@ -0,0 +1,11 @@
---
nav-title: "image-cache How-To"
title: "How-To"
description: "Examples for using image-cache"
---
# ImageCache
Using the ImageCache requires the "ui/image-cache" module.
<snippet id='image-cache-require'/>
### Requesting Images
<snippet id='image-cache-request-images'/>

60
apps/tests/ui/image/image-tests.ts
View File

@ -1,28 +1,7 @@
import TKUnit = require("../../TKUnit");
// <snippet module="ui/image" title="Image">
// # Image
// Using an image requires the Image module to be loaded.
// ``` JavaScript
// >> img-require
import ImageModule = require("ui/image");
// ```
// Binding the image source property to a view-model property.
//``` XML
// <Page>
// <StackLayout>
// <!--Bind the image source property to view-model property -->
// {%raw%}<Image src="{{ thumbnailImageUrl }}" />{%endraw%}
// <!--Load form image from application -->
// <Image src="~/logo.png" stretch ="none" / >
// <!--Load form image resource -->
// <Image src="res://logo.png" stretch ="none" / >
// <!--Load form image URL-->
// <Image src="http://www.google.com/images/errors/logo_sm_2.png" stretch ="none" />
// </StackLayout>
// </Page>
//```
// </snippet>
// << img-require
import types = require("utils/types");
import ImageSourceModule = require("image-source");
@ -43,13 +22,10 @@ export var test_Image_Members = function () {
/* TODO: We need a way to programmatically add an image to resources and then load it from, otherwise we do not know if there is such resource in the target native app.
export var test_settingImageSource = function () {
// <snippet module="ui/image" title="Image">
// ### How to create an image and set its source.
// ``` JavaScript
// >> img-create
var image = new ImageModule.Image();
image.imageSource = ImageSourceModule.fromResource("logo");
// ```
// </snippet>
// << img-create
var testFunc = function (views: Array<ViewModule.View>) {
var testImage = <ImageModule.Image> views[0];
@ -67,13 +43,10 @@ export var test_settingImageSource = function () {
*/
export var test_SettingImageSrc = function (done) {
// <snippet module="ui/image" title="Image">
// ### How to create an image and set its src.
// ``` JavaScript
// >> img-create-src
var image = new ImageModule.Image();
image.src = "https://www.google.com/images/errors/logo_sm_2.png";
// ```
// </snippet>
// << img-create-src
image.src = null;
@ -108,13 +81,10 @@ export var test_SettingImageSrc = function (done) {
}
export var test_SettingImageSrcToFileWithinApp = function (done) {
// <snippet module="ui/image" title="Image">
// ### How to create an image and set its src to file within the application.
// ``` JavaScript
// >> img-create-local
var image = new ImageModule.Image();
image.src = "~/logo.png";
// ```
// </snippet>
// << img-create-local
var testFunc = function (views: Array<ViewModule.View>) {
var testImage = <ImageModule.Image> views[0];
@ -132,13 +102,10 @@ export var test_SettingImageSrcToFileWithinApp = function (done) {
}
export var test_SettingImageSrcToDataURI = function (done) {
// <snippet module="ui/image" title="Image">
// ### How to create an image and set its src to Data URI.
// ``` JavaScript
// >> img-create-datauri
var image = new ImageModule.Image();
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAAXNSR0IArs4c6QAAABxpRE9UAAAAAgAAAAAAAAACAAAAKAAAAAIAAAACAAAARiS4uJEAAAASSURBVBgZYvjPwABHSMz/DAAAAAD//0GWpK0AAAAOSURBVGNgYPiPhBgQAACEvQv1D5y/pAAAAABJRU5ErkJggg==";
// ```
// </snippet>
// << img-create-datauri
var testFunc = function (views: Array<ViewModule.View>) {
var testImage = <ImageModule.Image>views[0];
@ -157,17 +124,14 @@ export var test_SettingImageSrcToDataURI = function (done) {
}
export var test_SettingStretch_AspectFit = function () {
// <snippet module="ui/image" title="Image">
// ### How to set image stretching.
// ``` JavaScript
// >> img-set-stretch
var image = new ImageModule.Image();
image.imageSource = ImageSourceModule.fromFile(imagePath);
//// There are 4 modes of stretching none, fill, aspectFill, aspectFit
//// The default value is aspectFit.
//// Image stretch can be set by using ImageModule.stretch enum.
image.stretch = enumsModule.Stretch.aspectFit;
// ```
// </snippet>
// << img-set-stretch
var testFunc = function (views: Array<ViewModule.View>) {
var testImage = <ImageModule.Image> views[0];

38
apps/tests/ui/image/image.md Normal file
View File

@ -0,0 +1,38 @@
---
nav-title: "Image How-To"
title: "How-To"
description: "Examples for using Image"
---
# Image
Using an image requires the Image module to be loaded.
<snippet id='img-require'/>
Binding the image source property to a view-model property.
``` XML
<Page>
<StackLayout>
<!--Bind the image source property to view-model property -->
{%raw%}<Image src="{{ thumbnailImageUrl }}" />{%endraw%}
<!--Load form image from application -->
<Image src="~/logo.png" stretch ="none" / >
<!--Load form image resource -->
<Image src="res://logo.png" stretch ="none" / >
<!--Load form image URL-->
<Image src="http://www.google.com/images/errors/logo_sm_2.png" stretch ="none" />
</StackLayout>
</Page>
```
### How to create an image and set its source.
<snippet id='img-create'/>
### How to create an image and set its src.
<snippet id='img-create-src'/>
### How to create an image and set its src to file within the application.
<snippet id='img-create-local'/>
### How to create an image and set its src to Data URI.
<snippet id='img-create-datauri'/>
### How to set image stretching.
<snippet id='img-set-stretch'/>

57
apps/tests/ui/label/label-tests.ts
View File

@ -2,21 +2,10 @@
import testModule = require("../../ui-test");
import styling = require("ui/styling");
// <snippet module="ui/label" title="Label">
// # Label
// Using a label requires the Label module.
// ``` JavaScript
//>> label-require
import LabelModule = require("ui/label");
// ```
// << label-require
// ### Binding the Label text property to a view-model property.
//``` XML
// <Page>
// {%raw%}<Label text="{{ title }}" />{%endraw%}
// </Page>
//```
// </snippet>
import types = require("utils/types");
import colorModule = require("color");
import utils = require("utils/utils");
@ -43,24 +32,18 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
}
public snippet_Set_Text_TNS() {
// <snippet module="ui/label" title="Label">
// ### How to set label text content
// ``` JavaScript
// >> label-settext
var label = new LabelModule.Label();
var expectedValue = "Expected Value";
label.text = expectedValue;
// ```
// </snippet>
// << label-settext
}
public snippet_Set_TextWrap_TNS() {
// <snippet module="ui/label" title="Label">
// ### How to turn on text wrapping for a label
// ``` JavaScript
// >> label-textwrap
var label = new LabelModule.Label();
label.textWrap = true;
// ```
// </snippet>
// << label-textwrap
}
public test_Set_Text_TNS() {
@ -249,15 +232,12 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
"color: ", color, "; ",
"font-size: ", fontSize, ";}"].join("");
// <snippet module="ui/label" title="Label">
// ### How to style a label via css class
// ``` JavaScript
// >> label-cssclass
label.text = "The quick brown fox jumps over the lazy dog.";
label.className = "title";
//// after that all we have to do is to set a similar css entry within parent page css property
//// label.parentPage.css = ".title {background-color: #C6C6C6; color: #10C2B0; font-size: 14;}";
// ```
// </snippet>
// << label-cssclass
var actualTextSize;
var expSize;
@ -316,15 +296,12 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
this.testPage.css = testCss;
this.waitUntilTestElementIsLoaded();
// <snippet module="ui/label" title="Label">
// ### How to style a label via css type
// ``` JavaScript
// >> label-cssclass-type
label.text = "The quick brown fox jumps over the lazy dog.";
//// in order to style label with a "type style scope" just put a similar css entry
//// testLabel.parentPage.css = "label {background-color: #C6C6C6; color: #10C2B0; font-size: 14;}";
//// all labels within the parent page will be styled according to css values
// ```
// </snippet>
// << label-cssclass-type
var expectedBackgroundColor = new colorModule.Color(backgroundColor);
var actualBackgroundColor = label.style.backgroundColor;
TKUnit.assertEqual(expectedBackgroundColor.hex, actualBackgroundColor.hex);
@ -349,15 +326,12 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
this.testPage.css = testCss;
this.waitUntilTestElementIsLoaded();
// <snippet module="ui/label" title="Label">
// ### How to style a label via css control identifier
// ``` JavaScript
// >> label-css-identifier
label.text = "The quick brown fox jumps over the lazy dog.";
label.id = "testLabel";
//// after that all we have to do is to set a similar css entry within parent page css property
//// label.parentPage.css = "#testLabel {background-color: #C6C6C6; color: #10C2B0; font-size: 14;}";
// ```
// </snippet>
// << label-css-identifier
var expectedBackgroundColor = new colorModule.Color(backgroundColor);
var actualBackgroundColor = label.style.backgroundColor;
@ -372,9 +346,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
}
public test_BindingToText() {
// <snippet module="ui/label" title="Label">
// ### How to bind text property of a label to an observable model
// ``` JavaScript
// >> label-observable
var label = new LabelModule.Label();
var expValue = "Expected Value";
var sourceModel = new observableModule.Observable();
@ -385,8 +357,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
label.bind(bindingOptions, sourceModel);
sourceModel.set("sourceProperty", expValue);
//// console.log(label.text); --> prints: "Expected Value"
// ```
// </snippet>
// << label-observable
TKUnit.assertEqual(label.text, expValue);
}

32
apps/tests/ui/label/label.md Normal file
View File

@ -0,0 +1,32 @@
---
nav-title: "Label How-To"
title: "How-To"
description: "Examples for using Label"
---
# Label
Using a label requires the Label module.
<snippet id='label-require'/>
### Binding the Label text property to a view-model property.
``` XML
<Page>
{%raw%}<Label text="{{ title }}" />{%endraw%}
</Page>
```
### How to set label text content
<snippet id='label-settext'/>
### How to turn on text wrapping for a label
<snippet id='label-textwrap'/>
### How to style a label via css class
<snippet id='label-cssclass'/>
### How to style a label via css type
<snippet id='label-cssclass-type'/>
### How to style a label via css control identifier
<snippet id='label-css-identifier'/>
### How to bind text property of a label to an observable model
<snippet id='label-observable'/>