Merge pull request #255 from NativeScript/tgpetrov/examples-dataform

Added an example for DataForm

Author: tgpetrov

app/App_Resources/Android/drawable-hdpi/dataform_add.png

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="utf-8"?>
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+    android:insetTop="4dp"
+    android:insetBottom="4dp">
+    <selector>
+        <item android:state_checked="false" android:state_pressed="false">
+            <layer-list>
+                <item android:top="-6dp"
+                    android:left="-6dp"
+                    android:right="-6dp"
+                    android:bottom="1dp">
+                    <shape>
+                        <stroke
+                            android:color="@color/reservations_example_header" android:width="1dp"/>
+                        <solid
+                            android:color="#00000000"/>
+                    </shape>
+                </item>
+                <item>
+                    <bitmap android:gravity="right" android:src="@drawable/abc_spinner_mtrl_am_alpha"
+                        android:tint="@color/reservations_example_header" />
+                </item>
+            </layer-list>
+        </item>
+        <item>
+            <layer-list>
+                <item android:top="-8dp"
+                    android:left="-8dp"
+                    android:right="-8dp"
+                    android:bottom="0dp">
+                    <shape>
+                        <stroke
+                            android:color="@color/reservations_example_header" android:width="1.5dp"/>
+                        <solid
+                            android:color="#00000000"/>
+                    </shape>
+                </item>
+                <item>
+                    <bitmap android:gravity="right" android:src="@drawable/abc_spinner_mtrl_am_alpha"
+                        android:tint="@color/reservations_example_header" />
+                </item>
+            </layer-list>
+        </item>
+    </selector>
+</inset>

app/App_Resources/Android/drawable-hdpi/ic_close1.png

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="utf-8"?>
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+    android:insetTop="4dp"
+    android:insetBottom="4dp">
+    <selector>
+        <item android:state_checked="false" android:state_pressed="false">
+            <layer-list>
+                <item android:top="-6dp"
+                    android:left="-6dp"
+                    android:right="-6dp"
+                    android:bottom="1dp">
+                    <shape>
+                        <stroke
+                            android:color="@color/reservations_example_header" android:width="1dp"/>
+                        <solid
+                            android:color="#00000000"/>
+                    </shape>
+                </item>
+                <item>
+                    <bitmap android:gravity="right" android:src="@drawable/abc_spinner_mtrl_am_alpha"
+                        android:tint="@color/reservations_example_header" />
+                </item>
+            </layer-list>
+        </item>
+        <item>
+            <layer-list>
+                <item android:top="-8dp"
+                    android:left="-8dp"
+                    android:right="-8dp"
+                    android:bottom="0dp">
+                    <shape>
+                        <stroke
+                            android:color="?android:attr/colorControlActivated" android:width="1.5dp"/>
+                        <solid
+                            android:color="#00000000"/>
+                    </shape>
+                </item>
+                <item>
+                    <bitmap android:gravity="right" android:src="@drawable/abc_spinner_mtrl_am_alpha"
+                        android:tint="?android:attr/colorControlActivated" />
+                </item>
+            </layer-list>
+        </item>
+    </selector>
+</inset>

app/App_Resources/Android/drawable-hdpi/ic_dataform_calendar.png

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<Spinner android:id="@+id/data_form_spinner_editor"
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    style="@style/Widget.AppCompat.Spinner.Underlined"
+    android:textSize="@dimen/data_form_editor_text_size"
+    android:background="@drawable/reservation_spinner_background"
+    android:paddingTop="4dp"
+    android:paddingBottom="12dp"
+    android:tint="#FFFFFF"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"/>

app/App_Resources/Android/drawable-hdpi/ic_dataform_calendar_white.png

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<TextView xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@android:id/text1"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:padding="0dp"
+    android:textColor="#FFFFFF"
+    android:singleLine="true"
+    android:ellipsize="marquee"
+    style="?android:attr/spinnerItemStyle"/>

app/App_Resources/Android/drawable-hdpi/ic_dataform_guest.png

@@ -5,4 +5,6 @@
 	<color name="ns_mainbg">#E5E5E8</color>
 	<color name="ns_accent">#33B5E5</color>
 	<color name="ns_blue">#3D5AFE</color>
+	
+    <color name="reservations_example_header">#B1AFAE</color>
 </resources>

app/App_Resources/Android/drawable-hdpi/ic_dataform_guests_number.png

@@ -0,0 +1,134 @@
+import { ReservationsViewModel, Reservation } from "./reservations-view-model";
+import { EventData } from "data/observable";
+import { Page, NavigatedData } from "ui/page";
+import viewModule = require("ui/core/view");
+import { topmost as topmostFrame } from "ui/frame";
+import * as navigator from "../../common/navigator";
+import dataFormModule = require("nativescript-telerik-ui-pro/dataform");
+import { Color } from "color";
+import platform = require("platform");
+
+var colorAccent: Color = new Color("#BF3136");
+var model: ReservationsViewModel;
+var imageWidth: number;
+var scale;
+
+export function pageNavigatedTo(args: NavigatedData) {
+    var screen = platform.screen;
+    scale = screen.mainScreen.scale;
+    imageWidth = 56 * scale;
+
+    var page = <Page>args.object;
+    model = <ReservationsViewModel>args.context;
+    page.bindingContext = model;
+}
+
+export function saveChanges(args: EventData) {
+    var page = <Page>(<viewModule.View>args.object).page;
+    var dataForm = <dataFormModule.RadDataForm>viewModule.getViewById(page, "reservationForm");
+    dataForm.commitAll();
+
+    if (dataForm.hasValidationErrors()) {
+        return;
+    }
+
+    if (model.isNew) {
+        model.reservations.push(model.currentReservation);
+    }
+
+    navigator.navigateBackWithContext(model);
+}
+
+export function goBack(args: EventData) {
+    navigator.navigateBack();
+}
+
+export function dfEditorUpdate(data: dataFormModule.DataFormEventData) {
+
+    if (data.propertyName == "guests") {
+        setupEditorGuests(data.editor);
+    }
+
+    if (data.propertyName == "section" || data.propertyName == "table") {
+        editorSetupPicker(data.editor);
+    }
+
+    if (data.propertyName == "origin") {
+        var root;
+        if (data.editor.rootLayout instanceof Function) {
+            root = data.editor.rootLayout();
+        } else {
+            root = data.editor.rootLayout;
+        }
+        root.getLayoutParams().setMargins(imageWidth, 0, 0, 0);
+    }
+}
+
+export function dfEditorSetup(data: dataFormModule.DataFormEventData) {
+}
+
+export function setupEditorGuests(editor) {
+    var numberPicker = editor.getEditorView();
+    numberPicker.setPluralFormatString("%.0f guests");
+    numberPicker.setSingleFormatString("%.0f guest");
+    numberPicker.decreaseView().setTextColor(colorAccent.android);
+    numberPicker.increaseView().setTextColor(colorAccent.android);
+}
+
+export function dfGroupUpdate(data: dataFormModule.DataFormEventData) {
+    if (data.groupName != "TABLE DETAILS") {
+        return;
+    }
+
+    var androidContext = data.group.rootLayout().getContext();
+    var bgResourceId = androidContext.getResources().getIdentifier("dataform_table_bg", "drawable", androidContext.getPackageName());
+    var bgDrawable = androidContext.getResources().getDrawable(bgResourceId);
+    data.group.rootLayout().setBackground(bgDrawable);
+}
+
+export function editorSetupPicker(editor) {
+    var androidContext = editor.getEditorView().getContext();
+    var customEditorLayoutId = androidContext.getResources().getIdentifier("reservation_table_spinner_editor", "layout", androidContext.getPackageName());
+    var customItemLayoutId = androidContext.getResources().getIdentifier("reservation_table_spinner_item", "layout", androidContext.getPackageName());
+    editor.setSpinnerItemLayoutId(customItemLayoutId);
+    editor.setEditorLayout(customEditorLayoutId);
+}
+
+// Custom Button editor
+var buttonValue;
+export function editorNeedsView(args) {
+    var editorView: android.widget.TextView = new android.widget.TextView(args.context);
+    editorView.setTextColor(colorAccent.android);
+    var layoutParams = new android.widget.FrameLayout.LayoutParams(-2, -2);
+    layoutParams.setMargins(imageWidth, 0, 0, 0);
+    editorView.setLayoutParams(layoutParams);
+    var editorPadding = 4 * scale;
+    editorView.setPadding(editorPadding, editorPadding, editorPadding, editorPadding);
+
+    editorView.setOnClickListener(new android.view.View.OnClickListener({
+        onClick(view: android.view.View) {
+            handleTap(view, args.object);
+        }
+    }));
+    args.view = editorView;
+}
+
+export function editorHasToApplyValue(args) {
+    updateEditorValue(args.view, args.value);
+}
+
+export function editorNeedsValue(args) {
+    args.value = buttonValue;
+}
+
+export function updateEditorValue(editorView, value) {
+    buttonValue = value;
+    var buttonText = buttonValue ? "CANCELLED" : "CANCEL RESERVATION";
+    editorView.setText(buttonText);
+}
+
+export function handleTap(editorView, editor) {
+    var newValue = !buttonValue;
+    updateEditorValue(editorView, newValue);
+    editor.notifyValueChanged();
+}