Feedback Sample Overview

The Feedback application demonstrates how you can use the Feedback API to play sound or vibration associated with an action.

The following figure illustrates the main screen and the settings screen of the Feedback application.

Figure: Feedback screens

The application opens with the main screen, which shows the list of feedback patterns and the Settings button. To go to the Settings view, click Settings. In the Settings view, you can select the type of feedback.

The application is divided into several pages in the index.html file. Their IDs are:

• main-page: The main page that shows the list on patterns.
• settings-page: The Settings page for selecting the type of feedback.

Source Files

You can create and view the sample application project, including the source files, in the IDE.

Implementation

To implement the application:

1. After the application has been loaded, it defines a handler to subscribe to specific events.

   /* This handler function is called when a pattern is selected on the list on the main page */
   myapp.ui.mainpage.patternslist.onclick = function(event) 
   {
      var id = event.target.id;
   
      /* If the event target ID is 'patterns-list', it is ignored */
      if (id === myapp.MAIN_PAGE_PATTERNS_LIST)
      {
         return;
      }
   
      myapp.data.pattern = document.querySelector('#' + id).innerHTML;
   
      myapp.play();
   };
   
   /* This handler function is called when Settings on the main page is clicked */
   myapp.ui.mainpage.settingsbutton.onclick = function()
   {
      tau.changePage(myapp.SETTINGS_PAGE);
   };
   
   /* This handler function is called when one of the radio buttons on the Settings page is selected */
   myapp.ui.settingspage.radiobutton.onclick = function(event)
   {
      myapp.data.type = event.target.value;
   };
   
   /* This handler function is called when OK on an error popup is clicked */
   myapp.ui.errorpopup.button.onclick = function()
   {
      tau.closePopup();
   };
   
   /* Create the list to display on the main page */
   myapp.ui.mainpage.createList();
   

2. The following example shows the detailed code for the myapp.play() method. The code shows how to check whether a type and a pattern are supported on a device and to play the type and the pattern.

   /* 
      Plays a feedback by myapp.data.pattern and myapp.data.mode
      @public
   */
   self.play = function() 
   {
      try 
      {
         /*
            Checks whether a selected pattern is supported
            If the pattern is not supported, an error popup opens
         */
         var isSupported = false;
         isSupported = tizen.feedback.isPatternSupported(self.data.pattern, self.data.type);
         if (isSupported === false)
         {
            self.ui.errorpopup.message.innerHTML = 'Not Supported Pattern';
            tau.openPopup('#' + self.ERROR_POPUP);
   
            return;
         }
   
         /* If the pattern is supported, play the pattern */
         tizen.feedback.play(self.data.pattern, self.data.type);
      } 
      catch (error)
      {
         self.ui.errorpopup.message.innerHTML = error.name + ': ' + error.message;
         tau.openPopup('#' + self.ERROR_POPUP);
      }
   };