[NUI] Add TabItem to support TabView in xaml
authorJaehyun Cho <jae_hyun.cho@samsung.com>
Wed, 8 Feb 2023 11:45:53 +0000 (20:45 +0900)
committerEunki Hong <h.pichulia@gmail.com>
Tue, 21 Feb 2023 11:04:00 +0000 (20:04 +0900)
To support TabView in xaml, TabItem has been added.

TabView provides Add(TabItem) to add a tab from the given TabItem.
TabItem contains Title, IconURL of a new TabButton in TabView's TabBar
and Content of a new View in TabView's TabContent.

src/Tizen.NUI.Components/Controls/TabItem.cs [new file with mode: 0755]
src/Tizen.NUI.Components/Controls/TabView.cs
test/NUITizenGallery/Examples/TabViewTest/TabViewTestPage.xaml
test/NUITizenGallery/Examples/TabViewTest/TabViewTestPage.xaml.cs
test/NUITizenGallery/Examples/TabViewTest/TabViewWithIconOnlyTestPage.xaml
test/NUITizenGallery/Examples/TabViewTest/TabViewWithIconOnlyTestPage.xaml.cs
test/NUITizenGallery/Examples/TabViewTest/TabViewWithIconTestPage.xaml
test/NUITizenGallery/Examples/TabViewTest/TabViewWithIconTestPage.xaml.cs

diff --git a/src/Tizen.NUI.Components/Controls/TabItem.cs b/src/Tizen.NUI.Components/Controls/TabItem.cs
new file mode 100755 (executable)
index 0000000..9326c98
--- /dev/null
@@ -0,0 +1,64 @@
+/*
+ * Copyright(c) 2023 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+using System.ComponentModel;
+using Tizen.NUI.BaseComponents;
+
+namespace Tizen.NUI.Components
+{
+    /// <summary>
+    /// TabView provides Add(TabItem tabItem) to add a tab from the given TabItem.
+    /// TabItem contains Title and IconUrl of a new TabButton in TabView's TabBar and Content of a new View in TabView's TabContent.
+    /// </summary>
+    [EditorBrowsable(EditorBrowsableState.Never)]
+    public class TabItem
+    {
+        /// <summary>
+        /// Creates a new instance of TabItem.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public TabItem()
+        {
+        }
+
+        /// <summary>
+        /// TabButton style applied to a new TabButton when TabView adds TabItem.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public TabButtonStyle TabButtonStyle { get; set; }
+
+        /// <summary>
+        /// Title of TabItem.
+        /// Title is set to the Text of a new TabButton in TabView's TabBar.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public string Title { get; set; }
+
+        /// <summary>
+        /// IconUrl of TabItem.
+        /// IconUrl is set to the IconUrl of a new TabButton in TabView's TabBar.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public string IconUrl { get; set; }
+
+        /// <summary>
+        /// Content of TabItem.
+        /// Content is added to TabView's TabContent.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public View Content { get; set; }
+    }
+}
index d0f36e1..3969a90 100755 (executable)
@@ -1,5 +1,5 @@
 /*
- * Copyright(c) 2021 Samsung Electronics Co., Ltd.
+ * Copyright(c) 2023 Samsung Electronics Co., Ltd.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -16,6 +16,7 @@
  */
 using System;
 using System.ComponentModel;
+using System.Diagnostics.CodeAnalysis;
 using Tizen.NUI.BaseComponents;
 
 namespace Tizen.NUI.Components
@@ -252,6 +253,43 @@ namespace Tizen.NUI.Components
             }
         }
 
+        /// <summary>
+        /// Adds a tab from the given TabItem.
+        /// TabItem contains Title and IconURL of a new TabButton in TabBar and Content of a new View in TabContent.
+        /// <param name="tabItem">The tab item which contains Title and IconURL of a new TabButton in TabBar and Content of a new View in TabContent.</param>
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        [SuppressMessage("Microsoft.Reliability",
+                         "CA2000:DisposeObjectsBeforeLosingScope",
+                         Justification = "The tabButton is added to TabBar and disposed when TabBar is disposed.")]
+        public virtual void Add(TabItem tabItem)
+        {
+            if (tabItem == null) return;
+
+            var hasTitle = (String.IsNullOrEmpty(tabItem.Title) == false);
+            var hasIconUrl = (String.IsNullOrEmpty(tabItem.IconUrl) == false);
+
+            // Adds a new TabButton and Content View only if TabItem has TabButton properties and Content View.
+            if ((hasTitle || hasIconUrl) && (tabItem.Content != null))
+            {
+                var tabButton = new TabButton(tabItem.TabButtonStyle);
+
+                if (hasTitle)
+                {
+                    tabButton.Text = tabItem.Title;
+                }
+
+                if (hasIconUrl)
+                {
+                    tabButton.IconURL = tabItem.IconUrl;
+                }
+
+                TabBar.AddTabButton(tabButton);
+
+                Content.AddContentView(tabItem.Content);
+            }
+        }
+
         /// <inheritdoc/>
         [EditorBrowsable(EditorBrowsableState.Never)]
         protected override void Dispose(DisposeTypes type)
index 01833d4..4f938d4 100755 (executable)
     <!-- Content is main placeholder of ContentPage. Add your content into this view. -->
     <ContentPage.Content>
         <TabView x:Name="tabView"
-                   WidthSpecification="{Static LayoutParamPolicies.MatchParent}">
+            WidthSpecification="{Static LayoutParamPolicies.MatchParent}">
+            <TabItem Title="Tab1">
+                <TabItem.Content>
+                    <View WidthSpecification="{Static LayoutParamPolicies.MatchParent}"
+                        HeightSpecification="{Static LayoutParamPolicies.MatchParent}"
+                        BackgroundColor="Red">
+                        <View.Layout>
+                            <LinearLayout LinearOrientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" CellPadding="0,20"/>
+                        </View.Layout>
+
+                        <Button Text="Add Tab" BackgroundColor="Magenta" Clicked="AddTabClickedCb" />
+                        <Button Text="Remove Tab" BackgroundColor="Magenta" Clicked="RemoveTabClickedCb"/>
+                    </View>
+                </TabItem.Content>
+            </TabItem>
+
+            <TabItem Title="Tab2">
+                <TabItem.Content>
+                    <View WidthSpecification="{Static LayoutParamPolicies.MatchParent}"
+                        HeightSpecification="{Static LayoutParamPolicies.MatchParent}"
+                        BackgroundColor="Blue">
+                        <View.Layout>
+                            <LinearLayout LinearOrientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" CellPadding="0,20"/>
+                        </View.Layout>
+
+                        <Button Text="Add Tab" BackgroundColor="Cyan" Clicked="AddTabClickedCb"/>
+                        <Button Text="Remove Tab" BackgroundColor="Cyan" Clicked="RemoveTabClickedCb"/>
+                    </View>
+                </TabItem.Content>
+            </TabItem>
         </TabView>
     </ContentPage.Content>
 
index f293e52..f2bc31b 100755 (executable)
@@ -1,5 +1,5 @@
 /*
- * Copyright(c) 2021 Samsung Electronics Co., Ltd.
+ * Copyright(c) 2023 Samsung Electronics Co., Ltd.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,19 +22,11 @@ namespace NUITizenGallery
 {
     public partial class TabViewTestPage : ContentPage
     {
-        private int tabCount = 0;
+        private int tabCount = 2;
 
         public TabViewTestPage()
         {
             InitializeComponent();
-
-            tabView.SizeHeight = Window.Instance.WindowSize.Height - appBar.SizeHeight;
-
-            tabView.AddTab(CreateTabButton(), CreateView());
-            tabCount++;
-
-            tabView.AddTab(CreateTabButton(), CreateView());
-            tabCount++;
         }
 
         private TabButton CreateTabButton()
@@ -42,6 +34,24 @@ namespace NUITizenGallery
             return new TabButton() { Text = "Tab" + (tabCount + 1), };
         }
 
+        private void AddTabClickedCb(object sender, ClickedEventArgs args)
+        {
+            if (tabCount < 4)
+            {
+                tabView.AddTab(CreateTabButton(), CreateView());
+                tabCount++;
+            }
+        }
+
+        private void RemoveTabClickedCb(object sender, ClickedEventArgs args)
+        {
+            if (tabCount > 1)
+            {
+                tabView.RemoveTab(tabCount - 1);
+                tabCount--;
+            }
+        }
+
         private View CreateView()
         {
             Color backgroundColor;
@@ -73,7 +83,8 @@ namespace NUITizenGallery
                 Layout = new LinearLayout()
                 {
                     LinearOrientation = LinearLayout.Orientation.Vertical,
-                    LinearAlignment = LinearLayout.Alignment.Center,
+                    HorizontalAlignment = HorizontalAlignment.Center,
+                    VerticalAlignment = VerticalAlignment.Center,
                     CellPadding = new Size2D(0, 20),
                 },
                 BackgroundColor = backgroundColor,
@@ -86,14 +97,7 @@ namespace NUITizenGallery
                 Text = "Add Tab",
                 BackgroundColor = buttonBackgroundColor,
             };
-            buttonAddTab.Clicked += (object sender, ClickedEventArgs args) =>
-            {
-                if (tabCount < 4)
-                {
-                    tabView.AddTab(CreateTabButton(), CreateView());
-                    tabCount++;
-                }
-            };
+            buttonAddTab.Clicked += AddTabClickedCb;
             container.Add(buttonAddTab);
 
             var buttonRemoveTab = new Button()
@@ -101,14 +105,7 @@ namespace NUITizenGallery
                 Text = "Remove Tab",
                 BackgroundColor = buttonBackgroundColor,
             };
-            buttonRemoveTab.Clicked += (object sender, ClickedEventArgs args) =>
-            {
-                if (tabCount > 1)
-                {
-                    tabView.RemoveTab(tabCount - 1);
-                    tabCount--;
-                }
-            };
+            buttonRemoveTab.Clicked += RemoveTabClickedCb;
             container.Add(buttonRemoveTab);
 
             return container;
index 4d2bd11..627fc17 100755 (executable)
     <!-- Content is main placeholder of ContentPage. Add your content into this view. -->
     <ContentPage.Content>
         <TabView x:Name="tabView"
-                   WidthSpecification="{Static LayoutParamPolicies.MatchParent}">
+            WidthSpecification="{Static LayoutParamPolicies.MatchParent}">
+            <TabItem IconURL="res/home.png">
+                <TabItem.Content>
+                    <View WidthSpecification="{Static LayoutParamPolicies.MatchParent}"
+                        HeightSpecification="{Static LayoutParamPolicies.MatchParent}"
+                        BackgroundColor="Red">
+                        <View.Layout>
+                            <LinearLayout LinearOrientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" CellPadding="0,20"/>
+                        </View.Layout>
+
+                        <Button Text="Add Tab" BackgroundColor="Magenta" Clicked="AddTabClickedCb" />
+                        <Button Text="Remove Tab" BackgroundColor="Magenta" Clicked="RemoveTabClickedCb"/>
+                    </View>
+                </TabItem.Content>
+            </TabItem>
+
+            <TabItem IconURL="res/home.png">
+                <TabItem.Content>
+                    <View WidthSpecification="{Static LayoutParamPolicies.MatchParent}"
+                        HeightSpecification="{Static LayoutParamPolicies.MatchParent}"
+                        BackgroundColor="Blue">
+                        <View.Layout>
+                            <LinearLayout LinearOrientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" CellPadding="0,20"/>
+                        </View.Layout>
+
+                        <Button Text="Add Tab" BackgroundColor="Cyan" Clicked="AddTabClickedCb"/>
+                        <Button Text="Remove Tab" BackgroundColor="Cyan" Clicked="RemoveTabClickedCb"/>
+                    </View>
+                </TabItem.Content>
+            </TabItem>
         </TabView>
     </ContentPage.Content>
 
index 8d43cfb..136e6b7 100755 (executable)
@@ -1,5 +1,5 @@
 /*
- * Copyright(c) 2022 Samsung Electronics Co., Ltd.
+ * Copyright(c) 2023 Samsung Electronics Co., Ltd.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,19 +22,11 @@ namespace NUITizenGallery
 {
     public partial class TabViewWithIconOnlyTestPage : ContentPage
     {
-        private int tabCount = 0;
+        private int tabCount = 2;
 
         public TabViewWithIconOnlyTestPage()
         {
             InitializeComponent();
-
-            tabView.SizeHeight = Window.Instance.WindowSize.Height - appBar.SizeHeight;
-
-            tabView.AddTab(CreateTabButton(), CreateView());
-            tabCount++;
-
-            tabView.AddTab(CreateTabButton(), CreateView());
-            tabCount++;
         }
 
         private TabButton CreateTabButton()
@@ -42,6 +34,24 @@ namespace NUITizenGallery
             return new TabButton() { IconURL = Tizen.Applications.Application.Current.DirectoryInfo.Resource + "home.png", };
         }
 
+        private void AddTabClickedCb(object sender, ClickedEventArgs args)
+        {
+            if (tabCount < 4)
+            {
+                tabView.AddTab(CreateTabButton(), CreateView());
+                tabCount++;
+            }
+        }
+
+        private void RemoveTabClickedCb(object sender, ClickedEventArgs args)
+        {
+            if (tabCount > 1)
+            {
+                tabView.RemoveTab(tabCount - 1);
+                tabCount--;
+            }
+        }
+
         private View CreateView()
         {
             Color backgroundColor;
@@ -73,7 +83,8 @@ namespace NUITizenGallery
                 Layout = new LinearLayout()
                 {
                     LinearOrientation = LinearLayout.Orientation.Vertical,
-                    LinearAlignment = LinearLayout.Alignment.Center,
+                    HorizontalAlignment = HorizontalAlignment.Center,
+                    VerticalAlignment = VerticalAlignment.Center,
                     CellPadding = new Size2D(0, 20),
                 },
                 BackgroundColor = backgroundColor,
@@ -86,14 +97,7 @@ namespace NUITizenGallery
                 Text = "Add Tab",
                 BackgroundColor = buttonBackgroundColor,
             };
-            buttonAddTab.Clicked += (object sender, ClickedEventArgs args) =>
-            {
-                if (tabCount < 4)
-                {
-                    tabView.AddTab(CreateTabButton(), CreateView());
-                    tabCount++;
-                }
-            };
+            buttonAddTab.Clicked += AddTabClickedCb;
             container.Add(buttonAddTab);
 
             var buttonRemoveTab = new Button()
@@ -101,14 +105,7 @@ namespace NUITizenGallery
                 Text = "Remove Tab",
                 BackgroundColor = buttonBackgroundColor,
             };
-            buttonRemoveTab.Clicked += (object sender, ClickedEventArgs args) =>
-            {
-                if (tabCount > 1)
-                {
-                    tabView.RemoveTab(tabCount - 1);
-                    tabCount--;
-                }
-            };
+            buttonRemoveTab.Clicked += RemoveTabClickedCb;
             container.Add(buttonRemoveTab);
 
             return container;
index 03f9c25..cf1c0d9 100755 (executable)
     <!-- Content is main placeholder of ContentPage. Add your content into this view. -->
     <ContentPage.Content>
         <TabView x:Name="tabView"
-                   WidthSpecification="{Static LayoutParamPolicies.MatchParent}">
+            WidthSpecification="{Static LayoutParamPolicies.MatchParent}">
+            <TabItem Title="Tab1" IconURL="res/home.png">
+                <TabItem.Content>
+                    <View WidthSpecification="{Static LayoutParamPolicies.MatchParent}"
+                        HeightSpecification="{Static LayoutParamPolicies.MatchParent}"
+                        BackgroundColor="Red">
+                        <View.Layout>
+                            <LinearLayout LinearOrientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" CellPadding="0,20"/>
+                        </View.Layout>
+
+                        <Button Text="Add Tab" BackgroundColor="Magenta" Clicked="AddTabClickedCb" />
+                        <Button Text="Remove Tab" BackgroundColor="Magenta" Clicked="RemoveTabClickedCb"/>
+                    </View>
+                </TabItem.Content>
+            </TabItem>
+
+            <TabItem Title="Tab2" IconURL="res/home.png">
+                <TabItem.Content>
+                    <View WidthSpecification="{Static LayoutParamPolicies.MatchParent}"
+                        HeightSpecification="{Static LayoutParamPolicies.MatchParent}"
+                        BackgroundColor="Blue">
+                        <View.Layout>
+                            <LinearLayout LinearOrientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" CellPadding="0,20"/>
+                        </View.Layout>
+
+                        <Button Text="Add Tab" BackgroundColor="Cyan" Clicked="AddTabClickedCb"/>
+                        <Button Text="Remove Tab" BackgroundColor="Cyan" Clicked="RemoveTabClickedCb"/>
+                    </View>
+                </TabItem.Content>
+            </TabItem>
         </TabView>
     </ContentPage.Content>
 
index 2a1aac5..d7b8b57 100755 (executable)
@@ -1,5 +1,5 @@
 /*
- * Copyright(c) 2022 Samsung Electronics Co., Ltd.
+ * Copyright(c) 2023 Samsung Electronics Co., Ltd.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,19 +22,11 @@ namespace NUITizenGallery
 {
     public partial class TabViewWithIconTestPage : ContentPage
     {
-        private int tabCount = 0;
+        private int tabCount = 2;
 
         public TabViewWithIconTestPage()
         {
             InitializeComponent();
-
-            tabView.SizeHeight = Window.Instance.WindowSize.Height - appBar.SizeHeight;
-
-            tabView.AddTab(CreateTabButton(), CreateView());
-            tabCount++;
-
-            tabView.AddTab(CreateTabButton(), CreateView());
-            tabCount++;
         }
 
         private TabButton CreateTabButton()
@@ -46,6 +38,24 @@ namespace NUITizenGallery
             };
         }
 
+        private void AddTabClickedCb(object sender, ClickedEventArgs args)
+        {
+            if (tabCount < 4)
+            {
+                tabView.AddTab(CreateTabButton(), CreateView());
+                tabCount++;
+            }
+        }
+
+        private void RemoveTabClickedCb(object sender, ClickedEventArgs args)
+        {
+            if (tabCount > 1)
+            {
+                tabView.RemoveTab(tabCount - 1);
+                tabCount--;
+            }
+        }
+
         private View CreateView()
         {
             Color backgroundColor;
@@ -77,7 +87,8 @@ namespace NUITizenGallery
                 Layout = new LinearLayout()
                 {
                     LinearOrientation = LinearLayout.Orientation.Vertical,
-                    LinearAlignment = LinearLayout.Alignment.Center,
+                    HorizontalAlignment = HorizontalAlignment.Center,
+                    VerticalAlignment = VerticalAlignment.Center,
                     CellPadding = new Size2D(0, 20),
                 },
                 BackgroundColor = backgroundColor,
@@ -90,14 +101,7 @@ namespace NUITizenGallery
                 Text = "Add Tab",
                 BackgroundColor = buttonBackgroundColor,
             };
-            buttonAddTab.Clicked += (object sender, ClickedEventArgs args) =>
-            {
-                if (tabCount < 4)
-                {
-                    tabView.AddTab(CreateTabButton(), CreateView());
-                    tabCount++;
-                }
-            };
+            buttonAddTab.Clicked += AddTabClickedCb;
             container.Add(buttonAddTab);
 
             var buttonRemoveTab = new Button()
@@ -105,14 +109,7 @@ namespace NUITizenGallery
                 Text = "Remove Tab",
                 BackgroundColor = buttonBackgroundColor,
             };
-            buttonRemoveTab.Clicked += (object sender, ClickedEventArgs args) =>
-            {
-                if (tabCount > 1)
-                {
-                    tabView.RemoveTab(tabCount - 1);
-                    tabCount--;
-                }
-            };
+            buttonRemoveTab.Clicked += RemoveTabClickedCb;
             container.Add(buttonRemoveTab);
 
             return container;