Page Example

Exercise Planner Sample Overview

The Exercise Planner sample application demonstrates how you can add or delete alarms in your application. Also it demonstrates how the application can react on those alarms.

The following figure illustrates the main screens of the Exercise Planner.

Figure: Exercise Planner screens

Exercise Planner screens

The application opens with the Exercise planner main screen that displays the scheduled exercises.

To define a new alarm, click the Add New Exercise button on the main screen. For each alarm you can define:

  • The alarm name
  • The alarm frequency
  • The start time
  • A comment

To activate the alarm, click the Save button on the new exercise screen. When the start time of the alarm is reached, the application displays a proper screen with application details where you can select the Exercises list to go to the main screen, or Exit to close the application.

Source Files

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

File name Description
config.xml This file contains the application information for the platform to install and launch the application, including the view mode and the icon used in the device menu.
index.html This is a starting file from which the application starts loading. It contains the layout of the application screens.
js/ This directory contains the application code.
js/main.js This file acts as loader for the application and its dependencies.
js/app.js This file is responsible for application setup and interaction with the Application API.
js/app.config.js This file contains the application configuration.
js/app.alarm.js This file is responsible for interaction with the Alarm API.
js/app.model.js This file is responsible for the application data storage.
js/app.ui.js This file is responsible for handling the user interface interactions.

js/app.ui.templateManager.js

js/app.ui.templateManager.modifiers.js

These files are responsible for template management.
lib/ This directory contains the external libraries (TAU library).
css/style.css This file contains the CSS styling for the application UI.
templates/ This directory contains layouts of the application screens and templates for smaller elements of the user interface.
img/ This directory contains the images used to create the user interface.

Implementation

When the application starts, the application modules are initialized.

/* js/app.js */
this.model = new Model();
this.ui = new Ui();
this.model.init(this);
this.ui.init(this, this.getRequestedAppControlData());

The main screen is shown with the currently active exercises. The exercises are stored in the local storage.

/* js/app.model.js */
var exercises = window.localStorage.getItem('exercises');

To create an exercise, it is necessary to create an alarm. The ID of the created alarm becomes the exercise ID. After the alarm is created, the local storage is updated.

/* js/app.model.js */
/**
* Adds a new exercise, saves it in the local storage and sets a new alarm
* @param {Object} exercise Exercise object
* @return {Object|undefined} exercise object
*/
add: function Model_saveAlarm(exercise) 
{
   var alarmId = this.alarmHelper.add(exercise);

   if (alarmId) 
   {
      exercise.id = alarmId;

      /* Add to session storage */
      this.exercises.push(exercise);

      /* Add to localStorage */
      this.updateStorage();

      return exercise;
   }
}

/* Saves the exercises in the local storage */
updateStorage: function() 
{
   try 
   {
      window.localStorage.setItem('exercises', JSON.stringify(this.exercises));
   } 
   catch (e) 
   {
      (...)
   }
}

To add an alarm that would start the application on time, the application ID and the application control URI are needed.

/* js/app.js */

APP_CONTROL_OPERATION_URI:'http://tizen.org/appcontrol/operation/exercise'

/**
* Returns this application ID
* @return {number} application ID
*/
getId: function getId() 
{
   return tizen.application.getCurrentApplication().appInfo.id;
}

/* js/app.alarm.js */

/**
* Creates a new system alarm connected with the exercise
* @param {Object} exercise
* @param {string} ID of the added alarm
*/
add: function addAlarm(exercise) 
{
   var alarm = {}, date, appControl;

   try 
   {
      /* Change the datetimepicker returned object into Date type object */
      date = this.datapickerValue2Date(exercise.startTime);
      /* Create a new Alarm object */
      alarm = new tizen.AlarmAbsolute(date, exercise.days);
      /* Create an ApplicationControl object */
      appControl = new tizen.ApplicationControl(app.APP_CONTROL_OPERATION_URI);

      /* Add a new alarm and connect it with appControl object */
      tizen.alarm.add(alarm, app.getId(), appControl);
   } 
   catch (e) 
   {
      console.error(e);
   } 
   finally 
   {
      return alarm.id;
   }
}

The application control data is checked to determine if the application was started by the user or by an alarm previously set up through the application. If the application was started by an alarm, the exercise ID is retrieved and returned.

/* js/app.js */

var reqAppControl = tizen.application.getCurrentApplication().getRequestedAppControl()

if (reqAppControl) 
{
   data = reqAppControl.appControl.data;
   len = data.length - 1;

   while (len >= 0) 
   {
      if (data[len].key === this.APP_CONTROL_DATA_KEY)
      {
         exerciseId = data[len].value[0];
         break;
      }
      len -= 1;
   }

   return exerciseId;
}

For the application control to work, additional data in the config.xml file is necessary.

<!--confix.xml-->

<tizen:app-control>
<tizen:src name="index.html"/>
<tizen:operation name="http://tizen.org/appcontrol/operation/exercise"/>
</tizen:app-control>

To remove an alarm, its ID is required.

/* js/app.alarm.js */

/**
* Removes the system alarm connected to the exercise
* @param {Object} exercise
* @return {boolean} returns result of operation
*/
remove: function removeAlarm(exercise) 
{
   try 
   {
      tizen.alarm.remove(exercise.id);
   } 
   catch (e) 
   {
      console.error(e);

      return false;
   }

   return true;
},