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

CrossPlatformModules.csproj

@@ -75,6 +75,13 @@
     <TypeScriptCompile Include="apps\gallery-app\views\image.ts">
       <DependentUpon>image.xml</DependentUpon>
     </TypeScriptCompile>
+    <TypeScriptCompile Include="apps\placeholder-demo\app.ts" />
+    <TypeScriptCompile Include="apps\placeholder-demo\main-page.android.ts">
+      <DependentUpon>main-page.xml</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="apps\placeholder-demo\main-page.ios.ts">
+      <DependentUpon>main-page.xml</DependentUpon>
+    </TypeScriptCompile>
     <TypeScriptCompile Include="apps\TelerikNEXT\app-view-model.ts" />
     <TypeScriptCompile Include="apps\TelerikNEXT\app.ts" />
     <TypeScriptCompile Include="apps\TelerikNEXT\everlive-upload.ts" />
@@ -334,6 +341,16 @@
     <TypeScriptCompile Include="ui\list-picker\list-picker.ios.ts">
       <DependentUpon>list-picker.d.ts</DependentUpon>
     </TypeScriptCompile>
+    <TypeScriptCompile Include="ui\placeholder\placeholder.d.ts" />
+    <TypeScriptCompile Include="ui\placeholder\placeholder-common.ts">
+      <DependentUpon>placeholder.d.ts</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="ui\placeholder\placeholder.android.ts">
+      <DependentUpon>placeholder.d.ts</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="ui\placeholder\placeholder.ios.ts">
+      <DependentUpon>placeholder.d.ts</DependentUpon>
+    </TypeScriptCompile>
     <TypeScriptCompile Include="ui\tool-bar\tool-bar-common.ts">
       <DependentUpon>tool-bar.d.ts</DependentUpon>
     </TypeScriptCompile>
@@ -559,6 +576,7 @@
       <SubType>Designer</SubType>
     </Content>
     <Content Include="apps\gallery-app\layouts\dock-layout.xml" />
+    <Content Include="apps\placeholder-demo\main-page.xml" />
     <Content Include="apps\TelerikNEXT\lib\everlive.js" />
     <Content Include="apps\TelerikNEXT\session-page.xml" />
     <Content Include="apps\template-master-detail\details-view.xml" />
@@ -1451,6 +1469,9 @@
     <Content Include="DebugV8Heap.md" />
     <Content Include="apps\TelerikNEXT\package.json" />
     <Content Include="apps\pickers-demo\package.json" />
+    <Content Include="apps\placeholder-demo\package.json">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
     <None Include="js-libs\esprima\LICENSE.BSD" />
     <Content Include="source-control.md" />
     <Content Include="ui\segmented-bar\package.json">
@@ -1469,6 +1490,9 @@
     <Content Include="ui\tool-bar\package.json">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
+    <Content Include="ui\placeholder\package.json">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
   </ItemGroup>
   <ItemGroup>
     <None Include="build\tslint.json" />

apps/placeholder-demo/app.ts

@@ -0,0 +1,3 @@
+import application = require("application");
+application.mainModule = "main-page";
+application.start();

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;
+}

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;
+}

apps/placeholder-demo/main-page.xml

@@ -0,0 +1,5 @@
+<Page xmlns="http://www.nativescript.org/tns.xsd">
+  <StackLayout>
+    <Placeholder creatingView="creatingView"/>
+  </StackLayout>
+</Page>

apps/placeholder-demo/package.json

@@ -0,0 +1,2 @@
+{ "name" : "template-hello-world",
+  "main" : "app.js" }

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;
+    }
+
+}