Added HOW-TO's for animation and connectivity.

Author: hamorphis

ApiReference/connectivity/HOW-TO.md

@@ -0,0 +1,43 @@
+---
+nav-title: "connectivity How-To"
+title: "How-To"
+description: "Examples for using connectivity"
+---
+# Connectivity
+Obtaining connectivity information requires the "connectivity" module.
+``` JavaScript
+var connectivity = require("connectivity");
+```
+### Getting connection type
+``` JavaScript
+var connectionType = connectivity.getConnectionType();
+switch (connectionType) {
+ case connectivity.connectionType.none:
+ //console.log("No connection");
+ break;
+ case connectivity.connectionType.wifi:
+ //console.log("WiFi connection");
+ break;
+ case connectivity.connectionType.mobile:
+ //console.log("Mobile connection");
+ break;
+}
+```
+### Monitoring connection type.
+``` JavaScript
+connectivity.starMonitoring(function onConnectionTypeChanged(newConnectionType) {
+ switch (newConnectionType) {
+ case connectivity.connectionType.none:
+ //console.log("Connection type changed to none.");
+ break;
+ case connectivity.connectionType.wifi:
+ //console.log("Connection type changed to WiFi.");
+ break;
+ case connectivity.connectionType.mobile:
+ //console.log("Connection type changed to mobile.");
+ break;
+ }
+});
+//...
+connectivity.stopMonitoring();
+```

ApiReference/ui/animation/HOW-TO.md

@@ -0,0 +1,92 @@
+---
+nav-title: "animation How-To"
+title: "How-To"
+description: "Examples for using animation"
+---
+# Animation
+Animating view properties requires the "ui/animation" module.
+``` JavaScript
+var animation = require("ui/animation");
+```
+# Animating properties
+``` JavaScript
+label.animate({
+ opacity: 0.75,
+ backgroundColor: new colorModule.Color("Red"),
+ translate: { x: 100, y: 100 },
+ scale: { x: 2, y: 2 },
+ rotate: 180,
+ duration: 1000,
+ delay: 100,
+ iterations: 3,
+ curve: label.ios ? UIViewAnimationCurve.UIViewAnimationCurveEaseIn : new android.view.animation.AccelerateInterpolator(1),
+})
+ .then(function () {
+ //console.log("Animation finished.");
+})
+ .catch(function (e) {
+ console.log(e.message);
+});
+```
+# Cancelling animation
+``` JavaScript
+var animation1 = label.createAnimation({ translate: { x: 100, y: 100 } });
+animation1.play().finished
+ .then(function () {
+ //console.log("Animation finished");
+})
+ .catch(function (e) {
+ //console.log("Animation cancelled");
+});
+animation1.cancel();
+```
+# Chaining animations
+``` JavaScript
+label.animate({ opacity: 0 })
+ .then(function () { return label.animate({ opacity: 1 }); })
+ .then(function () { return label.animate({ translate: { x: 200, y: 200 } }); })
+ .then(function () { return label.animate({ translate: { x: 0, y: 0 } }); })
+ .then(function () { return label.animate({ scale: { x: 5, y: 5 } }); })
+ .then(function () { return label.animate({ scale: { x: 1, y: 1 } }); })
+ .then(function () { return label.animate({ rotate: 180 }); })
+ .then(function () { return label.animate({ rotate: 0 }); })
+ .then(function () {
+ //console.log("Animation finished");
+})
+ .catch(function (e) {
+ console.log(e.message);
+});
+```
+# Reusing animations
+``` JavaScript
+var animation1 = label.createAnimation({ translate: { x: 100, y: 100 } });
+var animation2 = label.createAnimation({ translate: { x: 0, y: 0 } });
+animation1.play().finished
+ .then(function () { return animation1.play().finished; })
+ .then(function () { return animation1.play().finished; })
+ .then(function () { return animation2.play().finished; })
+ .then(function () { return animation1.play().finished; })
+ .then(function () { return animation2.play().finished; })
+ .then(function () {
+ //console.log("Animation finished");
+})
+ .catch(function (e) {
+ console.log(e.message);
+});
+```
+# Animating multiple views simultaneously
+``` JavaScript
+var animations = [
+ { target: label1, translate: { x: 200, y: 200 }, duration: 1000, delay: 0 },
+ { target: label2, translate: { x: 200, y: 200 }, duration: 1000, delay: 333 },
+ { target: label3, translate: { x: 200, y: 200 }, duration: 1000, delay: 666 },
+];
+var a = new animation.Animation(animations);
+a.play().finished
+ .then(function () {
+ //console.log("Animations finished");
+})
+ .catch(function (e) {
+ console.log(e.message);
+});
+```

modules.md

@@ -34,6 +34,7 @@ In your project, the files for each module reside in a dedicated subdirectory in
 + [timer](./ApiReference/timer/HOW-TO.md): Lets you to create, start, stop and react to timers.
 + [trace](./ApiReference/trace/HOW-TO.md): Lets you trace and print specific information based on categories.
 + [ui/image-cache](./ApiReference/ui/image-cache/HOW-TO.md): Provides the `Cache` class which handles image download requests and caches the already downloaded images.
++ [connectivity](./ApiReference/connectivity/HOW-TO.md): Let's you check the type of internet connection and monitor its state changes.
 
 ### Device Functionality Modules
 
@@ -59,6 +60,8 @@ In your project, the files for each module reside in a dedicated subdirectory in
 + [text/formatted-string](./ApiReference/text/formatted-string/HOW-TO.md): Provides the `FormattedString` and `Span` classes which you can use to create rich text formatted strings.
 + [xml](./ApiReference/xml/HOW-TO.md): Provides the `XmlParser` class which is a SAX parser using the easysax implementation.
 + [ui/styling](./ApiReference/ui/styling/HOW-TO.md): Provides the `Style` class which is responsible for the visual appearance of elements.
++ [ui/animation](./ApiReference/ui/animation/HOW-TO.md): Provides the `Animation` class which lets you animate view properties.
+
 
 #### Layouts