From: moon87.park Date: Tue, 19 Sep 2017 12:44:15 +0000 (+0900) Subject: [TCSACR-33][csapi-attach-panel][Add] Add Tizen.Applications.AttachPanel APIs X-Git-Tag: GitHub/PR#40/tizen-studio~13^2 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=eab7943a1fdb185aa4156fb54f9300b88538a190;p=sdk%2Fonline-doc.git [TCSACR-33][csapi-attach-panel][Add] Add Tizen.Applications.AttachPanel APIs PS4: Reviewed Change-Id: I6f4aeb3b7696005c27420f94d9147e4bbf9f9ea8 Signed-off-by: moon87.park --- diff --git a/org.tizen.guides/html/dotnet/attach_panel.htm b/org.tizen.guides/html/dotnet/attach_panel.htm new file mode 100755 index 0000000..cf7db14 --- /dev/null +++ b/org.tizen.guides/html/dotnet/attach_panel.htm @@ -0,0 +1,298 @@ + + + + + + + + + + + + + Attach Panel + + + +
+ +
+

Dependencies

+
    +
  • Tizen 4.0 and Higher
  • +
+

Content

+ +

Related Info

+ +
+
+ +
+

Attach Panel

+ +

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

+ +

The main features of the Tizen.Applications.AttachPanel namespace include:

+
    +
  • Creating an attach panel +

    You can create an attach panel and manage events related to user selections and panel visibility. You can also add and remove content categories.

  • +
  • Managing an attach panel +

    You can set extra data to a content category to manage its content.

  • +
+ +

Figure: Attach panel

+

Attach panel

+ +

The attach panel has UI components and it manages user interactions on its interface. The layout component keeps on the tabbar and scroller components, which are connected to show the content synchronously. The scroller component has pages to display the content of, for example, images, camera, and voice recorder. Some content is shown as a page on the panel, while others can be launched from the panel's More tab using application controls.

+ +

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

+

Figure: Attach panel modes

+

Attach panel modes

+ +

Content Categories

+ +

You can manage the following types of content:

+
    +
  • Images +

    In the half mode, you can select only 1 image to be attached. In the full mode, you can select multiple images at once.

    + +
  • +
  • Camera +

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

    +
  • +
  • Voice +

    You can attach a voice recording.

    +
  • +
  • Various content in the More tab +

    The More tab shows the icons of additional categories, for example, video, audio, calendar, contact, myfiles, and video recorder, that can be launched by clicking the applicable icon.

    +
  • +
+ +

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

+

Figure: Content categories

+

Images content Camera content Voice content More content

+ + +

Prerequisites

+ +

To enable your application to use the attach panel functionality:

+
    +
  1. +

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

    +
    +<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 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. +
  3. +

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

    +
    +using Tizen.Applications.AttachPanel;
    +
    +
  4. +
  5. +

    Create a conformant, into which you can add an attach panel instance later:

    + +
    +class App : CoreUIApplication
    +{
    +    Conformant conformant;
    +
    +    protected override void OnCreate()
    +    {
    +        /// Application initialization
    +
    +        conformant = new Conformant(window);
    +        conformant.Show();
    +        conformant.SetContent(bg);
    +
    +        /// Create an attach panel
    +    }
    +}
    +
    +
  6. +
+ +

Creating an Attach Panel

+ +

To create an attach panel:

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

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

    + +
    +AttachPanel attachPanel;
    +
    +public void CreateAttachPanel(Conformant conformant)
    +{
    +    if (attachPanel == null)
    +    {
    +        attachPanel = new AttachPanel(conformant);
    +        attachPanel.AddCategory(ContentCategory.Image, null);
    +        attachPanel.Show();
    +    }
    +}
    +
    +
  2. +
  3. Based on the type of content you want the user to be able to select for the attach panel, add content categories using the addCategory() method. 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, recently used, and alphabetical sequence.

    +

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

    + +
    +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();
    +
    +
  4. +
  5. Register the needed event handlers: + +
    • To access the data that the user selects in the called application, register the ResultCallback event of the Tizen.Applications.AttachPanel.AttachPanel class and define an event handler for it. +

      The event is triggered when the user selects and confirms something to attach on the caller application. In the event handler, you can retrieve the selected items with Tizen.Applications.AttachPanel.ResultEventArgs.Result.ExtraData.

    • +
    • 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. +

      The event is triggered when reserved events (defined in the Tizen.Applications.AttachPanel.StateEventArgs.EventType enumeration) are published from the panel side.

    + +
    +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;
    +
    +
  6. +
  7. When no longer needed, you can remove a specific content category by using the RemoveCategory() method: + +
    +public void RemoveCategory()
    +{
    +    attachPanel.RemoveCategory(ContentCategory.Image);
    +    attachPanel.RemoveCategory(ContentCategory.Camera);
    +}
    +
    +
  8. +
+ + +

Managing an Attach Panel

+ + +

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

+ + +The following extra data is supported: +
    +
  • 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
  • +
+
+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);
+}
+
+ + + + +
+ +Go to top + + + + + + +