Move layout special properties sets out of the component builder.

Setters registered by the respective modules on import.

ui/builder/component-builder.ts

@@ -1,9 +1,6 @@
 import observable = require("data/observable");
 import view = require("ui/core/view");
 import bindable = require("ui/core/bindable");
-import dockLayoutDef = require("ui/layouts/dock-layout");
-import gridLayoutModule = require("ui/layouts/grid-layout");
-import absoluteLayoutDef = require("ui/layouts/absolute-layout");
 import types = require("utils/types");
 import definition = require("ui/builder/component-builder");
 import fs = require("file-system");
@@ -12,6 +9,13 @@ import bindingBuilder = require("ui/builder/binding-builder");
 import platform = require("platform");
 import pages = require("ui/page");
 
+//the imports below are needed for special property registration
+import "ui/layouts/dock-layout";
+import "ui/layouts/grid-layout";
+import "ui/layouts/absolute-layout";
+
+import {getSpecialPropertySetter} from "ui/builder/special-properties";
+
 var UI_PATH = "ui/";
 var MODULES = {
     "TabViewItem": "ui/tab-view",
@@ -22,28 +26,9 @@ var MODULES = {
     "SegmentedBarItem": "ui/segmented-bar",
 };
 
-var ROW = "row";
-var COL = "col";
-var COL_SPAN = "colSpan";
-var ROW_SPAN = "rowSpan";
-var DOCK = "dock";
-var LEFT = "left";
-var TOP = "top";
 var CODEFILE = "codeFile";
 var CSSFILE = "cssFile";
 
-export var specialProperties: Array<string> = [
-    ROW,
-    COL,
-    COL_SPAN,
-    ROW_SPAN,
-    DOCK,
-    LEFT,
-    TOP,
-    CODEFILE,
-    CSSFILE
-]
-
 var eventHandlers = {};
 
 export function getComponentModule(elementName: string, namespace: string, attributes: Object, exports: Object): definition.ComponentModule {
@@ -163,28 +148,6 @@ export function getComponentModule(elementName: string, namespace: string, attri
     return componentModule;
 }
 
-export function setSpecialPropertyValue(instance: view.View, propertyName: string, propertyValue: string) {
-    if (propertyName === ROW) {
-        gridLayoutModule.GridLayout.setRow(instance, !isNaN(+propertyValue) && +propertyValue);
-    } else if (propertyName === COL) {
-        gridLayoutModule.GridLayout.setColumn(instance, !isNaN(+propertyValue) && +propertyValue);
-    } else if (propertyName === COL_SPAN) {
-        gridLayoutModule.GridLayout.setColumnSpan(instance, !isNaN(+propertyValue) && +propertyValue);
-    } else if (propertyName === ROW_SPAN) {
-        gridLayoutModule.GridLayout.setRowSpan(instance, !isNaN(+propertyValue) && +propertyValue);
-    } else if (propertyName === LEFT) {
-        absoluteLayoutDef.AbsoluteLayout.setLeft(instance, !isNaN(+propertyValue) && +propertyValue);
-    } else if (propertyName === TOP) {
-        absoluteLayoutDef.AbsoluteLayout.setTop(instance, !isNaN(+propertyValue) && +propertyValue);
-    } else if (propertyName === DOCK) {
-        console.log('set dock: ' + propertyName + ' -> ' + propertyValue);
-        dockLayoutDef.DockLayout.setDock(instance, propertyValue);
-    } else {
-        return false;
-    }
-    return true;
-}
-
 export function setPropertyValue(instance: view.View, instanceModule: Object, exports: Object, propertyName: string, propertyValue: string) {
     // Note: instanceModule can be null if we are loading custom compnenet with no code-behind.
     var isEventOrGesture: boolean = isKnownEventOrGesture(propertyName, instance);
@@ -209,15 +172,16 @@ export function setPropertyValue(instance: view.View, instanceModule: Object, ex
         if (types.isFunction(handler)) {
             instance.on(propertyName, handler);
         }
-    } else if (setSpecialPropertyValue(instance, propertyName, propertyValue)) {
-        // Already set by setSpecialPropertyValue
     } else {
-        var attrHandled = false;
+        let attrHandled = false;
-
+        let specialSetter = getSpecialPropertySetter(propertyName);
-        if ((<any>instance)._applyXmlAttribute) {
+        if (!attrHandled && specialSetter) {
+            specialSetter(instance, propertyValue);
+            attrHandled = true;
+        }
+        if (!attrHandled && (<any>instance)._applyXmlAttribute) {
             attrHandled = (<any>instance)._applyXmlAttribute(propertyName, propertyValue);
         }
-
         if (!attrHandled) {
             // Try to convert value to number.
             var valueAsNumber = +propertyValue;

ui/builder/special-properties.ts

@@ -0,0 +1,23 @@
+import view = require("ui/core/view");
+
+export type PropertySetter = (instance: view.View, propertyValue: string) => void;
+
+var specialProperties: Map<string, PropertySetter> = new Map<string, PropertySetter>();
+
+function specialPropertyKey(name: string) {
+    return name.toLowerCase();
+}
+
+export function registerSpecialProperty(name: string, setter: PropertySetter) {
+    let propertyKey = specialPropertyKey(name);
+    if (specialProperties.has(propertyKey)) {
+        throw new Error(`Property for ${propertyKey} already registered`);
+    } else {
+        specialProperties.set(propertyKey, setter);
+    }
+}
+
+export function getSpecialPropertySetter(name: string): PropertySetter {
+    let propertyKey = specialPropertyKey(name);
+    return specialProperties.get(propertyKey);
+}

ui/layouts/absolute-layout/absolute-layout-common.ts

@@ -3,6 +3,7 @@ import definition = require("ui/layouts/absolute-layout");
 import dependencyObservable = require("ui/core/dependency-observable");
 import view = require("ui/core/view");
 import proxy = require("ui/core/proxy");
+import {registerSpecialProperty} from "ui/builder/special-properties";
 
 function validateArgs(element: view.View): view.View {
     if (!element) {
@@ -11,6 +12,13 @@ function validateArgs(element: view.View): view.View {
     return element;
 }
 
+registerSpecialProperty("left", (instance, propertyValue) => {
+    AbsoluteLayout.setLeft(instance, !isNaN(+propertyValue) && +propertyValue);
+});
+registerSpecialProperty("top", (instance, propertyValue) => {
+    AbsoluteLayout.setTop(instance, !isNaN(+propertyValue) && +propertyValue);
+});
+
 export class AbsoluteLayout extends layouts.LayoutBase implements definition.AbsoluteLayout {
 
     private static isValid(value: number): boolean {

ui/layouts/dock-layout/dock-layout-common.ts

@@ -4,6 +4,7 @@ import dependencyObservable = require("ui/core/dependency-observable");
 import view = require("ui/core/view");
 import enums = require("ui/enums");
 import proxy = require("ui/core/proxy");
+import {registerSpecialProperty} from "ui/builder/special-properties";
 
 // on Android we explicitly set propertySettings to None because android will invalidate its layout (skip unnecessary native call).
 var AffectsLayout = global.android ? dependencyObservable.PropertyMetadataSettings.None : dependencyObservable.PropertyMetadataSettings.AffectsLayout;
@@ -19,6 +20,10 @@ function validateArgs(element: view.View): view.View {
     return element;
 }
 
+registerSpecialProperty("dock", (instance, propertyValue) => {
+    DockLayout.setDock(instance, propertyValue);
+});
+
 export class DockLayout extends layouts.LayoutBase implements definition.DockLayout {
 
     private static onDockPropertyChanged(data: dependencyObservable.PropertyChangeData) {

ui/layouts/grid-layout/grid-layout-common.ts

@@ -6,6 +6,7 @@ import bindable = require("ui/core/bindable");
 import types = require("utils/types");
 import numberUtils = require("utils/number-utils");
 import proxy = require("ui/core/proxy");
+import {registerSpecialProperty} from "ui/builder/special-properties";
 
 function validateArgs(element: view.View): view.View {
     if (!element) {
@@ -20,6 +21,19 @@ export module GridUnitType {
     export var star: string = "star";
 }
 
+registerSpecialProperty("row", (instance, propertyValue) => {
+    GridLayout.setRow(instance, !isNaN(+propertyValue) && +propertyValue);
+});
+registerSpecialProperty("col", (instance, propertyValue) => {
+    GridLayout.setColumn(instance, !isNaN(+propertyValue) && +propertyValue);
+});
+registerSpecialProperty("colSpan", (instance, propertyValue) => {
+    GridLayout.setColumnSpan(instance, !isNaN(+propertyValue) && +propertyValue);
+});
+registerSpecialProperty("rowSpan", (instance, propertyValue) => {
+    GridLayout.setRowSpan(instance, !isNaN(+propertyValue) && +propertyValue);
+});
+
 export class ItemSpec extends bindable.Bindable implements definition.ItemSpec {
 
     private _value: number;