From 88f5c9a7fd9cf251668aa8b4b0521572d67fd863 Mon Sep 17 00:00:00 2001 From: Andreww8xx8 Date: Fri, 13 Mar 2015 13:52:17 +0300 Subject: [PATCH 1/4] Ability to use different templates for iOS and Android added --- apps/editable-text-demo/app.ts | 2 +- apps/platform-specific-template/app.ts | 3 +++ .../main-page.android.xml | 5 +++++ apps/platform-specific-template/main-page.ios.xml | 5 +++++ apps/platform-specific-template/main-page.ts | 1 + apps/platform-specific-template/package.json | 2 ++ ui/frame/frame-common.ts | 15 +++++++++++++-- 7 files changed, 30 insertions(+), 3 deletions(-) create mode 100644 apps/platform-specific-template/app.ts create mode 100644 apps/platform-specific-template/main-page.android.xml create mode 100644 apps/platform-specific-template/main-page.ios.xml create mode 100644 apps/platform-specific-template/main-page.ts create mode 100644 apps/platform-specific-template/package.json diff --git a/apps/editable-text-demo/app.ts b/apps/editable-text-demo/app.ts index 0f172a73b..83670f56b 100644 --- a/apps/editable-text-demo/app.ts +++ b/apps/editable-text-demo/app.ts @@ -1,3 +1,3 @@ import application = require("application"); application.mainModule = "app/main-page"; -application.start(); \ No newline at end of file +application.start(); diff --git a/apps/platform-specific-template/app.ts b/apps/platform-specific-template/app.ts new file mode 100644 index 000000000..83670f56b --- /dev/null +++ b/apps/platform-specific-template/app.ts @@ -0,0 +1,3 @@ +import application = require("application"); +application.mainModule = "app/main-page"; +application.start(); diff --git a/apps/platform-specific-template/main-page.android.xml b/apps/platform-specific-template/main-page.android.xml new file mode 100644 index 000000000..a4508325e --- /dev/null +++ b/apps/platform-specific-template/main-page.android.xml @@ -0,0 +1,5 @@ + + + + diff --git a/apps/platform-specific-template/main-page.ios.xml b/apps/platform-specific-template/main-page.ios.xml new file mode 100644 index 000000000..c3be93a20 --- /dev/null +++ b/apps/platform-specific-template/main-page.ios.xml @@ -0,0 +1,5 @@ + + + + diff --git a/apps/platform-specific-template/main-page.ts b/apps/platform-specific-template/main-page.ts new file mode 100644 index 000000000..5f282702b --- /dev/null +++ b/apps/platform-specific-template/main-page.ts @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/platform-specific-template/package.json b/apps/platform-specific-template/package.json new file mode 100644 index 000000000..cdfd44208 --- /dev/null +++ b/apps/platform-specific-template/package.json @@ -0,0 +1,2 @@ +{ "name" : "platform-specific-template", + "main" : "app.js" } diff --git a/ui/frame/frame-common.ts b/ui/frame/frame-common.ts index 84749370d..eacee85aa 100644 --- a/ui/frame/frame-common.ts +++ b/ui/frame/frame-common.ts @@ -6,6 +6,7 @@ import trace = require("trace"); import builder = require("ui/builder"); import fs = require("file-system"); import utils = require("utils/utils"); +import platform = require("platform"); var frameStack: Array = []; @@ -39,7 +40,7 @@ function resolvePageFromEntry(entry: definition.NavigationEntry): pages.Page { } } else if (entry.moduleName) { - // Current app full path. + // Current app full path. var currentAppPath = fs.knownFolders.currentApp().path; //Full path of the module = current app full path + module name. var moduleNamePath = fs.path.join(currentAppPath, entry.moduleName); @@ -67,12 +68,22 @@ function resolvePageFromEntry(entry: definition.NavigationEntry): pages.Page { return page; } +function resolvePlatformPath(path, ext) { + var platformName = platform.device.os.toLowerCase(); + var platformPath = [path, platformName, ext].join("."); + if (fs.File.exists(platformPath)) { + return platformPath; + } + + return [path, ext].join("."); +} + function pageFromBuilder(moduleNamePath: string, moduleName: string, moduleExports: any): pages.Page { var page: pages.Page; var element: view.View; // Possible XML file path. - var fileName = moduleNamePath + ".xml"; + var fileName = resolvePlatformPath(moduleNamePath, "xml"); if (fs.File.exists(fileName)) { trace.write("Loading XML file: " + fileName, trace.categories.Navigation); From 9e15302db3bc177e005de4525986c48c384f2b65 Mon Sep 17 00:00:00 2001 From: Andreww8xx8 Date: Fri, 13 Mar 2015 15:28:13 +0300 Subject: [PATCH 2/4] Ability to use different CSS for iOS and Android added --- ui/frame/frame-common.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/frame/frame-common.ts b/ui/frame/frame-common.ts index eacee85aa..2a1856157 100644 --- a/ui/frame/frame-common.ts +++ b/ui/frame/frame-common.ts @@ -94,7 +94,7 @@ function pageFromBuilder(moduleNamePath: string, moduleName: string, moduleExpor page = element; // Possible CSS file path. - var cssFileName = moduleName + ".css"; + var cssFileName = resolvePlatformPath(moduleName, "css"); page.addCssFile(cssFileName); } } From 0b2c4cc5237baf6ed89cd32321b9cec31fe99357 Mon Sep 17 00:00:00 2001 From: vakrilov Date: Tue, 17 Mar 2015 17:20:15 +0200 Subject: [PATCH 3/4] file-name-resolver module --- CrossPlatformModules.csproj | 13 +- apps/tests/pages/file-load-test.ts | 29 +++ apps/tests/pages/files/other.xml | 1 + apps/tests/pages/files/test.android.phone.xml | 1 + apps/tests/pages/files/test.android.xml | 1 + apps/tests/pages/files/test.minWH300.xml | 1 + apps/tests/pages/files/test.minWH450.xml | 1 + apps/tests/pages/files/test.xml | 1 + file-system/file-name-resolver.d.ts | 16 ++ file-system/file-name-resolver.ts | 206 ++++++++++++++++++ platform/platform.android.ts | 4 +- platform/platform.d.ts | 10 + platform/platform.ios.ts | 4 +- ui/frame/frame-common.ts | 24 +- 14 files changed, 299 insertions(+), 13 deletions(-) create mode 100644 apps/tests/pages/file-load-test.ts create mode 100644 apps/tests/pages/files/other.xml create mode 100644 apps/tests/pages/files/test.android.phone.xml create mode 100644 apps/tests/pages/files/test.android.xml create mode 100644 apps/tests/pages/files/test.minWH300.xml create mode 100644 apps/tests/pages/files/test.minWH450.xml create mode 100644 apps/tests/pages/files/test.xml create mode 100644 file-system/file-name-resolver.d.ts create mode 100644 file-system/file-name-resolver.ts diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj index 43aa68733..36753dc3f 100644 --- a/CrossPlatformModules.csproj +++ b/CrossPlatformModules.csproj @@ -109,6 +109,7 @@ + @@ -167,6 +168,10 @@ + + + file-name-resolver.d.ts + image-source.d.ts @@ -540,6 +545,12 @@ + + + + + + @@ -1500,7 +1511,7 @@ False - + \ No newline at end of file diff --git a/apps/tests/pages/file-load-test.ts b/apps/tests/pages/file-load-test.ts new file mode 100644 index 000000000..dd2bfc2b2 --- /dev/null +++ b/apps/tests/pages/file-load-test.ts @@ -0,0 +1,29 @@ +import label = require("ui/label"); +import pages = require("ui/page"); +import fs = require("file-system"); +import fileResolverModule = require("file-system/file-name-resolver"); + +export function createPage() { + var page = new pages.Page(); + var lbl = new label.Label(); + + var moduleName = "app/tests/pages/files/test"; + + var resolver = new fileResolverModule.FileNameResolver({ + width: 400, + height: 600, + os: "android", + deviceType: "phone" + }); + + // Current app full path. + var currentAppPath = fs.knownFolders.currentApp().path; + var moduleNamePath = fs.path.join(currentAppPath, moduleName); + + var fileName = resolver.resolveFileName(moduleNamePath, "xml"); + lbl.text = fileName; + lbl.textWrap = true;; + + page.content = lbl; + return page; +} diff --git a/apps/tests/pages/files/other.xml b/apps/tests/pages/files/other.xml new file mode 100644 index 000000000..162275934 --- /dev/null +++ b/apps/tests/pages/files/other.xml @@ -0,0 +1 @@ +other.xml \ No newline at end of file diff --git a/apps/tests/pages/files/test.android.phone.xml b/apps/tests/pages/files/test.android.phone.xml new file mode 100644 index 000000000..7215449a5 --- /dev/null +++ b/apps/tests/pages/files/test.android.phone.xml @@ -0,0 +1 @@ +test.android.phone.xml \ No newline at end of file diff --git a/apps/tests/pages/files/test.android.xml b/apps/tests/pages/files/test.android.xml new file mode 100644 index 000000000..e6232e926 --- /dev/null +++ b/apps/tests/pages/files/test.android.xml @@ -0,0 +1 @@ +test.android.xml \ No newline at end of file diff --git a/apps/tests/pages/files/test.minWH300.xml b/apps/tests/pages/files/test.minWH300.xml new file mode 100644 index 000000000..07270d972 --- /dev/null +++ b/apps/tests/pages/files/test.minWH300.xml @@ -0,0 +1 @@ +test.minWH300.xml \ No newline at end of file diff --git a/apps/tests/pages/files/test.minWH450.xml b/apps/tests/pages/files/test.minWH450.xml new file mode 100644 index 000000000..e0c145e88 --- /dev/null +++ b/apps/tests/pages/files/test.minWH450.xml @@ -0,0 +1 @@ +test.monWH450.xml \ No newline at end of file diff --git a/apps/tests/pages/files/test.xml b/apps/tests/pages/files/test.xml new file mode 100644 index 000000000..3d02faa9c --- /dev/null +++ b/apps/tests/pages/files/test.xml @@ -0,0 +1 @@ +test.xml \ No newline at end of file diff --git a/file-system/file-name-resolver.d.ts b/file-system/file-name-resolver.d.ts new file mode 100644 index 000000000..b21dba00f --- /dev/null +++ b/file-system/file-name-resolver.d.ts @@ -0,0 +1,16 @@ +/** + * Provides FileNameResolver class used for loading files based on device capabilities. + */ +declare module "file-system/file-name-resolver" { + interface PlatformContext { + width: number; + height: number; + os: string; + deviceType: string; + } + + class FileNameResolver { + constructor(context: PlatformContext); + resolveFileName(path: string, ext: string): string; + } +} \ No newline at end of file diff --git a/file-system/file-name-resolver.ts b/file-system/file-name-resolver.ts new file mode 100644 index 000000000..5b38cd6d8 --- /dev/null +++ b/file-system/file-name-resolver.ts @@ -0,0 +1,206 @@ +import definition = require("file-system/file-name-resolver"); +import fs = require("file-system"); +import types = require("utils/types"); + +var MIN_WH: string = "minWH"; +var MIN_W: string = "minW"; +var MIN_H: string = "minH"; +var PRIORITY_STEP = 10000; + +interface QualifierSpec { + isMatch(value: string): boolean; + getMatchValue(value: string, context: definition.PlatformContext): number; +} + +var minWidthHeightQualifier: QualifierSpec = { + isMatch: function (value: string): boolean { + return value.indexOf(MIN_WH) === 0; + + }, + getMatchValue(value: string, context: definition.PlatformContext): number { + var numVal = parseInt(value.substr(MIN_WH.length)); + if (isNaN(numVal)) { + return -1; + } + + var actualLength = Math.min(context.width, context.height); + if (actualLength < numVal) { + return -1; + } + + return PRIORITY_STEP - (actualLength - numVal); + } +} + +var minWidthQualifier: QualifierSpec = { + isMatch: function (value: string): boolean { + return value.indexOf(MIN_W) === 0 && value.indexOf(MIN_WH) < 0; + + }, + getMatchValue(value: string, context: definition.PlatformContext): number { + var numVal = parseInt(value.substr(MIN_W.length)); + if (isNaN(numVal)) { + return -1; + } + + var actualWidth = context.width; + if (actualWidth < numVal) { + return -1; + } + + return PRIORITY_STEP - (actualWidth - numVal); + } +} + +var minHeightQualifier: QualifierSpec = { + isMatch: function (value: string): boolean { + return value.indexOf(MIN_H) === 0 && value.indexOf(MIN_WH) < 0; + + }, + getMatchValue(value: string, context: definition.PlatformContext): number { + var numVal = parseInt(value.substr(MIN_H.length)); + if (isNaN(numVal)) { + return -1; + } + + var actualHeight = context.height; + if (actualHeight < numVal) { + return -1; + } + + return PRIORITY_STEP - (actualHeight - numVal) + } +} + +var fromQualifier: QualifierSpec = { + isMatch: function (value: string): boolean { + return value === "tablet" || value === "phone"; + + }, + getMatchValue(value: string, context: definition.PlatformContext): number{ + if (value !== context.deviceType.toLocaleLowerCase()) { + return -1; + } + return 1; + } +} + +var paltformQualifier: QualifierSpec = { + isMatch: function (value: string): boolean { + return value === "android" || + value === "ios"; + + }, + getMatchValue(value: string, context: definition.PlatformContext): number{ + return value === context.os.toLowerCase() ? 1 : -1; + } +} + +// List of supported qualifiers ordered by priority +var supportedQualifiers: Array = [ + minWidthHeightQualifier, + minWidthQualifier, + minHeightQualifier, + paltformQualifier, + fromQualifier]; + +export class FileNameResolver implements definition.FileNameResolver { + private _context: definition.PlatformContext; + private _cache = {}; + + constructor(context: definition.PlatformContext) { + this._context = context; + } + + public resolveFileName(path: string, ext: string): string { + var key = path + ext; + var result: string = this._cache[key]; + if(types.isUndefined(result)) { + result = this.resolveFileNameImpl(path, ext); + this._cache[key] = result; + } + + return result; + } + + private resolveFileNameImpl(path: string, ext: string): string { + path = fs.path.normalize(path); + ext = "." + ext; + var folderPath = path.substring(0, path.lastIndexOf(fs.path.separator) + 1); + console.log("search folderPath: " + folderPath); + + if (fs.Folder.exists(folderPath)) { + var folder = fs.Folder.fromPath(folderPath); + + var candidates = new Array(); + folder.eachEntity((e) => { + + if (e instanceof fs.File) { + var file = e; + console.log("File path: " + e.path); + if (file.path.indexOf(path) === 0 && file.extension === ext) { + candidates.push(file); + + } + } + + return true; + }); + + var bestValue = Number.MIN_VALUE; + var bestCandidate: fs.File = null; + + console.log("Candidates:"); + for (var i = 0; i < candidates.length; i++) { + console.log("---------- candiate[" + i + "]: " + candidates[i].name); + var filePath = candidates[i].path; + var qualifiersStr: string = filePath.substr(path.length, filePath.length - path.length - ext.length); + + var qualifiers = qualifiersStr.split("."); + + var value = this.checkQualifiers(qualifiers); + console.log("qualifiers: " + qualifiersStr + " result: " + value); + + if (value >= 0 && value > bestValue) { + bestValue = value; + bestCandidate = candidates[i]; + } + } + } + + return bestCandidate ? bestCandidate.path : null; + } + + private checkQualifiers(qualifiers: Array): number { + var result = 0; + for (var i = 0; i < qualifiers.length; i++) { + if (qualifiers[i]) { + var value = this.checkQualifier(qualifiers[i]); + + console.log("checking qualifier: " + qualifiers[i] + " result: " + value); + if (value < 0) { + // Non of the supported qualifiers matched this or the match was not satisified + return -1; + } + + result += value; + } + } + + return result; + } + + private checkQualifier(value: string) { + for (var i = 0; i < supportedQualifiers.length; i++) { + if (supportedQualifiers[i].isMatch(value)) { + var result = supportedQualifiers[i].getMatchValue(value, this._context); + if (result > 0) { + result += (supportedQualifiers.length - i) * PRIORITY_STEP; + } + return result; + } + } + + return -1; + } +} diff --git a/platform/platform.android.ts b/platform/platform.android.ts index f4e62227a..686eb2100 100644 --- a/platform/platform.android.ts +++ b/platform/platform.android.ts @@ -73,7 +73,9 @@ export class screen implements definition.screen { mainScreenInfo = { widthPixels: metrics.widthPixels, heightPixels: metrics.heightPixels, - scale: metrics.density + scale: metrics.density, + widthDIPs: metrics.widthPixels / metrics.density, + heightDIPs: metrics.heightPixels / metrics.density } } return mainScreenInfo; diff --git a/platform/platform.d.ts b/platform/platform.d.ts index 2bcb057ab..2901f0de2 100644 --- a/platform/platform.d.ts +++ b/platform/platform.d.ts @@ -61,6 +61,16 @@ declare module "platform" { */ heightPixels: number; + /** + * Gets the absolute width of the screen in density independent pixels. + */ + widthDIPs: number; + + /** + * Gets the absolute height of the screen in density independent pixels. + */ + heightDIPs: number; + /** * The logical density of the display. This is a scaling factor for the Density Independent Pixel unit. */ diff --git a/platform/platform.ios.ts b/platform/platform.ios.ts index 6d03d14fb..6a2fffdc5 100644 --- a/platform/platform.ios.ts +++ b/platform/platform.ios.ts @@ -71,7 +71,9 @@ export class screen implements definition.screen { mainScreenInfo = { widthPixels: size.width * scale, heightPixels: size.height * scale, - scale: scale + scale: scale, + widthDIPs: size.width, + heightDIPs: size.height } } } diff --git a/ui/frame/frame-common.ts b/ui/frame/frame-common.ts index 2a1856157..b11f3f2d4 100644 --- a/ui/frame/frame-common.ts +++ b/ui/frame/frame-common.ts @@ -7,6 +7,7 @@ import builder = require("ui/builder"); import fs = require("file-system"); import utils = require("utils/utils"); import platform = require("platform"); +import fileResolverModule = require("file-system/file-name-resolver"); var frameStack: Array = []; @@ -68,14 +69,17 @@ function resolvePageFromEntry(entry: definition.NavigationEntry): pages.Page { return page; } -function resolvePlatformPath(path, ext) { - var platformName = platform.device.os.toLowerCase(); - var platformPath = [path, platformName, ext].join("."); - if (fs.File.exists(platformPath)) { - return platformPath; - } - - return [path, ext].join("."); +var fileNameResolver: fileResolverModule.FileNameResolver; +function resolveFilePath(path, ext) { + if (!fileNameResolver) { + fileNameResolver = new fileResolverModule.FileNameResolver({ + width: platform.screen.mainScreen.widthDIPs, + height: platform.screen.mainScreen.heightDIPs, + os: platform.device.os, + deviceType: platform.device.deviceType + }); + } + return fileNameResolver.resolveFileName(path, ext); } function pageFromBuilder(moduleNamePath: string, moduleName: string, moduleExports: any): pages.Page { @@ -83,7 +87,7 @@ function pageFromBuilder(moduleNamePath: string, moduleName: string, moduleExpor var element: view.View; // Possible XML file path. - var fileName = resolvePlatformPath(moduleNamePath, "xml"); + var fileName = resolveFilePath(moduleNamePath, "xml"); if (fs.File.exists(fileName)) { trace.write("Loading XML file: " + fileName, trace.categories.Navigation); @@ -94,7 +98,7 @@ function pageFromBuilder(moduleNamePath: string, moduleName: string, moduleExpor page = element; // Possible CSS file path. - var cssFileName = resolvePlatformPath(moduleName, "css"); + var cssFileName = resolveFilePath(moduleName, "css"); page.addCssFile(cssFileName); } } From 88f6a936fc50102cc3df26f08161bab094f2a08e Mon Sep 17 00:00:00 2001 From: vakrilov Date: Wed, 18 Mar 2015 12:37:33 +0200 Subject: [PATCH 4/4] Tests added and master-detail tempalte updated --- CrossPlatformModules.csproj | 14 +- apps/template-master-detail/app.css | 11 +- apps/template-master-detail/details-page.ts | 4 +- apps/template-master-detail/details-page.xml | 9 +- apps/template-master-detail/details-view.xml | 4 + .../main-page.minWH600.xml | 17 ++ apps/template-master-detail/main-page.ts | 12 +- apps/template-master-detail/main-page.xml | 3 +- .../file-name-resolver-tests.ts | 245 ++++++++++++++++++ .../files/other.xml | 0 .../files/test.android.minWH600.xml} | 0 .../files/test.android.xml | 0 .../files/test.ios.land.xml} | 0 .../files/test.xml | 0 apps/tests/pages/files/test.android.phone.xml | 1 - apps/tests/pages/page5.ts | 57 ++-- apps/tests/testRunner.ts | 1 + file-system/file-name-resolver.d.ts | 8 +- file-system/file-name-resolver.ts | 163 ++++++------ ui/frame/frame-common.ts | 7 +- ui/page/page-common.ts | 27 +- 21 files changed, 439 insertions(+), 144 deletions(-) create mode 100644 apps/template-master-detail/details-view.xml create mode 100644 apps/template-master-detail/main-page.minWH600.xml create mode 100644 apps/tests/file-name-resolver-tests/file-name-resolver-tests.ts rename apps/tests/{pages => file-name-resolver-tests}/files/other.xml (100%) rename apps/tests/{pages/files/test.minWH450.xml => file-name-resolver-tests/files/test.android.minWH600.xml} (100%) rename apps/tests/{pages => file-name-resolver-tests}/files/test.android.xml (100%) rename apps/tests/{pages/files/test.minWH300.xml => file-name-resolver-tests/files/test.ios.land.xml} (100%) rename apps/tests/{pages => file-name-resolver-tests}/files/test.xml (100%) delete mode 100644 apps/tests/pages/files/test.android.phone.xml diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj index 36753dc3f..59a20fcbd 100644 --- a/CrossPlatformModules.csproj +++ b/CrossPlatformModules.csproj @@ -82,6 +82,7 @@ main-page.xml + main-page.xml @@ -96,15 +97,13 @@ details-page.xml - - main-page.xml - binding_tests.xml + @@ -542,6 +541,8 @@ Designer + + @@ -551,6 +552,11 @@ + + + + + @@ -1511,7 +1517,7 @@ False - + \ No newline at end of file diff --git a/apps/template-master-detail/app.css b/apps/template-master-detail/app.css index d7e46cecb..64530bbd8 100644 --- a/apps/template-master-detail/app.css +++ b/apps/template-master-detail/app.css @@ -13,15 +13,22 @@ ListView { horizontal-align: center; } +.detail-title { + margin: 10; + font-size: 26; + color: #3c3c3c; + horizontal-align: center; +} + .listItem { margin: 10; horizontal-align: center; color: #808080; - font-size: 24; + font-size: 20; } .info { margin: 10; - font-size: 24; + font-size: 20; color: #808080; } diff --git a/apps/template-master-detail/details-page.ts b/apps/template-master-detail/details-page.ts index f5cf8a2b4..a41dcea7b 100644 --- a/apps/template-master-detail/details-page.ts +++ b/apps/template-master-detail/details-page.ts @@ -1,8 +1,8 @@ import pages = require("ui/page"); import observable = require("data/observable"); - +import vmModule = require("./main-view-model"); // Event handler for Page "navigatedTo" event attached in details-page.xml export function pageNavigatedTo(args: observable.EventData) { var page = args.object; - page.bindingContext = page.navigationContext; + page.bindingContext = vmModule.mainViewModel.get("selectedItem"); } diff --git a/apps/template-master-detail/details-page.xml b/apps/template-master-detail/details-page.xml index 5d5be2a4c..b37a41623 100644 --- a/apps/template-master-detail/details-page.xml +++ b/apps/template-master-detail/details-page.xml @@ -1,6 +1,5 @@ - - - + + \ No newline at end of file diff --git a/apps/template-master-detail/details-view.xml b/apps/template-master-detail/details-view.xml new file mode 100644 index 000000000..b6a4c11b9 --- /dev/null +++ b/apps/template-master-detail/details-view.xml @@ -0,0 +1,4 @@ + + diff --git a/apps/template-master-detail/main-page.minWH600.xml b/apps/template-master-detail/main-page.minWH600.xml new file mode 100644 index 000000000..f1b30e0dc --- /dev/null +++ b/apps/template-master-detail/main-page.minWH600.xml @@ -0,0 +1,17 @@ + + + + \ No newline at end of file diff --git a/apps/template-master-detail/main-page.ts b/apps/template-master-detail/main-page.ts index b50df57f4..ca1064889 100644 --- a/apps/template-master-detail/main-page.ts +++ b/apps/template-master-detail/main-page.ts @@ -1,9 +1,12 @@ import observable = require("data/observable"); import pages = require("ui/page"); import frames = require("ui/frame"); +import platform = require("platform"); import listView = require("ui/list-view"); import vmModule = require("./main-view-model"); +var twoPaneLayout = Math.min(platform.screen.mainScreen.widthDIPs, platform.screen.mainScreen.heightDIPs) > 600; + // Event handler for Page "loaded" event attached in main-page.xml export function pageLoaded(args: observable.EventData) { var page = args.object; @@ -12,8 +15,9 @@ export function pageLoaded(args: observable.EventData) { export function listViewItemTap(args: listView.ItemEventData) { // Navigate to the details page with context set to the current data item - frames.topmost().navigate({ - moduleName: "app/details-page", - context: args.view.bindingContext - }); + if (!twoPaneLayout) { + frames.topmost().navigate("app/details-page"); + } + + vmModule.mainViewModel.set("selectedItem", args.view.bindingContext); } \ No newline at end of file diff --git a/apps/template-master-detail/main-page.xml b/apps/template-master-detail/main-page.xml index 1e957cf08..b15e0d6ac 100644 --- a/apps/template-master-detail/main-page.xml +++ b/apps/template-master-detail/main-page.xml @@ -1,4 +1,5 @@ - +