support for custom components CSS added

CrossPlatformModules.csproj

@@ -211,7 +211,7 @@
     <TypeScriptCompile Include="apps\ui-tests-app\bindings\xmlbasics.ts">
       <DependentUpon>xmlbasics.xml</DependentUpon>
     </TypeScriptCompile>
-	<TypeScriptCompile Include="apps\ui-tests-app\bindings\basics.ts" />
+    <TypeScriptCompile Include="apps\ui-tests-app\bindings\basics.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\layouts\absolute.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\layouts\dock.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\layouts\grid.ts" />
@@ -706,6 +706,8 @@
     <Content Include="apps\tests\xml-declaration\mymodulewithxml\my-control-no-js.xml">
       <SubType>Designer</SubType>
     </Content>
+    <Content Include="apps\tests\xml-declaration\mymodulewithxml\MyControl.css" />
+    <Content Include="apps\tests\xml-declaration\mymodule\MyControl.css" />
     <Content Include="apps\ui-tests-app\bindings\xmlbasics.xml" />
     <Content Include="apps\ui-tests-app\layouts\absolute.xml" />
     <Content Include="apps\ui-tests-app\layouts\dock.xml" />
@@ -1674,7 +1676,7 @@
           <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
         </WebProjectProperties>
       </FlavorProperties>
-      <UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
+      <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
     </VisualStudio>
   </ProjectExtensions>
 </Project>

apps/tests/xml-declaration/mymodule/MyControl.css

@@ -0,0 +1,3 @@
+.MyStackLayout {
+    background-color: red;
+}

apps/tests/xml-declaration/mymodule/MyControl.ts

@@ -18,5 +18,7 @@ export class MyControl extends stackLayoutModule.StackLayout {
 
         this.addChild(lbl);
         this.addChild(btn);
+
+        this.cssClass = "MyStackLayout";
     }
 }

apps/tests/xml-declaration/mymodulewithxml/MyControl.css

@@ -0,0 +1,3 @@
+.MySecondCustomStackLayout {
+    background-color: green;
+}

apps/tests/xml-declaration/mymodulewithxml/MyControl.xml

@@ -1,4 +1,4 @@
-<StackLayout xmlns:customControls="xml-declaration/mymodule">
+<StackLayout xmlns:customControls="xml-declaration/mymodule" cssClass="MySecondCustomStackLayout">
   <Label id="Label1" text="mymodulewithxml" />
   <Button text="Click!" tap="buttonTap2" /> 
 </StackLayout>

ui/builder/builder.ts

@@ -7,6 +7,8 @@ import componentBuilder = require("ui/builder/component-builder");
 import templateBuilderDef = require("ui/builder/template-builder");
 import platform = require("platform");
 import definition = require("ui/builder");
+import frame = require("ui/frame");
+import page = require("ui/page");
 
 var KNOWNCOLLECTIONS = "knownCollections";
 
@@ -36,6 +38,7 @@ export function parse(value: string, context: any): view.View {
 }
 
 function parseInternal(value: string, context: any): componentBuilder.ComponentModule {
+    var currentPage: page.Page;
     var rootComponentModule: componentBuilder.ComponentModule;
     // Temporary collection used for parent scope.
     var parents = new Array<componentBuilder.ComponentModule>();
@@ -115,7 +118,7 @@ function parseInternal(value: string, context: any): componentBuilder.ComponentM
 
                 if (args.prefix && args.namespace) {
                     // Custom components
-                    componentModule = loadCustomComponent(args.namespace, args.elementName, args.attributes, context);
+                    componentModule = loadCustomComponent(args.namespace, args.elementName, args.attributes, context, currentPage);
                 } else {
                     // Default components
                     componentModule = componentBuilder.getComponentModule(args.elementName, args.namespace, args.attributes, context);
@@ -138,6 +141,10 @@ function parseInternal(value: string, context: any): componentBuilder.ComponentM
                     } else if (parents.length === 0) {
                         // Set root component.
                         rootComponentModule = componentModule;
+
+                        if (rootComponentModule && rootComponentModule.component instanceof page.Page) {
+                            currentPage = <page.Page>rootComponentModule.component;
+                        }
                     }
 
                     // Add the component instance to the parents scope collection.
@@ -175,7 +182,7 @@ function parseInternal(value: string, context: any): componentBuilder.ComponentM
     return rootComponentModule;
 }
 
-function loadCustomComponent(componentPath: string, componentName?: string, attributes?: Object, context?: Object): componentBuilder.ComponentModule {
+function loadCustomComponent(componentPath: string, componentName?: string, attributes?: Object, context?: Object, parentPage?: page.Page): componentBuilder.ComponentModule {
     var result: componentBuilder.ComponentModule;
     componentPath = componentPath.replace("~/", "");
 
@@ -208,6 +215,23 @@ function loadCustomComponent(componentPath: string, componentName?: string, attr
         result = componentBuilder.getComponentModule(componentName, componentPath, attributes, context);
     }
 
+    // Add component CSS file if exists.
+    var cssFileName = fileName.replace(".xml", ".css");
+    if (fs.File.exists(cssFileName)) {
+        var currentPage = parentPage;
+
+        if (!currentPage) {
+            var topMostFrame = frame.topmost();
+            if (topMostFrame && topMostFrame.currentPage) {
+                currentPage = topMostFrame.currentPage;
+            }
+        }
+
+        if (currentPage) {
+            currentPage.addCssFile(cssFileName);
+        }
+    }
+
     return result;
 }
 

ui/page/page-common.ts

@@ -20,7 +20,7 @@ var navigationBarHiddenProperty = new dependencyObservable.Property(
     );
 
 function onNavigationBarHiddenPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    console.log("onNavigationBarHiddenPropertyChanged("+data.newValue+")");
+    console.log("onNavigationBarHiddenPropertyChanged(" + data.newValue + ")");
     var page = <Page>data.object;
     if (page.isLoaded) {
         page._updateNavigationBar(data.newValue);
@@ -116,15 +116,18 @@ export class Page extends contentView.ContentView implements dts.Page, view.AddA
         this._refreshCss();
     }
 
+    private _cssFiles = {};
     public addCssFile(cssFileName: string) {
         if (cssFileName.indexOf(fs.knownFolders.currentApp().path) !== 0) {
             cssFileName = fs.path.join(fs.knownFolders.currentApp().path, cssFileName);
         }
-
-        var cssString;
-        if (fs.File.exists(cssFileName)) {
-            new fileSystemAccess.FileSystemAccess().readText(cssFileName, r => { cssString = r; });
-            this._addCssInternal(cssString, cssFileName);
+        if (!this._cssFiles[cssFileName]) {
+            if (fs.File.exists(cssFileName)) {
+                new fileSystemAccess.FileSystemAccess().readText(cssFileName, r => {
+                    this._addCssInternal(r, cssFileName);
+                    this._cssFiles[cssFileName] = true;
+                });
+            }
         }
     }