refactor: add borders examples

.eslintrc

@@ -46,7 +46,6 @@
         "max-statements-per-line": "error",
         "new-parens": "error",
         "newline-per-chained-call": "off",
-        "no-alert": "error",
         "no-array-constructor": "error",
         "no-bitwise": [
             "error",

app/main-page.js

@@ -6,6 +6,8 @@ const navigationLinks = [
     new link("ActivityIndicator", "ui/activity-indicator/activity-indicator-page"),
     new link("Animations", "ui/animations/animations-page"),
     new link("Button", "ui/button/button-page"),
+    new link("Borders", "ui/borders/borders-page"),
+
     new link("DatePicker", "/date-picker"),
     new link("Dialogs", "/dialogs"),
     new link("Layouts", "/layouts"),

app/ui/action-bar/action-bar-page.js

@@ -1,7 +1,8 @@
 const ListViewLinksModel = require("../../links-view-model");
 const link = require("../../link");
 const navigationLinks = [
-    new link("Basics", "/ui/action-bar/basics/basics-page")
+    new link("Basics", "/ui/action-bar/basics/basics-page"),
+    new link("Code-Behind", "/ui/action-bar/code-behind/code-behind-page")
 ];
 function onNavigatingTo(args) {
     const page = args.object;

app/ui/action-bar/code-behind/article.md

@@ -0,0 +1,4 @@
+The `ActionBar` can be dynamically created and controlled.
+The property `navigationButton` allows us to overwrite the default navigation button (if one is present).
+To explicitly show/hide an action bar on your page, use the `actionBarHidden` property of the current page.
+<snippet id='actionbar-code-behind'/>

app/ui/action-bar/code-behind/code-behind-page.js

@@ -0,0 +1,20 @@
+const ActionBar = require("tns-core-modules/ui/action-bar").ActionBar;
+const NavigationButton = require("tns-core-modules/ui/action-bar").NavigationButton;
+
+function onLoaded(args) {
+    const page = args.object;
+
+    // >> actionbar-code-behind
+    const newActionBar = new ActionBar();
+    newActionBar.title = "Code-Behind ActionBar";
+
+    const newNavigaitonButton = new NavigationButton();
+    newNavigaitonButton.text = "Go Back";
+    newActionBar.navigationButton = newNavigaitonButton;
+
+    page.actionBar = newActionBar;
+    page.actionBarHidden = false;
+    // << actionbar-code-behind
+}
+exports.onLoaded = onLoaded;
+

app/ui/action-bar/code-behind/code-behind-page.xml

@@ -0,0 +1,3 @@
+<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onLoaded">
+
+</Page>

app/ui/activity-indicator/activity-indicator-page.js

@@ -3,7 +3,7 @@ const link = require("../../link");
 const navigationLinks = [
     new link("Basics", "/ui/activity-indicator/basics/basics-page"),
     new link("Styling", "/ui/activity-indicator/styling/styling-page"),
-    new link("Dynamic Creation", "/ui/activity-indicator/code-behind/code-behind-page")
+    new link("Code-Behind", "/ui/activity-indicator/code-behind/code-behind-page")
 ];
 
 function onNavigatingTo(args) {

app/ui/animations/animations-page.js

@@ -1,8 +1,8 @@
 const ListViewLinksModel = require("../../links-view-model");
 const link = require("../../link");
 const navigationLinks = [
-    new link("Animating Multiple Properties", "/ui/animations/animating-properties/animating-properties-page"),
-    new link("Chaining Animations", "/ui/animations/chaining-animations/chaining-animations-page"),
+    new link("Animated Properties", "/ui/animations/animating-properties/animating-properties-page"),
+    new link("Chained Animations", "/ui/animations/chaining-animations/chaining-animations-page"),
     new link("Animating Multiple Views", "/ui/animations/multiple-views/multiple-views-page")
 ];
 

app/ui/borders/basics/article.md

@@ -0,0 +1,9 @@
+
+| CSS Property        | JavaScript         | Property Description                       |
+| :----------------:|:------------------:|:------------------------------------------:|
+| border-color      | borderColor         | Sets a border color to the matched view’s. Accepts hex color value or `Color` instance.| 
+| border-width        | borderWidth         | Sets a border width to the matched view’s. Accepts number value as a DIP (Device independent pixels).| 
+| border-radius        | borderRadius         | Sets a border radius to the matched view’s. Accepts number value as a DIP (Device independent pixels).| 
+
+Setting border properties thought CSS class.
+<snippet id='css-border-props'/>

app/ui/borders/basics/basics-page.css

@@ -0,0 +1,12 @@
+Label {
+    background-color: lightslategray;
+    color: white;
+    padding: 16;
+}
+/* >> css-border-props */
+.border-props {
+    border-width: 3;
+    border-color: orangered;
+    border-radius: 20;
+}
+/* << css-border-props */

app/ui/borders/basics/basics-page.js

@@ -0,0 +1,11 @@
+const Observable = require("tns-core-modules/data/observable").Observable;
+
+exports.onNavigatingTo = function(args) {
+    const page = args.object;
+
+    const vm = new Observable();
+    const cssSnippet = ".border-props {\n    border-width: 2;\n    border-color: orangered;\n    border-radius: 20;\n}";
+    vm.set("snippet", cssSnippet);
+
+    page.bindingContext = vm;
+};

app/ui/borders/basics/basics-page.xml

@@ -0,0 +1,9 @@
+<Page xmlns="http://www.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
+    <Page.actionBar>
+		<ActionBar title="Basics"/>
+	</Page.actionBar>
+
+    <GridLayout rows="* auto, *" class="p-16">
+        <Label row="1" text="{{ snippet }}" class="border-props" textWrap="true"/>
+    </GridLayout>
+</Page>

app/ui/borders/border-radius/article.md

@@ -0,0 +1,15 @@
+The `border-radius` property allows us to create rounded corners for NativeScript elements.
+This property can have from one, two or four values.
+
+Rules about applying `border-radius` values:
+
+- Four values - `border-radius: 15 50 30 5`; 
+First value applies to the top-left corner, second value applies to the top-right corner, third value applies to bottom-right corner, and fourth value applies to the bottom-left corner.
+
+- Two values - `border-radius: 5 10;` 
+First value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners.
+
+- One value - `border-radius: 10;` 
+The value applies to all four corners, which are rounded equally.
+
+<snippet id='border-radius-css'/>

app/ui/borders/border-radius/border-radius-page.css

@@ -0,0 +1,42 @@
+Label {
+    background-color: lightslategray;
+    border-width: 2;
+    border-color: orangered;
+    color: white;
+    margin-top: 8;
+    padding: 8;
+}
+
+/* >> border-radius-css */
+.no-top-left {
+    border-radius: 0 20 20 20;
+}
+
+.no-top-left-right {
+    border-radius: 0 0 20 20;
+}
+
+.no-bottom-left {
+    border-radius: 20 20 20 0;
+}
+
+.no-bottom-left-right {
+    border-radius: 20 20 0 0;
+}
+
+.radius-all-corners {
+    border-radius: 20;
+}
+
+.no-radius-at-all {
+    border-radius: 0;
+}
+
+.diagonal {
+    border-radius: 20 0;
+}
+
+.reverse-diagonal {
+    border-radius: 0 20;
+}
+/* << border-radius-css */

app/ui/borders/border-radius/border-radius-page.xml

@@ -0,0 +1,18 @@
+<Page xmlns="http://www.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
+    <Page.actionBar>
+		<ActionBar title="Border Radius"/>
+	</Page.actionBar>
+
+    <GridLayout rows="*, auto, *" columns="">
+        <StackLayout class="p-16" row="1">
+            <Label text="border-radius: 0 20 20 20;" class="text-center no-top-left" textWrap="true"/>
+            <Label text="border-radius: 0 0 20 20;" class="text-center no-top-left-right" textWrap="true"/>
+            <Label text="border-radius: 20 20 20 0;" class="text-center no-bottom-left" textWrap="true"/>
+            <Label text="border-radius: 20 20 0 0;" class="text-center no-bottom-left-right" textWrap="true"/>
+            <Label text="border-radius: 20;" class="text-center radius-all-corners" textWrap="true"/>
+            <Label text="border-radius: 0;" class="text-center no-radius-at-all" textWrap="true"/>
+            <Label text="border-radius: 20 0;" class="text-center diagonal" textWrap="true" />
+            <Label text="border-radius: 0 20;" class="text-center reverse-diagonal" textWrap="true" />
+        </StackLayout>
+    </GridLayout>
+</Page>

app/ui/borders/borders-page.js

@@ -0,0 +1,15 @@
+const ListViewLinksModel = require("../../links-view-model");
+const link = require("../../link");
+const navigationLinks = [
+    new link("Basics", "/ui/borders/basics/basics-page"),
+    new link("Border Radius", "/ui/borders/border-radius/border-radius-page"),
+    new link("Code-Behind", "/ui/borders/code-behind/code-behind-page")
+];
+function onNavigatingTo(args) {
+    const page = args.object;
+    page.bindingContext = new ListViewLinksModel({
+        links: navigationLinks,
+        actionBarTitle: args.context.title
+    });
+}
+exports.onNavigatingTo = onNavigatingTo;

app/ui/borders/borders-page.xml

@@ -0,0 +1,6 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:myList="components" navigatingTo="onNavigatingTo">
+    <Page.actionBar>
+		<ActionBar title="{{ actionBarTitle == null ? '' : actionBarTitle }}" icon="" class="action-bar"/>
+	</Page.actionBar>
+	<myList:list/>
+</Page>

app/ui/borders/code-behind/article.md

@@ -0,0 +1,2 @@
+Borders can be set dynamically via code-behind implementation.
+<snippet id='border-radius-code'/>

app/ui/borders/code-behind/code-behind-page.js

@@ -0,0 +1,26 @@
+const Observable = require("tns-core-modules/data/observable").Observable;
+const Color = require("tns-core-modules/color").Color;
+
+exports.onNavigatingTo = function(args) {
+    const page = args.object;
+
+    const vm = new Observable();
+    const cssSnippet = "label.borderWidth = 2;\nlabel.borderColor = new Color'orangered');\nlabel.borderRadius = 10;";
+    vm.set("snippet", cssSnippet);
+
+    page.bindingContext = vm;
+};
+
+exports.onLabelLoaded = function(args) {
+    const label = args.object;
+    label.backgroundColor = new Color("lightslategray");
+    label.color = "#FFFFFF";
+    label.fontSize = 14;
+    label.padding = 16;
+
+    // >> border-radius-code
+    label.borderWidth = 2;
+    label.borderColor = new Color("orangered");
+    label.borderRadius = 10;
+    // << border-radius-code
+};

app/ui/borders/code-behind/code-behind-page.xml

@@ -0,0 +1,9 @@
+<Page xmlns="http://www.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
+    <Page.actionBar>
+		<ActionBar title="Basics"/>
+	</Page.actionBar>
+
+    <GridLayout rows="* auto, *" class="p-16">
+        <Label row="1" text="{{ snippet }}" loaded="onLabelLoaded" textWrap="true"/>
+    </GridLayout>
+</Page>

app/ui/borders/end.md

@@ -0,0 +1 @@
+

app/ui/borders/overview.md

@@ -0,0 +1,2 @@
+NativeScript supports the creation of rounded corners through a subset of CSS properties.
+The supported CSS vorder properties are `border-width`, `border-color`, `border-radius`.

app/ui/button/basics/basics-page.js

@@ -10,11 +10,12 @@ exports.onNavigatingTo = onNavigatingTo;
 
 // >> button-tap-event
 function onTap(args) {
-    // const button = args.object;
-
-    let count = vm.get("counter"); // initial value = 0
+    const button = args.object;
+    // >> (hide)
+    let count = vm.get("counter");
     vm.set("counter", ++count);
-    console.log("Tapped ", vm.get("counter"), " times!");
+    // << (hide)
+    button.text = `Tapped ${count} times`;
 }
 exports.onTap = onTap;
 // << button-tap-event

app/ui/button/button-page.js

@@ -3,7 +3,7 @@ const link = require("../../link");
 const navigationLinks = [
     new link("Basics", "/ui/button/basics/basics-page"),
     new link("Styling", "/ui/button/styling/styling-page"),
-    new link("Dynamic Creation", "/ui/button/dynamic-creation/dynamic-creation-page")
+    new link("Code-Behind", "/ui/button/code-behind/code-behind-page")
 ];
 function onNavigatingTo(args) {
     const page = args.object;

app/ui/button/dynamic-creation/dynamic-creation-page.js → app/ui/button/code-behind/code-behind-page.js

@@ -9,8 +9,9 @@ function onNavigatingTo(args) {
     const myButton = new Button();
     myButton.text = "Tap me!";
     myButton.className = "btn btn-primary btn-active";
-    myButton.on("tap", () => {
-        console.log("My newly created button is tapped!");
+    myButton.on("tap", (args) => {
+        // args is of type EventData
+        alert("My newly created button is tapped!");
     });
     // << button-code-create
 

package.json

@@ -6,10 +6,10 @@
 	"nativescript": {
 		"id": "org.nativescript.nativescriptsdkexamplesjs",
 		"tns-ios": {
-			"version": "next"
+			"version": "4.0.1-2018-03-15-07"
 		},
 		"tns-android": {
-			"version": "next"
+			"version": "4.0.0-2018.3.12.1"
 		}
 	},
 	"dependencies": {