Mobile Web Wearable Web

Task: Media Content

This task, based on the MediaContent sample delivered with the Tizen SDK, demonstrates how you can use the Content API (in mobile and wearable applications) to manage media files in your application. For more information on the sample functionality and creating the sample with the full source code, see Media Content.

This task consists of the following parts:

This sample is a fully functional application which searches for and browses media directories and media item files. The media item files can be viewed and updated.

Defining the Application Layout

The MediaContent sample application layout consists of 3 screens: the main screen displays a list of storage types and folders, the item screen displays a list of media items, and the Details screen displays the media item details.

The following figure shows the main screens of the application.

Figure: MediaContent screens

MediaContent screens

Defining the Main Screen

  1. index.html Source File

    1. The main screen of the application displays a list of storage types and folders containing media items. The header section of the screen is defined within a <div> element whose data-role attribute is set to header. The header section determines the title of the screen.

      <!--Main screen layout-->	
<div data-role="page" id="main">
   <!--Header section-->
   <div data-role="header" data-position="fixed">
      <h1>Media content</h1>
   </div>

    2. The actual content section of the screen is defined within a <div> element whose data-role attribute is set to content.

      The section has a list component displaying the storage types, and a list divider for the folder list (whose list items are defined in the main.js file).

         <!--Content section-->	
   <div data-role="content">
      <ul data-role="listview" id="folder-list">
         <li data-role="list-divider">Storage type</li>
         <li class="folder-type-all">
            ALL
         </li>
         <li class="folder-type-internal">
            INTERNAL
         </li>
         <li class="folder-type-external">
            EXTERNAL
         </li>
         <li data-role="list-divider" id="folder-text">Folders</li>
      </ul>
   </div>
</div>

Defining the Folder Screen

  1. index.html Source File

    Similarly as the main screen, the folder screen contains a list component displaying radio buttons (defined within an <input> element whose type attribute is set to radio) for the content types and a list divider for the item list (whose list items are defined in the main.js file). 

    <!--Folder screen layout-->
<div data-role="page" id="items">
   <div data-role="header" data-position="fixed">
      <h1 id="items-title"></h1>
   </div>

   <!--Content section-->
   <div data-role="content">
      <ul data-role="listview" id="items-list">
         <li data-role="list-divider">Item type</li>
         <li class="ui-li-has-radio">
            ALL
            <input type="radio" name="item-type" id="item-type-all" value="ALL" checked="checked"/>
         </li>
         <li class="ui-li-has-radio">
            IMAGE
            <input type="radio" name="item-type" id="item-type-image" value="IMAGE"/>
         </li>
         <li class="ui-li-has-radio">
            VIDEO
            <input type="radio" name="item-type" id="item-type-video" value="VIDEO"/>
         </li>
         <li class="ui-li-has-radio">
            AUDIO
            <input type="radio" name="item-type" id="item-type-audio" value="AUDIO"/>
         </li>
         <li data-role="list-divider">Items</li>
      </ul>
   </div>
</div>

The Details screen content section contains a list component, and every list item is defined in the main.js file.

Initializing the Application

  1. config.xml Source File

    The required privileges are declared in the config.xml file.

    <!--Configuration file content-->
<widget ...>
   <!--Other configuration details-->
   <tizen:privilege name="http://tizen.org/privilege/content.read"/> 
   <tizen:privilege name="http://tizen.org/privilege/content.write"/> 
   <!--Other configuration details-->
</widget>

Browsing Content

This section builds upon the elements described in Browsing Content.

Retrieving Media Directories

  1. main.js Source File

    1. The Content API uses the same ContentManager interface instance (in mobile and wearable applications) for all content-related functionalities. Retrieve the ContentManager interface instance using the tizen global object.

      gMediaSource = tizen.content;

    2. Use the getFolders() method to retrieve the list of directories present in all storage types. The showFolderList() method is called to perform the actual operation of retrieving the directories, based on the selection made in the Storage type list.

      In the example below, all the directories in the device containing media items are retrieved.

      function getFolders(storageType)
{
   try
   {
      gMediaSource = tizen.content;
      gMediaSource.getDirectories(onGetFoldersSuccess, onGetFoldersError);
   }
   function onGetFoldersSuccess(folders)
   {
      $("#folder-list").delegate("li", "vclick", function()
      {
         var id = $(this).data("id");
         if (id != null)
         {
            getFolderItems(Number(id), gMediaType);
         }

         return false;
      });
      gMediaFolders = folders;
      showFolderList(storageType);
   }
   function onGetFoldersError(err)
   {
      alert("GetFolders failed:" + err.message);
   }

   flagInit = true;
}

    3. The showFolderList() method calls the makeListItem() method, which creates a list of directories and displays it on the screen.

      Although all the directories are retrieved in the previous step, the showFolderList() method only displays the directories that match with the storage type the user has selected (INTERNAL or EXTERNAL).

      function showFolderList(storageType)
{
   setLastStorage(storageType);
   if (flagInit == false)
   {
      getFolders(storageType);
   }
   else
   {
      var str = '';
      for (var i = 0; i < gMediaFolders.length; i++)
      {
         if (storageType == "ALL" || storageType == gMediaFolders[i].storageType)
            str += makeListItem(i, gMediaFolders[i].title, gMediaFolders[i].directoryURI);
      }

      $("#folder-list>li[data-id]").remove();
      $("#folder-list").append(str).trigger("create").listview("refresh");
   }
}

Retrieving Media Items

  1. main.js Source File

    1. To get the media item list, use the getFolderItems() method. The method takes 2 attributes: folderId, which takes the folder ID whose media item list is to be displayed and mediaType, which specifies the media type (all, image, audio, or video).

      The getFolderItems() method is called when the user clicks a specific directory on the main screen, or changes the item type selection with the radio buttons on the item screen.

      function getFolderItems(folderId, mediaType)
{

    2. The find() method is called to search and retrieve the required media items. After a successful search, the success event handler either updates the item list on the item screen with the showItemList() method (if the item screen is already displayed), or moves to the item screen (which means that the retrieved item list is automatically displayed).

         function onFindItemSuccess(items)
   {
      gMediaItems = items;
      gFolderId = folderId;
      gMediaType = mediaType;

      if ($.mobile.activePage.attr("id") == "items")
      {
         showItemList();
      }
      else 
      {
         $.mobile.changePage("#items");
      }
   }
   function onFindItemsError(err)
   {
      alert("getFolderItems findItems failed: " + err.message);
   }
   try
   {
      gMediaSource.find(onFindItemSuccess, onFindItemError,
                    folderId == null ? null : gMediaFolders[folderId].id,
                    mediaType == "ALL" ? null : new tizen.AttributeFilter("type", "EXACTLY", mediaType),
                    new tizen.SortMode("title", "ASC"));
   }
}

    3. The showItemList() method creates a list of media items and displays it on the screen.

      function showItemList()
{
   var str = '';
   var title = gMediaFolders[gFolderId].title;
   $("#items-title").html(gFolderId == null ? "All" : title.toString());

   for (var i = 0; i < gMediaItems.length; i++)
   {
      str += makeListItem(i, gMediaItems[i].title, gMediaItems[i].type 
             + "  Rating: " + gMediaItems[i].rating);
   }

   $("#items-list>li[data-id]").remove();
   $("#items-list").append(str).trigger("create").listview("refresh");
}

Viewing Media File Details

This section builds upon the elements described in Managing Content.

  1. main.js Source File

    To view the details of a media file, use the showMediaDetail() method, which displays the properties of the selected media file depending on the type of the file. The makeCommonPropertiesListItems() method defines a list of properties common to all the types of media files.

    The showMediaDetail() method is called when the user clicks a media file on the item screen and the Details screen is displayed.

    function showMediaDetail()
{
   var str, item = gMediaItems[gItemId];
   /* Details for image items */
   if (item.type == "IMAGE")
   {
      str = makeCommonPropertiesListItems(item)
      + makeListItem(null, "Width", item.width)
      + makeListItem(null, "Height", item.height)
      + makeListItem(null, "Latitude", item.geolocation.latitude)
      + makeListItem(null, "Longitude", item.geolocation.longitude);
   }
   /* Details for video and audio items */

   $("#media-details").html(str).trigger("create").listview("refresh");
}
Go to top