initial commit

CrossPlatformModules.csproj

@@ -330,6 +330,16 @@
     <TypeScriptCompile Include="ui\list-picker\list-picker.ios.ts">
       <DependentUpon>list-picker.d.ts</DependentUpon>
     </TypeScriptCompile>
+    <TypeScriptCompile Include="ui\tool-bar\tool-bar-common.ts">
+      <DependentUpon>tool-bar.d.ts</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="ui\tool-bar\tool-bar.android.ts">
+      <DependentUpon>tool-bar.d.ts</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="ui\tool-bar\tool-bar.d.ts" />
+    <TypeScriptCompile Include="ui\tool-bar\tool-bar.ios.ts">
+      <DependentUpon>tool-bar.d.ts</DependentUpon>
+    </TypeScriptCompile>
     <TypeScriptCompile Include="ui\segmented-bar\segmented-bar-common.ts">
       <DependentUpon>segmented-bar.d.ts</DependentUpon>
     </TypeScriptCompile>
@@ -1453,6 +1463,9 @@
     <Content Include="ui\list-picker\package.json">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
+    <Content Include="ui\tool-bar\package.json">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
   </ItemGroup>
   <ItemGroup>
     <None Include="build\tslint.json" />
@@ -1518,4 +1531,4 @@
       <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>
+</Project>

apps/tests/xml-declaration/mainPage.xml

@@ -6,7 +6,27 @@
       <TabViewItem title="Tab 1">
         <TabViewItem.view>
           <StackLayout>
-            
+
+            <ToolBar>
+              <ToolBar.items>
+                <ToolBarItem>
+                  <ToolBarItem.view>
+                    <Label text="Label" />
+                  </ToolBarItem.view>
+                </ToolBarItem>
+                <ToolBarItem>
+                  <ToolBarItem.view>
+                    <Button text="Button" />
+                  </ToolBarItem.view>
+                </ToolBarItem>
+                <ToolBarItem>
+                  <ToolBarItem.view>
+                    <Image url="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Places-favorites-icon.png" />
+                  </ToolBarItem.view>
+                </ToolBarItem>
+              </ToolBar.items>
+            </ToolBar>
+
             <SegmentedBar selectedIndex="1" style="background-color: red; color: white" selectedBackgroundColor="green">
               <SegmentedBar.items>
                 <SegmentedBarItem title="MAY 3" />
@@ -14,7 +34,7 @@
                 <SegmentedBarItem title="MAY 5" />
               </SegmentedBar.items>
             </SegmentedBar>
-            
+
             <ListPicker items="{{ someItems }}" selectedIndex="3"/>
             <DatePicker year="1976" month="10" day="30" />
             <TimePicker hour="10" minute="34" />

ui/builder/component-builder.ts

@@ -32,6 +32,8 @@ var MODULES = {
     "WebView": "ui/web-view",
     "SegmentedBar": "ui/segmented-bar",
     "SegmentedBarItem": "ui/segmented-bar",
+    "ToolBar": "ui/tool-bar",
+    "ToolBarItem": "ui/tool-bar",
     "TimePicker": "ui/time-picker",
     "DatePicker": "ui/date-picker",
     "ListPicker": "ui/list-picker",
@@ -180,4 +182,4 @@ function isBinding(value: string): boolean {
     }
 
     return isBinding;
-}
+}

ui/tool-bar/package.json

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

ui/tool-bar/tool-bar-common.ts

@@ -0,0 +1,25 @@
+import definition = require("ui/tool-bar");
+import view = require("ui/core/view");
+import proxy = require("ui/core/proxy");
+import dependencyObservable = require("ui/core/dependency-observable");
+
+export module knownCollections {
+    export var items = "items";
+}
+
+export class ToolBar extends view.View implements definition.ToolBar {
+    public _addArrayFromBuilder(name: string, value: Array<any>) {
+        if (name === "items") {
+            this._setValue(ToolBar.itemsProperty, value);
+        }
+    }
+
+    get items(): Array<definition.ToolBarItem> {
+        return this._getValue(ToolBar.itemsProperty);
+    }
+    set items(value: Array<definition.ToolBarItem>) {
+        this._setValue(ToolBar.itemsProperty, value);
+    }
+
+    public static itemsProperty = new dependencyObservable.Property("items", "ToolBar", new proxy.PropertyMetadata(undefined))
+}

ui/tool-bar/tool-bar.android.ts

@@ -0,0 +1,28 @@
+import common = require("ui/tool-bar/tool-bar-common");
+import dependencyObservable = require("ui/core/dependency-observable");
+import proxy = require("ui/core/proxy");
+import types = require("utils/types");
+
+// merge the exports of the common file with the exports of this file
+declare var exports;
+require("utils/module-merge").merge(common, exports);
+
+function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var view = <ToolBar>data.object;
+    if (!view.android) {
+        return;
+    }
+}
+(<proxy.PropertyMetadata>common.ToolBar.itemsProperty.metadata).onSetNativeValue = onItemsPropertyChanged;
+
+export class ToolBar extends common.ToolBar {
+    private _android: any;
+
+    public _createUI() {
+        this._android = new (<any>android.widget).Toolbar(this._context);
+    }
+
+    get android(): any {
+        return this._android;
+    }
+}

ui/tool-bar/tool-bar.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Contains the ToolBar class, which represents a ToolBar component.
+ */
+declare module "ui/tool-bar" {
+    import view = require("ui/core/view");
+    import dependencyObservable = require("ui/core/dependency-observable");
+
+    /**
+     * Represents a ToolBar item.
+     */
+    interface ToolBarItem {
+        /**
+         * Gets or sets the title of the ToolBar.
+         */
+        view: view.View;
+    }
+
+    /**
+     * Represents a UI ToolBar component.
+     */
+    export class ToolBar extends view.View {
+        /**
+         * Gets or sets the items of the ToolBar.
+         */
+        items: Array<ToolBarItem>;
+
+        /**
+         * Gets or sets the items dependency property of the ToolBar.
+         */
+        public static itemsProperty: dependencyObservable.Property;
+    }
+}

ui/tool-bar/tool-bar.ios.ts

@@ -0,0 +1,41 @@
+import definition = require("ui/tool-bar");
+import common = require("ui/tool-bar/tool-bar-common");
+import dependencyObservable = require("ui/core/dependency-observable");
+import proxy = require("ui/core/proxy");
+import view = require("ui/core/view");
+
+// merge the exports of the common file with the exports of this file
+declare var exports;
+require("utils/module-merge").merge(common, exports);
+
+function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var bar = <ToolBar>data.object;
+    if (!bar.ios) {
+        return;
+    }
+
+    var items = new NSMutableArray();
+    for (var element in <Array<definition.ToolBarItem>>data.newValue) {
+        if (element.view instanceof view.View) {
+            bar._addView(element.view);
+            items.addObject(element.view.ios);
+        }
+    }
+
+    bar.ios.setItemsAnimated(items, false);
+}
+(<proxy.PropertyMetadata>common.ToolBar.itemsProperty.metadata).onSetNativeValue = onItemsPropertyChanged;
+
+export class ToolBar extends common.ToolBar {
+    private _ios: UIToolbar;
+
+    constructor() {
+        super();
+
+        this._ios = UIToolbar.new();
+    }
+
+    get ios(): UIToolbar {
+        return this._ios;
+    }
+}