diff --git a/apps/app/navigation-app/app.css b/apps/app/navigation-app/app.css new file mode 100644 index 000000000..6836901c4 --- /dev/null +++ b/apps/app/navigation-app/app.css @@ -0,0 +1,13 @@ +.btn1 { + background-color: lightgreen; + color: coral; + font-size: 20; + font-family: monospace; +} + +.btn2 { + background-color: coral; + color: lightgreen; + font-size: 24; + font-family: serif; +} \ No newline at end of file diff --git a/apps/app/navigation-app/app.ts b/apps/app/navigation-app/app.ts new file mode 100644 index 000000000..677bdc781 --- /dev/null +++ b/apps/app/navigation-app/app.ts @@ -0,0 +1,12 @@ +import * as application from "tns-core-modules/application"; +import * as trace from "tns-core-modules/trace"; +trace.addCategories( + trace.categories.Transition) +// + "," + +// trace.categories.NativeLifecycle + "," + +// trace.categories.Navigation); +trace.enable(); + +// Needed only for build infrastructure +application.setCssFileName("navigation-app/app.css"); +application.start({ moduleName: "navigation-app/main-page" }); \ No newline at end of file diff --git a/apps/app/navigation-app/main-page.ts b/apps/app/navigation-app/main-page.ts new file mode 100644 index 000000000..5f952ca9f --- /dev/null +++ b/apps/app/navigation-app/main-page.ts @@ -0,0 +1,69 @@ +import { EventData } from 'tns-core-modules/data/observable'; +import { Page, NavigatedData } from 'tns-core-modules/ui/page'; +import { topmost, NavigationEntry } from 'tns-core-modules/ui/frame'; + +export function nav() { + const e: NavigationEntry = { + moduleName: "navigation-app/main-page" + } + topmost().navigate(e) +} +export function navClearTrans() { + console.log("transition and clear") + + const e: NavigationEntry = { + transition: { + name: "slideLeft", + curve: "linear" + }, + clearHistory: true, + moduleName: "navigation-app/main-page" + } + topmost().navigate(e) +} + +export function navWithTransition() { + const e: NavigationEntry = { + transition: { + name: "slideLeft", + curve: "linear" + }, + moduleName: "navigation-app/main-page" + } + topmost().navigate(e) +} + +export function navWithClear() { + const e: NavigationEntry = { + clearHistory: true, + moduleName: "navigation-app/main-page" + } + topmost().navigate(e) +} + +let i = 0; +const colors = ["lightgreen", "lightblue", "lightcoral"] + +export function navigatedFrom(args: NavigatedData) { + console.log(`navigatedFrom ${args.object.toString()} isBack: ${args.isBackNavigation}`) +} + +export function navigatedTo(args: NavigatedData) { + console.log(`navigatedTo ${args.object.toString()} isBack: ${args.isBackNavigation}`) +} + +export function navigatingTo(args: NavigatedData) { + if (!args.isBackNavigation) { + (args.object).page.backgroundColor = colors[(i++) % 3]; + const array = new Array(); + for (let i = 0; i < 50; i++) { + array[i] = i; + } + (args.object).page.bindingContext = array; + } + console.log(`navigatingTo ${args.object.toString()} isBack: ${args.isBackNavigation}`) +} + +export function navigatingFrom(args: NavigatedData) { + console.log(`navigatingFrom ${args.object.toString()} isBack: ${args.isBackNavigation}`) +} \ No newline at end of file diff --git a/apps/app/navigation-app/main-page.xml b/apps/app/navigation-app/main-page.xml new file mode 100644 index 000000000..cf7d2a0d8 --- /dev/null +++ b/apps/app/navigation-app/main-page.xml @@ -0,0 +1,13 @@ + + +