Attach Panel

Note

All Attach Panel APIs have been deprecated since Tizen 9.0 and will be removed after two releases without any alternatives.

The attach panel allows you to attach various content to an application that contains an attach panel. You can attach images, take pictures, record voice, and select files on the attach panel.

This API is supported on Tizen mobile devices that support attach panel features.

The main features of the Tizen.Applications.AttachPanel namespace includes the following:

Attach panel

Figure: Attach panel

The attach panel contains UI components that manage user interactions on its interface. The layout component includes the tabBar and scroller components, which are connected to show the content synchronously. The scroller component contains pages that display content. For example, images, camera, and voice recorder. The contents are shown as a page on the panel. However, some content can be launched from the More tab of the panel using application controls.

The attach panel contains half and full display modes. The mode can be changed by swiping up and down the page.

Attach panel modes

Figure: Attach panel modes

Content categories

You can manage the following types of content:

  • Images

    In half mode, you can select and attach only one image at a time. In full mode, you can select and attach multiple images at a time.

  • Camera

    You can take a picture and attach it to the content using a device camera.

  • Voice

    You can attach voice recordings to the content.

  • Various content in the More tab

    You can use the additional category icons in the More tab, for example, video, audio, calendar, contact, myfiles, and video recorder. Click the respective icon to launch the category.

The following figure explains the content types. From left to right: images, camera, voice, and More tab content.

Images content Camera content Voice content More content

Figure: Content categories

Prerequisites

This section explains, how you can enable your application to use the attach panel functionality:

  1. To use the Tizen.Applications.AttachPanel namespace, the application must request permission by adding the following privileges to the tizen-manifest.xml file:

    
                
    XML
    
                
    
                    
    Copy
    
                    
    
                
    
            
    <privileges>
   <!--To add the image viewer and camera UI gadget in the attach panel-->
   <privilege>http://tizen.org/privilege/mediastorage</privilege>
   <!--To add the camera UI gadget in the attach panel-->
   <privilege>http://tizen.org/privilege/camera</privilege>
   <!--To launch the camera, verify that the video call status is not active-->
   <privilege>http://tizen.org/privilege/telephony</privilege>
   <!--To add the voice recorder UI gadget in the attach panel-->
   <privilege>http://tizen.org/privilege/recorder</privilege>
   <!--To launch apps from the More tab-->
   <privilege>http://tizen.org/privilege/appmanager.launch</privilege>
</privileges>

  2. To use the attach panel features, include the following feature in your tizen-manifest.xml file:

    
                
    XML
    
                
    
                    
    Copy
    
                    
    
                
    
            
    <feature name="http://tizen.org/feature/attach_panel"/>

  3. To use the methods and properties of the Tizen.Applications.AttachPanel namespace, include the following namespace in your application:

    
                
    C#
    
                
    
                    
    Copy
    
                    
    
                
    
            
    using Tizen.Applications.AttachPanel;

  4. To create an attach panel instance, an ElmSharp.Conformant instance is required. To create the instance, follow any of the step mentioned:

    • For Tizen platform conformant, see Get the Tizen platform conformant.

    • Create a conformant, into which you can add the attach panel later:

      
                
      C#
      
                
      
                    
      Copy
      
                    
      
                
      
            
      class App : CoreUIApplication
{
    Conformant conformant;

    protected override void OnCreate()
    {
        /// Application initialization

        conformant = new Conformant(window);
        conformant.Show();
        conformant.SetContent(bg);

    }
}

Create an attach panel

  1. Create an attach panel using the Tizen.Applications.AttachPanel.AttachPanel class.

    When the attach panel is created, the state is hidden by default. To show the created panel, use the Show() method of the Tizen.Applications.AttachPanel.AttachPanel class:

    
                
    C#
    
                
    
                    
    Copy
    
                    
    
                
    
            
    AttachPanel attachPanel;

public void CreateAttachPanel(Conformant conformant)
{
    if (attachPanel == null)
    {
        attachPanel = new AttachPanel(conformant);
        attachPanel.AddCategory(ContentCategory.Image, null);
        attachPanel.Show();
    }
}

  2. Select the type of content for the attach panel. Add content categories using the AddCategory() method, based on the type of content. The available content categories are defined in the Tizen.Applications.AttachPanel.ContentCategory enumeration.

    The content categories in the More tab are shown in the frequency of recently used and alphabetical sequence.

    To deliver more information to the UI gadget or called application, add the data within a bundle:

    
                
    C#
    
                
    
                    
    Copy
    
                    
    
                
    
            
    Bundle bundle = new Bundle();
bundle.AddItem("http://tizen.org/appcontrol/data/total_count", "3");

attachPanel.AddCategory(ContentCategory.Image, bundle);

attachPanel.AddCategory(ContentCategory.Camera, null);
attachPanel.AddCategory(ContentCategory.Voice, null);
attachPanel.AddCategory(ContentCategory.Video, null);
attachPanel.AddCategory(ContentCategory.Audio, null);
attachPanel.AddCategory(ContentCategory.Calendar, null);
attachPanel.AddCategory(ContentCategory.Contact, null);
attachPanel.AddCategory(ContentCategory.Myfiles, null);
attachPanel.AddCategory(ContentCategory.VideoRecorder, null);
attachPanel.AddCategory(ContentCategory.Document, null);
attachPanel.AddCategory(ContentCategory.TakePicture, null);
attachPanel.AddCategory(ContentCategory.Memo, null);

attachPanel.Show();
    Note

    To use the camera content category attachPanel.AddCategory(ContentCategory.Camera, null), you must verify the video call status. To launch the camera, the video call status must not be active. To verify the status of video call, Telephony API telephony_call_get_type() is called, ensure that the telephony privilege is added to the tizen-manifest.xml file.

  3. Register the required event handlers:

    • To access the data that you select in the called application, register the ResultCallback event of the Tizen.Applications.AttachPanel.AttachPanel class and define an event handler for it.

      Select and confirm the content category to trigger the event. In the event handler, you can retrieve the selected items from the Result.ExtraData property of the Tizen.Applications.AttachPanel.ResultEventArgs class.

    • To monitor published events from the panel side, register the EventChanged event of the Tizen.Applications.AttachPanel.AttachPanel class and define an event handler for it.

      Publish the reserved events (defined in the Tizen.Applications.AttachPanel.EventType enumeration) from the panel side to trigger the event:

    
                
    C#
    
                
    
                    
    Copy
    
                    
    
                
    
            
    private void AttachPanelResultCallback(object sender, ResultEventArgs e)
{
    if (e.ResultCode != AppControlReplyResult.Succeeded)
    {
        /// Error handling

        return;
    }

    IEnumerable<string> selectedItems;
    if (e.Result.ExtraData.TryGet("http://tizen.org/appcontrol/data/selected", out selectedItems))
    {
        foreach (var item in selectedItems)
        {
            Tizen.Log.Debug("AttachPanelTest", $"Selected content type is {e.Category}, selected item is {item}");
        }
    }
    else
    {
        /// Error handling
    }
}

private void AttachPanelEventChanged(object sender, StateEventArgs e)
{
    switch (e.EventType)
    {
        case EventType.ShowStart:
            /// Attach panel showing starts
            break;
        case EventType.ShowFinish:
            /// Attach panel showing ends
            break;
        case EventType.HideStart:
            /// Attach panel hiding starts
            break;
        case EventType.HideFinish:
            /// Attach panel hiding ends
            break;
    }
}

attachPanel.ResultCallback += AttachPanelResultCallback;
attachPanel.EventChanged += AttachPanelEventChanged;

  4. When the content category is not required, you can remove the content category using the RemoveCategory() method:

    
                
    C#
    
                
    
                    
    Copy
    
                    
    
                
    
            
    public void RemoveCategory()
{
    attachPanel.RemoveCategory(ContentCategory.Image);
    attachPanel.RemoveCategory(ContentCategory.Camera);
}

Create an attach panel in Xamarin

To create an attach panel in Xamarin, use the custom renderers as described below:

  1. Get the Tizen platform conformant.

    In Tizen, BaseLayout.Parent is the conformant of the main window:

    
                
    C#
    
                
    
                    
    Copy
    
                    
    
                
    
            
    public static EvasObject WindowConformant
{
    set; get;
}

protected override void OnCreate()
{
    base.OnCreate();
    WindowConformant = BaseLayout.Parent;
    LoadApplication(new App());
}

  2. Create the custom control.

    The following example creates an AttachPanelLayout custom control, which is a custom renderer showing the attach panel in the ContentView. The control also has the IsAttachPanelVisibleProperty property, which determines whether the attach panel is shown or hidden:

    
                
    C#
    
                
    
                    
    Copy
    
                    
    
                
    
            
    public partial class AttachPanelLayout : ContentView
{
    public static readonly BindableProperty IsAttachPanelVisibleProperty =
        BindableProperty.Create("IsAttachPanelVisible", typeof(bool), typeof(AttachPanelLayout), true);

    public bool IsAttachPanelVisible
    {
        get
        {
            return (bool)GetValue(IsAttachPanelVisibleProperty);
        }
        set
        {
            SetValue(IsAttachPanelVisibleProperty, value);
        }
    }

    public AttachPanelLayout()
    {
        InitializeComponent();
    }
}

  3. Use the custom control.

    The following code example shows how the attachPanelLayout custom control can be used by a C# page:

    
                
    C#
    
                
    
                    
    Copy
    
                    
    
                
    
            
    private void OpenAttachPanelClicked(object sender, EventArgs e)
{
    if (attachPanelLayout != null)
    {
        attachPanelLayout.IsAttachPanelVisible = true;
    }
    else
    {
        if (Content is StackLayout layout)
        {
            attachPanelLayout = new AttachPanelLayout();
            layout.Children.Add(attachPanelLayout);
        }
    }
}

  4. Create the custom renderer on the Tizen platform:

    
                
    C#
    
                
    
                    
    Copy
    
                    
    
                
    
            
    [assembly: ExportRenderer(typeof(AttachPanelLayout), typeof(AttachPanelLayoutRenderer))]
namespace AttachPanelSample.Tizen.Mobile
{
    public class AttachPanelLayoutRenderer : LayoutRenderer
    {
        private AttachPanel attachPanel;

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Layout> e)
        {
            base.OnElementChanged(e);

            if (attachPanel == null)
            {
                attachPanel = new AttachPanel(Program.WindowConformant);

                attachPanel.AddCategory(ContentCategory.Image, null);
            }

            attachPanel.Show();

            if (e.OldElement != null)
            {
                attachPanel.ResultCallback -= AttachPanelResultCallback;
                attachPanel.EventChanged -= AttachPanelEventChanged;
                attachPanel = null;
            }

            if (e.NewElement != null)
            {
                attachPanel.ResultCallback += AttachPanelResultCallback;
                attachPanel.EventChanged += AttachPanelEventChanged;
            }
        }
    }
}

Manage an attach panel

To manage an attach panel content, you can set extra data to a previously added content category using a bundle. Use the SetExtraData() method of the Tizen.Applications.AttachPanel.AttachPanel class.

The following are the extra data supported by the attach panel:

  • http://tizen.org/appcontrol/data/total_count: Total count of selected items in the Images category
  • http://tizen.org/appcontrol/data/total_size: Total size of selected items in the VideoRecorder category within the More tab

                
C#

                

                    
Copy

                    

                

            
public void SetTotalCountOfSelectedImages()
{
    Bundle bundle = new Bundle();
    bundle.AddItem("http://tizen.org/appcontrol/data/total_count", "3");

    attachPanel.SetExtraData(ContentCategory.Image, bundle);
}

public void SetTotalSizeOfSelectedItems()
{
    Bundle bundle = new Bundle();
    bundle.AddItem("http://tizen.org/appcontrol/data/total_size", "200000");

    attachPanel.SetExtraData(ContentCategory.VideoRecorder, bundle);
}
  • Dependencies
    • Tizen 4.0 and Higher
Notifications
Next Pims
Submit your feedback to GitHub