From a81ee1b14307ac9cc5d11513b56f4826c37a3324 Mon Sep 17 00:00:00 2001 From: Nathanael Anderson Date: Mon, 24 Aug 2015 02:04:31 -0500 Subject: [PATCH 1/4] frame-common.ts is missing the code to automagically load the page.css file if it exists on a page that is created via JavaScript createPage function. The expected behavior should be that the page.css file is always loaded if it exists. --- ui/frame/frame-common.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ui/frame/frame-common.ts b/ui/frame/frame-common.ts index 4c1851478..822c8bf7d 100644 --- a/ui/frame/frame-common.ts +++ b/ui/frame/frame-common.ts @@ -57,6 +57,10 @@ export function resolvePageFromEntry(entry: definition.NavigationEntry): pages.P if (moduleExports && moduleExports.createPage) { trace.write("Calling createPage()", trace.categories.Navigation); page = moduleExports.createPage(); + var cssFileName = fileResolverModule.resolveFileName(moduleNamePath, "css"); + if (cssFileName) { + page.addCssFile(cssFileName); + } } else { page = pageFromBuilder(moduleNamePath, moduleExports); From 43a954f4a02e16c763d2e399c0511e2ed7927239 Mon Sep 17 00:00:00 2001 From: Nathanael Anderson Date: Mon, 24 Aug 2015 02:08:09 -0500 Subject: [PATCH 2/4] Added a safe guard in case somehow the createPage does not return a valid page component. --- 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 822c8bf7d..cfc4e6295 100644 --- a/ui/frame/frame-common.ts +++ b/ui/frame/frame-common.ts @@ -58,7 +58,7 @@ export function resolvePageFromEntry(entry: definition.NavigationEntry): pages.P trace.write("Calling createPage()", trace.categories.Navigation); page = moduleExports.createPage(); var cssFileName = fileResolverModule.resolveFileName(moduleNamePath, "css"); - if (cssFileName) { + if (cssFileName && page && page.addCssFile) { page.addCssFile(cssFileName); } } From a95dafd72ecdf46ec73c57014e8bf078bb9459cb Mon Sep 17 00:00:00 2001 From: Nathanael Anderson Date: Mon, 24 Aug 2015 12:41:01 -0500 Subject: [PATCH 3/4] Changed the patch to eliminate duplicate code now it only has the css loaded in one spot. --- ui/frame/frame-common.ts | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/ui/frame/frame-common.ts b/ui/frame/frame-common.ts index cfc4e6295..f76be238c 100644 --- a/ui/frame/frame-common.ts +++ b/ui/frame/frame-common.ts @@ -57,10 +57,6 @@ export function resolvePageFromEntry(entry: definition.NavigationEntry): pages.P if (moduleExports && moduleExports.createPage) { trace.write("Calling createPage()", trace.categories.Navigation); page = moduleExports.createPage(); - var cssFileName = fileResolverModule.resolveFileName(moduleNamePath, "css"); - if (cssFileName && page && page.addCssFile) { - page.addCssFile(cssFileName); - } } else { page = pageFromBuilder(moduleNamePath, moduleExports); @@ -69,6 +65,12 @@ export function resolvePageFromEntry(entry: definition.NavigationEntry): pages.P if (!(page && page instanceof pages.Page)) { throw new Error("Failed to load Page from entry.moduleName: " + entry.moduleName); } + + // Possible CSS file path. + var cssFileName = fileResolverModule.resolveFileName(moduleNamePath, "css"); + if (cssFileName) { + page.addCssFile(cssFileName); + } } return page; @@ -87,12 +89,6 @@ function pageFromBuilder(moduleNamePath: string, moduleExports: any): pages.Page element = builder.load(fileName, moduleExports); if (element instanceof pages.Page) { page = element; - - // Possible CSS file path. - var cssFileName = fileResolverModule.resolveFileName(moduleNamePath, "css"); - if (cssFileName) { - page.addCssFile(cssFileName); - } } } From a67e46fc98c2c0e93265eb54255e6d00599f8103 Mon Sep 17 00:00:00 2001 From: Nathanael Anderson Date: Wed, 26 Aug 2015 03:19:02 -0500 Subject: [PATCH 4/4] Tests to test both a Declarative UI w/ CSS and a createPage w/ CSS file to verify CSS file is loaded --- apps/tests/ui/page/page-tests-common.ts | 31 ++++++++++++++++++- .../ui/page/test-page-declarative-css.css | 3 ++ .../ui/page/test-page-declarative-css.xml | 3 ++ apps/tests/ui/page/test-page-module-css.css | 3 ++ apps/tests/ui/page/test-page-module-css.ts | 19 ++++++++++++ 5 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 apps/tests/ui/page/test-page-declarative-css.css create mode 100644 apps/tests/ui/page/test-page-declarative-css.xml create mode 100644 apps/tests/ui/page/test-page-module-css.css create mode 100644 apps/tests/ui/page/test-page-module-css.ts diff --git a/apps/tests/ui/page/page-tests-common.ts b/apps/tests/ui/page/page-tests-common.ts index bdc8ee736..30ff43f16 100644 --- a/apps/tests/ui/page/page-tests-common.ts +++ b/apps/tests/ui/page/page-tests-common.ts @@ -247,7 +247,7 @@ export function test_LoadPageFromModule() { try { var topFrame = FrameModule.topmost(); TKUnit.assert(topFrame.currentPage.content instanceof LabelModule.Label, "Content of the test page should be a Label created within test-page-module."); - var testLabel = topFrame.currentPage.content + var testLabel = topFrame.currentPage.content; TKUnit.assert(testLabel.text === "Label created within a page module."); } finally { @@ -255,6 +255,35 @@ export function test_LoadPageFromModule() { } } +export function test_LoadPageFromDeclarativeWithCSS() { + helper.navigateToModule("ui/page/test-page-declarative-css"); + try { + var topFrame = FrameModule.topmost(); + TKUnit.assert(topFrame.currentPage.content instanceof LabelModule.Label, "Content of the test page should be a Label created within test-page-module-css."); + var testLabel = topFrame.currentPage.content; + TKUnit.assert(testLabel.text === "Label created within a page declarative file with css."); + TKUnit.assert(testLabel.style.backgroundColor.hex === "#ff00ff00", "Expected: #ff00ff00, Actual: " + testLabel.style.backgroundColor.hex); + } + finally { + helper.goBack(); + } + +} + +export function test_LoadPageFromModuleWithCSS() { + helper.navigateToModule("ui/page/test-page-module-css"); + try { + var topFrame = FrameModule.topmost(); + TKUnit.assert(topFrame.currentPage.content instanceof LabelModule.Label, "Content of the test page should be a Label created within test-page-module-css."); + var testLabel = topFrame.currentPage.content; + TKUnit.assert(testLabel.text === "Label created within a page module css."); + TKUnit.assert(testLabel.style.backgroundColor.hex === "#ff00ff00", "Expected: #ff00ff00, Actual: " + testLabel.style.backgroundColor.hex); + } + finally { + helper.goBack(); + } +} + export function test_NavigateToPageCreatedWithNavigationEntry() { var expectedText = "Label created with a NavigationEntry"; var testPage: PageModule.Page; diff --git a/apps/tests/ui/page/test-page-declarative-css.css b/apps/tests/ui/page/test-page-declarative-css.css new file mode 100644 index 000000000..1cebd4dd0 --- /dev/null +++ b/apps/tests/ui/page/test-page-declarative-css.css @@ -0,0 +1,3 @@ +Label { + background-color: #ff00ff00; +} \ No newline at end of file diff --git a/apps/tests/ui/page/test-page-declarative-css.xml b/apps/tests/ui/page/test-page-declarative-css.xml new file mode 100644 index 000000000..af7ce14a3 --- /dev/null +++ b/apps/tests/ui/page/test-page-declarative-css.xml @@ -0,0 +1,3 @@ + + \ No newline at end of file diff --git a/apps/tests/ui/page/test-page-module-css.css b/apps/tests/ui/page/test-page-module-css.css new file mode 100644 index 000000000..1cebd4dd0 --- /dev/null +++ b/apps/tests/ui/page/test-page-module-css.css @@ -0,0 +1,3 @@ +Label { + background-color: #ff00ff00; +} \ No newline at end of file diff --git a/apps/tests/ui/page/test-page-module-css.ts b/apps/tests/ui/page/test-page-module-css.ts new file mode 100644 index 000000000..6bfcf7c13 --- /dev/null +++ b/apps/tests/ui/page/test-page-module-css.ts @@ -0,0 +1,19 @@ +import PageModule = require("ui/page"); +import LabelModule = require("ui/label"); + +export class TestPageModule extends PageModule.Page { + constructor() { + super(); + + var label = new LabelModule.Label(); + label.text = "Label created within a page module css."; + + this.content = label; + } +} + +export function createPage() { + return new TestPageModule(); +} + +//export var Page = new TestPageModule(); \ No newline at end of file