Placeholder: A widget that allows adding native views to the visual tree.

ui/placeholder/package.json

@@ -0,0 +1,2 @@
+{ "name" : "placeholder",
+  "main" : "placeholder.js" }

ui/placeholder/placeholder-common.ts

@@ -0,0 +1,9 @@
+import definition = require("ui/placeholder");
+import view = require("ui/core/view");
+
+export module knownEvents {
+    export var creatingView = "creatingView";
+}
+
+export class Placeholder extends view.View implements definition.Placeholder {
+}

ui/placeholder/placeholder.android.ts

@@ -0,0 +1,24 @@
+import definition = require("ui/placeholder");
+import common = require("ui/placeholder/placeholder-common");
+
+// merge the exports of the common file with the exports of this file
+declare var exports;
+require("utils/module-merge").merge(common, exports);
+
+export class Placeholder extends common.Placeholder {
+    private _android: android.view.View;
+
+    public _createUI() {
+        var args = <definition.CreateViewEventData>{ eventName: common.knownEvents.creatingView, object: this, view: undefined, context: this._context };
+        this.notify(args);
+        this._android = <android.view.View>args.view;
+    }
+
+    get android(): android.view.View {
+        return this._android;
+    }
+
+    get _nativeView(): android.view.View {
+        return this._android;
+    }
+}

ui/placeholder/placeholder.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Contains the Placeholder class, which is used to add a native view to the visual tree.
+ */
+declare module "ui/placeholder" {
+    import view = require("ui/core/view");
+    import observable = require("data/observable");
+
+    /**
+     * Known event names.
+     */
+    export module knownEvents {
+        export var creatingView: string;
+    }
+
+    /**
+     * Represents a Placeholder, which is used to add a native view to the visual tree.
+     */
+    export class Placeholder extends view.View {
+        on(event: string, callback: (args: CreateViewEventData) => void);
+        on(event: "creatingView", callback: (args: CreateViewEventData) => void);
+    }
+
+    /**
+     * Event data containing information for creating a native view that will be added to the visual tree.
+     */
+    export interface CreateViewEventData extends observable.EventData {
+        /**
+         * The native view that should be added to the visual tree.
+         */
+        view: any;
+        
+        /**
+         * An optional context for creating the view.
+         */
+        context?: any;
+    }
+}

ui/placeholder/placeholder.ios.ts

@@ -0,0 +1,25 @@
+import definition = require("ui/placeholder");
+import common = require("ui/placeholder/placeholder-common");
+
+// merge the exports of the common file with the exports of this file
+declare var exports;
+require("utils/module-merge").merge(common, exports);
+
+export class Placeholder extends common.Placeholder {
+    private _ios: UIView;
+
+    get ios(): UIView {
+        if (!this._ios) {
+            console.trace();
+            var args = <definition.CreateViewEventData>{ eventName: common.knownEvents.creatingView, object: this, view: undefined, context: undefined };
+            super.notify(args);
+            this._ios = args.view;
+        }
+        return this._ios;
+    }
+
+    get _nativeView(): UIView {
+        return this.ios;
+    }
+
+}