diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index 57cabca14..64e9e5417 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -75,6 +75,13 @@
image.xml
+
+
+ main-page.xml
+
+
+ main-page.xml
+
@@ -334,6 +341,16 @@
list-picker.d.ts
+
+
+ placeholder.d.ts
+
+
+ placeholder.d.ts
+
+
+ placeholder.d.ts
+
tool-bar.d.ts
@@ -559,6 +576,7 @@
Designer
+
@@ -1451,6 +1469,9 @@
+
+ PreserveNewest
+
@@ -1469,6 +1490,9 @@
PreserveNewest
+
+ PreserveNewest
+
diff --git a/apps/placeholder-demo/app.ts b/apps/placeholder-demo/app.ts
new file mode 100644
index 000000000..cb572300b
--- /dev/null
+++ b/apps/placeholder-demo/app.ts
@@ -0,0 +1,3 @@
+import application = require("application");
+application.mainModule = "main-page";
+application.start();
diff --git a/apps/placeholder-demo/main-page.android.ts b/apps/placeholder-demo/main-page.android.ts
new file mode 100644
index 000000000..ace5bf4cc
--- /dev/null
+++ b/apps/placeholder-demo/main-page.android.ts
@@ -0,0 +1,7 @@
+import placeholder = require("ui/placeholder");
+
+export function creatingView(args: placeholder.CreateViewEventData) {
+ var nativeView = new android.widget.LabelView(args.context);
+ nativeView.setText("Native");
+ args.view = nativeView;
+}
\ No newline at end of file
diff --git a/apps/placeholder-demo/main-page.ios.ts b/apps/placeholder-demo/main-page.ios.ts
new file mode 100644
index 000000000..d426c29a2
--- /dev/null
+++ b/apps/placeholder-demo/main-page.ios.ts
@@ -0,0 +1,7 @@
+import placeholder = require("ui/placeholder");
+
+export function creatingView(args: placeholder.CreateViewEventData) {
+ var nativeView = new UILabel();
+ nativeView.text = "Native";
+ args.view = nativeView;
+}
\ No newline at end of file
diff --git a/apps/placeholder-demo/main-page.xml b/apps/placeholder-demo/main-page.xml
new file mode 100644
index 000000000..43bd3c0b1
--- /dev/null
+++ b/apps/placeholder-demo/main-page.xml
@@ -0,0 +1,5 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/placeholder-demo/package.json b/apps/placeholder-demo/package.json
new file mode 100644
index 000000000..b72fc0faf
--- /dev/null
+++ b/apps/placeholder-demo/package.json
@@ -0,0 +1,2 @@
+{ "name" : "template-hello-world",
+ "main" : "app.js" }
\ No newline at end of file
diff --git a/ui/placeholder/package.json b/ui/placeholder/package.json
new file mode 100644
index 000000000..f900da8d6
--- /dev/null
+++ b/ui/placeholder/package.json
@@ -0,0 +1,2 @@
+{ "name" : "placeholder",
+ "main" : "placeholder.js" }
\ No newline at end of file
diff --git a/ui/placeholder/placeholder-common.ts b/ui/placeholder/placeholder-common.ts
new file mode 100644
index 000000000..5c261a08c
--- /dev/null
+++ b/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 {
+}
\ No newline at end of file
diff --git a/ui/placeholder/placeholder.android.ts b/ui/placeholder/placeholder.android.ts
new file mode 100644
index 000000000..41118fa48
--- /dev/null
+++ b/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 = { eventName: common.knownEvents.creatingView, object: this, view: undefined, context: this._context };
+ this.notify(args);
+ this._android = args.view;
+ }
+
+ get android(): android.view.View {
+ return this._android;
+ }
+
+ get _nativeView(): android.view.View {
+ return this._android;
+ }
+}
\ No newline at end of file
diff --git a/ui/placeholder/placeholder.d.ts b/ui/placeholder/placeholder.d.ts
new file mode 100644
index 000000000..b603b22f4
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/ui/placeholder/placeholder.ios.ts b/ui/placeholder/placeholder.ios.ts
new file mode 100644
index 000000000..3dd323987
--- /dev/null
+++ b/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 = { 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;
+ }
+
+}
\ No newline at end of file