Howtos

ApiReference/ui/dialogs/HOW-TO.md

@@ -0,0 +1,71 @@
+---
+nav-title: "dialogs How-To"
+title: "dialogs How-To"
+description: "Examples for using dialogs"
+---
+# Dialogs
+Displaying dialogs requires the "ui/dialogs" module.
+``` JavaScript
+var dialogs = require("ui/dialogs");
+```
+## Action
+``` JavaScript
+var options = {
+ title: "Race Selection",
+ message: "Choose your race",
+ cancelButtonText: "Cancel",
+ actions: ["Human", "Elf", "Dwarf", "Orc"]
+};
+dialogs.action(options).then(function (result) {
+ console.log(result);
+});
+```
+## Confirm
+``` JavaScript
+var options = {
+ title: "Race Selection",
+ message: "Are you sure you want to be an Elf?",
+ okButtonText: "Yes",
+ cancelButtonText: "No",
+ neutralButtonText: "Cancel"
+};
+dialogs.confirm(options).then(function (result) {
+ // result can be true/false/undefined
+ console.log(result);
+});
+```
+## Alert
+``` JavaScript
+var options = {
+ title: "Race Selection",
+ message: "Race Chosen: Elf",
+ okButtonText: "OK"
+};
+dialogs.alert(options).then(function () {
+ console.log("Race Chosen!");
+});
+```
+## Login
+``` JavaScript
+var options = {
+ title: "Login",
+ message: "Login",
+ username: "john_doe",
+ password: ""
+};
+dialogs.login(options).then(function (loginResult) {
+ // true or false.
+ console.log(loginResult.result);
+});
+```
+## Prompt
+``` JavaScript
+var options = {
+ title: "Name",
+ defaultText: "Enter your name",
+ inputType: dialogs.inputType.text
+};
+dialogs.prompt(options).then(function (result) {
+ console.log("Hello, " + result.text);
+});
+```

ApiReference/ui/frame/HOW-TO.md

@@ -0,0 +1,39 @@
+---
+nav-title: "frame How-To"
+title: "frame How-To"
+description: "Examples for using frame"
+---
+# Frame
+To perform navigation, you will need a reference to the topmost frame of the application.
+``` JavaScript
+var frameModule = require("ui/frame");
+var topmost = frameModule.topmost();
+```
+# Navigating to a Module
+``` JavaScript
+topmost.navigate("app/details-page");
+```
+# Navigating with a Factory Function
+``` JavaScript
+var factoryFunc = function () {
+ var label = new labelModule.Label();
+ label.text = "Hello, world!";
+ var page = new pagesModule.Page();
+ page.content = label;
+ return page;
+};
+topmost.navigate(factoryFunc);
+```
+# Navigating with NavigationEntry
+``` JavaScript
+var navigationEntry = {
+ moduleName: "app/details-page",
+ context: { info: "something you want to pass to your page" },
+ animated: false
+};
+topmost.navigate(navigationEntry);
+```
+# Navigating Back
+``` JavaScript
+topmost.goBack();
+```

ApiReference/ui/gestures/HOW-TO.md

@@ -0,0 +1,67 @@
+---
+nav-title: "gestures How-To"
+title: "gestures How-To"
+description: "Examples for using gestures"
+---
+# Gestures
+Detecting user gestures requires the "ui/gestures" module.
+``` JavaScript
+var gestures = require("ui/gestures");
+```
+# Double Tap
+``` JavaScript
+var label = new labelModule.Label();
+var observer = label.observe(gestures.GestureTypes.DoubleTap, function (args) {
+ console.log("Double Tap");
+});
+```
+# Long Press
+``` JavaScript
+var label = new labelModule.Label();
+var observer = label.observe(gestures.GestureTypes.LongPress, function (args) {
+ console.log("Long Press");
+});
+```
+# Pan
+``` JavaScript
+var label = new labelModule.Label();
+var observer = label.observe(gestures.GestureTypes.Pan, function (args) {
+ console.log("Pan");
+});
+```
+# Pinch
+``` JavaScript
+var label = new labelModule.Label();
+var observer = label.observe(gestures.GestureTypes.Pinch, function (args) {
+ console.log("Pinch Scale: " + args.scale);
+});
+```
+# Rotation
+``` JavaScript
+var label = new labelModule.Label();
+var observer = label.observe(gestures.GestureTypes.Rotation, function (args) {
+ console.log("Rotation: " + args.rotation);
+});
+```
+# Swipe
+``` JavaScript
+var label = new labelModule.Label();
+var observer = label.observe(gestures.GestureTypes.Swipe, function (args) {
+ console.log("Swipe Direction: " + args.direction);
+});
+```
+# Tap
+``` JavaScript
+var label = new labelModule.Label();
+var observer = label.observe(gestures.GestureTypes.Tap, function (args) {
+ console.log("Tap");
+});
+```
+# Stop observing
+``` JavaScript
+var label = new labelModule.Label();
+var observer = label.observe(gestures.GestureTypes.Tap, function (args) {
+ console.log("Tap");
+});
+observer.disconnect();
+```

ApiReference/ui/image-cache/HOW-TO.md

@@ -0,0 +1,43 @@
+---
+nav-title: "image-cache How-To"
+title: "image-cache How-To"
+description: "Examples for using image-cache"
+---
+# ImageCache
+Using the ImageCache requires the "ui/image-cache" module.
+``` JavaScript
+var imageCacheModule = require("ui/image-cache");
+var imageSource = require("image-source");
+var fs = require("file-system");
+```
+## Requesting Images
+``` JavaScript
+var cache = new imageCacheModule.Cache();
+cache.invalid = imageSource.fromFile(fs.path.join(__dirname, "res/reddit-logo.png"));
+cache.placeholder = imageSource.fromFile(fs.path.join(__dirname, "res/no-image.png"));
+cache.maxRequests = 5;
+// Enable download while not scrolling
+cache.enableDownload();
+var src;
+var url = "https://github.com/NativeScript.png";
+// Try to read the image from the cache
+var result = cache.get(url);
+if (result) {
+ // If present -- use it.
+ src = result;
+}
+else {
+ // If not present -- request its download.
+ cache.push({
+ key: url,
+ url: url,
+ completed: function (result, key) {
+ if (url === key) {
+ src = result;
+ }
+ }
+ });
+}
+// Disable download while scrolling
+cache.disableDownload();
+```

ApiReference/ui/search-bar/HOW-TO.md

@@ -0,0 +1,20 @@
+---
+nav-title: "search-bar How-To"
+title: "search-bar How-To"
+description: "Examples for using search-bar"
+---
+# SearchBar
+Using the SearchBar requires the "ui/search-bar" module.
+``` JavaScript
+var searchBarModule = require("ui/search-bar");
+```
+## Searching
+``` JavaScript
+var searchBar = new searchBarModule.SearchBar();
+searchBar.on(searchBarModule.knownEvents.submit, function (args) {
+ console.log("Search for " + args.object.text);
+});
+searchBar.on(searchBarModule.knownEvents.clear, function (args) {
+ console.log("Clear");
+});
+```

modules.md

@@ -32,9 +32,6 @@ NativeScript uses a modular design pattern. All functionality that NativeScript
 
 # Core UI Modules
 + [ui/core/dependency-observable](./ApiReference/ui/core/dependency-observable/HOW-TO.md) - contains the DependencyObservable class, which represents an extended Observable object that uses Property instances for value backing mechanism.
-+ ui/core/bindable - contains the Bindable class, which represents an extended DependencyObservable object that supports data-binding.
-+ ui/core/proxy - contains the Proxy class, which is an extended Bindable class that that serves as a proxy between a JavaScript object and a native object.
-+ ui/core/view - contains the View class, which is the base class for all UI components. 
 + [text/formatted-string](./ApiReference/text/formatted-string/HOW-TO.md) - contains the FormattedString and Span classes, which are used to create a formatted (rich text) strings.
 
 # Panels
@@ -44,9 +41,8 @@ NativeScript uses a modular design pattern. All functionality that NativeScript
 + [ui/panels/wrap-panel](./ApiReference/ui/wrap-panel/HOW-TO.md) - contains the WrapPanel class, which is used to place child elements at sequential positions from left to the right and then "wrap" the lines of children from top to the bottom.
 
 # Widgets
-+ ui/content-view - represents a View that has a single child - content.
 + [ui/page](./ApiReference/ui/page/HOW-TO.md) - contains the Page class, which represents a logical unit for navigation inside a Frame.
-+ ui/frame - contains the Frame class, which represents the logical View unit that is responsible for navigation within an application.
++ [ui/frame](./ApiReference/ui/frame/HOW-TO.md) - contains the Frame class, which represents the logical View unit that is responsible for navigation within an application.
 + [ui/activity-indicator](./ApiReference/ui/activity-indicator/HOW-TO.md) - contains the ActivityIndicator class, which represents a widget for showing that something is currently busy.
 + [ui/button](./ApiReference/ui/button/HOW-TO.md) - contains the Button class, which represents a standard button widget.
 + [ui/label](./ApiReference/ui/label/HOW-TO.md) - contains the Label class, which represents a standard label widget.
@@ -56,22 +52,15 @@ NativeScript uses a modular design pattern. All functionality that NativeScript
 + [ui/image](./ApiReference/ui/image/HOW-TO.md) - contains the Image class, which represents an image widget.
 + [ui/progress](./ApiReference/ui/progress/HOW-TO.md) - contains the Progress class, which represents a component capable of showing progress.
 + [ui/scroll-view](./ApiReference/ui/scroll-view/HOW-TO.md) - contains the ScrollView class, which represents a scrollable area that can have content that is larger than its bounds.
-+ ui/search-bar - contains the SearchBar class, which represents a standard search bar component.
++ [ui/search-bar](./ApiReference/ui/search-bar/HOW-TO.md) - contains the SearchBar class, which represents a standard search bar component.
 + [ui/slider](./ApiReference/ui/slider/HOW-TO.md) - contains the Slider class, which represents a standard slider component.
 + [ui/switch](./ApiReference/ui/switch/HOW-TO.md) - contains the Switch class, which represents a standard switch component.
 + [ui/tab-view](./ApiReference/ui/tab-view/HOW-TO.md) - contains the TabView class, which represents a standard content component with tabs.
 + [ui/web-view](./ApiReference/ui/web-view/HOW-TO.md) - contains the WebView class, which represents a standard browser widget.
 
-# Other UI Modules
+# Other Modules
 + [ui/styling](./ApiReference/ui/styling/HOW-TO.md) - contains the Style class, which is resposndible for the visual appearance of elements.
-+ ui/enums - contains the possible values for all kinds of enumerations used throughout NativeScript.
-+ ui/gestures - contains the GesturesObserver class, which lets you observe and respond to user gestures.
-+ ui/image-cache - contains the Cache class, which handles image download requests and caches the already downloaded images.
-+ ui/dialogs - allows you to show different dialogs such as alerts, prompts, etc.
-
-# Utility Modules
-+ utils/containers - holds different utilities for object comparisons.
-+ utils/geometry - holds different structures such as Poinst, Size, etc.
-+ utils/types - holds different utilites for working with types.
-+ utils/utils - various other utilities.
++ [ui/gestures](./ApiReference/ui/gestures/HOW-TO.md) - contains the GesturesObserver class, which lets you observe and respond to user gestures
++ [ui/image-cache](./ApiReference/ui/image-cache/HOW-TO.md) - contains the Cache class, which handles image download requests and caches the already downloaded images.
++ [ui/dialogs](./ApiReference/ui/dialogs/HOW-TO.md) - allows you to show different dialogs such as alerts, prompts, etc.
 + [xml](./ApiReference/xml/HOW-TO.md) - contains the XmlParser class, which is a SAX parser using the easysax implementation