struct tm date;
ret = alarm_get_current_time(&date);
-date.tm_sec+=4;
+date.tm_sec += 4;
ret = alarm_schedule_at_date(app, &date, 0, &alarm_id);
</pre>
time_t time_current = mktime(&date);
dlog_print(DLOG_INFO, TAG, "Schedule on date: %s ", ctime(&time_current));
-ret =
- alarm_schedule_with_recurrence_week_flag(app_control, &date,
- ALARM_WEEK_FLAG_TUESDAY | ALARM_WEEK_FLAG_FRIDAY,
- &alarm_id);
+ret = alarm_schedule_with_recurrence_week_flag(app_control, &date,
+ ALARM_WEEK_FLAG_TUESDAY | ALARM_WEEK_FLAG_FRIDAY, &alarm_id);
</pre>
<h2 id="scenario_4" name="scenario_4">Listing All Scheduled Alarms and Canceling an Alarm</h2>
/* Logging scheduled alarm info */
time_current = mktime(&date);
- dlog_print(DLOG_INFO, TAG, "Registered alarm: %d on date: %s ",
- alarm_id, ctime(&time_current));
+ dlog_print(DLOG_INFO, TAG, "Registered alarm: %d on date: %s ", alarm_id, ctime(&time_current));
ret = alarm_get_scheduled_recurrence_week_flag(alarm_id, &flag);
if (ret == 0) {
<pre class="prettyprint">
/* Composing an event */
context_trigger_rule_entry_h event = NULL;
-context_trigger_rule_event_create(CONTEXT_TRIGGER_EVENT_TIME,
- CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- &event);
-context_trigger_rule_entry_add_key(event, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- CONTEXT_TRIGGER_TIME_OF_DAY);
-context_trigger_rule_entry_add_comparison_int(event, CONTEXT_TRIGGER_TIME_OF_DAY,
- CONTEXT_TRIGGER_EQUAL_TO, 1320);
+context_trigger_rule_event_create(CONTEXT_TRIGGER_EVENT_TIME, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &event);
+context_trigger_rule_entry_add_key(event, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, CONTEXT_TRIGGER_TIME_OF_DAY);
+context_trigger_rule_entry_add_comparison_int(event, CONTEXT_TRIGGER_TIME_OF_DAY, CONTEXT_TRIGGER_EQUAL_TO, 1320);
/* Adding the event to the rule and releasing the resources */
context_trigger_rule_add_entry(rule, event);
<pre class="prettyprint">
/* Composing a condition */
context_trigger_rule_entry_h condition = NULL;
-context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_BATTERY,
- CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &condition);
-context_trigger_rule_entry_add_key(condition, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- CONTEXT_TRIGGER_IS_CHARGING);
-context_trigger_rule_entry_add_comparison_int(condition, CONTEXT_TRIGGER_IS_CHARGING,
- CONTEXT_TRIGGER_EQUAL_TO,
- CONTEXT_TRIGGER_FALSE);
+context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_BATTERY, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &condition);
+context_trigger_rule_entry_add_key(condition, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, CONTEXT_TRIGGER_IS_CHARGING);
+context_trigger_rule_entry_add_comparison_int(condition, CONTEXT_TRIGGER_IS_CHARGING, CONTEXT_TRIGGER_EQUAL_TO, CONTEXT_TRIGGER_FALSE);
/* Adding the condition to the rule handle */
context_trigger_rule_add_entry(rule, condition);
/* Composing an event "when the user enters his home" */
context_trigger_rule_entry_h event = NULL;
-context_trigger_rule_event_create(CONTEXT_TRIGGER_EVENT_PLACE,
- CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &event);
+context_trigger_rule_event_create(CONTEXT_TRIGGER_EVENT_PLACE, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &event);
context_trigger_rule_entry_add_option_int(event, CONTEXT_TRIGGER_PLACE_ID, place_id);
</pre>
<pre class="prettyprint">
/* Composing an event "when receiving a message" */
context_trigger_rule_entry_h event = NULL;
-context_trigger_rule_event_create(CONTEXT_TRIGGER_EVENT_MESSAGE,
- CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &event);
-context_trigger_rule_entry_add_key(event, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- CONTEXT_TRIGGER_EVENT);
-context_trigger_rule_entry_add_comparison_string(event, CONTEXT_TRIGGER_EVENT,
- CONTEXT_TRIGGER_EQUAL_TO,
- CONTEXT_TRIGGER_RECEIVED);
+context_trigger_rule_event_create(CONTEXT_TRIGGER_EVENT_MESSAGE, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &event);
+context_trigger_rule_entry_add_key(event, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, CONTEXT_TRIGGER_EVENT);
+context_trigger_rule_entry_add_comparison_string(event, CONTEXT_TRIGGER_EVENT, CONTEXT_TRIGGER_EQUAL_TO, CONTEXT_TRIGGER_RECEIVED);
/* Composing a condition "if the sender number is the most frequently communicated" */
context_trigger_rule_entry_h condition = NULL;
-context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_COMMUNICATION_FREQUENCY,
- CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &condition);
+context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_COMMUNICATION_FREQUENCY, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &condition);
/* Message sender's address is used as an option of the condition */
-context_trigger_rule_entry_add_option(condition, CONTEXT_TRIGGER_ADDRESS,
- CONTEXT_TRIGGER_ADDRESS);
+context_trigger_rule_entry_add_option(condition, CONTEXT_TRIGGER_ADDRESS, CONTEXT_TRIGGER_ADDRESS);
/* Checking if the frequency rank of the address is equal to 1 */
-context_trigger_rule_entry_add_key(condition, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- CONTEXT_TRIGGER_RANK);
-context_trigger_rule_entry_add_comparison_int(condition, CONTEXT_TRIGGER_RANK,
- CONTEXT_TRIGGER_EQUAL_TO, 1);
+context_trigger_rule_entry_add_key(condition, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, CONTEXT_TRIGGER_RANK);
+context_trigger_rule_entry_add_comparison_int(condition, CONTEXT_TRIGGER_RANK, CONTEXT_TRIGGER_EQUAL_TO, 1);
</pre>
<p>The following table lists the available options keys and the corresponding values.</p>
<pre class="prettyprint">
/* Composing an event and conditions */
context_trigger_rule_entry_h battery_event;
-context_trigger_rule_event_create(CONTEXT_TRIGGER_EVENT_BATTERY,
- CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- &battery_event);
-context_trigger_rule_entry_add_key(battery_event,
- CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- CONTEXT_TRIGGER_LEVEL);
-context_trigger_rule_entry_add_comparison_string(battery_event,
- CONTEXT_TRIGGER_LEVEL,
- CONTEXT_TRIGGER_EQUAL_TO,
- CONTEXT_TRIGGER_CRITICAL);
+context_trigger_rule_event_create(CONTEXT_TRIGGER_EVENT_BATTERY, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &battery_event);
+context_trigger_rule_entry_add_key(battery_event, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, CONTEXT_TRIGGER_LEVEL);
+context_trigger_rule_entry_add_comparison_string(battery_event, CONTEXT_TRIGGER_LEVEL, CONTEXT_TRIGGER_EQUAL_TO, CONTEXT_TRIGGER_CRITICAL);
context_trigger_rule_entry_h gps_condition;
-context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_GPS,
- CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- &gps_condition);
-context_trigger_rule_entry_add_key(gps_condition,
- CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- CONTEXT_TRIGGER_STATE);
-context_trigger_rule_entry_add_comparison_string(gps_condition,
- CONTEXT_TRIGGER_STATE,
- CONTEXT_TRIGGER_NOT_EQUAL_TO,
- CONTEXT_TRIGGER_DISABLED);
+context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_GPS, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &gps_condition);
+context_trigger_rule_entry_add_key(gps_condition, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, CONTEXT_TRIGGER_STATE);
+context_trigger_rule_entry_add_comparison_string(gps_condition, CONTEXT_TRIGGER_STATE, CONTEXT_TRIGGER_NOT_EQUAL_TO, CONTEXT_TRIGGER_DISABLED);
context_trigger_rule_entry_h wifi_condition;
-context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_WIFI,
- CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- &wifi_condition);
-context_trigger_rule_entry_add_key(wifi_condition,
- CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- CONTEXT_TRIGGER_STATE);
-context_trigger_rule_entry_add_comparison_string(wifi_condition,
- CONTEXT_TRIGGER_STATE,
- CONTEXT_TRIGGER_NOT_EQUAL_TO,
- CONTEXT_TRIGGER_DISABLED);
+context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_WIFI, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &wifi_condition);
+context_trigger_rule_entry_add_key(wifi_condition, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, CONTEXT_TRIGGER_STATE);
+context_trigger_rule_entry_add_comparison_string(wifi_condition, CONTEXT_TRIGGER_STATE, CONTEXT_TRIGGER_NOT_EQUAL_TO, CONTEXT_TRIGGER_DISABLED);
/*
Composing a rule "when the battery level becomes critical,
<pre class="prettyprint">
/* Composing an event "at 4 PM every Monday" */
context_trigger_rule_entry_h time_event;
-context_trigger_rule_event_create(CONTEXT_TRIGGER_EVENT_TIME,
- <span class="highlight">CONTEXT_TRIGGER_LOGICAL_CONJUNCTION</span>,
- &time_event);
-context_trigger_rule_entry_add_key(time_event, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- CONTEXT_TRIGGER_TIME_OF_DAY);
-context_trigger_rule_entry_add_comparison_int(time_event,
- CONTEXT_TRIGGER_TIME_OF_DAY,
- CONTEXT_TRIGGER_EQUAL_TO, 960);
-context_trigger_rule_entry_add_key(time_event, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- CONTEXT_TRIGGER_DAY_OF_WEEK);
-context_trigger_rule_entry_add_comparison_string(time_event,
- CONTEXT_TRIGGER_DAY_OF_WEEK,
- CONTEXT_TRIGGER_EQUAL_TO,
- CONTEXT_TRIGGER_MON);
+context_trigger_rule_event_create(CONTEXT_TRIGGER_EVENT_TIME, <span class="highlight">CONTEXT_TRIGGER_LOGICAL_CONJUNCTION</span>, &time_event);
+context_trigger_rule_entry_add_key(time_event, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, CONTEXT_TRIGGER_TIME_OF_DAY);
+context_trigger_rule_entry_add_comparison_int(time_event, CONTEXT_TRIGGER_TIME_OF_DAY, CONTEXT_TRIGGER_EQUAL_TO, 960);
+context_trigger_rule_entry_add_key(time_event, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, CONTEXT_TRIGGER_DAY_OF_WEEK);
+context_trigger_rule_entry_add_comparison_string(time_event, CONTEXT_TRIGGER_DAY_OF_WEEK, CONTEXT_TRIGGER_EQUAL_TO, CONTEXT_TRIGGER_MON);
/*
Composing a condition "if an application belongs to the 5,
most frequently used apps or is used at least 10 times per day"
*/
context_trigger_rule_entry_h app_condition;
-context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_APP_USE_FREQUENCY,
- <span class="highlight">CONTEXT_TRIGGER_LOGICAL_DISJUNCTION</span>,
- &app_condition);
-context_trigger_rule_entry_add_option_string(app_condition,
- CONTEXT_TRIGGER_APP_ID, /* App ID */);
-context_trigger_rule_entry_add_key(app_condition, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- CONTEXT_TRIGGER_RANK);
-context_trigger_rule_entry_add_comparison_int(app_condition, CONTEXT_TRIGGER_RANK,
- CONTEXT_TRIGGER_LESS_THAN_OR_EQUAL_TO,
- 5);
-context_trigger_rule_entry_add_key(app_condition,
- CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- CONTEXT_TRIGGER_TOTAL_COUNT);
-context_trigger_rule_entry_add_comparison_int(app_condition,
- CONTEXT_TRIGGER_TOTAL_COUNT,
- CONTEXT_TRIGGER_GREATER_THAN_OR_EQUAL_TO,
- 10);
+context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_APP_USE_FREQUENCY, <span class="highlight">CONTEXT_TRIGGER_LOGICAL_DISJUNCTION</span>, &app_condition);
+context_trigger_rule_entry_add_option_string(app_condition, CONTEXT_TRIGGER_APP_ID, /* Application ID */);
+context_trigger_rule_entry_add_key(app_condition, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, CONTEXT_TRIGGER_RANK);
+context_trigger_rule_entry_add_comparison_int(app_condition, CONTEXT_TRIGGER_RANK, CONTEXT_TRIGGER_LESS_THAN_OR_EQUAL_TO, 5);
+context_trigger_rule_entry_add_key(app_condition, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, CONTEXT_TRIGGER_TOTAL_COUNT);
+context_trigger_rule_entry_add_comparison_int(app_condition, CONTEXT_TRIGGER_TOTAL_COUNT, CONTEXT_TRIGGER_GREATER_THAN_OR_EQUAL_TO, 10);
</pre></li>
<li>Combining comparisons into an attribute
<pre class="prettyprint">
/* Composing a condition "if the battery level is full or high" */
context_trigger_rule_entry_h battery_condition;
-context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_BATTERY,
- CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- &battery_condition);
-context_trigger_rule_entry_add_key(battery_condition,
- <span class="highlight">CONTEXT_TRIGGER_LOGICAL_DISJUNCTION</span>,
- CONTEXT_TRIGGER_LEVEL);
-context_trigger_rule_entry_add_comparison_string(battery_condition,
- CONTEXT_TRIGGER_LEVEL,
- CONTEXT_TRIGGER_EQUAL_TO,
- CONTEXT_TRIGGER_FULL);
-context_trigger_rule_entry_add_comparison_string(battery_condition,
- CONTEXT_TRIGGER_LEVEL,
- CONTEXT_TRIGGER_EQUAL_TO,
- CONTEXT_TRIGGER_HIGH);
+context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_BATTERY, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &battery_condition);
+context_trigger_rule_entry_add_key(battery_condition, <span class="highlight">CONTEXT_TRIGGER_LOGICAL_DISJUNCTION</span>, CONTEXT_TRIGGER_LEVEL);
+context_trigger_rule_entry_add_comparison_string(battery_condition, CONTEXT_TRIGGER_LEVEL, CONTEXT_TRIGGER_EQUAL_TO, CONTEXT_TRIGGER_FULL);
+context_trigger_rule_entry_add_comparison_string(battery_condition, CONTEXT_TRIGGER_LEVEL, CONTEXT_TRIGGER_EQUAL_TO, CONTEXT_TRIGGER_HIGH);
/* Composing a condition "if the current time is between 18:30 and 21:30" */
context_trigger_rule_entry_h time_condition;
-context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_TIME,
- CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- &time_condition);
-context_trigger_rule_entry_add_key(time_condition,
- <span class="highlight">CONTEXT_TRIGGER_LOGICAL_CONJUNCTION</span>,
- CONTEXT_TRIGGER_TIME_OF_DAY);
-context_trigger_rule_entry_add_comparison_int(time_condition,
- CONTEXT_TRIGGER_TIME_OF_DAY,
- CONTEXT_TRIGGER_GREATER_THAN_OR_EQUAL_TO,
- 1110);
-context_trigger_rule_entry_add_comparison_int(time_condition,
- CONTEXT_TRIGGER_TIME_OF_DAY,
- CONTEXT_TRIGGER_LESS_THAN_OR_EQUAL_TO,
- 1290);
+context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_TIME, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &time_condition);
+context_trigger_rule_entry_add_key(time_condition, <span class="highlight">CONTEXT_TRIGGER_LOGICAL_CONJUNCTION</span>, CONTEXT_TRIGGER_TIME_OF_DAY);
+context_trigger_rule_entry_add_comparison_int(time_condition, CONTEXT_TRIGGER_TIME_OF_DAY, CONTEXT_TRIGGER_GREATER_THAN_OR_EQUAL_TO, 1110);
+context_trigger_rule_entry_add_comparison_int(time_condition, CONTEXT_TRIGGER_TIME_OF_DAY, CONTEXT_TRIGGER_LESS_THAN_OR_EQUAL_TO, 1290);
</pre></li></ul>
</li>
<li>Set an optional description:
<pre class="prettyprint">
-context_trigger_rule_set_description(rule, "Notify if the battery is not charging
- and either Wi-Fi or GPS is enabled
- when the battery level becomes too low");
+context_trigger_rule_set_description(rule, "Notify if the battery is not charging and either Wi-Fi or GPS is enabled when the battery level becomes too low");
</pre>
</li>
</ol>
<p>Create an event handle using the <code>context_trigger_rule_event_create()</code> function:</p>
<pre class="prettyprint">
context_trigger_rule_entry_h battery_event = NULL;
-context_trigger_rule_event_create(CONTEXT_TRIGGER_EVENT_BATTERY,
- CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- &battery_event);
+context_trigger_rule_event_create(CONTEXT_TRIGGER_EVENT_BATTERY, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &battery_event);
</pre>
<p>While creating an event handle, the application chooses the logical operator (logical conjunction or disjunction), which is applied to combine the attribute keys for the event. In case of the <code>CONTEXT_TRIGGER_EVENT_BATTERY</code> event, 2 types of contextual states are provided: <code>CONTEXT_TRIGGER_LEVEL</code> and <code>CONTEXT_TRIGGER_IS_CHARGING</code>. Because the application wants to check both if the battery level becomes too low and if the battery is not charging, <code>CONTEXT_TRIGGER_LOGICAL_CONJUNCTION</code> must be applied.</p>
</li>
<p>The attribute key specifies the detailed comparison terms for the event.</p>
<pre class="prettyprint">
/* Add a CONTEXT_TRIGGER_LEVEL key */
-context_trigger_rule_entry_add_key(battery_event, CONTEXT_TRIGGER_LOGICAL_DISJUNCTION,
- CONTEXT_TRIGGER_LEVEL);
+context_trigger_rule_entry_add_key(battery_event, CONTEXT_TRIGGER_LOGICAL_DISJUNCTION, CONTEXT_TRIGGER_LEVEL);
/* Add a CONTEXT_TRIGGER_IS_CHARGING key */
-context_trigger_rule_entry_add_key(battery_event, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- CONTEXT_TRIGGER_IS_CHARGING);
+context_trigger_rule_entry_add_key(battery_event, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, CONTEXT_TRIGGER_IS_CHARGING);
</pre>
<p>The application wants to check whether the battery level becomes either low, empty, or critical. For this reason, the <code>CONTEXT_TRIGGER_LEVEL</code> key must be added with the <code>CONTEXT_TRIGGER_LOGICAL_DISJUNCTION</code> logical operator.</p>
</li>
<p>Use the <code>context_trigger_rule_entry_add_comparison_int()</code> or <code>context_trigger_rule_entry_add_comparison_string()</code> function, depending on the data type.</p>
<pre class="prettyprint">
/* Add the comparison values for the CONTEXT_TRIGGER_LEVEL key */
-context_trigger_rule_entry_add_comparison_string(battery_event,
- CONTEXT_TRIGGER_LEVEL,
- CONTEXT_TRIGGER_EQUAL_TO,
- CONTEXT_TRIGGER_LOW);
-context_trigger_rule_entry_add_comparison_string(battery_event,
- CONTEXT_TRIGGER_LEVEL,
- CONTEXT_TRIGGER_EQUAL_TO,
- CONTEXT_TRIGGER_CRITICAL);
-context_trigger_rule_entry_add_comparison_string(battery_event,
- CONTEXT_TRIGGER_LEVEL,
- CONTEXT_TRIGGER_EQUAL_TO,
- CONTEXT_TRIGGER_EMPTY);
+context_trigger_rule_entry_add_comparison_string(battery_event, CONTEXT_TRIGGER_LEVEL, CONTEXT_TRIGGER_EQUAL_TO, CONTEXT_TRIGGER_LOW);
+context_trigger_rule_entry_add_comparison_string(battery_event, CONTEXT_TRIGGER_LEVEL, CONTEXT_TRIGGER_EQUAL_TO, CONTEXT_TRIGGER_CRITICAL);
+context_trigger_rule_entry_add_comparison_string(battery_event, CONTEXT_TRIGGER_LEVEL, CONTEXT_TRIGGER_EQUAL_TO, CONTEXT_TRIGGER_EMPTY);
/* Add a comparison value for the CONTEXT_TRIGGER_IS_CHARGING key */
-context_trigger_rule_entry_add_comparison_int(battery_event,
- CONTEXT_TRIGGER_IS_CHARGING,
- CONTEXT_TRIGGER_EQUAL_TO,
- CONTEXT_TRIGGER_FALSE);
+context_trigger_rule_entry_add_comparison_int(battery_event, CONTEXT_TRIGGER_IS_CHARGING, CONTEXT_TRIGGER_EQUAL_TO, CONTEXT_TRIGGER_FALSE);
</pre>
</li>
<li>Add the event entry to the rule:
<pre class="prettyprint">
/* Create a Wi-Fi condition */
context_trigger_rule_entry_h wifi_condition = NULL;
-context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_WIFI,
- CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- &wifi_condition);
+context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_WIFI, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &wifi_condition);
/* Create a GPS condition */
context_trigger_rule_entry_h gps_condition = NULL;
-context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_GPS,
- CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- &gps_condition);
+context_trigger_rule_condition_create(CONTEXT_TRIGGER_CONDITION_GPS, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, &gps_condition);
</pre>
</li>
<li>Add the attribute key with the <code>context_trigger_rule_entry_add_key()</code> function to specify the comparison terms for each condition:
<pre class="prettyprint">
-context_trigger_rule_entry_add_key(wifi_condition,
- CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- CONTEXT_TRIGGER_STATE);
-context_trigger_rule_entry_add_key(gps_condition,
- CONTEXT_TRIGGER_LOGICAL_CONJUNCTION,
- CONTEXT_TRIGGER_STATE);
+context_trigger_rule_entry_add_key(wifi_condition, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, CONTEXT_TRIGGER_STATE);
+context_trigger_rule_entry_add_key(gps_condition, CONTEXT_TRIGGER_LOGICAL_CONJUNCTION, CONTEXT_TRIGGER_STATE);
</pre>
</li>
<li>Add a comparison operator and value for the attribute key.
<p>Use the <code>context_trigger_rule_entry_add_comparison_int()</code>, <code>context_trigger_rule_entry_add_string()</code>, or <code>context_trigger_rule_entry_add()</code> function, depending on the data type.</p>
<p>In the following example, the conditions for Wi-Fi and GPS are that they are enabled.</p>
<pre class="prettyprint">
-context_trigger_rule_entry_add_comparison_string(wifi_condition,
- CONTEXT_TRIGGER_STATE,
- CONTEXT_TRIGGER_NOT_EQUAL_TO,
- CONTEXT_TRIGGER_DISABLED);
-context_trigger_rule_entry_add_comparison_string(gps_condition,
- CONTEXT_TRIGGER_STATE,
- CONTEXT_TRIGGER_NOT_EQUAL_TO,
- CONTEXT_TRIGGER_DISABLED);
+context_trigger_rule_entry_add_comparison_string(wifi_condition, CONTEXT_TRIGGER_STATE, CONTEXT_TRIGGER_NOT_EQUAL_TO, CONTEXT_TRIGGER_DISABLED);
+context_trigger_rule_entry_add_comparison_string(gps_condition, CONTEXT_TRIGGER_STATE, CONTEXT_TRIGGER_NOT_EQUAL_TO, CONTEXT_TRIGGER_DISABLED);
</pre>
</li>
<li>Add the conditions to the rule handle:
<li>To register a notification posting request:
<pre class="prettyprint">
context_trigger_rule_set_action_notification(rule, "Battery Alert",
- "Battery is getting low. To save your
- battery, turn off Wi-Fi or GPS",
+ "Battery is getting low. To save your battery, turn off Wi-Fi or GPS",
NULL, NULL);
</pre>
<p>The Contextual Trigger API supports the basic notification type only. A notification can contain a title, content body text, an icon, and an application control to be executed.</p>
/* Set the value of APP_CONTROL_DATA_SELECTED to give to caller */
app_control_add_extra_data(reply, APP_CONTROL_DATA_SELECTED, app_id);
/* Reply to caller */
- app_control_reply_to_launch_request(reply, app_control,
- APP_CONTROL_RESULT_SUCCEEDED);
+ app_control_reply_to_launch_request(reply, app_control, APP_CONTROL_RESULT_SUCCEEDED);
app_control_destroy(reply);
}
app_control_set_mime(app_control, "text/plain");
/* Set callback function, app_control_result, to get the launch result */
-if (app_control_send_launch_request(app_control, app_control_result, NULL)
- == APP_CONTROL_ERROR_NONE)
+if (app_control_send_launch_request(app_control, app_control_result, NULL) == APP_CONTROL_ERROR_NONE)
dlog_print(DLOG_INFO, TAG, "Succeeded: the application is launched.");
else
dlog_print(DLOG_ERROR, TAG, "Failed to launch an application.");
/* Callback function to get result */
static void
-app_control_result(app_control_h request, app_control_h reply, app_control_result_e result,
- void *user_data)
+app_control_result(app_control_h request, app_control_h reply, app_control_result_e result, void *user_data)
{
char *value;
if (result == APP_CONTROL_RESULT_SUCCEEDED) {
/* Get the value of APP_CONTROL_DATA_SELECTED sent by callee */
- if (app_control_get_extra_data(reply, APP_CONTROL_DATA_SELECTED, &value)
- == APP_CONTROL_ERROR_NONE)
- dlog_print(DLOG_INFO, TAG,
- "[app_control_result_cb] Succeeded: value(%s)", value);
+ if (app_control_get_extra_data(reply, APP_CONTROL_DATA_SELECTED, &value) == APP_CONTROL_ERROR_NONE)
+ dlog_print(DLOG_INFO, TAG, "[app_control_result_cb] Succeeded: value(%s)", value);
else
dlog_print(DLOG_ERROR, TAG, "[app_control_result_cb] Failed");
} else {
<pre class="prettyprint">
ret = app_control_set_operation(app, APP_CONTROL_OPERATION_VIEW);
if (ret != APP_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "app_control_set_operation() failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "app_control_set_operation() failed. err = %d", ret);
ret = app_control_set_mime(app, "image/jpeg");
if (ret != APP_CONTROL_ERROR_NONE)
<pre class="prettyprint">
ret = app_control_add_extra_data(app, Your Message Key, message);
if (ret != APP_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "app_control_add_extra_data() failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "app_control_add_extra_data() failed. err = %d", ret);
</pre>
</li>
<li>
<pre class="prettyprint">
ret = app_control_send_launch_request(app, NULL, NULL);
if (ret != APP_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "app_control_send_launch_request() failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "app_control_send_launch_request() failed. err = %d", ret);
</pre>
<div class="note">
ret = app_control_get_extra_data(app, key, &value);
if (ret != APP_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "app_control_get_extra_data() failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "app_control_get_extra_data() failed. err = %d", ret);
dlog_print(DLOG_DEBUG, LOG_TAG, "[value] %s", value);
return true;
ret = app_control_foreach_extra_data(app, _app_control_extra_data_cb, 0);
if (ret != APP_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "app_control_foreach_extra_data() failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "app_control_foreach_extra_data() failed. err = %d", ret);
</pre>
</li>
ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
elm_win_autodel_set(ad->win, EINA_TRUE);
- evas_object_smart_callback_add(ad->win, "delete,request",
- win_delete_request_cb, NULL);
+ evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
bigbox = elm_box_add(ad->win);
<li><p>Add a shortcut using the <code>shortcut_add_to_home()</code> function:</p>
<pre class="prettyprint">
-shortcut_add_to_home("Music Player", LAUNCH_BY_APP, NULL, "/path/to/icon", 1,
- result_cb, NULL);
+shortcut_add_to_home("Music Player", LAUNCH_BY_APP, NULL, "/path/to/icon", 1, result_cb, NULL);
</pre>
<p>The third parameter can be set to <code>NULL</code> to add a default icon for the application.</p>
<pre class="prettyprint">
shortcut_add_to_home_widget("alter_name", WIDGET_SIZE_1x1, "org.tizen.testwidget",
- "/opt/media/Pictures/alter_icon.png",
- -1.0f, 0, result_cb, NULL);
+ "/opt/media/Pictures/alter_icon.png", -1.0f, 0, result_cb, NULL);
</pre>
<p>To add a widget, you have to know the widget ID and supported sizes. The alter name and icon are shown when the widget is not available.</p></li>
}
void
-pick_reply_cb(app_control_h request, app_control_h reply, app_control_result_e result,
- void *user_data)
+pick_reply_cb(app_control_h request, app_control_h reply, app_control_result_e result, void *user_data)
{
char *address = NULL;
char *name = NULL;
}
static void
-vpn_appcontrol_result_cb(app_control_h request, app_control_h reply,
- app_control_result_e result, void *user_data)
+vpn_appcontrol_result_cb(app_control_h request, app_control_h reply, app_control_result_e result, void *user_data)
{
char *result_txt;
}
static void
-app_control_result(app_control_h request, app_control_h reply, app_control_result_e result,
- void *user_data)
+app_control_result(app_control_h request, app_control_h reply, app_control_result_e result, void *user_data)
{
char *value;
if (result == APP_CONTROL_RESULT_SUCCEEDED) {
{
public:
WatchExample( WatchApplication& application )
- : mApplication( application )
+ : mApplication( application )
{
mApplication.InitSignal().Connect( this, &WatchExample::Create );
}
<pre class="prettyprint">
void
-iterate_bundle_foreach(const char *key, const int type, bundle_keyval_t *kv,
- void *user_data)
+iterate_bundle_foreach(const char *key, const int type, bundle_keyval_t *kv, void *user_data)
{
dlog_print(DLOG_DEBUG, LOG_TAG, "key: %s, type: %d ", key, type);
bundle_keyval_get_basic_val((bundle_keyval_t *)kv, &ptr, &size);
buff = malloc(sizeof(char)* size + 1);
snprintf(buff, size + 1, "%s", ((char*)ptr));
- dlog_print(DLOG_DEBUG, LOG_TAG,
- "Found STR -KEY: %s, VAL: %s, SIZE: %d", key, buff, size);
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Found STR -KEY: %s, VAL: %s, SIZE: %d", key, buff, size);
free(buff);
} else if (type == BUNDLE_TYPE_BYTE) {
bundle_keyval_get_basic_val((bundle_keyval_t *)kv, &ptr, &size);
buff = malloc(sizeof(char)* size + 1);
snprintf(buff, size + 1, "%s", ((char*)ptr));
- dlog_print(DLOG_DEBUG, LOG_TAG,
- "Found STR -KEY: %s, VAL: %s, SIZE: %d", key, buff, size);
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Found STR -KEY: %s, VAL: %s, SIZE: %d", key, buff, size);
free(buff);
} else if (type == BUNDLE_TYPE_STR_ARRAY) {
void ** array;
get_value_request_cb(int request_id, data_control_h provider, const char *key,
void *user_data)
{
- map_data_s* map_data =
- (map_data_s*)g_hash_table_lookup(map_repository_test, key);
+ map_data_s* map_data = (map_data_s*)g_hash_table_lookup(map_repository_test, key);
int ret_value_count = 0;
char **val_arr = NULL;
dlog_print(DLOG_ERROR, LOG_TAG,
"send_map_get_result failed with error: %d", ret);
else
- dlog_print(DLOG_INFO, LOG_TAG,
- "Get value success request_id: %d", request_id);
+ dlog_print(DLOG_INFO, LOG_TAG, "Get value success request_id: %d", request_id);
}
/* Callback for handling the set operation request */
void
set_value_request_cb(int request_id, data_control_h provider, const char *key,
- const char *old_value, const char *new_value,
- void *user_data)
+ const char *old_value, const char *new_value, void *user_data)
{
- map_data_s* map_data =
- (map_data_s*)g_hash_table_lookup(map_repository_test, key);
+ map_data_s* map_data = (map_data_s*)g_hash_table_lookup(map_repository_test, key);
if (map_data != NULL) {
for (int i = 0; i < map_data->arr_size; i++) {
if (strcmp(map_data->str_arr[i], old_value) == 0)
int ret = data_control_provider_send_map_result(request_id);
if (ret != DATA_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "send_map_result failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "send_map_result failed with error: %d", ret);
else
- dlog_print(DLOG_INFO, LOG_TAG,
- "Set value success request_id: %d", request_id);
+ dlog_print(DLOG_INFO, LOG_TAG, "Set value success request_id: %d", request_id);
}
/* Callback for handling the add operation request */
add_value_request_cb(int request_id, data_control_h provider, const char *key,
const char *value, void *user_data)
{
- map_data_s* map_data =
- (map_data_s*)g_hash_table_lookup(map_repository_test, key);
+ map_data_s* map_data = (map_data_s*)g_hash_table_lookup(map_repository_test, key);
if (map_data == NULL) {
map_data = (map_data_s*)(g_malloc(sizeof(*map_data)));
int ret = data_control_provider_send_map_result(request_id);
if (ret != DATA_CONTROL_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "send_map_result failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "send_map_result failed with error: %d", ret);
} else {
dlog_print(DLOG_INFO, LOG_TAG, "Add value success request_id: %d %d %s",
request_id, map_data->arr_size, map_data->str_arr[0]);
remove_value_request_cb(int request_id, data_control_h provider, const char *key,
const char *value, void *user_data)
{
- map_data_s* map_data =
- (map_data_s*)g_hash_table_lookup(map_repository_test, key);
+ map_data_s* map_data = (map_data_s*)g_hash_table_lookup(map_repository_test, key);
if (map_data != NULL) {
int size = map_data->arr_size;
int ret = data_control_provider_send_map_result(request_id);
if (ret != DATA_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "send_map_result failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "send_map_result failed with error: %d", ret);
else
dlog_print(DLOG_INFO, LOG_TAG, "Remove value Success");
}
{
if (provider_ret) {
dlog_print(DLOG_INFO, LOG_TAG,
- "The get operation is successful. Value count: %d ",
- ret_value_count);
+ "The get operation is successful. Value count: %d ", ret_value_count);
for (int i = 0; i < ret_value_count; i++)
dlog_print(DLOG_INFO, LOG_TAG, "(%d) Return value: %s ",
i, ret_value_list[i]);
} else {
dlog_print(DLOG_ERROR, LOG_TAG,
- "The get operation for the request %d failed.
- error message: %s", request_id, error);
+ "The get operation for the request %d failed. error message: %s",
+ request_id, error);
}
}
dlog_print(DLOG_INFO, LOG_TAG, "The set operation is successful");
} else {
dlog_print(DLOG_ERROR, LOG_TAG,
- "The set operation for the request %d failed.
- error message: %s", request_id, error);
+ "The set operation for the request %d failed. error message: %s",
+ request_id, error);
}
}
dlog_print(DLOG_INFO, LOG_TAG, "The add operation is successful");
} else {
dlog_print(DLOG_ERROR, LOG_TAG,
- "The add operation for the request %d failed.
- error message: %s", request_id, error);
+ "The add operation for the request %d failed. error message: %s",
+ request_id, error);
}
}
dlog_print(DLOG_INFO, LOG_TAG, "The remove operation is successful");
} else {
dlog_print(DLOG_ERROR, LOG_TAG,
- "The remove operation for the request %d failed.
- error message: %s", request_id, error);
+ "The remove operation for the request %d failed. error message: %s",
+ request_id, error);
}
}
</pre>
"setting provider id failed with error: %d", ret);
ret = data_control_map_set_data_id(ad->provider_h, data_id);
if (ret != DATA_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "setting data id failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "setting data id failed with error: %d", ret);
/* Set response callbacks */
map_callback.get_cb = map_get_response_cb;
map_callback.remove_cb = map_remove_response_cb;
/* Register response callbacks */
- ret = data_control_map_register_response_cb(ad->provider_h,
- &map_callback, NULL);
+ ret = data_control_map_register_response_cb(ad->provider_h, &map_callback, NULL);
if (ret != DATA_CONTROL_ERROR_NONE) {
dlog_print(DLOG_ERROR, LOG_TAG,
"Registering the callback function failed with error: %d", ret);
/* Callback for handling the select operation request */
void
-select_request_cb(int request_id, data_control_h provider,
- const char **column_list, int column_count, const char *where,
- const char *order, void *user_data)
+select_request_cb(int request_id, data_control_h provider, const char **column_list,
+ int column_count, const char *where, const char *order,
+ void *user_data)
{
sqlite3_stmt* sql_stmt = NULL;
char* command = data_control_provider_create_select_statement(provider,
column_list,
- column_count,
- where,
+ column_count, where,
order);
int ret = sqlite3_prepare_v2(db, command, strlen(command), &sql_stmt, NULL);
if (ret != SQLITE_OK) {
const char *where, void *user_data)
{
char* command = data_control_provider_create_update_statement(provider,
- update_data,
- where);
+ update_data, where);
int ret = sqlite3_exec(db, command, NULL, NULL, NULL);
if (ret != SQLITE_OK) {
data_control_provider_send_error(request_id, sqlite3_errmsg(db));
delete_request_cb(int request_id, data_control_h provider, const char *where,
void *user_data)
{
- dlog_print(DLOG_INFO, LOG_TAG,
- "[delete_request_cb] request_id(%d)", request_id);
+ dlog_print(DLOG_INFO, LOG_TAG, "[delete_request_cb] request_id(%d)", request_id);
char* command = data_control_provider_create_delete_statement(provider, where);
int ret = sqlite3_exec(db, command, NULL, NULL, NULL);
if (ret != SQLITE_OK) {
dlog_print(DLOG_ERROR, LOG_TAG,
"database table creation failed with error: %d", ret);
- sql_command = "CREATE TABLE IF NOT EXISTS Note
- (TITLE VARCHAR(30), CONTENTS TEXT)";
+ sql_command = "CREATE TABLE IF NOT EXISTS Note (TITLE VARCHAR(30), CONTENTS TEXT)";
ret = sqlite3_exec(db, sql_command, NULL, NULL, NULL);
if (ret != SQLITE_OK)
dlog_print(DLOG_ERROR, LOG_TAG,
if (result != SQLITE_OK)
return;
- sql_callback =
- (data_control_provider_sql_cb *)malloc(sizeof(data_control_provider_sql_cb));
+ sql_callback = (data_control_provider_sql_cb *)malloc(sizeof(data_control_provider_sql_cb));
sql_callback->select_cb = select_request_cb;
sql_callback->insert_cb = insert_request_cb;
sql_callback->delete_cb = delete_request_cb;
dlog_print(DLOG_INFO, LOG_TAG, "The insert operation is successful");
} else {
dlog_print(DLOG_ERROR, LOG_TAG,
- "The insert operation for the request %d failed.
- error message: %s", request_id, error);
+ "The insert operation for the request %d failed. error message: %s",
+ request_id, error);
}
}
dlog_print(DLOG_INFO, LOG_TAG, "The select operation is successful");
} else {
dlog_print(DLOG_ERROR, LOG_TAG,
- "The select operation for the request %d failed.
- error message: %s", request_id, error);
+ "The select operation for the request %d failed. error message: %s",
+ request_id, error);
}
while (data_control_sql_step_next(cursor) == DATA_CONTROL_ERROR_NONE) {
/* Callback for the update operation response */
void
-sql_update_response_cb(int request_id, data_control_h provider,
- bool provider_result, const char *error, void *user_data)
+sql_update_response_cb(int request_id, data_control_h provider, bool provider_result,
+ const char *error, void *user_data)
{
if (provider_result) {
dlog_print(DLOG_INFO, LOG_TAG, "The update operation is successful");
} else {
dlog_print(DLOG_ERROR, LOG_TAG,
- "The update operation for the request %d failed.
- error message: %s", request_id, error);
+ "The update operation for the request %d failed. error message: %s",
+ request_id, error);
}
}
/* Callback for the delete operation response */
void
-sql_delete_response_cb(int request_id, data_control_h provider,
- bool provider_result, const char *error, void *user_data)
+sql_delete_response_cb(int request_id, data_control_h provider, bool provider_result,
+ const char *error, void *user_data)
{
if (provider_result) {
dlog_print(DLOG_INFO, LOG_TAG, "The delete operation is successful");
} else {
dlog_print(DLOG_ERROR, LOG_TAG,
- "The delete operation for the request %d failed.
- error message: %s", request_id, error);
+ "The delete operation for the request %d failed. error message: %s",
+ request_id, error);
}
}
</pre>
ret = data_control_sql_set_data_id(ad->provider_h, data_id);
if (ret != DATA_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "setting data id failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "setting data id failed with error: %d", ret);
/* Set response callbacks */
sql_callback.delete_cb = sql_delete_response_cb;
sql_callback.update_cb = sql_update_response_cb;
/* Register response callbacks */
- ret = data_control_sql_register_response_cb(ad->provider_h,
- &sql_callback, NULL);
+ ret = data_control_sql_register_response_cb(ad->provider_h, &sql_callback, NULL);
if (ret != DATA_CONTROL_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG,
"Registering the callback function failed with error: %d", ret);
/* Insert data to the Note table */
ret = data_control_sql_set_data_id(ad->provider_h, "Note");
if (ret != DATA_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "setting data id failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "setting data id failed with error: %d", ret);
b = bundle_create();
bundle_add_str(b, "TITLE", "'test'");
/* Insert data to the Dictionary table */
ret = data_control_sql_set_data_id(ad->provider_h, "Dictionary");
if (ret != DATA_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "setting data id failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "setting data id failed with error: %d", ret);
b = bundle_create();
bundle_add_str(b, "WORD", "'test'");
<pre class="prettyprint">
<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns="http://tizen.org/ns/packages" api-version="2.4" package="org.tizen.test"
- version="1.0.0">
- <ui-application appid="org.tizen.test" exec="text" type="capp" multiple="false"
- taskmanage="true" nodisplay="false">
+<manifest xmlns="http://tizen.org/ns/packages" api-version="2.4" package="org.tizen.test" version="1.0.0">
+ <ui-application appid="org.tizen.test" exec="text" type="capp" multiple="false" taskmanage="true" nodisplay="false">
<icon>rest.png</icon>
<label>rest</label>
<!--For API version 2.4 and higher-->
<background-category value="download"/>
<background-category value="background-network"/>
</ui-application>
- <service-application appid="org.tizen.test-service" exec="test-service" multiple="false"
- type="capp">
+ <service-application appid="org.tizen.test-service" exec="test-service" multiple="false" type="capp">
<background-category value="background-network"/>
<background-category value="location"/>
</service-application>
The <code><background-category></code> element is supported since the API version 2.4. An application with a <code><background-category></code> element declared can fail to be installed on devices with a Tizen version lower than 2.4. In this case, declare the background category as <code><metadata key="http://tizen.org/metadata/background-category/<value>"/></code>.
<pre class="prettyprint">
<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns="http://tizen.org/ns/packages" api-version="2.3"
- package="org.tizen.test" version="1.0.0">
- <ui-application appid="org.tizen.test" exec="text" type="capp" multiple="false"
- taskmanage="true" nodisplay="false">
+<manifest xmlns="http://tizen.org/ns/packages" api-version="2.3" package="org.tizen.test" version="1.0.0">
+ <ui-application appid="org.tizen.test" exec="text" type="capp" multiple="false" taskmanage="true" nodisplay="false">
<icon>rest.png</icon>
<label>rest</label>
<!--For API version lower than 2.4-->
<metadata key="http://tizen.org/metadata/background-category/download"/>
<metadata key="http://tizen.org/metadata/background-category/background-network"/>
</ui-application>
- <service-application appid="org.tizen.test-service" exec="test-service"
- multiple="false" type="capp">
+ <service-application appid="org.tizen.test-service" exec="test-service" multiple="false" type="capp">
<metadata key="http://tizen.org/metadata/background-category/background-network"/>
<metadata key="http://tizen.org/metadata/background-category/location"/>
</service-application>
<pre class="prettyprint">
static void
-battery_event_callback(const char *event_name, bundle *event_data,
- void *user_data)
+battery_event_callback(const char *event_name, bundle *event_data, void *user_data)
{
/* event_name is the event name */
dlog_print(DLOG_INFO, LOG_TAG, "event_name is [%s]", event_name);
/* event_data is the event data, its type is bundle */
char *battery_level_status = NULL;
- battery_level_status = bundle_get_val(event_data,
- EVENT_KEY_BATTERY_LEVEL_STATUS);
+ battery_level_status = bundle_get_val(event_data, EVENT_KEY_BATTERY_LEVEL_STATUS);
}
event_handler_h handler;
/* Register the event handler */
int ret = event_add_event_handler(SYSTEM_EVENT_BATTERY_LEVEL_STATUS,
- (event_cb)battery_event_cb,
- user_data, &handler);
+ (event_cb)battery_event_cb, user_data, &handler);
if (ret != EVENT_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "err: [%d]", ret);
</pre>
ret = app_control_get_uri(app_control, &uri);
if (ret == APP_CONTROL_ERROR_NONE && uri) {
if (strncmp(uri, event_uri, strlen(event_uri) + 1) == 0) {
- ret = app_control_get_extra_data(app_control, "battery_charger_status",
- &event_value);
+ ret = app_control_get_extra_data(app_control, "battery_charger_status", &event_value);
if (ret == APP_CONTROL_ERROR_NONE && event_value)
free(event_value);
/* Use event_add_event_handler() for further event subscriptions here */
bundle_add_str(b, "command", "begin");
bundle_add_str(b, "data", "dummy");
- ret = message_port_send_message_with_local_port(remote_app_id, remote_port,
- b, local_port_id);
+ ret = message_port_send_message_with_local_port(remote_app_id, remote_port, b, local_port_id);
if (ret != MESSAGE_PORT_ERROR_NONE)
- dlog_print(DLOG_ERROR, TAG,
- "message_port_send_message_with_local_port error: %d",
- ret);
+ dlog_print(DLOG_ERROR, TAG, "message_port_send_message_with_local_port error: %d", ret);
else
dlog_print(DLOG_INFO, TAG, "Send message done");
bundle_free(b);
install-location="internal-only">
<label>Message</label>
<description>Message Application</description>
- <service-application appid="org.tizen.message"
- exec="/usr/apps/org.tizen.message/bin/message" nodisplay="true"
- multiple="false" type="capp" taskmanage="false">
+ <service-application appid="org.tizen.message" exec="/usr/apps/org.tizen.message/bin/message"
+ nodisplay="true" multiple="false" type="capp" taskmanage="false">
<icon>org.tizen.message.png</icon>
<label>Message</label>
</service-application>
bool support;
int ret;
-ret =
- system_info_get_platform_bool("http://tizen.org/feature/screen.always_on.high_color",
- &support);
+ret = system_info_get_platform_bool("http://tizen.org/feature/screen.always_on.high_color", &support);
</pre>
</li>
app_create(void *user_date)
{
/* Register a callback for each system event */
- if (watch_app_add_event_handler(&handler, APP_EVENT_LANGUAGE_CHANGED, lang_changed,
- NULL) != APP_ERROR_NONE)
+ if (watch_app_add_event_handler(&handler, APP_EVENT_LANGUAGE_CHANGED, lang_changed, NULL) != APP_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() failed");
- if (watch_app_add_event_handler(&handler, APP_EVENT_REGION_FORMAT_CHANGED,
- region_changed, NULL) != APP_ERROR_NONE)
+ if (watch_app_add_event_handler(&handler, APP_EVENT_REGION_FORMAT_CHANGED, region_changed, NULL) != APP_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() failed");
- if (watch_app_add_event_handler(&handler, APP_EVENT_LOW_BATTERY, low_battery, NULL)
- != APP_ERROR_NONE)
+ if (watch_app_add_event_handler(&handler, APP_EVENT_LOW_BATTERY, low_battery, NULL) != APP_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() failed");
- if (watch_app_add_event_handler(&handler, APP_EVENT_LOW_MEMORY, low_ memory, NULL)
- != APP_ERROR_NONE)
+ if (watch_app_add_event_handler(&handler, APP_EVENT_LOW_MEMORY, low_ memory, NULL) != APP_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() failed");
return true;
<p>At the end of the <code>widget_app_create()</code> function, remember to create a widget instance class and return a handle for it, so that the handle can be used for making widget instances.</p>
<pre class="prettyprint">
/* Register the callback functions for system events */
- widget_app_add_event_handler(&handlers[APP_EVENT_LOW_BATTERY],
- APP_EVENT_LOW_BATTERY,
+ widget_app_add_event_handler(&handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY,
widget_app_low_battery, NULL);
widget_app_add_event_handler(&handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY,
widget_app_low_memory, NULL);
- widget_app_add_event_handler(&handlers[APP_EVENT_LANGUAGE_CHANGED],
- APP_EVENT_LANGUAGE_CHANGED,
+ widget_app_add_event_handler(&handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED,
widget_app_lang_changed, NULL);
widget_app_add_event_handler(&handlers[APP_EVENT_REGION_FORMAT_CHANGED],
- APP_EVENT_REGION_FORMAT_CHANGED,
- widget_app_region_changed, NULL);
+ APP_EVENT_REGION_FORMAT_CHANGED, widget_app_region_changed, NULL);
return widget_app_class_create(obj_callback, user_data);
}
<p>Initialize resources for this widget instance and <a href="#get_window">draw the UI</a>. If bundle content is not <code>NULL</code>, restore the previous status.</p>
<pre class="prettyprint">
int
-widget_instance_create(widget_context_h context, bundle *content, int w, int h,
- void *user_data)
+widget_instance_create(widget_context_h context, bundle *content, int w, int h, void *user_data)
{
- widget_instance_data_s *wid =
- (widget_instance_data_s*)malloc(sizeof(widget_instance_data_s));
+ widget_instance_data_s *wid = (widget_instance_data_s*)malloc(sizeof(widget_instance_data_s));
int ret;
if (content != NULL)
<p>Take the necessary actions for the widget update. If the <code>force</code> parameter is <code>true</code>, the widget can be updated even in the pause state.</p>
<pre class="prettyprint">
int
-widget_instance_update(widget_context_h context, bundle *content, int force,
- void *user_data)
+widget_instance_update(widget_context_h context, bundle *content, int force, void *user_data)
{
return WIDGET_ERROR_NONE;
}
typedef struct widget_instance_data widget_instance_data_s;
static int
-widget_instance_create(widget_context_h context, bundle *content, int w, int h,
- void *user_data)
+widget_instance_create(widget_context_h context, bundle *content, int w, int h, void *user_data)
{
- widget_instance_data_s *wid =
- (widget_instance_data_s*)malloc(sizeof(widget_instance_data_s));
+ widget_instance_data_s *wid = (widget_instance_data_s*)malloc(sizeof(widget_instance_data_s));
int ret;
if (content != NULL)
typedef struct _user_defined_s user_defined_s;
int
-widget_instance_create(widget_context_h context, bundle *content, int w, int h,
- void *user_data)
+widget_instance_create(widget_context_h context, bundle *content, int w, int h, void *user_data)
{
user_defined_s *uds = (user_defined_s*)malloc(sizeof(user_defined_s));
uds->val1 = 0;
}
int
-widget_instance_update(widget_context_h context, bundle *content, int force,
- void *user_data)
+widget_instance_update(widget_context_h context, bundle *content, int force, void *user_data)
{
user_defined_s *uds = NULL;
widget_app_context_get_tag(context, (void**)&uds);
<li>Get the widget instance ID:
<pre class="prettyprint">
int
-widget_instance_update(widget_context_h context, bundle *content, int force,
- void *user_data)
+widget_instance_update(widget_context_h context, bundle *content, int force, void *user_data)
{
const char *inst_id = NULL;
inst_id = widget_app_get_id(context);
}
/* If the Bluetooth adapter is not enabled */
if (adapter_state == BT_ADAPTER_DISABLED)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "Bluetooth adapter is not enabled. You should enable Bluetooth!!");
+ dlog_print(DLOG_ERROR, LOG_TAG, "Bluetooth adapter is not enabled. You should enable Bluetooth!!");
</pre>
</li>
adapter_state_changed_cb(int result, bt_adapter_state_e adapter_state, void* user_data)
{
if (result != BT_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "[adapter_state_changed_cb] failed! result=%d",
- result);
+ dlog_print(DLOG_ERROR, LOG_TAG, "[adapter_state_changed_cb] failed! result=%d", result);
return;
}
if (adapter_state == BT_ADAPTER_ENABLED) {
- dlog_print(DLOG_INFO, LOG_TAG,
- "[adapter_state_changed_cb] Bluetooth is enabled!");
+ dlog_print(DLOG_INFO, LOG_TAG, "[adapter_state_changed_cb] Bluetooth is enabled!");
/* Get information about Bluetooth adapter */
char *local_address = NULL;
bt_adapter_get_address(&local_address);
- dlog_print(DLOG_INFO, LOG_TAG,
- "[adapter_state_changed_cb] Adapter address: %s.",
- local_address);
+ dlog_print(DLOG_INFO, LOG_TAG, "[adapter_state_changed_cb] Adapter address: %s.", local_address);
if (local_address)
free(local_address);
char *local_name;
bt_adapter_get_name(&local_name);
- dlog_print(DLOG_INFO, LOG_TAG,
- "[adapter_state_changed_cb] Adapter name: %s.",
- local_name);
+ dlog_print(DLOG_INFO, LOG_TAG, "[adapter_state_changed_cb] Adapter name: %s.", local_name);
if (local_name)
free(local_name);
/* Visibility mode of the Bluetooth device */
break;
}
} else {
- dlog_print(DLOG_INFO, LOG_TAG,
- "[adapter_state_changed_cb] Bluetooth is disabled!");
+ dlog_print(DLOG_INFO, LOG_TAG, "[adapter_state_changed_cb] Bluetooth is disabled!");
/*
When you try to get device information
by invoking bt_adapter_get_name(), bt_adapter_get_address(),
<pre class="prettyprint">
#include <glib.h> /* For GList */
void
-adapter_device_discovery_state_changed_cb(int result,
- bt_adapter_device_discovery_state_e
- discovery_state,
- bt_adapter_device_discovery_info_s
- *discovery_info,
- void* user_data)
+adapter_device_discovery_state_changed_cb(int result, bt_adapter_device_discovery_state_e discovery_state,
+ bt_adapter_device_discovery_info_s *discovery_info, void* user_data)
{
if (result != BT_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "[adapter_device_discovery_state_changed_cb] failed!
- result(%d).", result);
+ dlog_print(DLOG_ERROR, LOG_TAG, "[adapter_device_discovery_state_changed_cb] failed! result(%d).", result);
return;
}
case BT_ADAPTER_DEVICE_DISCOVERY_FOUND:
dlog_print(DLOG_INFO, LOG_TAG, "BT_ADAPTER_DEVICE_DISCOVERY_FOUND");
if (discovery_info != NULL) {
- dlog_print(DLOG_INFO, LOG_TAG,
- "Device Address: %s",
- discovery_info->remote_address);
- dlog_print(DLOG_INFO, LOG_TAG,
- "Device Name is: %s",
- discovery_info->remote_name);
- bt_adapter_device_discovery_info_s * new_device_info =
- malloc(sizeof(bt_adapter_device_discovery_info_s));
+ dlog_print(DLOG_INFO, LOG_TAG, "Device Address: %s", discovery_info->remote_address);
+ dlog_print(DLOG_INFO, LOG_TAG, "Device Name is: %s", discovery_info->remote_name);
+ bt_adapter_device_discovery_info_s * new_device_info = malloc(sizeof(bt_adapter_device_discovery_info_s));
if (new_device_info != NULL) {
- memcpy(new_device_info, discovery_info,
- sizeof(bt_adapter_device_discovery_info_s));
- new_device_info->remote_address =
- strdup(discovery_info->remote_address);
- new_device_info->remote_name =
- strdup(discovery_info->remote_name);
- *searched_device_list = g_list_append(*searched_device_list,
- (gpointer)new_device_info);
+ memcpy(new_device_info, discovery_info, sizeof(bt_adapter_device_discovery_info_s));
+ new_device_info->remote_address = strdup(discovery_info->remote_address);
+ new_device_info->remote_name = strdup(discovery_info->remote_name);
+ *searched_device_list = g_list_append(*searched_device_list, (gpointer)new_device_info);
}
}
break;
}
GList *devices_list = NULL;
-ret =
- bt_adapter_set_device_discovery_state_changed_cb(adapter_device_discovery_state_changed_cb,
- (void*)&devices_list);
+ret = bt_adapter_set_device_discovery_state_changed_cb(adapter_device_discovery_state_changed_cb,
+ (void*)&devices_list);
if (ret != BT_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "[bt_adapter_set_device_discovery_state_changed_cb] failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_set_device_discovery_state_changed_cb] failed.");
</pre>
</li>
<li>Start the discovery process:
return;
} else {
- dlog_print(DLOG_INFO, LOG_TAG,
- "[bt_device_create_bond] succeeded.
- device_bond_created_cb callback will be called.");
+ dlog_print(DLOG_INFO, LOG_TAG, "[bt_device_create_bond] succeeded. device_bond_created_cb callback will be called.");
}
</pre>
device_bond_created_cb(int result, bt_device_info_s *device_info, void *user_data)
{
if (result != BT_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "[bt_device_bond_created_cb] failed. result(%d).",
- result);
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_device_bond_created_cb] failed. result(%d).", result);
return;
}
- if (device_info != NULL && !strcmp(device_info->remote_address,
- remote_server_address)) {
- dlog_print(DLOG_INFO, LOG_TAG,
- "Callback: A bond with chat_server is created.");
- dlog_print(DLOG_INFO, LOG_TAG,
- "Callback: The number of service - %d.",
- device_info->service_count);
+ if (device_info != NULL && !strcmp(device_info->remote_address, remote_server_address)) {
+ dlog_print(DLOG_INFO, LOG_TAG, "Callback: A bond with chat_server is created.");
+ dlog_print(DLOG_INFO, LOG_TAG, "Callback: The number of service - %d.", device_info->service_count);
int i = 0;
- dlog_print(DLOG_INFO, LOG_TAG, "Callback: is_bonded - %d.",
- device_info->is_bonded);
- dlog_print(DLOG_INFO, LOG_TAG, "Callback: is_connected - %d.",
- device_info->is_connected);
+ dlog_print(DLOG_INFO, LOG_TAG, "Callback: is_bonded - %d.", device_info->is_bonded);
+ dlog_print(DLOG_INFO, LOG_TAG, "Callback: is_connected - %d.", device_info->is_connected);
} else {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "Callback: A bond with another device is created.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "Callback: A bond with another device is created.");
}
}
if (device_info == NULL)
return true;
if (!strcmp(device_info->remote_name, (char*)user_data)) {
- dlog_print(DLOG_INFO, LOG_TAG,
- "The server device is found in bonded device list. address(%s)",
+ dlog_print(DLOG_INFO, LOG_TAG, "The server device is found in bonded device list. address(%s)",
device_info->remote_address);
bt_server_address = strdup(device_info->remote_address);
/* If you want to stop iterating, you can return "false" */
}
/* Get information about bonded device */
int count_of_bonded_device = 1;
- dlog_print(DLOG_INFO, LOG_TAG, "Get information about the bonded device(%d)",
- count_of_bonded_device);
- dlog_print(DLOG_INFO, LOG_TAG, "remote address = %s.",
- device_info->remote_address);
+ dlog_print(DLOG_INFO, LOG_TAG, "Get information about the bonded device(%d)", count_of_bonded_device);
+ dlog_print(DLOG_INFO, LOG_TAG, "remote address = %s.", device_info->remote_address);
dlog_print(DLOG_INFO, LOG_TAG, "remote name = %s.", device_info->remote_name);
dlog_print(DLOG_INFO, LOG_TAG, "service count = %d.", device_info->service_count);
dlog_print(DLOG_INFO, LOG_TAG, "bonded?? %d.", device_info->is_bonded);
dlog_print(DLOG_INFO, LOG_TAG, "connected?? %d.", device_info->is_connected);
dlog_print(DLOG_INFO, LOG_TAG, "authorized?? %d.", device_info->is_authorized);
- dlog_print(DLOG_INFO, LOG_TAG, "major_device_class %d.",
- device_info->bt_class.major_device_class);
- dlog_print(DLOG_INFO, LOG_TAG, "minor_device_class %d.",
- device_info->bt_class.minor_device_class);
- dlog_print(DLOG_INFO, LOG_TAG, "major_service_class_mask %d.",
- device_info->bt_class.major_service_class_mask);
+ dlog_print(DLOG_INFO, LOG_TAG, "major_device_class %d.", device_info->bt_class.major_device_class);
+ dlog_print(DLOG_INFO, LOG_TAG, "minor_device_class %d.", device_info->bt_class.minor_device_class);
+ dlog_print(DLOG_INFO, LOG_TAG, "major_service_class_mask %d.", device_info->bt_class.major_service_class_mask);
count_of_bonded_device++;
/* Keep iterating */
else if (mode == BT_ADAPTER_VISIBILITY_MODE_GENERAL_DISCOVERABLE)
dlog_print(DLOG_INFO, LOG_TAG, "The device is discoverable. No time limit.");
else
- dlog_print(DLOG_INFO, LOG_TAG,
- "The device is discoverable for a set period of time.");
+ dlog_print(DLOG_INFO, LOG_TAG, "The device is discoverable for a set period of time.");
</pre>
</li>
<li>
<p>To get a notification when the visibility mode changes, define and register a visibility mode change callback:</p>
<pre class="prettyprint">
void
-adapter_visibility_mode_changed_cb(int result,
- bt_adapter_visibility_mode_e visibility_mode,
- void* user_data)
+adapter_visibility_mode_changed_cb(int result, bt_adapter_visibility_mode_e visibility_mode, void* user_data)
{
if (result != BT_ERROR_NONE) {
/* Error handling */
return;
}
if (visibility_mode == BT_ADAPTER_VISIBILITY_MODE_NON_DISCOVERABLE)
- dlog_print(DLOG_INFO, LOG_TAG,
- "[visibility_mode_changed_cb] None discoverable mode!");
+ dlog_print(DLOG_INFO, LOG_TAG, "[visibility_mode_changed_cb] None discoverable mode!");
else if (visibility_mode == BT_ADAPTER_VISIBILITY_MODE_GENERAL_DISCOVERABLE)
- dlog_print(DLOG_INFO, LOG_TAG,
- "[visibility_mode_changed_cb] General discoverable mode!");
+ dlog_print(DLOG_INFO, LOG_TAG, "[visibility_mode_changed_cb] General discoverable mode!");
else
- dlog_print(DLOG_INFO, LOG_TAG,
- "[visibility_mode_changed_cb] Limited discoverable mode!");
+ dlog_print(DLOG_INFO, LOG_TAG, "[visibility_mode_changed_cb] Limited discoverable mode!");
}
-ret = bt_adapter_set_visibility_mode_changed_cb(adapter_visibility_mode_changed_cb,
- NULL);
+ret = bt_adapter_set_visibility_mode_changed_cb(adapter_visibility_mode_changed_cb, NULL);
if (ret != BT_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "[bt_adapter_set_visibility_mode_changed_cb] failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_set_visibility_mode_changed_cb] failed.");
</pre>
</li>
</ol>
return;
} else {
- dlog_print(DLOG_INFO, LOG_TAG,
- "[bt_socket_listen_and_accept_rfcomm] Succeeded.
- bt_socket_connection_state_changed_cb will be called.");
+ dlog_print(DLOG_INFO, LOG_TAG, "[bt_socket_listen_and_accept_rfcomm] Succeeded. bt_socket_connection_state_changed_cb will be called.");
/* Waiting for incoming connections */
}
</pre>
<p>The callback in invoked whenever the connection state changes (for example, when a client connects to your service). In its parameters, the callback provides the result of the connection state change, the new connection state, and a pointer to the <code>bt_socket_connection_s</code> structure (in <a href="../../../../org.tizen.native.mobile.apireference/structbt__socket__connection__s.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/structbt__socket__connection__s.html">wearable</a> applications) that specifies the details of the connection, including the client device MAC address.</p>
<pre class="prettyprint">
void
-socket_connection_state_changed(int result,
- bt_socket_connection_state_e connection_state,
- bt_socket_connection_s *connection,
- void *user_data)
+socket_connection_state_changed(int result, bt_socket_connection_state_e connection_state,
+ bt_socket_connection_s *connection, void *user_data)
{
if (result != BT_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "[socket_connection_state_changed_cb] failed.
- result =%d.", result);
+ dlog_print(DLOG_ERROR, LOG_TAG, "[socket_connection_state_changed_cb] failed. result =%d.", result);
return;
}
if (connection_state == BT_SOCKET_CONNECTED) {
dlog_print(DLOG_INFO, LOG_TAG, "Callback: Connected.");
if (connection != NULL) {
- dlog_print(DLOG_INFO, LOG_TAG, "Callback: Socket of connection - %d.",
- connection->socket_fd);
- dlog_print(DLOG_INFO, LOG_TAG, "Callback: Role of connection - %d.",
- connection->local_role);
- dlog_print(DLOG_INFO, LOG_TAG,
- "Callback: Address of connection - %s.",
- connection->remote_address);
+ dlog_print(DLOG_INFO, LOG_TAG, "Callback: Socket of connection - %d.", connection->socket_fd);
+ dlog_print(DLOG_INFO, LOG_TAG, "Callback: Role of connection - %d.", connection->local_role);
+ dlog_print(DLOG_INFO, LOG_TAG, "Callback: Address of connection - %s.", connection->remote_address);
/* socket_fd is used for sending data and disconnecting a device */
server_socket_fd = connection->socket_fd;
} else {
} else {
dlog_print(DLOG_INFO, LOG_TAG, "Callback: Disconnected.");
if (connection != NULL) {
- dlog_print(DLOG_INFO, LOG_TAG,
- "Callback: Socket of disconnection - %d.",
- connection->socket_fd);
- dlog_print(DLOG_INFO, LOG_TAG,
- "Callback: Address of connection - %s.",
- connection->remote_address);
+ dlog_print(DLOG_INFO, LOG_TAG, "Callback: Socket of disconnection - %d.", connection->socket_fd);
+ dlog_print(DLOG_INFO, LOG_TAG, "Callback: Address of connection - %s.", connection->remote_address);
} else {
dlog_print(DLOG_INFO, LOG_TAG, "Callback: No connection data");
}
}
bt_error_e ret;
-ret = bt_socket_set_connection_state_changed_cb(socket_connection_state_changed,
- NULL);
+ret = bt_socket_set_connection_state_changed_cb(socket_connection_state_changed, NULL);
if (ret != BT_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "[bt_socket_set_connection_state_changed_cb] failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_socket_set_connection_state_changed_cb] failed.");
return;
}
<li>Define and register the socket connection state change callback using the <code>bt_socket_set_connection_state_changed_cb()</code> function.
<p>The callback is invoked whenever the connection state changes (for example, when you connect to the server device). </p>
<pre class="prettyprint">
-ret = bt_socket_set_connection_state_changed_cb(socket_connection_state_changed,
- NULL);
+ret = bt_socket_set_connection_state_changed_cb(socket_connection_state_changed, NULL);
if (ret != BT_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "[bt_socket_set_connection_state_changed_cb] failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_socket_set_connection_state_changed_cb] failed.");
return;
}
return;
} else {
- dlog_print(DLOG_INFO, LOG_TAG,
- "[bt_socket_connect_rfcomm] Succeeded.
- bt_socket_connection_state_changed_cb will be called.");
+ dlog_print(DLOG_INFO, LOG_TAG, "[bt_socket_connect_rfcomm] Succeeded. bt_socket_connection_state_changed_cb will be called.");
}
</pre>
</li>
if (ret != BT_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "[bt_socket_destroy_rfcomm] failed.");
else
- dlog_print(DLOG_INFO, LOG_TAG,
- "[bt_socket_destroy_rfcomm] succeeded. socket_fd = %d",
- server_socket_fd);
+ dlog_print(DLOG_INFO, LOG_TAG, "[bt_socket_destroy_rfcomm] succeeded. socket_fd = %d", server_socket_fd);
</pre></li>
<li>If your device is a Bluetooth client, disconnect from the server with the <code>bt_socket_disconnect_rfcomm()</code> function:
/* You can get "server_socket_fd" from bt_socket_connection_state_changed_cb() */
ret = bt_socket_disconnect_rfcomm(server_socket_fd);
if (ret != BT_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "[bt_socket_destroy_rfcomm] failed. server_socket_fd = %d.",
- server_socket_fd);
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_socket_destroy_rfcomm] failed. server_socket_fd = %d.", server_socket_fd);
else
- dlog_print(DLOG_INFO, LOG_TAG,
- "[bt_socket_destroy_rfcomm] succeeded. server_socket_fd = %d.",
- server_socket_fd);
+ dlog_print(DLOG_INFO, LOG_TAG, "[bt_socket_destroy_rfcomm] succeeded. server_socket_fd = %d.", server_socket_fd);
</pre></li></ul>
<h2 id="pre_gatt" name="pre_gatt">Handling GATT Operation Preconditions</h2>
dlog_print(DLOG_INFO, LOG_TAG, "LE disconnected");
}
-ret = bt_gatt_set_connection_state_changed_cb(__bt_gatt_connection_state_changed_cb,
- NULL);
+ret = bt_gatt_set_connection_state_changed_cb(__bt_gatt_connection_state_changed_cb, NULL);
</pre></li>
<li>Create a client to connect to a remote service device:
<pre class="prettyprint">
int ret = 0;
-ret =
- bt_gatt_client_foreach_services(client, __bt_gatt_client_foreach_svc_cb, NULL);
+ret = bt_gatt_client_foreach_services(client, __bt_gatt_client_foreach_svc_cb, NULL);
if (ret != BT_ERROR_NONE)
dlog_print(DLOG_INFO, LOG_TAG, "failed");
<li>Use the <code>bt_gatt_client_foreach_svc_cb()</code> callback to initiate the service characteristics discovery:
<pre class="prettyprint">
bool
-__bt_gatt_client_foreach_svc_cb(int total, int index, bt_gatt_h svc_handle,
- void *data)
+__bt_gatt_client_foreach_svc_cb(int total, int index, bt_gatt_h svc_handle, void *data)
{
int ret;
char *uuid = NULL;
g_free(uuid);
ret = bt_gatt_service_foreach_characteristics(svc_handle,
- __bt_gatt_client_foreach_chr_cb,
- NULL);
+ __bt_gatt_client_foreach_chr_cb, NULL);
if (ret != BT_ERROR_NONE)
- dlog_print(DLOG_INFO, LOG_TAG,
- "bt_gatt_service_foreach_characteristics failed: %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_foreach_characteristics failed: %d", ret);
return true;
}
<li>Use the <code>bt_gatt_client_foreach_chr_cb()</code> callback to discover the characteristic descriptors:
<pre class="prettyprint">
bool
-__bt_gatt_client_foreach_chr_cb(int total, int index, bt_gatt_h chr_handle,
- void *data)
+__bt_gatt_client_foreach_chr_cb(int total, int index, bt_gatt_h chr_handle, void *data)
{
int ret;
char *uuid = NULL;
g_free(uuid);
- ret =
- bt_gatt_characteristic_foreach_descriptors(chr_handle,
- __bt_gatt_client_foreach_desc_cb,
- NULL);
+ ret = bt_gatt_characteristic_foreach_descriptors(chr_handle,
+ __bt_gatt_client_foreach_desc_cb, NULL);
if (ret != BT_ERROR_NONE)
- dlog_print(DLOG_INFO, LOG_TAG,
- "bt_gatt_characteristic_foreach_descriptors failed: %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_foreach_descriptors failed: %d", ret);
return true;
}
<li>Use the <code>bt_gatt_client_foreach_desc_cb()</code> callback to get the descriptor data:
<pre class="prettyprint">
bool
-__bt_gatt_client_foreach_desc_cb(int total, int index, bt_gatt_h desc_handle,
- void *data)
+__bt_gatt_client_foreach_desc_cb(int total, int index, bt_gatt_h desc_handle, void *data)
{
char *uuid = NULL;
ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &chr);
if (ret != BT_ERROR_NONE) {
- dlog_print(DLOG_INFO, LOG_TAG,
- "bt_gatt_service_get_characteristic failed: %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_characteristic failed: %d", ret);
return;
}
ret = bt_gatt_characteristic_get_descriptor(chr, desc_uuid, &desc);
if (ret != BT_ERROR_NONE) {
- dlog_print(DLOG_INFO, LOG_TAG,
- "bt_gatt_characteristic_get_descriptor failed: %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_get_descriptor failed: %d", ret);
return;
}
ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &chr);
if (ret != BT_ERROR_NONE) {
- dlog_print(DLOG_INFO, LOG_TAG,
- "bt_gatt_service_get_characteristic failed: %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_characteristic failed: %d", ret);
return;
}
ret = bt_gatt_characteristic_get_descriptor(chr, desc_uuid, &desc);
if (ret != BT_ERROR_NONE) {
- dlog_print(DLOG_INFO, LOG_TAG,
- "bt_gatt_characteristic_get_descriptor failed: %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_get_descriptor failed: %d", ret);
return;
}
return;
}
-ret =
- bt_gatt_client_set_characteristic_value_changed_cb(chr,
- __bt_gatt_client_value_changed_cb,
- NULL);
+ret = bt_gatt_client_set_characteristic_value_changed_cb(chr, __bt_gatt_client_value_changed_cb, NULL);
if (ret != BT_ERROR_NONE) {
- dlog_print(DLOG_INFO, LOG_TAG,
- "bt_gatt_client_set_characteristic_value_changed_cb failed: %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_set_characteristic_value_changed_cb failed: %d", ret);
return;
}
ret = bt_gatt_client_unset_characteristic_value_changed_cb(chr);
if (ret != BT_ERROR_NONE) {
- dlog_print(DLOG_INFO, LOG_TAG,
- "bt_gatt_client_unset_characteristic_value_changed_cb failed: %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_unset_characteristic_value_changed_cb failed: %d", ret);
return;
}
ret = bt_gatt_characteristic_get_descriptor(chr, desc_uuid, &desc);
if (ret != BT_ERROR_NONE)
- dlog_print(DLOG_INFO, LOG_TAG,
- "bt_gatt_characteristic_get_descriptor failed: %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_get_descriptor failed: %d", ret);
</pre></li>
<li>Get the properties using the characteristic handle:
ret = bt_gatt_characteristic_get_properties(chr, &properties);
if (ret != BT_ERROR_NONE)
- dlog_print(DLOG_INFO, LOG_TAG,
- "bt_gatt_characteristic_get_properties failed: %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_get_properties failed: %d", ret);
</pre></li>
<li>Get the service handle to which the specified characteristic belongs:
ret = bt_gatt_descriptor_get_characteristic(dsc, &chr);
if (ret != BT_ERROR_NONE)
- dlog_print(DLOG_INFO, LOG_TAG,
- "bt_gatt_descriptor_get_characteristic failed: %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_descriptor_get_characteristic failed: %d", ret);
</pre></li>
<li>Get the client handle to which the specified service belongs:
ret = bt_gatt_characteristic_get_write_type(chr, &write_type);
if (ret != BT_ERROR_NONE)
- dlog_print(DLOG_INFO, LOG_TAG,
- "bt_gatt_characteristic_get_write_type failed: %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_get_write_type failed: %d", ret);
</pre></li>
<li>Get an included service's handle with a specific UUID:
ret = bt_gatt_service_get_included_service(svc, uuid, &included_svc);
if (ret != BT_ERROR_NONE)
- dlog_print(DLOG_INFO, LOG_TAG,
- "bt_gatt_service_get_included_service failed: %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_included_service failed: %d", ret);
</pre></li>
</ul>
if (ret == BT_ERROR_NONE)
dlog_print(DLOG_INFO, LOG_TAG, "Success");
- ret = bt_gatt_characteristic_set_write_type(control_point,
- BT_GATT_WRITE_TYPE_WRITE);
+ ret = bt_gatt_characteristic_set_write_type(control_point, BT_GATT_WRITE_TYPE_WRITE);
if (ret == BT_ERROR_NONE)
dlog_print(DLOG_INFO, LOG_TAG, "Success");
storage_get_directory(0, STORAGE_DIRECTORY_DOWNLOADS, &directory);
void
-connection_requested_cb_for_opp_server(const char *remote_address,
- void *user_data)
+connection_requested_cb_for_opp_server(const char *remote_address, void *user_data)
{
dlog_print(DLOG_INFO, LOG_TAG, "remote_address: %s", remote_address);
}
-ret =
- bt_opp_server_initialize_by_connection_request(directory,
- connection_requested_cb_for_opp_server,
- NULL);
+ret = bt_opp_server_initialize_by_connection_request(directory, connection_requested_cb_for_opp_server, NULL);
if (ret != BT_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "[bt_opp_server_initialize_by_connection_request] failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_opp_server_initialize_by_connection_request] failed.");
free(directory);
</pre>
</li>
const char file_name [18] = "tempfile";
void
-bt_opp_server_transfer_progress_cb_for_opp(const char *file, long long size,
- int percent, void *user_data)
+bt_opp_server_transfer_progress_cb_for_opp(const char *file, long long size, int percent, void *user_data)
{
dlog_print(DLOG_INFO, LOG_TAG, "file: %s", file);
dlog_print(DLOG_INFO, LOG_TAG, "size: %ld", size);
}
void
-bt_opp_server_transfer_finished_cb_for_opp(int result, const char *file,
- long long size, void *user_data)
+bt_opp_server_transfer_finished_cb_for_opp(int result, const char *file, long long size, void *user_data)
{
dlog_print(DLOG_INFO, LOG_TAG, "result: %d", result);
dlog_print(DLOG_INFO, LOG_TAG, "file: %s", file);
if (pkt_type == BT_ADAPTER_LE_PACKET_SCAN_RESPONSE && info->scan_data == NULL)
break;
- if (bt_adapter_le_get_scan_result_service_uuids(info, pkt_type, &uuids,
- &count) == BT_ERROR_NONE) {
+ if (bt_adapter_le_get_scan_result_service_uuids(info, pkt_type, &uuids, &count) == BT_ERROR_NONE) {
int i;
for (i = 0; i < count; i++) {
dlog_print(DLOG_INFO, LOG_TAG, "UUID[%d] = %s", i + 1, uuids[i]);
}
g_free(uuids);
}
- if (bt_adapter_le_get_scan_result_device_name(info, pkt_type, &device_name)
- == BT_ERROR_NONE) {
+ if (bt_adapter_le_get_scan_result_device_name(info, pkt_type, &device_name) == BT_ERROR_NONE) {
dlog_print(DLOG_INFO, LOG_TAG, "Device name = %s", device_name);
g_free(device_name);
}
- if (bt_adapter_le_get_scan_result_tx_power_level(info, pkt_type,
- &tx_power_level)
- == BT_ERROR_NONE)
+ if (bt_adapter_le_get_scan_result_tx_power_level(info, pkt_type, &tx_power_level) == BT_ERROR_NONE)
dlog_print(DLOG_INFO, LOG_TAG, "TX Power level = %d", tx_power_level);
- if (bt_adapter_le_get_scan_result_service_solicitation_uuids(info, pkt_type,
- &uuids, &count)
- == BT_ERROR_NONE) {
+ if (bt_adapter_le_get_scan_result_service_solicitation_uuids(info, pkt_type, &uuids, &count) == BT_ERROR_NONE) {
int i;
for (i = 0; i < count; i++) {
- dlog_print(DLOG_INFO, LOG_TAG,
- "Solicitation UUID[%d] = %s", i + 1, uuids[i]);
+ dlog_print(DLOG_INFO, LOG_TAG, "Solicitation UUID[%d] = %s", i + 1, uuids[i]);
g_free(uuids[i]);
}
g_free(uuids);
}
- if (bt_adapter_le_get_scan_result_service_data_list(info, pkt_type,
- &data_list, &count)
- == BT_ERROR_NONE) {
+ if (bt_adapter_le_get_scan_result_service_data_list(info, pkt_type, &data_list, &count) == BT_ERROR_NONE) {
int i;
for (i = 0; i < count; i++) {
- dlog_print(DLOG_INFO, LOG_TAG,
- "Service Data[%d] = [0x%2.2X%2.2X:0x%.2X...]", i + 1,
- data_list[i].service_uuid[0], data_list[i].service_uuid[1],
- data_list[i].service_data[0]);
+ dlog_print(DLOG_INFO, LOG_TAG, "Service Data[%d] = [0x%2.2X%2.2X:0x%.2X...]", i + 1,
+ data_list[i].service_uuid[0], data_list[i].service_uuid[1], data_list[i].service_data[0]);
}
bt_adapter_le_free_service_data_list(data_list, count);
}
- if (bt_adapter_le_get_scan_result_appearance(info, pkt_type, &appearance)
- == BT_ERROR_NONE)
+ if (bt_adapter_le_get_scan_result_appearance(info, pkt_type, &appearance) == BT_ERROR_NONE)
dlog_print(DLOG_INFO, LOG_TAG, "Appearance = %d", appearance);
- if (bt_adapter_le_get_scan_result_manufacturer_data(info, pkt_type,
- &manufacturer_id,
- &manufacturer_data,
- &manufacturer_data_len)
- == BT_ERROR_NONE) {
- dlog_print(DLOG_INFO, LOG_TAG,
- "Manufacturer data[ID:%.4X, 0x%.2X%.2X...(len:%d)]",
- manufacturer_id, manufacturer_data[0], manufacturer_data[1],
- manufacturer_data_len);
+ if (bt_adapter_le_get_scan_result_manufacturer_data(info, pkt_type, &manufacturer_id,
+ &manufacturer_data, &manufacturer_data_len) == BT_ERROR_NONE) {
+ dlog_print(DLOG_INFO, LOG_TAG, "Manufacturer data[ID:%.4X, 0x%.2X%.2X...(len:%d)]",
+ manufacturer_id, manufacturer_data[0], manufacturer_data[1], manufacturer_data_len);
g_free(manufacturer_data);
}
}
<pre class="prettyprint">
static void
__bt_adapter_le_device_discovery_state_changed_cb(int result,
- bt_adapter_le_device_discovery_state_e
- discovery_state,
- bt_adapter_le_device_discovery_info_s
- *discovery_info,
+ bt_adapter_le_device_discovery_state_e discovery_state,
+ bt_adapter_le_device_discovery_info_s *discovery_info,
void *user_data)
{
if (discovery_info == NULL && discovery_state == BT_ADAPTER_LE_DEVICE_DISCOVERY_FOUND)
if (discovery_state != BT_ADAPTER_LE_DEVICE_DISCOVERY_FOUND) {
dlog_print(DLOG_INFO, LOG_TAG, "LE discovery %s",
- discovery_state == BT_ADAPTER_LE_DEVICE_DISCOVERY_STARTED ?
- "Started" : "Finished");
+ discovery_state == BT_ADAPTER_LE_DEVICE_DISCOVERY_STARTED ? "Started" : "Finished");
} else {
dlog_print(DLOG_INFO, LOG_TAG, "%s Adv %d Scan resp %d RSSI %d Addr_type %d",
- discovery_info->remote_address, discovery_info->adv_data_len,
- discovery_info->scan_data_len, discovery_info->rssi,
- discovery_info->address_type);
+ discovery_info->remote_address, discovery_info->adv_data_len, discovery_info->scan_data_len,
+ discovery_info->rssi, discovery_info->address_type);
if (discovery_info->adv_data_len > 31 || discovery_info->scan_data_len > 31)
bt_adapter_le_stop_device_discovery();
{
int ret = BT_ERROR_NONE;
- ret =
- bt_adapter_le_set_device_discovery_state_changed_cb(__bt_adapter_le_device_discovery_state_changed_cb,
- NULL);
+ ret = bt_adapter_le_set_device_discovery_state_changed_cb(__bt_adapter_le_device_discovery_state_changed_cb, NULL);
ret = bt_adapter_le_start_device_discovery();
dlog_print(DLOG_INFO, LOG_TAG, "created le advertiser(%d)", ret);
advertiser_list[advertiser_index] = advertiser;
} else {
- ret = bt_adapter_le_clear_advertising_data(advertiser,
- BT_ADAPTER_LE_PACKET_ADVERTISING);
+ ret = bt_adapter_le_clear_advertising_data(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING);
if (ret != BT_ERROR_NONE)
dlog_print(DLOG_INFO, LOG_TAG, "clear advertising data [0x%04x]", ret);
- ret = bt_adapter_le_clear_advertising_data(advertiser,
- BT_ADAPTER_LE_PACKET_SCAN_RESPONSE);
+ ret = bt_adapter_le_clear_advertising_data(advertiser, BT_ADAPTER_LE_PACKET_SCAN_RESPONSE);
if (ret != BT_ERROR_NONE)
dlog_print(DLOG_INFO, LOG_TAG, "clear scan response data [0x%04x]", ret);
}
-ret = bt_adapter_le_add_advertising_service_uuid(advertiser,
- BT_ADAPTER_LE_PACKET_ADVERTISING,
+ret = bt_adapter_le_add_advertising_service_uuid(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING,
time_svc_uuid_16);
if (ret != BT_ERROR_NONE)
dlog_print(DLOG_INFO, LOG_TAG, "add service_uuid [0x%04x]", ret);
-ret = bt_adapter_le_add_advertising_service_uuid(advertiser,
- BT_ADAPTER_LE_PACKET_ADVERTISING,
+ret = bt_adapter_le_add_advertising_service_uuid(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING,
battery_svc_uuid_16);
if (ret != BT_ERROR_NONE)
dlog_print(DLOG_INFO, LOG_TAG, "add service_uuid [0x%04x]", ret);
-ret =
- bt_adapter_le_add_advertising_service_solicitation_uuid(advertiser,
- BT_ADAPTER_LE_PACKET_ADVERTISING,
- heart_rate_svc_uuid_16);
+ret = bt_adapter_le_add_advertising_service_solicitation_uuid(advertiser,
+ BT_ADAPTER_LE_PACKET_ADVERTISING,
+ heart_rate_svc_uuid_16);
if (ret != BT_ERROR_NONE)
dlog_print(DLOG_INFO, LOG_TAG, "add service_solicitation_uuid [0x%04x]", ret);
-ret =
- bt_adapter_le_add_advertising_service_solicitation_uuid(advertiser,
- BT_ADAPTER_LE_PACKET_ADVERTISING,
- immediate_alert_svc_uuid_16);
+ret = bt_adapter_le_add_advertising_service_solicitation_uuid(advertiser,
+ BT_ADAPTER_LE_PACKET_ADVERTISING,
+ immediate_alert_svc_uuid_16);
if (ret != BT_ERROR_NONE)
dlog_print(DLOG_INFO, LOG_TAG, "add service_solicitation_uuid [0x%04x]", ret);
-ret = bt_adapter_le_set_advertising_appearance(advertiser,
- BT_ADAPTER_LE_PACKET_ADVERTISING,
- appearance);
+ret = bt_adapter_le_set_advertising_appearance(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING, appearance);
if (ret != BT_ERROR_NONE)
dlog_print(DLOG_INFO, LOG_TAG, "add appearance data [0x%04x]", ret);
-ret = bt_adapter_le_set_advertising_tx_power_level(advertiser,
- BT_ADAPTER_LE_PACKET_ADVERTISING,
- true);
+ret = bt_adapter_le_set_advertising_tx_power_level(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING, true);
if (ret != BT_ERROR_NONE)
dlog_print(DLOG_INFO, LOG_TAG, "add tx_power_level [0x%04x]", ret);
manufacture = manufacture_3;
/* Default scan response data */
-ret = bt_adapter_le_add_advertising_service_data(advertiser,
- BT_ADAPTER_LE_PACKET_SCAN_RESPONSE,
- time_svc_uuid_16, service_data,
- sizeof(service_data));
+ret = bt_adapter_le_add_advertising_service_data(advertiser, BT_ADAPTER_LE_PACKET_SCAN_RESPONSE,
+ time_svc_uuid_16, service_data, sizeof(service_data));
if (ret != BT_ERROR_NONE)
dlog_print(DLOG_INFO, LOG_TAG, "add service_data [0x%04x]", ret);
-ret = bt_adapter_le_set_advertising_device_name(advertiser,
- BT_ADAPTER_LE_PACKET_SCAN_RESPONSE,
- true);
+ret = bt_adapter_le_set_advertising_device_name(advertiser, BT_ADAPTER_LE_PACKET_SCAN_RESPONSE, true);
if (ret != BT_ERROR_NONE)
dlog_print(DLOG_INFO, LOG_TAG, "set device name [0x%04x]", ret);
-ret =
- bt_adapter_le_add_advertising_manufacturer_data(advertiser,
- BT_ADAPTER_LE_PACKET_SCAN_RESPONSE,
- manufacturer_id, manufacture,
- sizeof(manufacture_0));
+ret = bt_adapter_le_add_advertising_manufacturer_data(advertiser, BT_ADAPTER_LE_PACKET_SCAN_RESPONSE,
+ manufacturer_id, manufacture, sizeof(manufacture_0));
if (ret != BT_ERROR_NONE)
dlog_print(DLOG_INFO, LOG_TAG, "add manufacturer data [0x%04x]", ret);
</pre>
<pre class="prettyprint">
static void
__bt_adapter_le_advertising_state_changed_cb(int result, bt_advertiser_h advertiser,
- bt_adapter_le_advertising_state_e
- adv_state,
+ bt_adapter_le_advertising_state_e adv_state,
void *user_data)
{
dlog_print(DLOG_INFO, LOG_TAG, "Result: %d", result);
dlog_print(DLOG_INFO, LOG_TAG, "Advertiser: %p", advertiser);
dlog_print(DLOG_INFO, LOG_TAG, "Advertising %s [%d]",
- adv_state == BT_ADAPTER_LE_ADVERTISING_STARTED ? "started" : "stopped",
- adv_state);
+ adv_state == BT_ADAPTER_LE_ADVERTISING_STARTED ? "started" : "stopped", adv_state);
}
static void
__bt_adapter_le_advertising_state_changed_cb_2(int result, bt_advertiser_h advertiser,
- bt_adapter_le_advertising_state_e
- adv_state,
+ bt_adapter_le_advertising_state_e adv_state,
void *user_data)
{
dlog_print(DLOG_INFO, LOG_TAG, "Result: %d", result);
dlog_print(DLOG_INFO, LOG_TAG, "Advertiser: %p", advertiser);
dlog_print(DLOG_INFO, LOG_TAG, "Advertising %s [%d]",
- adv_state == BT_ADAPTER_LE_ADVERTISING_STARTED ? "started" : "stopped",
- adv_state);
+ adv_state == BT_ADAPTER_LE_ADVERTISING_STARTED ? "started" : "stopped", adv_state);
}
static void
__bt_adapter_le_advertising_state_changed_cb_3(int result, bt_advertiser_h advertiser,
- bt_adapter_le_advertising_state_e
- adv_state,
+ bt_adapter_le_advertising_state_e adv_state,
void *user_data)
{
dlog_print(DLOG_INFO, LOG_TAG, "Result: %d", result);
dlog_print(DLOG_INFO, LOG_TAG, "Advertiser: %p", advertiser);
dlog_print(DLOG_INFO, LOG_TAG, "Advertising %s [%d]",
- adv_state == BT_ADAPTER_LE_ADVERTISING_STARTED ? "started" : "stopped",
- adv_state);
+ adv_state == BT_ADAPTER_LE_ADVERTISING_STARTED ? "started" : "stopped", adv_state);
}
bt_adapter_le_advertising_state_changed_cb cb;
<ul><li>To get the proxy address directly, use the <code>connection_get_proxy()</code> function of the Connection Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html">wearable</a> applications):
<pre class="prettyprint">
char *proxy_address;
-conn_err = connection_get_proxy(connection, CONNECTION_ADDRESS_FAMILY_IPV4,
- &proxy_address);
+conn_err = connection_get_proxy(connection, CONNECTION_ADDRESS_FAMILY_IPV4, &proxy_address);
</pre>
<p>To set the proxy address, use the <code>curl_easy_setopt()</code> function with the <code>CURLOPT_PROXY</code> parameter:</p>
<pre class="prettyprint">
app_control_h app_control = NULL;
error = app_control_create(&app_control);
error = app_control_set_app_id(app_control, "org.tizen.tutorialdownload");
-error =
- download_set_notification_app_control(download_id,
- DOWNLOAD_NOTIFICATION_APP_CONTROL_TYPE_FAILED,
- app_control);
+error = download_set_notification_app_control(download_id,
+ DOWNLOAD_NOTIFICATION_APP_CONTROL_TYPE_FAILED,
+ app_control);
download_notification_type_e noti_type = 0;
char *title = NULL;
error = download_get_notification_type(download_id, &noti_type);
error = download_get_notification_title(download_id, &title);
error = download_get_notification_description(download_id, &desc);
-error =
- download_get_notification_app_control(download_id,
- DOWNLOAD_NOTIFICATION_APP_CONTROL_TYPE_FAILED,
- &app_control);
+error = download_get_notification_app_control(download_id,
+ DOWNLOAD_NOTIFICATION_APP_CONTROL_TYPE_FAILED,
+ &app_control);
error = app_control_destroy(app_control);
</pre>
</li>
static void
progress_cb(int download_id, unsigned long long received, void *user_data)
{
- dlog_print(DLOG_INFO, LOG_TAG, "received: %llu of %llu",
- received, *((unsigned long long*)user_data));
+ dlog_print(DLOG_INFO, LOG_TAG, "received: %llu of %llu", received, *((unsigned long long*)user_data));
}
</pre></li></ol></li>
<pre class="prettyprint">
/* Callback for receiving the response header */
void
-header_cb(http_transaction_h transaction, char* header, size_t header_len,
- void* user_data) {}
+header_cb(http_transaction_h transaction, char* header, size_t header_len, void* user_data) {}
http_transaction_set_received_header_cb(transaction, header_cb, NULL);
/* Callback for receiving the response body */
void
-body_cb(http_transaction_h transaction, char* body, size_t size, size_t nmemb,
- void* user_data) {}
+body_cb(http_transaction_h transaction, char* body, size_t size, size_t nmemb, void* user_data) {}
http_transaction_set_received_body_cb(transaction, body_cb, NULL);
/* Callback for monitoring data uploads */
void
-uploaded_cb(http_transaction_h transaction, char* body, int recommended_chunk,
- void* user_data) {}
+uploaded_cb(http_transaction_h transaction, char* body, int recommended_chunk, void* user_data) {}
http_transaction_set_uploaded_cb(transaction, uploaded_cb, NULL);
if (IOTCON_ERROR_NONE != ret)
/* Error handling */
-ret = iotcon_find_resource(IOTCON_MULTICAST_ADDRESS,
- IOTCON_CONNECTIVITY_IP | IOTCON_CONNECTIVITY_PREFER_UDP,
+ret = iotcon_find_resource(IOTCON_MULTICAST_ADDRESS, IOTCON_CONNECTIVITY_IP | IOTCON_CONNECTIVITY_PREFER_UDP,
res_type, query, _found_cb, NULL);
if (IOTCON_ERROR_NONE != ret)
/* Error handling */
<p>In the function, set the response handle that can include the mandatory response result and optional representation.</p>
<pre class="prettyprint">
void
-_send_response(iotcon_request_h request, iotcon_representation_h repr,
- iotcon_response_result_e result)
+_send_response(iotcon_request_h request, iotcon_representation_h repr, iotcon_response_result_e result)
{
int ret;
iotcon_response_h resp;
static void
_on_get(iotcon_remote_resource_h resource, iotcon_error_e err,
- iotcon_request_type_e request_type,
- iotcon_response_h response, void *user_data)
+ iotcon_request_type_e request_type, iotcon_response_h response, void *user_data)
{
int ret;
iotcon_representation_h repr;
<pre class="prettyprint">
int ret;
-ret = iotcon_remote_resource_observe_register(_light_resource,
- IOTCON_OBSERVE_IGNORE_OUT_OF_ORDER,
+ret = iotcon_remote_resource_observe_register(_light_resource, IOTCON_OBSERVE_IGNORE_OUT_OF_ORDER,
NULL, _observe_cb, NULL);
if (IOTCON_ERROR_NONE != ret)
/* Error handling */
int folder_count;
int file_count;
- ret = mtp_get_object_handles(mtp_device, mtp_storage, MTP_FILETYPE_FOLDER,
- 0, &folder_list, &folder_count);
+ ret = mtp_get_object_handles(mtp_device, mtp_storage, MTP_FILETYPE_FOLDER, 0, &folder_list, &folder_count);
dlog_print("ret[%d]: folder_count in root [%d]", ret, folder_count);
for (i = 0; i < folder_count; i++) {
ret = mtp_objectinfo_get_file_name(mtp_device, folder_list[i], &folder_name);
- dlog_print("ret[%d]: object handle [%d], folder name [%s]",
- ret, folder_list[i], folder_name);
+ dlog_print("ret[%d]: object handle [%d], folder name [%s]", ret, folder_list[i], folder_name);
}
- ret = mtp_get_object_handles(mtp_device, mtp_storage, MTP_FILETYPE_JPEG,
- mtp_object, &file_list, &file_count);
+ ret = mtp_get_object_handles(mtp_device, mtp_storage, MTP_FILETYPE_JPEG, mtp_object, &file_list, &file_count);
dlog_print("ret[%d]: file_count in root [%d]", ret, file_count);
for (i = 0; i < file_count; i++) {
ret = mtp_objectinfo_get_file_name(mtp_device, file_list[i], &file_name);
- dlog_print("ret[%d]: object handle [%d] file name [%s]",
- ret, file_list[i], file_name);
+ dlog_print("ret[%d]: object handle [%d] file name [%s]", ret, file_list[i], file_name);
}
return ret;
manager_test_get_object(void)
{
char filepath[100] = {0,};
- snprintf(filepath, 100, "/opt/usr/media/Downloads/JpegObject_%d.jpg",
- mtp_object_handle);
+ snprintf(filepath, 100, "/opt/usr/media/Downloads/JpegObject_%d.jpg", mtp_object_handle);
ret = mtp_get_object(mtp_device, mtp_object_handle, filepath);
dlog_print("ret[%d]: input id[%d]", ret, mtp_object_handle);
manager_test_get_object(void)
{
char filepath[100] = {0,};
- snprintf(filepath, 100, "/opt/usr/media/Downloads/JpegObject_%d.jpg",
- mtp_object_handle);
+ snprintf(filepath, 100, "/opt/usr/media/Downloads/JpegObject_%d.jpg", mtp_object_handle);
ret = mtp_get_thumbnail(mtp_device, mtp_object_handle, filepath);
dlog_print("ret[%d]: input id[%d]", ret, mtp_object_handle);
<li>
<p>Call the <code>nfc_manager_set_activation_changed_cb()</code> function to register a callback that is invoked every time the activation state of NFC changes:</p>
<pre class="prettyprint">
-error_code =
- nfc_manager_set_activation_changed_cb(on_nfc_activation_changed, NULL);
+error_code = nfc_manager_set_activation_changed_cb(on_nfc_activation_changed, NULL);
</pre>
<p>Define the callback. In this example, it only informs the user that the activation state has changed.</p>
</li>
<li>Use the <code>nfc_manager_set_ndef_discovered_cb()</code> function to register an NDEF event callback:
<pre class="prettyprint">
-error_code =
- nfc_manager_set_ndef_discovered_cb(on_nfc_ndef_discovered, NULL);
+error_code = nfc_manager_set_ndef_discovered_cb(on_nfc_ndef_discovered, NULL);
if (NFC_ERROR_NONE != error_code)
/* Error occurred */
</pre>
</li>
<li>Use the <code>nfc_manager_set_p2p_target_discovered_cb()</code> function to register a peer-to-peer event callback:
<pre class="prettyprint">
-error_code =
- nfc_manager_set_p2p_target_discovered_cb(on_nfc_p2p_target_discovered,
- NULL);
+error_code = nfc_manager_set_p2p_target_discovered_cb(on_nfc_p2p_target_discovered,
+ NULL);
if (NFC_ERROR_NONE != error_code)
/* Error occurred */
</pre></li>
</pre></li>
<li>Use the <code>nfc_manager_set_se_transaction_event_cb()</code> function to register a secure element transaction event callback:
<pre class="prettyprint">
-error_code =
- nfc_manager_set_se_transaction_event_cb(NFC_SE_TYPE_ESE,
- on_nfc_se_transaction_event,
- NULL);
+error_code = nfc_manager_set_se_transaction_event_cb(NFC_SE_TYPE_ESE,
+ on_nfc_se_transaction_event,
+ NULL);
if (NFC_ERROR_NONE != error_code)
/* Error occurred */
</pre></li></ul>
<li>
<p>Retrieve all remaining tag information by calling the <code>nfc_tag_foreach_information()</code> function. The parameters are the tag that is operated on, the callback that is called for each found key and value pair in the tag, and the user data that can be passed to the callback. If there is no need to pass any data, <code>NULL</code> is passed as the last parameter.</p>
<pre class="prettyprint">
-error_code = nfc_tag_foreach_information(tag, on_nfc_tag_information_event,
- NULL);
+error_code = nfc_tag_foreach_information(tag, on_nfc_tag_information_event, NULL);
if (NFC_ERROR_NONE != error_code)
/* Error occurred */
<p>After the tag message has been read, the <code>on_nfc_tag_read_completed()</code> callback is called. The parameters are the status of reading the message, the message read from the tag, and data passed to the callback. The last one can be <code>NULL</code> if no data need to be passed.</p>
<pre class="prettyprint">
static void
-on_nfc_tag_read_completed(int error_code, nfc_ndef_message_h message,
- void *user_data)
+on_nfc_tag_read_completed(int error_code, nfc_ndef_message_h message, void *user_data)
{
nfc_ndef_message_read_cb(clone_message(message));
-}</pre>
+}
+</pre>
</li>
<li>
<p>If the <code>nfc_tag_read_ndef()</code> function returned no error (<code>error_code == NFC_ERROR_NONE</code>), you can operate on the retrieved message:</p>
unsigned char *param, int param_size, void *user_data)
{
dlog_print(DLOG_INFO, LOG_TAG,
- "Secure Element(SIM/UICC(Universal Integrated Circuit Card))
- transaction event data");
+ "Secure Element(SIM/UICC(Universal Integrated Circuit Card)) transaction event data");
}
</pre>
</li>
if (ret == NFC_ERROR_NONE && ce_type != true) {
ret = nfc_se_enable_card_emulation();
if (ret != NFC_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "nfc_se_enable_card_emulation failed: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_enable_card_emulation failed: %d", ret);
return false;
}
} else {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "nfc_se_get_card_emulation_mode failed: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_get_card_emulation_mode failed: %d", ret);
return false;
}
<manifest xmlns="http://tizen.org/ns/packages" api-version="2.3.1"
package="org.tizen.basicuiapplication" version="1.0.0">
<profile name="wearable"/>
- <ui-application appid="org.tizen.basicuiapplication"
- exec="basicuiapplication"
- type="capp" multiple="false" taskmanage="true"
- nodisplay="false">
+ <ui-application appid="org.tizen.basicuiapplication" exec="basicuiapplication"
+ type="capp" multiple="false" taskmanage="true" nodisplay="false">
<icon>basicuiapplication.png</icon>
<label>basicuiapplication</label>
<metadata key="http://tizen.org/metadata/nfc_cardemulation"
ret = nfc_manager_set_hce_event_cb(_hce_event_cb, NULL);
if (ret != NFC_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "nfc_manager_set_hce_event_cb failed: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_manager_set_hce_event_cb failed: %d", ret);
return false;
}
const char aid[] = {0x00, 0x01, 0x02, 0x03};
bool is_activated_handler = false;
-ret = nfc_se_is_activated_handler_for_aid(NFC_SE_TYPE_HCE, aid,
- &is_activated_handler);
+ret = nfc_se_is_activated_handler_for_aid(NFC_SE_TYPE_HCE, aid, &is_activated_handler);
if (ret != NFC_ERROR_NONE) {
if (is_activated_handler == true) {
"nfc_se_is_activated_handler_for_aid failed: %d", ret);
}
-ret =
- nfc_se_is_activated_handler_for_category(NFC_SE_TYPE_HCE,
- NFC_CARD_EMULATION_CATEGORY_PAYMENT,
- &is_activated_handler);
+ret = nfc_se_is_activated_handler_for_category(NFC_SE_TYPE_HCE,
+ NFC_CARD_EMULATION_CATEGORY_PAYMENT,
+ &is_activated_handler);
if (ret != NFC_ERROR_NONE) {
if (is_activated_handler == true) {
int ret = NFC_ERROR_NONE;
const char aid[] = {0x0A, 0x0B, 0x0C, 0x0D};
-ret =
- nfc_se_register_aid(NFC_SE_TYPE_HCE, NFC_CARD_EMULATION_CATEGORY_OTHER,
- aid);
+ret = nfc_se_register_aid(NFC_SE_TYPE_HCE, NFC_CARD_EMULATION_CATEGORY_OTHER, aid);
if (ret != NFC_ERROR_NONE) {
dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_register_aid failed: %d", ret);
return false;
}
-ret =
- nfc_se_unregister_aid(NFC_SE_TYPE_HCE, NFC_CARD_EMULATION_CATEGORY_OTHER,
- aid);
+ret = nfc_se_unregister_aid(NFC_SE_TYPE_HCE, NFC_CARD_EMULATION_CATEGORY_OTHER, aid);
if (ret != NFC_ERROR_NONE) {
dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_unregister_aid failed: %d", ret);
/* Do something */
}
-ret = nfc_se_foreach_registered_aids(NFC_SE_TYPE_HCE,
- NFC_CARD_EMULATION_CATEGORY_OTHER,
+ret = nfc_se_foreach_registered_aids(NFC_SE_TYPE_HCE, NFC_CARD_EMULATION_CATEGORY_OTHER,
_registered_aid_cb, NULL);
if (ret != NFC_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "nfc_se_foreach_registered_aids failed: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_foreach_registered_aids failed: %d", ret);
return false;
}
if (ret == NFC_ERROR_NONE && ce_type != true) {
nfc_se_enable_card_emulation();
if (ret != NFC_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "nfc_se_enable_card_emulation failed: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_enable_card_emulation failed: %d", ret);
return false;
}
} else {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "nfc_se_get_card_emulation_mode failed: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_get_card_emulation_mode failed: %d", ret);
return false;
}
ret = nfc_manager_set_hce_event_cb(_hce_event_cb, NULL);
if (ret != NFC_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "nfc_manager_set_hce_event_cb failed: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_manager_set_hce_event_cb failed: %d", ret);
return false;
}
int ret = 0;
app_control_get_operation(service, &operation);
- if ((strncmp(operation, NFC_APPCONTROL_STRING,
- strlen(NFC_APPCONTROL_STRING)) == 0)) {
- dlog_print(DLOG_INFO, "HCETESTAPP",
- "nfc appcontrol operation: [%s]", operation);
+ if ((strncmp(operation, NFC_APPCONTROL_STRING, strlen(NFC_APPCONTROL_STRING)) == 0)) {
+ dlog_print(DLOG_INFO, "HCETESTAPP", "nfc appcontrol operation: [%s]", operation);
app_control_get_extra_data(service, "data", &aid);
dlog_print(DLOG_INFO, "HCETESTAPP", "nfc appcontrol uri: [%s]", aid);
}
char* value = "http://www.samsung.com";
int length = 30;
-if (dnssd_service_add_txt_record_value(service_handle, key, length, value)
- == DNSSD_ERROR_NONE)
+if (dnssd_service_add_txt_record_value(service_handle, key, length, value) == DNSSD_ERROR_NONE)
dlog_print(DLOG_DEBUG, LOG_TAG, "Success in setting service TXT");
</pre>
<li>The callback defined in the <code>dnssd_register_local_service()</code> function is called when the service registration is finished:
<pre class="prettyprint">
void
-__registered_cb(dnssd_error_e result, dnssd_service_h dnssd_service,
- void* user_data)
+__registered_cb(dnssd_error_e result, dnssd_service_h dnssd_service, void* user_data)
{
if (result == DNSSD_ERROR_NONE) {
/* Service is registered successfully */
char *service_type = "_ftp._tcp";
int error_code;
-error_code = dnssd_start_browsing_service(service_type, &browser_handle,
- __found_cb, NULL);
+error_code = dnssd_start_browsing_service(service_type, &browser_handle, __found_cb, NULL);
if (error_code == DNSSD_ERROR_NONE)
dlog_print(DLOG_DEBUG, LOG_TAG, "Start browsing");
</pre>
if (error_code == DNSSD_ERROR_NONE && service_type != NULL)
dlog_print(DLOG_DEBUG, LOG_TAG, "Service type [%s]", service_type);
- error_code = dnssd_service_get_ip(dnssd_remote_service, &ip_v4_address,
- &ip_v6_address)
+ error_code = dnssd_service_get_ip(dnssd_remote_service, &ip_v4_address, &ip_v6_address)
if (error_code == DNSSD_ERROR_NONE) {
if (ip_v4_address)
dlog_print(DLOG_DEBUG, LOG_TAG, "IPV4 address [%s]", ip_v4_address);
error_code = dnssd_service_get_port(dnssd_remote_service, &port)
if (error_code == DNSSD_ERROR_NONE)
dlog_print(DLOG_DEBUG, LOG_TAG, "Service port [%d]", port);
- error_code = dnssd_service_get_txt_record_value(dnssd_remote_service,
- &txt_record_value,
- &value);
+ error_code = dnssd_service_get_txt_record_value(dnssd_remote_service, &txt_record_value, &value);
if (error_code == DNSSD_ERROR_NONE && txt_record_value!= NULL)
dlog_print(DLOG_DEBUG, LOG_TAG, "Service TXT [%s]", txt_record_value);
}
void
-__found_cb(dnssd_service_h dnssd_remote_service, dnssd_service_state_e state,
- void *user_data)
+__found_cb(dnssd_service_h dnssd_remote_service, dnssd_service_state_e state, void *user_data)
{
dlog_print(DLOG_DEBUG, LOG_TAG, "Browse Service Callback\n");
dlog_print(DLOG_DEBUG, LOG_TAG, "Handler: %u\n", dnssd_remote_service);
<li>The callback defined in the <code>ssdp_start_browsing_service()</code> function is called when the remote service becomes available or unavailable:
<pre class="prettyprint">
void
-__found_cb(ssdp_service_h ssdp_remote_service, ssdp_service_state_e state,
- void *user_data)
+__found_cb(ssdp_service_h ssdp_remote_service, ssdp_service_state_e state, void *user_data)
{
char *usn;
char *url;
ssdp_service_get_usn(ssdp_remote_service, &usn);
ssdp_service_get_url(ssdp_remote_service, &url);
- dlog_print(DLOG_DEBUG, LOG_TAG, "state: %s\n",
- state==SSDP_SERVICE_STATE_AVAILABLE ? "AVAILABLE" : "UNAVAILABLE");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "state: %s\n", state==SSDP_SERVICE_STATE_AVAILABLE ? "AVAILABLE" : "UNAVAILABLE");
dlog_print(DLOG_DEBUG, LOG_TAG, "usn: %s\n", usn);
dlog_print(DLOG_DEBUG, LOG_TAG, "url: %s\n", url);
}
if (!plugin_uri || !list)
return false;
- if ((service_mask & SERVICE_PLUGIN_SERVICE_AUTH)
- && (service_mask & SERVICE_PLUGIN_SERVICE_STORAGE)) {
+ if ((service_mask & SERVICE_PLUGIN_SERVICE_AUTH) && (service_mask & SERVICE_PLUGIN_SERVICE_STORAGE)) {
elm_list_item_append(list, plugin_uri, NULL, NULL, _show_plugin_view, plugin_uri);
service_plugin_h plugin = NULL;
service_adaptor_create_plugin(service_adaptor, plugin_uri, &plugin);
/* Hide this using config file or user input, because it is security information */
- service_plugin_add_property(plugin, SERVICE_PLUGIN_PROPERTY_APP_KEY,
- "enasvv4l8hdbmhn");
- service_plugin_add_property(plugin, SERVICE_PLUGIN_PROPERTY_APP_SECRET,
- "uqhl4pp8mo7hmgn");
+ service_plugin_add_property(plugin, SERVICE_PLUGIN_PROPERTY_APP_KEY, "enasvv4l8hdbmhn");
+ service_plugin_add_property(plugin, SERVICE_PLUGIN_PROPERTY_APP_SECRET, "uqhl4pp8mo7hmgn");
- service_plugin_start(plugin, (SERVICE_PLUGIN_SERVICE_AUTH
- | SERVICE_PLUGIN_SERVICE_STORAGE));
+ service_plugin_start(plugin, (SERVICE_PLUGIN_SERVICE_AUTH | SERVICE_PLUGIN_SERVICE_STORAGE));
}
return true;
static bool
_plugin_iterator_cb(char *plugin_uri, int service_mask, void *user_data)
{
- plugin_list_item_h plugin_item =
- (plugin_list_item_h)calloc(1, sizeof(plugin_list_item_t));
+ plugin_list_item_h plugin_item = (plugin_list_item_h)calloc(1, sizeof(plugin_list_item_t));
/* Create the plugin handle */
service_adaptor_create_plugin(service_adaptor, plugin_uri, &plugin_item->plugin);
/* Set the plugin properties */
- service_plugin_add_property(plugin_item->plugin, SERVICE_PLUGIN_PROPERTY_APP_KEY,
- "app_key");
- service_plugin_add_property(plugin_item->plugin,
- SERVICE_PLUGIN_PROPERTY_APP_SECRET,
- "app_secret");
+ service_plugin_add_property(plugin_item->plugin, SERVICE_PLUGIN_PROPERTY_APP_KEY, "app_key");
+ service_plugin_add_property(plugin_item->plugin, SERVICE_PLUGIN_PROPERTY_APP_SECRET, "app_secret");
/* Initialize the plugin */
service_plugin_start(plugin_item->plugin, service_mask);
{
/* Iterate through the plugin list */
/* Use the callback to separately handle each plugin in the list */
- int ret = service_adaptor_foreach_plugin(service_adaptor, _plugin_iterator_cb,
- &plugins);
+ int ret = service_adaptor_foreach_plugin(service_adaptor, _plugin_iterator_cb, &plugins);
if (ret == SERVICE_ADAPTOR_ERROR_NO_DATA)
/* Handle no plugins */
<p>Create an upload task:</p>
<pre class="prettyprint">
void
-plugin_upload_file(service_plugin_h plugin, const char *local_path,
- const char *storage_path)
+plugin_upload_file(service_plugin_h plugin, const char *local_path, const char *storage_path)
{
service_storage_task_h task;
/* Upload a local file to the storage */
- if (service_storage_create_upload_task(plugin, local_path, storage_path, &task)
- != SERVICE_ADAPTOR_ERROR_NONE) {
+ if (service_storage_create_upload_task(plugin, local_path, storage_path, &task) != SERVICE_ADAPTOR_ERROR_NONE) {
/* Error handling */
return;
<p>Register the defined callbacks:</p>
<pre class="prettyprint">
/* Register the task progress change callback */
- if (service_storage_set_task_progress_cb(task, task_progress_cb, NULL)
- != SERVICE_ADAPTOR_ERROR_NONE) {
+ if (service_storage_set_task_progress_cb(task, task_progress_cb, NULL) != SERVICE_ADAPTOR_ERROR_NONE) {
/* Error handling */
return;
}
/* Register the task state change callback */
- if (service_storage_set_task_state_changed_cb(task, task_state_cb, NULL)
- != SERVICE_ADAPTOR_ERROR_NONE) {
+ if (service_storage_set_task_state_changed_cb(task, task_state_cb, NULL) != SERVICE_ADAPTOR_ERROR_NONE) {
/* Error handling */
return;
<p>Create a download task:</p>
<pre class="prettyprint">
void
-plugin_download_file(service_plugin_h plugin, const char *storage_path,
- const char *local_path)
+plugin_download_file(service_plugin_h plugin, const char *storage_path, const char *local_path)
{
service_storage_task_h task;
/* Download a file from the storage to a local directory */
- if (service_storage_create_download_task(plugin, storage_path, local_path, &task)
- != SERVICE_ADAPTOR_ERROR_NONE) {
+ if (service_storage_create_download_task(plugin, storage_path, local_path, &task) != SERVICE_ADAPTOR_ERROR_NONE) {
/* Error handling */
return;
<p>Register callbacks for monitoring the download task progress and state:</p>
<pre class="prettyprint">
/* Register the task progress change callback */
- if (service_storage_set_task_progress_cb(task, task_progress_cb, NULL)
- != SERVICE_ADAPTOR_ERROR_NONE) {
+ if (service_storage_set_task_progress_cb(task, task_progress_cb, NULL) != SERVICE_ADAPTOR_ERROR_NONE) {
/* Error handling */
return;
}
/* Register the task state change callback */
- if (service_storage_set_task_state_changed_cb(task, task_state_cb, NULL)
- != SERVICE_ADAPTOR_ERROR_NONE) {
+ if (service_storage_set_task_state_changed_cb(task, task_state_cb, NULL) != SERVICE_ADAPTOR_ERROR_NONE) {
/* Error handling */
return;
ret = smartcard_reader_is_secure_element_present(reader, &is_present);
if (ret == SMARTCARD_ERROR_NONE) {
- dlog_print(DLOG_INFO, LOG_TAG,
- "smartcard_reader_is_secure_element_present successful");
+ dlog_print(DLOG_INFO, LOG_TAG, "smartcard_reader_is_secure_element_present successful");
dlog_print(DLOG_INFO, LOG_TAG, "reader secure element present: %d", is_present);
} else {
- dlog_print(DLOG_INFO, LOG_TAG,
- "smartcard_reader_is_secure_element_present failed: %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "smartcard_reader_is_secure_element_present failed: %d", ret);
}
</pre>
</li>
if (ret == SMARTCARD_ERROR_NONE)
dlog_print(DLOG_INFO, LOG_TAG, "smartcard_reader_close_sessions successful");
else
- dlog_print(DLOG_INFO, LOG_TAG,
- "smartcard_reader_close_sessions failed: %d", ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "smartcard_reader_close_sessions failed: %d", ret);
} else {
dlog_print(DLOG_INFO, LOG_TAG, "open session failed: %d", ret);
}
ret = smartcard_session_open_basic_channel(session, aid, 4, 0x00, &channel);
if (ret == SMARTCARD_ERROR_NONE)
- dlog_print(DLOG_INFO, LOG_TAG,
- "smartcard_session_open_basic_channel successful: %d", channel);
+ dlog_print(DLOG_INFO, LOG_TAG, "smartcard_session_open_basic_channel successful: %d", channel);
else
dlog_print(DLOG_INFO, LOG_TAG, "smartcard_session_open_basic_channel failed");
ret = smartcard_session_open_logical_channel(session, aid, 12, 0x04, &channel);
if (ret == SMARTCARD_ERROR_NONE)
- dlog_print(DLOG_INFO, LOG_TAG,
- "smartcard_session_open_logical_channel successful: %d", (channel);
+ dlog_print(DLOG_INFO, LOG_TAG, "smartcard_session_open_logical_channel successful: %d", (channel);
else
- dlog_print(DLOG_INFO, LOG_TAG, "smartcard_session_open_logical_channel failed: %d",
- ret);
+ dlog_print(DLOG_INFO, LOG_TAG, "smartcard_session_open_logical_channel failed: %d", ret);
</pre>
</li>
<li>Close all channels opened for a specific session:
ret = smartcard_channel_get_session(channel, &session_handle);
if (ret == SMARTCARD_ERROR_NONE)
- dlog_print(DLOG_INFO, LOG_TAG,
- "smartcard_channel_get_session successful: %d", session_handle);
+ dlog_print(DLOG_INFO, LOG_TAG, "smartcard_channel_get_session successful: %d", session_handle);
else
dlog_print(DLOG_INFO, LOG_TAG, "smartcard_channel_get_session failed");
}
ret = smartcard_session_open_logical_channel(session, aid, 12, 0x00, &channel);
if (ret == SMARTCARD_ERROR_NONE) {
ret = smartcard_channel_transmit(channel, command, 11, &response, &resp_len);
- ret = smartcard_channel_transmit_retrieve_response(channel, &ptransmitResponse,
- &pLength);
+ ret = smartcard_channel_transmit_retrieve_response(channel, &ptransmitResponse, &pLength);
if (ret == SMARTCARD_ERROR_NONE) {
- dlog_print(DLOG_INFO, LOG_TAG,
- "smartcard_channel_transmit_get_response successful");
+ dlog_print(DLOG_INFO, LOG_TAG, "smartcard_channel_transmit_get_response successful");
dlog_print(DLOG_INFO, LOG_TAG, "response is ");
for (i = 0; i < pLength; i++)
dlog_print(DLOG_INFO, LOG_TAG, "%x ", (int)ptransmitResponse[i]);
int *phReaders = NULL;
int session;
int channel;
-unsigned char aid[] = {0xA0, 0x00, 0x00, 0x00, 0x63, 0x50, 0x4B,
- 0x43, 0x53, 0x2D, 0x31, 0x35};
+unsigned char aid[] = {0xA0, 0x00, 0x00, 0x00, 0x63, 0x50, 0x4B, 0x43, 0x53, 0x2D, 0x31, 0x35};
unsigned char command[] = {0x00, 0x28, 0x00, 0x00};
unsigned char *response = NULL;
int resp_len = 50;
{
int i;
- /* In case of single SIM, you get only one handle */
+ /* In the case of a single SIM, you get only one handle */
ret = telephony_init(&handle_list);
if (ret != TELEPHONY_ERROR_NONE) {
/* Error handling */
telephony_call_get_conference_status(call_list[i], &conf_status);
dlog_print(DLOG_INFO, LOG_TAG,
- "id[%d] number[%s] type[%s] status[%s]
- direction[%s] conference_status[%s]",
+ "id[%d] number[%s] type[%s] status[%s] direction[%s] conference_status[%s]",
handle_id, number,
type == TELEPHONY_CALL_TYPE_VOICE ? "VOICE" :
type == TELEPHONY_CALL_TYPE_VIDEO ? "VIDEO" : "E911",
};
void
-voice_call_status_noti_cb(telephony_h handle, telephony_noti_e noti_id, void *data,
- void* user_data)
+voice_call_status_noti_cb(telephony_h handle, telephony_noti_e noti_id, void *data, void* user_data)
{
int ret_value;
telephony_call_h *call_list;
switch (noti_id) {
case TELEPHONY_NOTI_VOICE_CALL_STATUS_IDLE:
- dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Idle!!! [%d]",
- *(int *)data);
+ dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Idle!!! [%d]", *(int *)data);
break;
case TELEPHONY_NOTI_VOICE_CALL_STATUS_ACTIVE:
- dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Active!!! [%d]",
- *(int *)data);
+ dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Active!!! [%d]", *(int *)data);
break;
case TELEPHONY_NOTI_VOICE_CALL_STATUS_HELD:
- dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Held!!! [%d]",
- *(int *)data);
+ dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Held!!! [%d]", *(int *)data);
break;
case TELEPHONY_NOTI_VOICE_CALL_STATUS_DIALING:
- dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Dialing!!! [%d]",
- *(int *)data);
+ dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Dialing!!! [%d]", *(int *)data);
break;
case TELEPHONY_NOTI_VOICE_CALL_STATUS_ALERTING:
- dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Alerting!!! [%d]",
- *(int *)data);
+ dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Alerting!!! [%d]", *(int *)data);
break;
case TELEPHONY_NOTI_VOICE_CALL_STATUS_INCOMING:
- dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Incoming!!! [%d]",
- *(int *)data);
+ dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Incoming!!! [%d]", *(int *)data);
break;
default:
dlog_print(DLOG_INFO, LOG_TAG, "Unknown noti");
ret_value = telephony_call_get_call_list(handle_list.handle[0], &count, &call_list);
if (ret_value != TELEPHONY_ERROR_NONE) {
- dlog_print(DLOG_INFO, LOG_TAG,
- "telephony_call_get_call_list() failed!!! [0x%x]", ret_value);
+ dlog_print(DLOG_INFO, LOG_TAG, "telephony_call_get_call_list() failed!!! [0x%x]", ret_value);
} else {
int i;
unsigned int handle_id = 0;
telephony_call_get_conference_status(call_list[i], &conf_status);
dlog_print(DLOG_INFO, LOG_TAG,
- "id[%d] number[%s] type[%s] status[%s]
- direction[%s] conference_status[%s]",
+ "id[%d] number[%s] type[%s] status[%s] direction[%s] conference_status[%s]",
handle_id, number,
type == TELEPHONY_CALL_TYPE_VOICE ? "VOICE" :
type == TELEPHONY_CALL_TYPE_VIDEO ? "VIDEO" : "E911",
{
telephony_network_service_state_e network_service_state;
int ret;
- ret = telephony_network_get_service_state(handle_list.handle[0],
- &network_service_state);
+ ret = telephony_network_get_service_state(handle_list.handle[0], &network_service_state);
if (ret != TELEPHONY_ERROR_NONE) {
/* Error handling */
<pre class="prettyprint">
void
-network_service_state_noti_cb(telephony_h handle, telephony_noti_e noti_id,
- void *data, void* user_data)
+network_service_state_noti_cb(telephony_h handle, telephony_noti_e noti_id, void *data, void* user_data)
{
telephony_network_service_state_e network_state = *(int *)data;
dlog_print(DLOG_INFO, LOG_TAG, "Network service state: [%d]", network_state);
usb_host_transfer(in_ep, buffer, sizeof(buffer), &bytes_transferred, 500);
usb_host_release_interface(interface);
-dlog_print(DLOG_INFO, LOG_TAG, "%d bytes of response received: %s",
- bytes_transferred, buffer);
+dlog_print(DLOG_INFO, LOG_TAG, "%d bytes of response received: %s", bytes_transferred, buffer);
</pre>
<p>In the callback, call the <code>window_close()</code> function for the object returned from the <code>window_find_with_elm_window()</code> function call.</p>
<pre class="prettyprint">
- evas_object_smart_callback_add(window->elm_window, "delete,request",
- on_window_deletion, &window);
+ evas_object_smart_callback_add(window->elm_window, "delete,request", on_window_deletion, &window);
}
static void
window_create(Evas_Object *opener, int width, int height, Eina_Bool view_mode)
{
/* Key down event */
- evas_object_event_callback_add(window->ewk_view, EVAS_CALLBACK_KEY_DOWN,
- on_key_down, window);
+ evas_object_event_callback_add(window->ewk_view, EVAS_CALLBACK_KEY_DOWN, on_key_down, window);
/* Mouse down event */
- evas_object_event_callback_add(window->ewk_view, EVAS_CALLBACK_MOUSE_DOWN,
- on_mouse_down, window);
+ evas_object_event_callback_add(window->ewk_view, EVAS_CALLBACK_MOUSE_DOWN, on_mouse_down, window);
}
</pre>
</li>
wifi_direct_discovery_state_e discovery_state,
void *user_data);
-error_code = wifi_direct_set_discovery_state_changed_cb(discovery_state_changed_cb,
- NULL);
+error_code = wifi_direct_set_discovery_state_changed_cb(discovery_state_changed_cb, NULL);
</pre>
</li>
wifi_direct_connection_state_e connection_state,
void *user_data);
-error_code = wifi_direct_set_connection_state_changed_cb(connection_state_changed_cb,
- NULL);
+error_code = wifi_direct_set_connection_state_changed_cb(connection_state_changed_cb, NULL);
</pre>
</li></ol>
bool required = false;
if (wifi_manager_ap_is_passphrase_required(ap, &required) == WIFI_ERROR_NONE)
- dlog_print(DLOG_INFO, LOG_TAG, "Passphrase required: %s",
- required ? "True" : "False");
+ dlog_print(DLOG_INFO, LOG_TAG, "Passphrase required: %s", required ? "True" : "False");
else
dlog_print(DLOG_INFO, LOG_TAG, "Failed to get Passphrase required");
using storage_foreach_device_supported()
*/
int internal_storage_id = 0;
-storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_DOCUMENTS,
- &document_path);
+storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_DOCUMENTS, &document_path);
snprintf(file_path, size, "%s/test.db", document_path);
free(document_path);
{
int ret;
char *ErrMsg;
- char *sql =
- "CREATE TABLE IF NOT EXISTS EncryptedData(" \
- "DATA TEXT NOT NULL," \
- "ENCRYPTED INT NOT NULL,"\
- "SALT TEXT NOT NULL," \
- "IV TEXT NOT NULL," \
- "PART INTEGER," \
- "KEY INTEGER PRIMARY KEY);";
+ char *sql = "CREATE TABLE IF NOT EXISTS EncryptedData(" \
+ "DATA TEXT NOT NULL," \
+ "ENCRYPTED INT NOT NULL,"\
+ "SALT TEXT NOT NULL," \
+ "IV TEXT NOT NULL," \
+ "PART INTEGER," \
+ "KEY INTEGER PRIMARY KEY);";
sqlite3_exec(db, sql, callback, 0, &ErrMsg);
</ol>
<pre class="prettyprint">
static int
-EncryptMsg(char* in, unsigned char* out, const unsigned char* password,
- unsigned char *localsalt, unsigned char *vector)
+EncryptMsg(char* in, unsigned char* out, const unsigned char* password, unsigned char *localsalt, unsigned char *vector)
{
AES_KEY encryption_key;
int iter = (int)vector[0];
dlog_print(DLOG_DEBUG, LOG_TAG, "-%d: ", *localcounter);
for (i = 0; i < argc; i++)
- dlog_print(DLOG_DEBUG, LOG_TAG,
- "%s = %s | ",
- azColName[i], argv[i] ? argv[i] : "NULL");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "%s = %s | ", azColName[i], argv[i] ? argv[i] : "NULL");
(*localcounter)++;
dlog_print(DLOG_DEBUG, LOG_TAG, "\n");
(char*)decrypted_out);
} else {
- dlog_print(DLOG_DEBUG, LOG_TAG, "%s = %s | ",
- azColName[i], argv[i] ? argv[i] : "NULL");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "%s = %s | ", azColName[i], argv[i] ? argv[i] : "NULL");
}
}
for (i = 0; i < id_cnt; i++) {
eom_get_output_type(output_ids[i], &output_type);
if (!strncmp(output_name, "HDMI", 4)) {
- if (output_type == EOM_OUTPUT_TYPE_HDMIA
- || output_type == EOM_OUTPUT_TYPE_HDMIB) {
+ if (output_type == EOM_OUTPUT_TYPE_HDMIA || output_type == EOM_OUTPUT_TYPE_HDMIB) {
output_id = output_ids[i];
break;
}
eom_init();
info->output_id = sample_get_output_id("HDMI");
- ret = eom_set_output_attribute(info->hdmi_output_id,
- EOM_OUTPUT_ATTRIBUTE_NORMAL);
+ ret = eom_set_output_attribute(info->hdmi_output_id, EOM_OUTPUT_ATTRIBUTE_NORMAL);
if (ret != EOM_ERROR_NONE) {
/* Cannot use the external output device */
eom_deinit();
return;
}
- dlog_print(DLOG_INFO, LOG_TAG, "USB status: %s",
- value ? "Connected" : "Disconnected");
+ dlog_print(DLOG_INFO, LOG_TAG, "USB status: %s", value ? "Connected" : "Disconnected");
}
/* Register and deregister */
int ret;
void *data;
- ret = runtime_info_set_changed_cb(RUNTIME_INFO_KEY_USB_CONNECTED,
- usb_connection_changed, data);
+ ret = runtime_info_set_changed_cb(RUNTIME_INFO_KEY_USB_CONNECTED, usb_connection_changed, data);
if (ret != RUNTIME_INFO_ERROR_NONE) {
/* Error handling */
return;
void
_img_cb(system_settings_key_e key, void *user_data)
{
- dlog_print(DLOG_INFO, LOG_TAG,
- "THIS IS CALLED BY USER APPLICATION WHEN THE WALLPAPER CHANGES \n");
+ dlog_print(DLOG_INFO, LOG_TAG, "THIS IS CALLED BY USER APPLICATION WHEN THE WALLPAPER CHANGES \n");
}
/* NOTIFIER 1 - Registering a callback function */
int i;
for (i = 0; i < SYS_INFO_COUNT; i++) {
- dlog_print(DLOG_ERROR, LOG_TAG, "%d- System_settings: %s: ",
- i, _info_key[_ret_type[i].key]);
+ dlog_print(DLOG_ERROR, LOG_TAG, "%d- System_settings: %s: ", i, _info_key[_ret_type[i].key]);
if (_ret_type[i].returns==_RET_BOOL) {
system_settings_get_value_bool(_ret_type[i].key, &_bool_ret);
<pre class="prettyprint">
for (i = 0; i < SYS_INFO_COUNT; i++)
- system_settings_set_changed_cb(_ret_type[i].key,
- _system_settings_changed_cb, 0);
+ system_settings_set_changed_cb(_ret_type[i].key, _system_settings_changed_cb, 0);
</pre></li>
<li><p>Define the callback to be invoked after each change.</p>
<pre class="prettyprint">
for (i = 0; i < SYS_INFO_COUNT; i++)
- system_settings_unset_changed_cb(_ret_type[i].key,
- _system_settings_changed_cb, 0);
+ system_settings_unset_changed_cb(_ret_type[i].key, _system_settings_changed_cb, 0);
</pre></li></ol>
</li>
This function shows how to create new framebuffer object
with texture color buffer and depth render buffer
To render a texture, bind framebuffer to 'newFbo' using
- glBindeFramebuffer() and make a drawcall. Then, just
+ glBindeFramebuffer() and make a drawcall. Then, simply
use 'colorTex' as a general texture
This function does not make a stencil buffer
To use stencil buffer for off-screen-buffer, make another
\r
<pre class="prettyprint">\r
elm_config_accel_preference_set("opengl");\r
-Evas_Object *win = elm_win_util_standard_add("Cairo Image Backend guide",\r
- " Cairo Image Backend guide");\r
+Evas_Object *win = elm_win_util_standard_add("Cairo Image Backend guide", " Cairo Image Backend guide");\r
Evas_Object *img = evas_object_image_filled_add(evas_object_evas_get(win));\r
evas_object_geometry_get(win, NULL, NULL, &WIDTH, &HEIGHT);\r
\r
evas_object_image_alpha_set(img, 0);\r
evas_object_show(img);\r
\r
-cairo_surface_t *cairo_surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32,\r
- WIDTH, HEIGHT);\r
+cairo_surface_t *cairo_surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, WIDTH, HEIGHT);\r
cairo_t *cairo = cairo_create(cairo_surface);\r
/* Cairo drawing */\r
\r
<p>To update a rectangular region on the screen, the <code>evas_object_image_data_update_add()</code> function can be used. For more information about the image object functions of Evas, see <a href="../ui/efl/evas_objects_n.htm#image">Image Objects</a>.</p>\r
\r
<pre class="prettyprint">\r
-Evas_Object *win = elm_win_util_standard_add("Cairo Image Backend guide",\r
- " Cairo Image Backend guide");\r
+Evas_Object *win = elm_win_util_standard_add("Cairo Image Backend guide", " Cairo Image Backend guide");\r
Evas_Object *img = evas_object_image_filled_add(evas_object_evas_get(win));\r
evas_object_geometry_get(win, NULL, NULL, &WIDTH, &HEIGHT);\r
\r
\r
int row_stride = cairo_format_stride_for_width(CAIRO_FORMAT_ARGB32, WIDTH);\r
unsigned char *imageData = (unsigned char *)evas_object_image_data_get(img, EINA_TRUE);\r
-cairo_surface_t *cairo_surface =\r
- cairo_image_surface_create_for_data(imageData, CAIRO_FORMAT_ARGB32,\r
- WIDTH, HEIGHT, row_stride);\r
+cairo_surface_t *cairo_surface = cairo_image_surface_create_for_data(imageData, CAIRO_FORMAT_ARGB32, WIDTH, HEIGHT, row_stride);\r
cairo_t *cairo = cairo_create(cairo_surface);\r
/* Cairo drawing */\r
\r
<p>Afterwards, the <code>evas_gl_config</code>, <code>evas_gl_surface</code>, and <code>evas_gl_context</code> instances are created in that order. For more information on using Evas GL, see <a href="creating_opengles_n.htm">Creating OpenGL® ES Applications</a> and the <a href="opengl_n.htm">OpenGL® ES</a> guide.</p>\r
\r
<pre class="prettyprint">\r
-Evas_Object *win = elm_win_util_standard_add("Cairo GL Backend guide",\r
- " Cairo GL Backend guide");\r
+Evas_Object *win = elm_win_util_standard_add("Cairo GL Backend guide", " Cairo GL Backend guide");\r
Evas_Object *img = evas_object_image_filled_add(evas_object_evas_get(win));\r
\r
Evas_Native_Surface ns;\r
evas_gl_config->stencil_bits = EVAS_GL_STENCIL_BIT_8;\r
evas_gl_config->multisample_bits = EVAS_GL_MULTISAMPLE_MED;\r
\r
-Evas_GL_Surface *evas_gl_surface = evas_gl_surface_create(evas_gl, evas_gl_config,\r
- WIDTH, HEIGHT);\r
+Evas_GL_Surface *evas_gl_surface = evas_gl_surface_create(evas_gl, evas_gl_config, WIDTH, HEIGHT);\r
Evas_GL_Context *evas_gl_context = evas_gl_context_create(evas_gl, NULL);\r
evas_gl_native_surface_get(evas_gl, evas_gl_surface, &ns);\r
evas_object_image_native_surface_set(img, &ns);\r
cairo_device_t *cairo_device = cairo_evas_gl_device_create(evas_gl, evas_gl_context);\r
cairo_boot_t thread_aware = 0;\r
cairo_gl_device_set_thread_aware(cairo_device, thread_aware);\r
-cairo_surface_t *cairo_surface = cairo_gl_surface_create_for_evas_gl(cairo_device,\r
- evas_gl_surface,\r
- evas_gl_config,\r
- WIDTH,\r
- HEIGHT);\r
+cairo_surface_t *cairo_surface = cairo_gl_surface_create_for_evas_gl(cairo_device, evas_gl_surface, evas_gl_config, WIDTH, HEIGHT);\r
cairo_t *cairo = cairo_create(cairo_surface);\r
/* Cairo drawing */\r
</pre>\r
\r
<pre class="prettyprint">\r
/* Create a surface for destination */\r
-cairo_surface_t *cairo_surface = cairo_gl_surface_create_for_evas_gl(cr, evas_gl_surface,\r
- evas_gl_config,\r
- WIDTH, HEIGHT);\r
+cairo_surface_t *cairo_surface = cairo_gl_surface_create_for_evas_gl(cr, evas_gl_surface, evas_gl_config, WIDTH, HEIGHT);\r
\r
Evas_GL_Config *evas_gl_config_source = evas_gl_config_new();\r
evas_gl_config_source->color_format = EVAS_GL_RGBA_8888;\r
evas_gl_config_source->stencil_bits = EVAS_GL_STENCIL_BIT_1;\r
evas_gl_config_source->multisample_bits = EVAS_GL_MULTISAMPLE_LOW;\r
-evas_gl_surface_source = evas_gl_surface_create(evas_gl, evas_gl_config_source,\r
- WIDTH, HEIGHT);\r
+evas_gl_surface_source = evas_gl_surface_create(evas_gl, evas_gl_config_source, WIDTH, HEIGHT);\r
\r
/* Create a surface for source */\r
cairo_surface_t *image_surface = cairo_image_surface_create_from_png(image);\r
-cairo_surface_t *gl_surface = cairo_gl_surface_create(cairo_device,\r
- CAIRO_CONTENT_COLOR_ALPHA,\r
- image_width,\r
- image_height);\r
+cairo_surface_t *gl_surface = cairo_gl_surface_create(cairo_device, CAIRO_CONTENT_COLOR_ALPHA, image_width, image_height);\r
cairo_t *cairo = cairo_create(gl_surface);\r
cairo_set_source_surface(cairo, image_surface, 0, 0);\r
cairo_paint(cairo);\r
\r
<pre class="prettyprint">\r
src_buffer = (unsigned char *)evas_object_image_data_get(decoded_img, EINA_TRUE);\r
-cairo_surface_t *source =\r
- cairo_image_surface_create_for_data(src_buffer, CAIRO_FORMAT_ARGB32, w, h,\r
- evas_object_image_stride_get(decoded_img));\r
+cairo_surface_t *source = cairo_image_surface_create_for_data(src_buffer, CAIRO_FORMAT_ARGB32, w, h,\r
+ evas_object_image_stride_get(decoded_img));\r
cairo_set_source_surface(cr, source, 0, 0);\r
cairo_paint(cr);\r
\r
<li>Set text configurations.\r
<p>In this example, create a font face implicitly using the <code>cairo_select_font_face()</code> function. The text is a kind of "mask" you are about to work with. To use a mask, you need a font type and font size. Set the font type as "Sans", and font size as 52.</p>\r
<pre class="prettyprint">\r
-cairo_select_font_face(cairo, "Sans", CAIRO_FONT_SLANT_NORMAL,\r
- CAIRO_FONT_WEIGHT_NORMAL);\r
+cairo_select_font_face(cairo, "Sans", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_NORMAL);\r
cairo_set_font_size(cairo, 52.0);\r
</pre>\r
</li>\r
<pre class="prettyprint">
tbm_surface_info_s surface_info;
-if (tbm_surface_map(surface, TBM_SURF_OPTION_READ|TBM_SURF_OPTION_WRITE,
- &surface_info) != TBM_SURFACE_ERROR_NONE)
+if (tbm_surface_map(surface, TBM_SURF_OPTION_READ|TBM_SURF_OPTION_WRITE, &surface_info) != TBM_SURFACE_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "Failed to map tbm_surface\n");
</pre>
</li>
/*
Add animator which calls elm_glview_changed_set() per frame
- This rotates the object tic_x(y)angle along X(Y)-axis
+ This rotates the object tic_x(y)angle along X(Y) axis
until object reaches the initial angle
*/
ad->ani = ecore_animator_add(anim_cb, ad);
Evas_Object *win = elm_win_util_standard_add("sample", "sample");
Evas_Object *glview = elm_glview_add(win);
-elm_glview_mode_set(glview, ELM_GLVIEW_DEPTH_24 | ELM_GLVIEW_STENCIL_8
- | ELM_GLVIEW_MULTISAMPLE_HIGH);
+elm_glview_mode_set(glview, ELM_GLVIEW_DEPTH_24 | ELM_GLVIEW_STENCIL_8 | ELM_GLVIEW_MULTISAMPLE_HIGH);
</pre>
<p>To use the Direct Rendering mode since Tizen 2.3.1, set the same option values (depth, stencil, and MSAA) to a rendering engine and a GLView object. You can set the option values to a rendering engine using the <code>elm_config_accel_preference_set()</code> function and to a GLView object using the <code>elm_glview_mode_set()</code> function. If the GLView object option values are bigger or higher than the rendering engine's, the Direct Rendering mode is disabled.</p>
Evas_Object *gl;
gl = elm_glview_add(win);
-elm_glview_mode_set(gl, ELM_GLVIEW_DEPTH | ELM_GLVIEW_DIRECT
- | ELM_GLVIEW_CLIENT_SIDE_ROTATION);
+elm_glview_mode_set(gl, ELM_GLVIEW_DEPTH | ELM_GLVIEW_DIRECT | ELM_GLVIEW_CLIENT_SIDE_ROTATION);
</pre>
</li>
<pre class="prettyprint">
bool vulkan_support;
-system_info_get_platform_bool("http://tizen.org/feature/vulkan.version.1_0",
- &vulkan_support);
+system_info_get_platform_bool("http://tizen.org/feature/vulkan.version.1_0", &vulkan_support);
</pre>
</li>
<li>To use the functions and data types of the Vulkan (in <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__VULKAN__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__VULKAN__FRAMEWORK.html">wearable</a> applications) and SDL (in <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__SDL__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__SDL__FRAMEWORK.html">wearable</a> applications) APIs, include the <code><SDL.h></code> and <code><vulkan/vulkan.h></code> header files in your application:
SDL_main(int argc, char *argv[])
{
SDL_Init(SDL_INIT_VIDEO | SDL_INIT_EVENTS);
- demo.sdl_window = SDL_CreateWindow("SDL Vulkan Sample", 0, 0, demo.sdl_mode.w,
- demo.sdl_mode.h,
- SDL_WINDOW_SHOWN | SDL_WINDOW_FULLSCREEN
- | SDL_WINDOW_RESIZABLE | SDL_WINDOW_VULKAN);
+ demo.sdl_window = SDL_CreateWindow("SDL Vulkan Sample", 0, 0, demo.sdl_mode.w, demo.sdl_mode.h,
+ SDL_WINDOW_SHOWN | SDL_WINDOW_FULLSCREEN | SDL_WINDOW_RESIZABLE | SDL_WINDOW_VULKAN);
}
</pre>
</li>
</ul>
<pre class="prettyprint">
-SDL_Vulkan_GetInstanceExtensions(demo->sdl_window,
- &(demo->enabled_extension_count),
- demo->extension_names);
+SDL_Vulkan_GetInstanceExtensions(demo->sdl_window, &(demo->enabled_extension_count), demo->extension_names);
VkInstanceCreateInfo inst_info = {
.sType = VK_STRUCTURE_TYPE_INSTANCE_CREATE_INFO,
.pNext = NULL,
<li>Check which queue families are supported by the device with the <code>vkGetPhysicalDeviceQueueFamilyProperties()</code> function:
<pre class="prettyprint">
VkQueueFamilyProperties *queue_props;
-vkGetPhysicalDeviceQueueFamilyProperties(demo->gpu, &demo->queue_count,
- demo->queue_props);
+vkGetPhysicalDeviceQueueFamilyProperties(demo->gpu, &demo->queue_count, demo->queue_props);
assert(demo->queue_count >= 1);
VkPhysicalDeviceFeatures features;
.queueCreateInfoCount = 1,
.pQueueCreateInfos = &queue,
.enabledLayerCount = demo->enabled_layer_count,
- .ppEnabledLayerNames =
- (const char *const *)((demo->validate) ?
- demo->device_validation_layers : NULL),
+ .ppEnabledLayerNames = (const char *const *)((demo->validate) ? demo->device_validation_layers : NULL),
.enabledExtensionCount = demo->enabled_extension_count,
.ppEnabledExtensionNames = (const char *const *)demo->extension_names,
.pEnabledFeatures = NULL
<p>This platform-specific extension on Tizen provides the <code>SDL_Vulkan_CreateSurface()</code> function to create a surface hiding the platform differences for you. The parameters are the SDL window pointer, custom allocators, and pointer to the <code>VkSurfaceKHR</code> variable.
It simply passes through the <code>VkResult</code> from the relevant platform call. </p>
<pre class="prettyprint">
-SDL_Vulkan_CreateSurface(demo->sdl_window, (SDL_vulkanInstance)demo->inst,
- (SDL_vulkanSurface*)&demo->surface);
+SDL_Vulkan_CreateSurface(demo->sdl_window, (SDL_vulkanInstance)demo->inst, (SDL_vulkanSurface*)&demo->surface);
</pre>
</li></ol>
</li>
<ol type="a">
<li>Look for a queue family that has the capability of presenting to your window surface, by using the <code>vkGetPhysicalDeviceSurfaceSupportKHR()</code> function, which takes the physical device, queue family index, and surface as parameters. Then simply check the value of the <code>boolean</code> and store the presentation family queue index. Note that it is very likely that it ends up being the same queue family as previously selected for the physical device, so the example adds logic to explicitly prefer a physical device that supports drawing and presentation in the same queue for improved performance:
<pre class="prettyprint">
-demo->fpGetPhysicalDeviceSurfaceSupportKHR(demo->gpu, i, demo->surface,
- &supportsPresent[i]);
+demo->fpGetPhysicalDeviceSurfaceSupportKHR(demo->gpu, i, demo->surface, &supportsPresent[i]);
demo->graphics_queue_node_index = graphicsQueueNodeIndex;
</pre>
</li>
/* SDL_Event is a union containing structures for different event types */
SDL_Event event;
while (SDL_PollEvent(&event)) {
- SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION,
- "[SDL] Event type: %x\n", event.type);
+ SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL] Event type: %x\n", event.type);
handleEvent(&ad, &event);
}
}
case SDL_KEYUP:
{
char* scancodename = (char *)SDL_GetScancodeName(event->key.keysym.scancode);
- SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION,
- "[SDL] keyboard scancode: %s", scancodename);
+ SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL] keyboard scancode: %s", scancodename);
if (event->key.keysym.scancode == SDL_SCANCODE_AC_BACK) {
SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL] Finish main loop ");
ad->game_exit = 1;
}
case SDL_MOUSEBUTTONDOWN:
{
- SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL]Mouse Down: %d x %d",
- event->button.x, event->button.y);
+ SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL]Mouse Down: %d x %d", event->button.x, event->button.y);
break;
}
case SDL_MOUSEBUTTONUP:
{
- SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL]Mouse Up: %d x %d",
- event->button.x, event->button.y);
+ SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL]Mouse Up: %d x %d", event->button.x, event->button.y);
break;
}
case SDL_MOUSEMOTION:
{
- SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL]Mouse Motion: %d x %d",
- event->motion.x, event->motion.y);
+ SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL]Mouse Motion: %d x %d", event->motion.x, event->motion.y);
break;
}
case SDL_ROTATEEVENT:
{
ad->window_rotation = (int)event->user.data1;
- SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL] Rotation degree: %d",
- ad->window_rotation);
+ SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL] Rotation degree: %d", ad->window_rotation);
break;
}
case SDL_WINDOWEVENT:
if (!strcmp(operation, APP_CONTROL_OPERATION_VIEW)) {
app_control_get_uri(app_control, &uri);
app_control_get_extra_data(app_control, "action", &action);
- SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "Get path: [%s], action: [%s]",
- uri, action);
+ SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "Get path: [%s], action: [%s]", uri, action);
}
break;
</pre>
int ret = app_event_get_low_battery_status(event_info, &status);
if (ret == APP_ERROR_NONE) {
if (status == APP_EVENT_LOW_BATTERY_POWER_OFF)
- SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION,
- "[SDL] The battery status is under 1% ");
+ SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL] The battery status is under 1% ");
else if (status == APP_EVENT_LOW_BATTERY_CRITICAL_LOW)
- SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION,
- "[SDL] The battery status is under 5% ");
+ SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL] The battery status is under 5% ");
}
break;
}
char *language;
int ret = app_event_get_language(event_info, &language);
if (ret != APP_ERROR_NONE)
- SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION,
- "[SDL] app_event_get_language failed. Err = %d ", ret);
+ SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL] app_event_get_language failed. Err = %d ", ret);
if (language != NULL) {
SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL] language: ", language);
case SDL_ROTATEEVENT:
{
ad->window_rotation = (int)event->user.data1;
- SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL] Rotation degree: %d",
- ad->window_rotation);
+ SDL_LogInfo(SDL_LOG_CATEGORY_APPLICATION, "[SDL] Rotation degree: %d", ad->window_rotation);
break;
}
</pre>
char dest[BUF_SIZE];
int dest_len;
i18n_uerror_code_e error_code = I18N_ERROR_NONE;
-i18n_ustring_to_UTF8(dest, BUF_SIZE, &dest_len, src, i18n_ustring_get_length(src),
- &error_code);
+i18n_ustring_to_UTF8(dest, BUF_SIZE, &dest_len, src, i18n_ustring_get_length(src), &error_code);
</pre></li></ul>
<h3 id="unicode" name="unicode">Getting the Unicode Block of a Character</h3>
<p>To use the built-in normalizer, set the first parameter to <code>NULL</code>.</p>
<pre class="prettyprint">
i18n_unormalizer_h normalizer;
-i18n_unormalization_get_instance(NULL, "nfc", I18N_UNORMALIZATION_DECOMPOSE,
- &normalizer);
+i18n_unormalization_get_instance(NULL, "nfc", I18N_UNORMALIZATION_DECOMPOSE, &normalizer);
</pre>
</li>
int timezone_name_len = strlen(timezone_name);
i18n_ustring_copy_ua_n(timezone, timezone_name, timezone_name_len + 1);
i18n_ucalendar_h ucalendar;
-i18n_ucalendar_create(timezone, -1, I18N_ULOCALE_US,
- I18N_UCALENDAR_DEFAULT, &ucalendar);
+i18n_ucalendar_create(timezone, -1, I18N_ULOCALE_US, I18N_UCALENDAR_DEFAULT, &ucalendar);
</pre></li>
<li>To set a date in the Ucalendar, use the <code>i18n_ucalendar_set_date_time()</code> function.
i18n_uchar format[BUF_SIZE];
i18n_ustring_copy_ua_n(format, "EEEdMMMyyyyHHmmssz", BUF_SIZE);
i18n_uchar best_pattern[BUF_SIZE];
-i18n_udatepg_get_best_pattern(udatepg, format, BUF_SIZE, best_pattern,
- BUF_SIZE, &pattern_len);
+i18n_udatepg_get_best_pattern(udatepg, format, BUF_SIZE, best_pattern, BUF_SIZE, &pattern_len);
</pre>
</li>
</ol>
const char *timezone_name = "Asia/Seoul";
int timezone_name_len = strlen(timezone_name);
i18n_ustring_copy_ua_n(timezone, timezone_name, timezone_name_len + 1);
-i18n_udate_create(I18N_UDATE_FULL, I18N_UDATE_FULL, I18N_ULOCALE_UK,
- timezone, -1, best_pattern, -1, &date_format);
+i18n_udate_create(I18N_UDATE_FULL, I18N_UDATE_FULL, I18N_ULOCALE_UK, timezone, -1, best_pattern, -1, &date_format);
</pre>
</li>
<li>To obtain a Ustring with a specified date and the created date format, use the <code>i18n_udate_format_date()</code> function:
<pre class="prettyprint">
i18n_uchar date_result[BUF_SIZE];
int date_len;
-i18n_udate_format_date(date_format, now, date_result,
- BUF_SIZE, NULL, &date_len);
+i18n_udate_format_date(date_format, now, date_result, BUF_SIZE, NULL, &date_len);
</pre>
</li>
</ol>
char *locale = I18N_ULOCALE_CANADA_FRENCH;
i18n_uchar language_name[BUF_SIZE];
int lang_len;
-i18n_ulocale_get_display_language(locale, I18N_ULOCALE_GERMANY, language_name,
- BUF_SIZE, &lang_len);
+i18n_ulocale_get_display_language(locale, I18N_ULOCALE_GERMANY, language_name, BUF_SIZE, &lang_len);
</pre>
</li>
<pre class="prettyprint">
i18n_uchar name[BUF_SIZE];
int name_len;
-i18n_ulocale_get_display_name(I18N_ULOCALE_CANADA_FRENCH, I18N_ULOCALE_GERMANY,
- name, BUF_SIZE, &name_len);
+i18n_ulocale_get_display_name(I18N_ULOCALE_CANADA_FRENCH, I18N_ULOCALE_GERMANY, name, BUF_SIZE, &name_len);
</pre>
</li>
int ret;
char *location = NULL;
-ret = phone_number_get_location_from_number("0222550114",
- PHONE_NUMBER_REGION_REPUBLIC_OF_KOREA,
+ret = phone_number_get_location_from_number("0222550114", PHONE_NUMBER_REGION_REPUBLIC_OF_KOREA,
PHONE_NUMBER_LANG_ENGLISH, &location);
if (PHONE_NUMBER_ERROR_NONE == ret) {
/* Use location */
char *language;
/* Retrieve the current system language */
system_settings_get_value_string(SYSTEM_SETTINGS_KEY_LOCALE_LANGUAGE, &language);
- /* Set the language in elementary */
+ /* Set the language in Elementary */
elm_language_set(language);
free(language);
}
<pre class="prettyprint">
xgettext --directory = src --output-dir = res/po --keyword = _ --keyword = N_
- --keyword = elm_object_translatable_text_set:2
- --keyword = elm_object_item_translatable_text_set:2
+ --keyword = elm_object_translatable_text_set:2 --keyword = elm_object_item_translatable_text_set:2
--add-comments = --from-code = utf-8 --foreign-use
</pre>
</pre>
<p>Instead, use a single string and let the translators manage the punctuation:</p>
<pre class="prettyprint">
-snprintf(buf, some_size, i18n_get_text("%s: %s"), i18n_get_text(error),
- i18n_get_text(reason));
+snprintf(buf, some_size, i18n_get_text("%s: %s"), i18n_get_text(error), i18n_get_text(reason));
</pre>
</li>
<li id="length">Remember that translations have different lengths
example_sensor_callback(sensor_h sensor, sensor_event_s *event, void *user_data)
{
/*
- If a callback is used to listen to different sensor types,
+ If a callback is used to listen for different sensor types,
it can check the sensor type
*/
sensor_type_e type;
<li>You can change the power-save behavior of the listener.
<p>By default, the listener automatically stops listening for the sensor data, if the display is switched off or the device goes to the power-save mode. You can override such behavior:</p>
<pre class="prettyprint">
-sensor_listener_set_attribute_int(listener, SENSOR_ATTRIBUTE_PAUSE_POLICY,
- SENSOR_PAUSE_NONE);
+sensor_listener_set_attribute_int(listener, SENSOR_ATTRIBUTE_PAUSE_POLICY, SENSOR_PAUSE_NONE);
</pre>
<p>The above example makes the listener to listen for the sensor data regardless of the display state and the power-save mode. However, it does not prevent the device from going to the sleep mode. To listen for the sensor data, the device must be awake anyway.</p>
</li>
sensor_recorder_create_option(&option);
/* 720 hours (30 days) */
-sensor_recorder_option_set_int(option, SENSOR_RECORDER_OPTION_RETENTION_PERIOD,
- 30 * 24);
+sensor_recorder_option_set_int(option, SENSOR_RECORDER_OPTION_RETENTION_PERIOD, 30 * 24);
</pre>
</li>
/* Aggregate every 24 hours */
sensor_recorder_query_set_int(query, SENSOR_RECORDER_QUERY_TIME_INTERVAL, 24 * 60);
/* Start the aggregation at 7 AM */
-sensor_recorder_query_set_time(query, SENSOR_RECORDER_QUERY_ANCHOR_TIME,
- (time_t)(7 * 3600));
+sensor_recorder_query_set_time(query, SENSOR_RECORDER_QUERY_ANCHOR_TIME, (time_t)(7 * 3600));
</pre>
</li>
<li>With the query handle, retrieve the actual aggregated data:
<pre class="prettyprint">
-sensor_recorder_read(SENSOR_HUMAN_PEDOMETER, query,
- example_sensor_recorder_callback, NULL);
+sensor_recorder_read(SENSOR_HUMAN_PEDOMETER, query, example_sensor_recorder_callback, NULL);
</pre>
<p>The <code>sensor_recorder_read()</code> function is asynchronous. The synchronous variant is <code>sensor_recorder_read_sync()</code>.</p>
</li>
<li>Inside the <code>example_sensor_recorder_callback()</code> callback, each record attribute can be extracted:
<pre class="prettyprint">
void
-example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data,
- int remains, sensor_error_e error,
- void *user_data)
+example_sensor_recorder_callback(sensor_type_e type, sensor_recorder_data_h data, int remains,
+ sensor_error_e error, void *user_data)
{
int step;
double distance;
<ol type="a"><li><p> You can get notifications about the in or out state updates using the state update callback. The callback is invoked on an event, receiving the current state of the user with respect to geofences with each call.</p>
<p>Register the geofence state update callback using the <code>geofence_manager_set_geofence_state_changed_cb()</code> function.</p>
<pre class="prettyprint">
-geofence_manager_set_geofence_state_changed_cb(manager, geofence_state_changed,
- NULL);
+geofence_manager_set_geofence_state_changed_cb(manager, geofence_state_changed, NULL);
</pre></li>
<li><p>Define the callback function:</p>
<pre class="prettyprint">
<li><p>You can get notifications about the proximity state updates using the state update callback. The callback is invoked on an event, receiving the current state of the user with respect to proximity with each call.</p>
<p>Register the proximity state update callback using the <code>geofence_manager_set_geofence_proximity_state_changed_cb()</code> function.</p>
<pre class="prettyprint">
-geofence_manager_set_geofence_proximity_state_changed_cb(manager,
- proximity_state_changed,
- NULL);
+geofence_manager_set_geofence_proximity_state_changed_cb(manager, proximity_state_changed, NULL);
</pre></li>
<li><p>Define the callback function:</p>
<pre class="prettyprint">
<p>When the registered gesture is detected, the registered callback is invoked.</p>
<pre class="prettyprint">
-gesture_start_recognition(handle, GESTURE_PICK_UP, GESTURE_OPTION_DEFAULT,
- gesture_cb, NULL);
+gesture_start_recognition(handle, GESTURE_PICK_UP, GESTURE_OPTION_DEFAULT, gesture_cb, NULL);
</pre>
<p>The above example starts gesture detection to receive notifications when the <code>GESTURE_PICK_UP</code> gesture is detected. The application can use any of the <code>gesture_type_e</code> enumerators (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html#ga260f6752298cdd6c8235fd2922c147bf">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html#ga260f6752298cdd6c8235fd2922c147bf">wearable</a> applications) in place of the <code>GESTURE_PICK_UP</code> value. Note that not all gestures are supported by all devices. In such cases, the function returns the <code>GESTURE_ERROR_NOT_SUPPORTED</code> value.</p>
<p>You can retrieve and update information of the satellite connected with the device. The information includes azimuth, elevation, PRN, SNR, and NMEA data. You can also get a notification of the satellite update using the satellite update callback. The callback is invoked periodically, receiving the information of connected satellites with every call.</p>
<ol><li><p>Register the callback using the <code>location_manager_set_satellite_updated_cb()</code> function:</p>
<pre class="prettyprint">
-gps_status_set_satellite_updated_cb(manager, capi_gps_status_satellite_updated_cb,
- 10, NULL);
+gps_status_set_satellite_updated_cb(manager, capi_gps_status_satellite_updated_cb, 10, NULL);
</pre>
<p>The third parameter determines the frequency of callback calls. In this example, the callback is called every 10 seconds.</p> </li>
<li>When the update is received, the callback containing brief satellite information is called. To get the detailed satellite information in the sky, call the <code>gps_status_foreach_satellites_in_view()</code> function in the callback. Variables that store the current satellite information are updated.
int cur_snr;
static bool
-capi_gps_status_get_satellites_cb(unsigned int azimuth, unsigned int elevation,
- unsigned int prn, int snr,
- bool is_in_use, void *user_data)
+capi_gps_status_get_satellites_cb(unsigned int azimuth, unsigned int elevation, unsigned int prn,
+ int snr, bool is_in_use, void *user_data)
{
cur_azimuth = azimuth;
cur_elevation = elevation;
{
numofinview = num_of_active;
if (num_of_inview > 0)
- gps_status_foreach_satellites_in_view(manager,
- capi_gps_status_get_satellites_cb,
- NULL);
+ gps_status_foreach_satellites_in_view(manager, capi_gps_status_get_satellites_cb, NULL);
}
</pre>
double altitude;
double latitude;
double longitude;
-location_manager_get_position(manager, &altitude, &latitude,
- &longitude, &timestamp);
+location_manager_get_position(manager, &altitude, &latitude, &longitude, &timestamp);
</pre></li>
<li><p>To get information about the current velocity (climb in km/h, direction as degrees from the north, and speed in km/h), use the <code>location_manager_get_velocity()</code> function:</p>
<pre class="prettyprint">
location_manager_get_location(manager, &altitude, &latitude, &longitude, &climb,
- &direction, &speed, &level,
- &horizontal, &vertical, &timestamp);
+ &direction, &speed, &level, &horizontal, &vertical, &timestamp);
</pre></li>
<li><p>If the location service is currently unavailable, get the last values recorded by the location manager when the GPS signal was available. To get the information, use the following functions:</p>
get_available_providers()
{
void *user_data = NULL;
- const int error = maps_service_foreach_provider(_maps_service_provider_info_cb,
- user_data);
+ const int error = maps_service_foreach_provider(_maps_service_provider_info_cb, user_data);
if (error == MAPS_ERROR_NONE)
/* Select a provider from the available_providers vector */
bool supported = false;
/* Check whether routing is available */
-error = maps_service_provider_is_service_supported(maps, MAPS_SERVICE_SEARCH_ROUTE,
- &supported);
+error = maps_service_provider_is_service_supported(maps, MAPS_SERVICE_SEARCH_ROUTE, &supported);
const bool is_routing_supported = (error == MAPS_ERROR_NONE) ? supported : false;
/* Check whether routing through specified waypoints is available */
-error = maps_service_provider_is_service_supported(maps,
- MAPS_SERVICE_SEARCH_ROUTE_WAYPOINTS,
- &supported);
-const bool is_routing_waypoints_supported =
- (error == MAPS_ERROR_NONE) ? supported : false;
+error = maps_service_provider_is_service_supported(maps, MAPS_SERVICE_SEARCH_ROUTE_WAYPOINTS, &supported);
+const bool is_routing_waypoints_supported = (error == MAPS_ERROR_NONE) ? supported : false;
</pre>
<p>To check for the availability of other services, follow the same approach using the keys from the <code>maps_service_e</code> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__SERVICE__AND__PREFERENCE__MODULE.html#ga8afd98ceb094d4c3edaf603051a69f8e">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MAPS__SERVICE__AND__PREFERENCE__MODULE.html#ga8afd98ceb094d4c3edaf603051a69f8e">wearable</a> applications).</p>
</li>
/* Use route path */
/* Check whether segment path data is supported */
-error = maps_service_provider_is_data_supported(maps, MAPS_ROUTE_SEGMENTS_PATH,
- &supported);
-const bool is_route_segment_path_supported =
- (error == MAPS_ERROR_NONE) ? supported : false;
+error = maps_service_provider_is_data_supported(maps, MAPS_ROUTE_SEGMENTS_PATH, &supported);
+const bool is_route_segment_path_supported = (error == MAPS_ERROR_NONE) ? supported : false;
if (is_route_segment_path_supported)
/* Use segment path */
/* Check whether segment maneuver data is supported */
-error = maps_service_provider_is_data_supported(maps, MAPS_ROUTE_SEGMENTS_MANEUVERS,
- &supported);
-const bool is_route_segment_maneuvers_supported =
- (error == MAPS_ERROR_NONE) ? supported : false;
+error = maps_service_provider_is_data_supported(maps, MAPS_ROUTE_SEGMENTS_MANEUVERS, &supported);
+const bool is_route_segment_maneuvers_supported = (error == MAPS_ERROR_NONE) ? supported : false;
if (is_route_segment_maneuvers_supported)
/* Use segment maneuvers */
</pre>
/* Search for geocode of the Digital City within a specified geographic area */
error = maps_service_geocode_inside_area(maps, "Digital City", bounds, preference,
- __maps_service_geocode_cb,
- user_data, &request_id);
+ __maps_service_geocode_cb, user_data, &request_id);
if (error != MAPS_ERROR_NONE)
/* Error handling */
/* Then use maps_address_set_XXX() to initialize the address with values */
/* Search for a geocode of a place, specified with a structured address */
-error = maps_service_geocode_by_structured_address(maps, address, preference,
- __maps_service_geocode_cb,
+error = maps_service_geocode_by_structured_address(maps, address, preference, __maps_service_geocode_cb,
user_data, &request_id);
if (error != MAPS_ERROR_NONE)
<pre class="prettyprint">
/* Obtain the reverse geocode with specified coordinates */
error = maps_service_reverse_geocode(maps, 37.257865, 127.053659, preference,
- __maps_service_reverse_geocode_cb,
- user_data, &request_id);
+ __maps_service_reverse_geocode_cb, user_data, &request_id);
if (error != MAPS_ERROR_NONE)
/* Error handling */
<li>Implement the <code>__maps_service_reverse_geocode_cb()</code> callback to receive the service response:
<pre class="prettyprint">
static void
-__maps_service_reverse_geocode_cb(maps_error_e result, int request_id,
- int index, int total,
+__maps_service_reverse_geocode_cb(maps_error_e result, int request_id, int index, int total,
maps_address_h address, void* user_data)
{
/* Handle the obtained address */
/* Create the coordinates with maps_coordinates_create() */
int distance = 500;
-error = maps_service_search_place(maps, position, distance, filter,
- preference, __maps_service_search_place_cb,
- user_data, &request_id);
+error = maps_service_search_place(maps, position, distance, filter, preference,
+ __maps_service_search_place_cb, user_data, &request_id);
if (error != MAPS_ERROR_NONE)
/* Error handling */
*/
error = maps_service_search_place_by_area(maps, boundary, filter, preference,
- __maps_service_search_place_cb,
- user_data, &request_id);
+ __maps_service_search_place_cb, user_data, &request_id);
if (error != MAPS_ERROR_NONE)
/* Error handling */
or maps_area_create_circle()
*/
-error = maps_service_search_place_by_address(maps, "Digital City", boundary,
- filter, preference,
- __maps_service_search_place_cb,
- user_data, &request_id);
+error = maps_service_search_place_by_address(maps, "Digital City", boundary, filter, preference,
+ __maps_service_search_place_cb, user_data, &request_id);
if (error != MAPS_ERROR_NONE)
/* Error handling */
<li>Implement the <code>__maps_service_search_place_cb()</code> callback to receive the service response:
<pre class="prettyprint">
static bool
-__maps_service_search_place_cb(maps_error_e error, int request_id, int index,
- int total, maps_place_h place, void* user_data)
+__maps_service_search_place_cb(maps_error_e error, int request_id, int index, int total,
+ maps_place_h place, void* user_data)
{
/* Handle the obtained place data */
*/
error = maps_service_search_place_list(maps, boundary, filter, preference,
- __maps_service_search_place_list_cb,
- user_data, &request_id);
+ __maps_service_search_place_list_cb, user_data, &request_id);
if (error != MAPS_ERROR_NONE)
/* Error handling */
<li>Implement the <code>__maps_service_search_place_list_cb()</code> callback to receive the place list:
<pre class="prettyprint">
static bool
-__maps_service_search_place_list_cb(maps_error_e error,
- int request_id, int total,
- maps_place_list_h place_list,
- void* user_data)
+__maps_service_search_place_list_cb(maps_error_e error, int request_id, int total,
+ maps_place_list_h place_list, void* user_data)
{
/* Handle the obtained place data */
maps_place_list_foreach(place_list, __maps_place_details_cb, user_data);
/*
Do not release the place handle,
- because it is just a reference to the list data
+ because it is only a reference to the list data
*/
return true;
<ul><li>Use the <code>maps_service_get_place_details()</code> function to retrieve the place details:
<pre class="prettyprint">
error = maps_service_get_place_details(maps, place_uri,
- __maps_service_get_place_details_cb,
- user_data, &request_id);
+ __maps_service_get_place_details_cb, user_data, &request_id);
if (error != MAPS_ERROR_NONE)
/* Error handling */
/* Create the coordinates with maps_coordinates_create() */
error = maps_service_search_route(maps, origin, destination, preference,
- __maps_service_search_route_cb,
- user_data, &request_id);
+ __maps_service_search_route_cb, user_data, &request_id);
if (error != MAPS_ERROR_NONE)
/* Error handling */
/* Create an array with the waypoint coordinates */
maps_coordinates_h* waypoint_list = NULL;
-error = maps_service_search_route_waypoints(maps, waypoint_list,
- waypoint_num, preference,
- __maps_service_search_route_cb,
- user_data, &request_id);
+error = maps_service_search_route_waypoints(maps, waypoint_list, waypoint_num, preference,
+ __maps_service_search_route_cb, user_data, &request_id);
if (error != MAPS_ERROR_NONE)
/* Error handling */
<li>Implement the <code>__maps_place_categories_cb()</code> callback:
<pre class="prettyprint">
static bool
-__maps_place_categories_cb(int index, int total, maps_place_category_h category,
- void* user_data)
+__maps_place_categories_cb(int index, int total, maps_place_category_h category, void* user_data)
{
/* Handle the obtained place category data */
<li>Implement the <code>__maps_place_properties_cb()</code> callback:
<pre class="prettyprint">
static bool
-__maps_place_properties_cb(int index, int total, char* key, void* value,
- void* user_data)
+__maps_place_properties_cb(int index, int total, char* key, void* value, void* user_data)
{
/* Handle the obtained property: */
/* property_name: key */
<p>Implement the <code>__maps_route_path_cb()</code> callback:</p>
<pre class="prettyprint">
static bool
-__maps_route_path_cb(int index, int total, maps_coordinates_h coordinates,
- void* user_data)
+__maps_route_path_cb(int index, int total, maps_coordinates_h coordinates, void* user_data)
{
/* Handle the obtained route path coordinates */
<p>Implement the <code>__maps_route_segment_cb()</code> callback:</p>
<pre class="prettyprint">
static bool
-__maps_route_segment_cb(int index, int total, maps_route_segment_h segment,
- void* user_data)
+__maps_route_segment_cb(int index, int total, maps_route_segment_h segment, void* user_data)
{
/* Handle the obtained route segment */
<li>Implement the <code>__maps_route_properties_cb()</code> callback:
<pre class="prettyprint">
static bool
-__maps_route_properties_cb(int index, int total, char* key, void* value,
- void* user_data)
+__maps_route_properties_cb(int index, int total, char* key, void* value, void* user_data)
{
/* Handle the obtained property: */
/* property_name: key */
int distance = 500;
error = maps_service_search_place(maps, position, distance, filter, preference,
- __maps_service_search_place_cb,
- user_data, &request_id);
+ __maps_service_search_place_cb, user_data, &request_id);
if (error != MAPS_ERROR_NONE)
/* Error handling */
error = maps_preference_create(&preference);
if (error != MAPS_ERROR_NONE)
/* Error handling */
-error = maps_preference_set_property(preference, MAPS_ROUTE_FREEFORM_ADDR_TO_AVOID,
- "Suwon, Digital City");
+error = maps_preference_set_property(preference, MAPS_ROUTE_FREEFORM_ADDR_TO_AVOID, "Suwon, Digital City");
if (error != MAPS_ERROR_NONE)
/* Error handling */
error = maps_preference_set_route_optimization(preference, MAPS_ROUTE_TYPE_SHORTEST);
/* Create the coordinates with maps_coordinates_create() */
error = maps_service_search_route(maps, origin, destination, preference,
- __maps_service_search_route_cb,
- user_data, &request_id);
+ __maps_service_search_route_cb, user_data, &request_id);
if (error != MAPS_ERROR_NONE)
/* Error handling */
<pre class="prettyprint">
maps_view_h maps_view = NULL;
/* Create an image object for the map view */
-Evas_Object *evas_object_image =
- evas_object_image_filled_add(evas_object_evas_get(window));
+Evas_Object *evas_object_image = evas_object_image_filled_add(evas_object_evas_get(window));
error = maps_view_create(maps, evas_object_image, &maps_view);
if (error != MAPS_ERROR_NONE)
maps_coordinates_create(28.64362, 77.19865, &coord);
-error = maps_view_object_create_marker(coord, "image/marker_icon.png",
- MAPS_VIEW_MARKER_PIN, &object);
+error = maps_view_object_create_marker(coord, "image/marker_icon.png", MAPS_VIEW_MARKER_PIN, &object);
if (error != MAPS_ERROR_NONE)
/* Error handling */
</pre>
</ul>
<pre class="prettyprint">
-error = maps_view_set_event_cb(maps_view, MAPS_VIEW_EVENT_GESTURE,
- __main_view_event_cb, NULL);
+error = maps_view_set_event_cb(maps_view, MAPS_VIEW_EVENT_GESTURE, __main_view_event_cb, NULL);
if (error != MAPS_ERROR_NONE)
/* Error handling */
static void
-__main_view_event_cb(const maps_view_event_type_e type,
- maps_view_event_data_h event_data,
- void *user_data)
+__main_view_event_cb(const maps_view_event_type_e type, maps_view_event_data_h event_data, void *user_data)
{
/* Handle the obtained event */
}
evas_object_move(cam_data->rect, 0, 0);
evas_object_color_set(cam_data->rect, 0, 0, 0, 0);
evas_object_render_op_set(cam_data->rect, EVAS_RENDER_COPY);
- evas_object_size_hint_weight_set(cam_data->rect, EVAS_HINT_EXPAND,
- EVAS_HINT_EXPAND);
+ evas_object_size_hint_weight_set(cam_data->rect, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
/* Show the window after the base GUI is set up */
evas_object_show(cam_data->win);
break;
}
}
-error_code = camera_set_display(cam_data.g_camera, CAMERA_DISPLAY_TYPE_OVERLAY,
- GET_DISPLAY(cam_data.win));
+error_code = camera_set_display(cam_data.g_camera, CAMERA_DISPLAY_TYPE_OVERLAY, GET_DISPLAY(cam_data.win));
if (error_code != CAMERA_ERROR_NONE) {
dlog_print(DLOG_DEBUG, "camera_set_display failed [0x%x]", ret);
camera_destroy(cam_data.g_camera);
}
/* Find a resolution that is supported by the device */
-error_code = camera_foreach_supported_preview_resolution(cam_data.g_camera,
- _preview_resolution_cb,
- resolution);
+error_code = camera_foreach_supported_preview_resolution(cam_data.g_camera, _preview_resolution_cb, resolution);
/* Set the supported resolution for camera preview */
-error_code = camera_set_preview_resolution(cam_data.g_camera, resolution[0],
- resolution[1]);
+error_code = camera_set_preview_resolution(cam_data.g_camera, resolution[0], resolution[1]);
</pre>
</li>
<p>To receive notifications about auto-focus state changes, register a callback using the <code>camera_set_focus_changed_cb()</code> function. The callback is invoked every time the auto-focus state changes.</p>
<pre class="prettyprint">
-error_code = camera_set_focus_changed_cb(cam_data.g_camera,
- _camera_focus_cb, NULL);
+error_code = camera_set_focus_changed_cb(cam_data.g_camera, _camera_focus_cb, NULL);
</pre>
<p>Before auto-focusing starts, the auto-focus state is <code>CAMERA_FOCUS_STATE_RELEASED</code>. After the <code>camera_start_focusing()</code> function is called, the camera starts auto-focusing and the state changes to <code>CAMERA_FOCUS_STATE_ONGOING</code>. If the auto-focusing finishes successfully, the state changes to <code>CAMERA_FOCUS_STATE_FOCUSED</code>. If the auto-focusing fails, the state changes to <code>CAMERA_FOCUS_STATE_FAILED</code>.</p>
if (state == CAMERA_FOCUS_STATE_FOCUSED && g_enable_shot == true) {
/* Start capturing */
- error_code = camera_start_capture(cam_data.g_camera,
- _camera_capturing_cb,
- _camera_completed_cb, NULL);
+ error_code = camera_start_capture(cam_data.g_camera, _camera_capturing_cb, _camera_completed_cb, NULL);
g_enable_shot = false;
}
int display_rotation_angle = 0;
/* Get the recommended display rotation value */
-error_code = camera_attr_get_lens_orientation(cam_data.g_camera,
- &lens_orientation);
+error_code = camera_attr_get_lens_orientation(cam_data.g_camera, &lens_orientation);
display_rotation_angle = (360 - lens_orientation) % 360;
/* Convert the display rotation value to an enum type */
<pre class="prettyprint">
static void
-_camera_capturing_cb(camera_image_data_s* image, camera_image_data_s* postview,
- camera_image_data_s* thumbnail, void *user_data)
+_camera_capturing_cb(camera_image_data_s* image, camera_image_data_s* postview, camera_image_data_s* thumbnail, void *user_data)
{
dlog_print(DLOG_DEBUG, LOG_TAG, "Writing image to file");
FILE *file = fopen(g_fname, "w+");
int width = 0;
int height = 0;
-error_code = image_util_decode_jpeg("/mydir/NasaAstronaut.jpg",
- IMAGE_UTIL_COLORSPACE_RGB888,
+error_code = image_util_decode_jpeg("/mydir/NasaAstronaut.jpg", IMAGE_UTIL_COLORSPACE_RGB888,
&dataBuffer, &height, &bufferSize);
if (error_code != IMAGE_UTIL_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
<p>Face detection details can be configured by setting attributes to the engine configuration handle. In this use case, the <code>MV_FACE_DETECTION_MODEL_FILE_PATH</code> attribute is configured. For more information on the attributes, see the Media Vision API reference (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__VISION__MODULE.html">wearable</a> applications).</p>
<pre class="prettyprint">
-error_code =
- mv_engine_config_set_string_attribute(facedata.g_engine_config,
- MV_FACE_DETECTION_MODEL_FILE_PATH,
- "/usr/share/OpenCV/haarcascades/haarcascade_frontalface_alt.xml");
+error_code = mv_engine_config_set_string_attribute(facedata.g_engine_config,
+ MV_FACE_DETECTION_MODEL_FILE_PATH,
+ "/usr/share/OpenCV/haarcascades/haarcascade_frontalface_alt.xml");
if (error_code != MEDIA_VISION_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
</pre>
<pre class="prettyprint">
static void
_on_face_detected_cb(mv_source_h source, mv_engine_config_h engine_config,
- mv_rectangle_s *face_locations,
- int number_of_faces, void *user_data)
+ mv_rectangle_s *face_locations, int number_of_faces, void *user_data)
{
if (number_of_faces > 0) {
int index = 0;
for (index = 0; index < number_of_faces; ++index) {
- dlog_print(DLOG_INFO, LOG_TAG,
- "face [%d]: x-[%d], y-[%d], width-[%d], height-[%d]\n",
+ dlog_print(DLOG_INFO, LOG_TAG, "face [%d]: x-[%d], y-[%d], width-[%d], height-[%d]\n",
index, face_locations[index].x, face_locations[index].y,
face_locations[index].width, face_locations[index].height);
}
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
error_code = mv_source_fill_by_buffer(facedata.g_source, &dataBuffer,
- &bufferSize, &width, &height,
- MEDIA_VISION_COLORSPACE_RGB888);
+ &bufferSize, &width, &height, MEDIA_VISION_COLORSPACE_RGB888);
if (error_code != MEDIA_VISION_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
dataBuffer = NULL;
error_code = mv_face_recognition_model_add(facedata.g_source,
- facedata.g_face_recog_model,
- &roi, face_label);
+ facedata.g_face_recog_model, &roi, face_label);
if (error_code != MEDIA_VISION_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
}
</li>
<li>Use the <code>mv_face_recognition_model_learn()</code> function to train the face recognition model with the added examples:
<pre class="prettyprint">
-error_code = mv_face_recognition_model_learn(facedata.g_engine_config,
- facedata.g_face_recog_model);
+error_code = mv_face_recognition_model_learn(facedata.g_engine_config, facedata.g_face_recog_model);
if (error_code != MEDIA_VISION_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
free(dataBuffer);
dataBuffer = NULL;
-error_code = mv_face_recognize(facedata.g_source, facedata.g_face_recog_model,
- facedata.g_engine_config, NULL,
- _on_face_recognized_cb, NULL);
+error_code = mv_face_recognize(facedata.g_source, facedata.g_face_recog_model, facedata.g_engine_config,
+ NULL, _on_face_recognized_cb, NULL);
if (error_code != MEDIA_VISION_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
</pre>
<p>The following callback example prints the recognized face label with a confidence value.</p>
<pre class="prettyprint">
static void
-_on_face_recognized_cb(mv_source_h source,
- mv_face_recognition_model_h recognition_model,
+_on_face_recognized_cb(mv_source_h source, mv_face_recognition_model_h recognition_model,
mv_engine_config_h engine_config, mv_rectangle_s *face_location,
const int *face_label, double confidence, void *user_data)
{
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
/* Set the camera display */
-error_code = camera_set_display(facedata.g_camera, CAMERA_DISPLAY_TYPE_OVERLAY,
- GET_DISPLAY(facedata.win);
+error_code = camera_set_display(facedata.g_camera, CAMERA_DISPLAY_TYPE_OVERLAY, GET_DISPLAY(facedata.win);
if (error_code != CAMERA_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
/* Get the camera preview resolution */
-error_code = camera_get_preview_resolution(facedata.g_camera,
- &facedata.preview_width,
+error_code = camera_get_preview_resolution(facedata.g_camera, &facedata.preview_width,
&facedata.preview_height);
if (error_code != CAMERA_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
/* Set the camera preview callback */
-error_code = camera_set_media_packet_preview_cb(facedata.g_camera,
- _camera_media_packet_preview_cb,
- NULL);
+error_code = camera_set_media_packet_preview_cb(facedata.g_camera, _camera_media_packet_preview_cb, NULL);
if (error_code != CAMERA_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
*/
facedata.face_roi.points[0].x = face_location[0].x;
facedata.face_roi.points[0].y = face_location[0].y;
- facedata.face_roi.points[1].x =
- face_location[0].x + face_location[0].width;
+ facedata.face_roi.points[1].x = face_location[0].x + face_location[0].width;
facedata.face_roi.points[1].y = face_location[0].y;
- facedata.face_roi.points[2].x = face_location[0].x ;
- facedata.face_roi.points[2].y =
- face_location[0].y + face_location[0].height;
- facedata.face_roi.points[3].x =
- face_location[0].x + face_location[0].width;
- facedata.face_roi.points[3].y =
- face_location[0].y + face_location[0].height;
+ facedata.face_roi.points[2].x = face_location[0].x;
+ facedata.face_roi.points[2].y = face_location[0].y + face_location[0].height;
+ facedata.face_roi.points[3].x = face_location[0].x + face_location[0].width;
+ facedata.face_roi.points[3].y = face_location[0].y + face_location[0].height;
}
}
</pre>
</li>
<li>Prepare the face tracking model handle with the initial location (detected earlier):
<pre class="prettyprint">
-error_code = mv_face_tracking_model_prepare(facedata.g_face_track_model,
- facedata.g_engine_config,
+error_code = mv_face_tracking_model_prepare(facedata.g_face_track_model, facedata.g_engine_config,
facedata.g_source, &facedata.face_roi);
if (error_code != MEDIA_VISION_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
</div>
<pre class="prettyprint">
error_code = mv_face_track(facedata.g_source, facedata.g_face_track_model,
- facedata.g_engine_config, _on_face_tracked_cb,
- false, NULL);
+ facedata.g_engine_config, _on_face_tracked_cb, false, NULL);
if (error_code != MEDIA_VISION_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
</pre>
mv_engine_config_h engine_config, mv_quadrangle_s *location,
double confidence, void *user_data)
{
- dlog_print(DLOG_INFO, LOG_TAG,
- "Location: (%d,%d) -> (%d,%d) -> (%d,%d) -> (%d,%d)\n",
+ dlog_print(DLOG_INFO, LOG_TAG, "Location: (%d,%d) -> (%d,%d) -> (%d,%d) -> (%d,%d)\n",
location->points[0].x, location->point[0].y,
location->points[1].x, location->point[1].y,
location->points[2].x, location->point[2].y,
static void
_barcode_detected_cb(mv_source_h source, mv_engine_config_h engine_cfg,
const mv_quadrangle_s *barcode_locations, const char *message[],
- const mv_barcode_type_e *types, int number_of_barcodes,
- void *user_data)
+ const mv_barcode_type_e *types, int number_of_barcodes, void *user_data)
{
int i = 0;
char type[50] = {'\0'};
<p>The following example assumes that there is a <code>what_isThis.jpg</code> image file in the <code><OwnDataPath></code> folder, including the image object.</p>
<pre class="prettyprint">
-error_code = image_util_decode_jpeg("/mydir/what_isThis.jpg",
- IMAGE_UTIL_COLORSPACE_RGB888,
+error_code = image_util_decode_jpeg("/mydir/what_isThis.jpg", IMAGE_UTIL_COLORSPACE_RGB888,
&dataBuffer, &width, &height, &bufferSize);
if (error_code != IMAGE_UTIL_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
dataBuffer = NULL;
error_code = mv_image_recognize(imagedata.g_source, &imagedata.g_image_object, 1,
- imagedata.g_engine_config, _on_image_recognized_cb,
- NULL);
+ imagedata.g_engine_config, _on_image_recognized_cb, NULL);
if (error_code != MEDIA_VISION_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
</pre>
<pre class="prettyprint">
static void
_on_image_recognized_cb(mv_source_h source, mv_engine_config_h engine_config,
- const mv_image_object_h *image_objects,
- mv_quadrangle_s **locations,
+ const mv_image_object_h *image_objects, mv_quadrangle_s **locations,
unsigned int number_of_objects, void *user_data)
{
int object_num = 0;
if (locations[object_num]) {
int recognized_label = 0;
mv_image_object_get_label(image_objects[object_num], &recognized_label);
- dlog_print(DLOG_INFO, LOG_TAG,
- "image label [%d] on location:
- (%d,%d) -> (%d,%d) -> (%d,%d) -> (%d,%d)\n",
- recognized_label, locations[object_num]->points[0].x,
- locations[object_num]->points[0].y,
- locations[object_num]->points[1].x,
- locations[object_num]->points[1].y,
- locations[object_num]->points[2].x,
- locations[object_num]->points[2].y,
- locations[object_num]->points[3].x,
- locations[object_num]->points[3].y);
+ dlog_print(DLOG_INFO, LOG_TAG, "image label [%d] on location: (%d,%d) -> (%d,%d) -> (%d,%d) -> (%d,%d)\n",
+ recognized_label, locations[object_num]->points[0].x, locations[object_num]->points[0].y,
+ locations[object_num]->points[1].x, locations[object_num]->points[1].y,
+ locations[object_num]->points[2].x, locations[object_num]->points[2].y,
+ locations[object_num]->points[3].x, locations[object_num]->points[3].y);
}
}
}
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
/* Set the camera display */
-error_code = camera_set_display(imagedata.g_camera, CAMERA_DISPLAY_TYPE_OVERLAY,
- GET_DISPLAY(imagedata.win);
+error_code = camera_set_display(imagedata.g_camera, CAMERA_DISPLAY_TYPE_OVERLAY, GET_DISPLAY(imagedata.win);
if (error_code != CAMERA_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
/* Get the camera preview resolution */
-error_code = camera_get_preview_resolution(imagedata.g_camera,
- &imagedata.preview_width,
+error_code = camera_get_preview_resolution(imagedata.g_camera, &imagedata.preview_width,
&imagedata.preview_height);
if (error_code != CAMERA_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
/* Set the camera preview callback */
-error_code = camera_set_media_packet_preview_cb(imagedata.g_camera,
- _camera_media_packet_preview_cb,
- NULL);
+error_code = camera_set_media_packet_preview_cb(imagedata.g_camera, _camera_media_packet_preview_cb, NULL);
if (error_code != CAMERA_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
<li>Use the <code>mv_image_object_fill()</code> function to extract the <code>sample.jpg</code> features and keep them in the <code>g_image_object</code> image object handle.
<p>In the following example, the <code>NULL</code> parameter is given since the object to be tracked is the whole of the input image file. Give a correct ROI value, if the image object to be tracked is only a part of the input image file.</p>
<pre class="prettyprint">
-error_code = mv_image_object_fill(imagedata.g_image_object,
- imagedata.g_engine_config,
+error_code = mv_image_object_fill(imagedata.g_image_object, imagedata.g_engine_config,
imagedata.g_source, NULL);
if (error_code != MEDIA_VISION_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
void *user_data)
{
if (location) {
- dlog_print(DLOG_INFO, LOG_TAG,
- "location: (%d,%d) -> (%d,%d) -> (%d,%d) -> (%d,%d)\n",
+ dlog_print(DLOG_INFO, LOG_TAG, "location: (%d,%d) -> (%d,%d) -> (%d,%d) -> (%d,%d)\n",
location->points[0].x, location->points[0].y,
location->points[1].x, location->points[1].y,
location->points[2].x, location->points[2].y,
GList *folder_list = NULL; /* Include glib.h for this value */
media_folder_h folder_handle = NULL;
-ret = media_folder_foreach_folder_from_db(filter, gallery_folder_list_cb,
- &folder_list);
+ret = media_folder_foreach_folder_from_db(filter, gallery_folder_list_cb, &folder_list);
if (ret != MEDIA_CONTENT_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "media_folder_foreach_folder_from_db failed: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "media_folder_foreach_folder_from_db failed: %d", ret);
return ret;
} else {
free(folder_name);
free(folder_path);
if (ret != MEDIA_CONTENT_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "media_folder_get_media_count_from_db failed: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "media_folder_get_media_count_from_db failed: %d", ret);
return ret;
} else {
snprintf(buf, BUFLEN, "%s = 'Tizen'", MEDIA_ARTIST);
media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_NOCASE);
-media_filter_set_order(filter, MEDIA_CONTENT_ORDER_DESC, MEDIA_DISPLAY_NAME,
- MEDIA_CONTENT_COLLATE_NOCASE);
+media_filter_set_order(filter, MEDIA_CONTENT_ORDER_DESC, MEDIA_DISPLAY_NAME, MEDIA_CONTENT_COLLATE_NOCASE);
media_album_foreach_album_from_db(filter, media_album_list_cb, NULL);
/* Count */
3);
-media_filter_set_order(filter, MEDIA_CONTENT_ORDER_ASC, BOOKMARK_MARKED_TIME,
- MEDIA_CONTENT_COLLATE_NOCASE);
+media_filter_set_order(filter, MEDIA_CONTENT_ORDER_ASC, BOOKMARK_MARKED_TIME, MEDIA_CONTENT_COLLATE_NOCASE);
</pre></li>
<li><p>To find the bookmarks set for a media item, use the <code>media_info_foreach_bookmark_from_db()</code> function.</p>
mc_server_state_e server_state;
ret = mc_client_get_latest_server_info(g_mc_client, &server_name, &server_state);
-dlog_print(DLOG_DEBUG, LOG_TAG, "Server Name: %s, Server state: %d\n",
- server_name, server_state);
+dlog_print(DLOG_DEBUG, LOG_TAG, "Server Name: %s, Server state: %d\n", server_name, server_state);
</pre>
</li>
mc_server_state_e server_state;
ret = mc_client_get_latest_server_info(g_mc_client, &server_name, &server_state);
-dlog_print(DLOG_DEBUG, LOG_TAG, "Server Name: %s, Server state: %d\n",
- server_name, server_state);
+dlog_print(DLOG_DEBUG, LOG_TAG, "Server Name: %s, Server state: %d\n", server_name, server_state);
</pre>
</li>
void
command_received_cb(const char* client_name, mc_playback_states_e state, void *user_data)
{
- dlog_print(DLOG_DEBUG, LOG_TAG, "Client Name: %s, Playback state: %d\n",
- client_name, state);
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Client Name: %s, Playback state: %d\n", client_name, state);
}
</pre>
<p>For example, to register a callback for playback state change commands:</p>
<pre class="prettyprint">
-ret = mc_server_set_playback_state_command_received_cb(g_mc_server,
- command_received_cb, NULL);
+ret = mc_server_set_playback_state_command_received_cb(g_mc_server, command_received_cb, NULL);
</pre>
</li>
<p>To receive notifications when the output buffers are dequeued, register a callback using the <code>mediacodec_set_output_buffer_available_cb()</code> function. The callback is invoked when the output buffers are dequeued.</p>
<pre class="prettyprint">
-ret = mediacodec_set_output_buffer_available_cb(mediacodec,
- _output_buffer_available_cb,
- mediacodec);
+ret = mediacodec_set_output_buffer_available_cb(mediacodec, _output_buffer_available_cb, mediacodec);
</pre>
<p>If the <code>media_packet</code> is dequeued from the codec, this callback is invoked.</p>
<li>
<p>Check the supported file formats using the <code>video_util_foreach_supported_file_format()</code> function:</p>
<pre class="prettyprint">
-error_code =
- video_util_foreach_supported_file_format(handle,
- video_util_file_supported,
- NULL);
+error_code = video_util_foreach_supported_file_format(handle, video_util_file_supported, NULL);
</pre>
<p>The second parameter specifies the callback that is invoked separately for each supported file format.</p>
</li>
video_util_file_supported(video_util_file_format_e format, void *user_data)
{
dlog_print(DLOG_INFO, LOG_TAG, "format %s\n",
- format == VIDEO_UTIL_FILE_FORMAT_3GP ?
- "VIDEO_UTIL_FILE_FORMAT_3GP" :
- format == VIDEO_UTIL_FILE_FORMAT_MP4 ?
- "VIDEO_UTIL_FILE_FORMAT_MP4" :
+ format == VIDEO_UTIL_FILE_FORMAT_3GP? "VIDEO_UTIL_FILE_FORMAT_3GP":
+ format == VIDEO_UTIL_FILE_FORMAT_MP4? "VIDEO_UTIL_FILE_FORMAT_MP4":
"VIDEO_UTIL_FILE_FORMAT_MAX");
return 0;
<li>
<p>Check the supported audio and video codecs using the <code>video_util_foreach_supported_audio_codec()</code> and <code>video_util_foreach_supported_video_codec()</code> functions:</p>
<pre class="prettyprint">
-video_util_foreach_supported_audio_codec(handle,
- video_util_audio_supported, NULL);
+video_util_foreach_supported_audio_codec(handle, video_util_audio_supported, NULL);
-video_util_foreach_supported_video_codec(handle,
- video_util_video_supported, NULL);
+video_util_foreach_supported_video_codec(handle, video_util_video_supported, NULL);
</pre>
<p>The second parameter of both functions specifies the callback that is invoked separately for each supported codec.</p>
</li>
video_util_audio_supported(video_util_audio_codec_e codec, void *user_data)
{
dlog_print(DLOG_INFO, LOG_TAG, "audio codec %s\n",
- codec==VIDEO_UTIL_AUDIO_CODEC_AAC ?
- "VIDEO_UTIL_AUDIO_CODEC_AAC" :
- codec==VIDEO_UTIL_AUDIO_CODEC_AMRNB ?
- "VIDEO_UTIL_AUDIO_CODEC_AMRNB" :
+ codec==VIDEO_UTIL_AUDIO_CODEC_AAC? "VIDEO_UTIL_AUDIO_CODEC_AAC":
+ codec==VIDEO_UTIL_AUDIO_CODEC_AMRNB? "VIDEO_UTIL_AUDIO_CODEC_AMRNB":
"VIDEO_UTIL_AUDIO_CODEC_NONE");
return 0;
video_util_video_supported(video_util_video_codec_e codec, void *user_data)
{
dlog_print(DLOG_INFO, LOG_TAG, "video codec %s\n",
- codec == VIDEO_UTIL_VIDEO_CODEC_MPEG4 ?
- "VIDEO_UTIL_VIDEO_CODEC_MPEG4" :
- codec == VIDEO_UTIL_VIDEO_CODEC_H263 ?
- "VIDEO_UTIL_VIDEO_CODEC_H263" :
- codec == VIDEO_UTIL_VIDEO_CODEC_H264 ?
- "VIDEO_UTIL_VIDEO_CODEC_H264" :
+ codec == VIDEO_UTIL_VIDEO_CODEC_MPEG4? "VIDEO_UTIL_VIDEO_CODEC_MPEG4":
+ codec == VIDEO_UTIL_VIDEO_CODEC_H263? "VIDEO_UTIL_VIDEO_CODEC_H263":
+ codec == VIDEO_UTIL_VIDEO_CODEC_H264? "VIDEO_UTIL_VIDEO_CODEC_H264":
"VIDEO_UTIL_VIDEO_CODEC_NONE");
return 0;
}
bool supported = false;
-video_util_foreach_supported_video_codec(handle, video_util_video_supported,
- &supported);
-dlog_print(DLOG_INFO, LOG_TAG, "MPEG4 codec %s",
- supported ? "supported" : "not supported");
+video_util_foreach_supported_video_codec(handle, video_util_video_supported, &supported);
+dlog_print(DLOG_INFO, LOG_TAG, "MPEG4 codec %s", supported ? "supported" : "not supported");
</pre>
</li>
<li>
<p>Start the transcoding using the <code>video_util_start_transcoding()</code> function:</p>
<pre class="prettyprint">
-error_code = video_util_start_transcoding(handle, start, duration, *out_path,
- progress_cb, completed_cb, *user_data);
+error_code = video_util_start_transcoding(handle, start, duration, *out_path, progress_cb, completed_cb, *user_data);
</pre>
<p>The fifth parameter specifies the transcoding progress callback, which is invoked periodically during the transcoding process. The sixth parameter specifies the transcoding complete callback, which is invoked after the transcoding process is complete.</p>
</li>
int avg_bps;
int max_bps;
-if (media_format_get_video_info(fmt, &mimetype, &w, &h, &avg_bps, &max_bps)
- == MEDIA_PACKET_ERROR_NONE)
+if (media_format_get_video_info(fmt, &mimetype, &w, &h, &avg_bps, &max_bps) == MEDIA_PACKET_ERROR_NONE)
printf("media_format_get_video_info success! width = %d, height = %d", w, h);
else
print("media_format_get_video failed...");
media_format_set_video_avg_bps(format, 10000000);
media_format_set_video_avg_bps(format, 15000000);
- media_packet_create_from_tbm_surface(fmt, surface, _finalize_callback,
- fcb_data, &packet);
+ media_packet_create_from_tbm_surface(fmt, surface, _finalize_callback, fcb_data, &packet);
media_format_unref(fmt);
}
media_format_set_video_avg_bps(format, 10000000);
media_format_set_video_avg_bps(format, 15000000);
- media_packet_create_from_external_memory(fmt, mem_ptr, size, _finalize_callback,
- fcb_data, &packet);
+ media_packet_create_from_external_memory(fmt, mem_ptr, size, _finalize_callback, fcb_data, &packet);
media_format_unref(fmt);
}
g_print("g_media_format[%d] is created successfully! \n", track);
ret = mediademuxer_get_track_info(demuxer, track, g_media_format[track]);
if (ret == 0) {
- if (media_format_get_video_info(g_media_format[track], &mime,
- &w, &h, NULL, NULL)
- == MEDIA_FORMAT_ERROR_NONE) {
+ if (media_format_get_video_info(g_media_format[track], &mime, &w, &h, NULL, NULL) == MEDIA_FORMAT_ERROR_NONE) {
g_print("media_format_get_video_info is success!\n");
vid_track = track;
- } else if (media_format_get_audio_info(g_media_format[track], &mime,
- &channel, &samplerate, NULL, NULL)
- == MEDIA_FORMAT_ERROR_NONE) {
+ } else if (media_format_get_audio_info(g_media_format[track], &mime, &channel, &samplerate, NULL, NULL) == MEDIA_FORMAT_ERROR_NONE) {
g_print("media_format_get_audio_info is success!\n");
aud_track = track;
} else {
char *path = NULL;
error_code = storage_foreach_device_supported(storage_cb, NULL);
- error_code = storage_get_directory(internal_storage_id,
- STORAGE_DIRECTORY_MUSIC, &path);
+ error_code = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_MUSIC, &path);
if (error_code != STORAGE_ERROR_NONE) {
audio_storage_path = strdup(path);
free(path);
}
- error_code = storage_get_directory(internal_storage_id,
- STORAGE_DIRECTORY_VIDEOS, &path);
+ error_code = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_VIDEOS, &path);
if (error_code != STORAGE_ERROR_NONE) {
video_storage_path = strdup(path);
free(path);
<p>Set the display on which the video is played.</p>
<p>To retrieve the correct display handle, use the <code>GET_DISPLAY()</code> function. To set the display, use the <code>player_set_display()</code> function with the player handle, display type (a <code>player_display_type_e</code> enumerator in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html#ga6b83386e10a8febc7e5dfbff85b342ab">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html#ga6b83386e10a8febc7e5dfbff85b342ab">wearable</a> applications), and display handle:</p>
<pre class="prettyprint">
-error_code = player_set_display(g_player, PLAYER_DISPLAY_TYPE_OVERLAY,
- GET_DISPLAY(evas_obj));
+error_code = player_set_display(g_player, PLAYER_DISPLAY_TYPE_OVERLAY, GET_DISPLAY(evas_obj));
</pre>
<p>After the <code>player_set_display()</code> function has been successfully executed, the player is connected to the display.</p>
<pre class="prettyprint">
if (!is_visible) {
error_code = player_set_display_visible(player, true);
- dlog_print(DLOG_ERROR, LOG_TAG,
- "player_set_display_visible = %d", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "player_set_display_visible = %d", error_code);
}
</pre>
</li>
int channels;
int bit_rate;
-error_code = player_get_audio_stream_info(player, &sample_rate,
- &channels, &bit_rate);
+error_code = player_get_audio_stream_info(player, &sample_rate, &channels, &bit_rate);
dlog_print(DLOG_INFO, LOG_TAG, "player_get_audio_stream_info = %d", error_code);
</pre>
</li>
wav_player_error_e ret;
const char* wav_path = "PATH OF YOUR WAV FILE";
- ret = wav_player_start(wav_path, SOUND_TYPE_MEDIA, _playback_completed_cb,
- (void*)wav_path, &wav_player_id);
+ ret = wav_player_start(wav_path, SOUND_TYPE_MEDIA, _playback_completed_cb, (void*)wav_path, &wav_player_id);
}
</pre>
<p>To set the path of your WAV file, you may need to retrieve the default path for audio files. For more information, see the <a href="../data/data_storages_n.htm">Data Storages</a> guide.</p>
<p>The following example code implements a simple callback that prints the previous and current audio recorder states:</p>
<pre class="prettyprint">
static void
-_state_changed_cb(recorder_state_e previous, recorder_state_e current,
- bool by_policy, void *user_data)
+_state_changed_cb(recorder_state_e previous, recorder_state_e current, bool by_policy, void *user_data)
{
- dlog_print(DLOG_INFO, LOG_TAG,
- "_recorder_state_changed_cb (prev: %d, curr: %d)\n",
- previous, current);
+ dlog_print(DLOG_INFO, LOG_TAG, "_recorder_state_changed_cb (prev: %d, curr: %d)\n", previous, current);
}
</pre>
</li>
<pre class="prettyprint">
/* Create the file name */
if (localtime_r(&rawtime, &localtime) != NULL) {
- size = snprintf(filename, sizeof(filename),
- "%s/%s-%04i-%02i-%02i_%02i:%02i:%02i.3gp",
+ size = snprintf(filename, sizeof(filename), "%s/%s-%04i-%02i-%02i_%02i:%02i:%02i.3gp",
app_get_data_path(), FILENAME_PREFIX,
- localtime.tm_year + 1900,
- localtime.tm_mon + 1, localtime.tm_mday,
+ localtime.tm_year + 1900, localtime.tm_mon + 1, localtime.tm_mday,
localtime.tm_hour, localtime.tm_min, localtime.tm_sec);
} else {
/* Error handling */
<li>
<p>Register a callback using the <code>recorder_set_recording_limit_reached_cb()</code> function:</p>
<pre class="prettyprint">
-error_code =
- recorder_set_recording_limit_reached_cb(g_recorder,
- _recorder_recording_limit_reached_cb,
- NULL);
+error_code = recorder_set_recording_limit_reached_cb(g_recorder, _recorder_recording_limit_reached_cb, NULL);
</pre>
</li>
<li>
<p>The following example code implements a simple callback that prints a notification about reaching the recording limit:</p>
<pre class="prettyprint">
static void
-_recorder_recording_limit_reached_cb(recorder_recording_limit_type_e type,
- void *user_data)
+_recorder_recording_limit_reached_cb(recorder_recording_limit_type_e type, void *user_data)
{
dlog_print(DLOG_DEBUG, LOG_TAG, "Recording limit reached: %d\n", type);
}
recorder_state_e state;
int error_code = recorder_get_state(recorder, &state);
- dlog_print(DLOG_INFO, LOG_TAG,
- "recorder state = %d, expected recorder state = %d",
- state, expected_state);
+ dlog_print(DLOG_INFO, LOG_TAG, "recorder state = %d, expected recorder state = %d", state, expected_state);
if (state == expected_state)
return TRUE;
}
/* Stop the recorder and save the recorded data to a file */
-if (_recorder_expect_state(g_recorder, RECORDER_STATE_RECORDING)
- || _recorder_expect_state(g_recorder, RECORDER_STATE_PAUSED)) {
+if (_recorder_expect_state(g_recorder, RECORDER_STATE_RECORDING) || _recorder_expect_state(g_recorder, RECORDER_STATE_PAUSED)) {
error_code = recorder_commit(g_recorder);
if (error_code != RECORDER_ERROR_NONE) {
dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
<li>
<p>Register a callback using the <code>recorder_set_recording_limit_reached_cb()</code> function:</p>
<pre class="prettyprint">
-ret = recorder_set_recording_limit_reached_cb(rec_data.recorder,
- _recorder_recording_limit_reached_cb,
- 0);
+ret = recorder_set_recording_limit_reached_cb(rec_data.recorder, _recorder_recording_limit_reached_cb, 0);
</pre>
</li>
<p>The following example code implements a simple callback that prints a notification about reaching the recording limit:</p>
<pre class="prettyprint">
static void
-_recorder_recording_limit_reached_cb(recorder_recording_limit_type_e type,
- void *user_data)
+_recorder_recording_limit_reached_cb(recorder_recording_limit_type_e type, void *user_data)
{
dlog_print(DLOG_DEBUG, "Video Recorder", "Recording limit reached: %d\n", type);
}
<p>Register a callback using the <code>recorder_set_state_changed_cb()</code> function:</p>
<pre class="prettyprint">
/* Set the state change callback for the video recorder */
-error_code = recorder_set_state_changed_cb(rec_data.recorder,
- on_state_changed_cb, NULL);
+error_code = recorder_set_state_changed_cb(rec_data.recorder, on_state_changed_cb, NULL);
if (error_code == RECORDER_ERROR_NONE)
dlog_print(DLOG_INFO, LOG_TAG, "error code = %d", error_code);
else
<pre class="prettyprint">
/* State change callback for the video recorder */
static void
-on_state_changed_cb(recorder_state_e previous, recorder_state_e current,
- bool by_asm, void *data)
+on_state_changed_cb(recorder_state_e previous, recorder_state_e current, bool by_asm, void *data)
{
- dlog_print(DLOG_DEBUG, LOG_TAG,
- "_recorder_state_changed_cb (prev: %d, curr: %d)\n",
- previous, current);
+ dlog_print(DLOG_DEBUG, LOG_TAG, "_recorder_state_changed_cb (prev: %d, curr: %d)\n", previous, current);
}
</pre>
</li>
static bool
_video_encoder_cb(recorder_video_codec_e codec, void *user_data)
{
- recorder_video_codec_e * supported_codec =
- (recorder_video_codec_e*)user_data;
+ recorder_video_codec_e * supported_codec = (recorder_video_codec_e*)user_data;
*supported_codec = codec;
return false;
}
-error_code = recorder_foreach_supported_video_encoder(rec_data.recorder,
- _video_encoder_cb,
- &supported_codec);
+error_code = recorder_foreach_supported_video_encoder(rec_data.recorder, _video_encoder_cb, &supported_codec);
</pre>
<p>The possible video codec values are defined in the <code>recorder_video_codec_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#gaaf3f0deeb1717f568e2b93bb9a375b63">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#gaaf3f0deeb1717f568e2b93bb9a375b63">wearable</a> applications).</p>
</li>
<p>Set the file format using the <code>recorder_set_file_format()</code> function. Make sure the file format matches the video codec.</p>
<pre class="prettyprint">
/* Set the file format */
-error_code = recorder_set_file_format(rec_data.recorder,
- RECORDER_FILE_FORMAT_MP4);
+error_code = recorder_set_file_format(rec_data.recorder, RECORDER_FILE_FORMAT_MP4);
</pre>
<p>The possible file format values are defined in the <code>recorder_file_format_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga7d3dbf7b0b3ef68101562b89e81ecf1e">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html#ga7d3dbf7b0b3ef68101562b89e81ecf1e">wearable</a> applications).</p>
</li>
/* Create the file name */
if (localtime_r(&rawtime, &localtime) != NULL) {
- size = snprintf(filename, sizeof(filename),
- "%s/%s-%04i-%02i-%02i_%02i:%02i:%02i.mp4",
+ size = snprintf(filename, sizeof(filename), "%s/%s-%04i-%02i-%02i_%02i:%02i:%02i.mp4",
app_get_data_path(), FILENAME_PREFIX,
- localtime.tm_year + 1900,
- localtime.tm_mon + 1, localtime.tm_mday,
+ localtime.tm_year + 1900, localtime.tm_mon + 1, localtime.tm_mday,
localtime.tm_hour, localtime.tm_min, localtime.tm_sec);
} else {
/* Error handling */
media_format_h vfmt_encoded = NULL;
/* Define encoded video format */
media_format_create(&vfmt_encoded);
-if (media_format_set_video_mime(vfmt_encoded, MEDIA_FORMAT_H263)
- != MEDIA_FORMAT_ERROR_NONE)
+if (media_format_set_video_mime(vfmt_encoded, MEDIA_FORMAT_H263) != MEDIA_FORMAT_ERROR_NONE)
g_print("media_format_set_video_mime failed!");
media_format_set_video_width(vfmt_encoded, 800);
<p>The video converter, video scale, video encoder, video filter, and video parser elements are logically connected inside the video encoder node. They are all initially predefined in the <code>.ini</code> file.</p>
<pre class="prettyprint">
media_streamer_node_h video_enc = NULL;
-media_streamer_node_create(MEDIA_STREAMER_NODE_TYPE_VIDEO_ENCODER, NULL,
- vfmt_encoded, &video_enc);
+media_streamer_node_create(MEDIA_STREAMER_NODE_TYPE_VIDEO_ENCODER, NULL, vfmt_encoded, &video_enc);
</pre>
<p>Add the video encoder node to the media streamer:</p>
<pre class="prettyprint">
<li>Create the video pay node:
<pre class="prettyprint">
media_streamer_node_h video_pay = NULL;
-media_streamer_node_create(MEDIA_STREAMER_NODE_TYPE_VIDEO_PAY, NULL,
- vfmt_encoded, &video_pay);
+media_streamer_node_create(MEDIA_STREAMER_NODE_TYPE_VIDEO_PAY, NULL, vfmt_encoded, &video_pay);
</pre>
</li>
<li>Add the video pay node to the media streamer:
int src_pad_num = 0;
char **sink_pad_name = NULL;
int sink_pad_num = 0;
-media_streamer_node_get_pad_name(video_pay, &src_pad_name, src_pad_num,
- &sink_pad_name, &sink_pad_num);
+media_streamer_node_get_pad_name(video_pay, &src_pad_name, src_pad_num, &sink_pad_name, &sink_pad_num);
</pre>
</li>
<li>Link the nodes consequently into a line:
media_format_h vfmt_encoded = NULL;
/* Define the encoded video format */
media_format_create(&vfmt_encoded);
-if (media_format_set_video_mime(vfmt_encoded, MEDIA_FORMAT_H263)
- != MEDIA_FORMAT_ERROR_NONE)
+if (media_format_set_video_mime(vfmt_encoded, MEDIA_FORMAT_H263) != MEDIA_FORMAT_ERROR_NONE)
g_print("media_format_set_video_mime failed!");
media_format_set_video_width(vfmt_encoded, 800);
<li>Create the video depay node:
<pre class="prettyprint">
media_streamer_node_h video_depay= NULL;
-media_streamer_node_create(MEDIA_STREAMER_NODE_TYPE_VIDEO_DEPAY, NULL,
- vfmt_encoded, &video_depay);
+media_streamer_node_create(MEDIA_STREAMER_NODE_TYPE_VIDEO_DEPAY, NULL, vfmt_encoded, &video_depay);
</pre>
</li>
<li>Add the video depay node to the media streamer:
<p>The video decoder, video parser, video converter, and video scale elements are logically connected inside the video decider node. They are all initially predefined in the <code>.ini</code> file.</p>
<pre class="prettyprint">
media_streamer_node_h video_dec = NULL;
-media_streamer_node_create(MEDIA_STREAMER_NODE_TYPE_VIDEO_DECODER, NULL,
- vfmt_encoded, &video_dec);
+media_streamer_node_create(MEDIA_STREAMER_NODE_TYPE_VIDEO_DECODER, NULL, vfmt_encoded, &video_dec);
</pre>
<p>Add the video decoder node to the media streamer:</p>
<pre class="prettyprint">
<li>Create the video queue node:
<pre class="prettyprint">
media_streamer_node_h video_queue= NULL;
-media_streamer_node_create(MEDIA_STREAMER_NODE_TYPE_QUEUE, NULL,
- vfmt_encoded, &video_queue);
+media_streamer_node_create(MEDIA_STREAMER_NODE_TYPE_QUEUE, NULL, vfmt_encoded, &video_queue);
</pre>
<p>Add the video queue node to the media streamer:</p>
<pre class="prettyprint">
music_test_path = malloc(path_len);
memset(music_test_path, 0x0, path_len);
- snprintf(music_test_path, path_len, "%s/%s",
- internal_music_storage_path, music_file_name);
+ snprintf(music_test_path, path_len, "%s/%s", internal_music_storage_path, music_file_name);
}
</pre>
</li>
char *path = NULL;
error = storage_foreach_device_supported(storage_cb, NULL);
- error = storage_get_directory(internal_storage_id,
- STORAGE_DIRECTORY_MUSIC, &path);
+ error = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_MUSIC, &path);
if (error != STORAGE_ERROR_NONE) {
internal_music_storage_path = strdup(path);
free(path);
music_test_path = malloc(path_len);
memset(music_test_path, 0x0, path_len);
- strncat(music_test_path, internal_music_storage_path,
- strlen(internal_music_storage_path));
+ strncat(music_test_path, internal_music_storage_path, strlen(internal_music_storage_path));
strncat(music_test_path, music_file_name, strlen(music_file_name));
path_len = strlen(internal_video_storage_path) + strlen(video_file_name) + 1;
video_test_path = malloc(path_len);
memset(video_test_path, 0x0, path_len);
- strncat(video_test_path, internal_video_storage_path,
- strlen(internal_video_storage_path));
+ strncat(video_test_path, internal_video_storage_path, strlen(internal_video_storage_path));
strncat(video_test_path, video_file_name, strlen(video_file_name));
}
</pre>
void *artwork = NULL;
char *artwork_mime = NULL;
-ret = metadata_extractor_get_artwork(g_metadata_h, &artwork,
- &artwork_size, &artwork_mime);
-dlog_print(DLOG_DEBUG, LOG_TAG,
- "Artwork: size: %d, mime type: %s\n", artwork_size, artwork_mime);
+ret = metadata_extractor_get_artwork(g_metadata_h, &artwork, &artwork_size, &artwork_mime);
+dlog_print(DLOG_DEBUG, LOG_TAG, "Artwork: size: %d, mime type: %s\n", artwork_size, artwork_mime);
if (artwork != NULL) {
free(artwork);
artwork = NULL;
ret = metadata_extractor_get_synclyrics(g_metadata_h, 1, &time_info, &lyrics);
if (lyrics != NULL) {
- dlog_print(DLOG_DEBUG, LOG_TAG,
- "Synclyrics: time_info: %d, lyrics: %s\n", time_info, lyrics);
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Synclyrics: time_info: %d, lyrics: %s\n", time_info, lyrics);
free(lyrics);
lyrics = NULL;
}
/* Use metadata_extractor_get_frame_at_time() */
unsigned long timestamp = 500;
-ret = metadata_extractor_get_frame_at_time(g_metadata_h, timestamp, true,
- &frame, &frame_size);
+ret = metadata_extractor_get_frame_at_time(g_metadata_h, timestamp, true, &frame, &frame_size);
dlog_print(DLOG_DEBUG, LOG_TAG, "Frame at %d: size: %d\n", timestamp, frame_size);
if (frame != NULL) {
free(frame);
static void
on_radio_interrupted(radio_interrupted_code_e code, void* userdata)
{
- /* Search the radio handle from userdata */
+ /* Retrieve the radio handle from userdata */
mRadioInfo* mRadio = (mRadioInfo *)userdata;
switch (code) {
/* Initialize the audio input device */
audio_in_h input;
-error_code = audio_in_create(SAMPLE_RATE, AUDIO_CHANNEL_MONO,
- AUDIO_SAMPLE_TYPE_S16_LE, &input);
+error_code = audio_in_create(SAMPLE_RATE, AUDIO_CHANNEL_MONO, AUDIO_SAMPLE_TYPE_S16_LE, &input);
/* Initialize the audio output device */
audio_out_h output;
-error_code = audio_out_create(SAMPLE_RATE, AUDIO_CHANNEL_MONO, AUDIO_SAMPLE_TYPE_S16_LE,
- SOUND_TYPE_SYSTEM, &output);
+error_code = audio_out_create(SAMPLE_RATE, AUDIO_CHANNEL_MONO, AUDIO_SAMPLE_TYPE_S16_LE, SOUND_TYPE_SYSTEM, &output);
</pre>
<p>The audio input and output devices support the channel types defined in the <code>audio_channel_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html#ga4e07ead99d581a0a049e8ee632b858b4">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html#ga4e07ead99d581a0a049e8ee632b858b4">wearable</a> applications), and the sample types defined in the <code>audio_sample_type_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html#ga1e66f976b2890f5fc2e9e6ec71af7536">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html#ga1e66f976b2890f5fc2e9e6ec71af7536">wearable</a> applications). For playing the recorded audio, use the same channel and sample type in both audio devices.</p>
int error_code = audio_in_get_sample_type(input, &sample_type);
if (error_code != AUDIO_IO_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "audio_in_get_sample_type() failed! Error code = %d", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "audio_in_get_sample_type() failed! Error code = %d", error_code);
return;
}
int data_size = audio_out_write(handle, buffer, nbytes);
if (data_size < 0)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "audio_out_write() failed! Error code = %d", data_size);
+ dlog_print(DLOG_ERROR, LOG_TAG, "audio_out_write() failed! Error code = %d", data_size);
/* Release the memory allocated to the local buffer */
free(buffer);
<p>Calculate the buffer size based on the retrieved information:</p>
<pre class="prettyprint">
-int buffer_size = SAMPLE_RATE * (channel == AUDIO_CHANNEL_STEREO ? 2 : 1)
- * (sample_type == AUDIO_SAMPLE_TYPE_S16_LE ? 2 : 1);
+int buffer_size = SAMPLE_RATE * (channel == AUDIO_CHANNEL_STEREO ? 2 : 1) * (sample_type == AUDIO_SAMPLE_TYPE_S16_LE ? 2 : 1);
</pre>
</li>
FILE* fp_w = fopen(io_stream_w_path, "w");
if (!fp_w)
- dlog_print(DLOG_ERROR, LOG_TAG, "fopen() function failed while opening %s file!",
- io_stream_w_path);
+ dlog_print(DLOG_ERROR, LOG_TAG, "fopen() function failed while opening %s file!", io_stream_w_path);
</pre>
<p>The <code>storage_get_directory()</code> function of the Storage API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">wearable</a> applications) retrieves the storage path based on the storage ID. To retrieve the storage ID, use the <code>storage_foreach_device_supported()</code> function of the Storage API.</p>
</li>
*/
int error_code = audio_in_peek(handle, &buffer, &nbytes);
if (error_code != AUDIO_IO_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "audio_in_peek() failed! Error code = %d", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "audio_in_peek() failed! Error code = %d", error_code);
return;
}
/* Remove the recorded audio data from the internal input buffer */
error_code = audio_in_drop(handle);
if (error_code != AUDIO_IO_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "audio_in_drop() failed! Error code = %d", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "audio_in_drop() failed! Error code = %d", error_code);
}
}
</pre></li>
<p>Register and define a callback for checking the screen mirroring sink state using the <code>scmirroring_sink_set_state_changed_cb()</code> function:</p>
<pre class="prettyprint">
static void
-scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state,
- void *user_data)
+scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state, void *user_data)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "Received Callback error code[%d], state[%d]",
- error_code, state);
+ dlog_print(DLOG_ERROR, LOG_TAG, "Received Callback error code[%d], state[%d]", error_code, state);
switch (state) {
case SCMIRRORING_STATE_NULL:
static int
prepare_scmirroring_sink(scmirroring_display_type_e display_type)
{
- ret = scmirroring_sink_set_state_changed_cb(g_scmirroring,
- scmirroring_state_callback,
- NULL);
+ ret = scmirroring_sink_set_state_changed_cb(g_scmirroring, scmirroring_state_callback, NULL);
if (ret != SCMIRRORING_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "scmirroring_sink_set_state_changed_cb failed [%d]", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_set_state_changed_cb failed [%d]", ret);
return FALSE;
}
return FALSE;
}
- ret = scmirroring_sink_set_display(g_scmirroring,
- SCMIRRORING_DISPLAY_TYPE_EVAS,
- (void*)g_eo);
+ ret = scmirroring_sink_set_display(g_scmirroring, SCMIRRORING_DISPLAY_TYPE_EVAS, (void*)g_eo);
if (ret != SCMIRRORING_ERROR_NONE) {
dlog_print(DLOG_ERROR, LOG_TAG,
"scmirroring_sink_set_display failed [%d], display type [%d]",
return FALSE;
}
- ret = scmirroring_sink_set_display(g_scmirroring,
- SCMIRRORING_DISPLAY_TYPE_OVERLAY,
- (void*)g_win);
+ ret = scmirroring_sink_set_display(g_scmirroring, SCMIRRORING_DISPLAY_TYPE_OVERLAY, (void*)g_win);
if (ret != SCMIRRORING_ERROR_NONE) {
dlog_print(DLOG_ERROR, LOG_TAG,
"scmirroring_sink_set_display failed [%d], display type [%d]",
int ret;
ret = scmirroring_sink_set_ip_and_port(g_scmirroring, peer_ip, peer_port);
if (ret != SCMIRRORING_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "scmirroring_sink_set_ip_and_port failed [%d]", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_set_ip_and_port failed [%d]", ret);
return FALSE;
}
<p>The function sets the screen mirroring state to <code>SCMIRRORING_STATE_PLAYING</code> asynchronously.</p>
<pre class="prettyprint">
static void
-scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state,
- void *user_data)
+scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state, void *user_data)
{
int ret;
- dlog_print(DLOG_ERROR, LOG_TAG, "Received Callback error code[%d], state[%d]",
- error_code, state);
+ dlog_print(DLOG_ERROR, LOG_TAG, "Received Callback error code[%d], state[%d]", error_code, state);
switch (state) {
/* Other cases */
<p>If the state callback returns an error or the <code>SCMIRRORING_STATE_DISCONNECTED</code> state, <a href="#release">release the screen mirroring sink and its allocated resources</a>. This exception is caused by an internal error in the screen mirroring sink, or by the source device disconnecting the session.</p>
<pre class="prettyprint">
static void
-scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state,
- void *user_data)
+scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state, void *user_data)
{
int ret;
- dlog_print(DLOG_ERROR, LOG_TAG, "Received Callback error code[%d], state[%d]",
- error_code, state);
+ dlog_print(DLOG_ERROR, LOG_TAG, "Received Callback error code[%d], state[%d]", error_code, state);
if (error_code != SCMIRRORING_ERROR_NONE) {
ret = destroy_scmirroring_sink();
case SCMIRRORING_STATE_DISCONNECTED:
ret = scmirroring_sink_unprepare(g_scmirroring);
if (ret != SCMIRRORING_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "scmirroring_sink_unprepare failed [%d]", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_unprepare failed [%d]", ret);
return;
}
<li>
<p>Register a callback using the <code>sound_manager_set_session_interrupted_cb()</code> function:</p>
<pre class="prettyprint">
-error_code =
- sound_manager_set_session_interrupted_cb(_sound_session_interrupted_cb, NULL);
+error_code = sound_manager_set_session_interrupted_cb(_sound_session_interrupted_cb, NULL);
</pre>
</li>
<li>
<p>Define the session interrupt callback. The first parameter defines the interruption source using the <code>sound_session_interrupted_code_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga9d7c723a05f1eab1b1d535bfad527b93">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga9d7c723a05f1eab1b1d535bfad527b93">wearable</a> applications).</p>
<pre class="prettyprint">
static void
-sound_session_interrupted_cb(sound_session_interrupted_code_e code,
- void *user_data)
+sound_session_interrupted_cb(sound_session_interrupted_code_e code, void *user_data)
{
if (code == SOUND_SESSION_INTERRUPTED_BY_MEDIA)
/* Session interrupted by media application, handle accordingly */
<li>
<p>Register a callback using the <code>sound_manager_set_volume_changed_cb()</code> function:</p>
<pre class="prettyprint">
-error_code = sound_manager_set_volume_changed_cb(_sound_manager_volume_changed_cb,
- NULL);
+error_code = sound_manager_set_volume_changed_cb(_sound_manager_volume_changed_cb, NULL);
</pre>
</li>
<li>
int error_code;
static void
-_sound_manager_volume_changed_cb(sound_type_e type, unsigned int volume,
- void* user_data)
+_sound_manager_volume_changed_cb(sound_type_e type, unsigned int volume, void* user_data)
{
char buf[MBUF] = {0,};
<p>When calling the query functions, use the sound device handle as the first parameter (input) and the device information type enumerator as the second parameter (output).</p>
<p>The following example code shows how to retrieve information about sound device type and IO direction:</p>
<pre class="prettyprint">
-while ((_ret = sound_manager_get_next_device(list, &device)) ==
- SOUND_MANAGER_ERROR_NONE) {
+while ((_ret = sound_manager_get_next_device(list, &device)) == SOUND_MANAGER_ERROR_NONE) {
ret = sound_manager_get_device_type(device, &type);
if (type == SOUND_DEVICE_BLUETOOTH)
<pre class="prettyprint">
mask = SOUND_DEVICE_IO_DIRECTION_OUT_MASK | SOUND_DEVICE_IO_DIRECTION_BOTH_MASK;
-ret =
- sound_manager_set_device_connected_cb(mask,_sound_device_connected_cb, NULL);
+ret = sound_manager_set_device_connected_cb(mask, _sound_device_connected_cb, NULL);
</pre>
<p>Define the state change callback:</p>
<pre class="prettyprint">
static void
-_sound_device_connected_cb(sound_device_h device, bool is_connected,
- void* user_data)
+_sound_device_connected_cb(sound_device_h device, bool is_connected, void* user_data)
{
int ret;
sound_device_type_e type;
<pre class="prettyprint">
mask = SOUND_DEVICE_IO_DIRECTION_OUT_MASK | SOUND_DEVICE_IO_DIRECTION_BOTH_MASK;
-ret =
- sound_manager_set_device_information_changed_cb(mask,
- _sound_device_information_changed_cb,
- NULL);
+ret = sound_manager_set_device_information_changed_cb(mask,
+ _sound_device_information_changed_cb,
+ NULL);
</pre>
</li>
<li>
<li>To subscribe to notifications, use the <code>streamrecorder_set_notify_cb()</code> function to register a callback function. The parameters are a valid stream recorder handle, a callback function, and data passed to the callback.
<pre class="prettyprint">
/* Set the streamrecorder notify callback */
-error_code = streamrecorder_set_notify_cb(streamrec_data.streamrecorder,
- streamrecorder_notify_cb,
+error_code = streamrecorder_set_notify_cb(streamrec_data.streamrecorder, streamrecorder_notify_cb,
streamrec_data);
assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
</pre>
the streamrecorder gets notifications
*/
static void
-streamrecorder_set_notify_cb(streamrecorder_state_e previous,
- streamrecorder_state_e current,
+streamrecorder_set_notify_cb(streamrecorder_state_e previous, streamrecorder_state_e current,
streamrecorder_notify_e notification, void *data)
{
fprintf(stderr, "streamrecorder_notify (prev: %d, curr: %d)\n", previous, current);
static bool
_video_encoder_cb(streamrecorder_video_codec_e codec, void *user_data)
{
- streamrecorder_video_codec_e * supported_codec =
- (streamrecorder_video_codec_e*)user_data;
+ streamrecorder_video_codec_e * supported_codec = (streamrecorder_video_codec_e*)user_data;
supported_codec = codec;
return false;
}
-error_code =
- streamrecorder_foreach_supported_video_encoder(streamrec_data.streamrecorder,
- _video_encoder_cb,
- &supported_codec);
+error_code = streamrecorder_foreach_supported_video_encoder(streamrec_data.streamrecorder,
+ _video_encoder_cb,&supported_codec);
if (STREAMRECORDER_ERROR_NONE != error_code) {
/* Error handling */
assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
}
/* Set the stream recorder video encoder */
-error_code =
- streamrecorder_set_video_encoder(streamrec_data.streamrecorder,supported_codec);
+error_code = streamrecorder_set_video_encoder(streamrec_data.streamrecorder,supported_codec);
if (STREAMRECORDER_ERROR_NONE != error_code) {
/* Error handling */
assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
static char *g_file = "/opt/media/Downloads/myvideo.mp4";
/* Set bitrate of video encoder */
-error_code = streamrecorder_set_video_encoder_bitrate(streamrec_data.streamrecorder,
- g_bitrate);
+error_code = streamrecorder_set_video_encoder_bitrate(streamrec_data.streamrecorder, g_bitrate);
if (STREAMRECORDER_ERROR_NONE != error_code) {
/* Error handling */
assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
}
/* Set recording file format */
-error_code = streamrecorder_set_file_format(streamrec_data.streamrecorder,
- STREAMRECORDER_FILE_FORMAT_MP4);
+error_code = streamrecorder_set_file_format(streamrec_data.streamrecorder, STREAMRECORDER_FILE_FORMAT_MP4);
if (STREAMRECORDER_ERROR_NONE != error_code) {
/* Error handling */
assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
<p>Call the <code>streamrecorder_push_stream_buffer()</code> function, which pushes the media packet to record audio or video.</p>
<pre class="prettyprint">
/* Push the stream buffer to record audio or video */
-error_code = streamrecorder_push_stream_buffer(streamrec_data.streamrecorder,
- streamrec_data.media_packet);
+error_code = streamrecorder_push_stream_buffer(streamrec_data.streamrecorder, streamrec_data.media_packet);
if (STREAMRECORDER_ERROR_NONE != error_code) {
/* Error handling */
assert_eq(error_code, STREAMRECORDER_ERROR_NONE);
char *path = NULL;
error = storage_foreach_device_supported(storage_cb, NULL);
- error = storage_get_directory(internal_storage_id,
- STORAGE_DIRECTORY_IMAGES, &path);
+ error = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_IMAGES, &path);
if (error != STORAGE_ERROR_NONE) {
internal_image_storage_path = strdup(path);
free(path);
image_test_path = malloc(path_len);
memset(image_test_path, 0x0, path_len);
- strncat(image_test_path, internal_image_storage_path,
- strlen(internal_image_storage_path));
+ strncat(image_test_path, internal_image_storage_path, strlen(internal_image_storage_path));
strncat(image_test_path, image_file_name, strlen(image_file_name));
}
</pre>
*/
ret = push_service_request_unread_notification(push_conn);
if (ret != PUSH_SERVICE_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "ERROR: push_service_request_unread_notification() failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "ERROR: push_service_request_unread_notification() failed.");
}
</pre>
</li>
/* Reset the previously-stored registration ID */
ret = preference_set_string(PUSH_HASH_KEY, "");
if (ret != PREFERENCE_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "ERROR: Failed to initialize hash_value [%d : %s]",
- ret, get_error_message(ret));
+ dlog_print(DLOG_ERROR, LOG_TAG, "ERROR: Failed to initialize hash_value [%d : %s]", ret, get_error_message(ret));
/* Send a registration request to the push service */
ret = push_service_register(push_conn, _result_cb, user_data);
/* _noti_cb() is called if there are unread notifications */
ret = push_service_request_unread_notification(push_conn);
if (ret != PUSH_SERVICE_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "ERROR [%d]: push_service_request_unread_notification()", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "ERROR [%d]: push_service_request_unread_notification()", ret);
return;
}
/* Get the registration ID */
ret = push_service_get_registration_id(push_conn, &reg_id);
if (ret != PUSH_SERVICE_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "ERROR [%d]: push_service_get_registration_id()", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "ERROR [%d]: push_service_get_registration_id()", ret);
return;
}
If there is no hash string stored before or if the stored hash string
is different from the new one, send reg_id to the server
*/
- if (ret != PREFERENCE_ERROR_NONE || strncmp(stored_hash_value, hash_string,
- 2*SHA_DIGEST_LENGTH) !=0) {
+ if (ret != PREFERENCE_ERROR_NONE || strncmp(stored_hash_value, hash_string, 2 * SHA_DIGEST_LENGTH) !=0) {
/* Send the reg_id to your application server */
ret = _send_reg_id(reg_id);
app_control(app_control_h app_control, void *data)
{
char *value = NULL;
- app_control_get_extra_data(app_control, APP_CONTROL_DATA_PUSH_LAUNCH_TYPE,
- &value);
+ app_control_get_extra_data(app_control, APP_CONTROL_DATA_PUSH_LAUNCH_TYPE, &value);
if (value) {
if (!strcmp(value, EXTRA_DATA_FROM_NOTIFICATION))
/* Add your code here when push messages arrive */
if (push_conn) {
int ret = push_service_request_unread_notification(push_conn);
if (ret != PUSH_SERVICE_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "ERROR: push_service_request_unread_notification() failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "ERROR: push_service_request_unread_notification() failed.");
}
</pre>
<p>The difference between the <code>ALERT</code> and <code>SILENT</code> actions is that the former shows an alert message in the quick panel and changes the badge count, while the latter does not. If the user clicks the alert message in the quick panel, the push service <a href="#force_launch">forcibly launches the application</a> and delivers the notification through the app control callback function.</p></li>
"requestID": "0000001",
"sender": "oscal", /* Optional */
"type": 0 /* Optional */
- "message": "badgeOption=INCREASE&badgeNumber=1&action=ALERT
- &alertMessage=Hi", /* Optional */
+ "message": "badgeOption=INCREASE&badgeNumber=1&action=ALERT&alertMessage=Hi", /* Optional */
"appData": "{id:asdf&passwd:1234}", /* Optional, (Opaque) */
"sessionInfo": "002002", /* Optional */
"timeStamp": 1234567890, /* Optional */
bundle_add_str(extra_data, http://tizen.org/appcontrol/data/total_count, "3");
-attach_panel_add_content_category(s_info.attach_panel,
- ATTACH_PANEL_CONTENT_CATEGORY_IMAGE, extra_data);
-attach_panel_add_content_category(s_info.attach_panel,
- ATTACH_PANEL_CONTENT_CATEGORY_CAMERA, NULL);
-attach_panel_add_content_category(s_info.attach_panel,
- ATTACH_PANEL_CONTENT_CATEGORY_VOICE, NULL);
-attach_panel_add_content_category(s_info.attach_panel,
- ATTACH_PANEL_CONTENT_CATEGORY_VIDEO, NULL);
-attach_panel_add_content_category(s_info.attach_panel,
- ATTACH_PANEL_CONTENT_CATEGORY_AUDIO, NULL);
-attach_panel_add_content_category(s_info.attach_panel,
- ATTACH_PANEL_CONTENT_CATEGORY_CALENDAR, NULL);
-attach_panel_add_content_category(s_info.attach_panel,
- ATTACH_PANEL_CONTENT_CATEGORY_CONTACT, NULL);
-attach_panel_add_content_category(s_info.attach_panel,
- ATTACH_PANEL_CONTENT_CATEGORY_MYFILES, NULL);
-attach_panel_add_content_category(s_info.attach_panel,
- ATTACH_PANEL_CONTENT_CATEGORY_VIDEO_RECORDER, NULL);
+attach_panel_add_content_category(s_info.attach_panel, ATTACH_PANEL_CONTENT_CATEGORY_IMAGE, extra_data);
+attach_panel_add_content_category(s_info.attach_panel, ATTACH_PANEL_CONTENT_CATEGORY_CAMERA, NULL);
+attach_panel_add_content_category(s_info.attach_panel, ATTACH_PANEL_CONTENT_CATEGORY_VOICE, NULL);
+attach_panel_add_content_category(s_info.attach_panel, ATTACH_PANEL_CONTENT_CATEGORY_VIDEO, NULL);
+attach_panel_add_content_category(s_info.attach_panel, ATTACH_PANEL_CONTENT_CATEGORY_AUDIO, NULL);
+attach_panel_add_content_category(s_info.attach_panel, ATTACH_PANEL_CONTENT_CATEGORY_CALENDAR, NULL);
+attach_panel_add_content_category(s_info.attach_panel, ATTACH_PANEL_CONTENT_CATEGORY_CONTACT, NULL);
+attach_panel_add_content_category(s_info.attach_panel, ATTACH_PANEL_CONTENT_CATEGORY_MYFILES, NULL);
+attach_panel_add_content_category(s_info.attach_panel, ATTACH_PANEL_CONTENT_CATEGORY_VIDEO_RECORDER, NULL);
attach_panel_show(s_info.attach_panel);
bundle_free(extra_data);
<pre class="prettyprint">
static void
-_result_cb(attach_panel_h attach_panel,
- attach_panel_content_category_e content_category,
- app_control_h result, app_control_result_e result_code,
- void *data)
+_result_cb(attach_panel_h attach_panel, attach_panel_content_category_e content_category,
+ app_control_h result, app_control_result_e result_code, void *data)
{
char **select = NULL;
int i = 0;
/* Error handling */
if (APP_CONTROL_RESULT_SUCCEEDED != result_code)
/* Error handling */
- ret = app_control_get_extra_data_array(result,
- "http://tizen.org/appcontrol/data/selected",
- &select, &length);
+ ret = app_control_get_extra_data_array(result, "http://tizen.org/appcontrol/data/selected", &select, &length);
if (APP_CONTROL_ERROR_NONE != ret || !select)
/* Error handling */
}
static void
-_event_cb(attach_panel_h attach_panel, attach_panel_event_e event,
- void *event_info, void *data)
+_event_cb(attach_panel_h attach_panel, attach_panel_event_e event, void *event_info, void *data)
{
int ret = 0;
if (!)
bool visible = false;
if (s_info.attach_panel) {
- attach_panel_remove_content_category(s_info.attach_panel,
- ATTACH_PANEL_CONTENT_CATEGORY_IMAGE);
- attach_panel_remove_content_category(s_info.attach_panel,
- ATTACH_PANEL_CONTENT_CATEGORY_CAMERA);
- attach_panel_remove_content_category(s_info.attach_panel,
- ATTACH_PANEL_CONTENT_CATEGORY_VOICE);
- attach_panel_remove_content_category(s_info.attach_panel,
- ATTACH_PANEL_CONTENT_CATEGORY_VIDEO);
- attach_panel_remove_content_category(s_info.attach_panel,
- ATTACH_PANEL_CONTENT_CATEGORY_AUDIO);
- attach_panel_remove_content_category(s_info.attach_panel,
- ATTACH_PANEL_CONTENT_CATEGORY_CALENDAR);
- attach_panel_remove_content_category(s_info.attach_panel,
- ATTACH_PANEL_CONTENT_CATEGORY_CONTACT);
- attach_panel_remove_content_category(s_info.attach_panel,
- ATTACH_PANEL_CONTENT_CATEGORY_MYFILES);
- attach_panel_remove_content_category(s_info.attach_panel,
- ATTACH_PANEL_CONTENT_CATEGORY_VIDEO_RECORDER);
+ attach_panel_remove_content_category(s_info.attach_panel, ATTACH_PANEL_CONTENT_CATEGORY_IMAGE);
+ attach_panel_remove_content_category(s_info.attach_panel, ATTACH_PANEL_CONTENT_CATEGORY_CAMERA);
+ attach_panel_remove_content_category(s_info.attach_panel, ATTACH_PANEL_CONTENT_CATEGORY_VOICE);
+ attach_panel_remove_content_category(s_info.attach_panel, ATTACH_PANEL_CONTENT_CATEGORY_VIDEO);
+ attach_panel_remove_content_category(s_info.attach_panel, ATTACH_PANEL_CONTENT_CATEGORY_AUDIO);
+ attach_panel_remove_content_category(s_info.attach_panel, ATTACH_PANEL_CONTENT_CATEGORY_CALENDAR);
+ attach_panel_remove_content_category(s_info.attach_panel, ATTACH_PANEL_CONTENT_CATEGORY_CONTACT);
+ attach_panel_remove_content_category(s_info.attach_panel, ATTACH_PANEL_CONTENT_CATEGORY_MYFILES);
+ attach_panel_remove_content_category(s_info.attach_panel, ATTACH_PANEL_CONTENT_CATEGORY_VIDEO_RECORDER);
attach_panel_unset_result_cb(s_info.attach_panel);
attach_panel_unset_event_cb(s_info.attach_panel);
/* Error handling */
bundle_add_str(extra_data, http://tizen.org/appcontrol/data/total_count, "5");
- ret = attach_panel_set_extra_data(s_info.attach_panel,
- ATTACH_PANEL_CONTENT_CATEGORY_IMAGE, extra_data);
+ ret = attach_panel_set_extra_data(s_info.attach_panel, ATTACH_PANEL_CONTENT_CATEGORY_IMAGE, extra_data);
if (ATTACH_PANEL_ERROR_NONE != ret)
/* Error handling */
bundle_free(extra_data);
ret = attach_panel_create(s_info.conformant, &attach_panel);
if (ret != ATTACH_PANEL_ERROR_NONE || !attach_panel)
/* Error handling */
- attach_panel_add_content_category(s_info.attach_panel,
- ATTACH_PANEL_CONTENT_CATEGORY_CAMERA, NULL);
+ attach_panel_add_content_category(s_info.attach_panel, ATTACH_PANEL_CONTENT_CATEGORY_CAMERA, NULL);
attach_panel_show(attach_panel);
s_info.attach_panel = attach_panel;
}
<pre class="prettyprint">
Evas_Object *win;
-win = minicontrol_create_window("mini-sample",
- MINICONTROL_TARGET_VIEWER_QUICK_PANEL, NULL);
+win = minicontrol_create_window("mini-sample", MINICONTROL_TARGET_VIEWER_QUICK_PANEL, NULL);
evas_object_resize(win, 480, 140);
evas_object_show(win);
</pre>
<p>To set the timestamp to display in the notification text, use the <code>notification_set_time_to_text()</code> function.</p>
<p>The second parameter defines the notification text type in which the timestamp is shown. Its values are listed in the <code>_notification_text_type</code> enumeration.</p>
<pre class="prettyprint">
-ret = notification_set_time_to_text(notification, NOTIFICATION_TEXT_TYPE_CONTENT,
- time(NULL));
+ret = notification_set_time_to_text(notification, NOTIFICATION_TEXT_TYPE_CONTENT, time(NULL));
if (ret != NOTIFICATION_ERROR_NONE)
/* Error handling */
</pre>
<p>The second parameter defines the notification display option, whose possible values are listed in the <code>_notification_display_applist</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html#gaf7944456661e023a3bac1f430eb680a2">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html#gaf7944456661e023a3bac1f430eb680a2">wearable</a> applications). You can set multiple options with the "|" pipe operation.</p>
<pre class="prettyprint">
ret = notification_set_display_applist(notification,
- NOTIFICATION_DISPLAY_APP_NOTIFICATION_TRAY
- | NOTIFICATION_DISPLAY_APP_TICKER);
+ NOTIFICATION_DISPLAY_APP_NOTIFICATION_TRAY | NOTIFICATION_DISPLAY_APP_TICKER);
if (ret != NOTIFICATION_ERROR_NONE)
/* Error handling */
</pre>
app_control_create(&app_control);
app_control_set_app_id(app_control, "org.tizen.app");
-noti_err =
- notification_set_event_handler(noti,
- NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_1,
- app_control);
+noti_err = notification_set_event_handler(noti, NOTIFICATION_EVENT_TYPE_CLICK_ON_BUTTON_1, app_control);
if (noti_err != NOTIFICATION_ERROR_NONE)
/* Error handling */
<li>Add the required information in the manifest file:
<pre class="prettyprint">
<account>
- <account-provider appid="app-id name" providerid="url style string"
- multiple-accounts-support="true or false">
+ <account-provider appid="app-id name" providerid="url style string" multiple-accounts-support="true or false">
<icon section="account">application icon name</icon>
<icon section="account-small">application small icon name</icon>
<label>Application name</label>
int id[3];
static account_h account = NULL;
-Create_Account(&account, "Person", "DiplayPerson",
- "Person Domain", "someone1@somewho.com");
+Create_Account(&account, "Person", "DiplayPerson", "Person Domain", "someone1@somewho.com");
account_set_capability(account, "Custom", ACCOUNT_CAPABILITY_ENABLED);
<li><p>Add 3 more accounts to the database:</p>
<pre class="prettyprint">
-Create_Account(&account, "PersonX", "DisplayX",
- "Other Domain", "someone2@somewho.com");
+Create_Account(&account, "PersonX", "DisplayX", "Other Domain", "someone2@somewho.com");
account_insert_to_db(account, &id[1]);
account_destroy(account);
-Create_Account(&account, "Human", "Humanity",
- "Everyone", "someone3@somewho.com");
+Create_Account(&account, "Human", "Humanity", "Everyone", "someone3@somewho.com");
account_insert_to_db(account, &id[2]);
account_destroy(account);
-Create_Account(&account, "LastOne", "LastDisplay",
- "Last Domain", "someone4@somewho.com");
+Create_Account(&account, "LastOne", "LastDisplay", "Last Domain", "someone4@somewho.com");
account_insert_to_db(account, &id[3]);
account_destroy(account);
<pre class="prettyprint">
static int
-Create_Account(account_h* account, char* account_name, char* display_name,
- char* domain_name, char* email_address)
+Create_Account(account_h* account, char* account_name, char* display_name, char* domain_name, char* email_address)
{
account_create(account);
<p>The following function allows the user to find all accounts with a specified capability on a specified state. Once again, the callback function is required.</p>
<pre class="prettyprint">
-account_query_account_by_capability(on_account_read, "Custom",
- ACCOUNT_CAPABILITY_ENABLED, NULL);
+account_query_account_by_capability(on_account_read, "Custom", ACCOUNT_CAPABILITY_ENABLED, NULL);
</pre>
</li>
account_query_capability_by_account_id(_capability_cb, id[0], NULL);
static bool
-_capability_cb(const char *capability_type,
- account_capability_state_e capability_state, void *user_data)
+_capability_cb(const char *capability_type, account_capability_state_e capability_state, void *user_data)
{
char buf[200];
- sprintf(buf, "Found capability: %s on state %d\n",
- capability_type, capability_state);
+ sprintf(buf, "Found capability: %s on state %d\n", capability_type, capability_state);
return true;
}
{
int ret = 0;
i18n_uchar utf16_timezone[64] = {0};
- i18n_ustring_copy_ua_n(utf16_timezone, tzid,
- sizeof(utf16_timezone)/sizeof(i18n_uchar));
+ i18n_ustring_copy_ua_n(utf16_timezone, tzid, sizeof(utf16_timezone)/sizeof(i18n_uchar));
i18n_ucalendar_h ucal = NULL;
char *loc_default = NULL;
i18n_ulocale_get_default((const char **)&loc_default);
- ret = i18n_ucalendar_create(utf16_timezone, -1, loc_default,
- I18N_UCALENDAR_GREGORIAN, &ucal);
+ ret = i18n_ucalendar_create(utf16_timezone, -1, loc_default, I18N_UCALENDAR_GREGORIAN, &ucal);
if (I18N_ERROR_NONE != ret) {
dlog_print(DLOG_DEBUG, LOG_TAG, "i18n_ucalendar_create() failed (%d)\n", ret);
calendar_filter_create(_calendar_event._uri, &filter);
/* Add a 'priority equals high' condition */
-calendar_filter_add_int(filter, _calendar_event.priority, CALENDAR_MATCH_EQUAL,
- CALENDAR_EVENT_PRIORITY_HIGH);
+calendar_filter_add_int(filter, _calendar_event.priority, CALENDAR_MATCH_EQUAL, CALENDAR_EVENT_PRIORITY_HIGH);
/* Add OR operator */
calendar_filter_add_operator(filter, CALENDAR_FILTER_OPERATOR_OR);
/* Add a 'description contains "meeting"' condition */
-calendar_filter_add_str(filter, _calendar_event.description,
- CALENDAR_MATCH_CONTAINS, "meeting");
+calendar_filter_add_str(filter, _calendar_event.description, CALENDAR_MATCH_CONTAINS, "meeting");
</pre>
<p>Insert the filter into the query and execute the query:</p>
/* Set query with filter */
calendar_query_create(_calendar_event_calendar_book_attendee._uri, &query);
calendar_filter_create(_calendar_event_calendar_book_attendee._uri, &filter);
-calendar_filter_add_str(filter, _calendar_event.summary,
- CALENDAR_MATCH_CONTAINS, "test");
+calendar_filter_add_str(filter, _calendar_event.summary, CALENDAR_MATCH_CONTAINS, "test");
calendar_query_set_filter(query, filter);
/* Set projection */
<p>Set the description.</p>
<p>To set the description for the event, use the <code>calendar_record_set_str()</code> function with the <code>_calendar_event.description</code> property as the second parameter:</p>
<pre class="prettyprint">
-error_code = calendar_record_set_str(event, _calendar_event.description,
- "description");
+error_code = calendar_record_set_str(event, _calendar_event.description, "description");
if (error_code != CALENDAR_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "set description failed: %x\n", error_code);
</pre>
<p>Set the time zone for the start and end times.</p>
<p>To set the time zone for the event start and end times, use the <code>calendar_record_set_str()</code> function with the <code>_calendar_event.start_tzid</code> and <code>_calendar_event.end_tzid</code> properties as the second parameter. If you do not set the time zone, the system uses UTC.</p>
<pre class="prettyprint">
-error_code = calendar_record_set_str(event, _calendar_event.start_tzid,
- "Asia/Seoul");
+error_code = calendar_record_set_str(event, _calendar_event.start_tzid, "Asia/Seoul");
if (error_code != CALENDAR_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "set start_tzid failed: %x\n", error_code);
calendar_time_s starttime = {0};
starttime.type = CALENDAR_TIME_UTIME;
starttime.time.utime = 1404036000; /* 2014/06/29 10:00:00 UTC */
-error_code = calendar_record_set_caltime(event, _calendar_event.start_time,
- starttime);
+error_code = calendar_record_set_caltime(event, _calendar_event.start_time, starttime);
if (error_code != CALENDAR_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "set start_time failed: %x\n", error_code);
if (error_code != CALENDAR_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "set interval failed: %x\n", error_code);
-error_code =
- calendar_record_set_str(event, _calendar_event.bymonthday, "3,4,5");
+error_code = calendar_record_set_str(event, _calendar_event.bymonthday, "3,4,5");
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "set bymonthday failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "set bymonthday failed: %x\n", error_code);
</pre>
</li>
<li>
error_code = calendar_record_set_int(event, _calendar_event.range_type,
CALENDAR_RANGE_COUNT);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "set range_type failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "set range_type failed: %x\n", error_code);
error_code = calendar_record_set_int(event, _calendar_event.count, 8);
if (error_code != CALENDAR_ERROR_NONE)
int id = -1;
error_code = calendar_db_insert_record(event, &id);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "calendar_db_insert_record failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "calendar_db_insert_record failed: %x\n", error_code);
dlog_print(DLOG_ERROR, LOG_TAG, "id: %d\n", id);
</pre>
calendar_list_h list = NULL;
error_code = calendar_db_get_all_records(_calendar_event._uri, 0, 0, &list);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "calendar_db_get_all_records failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "calendar_db_get_all_records failed: %x\n", error_code);
</pre>
</li>
<li>
error_code = calendar_query_create(_calendar_event._uri, &query);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "calendar_query_create failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "calendar_query_create failed: %x\n", error_code);
</pre>
</li>
<li>
error_code = calendar_filter_create(_calendar_event._uri, &filter);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "calendar_filter_create failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "calendar_filter_create failed: %x\n", error_code);
</pre>
</li>
<li>
<p>Add a filtering condition using the <code>calendar_filter_add_XXX()</code> function.</p>
<p>The following example adds a string-based filtering condition that retrieves the events whose summary field contains the string "summary to find":</p>
<pre class="prettyprint">
-error_code =
- calendar_filter_add_str(filter, _calendar_event.summary,
- CALENDAR_MATCH_CONTAINS, "summary to find");
+error_code = calendar_filter_add_str(filter, _calendar_event.summary,
+ CALENDAR_MATCH_CONTAINS, "summary to find");
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "filter add condition failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "filter add condition failed: %x\n", error_code);
</pre>
</li>
<li>
<p>The following example first adds an AND operator and then a string-based filtering condition that retrieves the events whose description field contains the string "description to find".</p>
<p>The combination of the AND operator and the 2 conditions means that the filter only retrieves the events that contain "summary to find" in their summary and "description to find" in their description.</p>
<pre class="prettyprint">
-error_code =
- calendar_filter_add_operator(filter, CALENDAR_FILTER_OPERATOR_AND);
+error_code = calendar_filter_add_operator(filter, CALENDAR_FILTER_OPERATOR_AND);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "calendar_filter_add_operator failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "calendar_filter_add_operator failed: %x\n", error_code);
error_code = calendar_filter_add_str(filter, _calendar_event.description,
- CALENDAR_MATCH_CONTAINS,
- "description to find");
+ CALENDAR_MATCH_CONTAINS, "description to find");
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "filter add condition failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "filter add condition failed: %x\n", error_code);
</pre>
<p>You can also create a filter with integer and time conditions. For example, to filter all-day events that start after January 1st, 2016:</p>
<pre class="prettyprint">
time_to_compare.time.date.month = 1;
time_to_compare.time.date.year = 2016;
error_code = calendar_filter_add_caltime(filter, _calendar_event.start_time,
- CALENDAR_MATCH_GREATER_THAN,
- time_to_compare);
+ CALENDAR_MATCH_GREATER_THAN, time_to_compare);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "filter add condition failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "filter add condition failed: %x\n", error_code);
</pre>
<p>The <code>type</code> parameter of the <code>calendar_time_s</code> structure (in <a href="../../../../org.tizen.native.mobile.apireference/structcalendar__time__s.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/structcalendar__time__s.html">wearable</a> applications) determines whether the event is an all-day event (<code>CALENDAR_TIME_LOCALTIME</code>) or a non-all-day event (<code>CALENDAR_TIME_UTIME</code>).</p>
<p>To retrieve the specified time period, use 2 conditions using <code>CALENDAR_MATCH_GREATER_THAN</code> and <code>CALENDAR_MATCH_LESS_THAN</code> with the operator <code>CALENDAR_FILTER_OPERATOR_AND</code>. You can also use <code>CALENDAR_MATCH_EQUAL</code> to set an equality condition.</p>
<pre class="prettyprint">
error_code = calendar_query_set_filter(query, filter);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "calendar_query_set_filter failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "calendar_query_set_filter failed: %x\n", error_code);
</pre>
</li>
<li>
<pre class="prettyprint">
error_code = calendar_db_get_records_with_query(query, 0, 0, &list);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "calendar_db_get_records_with_query failed: %x\n",
- error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "calendar_db_get_records_with_query failed: %x\n", error_code);
</pre>
<p>The third parameter defines a limit for the number of results. If you set it to 0, the list returns all events matching the query.</p>
</li>
error_code = calendar_record_get_str(record, _calendar_event.description,
&gl_event_data->description);
if (error_code != CALENDAR_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "get description failed: %i\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "get description failed: %i\n", error_code);
_free_gl_event_data(gl_event_data);
return NULL;
}
- error_code = calendar_record_get_int(record, _calendar_event.id,
- &gl_event_data->id);
+ error_code = calendar_record_get_int(record, _calendar_event.id, &gl_event_data->id);
if (error_code != CALENDAR_ERROR_NONE) {
dlog_print(DLOG_ERROR, LOG_TAG, "get id failed: %i\n", error_code);
_free_gl_event_data(gl_event_data);
if (error_code != CALENDAR_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "set summary failed: %x\n", error_code);
-error_code = calendar_record_set_str(record, _calendar_event.description,
- "description updated");
+error_code = calendar_record_set_str(record, _calendar_event.description, "description updated");
if (error_code != CALENDAR_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "set description failed: %x\n", error_code);
</pre>
<pre class="prettyprint">
error_code = calendar_db_update_record(record);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "calendar_db_update_record failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "calendar_db_update_record failed: %x\n", error_code);
</pre>
</li>
et.time.utime = 1354582800;
error_code += calendar_record_set_caltime(event, _calendar_event.end_time, et);
-error_code += calendar_record_set_int(event, _calendar_event.freq,
- CALENDAR_RECURRENCE_MONTHLY);
+error_code += calendar_record_set_int(event, _calendar_event.freq, CALENDAR_RECURRENCE_MONTHLY);
error_code += calendar_record_set_int(event, _calendar_event.interval, 1);
error_code += calendar_record_set_str(event, _calendar_event.bymonthday, "3,4,5");
-error_code += calendar_record_set_int(event, _calendar_event.range_type,
- CALENDAR_RANGE_COUNT);
+error_code += calendar_record_set_int(event, _calendar_event.range_type, CALENDAR_RANGE_COUNT);
error_code += calendar_record_set_int(event, _calendar_event.count, 8);
if (error_code != CALENDAR_ERROR_NONE)
int event_id;
error_code = calendar_db_insert_record(event, &event_id);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "calendar_db_insert_record failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "calendar_db_insert_record failed: %x\n", error_code);
calendar_record_destroy(event, true);
</pre>
error_code = CALENDAR_ERROR_NONE;
error_code += calendar_record_clone(event, &clone);
-error_code += calendar_record_set_int(clone, _calendar_event.original_event_id,
- event_id);
-error_code += calendar_record_set_str(clone, _calendar_event.recurrence_id,
- "20121005T010000Z");
+error_code += calendar_record_set_int(clone, _calendar_event.original_event_id, event_id);
+error_code += calendar_record_set_str(clone, _calendar_event.recurrence_id, "20121005T010000Z");
if (error_code != CALENDAR_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "cloning the event failed: %x\n", error_code);
int exdate_event_id = 0;
error_code = calendar_db_insert_record(clone, &exdate_event_id);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "calendar_db_insert_record failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "calendar_db_insert_record failed: %x\n", error_code);
calendar_record_destroy(clone, true);
calendar_record_destroy(event, true);
<li>
<p>Register a callback using the <code>calendar_db_add_changed_cb()</code> function:</p>
<pre class="prettyprint">
-error_code = calendar_db_add_changed_cb(_calendar_event._uri, _event_changed_callback,
- NULL);
+error_code = calendar_db_add_changed_cb(_calendar_event._uri, _event_changed_callback, NULL);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "calendar_db_add_changed_cb failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "calendar_db_add_changed_cb failed: %x\n", error_code);
</pre>
</li>
<p>Set the description.</p>
<p>To set the description for the todo, use the <code>calendar_record_set_str()</code> function with the <code>_calendar_todo.description</code> property as the second parameter:</p>
<pre class="prettyprint">
-error_code = calendar_record_set_str(todo, _calendar_todo.description,
- "description");
+error_code = calendar_record_set_str(todo, _calendar_todo.description, "description");
if (error_code != CALENDAR_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "set description failed: %x\n", error_code);
</pre>
int id;
error_code = calendar_db_insert_record(todo, &id);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "calendar_db_insert_record failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "calendar_db_insert_record failed: %x\n", error_code);
</pre>
</li>
calendar_list_h list = NULL;
error_code = calendar_db_get_all_records(_calendar_todo._uri, 0, 0, &list);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "calendar_db_get_all_records failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "calendar_db_get_all_records failed: %x\n", error_code);
</pre>
</li>
<li>
error_code = calendar_query_create(_calendar_todo._uri, &query);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "calendar_query_create failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "calendar_query_create failed: %x\n", error_code);
</pre>
</li>
<li>
error_code = calendar_filter_create(_calendar_todo._uri, &filter);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "calendar_filter_create failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "calendar_filter_create failed: %x\n", error_code);
</pre>
</li>
<li>
<p>Add a filtering condition using the <code>calendar_filter_add_XXX()</code> function.</p>
<p>The following example adds a string-based filtering condition that retrieves the todos whose summary field contains the string "summary to find":</p>
<pre class="prettyprint">
-error_code =
- calendar_filter_add_str(filter, _calendar_todo.summary,
- CALENDAR_MATCH_CONTAINS, "summary to find");
+error_code = calendar_filter_add_str(filter, _calendar_todo.summary,
+ CALENDAR_MATCH_CONTAINS, "summary to find");
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "filter add condition failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "filter add condition failed: %x\n", error_code);
</pre>
</li>
<li>
<p>The following example first adds an AND operator and then a string-based filtering condition that retrieves the todos whose description field contains the string "description to find".</p>
<p>The combination of the AND operator and the 2 conditions means that the filter only retrieves the todos that contain "summary to find" in their summary and "description to find" in their description.</p>
<pre class="prettyprint">
-error_code =
- calendar_filter_add_operator(filter, CALENDAR_FILTER_OPERATOR_AND);
+error_code = calendar_filter_add_operator(filter, CALENDAR_FILTER_OPERATOR_AND);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "calendar_filter_add_operator failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "calendar_filter_add_operator failed: %x\n", error_code);
error_code = calendar_filter_add_str(filter, _calendar_todo.description,
- CALENDAR_MATCH_CONTAINS,
- "description to find");
+ CALENDAR_MATCH_CONTAINS, "description to find");
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "filter add condition failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "filter add condition failed: %x\n", error_code);
</pre>
<p>You can also create a filter with integer and time conditions. For example, to filter all completed todos:</p>
<pre class="prettyprint">
-error_code =
- calendar_filter_add_int(filter, _calendar_todo.todo_status,
- CALENDAR_MATCH_EQUAL,
- CALENDAR_TODO_STATUS_COMPLETED);
+error_code = calendar_filter_add_int(filter, _calendar_todo.todo_status,
+ CALENDAR_MATCH_EQUAL, CALENDAR_TODO_STATUS_COMPLETED);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "filter add condition failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "filter add condition failed: %x\n", error_code);
</pre>
</li>
<li>
<pre class="prettyprint">
error_code = calendar_query_set_filter(query, filter);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "calendar_query_set_filter failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "calendar_query_set_filter failed: %x\n", error_code);
</pre>
</li>
<li>
<pre class="prettyprint">
error_code = calendar_db_get_records_with_query(query, 0, 0, &list);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "calendar_db_get_records_with_query failed: %x\n",
- error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "calendar_db_get_records_with_query failed: %x\n", error_code);
</pre>
<p>The third parameter defines a limit for the number of results. If you set it to 0, the list returns all todos matching the query.</p>
</li>
error_code = calendar_record_get_str(record, _calendar_todo.description,
&gl_todo_data->description);
if (error_code != CALENDAR_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "get description failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "get description failed: %x\n", error_code);
_free_gl_todo_data(gl_todo_data);
return NULL;
}
- error_code = calendar_record_get_int(record, _calendar_todo.id,
- &gl_todo_data->id);
+ error_code = calendar_record_get_int(record, _calendar_todo.id, &gl_todo_data->id);
if (error_code != CALENDAR_ERROR_NONE) {
dlog_print(DLOG_ERROR, LOG_TAG, "get id failed: %x\n", error_code);
_free_gl_todo_data(gl_todo_data);
if (error_code != CALENDAR_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "set summary failed: %x\n", error_code);
-error_code = calendar_record_set_str(record, _calendar_todo.description,
- "description updated");
+error_code = calendar_record_set_str(record, _calendar_todo.description, "description updated");
if (error_code != CALENDAR_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "set description failed: %x\n", error_code);
</pre>
<pre class="prettyprint">
error_code = calendar_db_update_record(record);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "calendar_db_update_record failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "calendar_db_update_record failed: %x\n", error_code);
</pre>
</li>
<li>
<p>Register a callback using the <code>calendar_db_add_changed_cb()</code> function:</p>
<pre class="prettyprint">
-error_code = calendar_db_add_changed_cb(_calendar_todo._uri, _todo_changed_callback,
- NULL);
+error_code = calendar_db_add_changed_cb(_calendar_todo._uri, _todo_changed_callback, NULL);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "calendar_db_add_changed_cb failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "calendar_db_add_changed_cb failed: %x\n", error_code);
</pre>
</li>
error_code = calendar_vcalendar_make_from_records(list, &vcalendar_stream);
if (error_code != CALENDAR_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "calendar_vcalendar_make_from_records failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "calendar_vcalendar_make_from_records failed: %x\n", error_code);
</pre>
</li>
<pre class="prettyprint">
char vcalendar_file_path[512] = {0};
char *resource_path = app_get_resource_path();
-snprintf(vcalendar_file_path, sizeof(vcalendar_file_path), "%s/%s",
- resource_path, "vcalendar.ics");
+snprintf(vcalendar_file_path, sizeof(vcalendar_file_path), "%s/%s", resource_path, "vcalendar.ics");
free(resource_path);
error_code = calendar_vcalendar_parse_to_calendar_foreach(/* vCalendar file path */
int id = -1;
error_code = calendar_db_insert_record(record, &id);
if (error_code != CALENDAR_ERROR_NONE) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "calendar_db_insert_record failed: %x\n", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "calendar_db_insert_record failed: %x\n", error_code);
return false;
}
for (i = 0; i < address_num; i++) {
contacts_record_h address = NULL;
/* Get the address record handle */
- contacts_record_get_child_record_at_p(contact, _contacts_contact.address,
- i, &address);
+ contacts_record_get_child_record_at_p(contact, _contacts_contact.address, i, &address);
contacts_record_set_str(address, _contacts_address.country, "Korea");
}
contacts_db_update_record(contact);
<p>The following example creates a composite filter with the <code>OR</code> operator.</p>
<pre class="prettyprint">
-contacts_filter_add_str(filter1, _contacts_person.display_name,
- CONTACTS_MATCH_CONTAINS, "1234");
+contacts_filter_add_str(filter1, _contacts_person.display_name, CONTACTS_MATCH_CONTAINS, "1234");
contacts_filter_add_operator(filter1, CONTACTS_FILTER_OPERATOR_OR);
-contacts_filter_add_str(filter1, _contacts_person.display_name,
- CONTACTS_MATCH_CONTAINS, "5678");
+contacts_filter_add_str(filter1, _contacts_person.display_name, CONTACTS_MATCH_CONTAINS, "5678");
</pre>
</li>
<li>
<p>The following example creates a joined filter with the <code>AND</code> operator.</p>
<pre class="prettyprint">
-contacts_filter_add_str(filter1, _contacts_person.display_name,
- CONTACTS_MATCH_CONTAINS, "1234");
+contacts_filter_add_str(filter1, _contacts_person.display_name, CONTACTS_MATCH_CONTAINS, "1234");
contacts_filter_add_operator(filter1, CONTACTS_FILTER_OPERATOR_OR);
-contacts_filter_add_str(filter1, _contacts_person.display_name,
- CONTACTS_MATCH_CONTAINS, "5678");
+contacts_filter_add_str(filter1, _contacts_person.display_name, CONTACTS_MATCH_CONTAINS, "5678");
contacts_filter_add_bool(filter2, _contacts_person.is_favorite, true);
contacts_query_h query = NULL;
contacts_filter_create(_contacts_address._uri, &filter);
-contacts_filter_add_int(filter, _contacts_address.contact_id,
- CONTACTS_MATCH_EQUAL, id);
+contacts_filter_add_int(filter, _contacts_address.contact_id, CONTACTS_MATCH_EQUAL, id);
contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_OR);
-contacts_filter_add_str(filter, _contacts_address.country,
- CONTACTS_MATCH_EXACTLY, "Korea");
+contacts_filter_add_str(filter, _contacts_address.country, CONTACTS_MATCH_EXACTLY, "Korea");
contacts_query_create(_contacts_address._uri, &query);
contacts_query_set_filter(query, filter);
<p>The following example sorts the query results by the person ID:</p>
<pre class="prettyprint">
-contacts_filter_add_str(filter, _contacts_person.display_name,
- CONTACTS_MATCH_CONTAINS, "Joe");
+contacts_filter_add_str(filter, _contacts_person.display_name, CONTACTS_MATCH_CONTAINS, "Joe");
contacts_query_set_filter(query, filter);
contacts_query_set_sort(query, _contacts_person.id, true);
<p>The following example creates a filter which gets only the person ID, display name, and image thumbnail path from the person records which have "test" (string filter) as the vibration path. Create a query and add the filter to it; the results are received in a list.</p>
<pre class="prettyprint">
-contacts_filter_add_str(filter, _contacts_person.vibration,
- CONTACTS_MATCH_CONTAINS, "test");
+contacts_filter_add_str(filter, _contacts_person.vibration, CONTACTS_MATCH_CONTAINS, "test");
contacts_query_set_filter(query, filter);
/* Set projections */
_contacts_person.image_thumbnail_path,
};
-contacts_query_set_projection(query, person_projection,
- sizeof(person_projection)/sizeof(int));
+contacts_query_set_projection(query, person_projection, sizeof(person_projection)/sizeof(int));
contacts_db_get_records_with_query(query, 0, 0, &person_list);
<li>
<p>Set the name record as a child record of the contact record using the <code>contacts_record_add_child_record()</code> function with the <code>_contacts_contact.name</code> property as the second parameter:</p>
<pre class="prettyprint">
-error_code = contacts_record_add_child_record(contact,
- _contacts_contact.name, name);
+error_code = contacts_record_add_child_record(contact, _contacts_contact.name, name);
</pre>
</li>
</ol>
<pre class="prettyprint">
char *resource_path = app_get_resource_path();
char caller_id_path[1024];
-snprintf(caller_id_path, sizeof(caller_id_path),
- "%s/caller_id.jpg", resource_path);
+snprintf(caller_id_path, sizeof(caller_id_path), "%s/caller_id.jpg", resource_path);
free(resource_path);
-error_code = contacts_record_set_str(image, _contacts_image.path,
- caller_id_path);
+error_code = contacts_record_set_str(image, _contacts_image.path, caller_id_path);
</pre>
</li>
<li>
<p>Set the image record as a child record of the contact record using the <code>contacts_record_add_child_record()</code> function with the <code>_contacts_contact.image</code> property as the second parameter:</p>
<pre class="prettyprint">
-error_code = contacts_record_add_child_record(contact,
- _contacts_contact.image, image);
+error_code = contacts_record_add_child_record(contact, _contacts_contact.image, image);
</pre>
</li>
</ol>
<li>
<p>Set the event type to birthday using the <code>contacts_record_set_int()</code> function with the <code>_contacts_event.type</code> property as the second parameter and the <code>CONTACTS_EVENT_TYPE_BIRTH</code> enumerator as the third parameter:</p>
<pre class="prettyprint">
-error_code = contacts_record_set_int(event, _contacts_event.type,
- CONTACTS_EVENT_TYPE_BIRTH);
+error_code = contacts_record_set_int(event, _contacts_event.type, CONTACTS_EVENT_TYPE_BIRTH);
</pre>
</li>
<li>
<p>Set the event record as a child record of the contact record using the <code>contacts_record_add_child_record()</code> function with the <code>_contacts_contact.event</code> property as the second parameter:</p>
<pre class="prettyprint">
-error_code = contacts_record_add_child_record(contact,
- _contacts_contact.event,
- event);
+error_code = contacts_record_add_child_record(contact, _contacts_contact.event, event);
</pre>
</li>
</ol>
<li>
<p>Set the phone number using the <code>contacts_record_set_str()</code> function with the <code>_contacts_number.number</code> property as the second parameter:</p>
<pre class="prettyprint">
-error_code = contacts_record_set_str(number, _contacts_number.number,
- "+8210-1234-5678");
+error_code = contacts_record_set_str(number, _contacts_number.number, "+8210-1234-5678");
</pre>
</li>
<li>
<p>Set the phone number record as a child record of the contact record using the <code>contacts_record_add_child_record()</code> function with the <code>_contacts_contact.number</code> property as the second parameter:</p>
<pre class="prettyprint">
-error_code = contacts_record_add_child_record(contact,
- _contacts_contact.number,
- number);
+error_code = contacts_record_add_child_record(contact, _contacts_contact.number, number);
</pre>
</li>
</ol>
<p>The following example first adds an AND operator and then a bool-based filtering condition that retrieves the persons who are set as favorites.</p>
<p>The combination of the AND operator and the 2 conditions means that the filter only retrieves the persons whose display name contains the string "John" and who are set as favorites.</p>
<pre class="prettyprint">
-error_code = contacts_filter_add_operator(filter,
- CONTACTS_FILTER_OPERATOR_AND);
+error_code = contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_AND);
-error_code = contacts_filter_add_bool(filter, _contacts_person.is_favorite,
- true);
+error_code = contacts_filter_add_bool(filter, _contacts_person.is_favorite, true);
</pre>
</li>
<li>
<pre class="prettyprint">
contacts_list_h list = NULL;
-error_code = contacts_db_search_records(_contacts_person._uri, "John",
- 0, 0, &list);
+error_code = contacts_db_search_records(_contacts_person._uri, "John", 0, 0, &list);
</pre>
</li>
</ul>
<p>The following example iterates through the list and retrieves the display name of each person:</p>
<pre class="prettyprint">
contacts_record_h record;
-while (contacts_list_get_current_record_p(list, &record)
- == CONTACTS_ERROR_NONE) {
+while (contacts_list_get_current_record_p(list, &record) == CONTACTS_ERROR_NONE) {
char *display_name;
- error_code = contacts_record_get_str_p(record,
- _contacts_person.display_name,
- &display_name);
+ error_code = contacts_record_get_str_p(record, _contacts_person.display_name, &display_name);
dlog_print(DLOG_DEBUG, LOG_TAG, "display_name: %s", display_name);
error_code = contacts_list_next(list);
<pre class="prettyprint">
contacts_gl_person_data_t *gl_person_data = NULL;
contacts_record_h record;
-while (contacts_list_get_current_record_p(list, &record)
- == CONTACTS_ERROR_NONE) {
+while (contacts_list_get_current_record_p(list, &record) == CONTACTS_ERROR_NONE) {
gl_person_data = _create_gl_person_data(record);
/* You can get, for example, display name: */
/* gl_person_data->display_name */
gl_person_data = malloc(sizeof(contacts_gl_person_data_t));
memset(gl_person_data, 0x0, sizeof(contacts_gl_person_data_t));
- if (contacts_record_get_int(record, _contacts_person.id,
- &gl_person_data->id) != CONTACTS_ERROR_NONE) {
+ if (contacts_record_get_int(record, _contacts_person.id, &gl_person_data->id) != CONTACTS_ERROR_NONE) {
dlog_print(DLOG_ERROR, LOG_TAG, "get person id failed ");
_free_gl_person_data(gl_person_data);
return NULL;
}
- if (false == _get_default_phone_number(record,
- &gl_person_data->default_phone_number)) {
+ if (false == _get_default_phone_number(record, &gl_person_data->default_phone_number)) {
dlog_print(DLOG_ERROR, LOG_TAG, "_get_default_phone_number() failed ");
_free_gl_person_data(gl_person_data);
return NULL;
}
- if (false == _get_associated_contacts(record,
- &gl_person_data->associated_contacts)) {
+ if (false == _get_associated_contacts(record, &gl_person_data->associated_contacts)) {
dlog_print(DLOG_ERROR, LOG_TAG, "_get_associated_contacts() failed ");
_free_gl_person_data(gl_person_data);
{
int error_code;
- error_code = contacts_record_get_str(record,
- _contacts_person.display_name,
- display_name);
+ error_code = contacts_record_get_str(record, _contacts_person.display_name, display_name);
dlog_print(DLOG_DEBUG, LOG_TAG, "display name: %s", *display_name);
if (error_code != CONTACTS_ERROR_NONE)
return false;
<p>Retrieve the contacts associated with the person using a query:</p>
<pre class="prettyprint">
static bool
-_get_associated_contacts(contacts_record_h record,
- contacts_list_h *associated_contacts)
+_get_associated_contacts(contacts_record_h record, contacts_list_h *associated_contacts)
{
int error_code;
int person_id;
contacts_filter_h filter = NULL;
/* Retrieve the person ID from the person record */
- error_code = contacts_record_get_int(record, _contacts_person.id,
- &person_id);
+ error_code = contacts_record_get_int(record, _contacts_person.id, &person_id);
/* Create a contact query with a filter for the person ID */
error_code = CONTACTS_ERROR_NONE;
error_code += contacts_query_create(_contacts_contact._uri, &query);
error_code += contacts_filter_create(_contacts_contact._uri, &filter);
- error_code += contacts_filter_add_int(filter,
- _contacts_contact.person_id,
+ error_code += contacts_filter_add_int(filter, _contacts_contact.person_id,
CONTACTS_MATCH_EQUAL, person_id);
error_code += contacts_query_set_filter(query, filter);
/* Query to get a list of all contacts associated with the person ID */
- error_code += contacts_db_get_records_with_query(query, 0, 0,
- associated_contacts);
+ error_code += contacts_db_get_records_with_query(query, 0, 0, associated_contacts);
/* Destroy the handles and release all their resources */
contacts_filter_destroy(filter);
return;
}
/* Iterate through the list of associated contacts */
- while (contacts_list_get_current_record_p(associated_contacts, &contact)
- == CONTACTS_ERROR_NONE) {
+ while (contacts_list_get_current_record_p(associated_contacts, &contact) == CONTACTS_ERROR_NONE) {
int i;
unsigned int count = 0;
Determine the number of phone number records
associated with the contact (as child records)
*/
- error_code =
- contacts_record_get_child_record_count(contact,
- _contacts_contact.number,
- &count);
+ error_code = contacts_record_get_child_record_count(contact, _contacts_contact.number, &count);
if (CONTACTS_ERROR_NONE != error_code) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "contacts_record_get_child_record_count(%d)",
- error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "contacts_record_get_child_record_count(%d)", error_code);
return;
}
*/
for (i = 0; i < count; i++) {
contacts_record_h number = NULL;
- error_code =
- contacts_record_get_child_record_at_p(contact,
- _contacts_contact.number,
- i, &number);
+ error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.number,
+ i, &number);
if (error_code != CONTACTS_ERROR_NONE)
continue;
/* Retrieve the phone number ID */
int number_id;
- contacts_record_get_int(number, _contacts_number.id,
- &number_id);
+ contacts_record_get_int(number, _contacts_number.id, &number_id);
dlog_print(DLOG_DEBUG, LOG_TAG, "number id: %d", number_id);
/* Retrieve the actual phone number */
char *number_str = NULL;
- contacts_record_get_str_p(number, _contacts_number.number,
- &number_str);
+ contacts_record_get_str_p(number, _contacts_number.number, &number_str);
dlog_print(DLOG_DEBUG, LOG_TAG, "number: %s", number_str);
}
error_code = contacts_list_next(associated_contacts);
<p>The following example shows how to retrieve a person's default phone number using a query:</p>
<pre class="prettyprint">
static bool
-_get_default_phone_number(contacts_record_h record,
- char **default_phone_number)
+_get_default_phone_number(contacts_record_h record, char **default_phone_number)
{
contacts_query_h query = NULL;
contacts_filter_h filter = NULL;
int error_code = CONTACTS_ERROR_NONE;
/* Retrieve the person ID from the person record */
- error_code += contacts_record_get_int(record, _contacts_person.id,
- &person_id);
+ error_code += contacts_record_get_int(record, _contacts_person.id, &person_id);
/*
Create a phone number query with filters
for the person ID and default phone number
*/
- error_code += contacts_query_create(_contacts_person_number._uri,
- &query);
- error_code += contacts_filter_create(_contacts_person_number._uri,
- &filter);
- error_code += contacts_filter_add_int(filter,
- _contacts_person_number.person_id,
+ error_code += contacts_query_create(_contacts_person_number._uri, &query);
+ error_code += contacts_filter_create(_contacts_person_number._uri, &filter);
+ error_code += contacts_filter_add_int(filter, _contacts_person_number.person_id,
CONTACTS_MATCH_EQUAL, person_id);
- error_code += contacts_filter_add_operator(filter,
- CONTACTS_FILTER_OPERATOR_AND);
- error_code +=
- contacts_filter_add_bool(filter,
- _contacts_person_number.is_primary_default,
- true);
+ error_code += contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_AND);
+ error_code += contacts_filter_add_bool(filter, _contacts_person_number.is_primary_default,
+ true);
error_code += contacts_query_set_filter(query, filter);
/* Query to get phone number records containing the default number */
error_code += contacts_db_get_records_with_query(query, 0, 0, &list);
/* Retrieve the current record from the query list */
- error_code += contacts_list_get_current_record_p(list,
- &record_person_number);
+ error_code += contacts_list_get_current_record_p(list, &record_person_number);
/* Retrieve the phone number from the phone number record */
- error_code += contacts_record_get_str(record_person_number,
- _contacts_person_number.number,
+ error_code += contacts_record_get_str(record_person_number, _contacts_person_number.number,
default_phone_number);
/* Destroy the handles and release all their resources */
return;
}
/* Iterate through the list of associated contacts */
- while (contacts_list_get_current_record_p(associated_contacts,
- &contact)
- == CONTACTS_ERROR_NONE) {
+ while (contacts_list_get_current_record_p(associated_contacts, &contact) == CONTACTS_ERROR_NONE) {
int i;
unsigned int count = 0;
Determine the number of event records
associated with the contact (as child records)
*/
- error_code =
- contacts_record_get_child_record_count(contact,
- _contacts_contact.event,
- &count);
+ error_code = contacts_record_get_child_record_count(contact, _contacts_contact.event, &count);
if (CONTACTS_ERROR_NONE != error_code) {
- dlog_print(DLOG_ERROR, LOG_TAG,
- "contacts_record_get_child_record_count(%d)",
- error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "contacts_record_get_child_record_count(%d)", error_code);
return;
}
/* Iterate through the contact events and retrieve the details */
for (i = 0; i < count; i++) {
contacts_record_h event = NULL;
- error_code =
- contacts_record_get_child_record_at_p(contact,
- _contacts_contact.event,
- i, &event);
+ error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.event,
+ i, &event);
if (error_code != CONTACTS_ERROR_NONE)
continue;
contacts_record_h name = NULL;
/* Retrieve the contact's name record */
/* Record index is set to 0, since there is only 1 child record of type "name" */
-error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.name,
- 0, &name);
+error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.name, 0, &name);
/* Change the first name in the name record */
error_code = contacts_record_set_str(name, _contacts_name.first, "Mark");
</pre>
<pre class="prettyprint">
contacts_record_h event = NULL;
/* Retrieve the contact's birthday event record */
-error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.event,
- 0, &event);
+error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.event, 0, &event);
/* Change the date in the event record */
int new_date = 1990 * 10000 + 6 * 100 + 21;
error_code = contacts_record_set_int(event, _contacts_event.date, new_date);
error_code = CONTACTS_ERROR_NONE;
error_code += contacts_record_create(_contacts_contact._uri, &contact);
-error_code += contacts_record_set_int(contact, _contacts_contact.link_mode,
- CONTACTS_CONTACT_LINK_MODE_NONE);
+error_code += contacts_record_set_int(contact, _contacts_contact.link_mode, CONTACTS_CONTACT_LINK_MODE_NONE);
contacts_record_h name = NULL;
error_code += contacts_record_create(_contacts_name._uri, &name);
error_code += contacts_record_set_str(name, _contacts_name.first, "John");
-error_code += contacts_record_add_child_record(contact, _contacts_contact.name,
- name);
+error_code += contacts_record_add_child_record(contact, _contacts_contact.name, name);
contacts_record_h number = NULL;
error_code += contacts_record_create(_contacts_number._uri, &number);
-error_code += contacts_record_set_str(number, _contacts_number.number,
- "+8210-1234-5678");
-error_code += contacts_record_add_child_record(contact, _contacts_contact.number,
- number);
+error_code += contacts_record_set_str(number, _contacts_number.number, "+8210-1234-5678");
+error_code += contacts_record_add_child_record(contact, _contacts_contact.number, number);
/*
Contact is linked automatically if an existing person
int contact_id = ...; /* Get the contact ID */
int unlinked_person_id;
-error_code = contacts_person_unlink_contact(person_id, contact_id,
- &unlinked_person_id);
+error_code = contacts_person_unlink_contact(person_id, contact_id, &unlinked_person_id);
</pre>
</li>
<li>
<p>Register a callback using the <code>contacts_db_add_changed_cb()</code> function:</p>
<pre class="prettyprint">
-error_code = contacts_db_add_changed_cb(_contacts_person._uri,
- _person_changed_callback,
- NULL);
+error_code = contacts_db_add_changed_cb(_contacts_person._uri, _person_changed_callback, NULL);
</pre>
</li>
char *resource_path = app_get_resource_path();
char temp_path[1024];
snprintf(temp_path, sizeof(temp_path), "%s/group_image.jpg", resource_path);
-error_code = contacts_record_set_str(group, _contacts_group.image_path,
- temp_path);
+error_code = contacts_record_set_str(group, _contacts_group.image_path, temp_path);
free(resource_path);
</pre>
</li>
char *resource_path = app_get_resource_path();
char temp_path[1024];
snprintf(temp_path, sizeof(temp_path), "%s/ringtone.mp3", resource_path);
-error_code = contacts_record_set_str(group, _contacts_group.ringtone_path,
- temp_path);
+error_code = contacts_record_set_str(group, _contacts_group.ringtone_path, temp_path);
free(resource_path);
</pre>
</li>
<p>The following example first adds an OR operator and then a string-based filtering condition that retrieves any group whose name contains the string "friend".</p>
<p>The combination of the OR operator and the 2 conditions means that the filter only retrieves groups whose name contains the string "neighbors" or "friend".</p>
<pre class="prettyprint">
-error_code = contacts_filter_add_operator(filter,
- CONTACTS_FILTER_OPERATOR_OR);
+error_code = contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_OR);
error_code = contacts_filter_add_str(filter, _contacts_group.name,
CONTACTS_MATCH_CONTAINS, "friend");
gl_group_data = malloc(sizeof(contacts_gl_group_data_t));
memset(gl_group_data, 0x0, sizeof(contacts_gl_group_data_t));
- if (CONTACTS_ERROR_NONE != contacts_record_get_int(record,
- _contacts_group.id,
+ if (CONTACTS_ERROR_NONE != contacts_record_get_int(record, _contacts_group.id,
&gl_group_data->id)) {
dlog_print(DLOG_ERROR, LOG_TAG, "get group ID failed ");
_free_gl_group_data(gl_group_data);
return NULL;
}
- if (CONTACTS_ERROR_NONE != contacts_record_get_str(record,
- _contacts_group.name,
+ if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_group.name,
&gl_group_data->name)) {
dlog_print(DLOG_ERROR, LOG_TAG, "get group name failed ");
_free_gl_group_data(gl_group_data);
return NULL;
}
- if (CONTACTS_ERROR_NONE
- != contacts_record_get_str(record,_contacts_group.image_path,
- &gl_group_data->image_path)) {
+ if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_group.image_path,
+ &gl_group_data->image_path)) {
dlog_print(DLOG_ERROR, LOG_TAG, "get group image failed ");
_free_gl_group_data(gl_group_data);
return NULL;
}
- if (CONTACTS_ERROR_NONE
- != contacts_record_get_str(record, _contacts_group.ringtone_path,
- &gl_group_data->ringtone_path)) {
+ if (CONTACTS_ERROR_NONE != contacts_record_get_str(record, _contacts_group.ringtone_path,
+ &gl_group_data->ringtone_path)) {
dlog_print(DLOG_ERROR, LOG_TAG, "get group ringtone failed ");
_free_gl_group_data(gl_group_data);
while (contacts_list_get_current_record_p(list, &person) == CONTACTS_ERROR_NONE) {
int person_id;
- contacts_record_get_int(person, _contacts_person_group_assigned.person_id,
- &person_id);
+ contacts_record_get_int(person, _contacts_person_group_assigned.person_id, &person_id);
dlog_print(DLOG_DEBUG, LOG_TAG, "Person id: %d", person_id);
char *display_name;
- contacts_record_get_str_p(person,
- _contacts_person_group_assigned.display_name,
- &display_name);
+ contacts_record_get_str_p(person, _contacts_person_group_assigned.display_name, &display_name);
dlog_print(DLOG_DEBUG, LOG_TAG, "Display name: %s", display_name);
error_code = contacts_list_next(list);
<li>
<p>Register a callback using the <code>contacts_db_add_changed_cb()</code> function:</p>
<pre class="prettyprint">
-error_code = contacts_db_add_changed_cb(_contacts_group._uri,
- _group_changed_callback, NULL);
+error_code = contacts_db_add_changed_cb(_contacts_group._uri, _group_changed_callback, NULL);
</pre>
</li>
<p>To set the speed dial number, use the <code>contacts_record_set_int()</code> function with the <code>_contacts_speeddial.speeddial_number</code> property as the second parameter:</p>
<pre class="prettyprint">
int speeddial_number = ...; /* Get the speed dial number */
-error_code = contacts_record_set_int(speeddial,
- _contacts_speeddial.speeddial_number,
+error_code = contacts_record_set_int(speeddial, _contacts_speeddial.speeddial_number,
speeddial_number);
</pre>
</li>
<p>To set the ID for the speed dial number, use the <code>contacts_record_set_int()</code> function with the <code>_contacts_speeddial.number_id</code> property as the second parameter:</p>
<pre class="prettyprint">
int number_id = ...; /* Get the speed dial number ID */
-error_code = contacts_record_set_int(speeddial, _contacts_speeddial.number_id,
- number_id);
+error_code = contacts_record_set_int(speeddial, _contacts_speeddial.number_id, number_id);
</pre>
</li>
</ul>
int speeddial_id = ...; /* Get the speed dial ID */
int error_code;
-error_code = contacts_db_get_record(_contacts_speeddial._uri, speeddial_id,
- &speeddial);
+error_code = contacts_db_get_record(_contacts_speeddial._uri, speeddial_id, &speeddial);
</pre>
</li>
<p>Add a filtering condition using a <code>contacts_filter_add_XXX()</code> function.</p>
<p>The following example adds an integer-based filtering condition that retrieves only speed dials whose number is less than 3:</p>
<pre class="prettyprint">
-error_code = contacts_filter_add_int(filter,
- _contacts_speeddial.speeddial_number,
+error_code = contacts_filter_add_int(filter, _contacts_speeddial.speeddial_number,
CONTACTS_MATCH_LESS_THAN, 3);
</pre>
</li>
<p>The following example first adds an OR operator and then an integer-based filtering condition that retrieves only speed dials whose number is greater than 15.</p>
<p>The combination of the OR operator and the 2 conditions means that the filter only retrieves speed dials whose number is less than 3 or greater than 15.</p>
<pre class="prettyprint">
-error_code = contacts_filter_add_operator(filter,
- CONTACTS_FILTER_OPERATOR_OR);
+error_code = contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_OR);
-error_code = contacts_filter_add_int(filter,
- _contacts_speeddial.speeddial_number,
+error_code = contacts_filter_add_int(filter, _contacts_speeddial.speeddial_number,
CONTACTS_MATCH_GREATER_THAN, 15);
</pre>
</li>
<p>The following example iterates through the list and retrieves the number of each speed dial:</p>
<pre class="prettyprint">
contacts_record_h record;
-while (contacts_list_get_current_record_p(list, &record)
- == CONTACTS_ERROR_NONE) {
+while (contacts_list_get_current_record_p(list, &record) == CONTACTS_ERROR_NONE) {
int number;
- error_code = contacts_record_get_int(record,
- _contacts_speeddial.speeddial_number,
+ error_code = contacts_record_get_int(record, _contacts_speeddial.speeddial_number,
&number);
dlog_print(DLOG_DEBUG, LOG_TAG, "speed dial number: %d", number);
<pre class="prettyprint">
contacts_gl_speeddial_data_t *gl_speeddial_data = NULL;
contacts_record_h record;
-while (contacts_list_get_current_record_p(list, &record)
- == CONTACTS_ERROR_NONE) {
+while (contacts_list_get_current_record_p(list, &record) == CONTACTS_ERROR_NONE) {
gl_speeddial_data = _create_gl_speeddial_data(record);
_free_gl_speeddial_data(gl_speeddial_data);
gl_speeddial_data = malloc(sizeof(contacts_gl_speeddial_data_t));
memset(gl_speeddial_data, 0x0, sizeof(contacts_gl_speeddial_data_t));
- if (CONTACTS_ERROR_NONE
- != contacts_record_get_int(record, _contacts_speeddial.speeddial_number,
- &gl_speeddial_data->speeddial_number)) {
+ if (CONTACTS_ERROR_NONE != contacts_record_get_int(record,
+ _contacts_speeddial.speeddial_number,
+ &gl_speeddial_data->speeddial_number)) {
dlog_print(DLOG_ERROR, LOG_TAG, "get speed dial number failed ");
_free_gl_speeddial_data(gl_speeddial_data);
return NULL;
}
- if (CONTACTS_ERROR_NONE
- != contacts_record_get_str(record, _contacts_speeddial.number,
- &gl_speeddial_data->number)) {
+ if (CONTACTS_ERROR_NONE != contacts_record_get_str(record,
+ _contacts_speeddial.number,
+ &gl_speeddial_data->number)) {
dlog_print(DLOG_ERROR, LOG_TAG, "get contact number failed ");
_free_gl_speeddial_data(gl_speeddial_data);
return NULL;
}
- if (CONTACTS_ERROR_NONE
- != contacts_record_get_str(record, _contacts_speeddial.display_name,
- &gl_speeddial_data->display_name)) {
+ if (CONTACTS_ERROR_NONE != contacts_record_get_str(record,
+ _contacts_speeddial.display_name,
+ &gl_speeddial_data->display_name)) {
dlog_print(DLOG_ERROR, LOG_TAG, "get display name failed ");
_free_gl_speeddial_data(gl_speeddial_data);
return NULL;
}
- if (CONTACTS_ERROR_NONE
- != contacts_record_get_str(record,
- _contacts_speeddial.image_thumbnail_path,
- &gl_speeddial_data->image_thumbnail_path)) {
+ if (CONTACTS_ERROR_NONE != contacts_record_get_str(record,
+ _contacts_speeddial.image_thumbnail_path,
+ &gl_speeddial_data->image_thumbnail_path)) {
dlog_print(DLOG_ERROR, LOG_TAG, "get thumbnail failed ");
_free_gl_speeddial_data(gl_speeddial_data);
int speeddial_number = ...; /* Get the speed dial number */
contacts_record_h speeddial = NULL;
-error_code = contacts_db_get_record(_contacts_speeddial._uri, speeddial_number,
- &speeddial);
+error_code = contacts_db_get_record(_contacts_speeddial._uri, speeddial_number, &speeddial);
</pre>
<p>You can also retrieve the speed dial using a search function, such as <code>contacts_db_get_records_with_query()</code>.</p>
</li>
<pre class="prettyprint">
int number_id = ...; /* Get the number ID */
-error_code = contacts_record_set_int(speeddial, _contacts_speeddial.number_id,
- number_id);
+error_code = contacts_record_set_int(speeddial, _contacts_speeddial.number_id, number_id);
if (error_code != CONTACTS_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "get number ID failed: %x", error_code);
</pre>
<li>
<p>To set the log time (calculated as number of seconds since 1970-01-01 00:00:00 UTC), use the <code>contacts_record_set_int()</code> function with the <code>_contacts_phone_log.log_time</code> property as the second parameter:</p>
<pre class="prettyprint">
-error_code = contacts_record_set_int(log, _contacts_phone_log.log_time,
- (int)time(NULL));
+error_code = contacts_record_set_int(log, _contacts_phone_log.log_time, (int)time(NULL));
if (error_code != CONTACTS_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "set log time failed: %x", error_code);
</pre>
<li>
<p>To set the log address (in practice, the phone number or email address), use the <code>contacts_record_set_str()</code> function with the <code>_contacts_phone_log.address</code> property as the second parameter:</p>
<pre class="prettyprint">
-error_code = contacts_record_set_str(log, _contacts_phone_log.address,
- "+8231-1234-5678");
+error_code = contacts_record_set_str(log, _contacts_phone_log.address, "+8231-1234-5678");
if (error_code != CONTACTS_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "set address failed: %x", error_code);
</pre>
error_code = contacts_db_insert_record(log, &added_log_id);
if (error_code != CONTACTS_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "contacts_db_insert_record failed: %x", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "contacts_db_insert_record failed: %x", error_code);
</pre>
</li>
error_code = contacts_db_get_all_records(_contacts_phone_log._uri, 0, 0, &list);
if (error_code != CONTACTS_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "contacts_db_get_all_records failed: %x", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "contacts_db_get_all_records failed: %x", error_code);
</pre>
</li>
<li>
error_code = contacts_query_create(_contacts_phone_log._uri, &query);
if (error_code != CONTACTS_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "contacts_query_create failed: %x", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "contacts_query_create failed: %x", error_code);
</pre>
</li>
<li>
error_code = contacts_filter_create(_contacts_phone_log._uri, &filter);
if (error_code != CONTACTS_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "contacts_filter_create failed: %x", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "contacts_filter_create failed: %x", error_code);
</pre>
</li>
<li>
CONTACTS_MATCH_EQUAL,
CONTACTS_PLOG_TYPE_VOICE_INCOMING);
if (error_code != CONTACTS_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "filter add condition failed: %x", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "filter add condition failed: %x", error_code);
</pre>
</li>
<li>
<p>The following example first adds an OR operator and then an integer-based filtering condition that retrieves any log whose type is <code>CONTACTS_PLOG_TYPE_VOICE_OUTGOING</code>.</p>
<p>The combination of the OR operator and the 2 conditions means that the filter only retrieves logs whose type is <code>CONTACTS_PLOG_TYPE_VOICE_INCOMING</code> or <code>CONTACTS_PLOG_TYPE_VOICE_OUTGOING</code>.</p>
<pre class="prettyprint">
-error_code =
- contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_OR);
+error_code = contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_OR);
if (error_code != CONTACTS_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "contacts_filter_add_operator failed: %x",
- error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "contacts_filter_add_operator failed: %x", error_code);
error_code = contacts_filter_add_int(filter, _contacts_phone_log.log_type,
CONTACTS_MATCH_EQUAL,
CONTACTS_PLOG_TYPE_VOICE_OUTGOING);
if (error_code != CONTACTS_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "filter add condition failed: %x", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "filter add condition failed: %x", error_code);
</pre>
</li>
<li>
<pre class="prettyprint">
error_code = contacts_query_set_filter(query, filter);
if (error_code != CONTACTS_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "contacts_query_set_filter failed: %x", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "contacts_query_set_filter failed: %x", error_code);
</pre>
</li>
<li>
<pre class="prettyprint">
error_code = contacts_db_get_records_with_query(query, 0, 0, &list);
if (error_code != CONTACTS_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "contacts_db_get_records_with_query failed: %x",
- error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "contacts_db_get_records_with_query failed: %x", error_code);
</pre>
<p>The third parameter defines a limit for the number of results. If you set it to 0, the list returns all logs matching the query.</p>
</li>
<p>The following example iterates through the list and retrieves the type of each log:</p>
<pre class="prettyprint">
contacts_record_h record;
-while (contacts_list_get_current_record_p(list, &record)
- == CONTACTS_ERROR_NONE) {
+while (contacts_list_get_current_record_p(list, &record) == CONTACTS_ERROR_NONE) {
int type;
- error_code = contacts_record_get_int(record, _contacts_phone_log.log_type,
- &type);
+ error_code = contacts_record_get_int(record, _contacts_phone_log.log_type, &type);
dlog_print(DLOG_DEBUG, LOG_TAG, "log type: %d", type);
error_code = contacts_list_next(list);
<pre class="prettyprint">
contacts_gl_log_data_t *gl_log_data = NULL;
contacts_record_h record;
-while (contacts_list_get_current_record_p(list, &record)
- == CONTACTS_ERROR_NONE) {
+while (contacts_list_get_current_record_p(list, &record) == CONTACTS_ERROR_NONE) {
gl_log_data = _create_gl_log_data(record);
_free_gl_log_data(gl_log_data);
return NULL;
}
- if (CONTACTS_ERROR_NONE
- != contacts_record_get_int(record, _contacts_phone_log.log_type,
- &gl_log_data->log_type)) {
+ if (CONTACTS_ERROR_NONE != contacts_record_get_int(record,
+ _contacts_phone_log.log_type,
+ &gl_log_data->log_type)) {
dlog_print(DLOG_ERROR, LOG_TAG, "get log type failed ");
_free_gl_log_data(gl_log_data);
return NULL;
}
- if (CONTACTS_ERROR_NONE
- != contacts_record_get_int(record, _contacts_phone_log.log_time,
- &gl_log_data->log_time)) {
+ if (CONTACTS_ERROR_NONE != contacts_record_get_int(record,
+ _contacts_phone_log.log_time,
+ &gl_log_data->log_time)) {
dlog_print(DLOG_ERROR, LOG_TAG, "get log time failed ");
_free_gl_log_data(gl_log_data);
<p>Set the address record properties.</p>
<p>The following example sets the country of the address:</p>
<pre class="prettyprint">
-error_code = contacts_record_set_str(haddress, _contacts_address.country,
- "Korea");
+error_code = contacts_record_set_str(haddress, _contacts_address.country, "Korea");
</pre>
</li>
<li>
<p>Add the address record as a child record to the contact record:</p>
<pre class="prettyprint">
-error_code = contacts_record_add_child_record(hcontact,
- _contacts_contact.address,
- haddress);
+error_code = contacts_record_add_child_record(hcontact, _contacts_contact.address, haddress);
</pre>
<p>The following example first retrieves a name record associated as a child record of a contact record, and then retrieves the first name from the name record:</p>
<pre class="prettyprint">
contacts_record_h child_record;
-contacts_record_get_child_record_at_p(record, _contacts_contact.name,
- 0, &child_record);
+contacts_record_get_child_record_at_p(record, _contacts_contact.name, 0, &child_record);
/* From the child record, retrieve the first name using the name view */
char *f_name = NULL;
{
int error_code;
- error_code = contacts_record_get_int(r_contact,
- _contacts_contact.id, id);
+ error_code = contacts_record_get_int(r_contact, _contacts_contact.id, id);
return true;
}
return false;
bool has_number;
- error_code = contacts_record_get_bool(r_contact,
- _contacts_contact.has_phonenumber,
- &has_number);
+ error_code = contacts_record_get_bool(r_contact, _contacts_contact.has_phonenumber, &has_number);
error_code = contacts_query_create(_contacts_number._uri, &query);
error_code = contacts_filter_create(_contacts_number._uri, &filter);
- error_code = contacts_filter_add_int(filter,
- _contacts_number.contact_id,
+ error_code = contacts_filter_add_int(filter, _contacts_number.contact_id,
CONTACTS_MATCH_EXACTLY, id);
- error_code =
- contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_AND);
+ error_code = contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_AND);
- error_code =
- contacts_filter_add_bool(filter, _contacts_number.is_default, true);
+ error_code = contacts_filter_add_bool(filter, _contacts_number.is_default, true);
error_code = contacts_query_set_filter(query, filter);
error_code = contacts_list_get_current_record_p(list, &r_number);
- error_code =
- contacts_record_get_str(r_number, _contacts_number.number, number);
+ error_code = contacts_record_get_str(r_number, _contacts_number.number, number);
contacts_query_destroy(query);
contacts_filter_destroy(filter);
contacts_record_h r_number;
bool has_number;
- error_code = contacts_record_get_bool(r_contact,
- _contacts_contact.has_phonenumber,
- &has_number);
+ error_code = contacts_record_get_bool(r_contact, _contacts_contact.has_phonenumber, &has_number);
if (!has_number) {
*number = NULL;
int i;
unsigned int count = 0;
bool is_default = false;
- error_code =
- contacts_record_get_child_record_count(contact,
- _contacts_contact.number,
- &count);
+ error_code = contacts_record_get_child_record_count(contact, _contacts_contact.number, &count);
for (i = 0; i < count; i++) {
- error_code =
- contacts_record_get_child_record_at_p(r_contact,
- _contacts_contact.number,
- i, &r_number);
- error_code = contacts_record_get_bool(r_number,
- _contacts_number.is_default,
- &is_default);
+ error_code = contacts_record_get_child_record_at_p(r_contact, _contacts_contact.number, i, &r_number);
+ error_code = contacts_record_get_bool(r_number, _contacts_number.is_default, &is_default);
if (is_default) {
- error_code = contacts_record_get_str(r_number,
- _contacts_number.number,
- number);
+ error_code = contacts_record_get_str(r_number, _contacts_number.number, number);
return true;
}
contacts_record_h r_name;
int error_code;
- error_code =
- contacts_record_get_child_record_at_p(r_contact,
- _contacts_contact.name,
- 0, &r_name);
+ error_code = contacts_record_get_child_record_at_p(r_contact, _contacts_contact.name, 0, &r_name);
- error_code = contacts_record_get_str(r_name, _contacts_name.first,
- first);
+ error_code = contacts_record_get_str(r_name, _contacts_name.first, first);
}
</pre>
<p>The following example retrieves the contact's last name from the name record:</p>
contacts_record_h r_name;
int error_code;
- error_code =
- contacts_record_get_child_record_at_p(r_contact,
- _contacts_contact.name,
- 0, &r_name);
+ error_code = contacts_record_get_child_record_at_p(r_contact, _contacts_contact.name, 0, &r_name);
error_code = contacts_record_get_str(r_name, _contacts_name.last, last);
}
{
int error_code;
- error_code =
- contacts_record_get_str(r_contact,
- _contacts_contact.image_thumbnail_path,
- image_path);
+ error_code = contacts_record_get_str(r_contact, _contacts_contact.image_thumbnail_path, image_path);
dlog_print(DLOG_ERROR, LOG_TAG, "Thumb path: \'%s\'", *image_path);
<p>Add a filtering condition using a <code>contacts_filter_add_XXX()</code> function.</p>
<p>The following example adds a string-based filtering condition that retrieves name records where the last name starts with "Za":</p>
<pre class="prettyprint">
-contacts_filter_add_str(filter, _contacts_name.last_name,
- CONTACTS_MATCH_STARTSWITH, "Za");
+contacts_filter_add_str(filter, _contacts_name.last_name, CONTACTS_MATCH_STARTSWITH, "Za");
</pre>
<p>The available matching options (third parameter) for string-based filtering conditions are defined in the <code>contacts_match_str_flag_e</code> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html#ga5a4ee5c71ae14d0fbf7520597514f0c2">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html#ga5a4ee5c71ae14d0fbf7520597514f0c2">wearable</a> applications).</p>
</li>
<pre class="prettyprint">
contacts_filter_add_operator(filter, CONTACTS_FILTER_OPERATOR_AND);
-contacts_filter_add_str(filter, _contacts_name.last_name,
- CONTACTS_MATCH_ENDSWITH, "ra");
+contacts_filter_add_str(filter, _contacts_name.last_name, CONTACTS_MATCH_ENDSWITH, "ra");
</pre>
</li>
<li>
contacts_filter_h n_filter = NULL;
contacts_filter_create(_contacts_name._uri, &n_filter);
-contacts_filter_add_str(n_filter, _contacts_name.first_name,
- CONTACTS_MATCH_STARTSWITH, "Ada");
+contacts_filter_add_str(n_filter, _contacts_name.first_name, CONTACTS_MATCH_STARTSWITH, "Ada");
contacts_filter_add_operator(n_filter, CONTACTS_FILTER_OPERATOR_OR);
-contacts_filter_add_str(n_filter, _contacts_name.first_name,
- CONTACTS_MATCH_STARTSWITH, "Igo");
+contacts_filter_add_str(n_filter, _contacts_name.first_name, CONTACTS_MATCH_STARTSWITH, "Igo");
contacts_filter_add_filter(filter, n_filter);
</pre>
<p>A projection allows you to query the data for specific properties of a record. Using a projection can reduce latency in case of a large database.</p>
<p>The following example limits the properties from the previous steps to the first and last name:</p>
<pre class="prettyprint">
-unsigned my_projection[] = {_contacts_name.contact_id,
- _contacts_name.first, _contacts_name.last}
-contacts_query_set_projection(query, my_projection,
- sizeof(my_projection)/sizeof(int));
+unsigned my_projection[] = {_contacts_name.contact_id, _contacts_name.first, _contacts_name.last}
+contacts_query_set_projection(query, my_projection, sizeof(my_projection)/sizeof(int));
</pre>
<p>The results of a filtered query can contain records that differ only in a few properties. After setting a projection to the filtered query, the results can contain identical records. To avoid these, use the <code>contacts_query_set_distinct()</code> function, which removes duplicates from the results:</p>
<pre class="prettyprint">
/* Get the ID of the first person */
contacts_record h record1;
int first_person_id;
-int error_code = contacts_record_get_int(record1, _contacts_contact.person_id,
- &first_person_id);
+int error_code = contacts_record_get_int(record1, _contacts_contact.person_id, &first_person_id);
/* Get the ID of the second person */
contacts_record h record2;
int second_person_id;
-error_code = contacts_record_get_int(record2, _contacts_contact.person_id,
- &second_person_id);
+error_code = contacts_record_get_int(record2, _contacts_contact.person_id, &second_person_id);
/* Link the persons */
contacts_person_link_person(first_person_id, second_person_id);
/* Get the phone number record */
contacts_record_h record_number;
-error_code = contacts_record_get_child_record_at_p(record, _contacts_contact.number,
- 0, &record_number);
+error_code = contacts_record_get_child_record_at_p(record, _contacts_contact.number, 0, &record_number);
/* Get the phone number ID */
int number_id;
error_code = contacts_record_destroy(record_number, true);
/* Set the phone number as the default for the person */
-error_code = contacts_person_set_default_property(CONTACTS_PERSON_PROPERTY_NUMBER,
- person_id, number_id);
+error_code = contacts_person_set_default_property(CONTACTS_PERSON_PROPERTY_NUMBER, person_id, number_id);
</pre>
</li>
<p>Retrieve the ID of the default email record using the <code>contacts_person_get_default_property()</code> function with the <code>CONTACTS_PERSON_PROPERTY_EMAIL</code> property:</p>
<pre class="prettyprint">
int person_email_number;
-error_code = contacts_person_get_default_property(CONTACTS_PERSON_PROPERTY_EMAIL,
- person_id,
+error_code = contacts_person_get_default_property(CONTACTS_PERSON_PROPERTY_EMAIL, person_id,
&person_email_number);
</pre>
</li>
<p>Retrieve the default email record using the <code>contacts_db_get_record()</code> function with the email record ID:</p>
<pre class="prettyprint">
contacts_record_h email_record;
-error_code = contacts_db_get_record(_contacts_email._uri, person_email_number,
- &email_record);
+error_code = contacts_db_get_record(_contacts_email._uri, person_email_number, &email_record);
</pre>
</li>
<li>
<p>Retrieve the email address from the email record:</p>
<pre class="prettyprint">
char *default_email;
-error_code = contacts_record_get_str_p(email_record, _contacts_email.email,
- &default_email);
+error_code = contacts_record_get_str_p(email_record, _contacts_email.email, &default_email);
/* Use default_email */
int contact_id = ...; /* Get the contact ID */
int unlinked_person_id;
-error_code = contacts_person_unlink_contact(person_id, contact_id,
- &unlinked_person_id);
+error_code = contacts_person_unlink_contact(person_id, contact_id, &unlinked_person_id);
</pre>
</li>
/* Now you have the display order */
sprintf("Display order: %s",
display_order==CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST ?
- "CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST" :
- "CONTACTS_NAME_DISPLAY_ORDER_LASTFIRST");
+ "CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST" : "CONTACTS_NAME_DISPLAY_ORDER_LASTFIRST");
</pre>
</li>
/* Now you have the sorting order */
sprintf("Sorting order: %s",
sorting_order==CONTACTS_NAME_SORTING_ORDER_FIRSTLAST ?
- "CONTACTS_NAME_SORTING_ORDER_FIRSTLAST" :
- "CONTACTS_NAME_SORTING_ORDER_LASTFIRST");
+ "CONTACTS_NAME_SORTING_ORDER_FIRSTLAST" : "CONTACTS_NAME_SORTING_ORDER_LASTFIRST");
</pre>
</li>
<p>The following example shows how to print a message when the display or sorting order changes:</p>
<pre class="prettyprint">
static void
-display_changed_cb(contacts_name_display_order_e name_display_order,
- void *user_data)
+display_changed_cb(contacts_name_display_order_e name_display_order, void *user_data)
{
dlog_print(DLOG_DEBUG, LOG_TAG, "changed display order: %s",
name_display_order==CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST ?
- "CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST" :
- "CONTACTS_NAME_DISPLAY_ORDER_LASTFIRST");
+ "CONTACTS_NAME_DISPLAY_ORDER_FIRSTLAST" : "CONTACTS_NAME_DISPLAY_ORDER_LASTFIRST");
}
static void
-sorting_changed_cb(contacts_name_sorting_order_e name_display_order,
- void *user_data)
+sorting_changed_cb(contacts_name_sorting_order_e name_display_order, void *user_data)
{
dlog_print(DLOG_DEBUG, LOG_TAG, "changed sorting order: %s",
name_display_order==CONTACTS_NAME_SORTING_ORDER_FIRSTLAST ?
- "CONTACTS_NAME_SORTING_ORDER_FIRSTLAST" :
- "CONTACTS_NAME_SORTING_ORDER_LASTFIRST");
+ "CONTACTS_NAME_SORTING_ORDER_FIRSTLAST" : "CONTACTS_NAME_SORTING_ORDER_LASTFIRST");
}
</pre>
<p>To track the changes, implement a timeout function after setting the callbacks.</p>
/* Handle the storages found on the device */
static bool
-storage_cb(int storage_id, storage_type_e type, storage_state_e state,
- const char *path, void *user_data)
+storage_cb(int storage_id, storage_type_e type, storage_state_e state, const char *path, void *user_data)
{
/* Check whether the storage is the device's internal storage */
if (type == STORAGE_TYPE_INTERNAL) {
Get the absolute path to the downloads directory
of the device's internal storage
*/
- error_code = storage_get_directory(internal_storage_id,
- STORAGE_DIRECTORY_DOWNLOADS,
- &path);
+ error_code = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_DOWNLOADS, &path);
if (error_code != STORAGE_ERROR_NONE) {
vcf_path = strdup(path);
free(path);
/* Get the contact list from the vCard stream */
error_code = contacts_vcard_parse_to_contacts(vcard_stream, &contacts_list);
if (error_code != 0)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "contacts_vcard_parse_to_contacts failed: %d",
- error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "contacts_vcard_parse_to_contacts failed: %d", error_code);
free(vcard_stream);
/* Iterate through the contact list */
}
error_code = contacts_list_destroy(contacts_list, true);
if (error_code != 0)
- dlog_print(DLOG_ERROR, LOG_TAG,
- "contacts_list_destroy failed: %d", error_code);
+ dlog_print(DLOG_ERROR, LOG_TAG, "contacts_list_destroy failed: %d", error_code);
free(file_path);
}
closedir(dir);
free(resource_path);
/* Get the contacts from the vCard file */
-int error_code = contacts_vcard_parse_to_contact_foreach(vcard_path,
- _contacts_vcard_cb,
- NULL);
+int error_code = contacts_vcard_parse_to_contact_foreach(vcard_path, _contacts_vcard_cb, NULL);
</pre>
<p>To check how many records are contained in a vCard file, use the <code>contacts_vcard_get_entity_count()</code> function.</p>
</li>
context_history_filter_set_int(filter, CONTEXT_HISTORY_FILTER_TIME_SPAN, 14);
/* Limiting the context to the applications used while a headphone is connected */
-context_history_filter_set_int(filter, CONTEXT_HISTORY_FILTER_AUDIO_JACK,
- CONTEXT_HISTORY_FILTER_AUDIO_JACK_CONNECTED);
+context_history_filter_set_int(filter, CONTEXT_HISTORY_FILTER_AUDIO_JACK, CONTEXT_HISTORY_FILTER_AUDIO_JACK_CONNECTED);
</pre>
</li>
<li>Retrieve profile data based on the defined filter:
SYNC_OPTION_EXPEDITED, sync_job_user_data,
&sync_job_id3);
result = sync_manager_add_periodic_sync_job(account, sync_job_name4, sync_period4,
- (SYNC_OPTION_NO_RETRY
- | SYNC_OPTION_EXPEDITED),
+ (SYNC_OPTION_NO_RETRY | SYNC_OPTION_EXPEDITED),
sync_job_user_data, &sync_job_id4);
</pre>
<p>This function can also be called like in the following example, because the account handle and user data are not mandatory:</p>
SYNC_OPTION_EXPEDITED, sync_job_user_data,
&sync_job_id3);
result = sync_manager_add_data_change_sync_job(account, sync_capability_image,
- (SYNC_OPTION_NO_RETRY
- | SYNC_OPTION_EXPEDITED),
+ (SYNC_OPTION_NO_RETRY | SYNC_OPTION_EXPEDITED),
sync_job_user_data, &sync_job_id4);
</pre>
<p>This function can also be called like in the following example, because the account handle and user data are not mandatory:</p>
SYNC_OPTION_NONE, sync_job_user_data,
&sync_job_id);
result = sync_manager_add_data_change_sync_job(account, sync_capability_calendar,
- SYNC_OPTION_EXPEDITED,
- sync_job_user_data2,
+ SYNC_OPTION_EXPEDITED, sync_job_user_data2,
&sync_job_id);
</pre>
<p>All the function parameters can be reset except <code>sync_capability</code> and <code>sync_job_id</code>, which are used to manage a specific sync job.</p>
<td>Capability for adding data change sync jobs.
<p>A data change sync job can provide a notification whenever a corresponding data change occurs. If the <code>sync_manager_add_data_change_sync_job()</code> function is used with a capability, it is operated for the related capability only.</p>
<p>The following capabilities are available:</p>
-
<pre class="prettyprint">
+<pre class="prettyprint">
#define SYNC_SUPPORTS_CAPABILITY_CALENDAR "http://tizen.org/sync/capability/calendar"
#define SYNC_SUPPORTS_CAPABILITY_CONTACT "http://tizen.org/sync/capability/contact"
#define SYNC_SUPPORTS_CAPABILITY_IMAGE "http://tizen.org/sync/capability/image"
start_notify_pos(void *data, Evas_Object *obj, void *event_info)
{
if (json_reg != NULL)
- int ret = fido_uaf_get_response_message(json_reg, NULL,
- _process_cb_for_notify_pos,
- data);
+ int ret = fido_uaf_get_response_message(json_reg, NULL, _process_cb_for_notify_pos, data);
}
static void
-_process_cb_for_notify_pos(fido_error_e tizen_error_code, const char *uaf_response,
- void *user_data)
+_process_cb_for_notify_pos(fido_error_e tizen_error_code, const char *uaf_response, void *user_data)
{
int ret = fido_uaf_set_server_result(FIDO_SERVER_STATUS_CODE_OK, uaf_response);
void
start_notify_neg(void *data, Evas_Object *obj, void *event_info)
{
- int ret = fido_uaf_get_response_message(json_reg, NULL,
- _process_cb_for_notify_neg, data);
+ int ret = fido_uaf_get_response_message(json_reg, NULL, _process_cb_for_notify_neg, data);
}
static void
-_process_cb_for_notify_neg(fido_error_e tizen_error_code, const char *uaf_response,
- void *user_data)
+_process_cb_for_notify_neg(fido_error_e tizen_error_code, const char *uaf_response, void *user_data)
{
int ret = fido_uaf_set_server_result(0, uaf_response);
Request the server for the authorization grant;
the response from the server is returned in the callback
*/
- ret = oauth2_manager_request_authorization_grant(mgr, request, grant_response_cb,
- user_data);
+ ret = oauth2_manager_request_authorization_grant(mgr, request, grant_response_cb, user_data);
}
</pre>
</li>
OAuth 2.0 authentication policy before making the request
*/
- ret =
- oauth2_request_set_auth_end_point_url(request,
- "https://login.live.com/oauth20_authorize.srf");
+ ret = oauth2_request_set_auth_end_point_url(request, "https://login.live.com/oauth20_authorize.srf");
- ret =
- oauth2_request_set_token_end_point_url(request,
- "https://login.live.com/oauth20_token.srf");
+ ret = oauth2_request_set_token_end_point_url(request, "https://login.live.com/oauth20_token.srf");
- ret = oauth2_request_set_redirection_url(request,
- "https://developer.tizen.org");
+ ret = oauth2_request_set_redirection_url(request, "https://developer.tizen.org");
ret = oauth2_request_set_client_id(request, "WINDOWS_CLIENT_ID");
ret = oauth2_request_set_scope(request, "wl.basic");
- ret =
- oauth2_request_set_response_type(request, OAUTH2_RESPONSE_TYPE_CODE);
+ ret = oauth2_request_set_response_type(request, OAUTH2_RESPONSE_TYPE_CODE);
if (mgr && request)
- ret = oauth2_manager_request_authorization_grant(mgr, request,
- grant_response_cb,
- request);
+ ret = oauth2_manager_request_authorization_grant(mgr, request, grant_response_cb, request);
}
</pre>
</li>
ret = oauth2_request_set_authorization_code(request, auth_code);
if (mgr && request)
- ret = oauth2_manager_request_access_token(mgr, request,
- access_token_cb, NULL);
+ ret = oauth2_manager_request_access_token(mgr, request, access_token_cb, NULL);
}
}
</pre>
OAuth 2.0 authentication policy before making the request
*/
- ret =
- oauth2_request_set_auth_end_point_url(request,
- "https://www.facebook.com/dialog/oauth");
+ ret = oauth2_request_set_auth_end_point_url(request, "https://www.facebook.com/dialog/oauth");
- ret = oauth2_request_set_redirection_url(request,
- "https://developer.tizen.org");
+ ret = oauth2_request_set_redirection_url(request, "https://developer.tizen.org");
ret = oauth2_request_set_client_id(request, "SAMPLE_CLIENT_ID");
ret = oauth2_request_set_response_type(request, OAUTH2_RESPONSE_TYPE_TOKEN);
if (mgr && request) {
- ret = oauth2_manager_request_token(mgr, request,
- token_response_cb, request);
+ ret = oauth2_manager_request_token(mgr, request, token_response_cb, request);
if (ret != OAUTH2_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "Access Token request failed");
}
OAuth 2.0 authentication policy before making the request
*/
- ret =
- oauth2_request_set_refresh_token_url(request,
- "https://www.googleapis.com/oauth2/v3/token");
+ ret = oauth2_request_set_refresh_token_url(request, "https://www.googleapis.com/oauth2/v3/token");
ret = oauth2_request_set_refresh_token(request, ref_token);
ret = oauth2_request_set_grant_type(request, OAUTH2_GRANT_TYPE_REFRESH);
- ret =
- oauth2_request_set_client_authentication_type(request,
- OAUTH2_CLIENT_AUTHENTICATION_TYPE_REQUEST_BODY);
+ ret = oauth2_request_set_client_authentication_type(request, OAUTH2_CLIENT_AUTHENTICATION_TYPE_REQUEST_BODY);
if (mgr && request)
- ret = oauth2_manager_refresh_access_token(mgr, request,
- token_response_cb, NULL);
+ ret = oauth2_manager_refresh_access_token(mgr, request, token_response_cb, NULL);
}
}
OAuth 2.0 authentication policy before making the request
*/
- ret =
- oauth2_request_set_auth_end_point_url(request,
- "https://accounts.google.com/o/oauth2/auth");
+ ret = oauth2_request_set_auth_end_point_url(request, "https://accounts.google.com/o/oauth2/auth");
- ret =
- oauth2_request_set_token_end_point_url(request,
- "https://accounts.google.com/o/oauth2/token");
+ ret = oauth2_request_set_token_end_point_url(request, "https://accounts.google.com/o/oauth2/token");
ret = oauth2_request_set_redirection_url(request, "https://localhost:8080");
ret = oauth2_request_set_response_type(request, OAUTH2_RESPONSE_TYPE_CODE);
if (mgr && request)
- ret = oauth2_manager_request_token(mgr, request,
- refresh_token_response_cb, mgr);
+ ret = oauth2_manager_request_token(mgr, request, refresh_token_response_cb, mgr);
}
</pre>
</li>
int
dpm_init()
{
- int ret = dpm_add_policy_changed_cb(dpm, "camera", on_policy_changed,
- user_data, &callback_id);
+ int ret = dpm_add_policy_changed_cb(dpm, "camera", on_policy_changed, user_data, &callback_id);
if (ret < 0)
/* Error handling */
}
<li>Get the privilege display name using the <code>privilege_info_get_display_name()</code> function:\r
<pre class="prettyprint">\r
char* display_name = NULL;\r
-int ret =\r
- privilege_info_get_display_name("2.2",\r
- "http://tizen.org/privilege/application.launch",\r
- &display_name);\r
+int ret = privilege_info_get_display_name("2.2",\r
+ "http://tizen.org/privilege/application.launch",\r
+ &display_name);\r
</pre>\r
</li>\r
\r
<li>Get the privilege display name by package type using the <code>privilege_info_get_display_name_by_pkgtype()</code> function:\r
<pre class="prettyprint">\r
char* display_name = NULL;\r
-int ret =\r
- privilege_info_get_display_name_by_pkgtype("PRVINFO_PACKAGE_TYPE_WEB", "2.2",\r
- "http://tizen.org/privilege/application.launch",\r
- &display_name);\r
+int ret = privilege_info_get_display_name_by_pkgtype("PRVINFO_PACKAGE_TYPE_WEB",\r
+ "2.2",\r
+ "http://tizen.org/privilege/application.launch",\r
+ &display_name);\r
</pre>\r
</li>\r
\r
<li>Get the privilege description using the <code>privilege_info_get_description()</code> function:\r
<pre class="prettyprint">\r
char* description = NULL;\r
-int ret =\r
- privilege_info_get_description("2.2",\r
- "http://tizen.org/privilege/application.launch",\r
- &description);\r
+int ret = privilege_info_get_description("2.2",\r
+ "http://tizen.org/privilege/application.launch",\r
+ &description);\r
</pre>\r
</li>\r
\r
<li>Get the privilege description by package type using the <code>privilege_info_get_description_by_pkgtype()</code> function:\r
<pre class="prettyprint">\r
char* description = NULL;\r
-int ret =\r
- privilege_info_get_description_by_pkgtype("PRVINFO_PACKAGE_TYPE_WEB", "2.2",\r
- "http://tizen.org/privilege/application.launch",\r
- &description);\r
+int ret = privilege_info_get_description_by_pkgtype("PRVINFO_PACKAGE_TYPE_WEB",\r
+ "2.2",\r
+ "http://tizen.org/privilege/application.launch",\r
+ &description);\r
</pre>\r
</li>\r
<li>Get the privacy display name using the <code>privilege_info_get_privacy_display_name()</code> function:\r
<pre class="prettyprint">\r
char* privacy_display_name = NULL;\r
-int ret =\r
- privilege_info_get_privacy_display_name("http://tizen.org/privilege/account.read",\r
- &privacy_display_name);\r
+int ret = privilege_info_get_privacy_display_name("http://tizen.org/privilege/account.read",\r
+ &privacy_display_name);\r
</pre>\r
</li>\r
<li>Get the privacy-related privilege's status using the <code>privilege_info_get_privacy_privilege_status()</code> function:\r
<pre class="prettyprint">\r
bool status = NULL;\r
-int ret =\r
- privilege_info_get_privacy_privilege_status("http://tizen.org/privilege/account.read",\r
- &status);\r
+int ret = privilege_info_get_privacy_privilege_status("http://tizen.org/privilege/account.read",\r
+ &status);\r
</pre>\r
</li>\r
</ul>\r
/* Error handling */
yaca_key_destroy(key);
-ret = yaca_key_generate(YACA_KEY_TYPE_DH_PRIV,
- YACA_KEY_LENGTH_DH_GENERATOR_2 | 333, &key);
+ret = yaca_key_generate(YACA_KEY_TYPE_DH_PRIV, YACA_KEY_LENGTH_DH_GENERATOR_2 | 333, &key);
if (ret != YACA_ERROR_NONE)
/* Error handling */
yaca_key_destroy(key);
yaca_key_destroy(key_params);
ret = yaca_key_generate(YACA_KEY_TYPE_DH_PARAMS,
- YACA_KEY_LENGTH_DH_GENERATOR_5 | YACA_KEY_LENGTH_2048BIT,
- &key_params);
+ YACA_KEY_LENGTH_DH_GENERATOR_5 | YACA_KEY_LENGTH_2048BIT, &key_params);
if (ret != YACA_ERROR_NONE)
/* Error handling */
ret = yaca_key_generate_from_parameters(key_params, &key);
yaca_key_destroy(key);
yaca_key_destroy(key_params);
-ret = yaca_key_generate(YACA_KEY_TYPE_DH_PARAMS, YACA_KEY_LENGTH_DH_RFC_2048_256,
- &key_params);
+ret = yaca_key_generate(YACA_KEY_TYPE_DH_PARAMS, YACA_KEY_LENGTH_DH_RFC_2048_256, &key_params);
if (ret != YACA_ERROR_NONE)
/* Error handling */
ret = yaca_key_generate_from_parameters(key_params, &key);
yaca_key_destroy(key);
yaca_key_destroy(key_params);
-ret = yaca_key_generate(YACA_KEY_TYPE_EC_PARAMS, YACA_KEY_LENGTH_EC_PRIME256V1,
- &key_params);
+ret = yaca_key_generate(YACA_KEY_TYPE_EC_PARAMS, YACA_KEY_LENGTH_EC_PRIME256V1, &key_params);
if (ret != YACA_ERROR_NONE)
/* Error handling */
ret = yaca_key_generate_from_parameters(key_params, &key);
yaca_key_h b64_imported = YACA_KEY_NULL;
/* BASE64 */
-ret = yaca_key_export(sym, YACA_KEY_FORMAT_DEFAULT, YACA_KEY_FILE_FORMAT_BASE64,
- NULL, &b64, &b64_len);
+ret = yaca_key_export(sym, YACA_KEY_FORMAT_DEFAULT, YACA_KEY_FILE_FORMAT_BASE64, NULL, &b64, &b64_len);
if (ret != YACA_ERROR_NONE)
/* Error handling */
yaca_key_destroy(b64_imported);
/* RAW */
-ret = yaca_key_export(sym, YACA_KEY_FORMAT_DEFAULT, YACA_KEY_FILE_FORMAT_RAW,
- NULL, &raw, &raw_len);
+ret = yaca_key_export(sym, YACA_KEY_FORMAT_DEFAULT, YACA_KEY_FILE_FORMAT_RAW, NULL, &raw, &raw_len);
if (ret != YACA_ERROR_NONE)
/* Error handling */
ret = yaca_key_import(YACA_KEY_TYPE_SYMMETRIC, NULL, raw, raw_len, &raw_imported);
yaca_key_h der_pub_imported = YACA_KEY_NULL;
/* PEM private */
-ret = yaca_key_export(priv, YACA_KEY_FORMAT_DEFAULT, YACA_KEY_FILE_FORMAT_PEM,
- NULL, &pem_prv, &pem_prv_len);
+ret = yaca_key_export(priv, YACA_KEY_FORMAT_DEFAULT, YACA_KEY_FILE_FORMAT_PEM, NULL, &pem_prv, &pem_prv_len);
if (ret != YACA_ERROR_NONE)
/* Error handling */
yaca_key_destroy(pem_prv_imported);
/* DER private */
-ret = yaca_key_export(priv, YACA_KEY_FORMAT_DEFAULT, YACA_KEY_FILE_FORMAT_DER,NULL,
- &der_prv, &der_prv_len);
+ret = yaca_key_export(priv, YACA_KEY_FORMAT_DEFAULT, YACA_KEY_FILE_FORMAT_DER, NULL, &der_prv, &der_prv_len);
if (ret != YACA_ERROR_NONE)
/* Error handling */
ret = yaca_key_import(priv_type, NULL, der_prv, der_prv_len, &der_prv_imported);
yaca_key_destroy(der_prv_imported);
/* PEM public */
-ret = yaca_key_export(pub, YACA_KEY_FORMAT_DEFAULT, YACA_KEY_FILE_FORMAT_PEM,
- NULL, &pem_pub, &pem_pub_len);
+ret = yaca_key_export(pub, YACA_KEY_FORMAT_DEFAULT, YACA_KEY_FILE_FORMAT_PEM, NULL, &pem_pub, &pem_pub_len);
if (ret != YACA_ERROR_NONE)
/* Error handling */
ret = yaca_key_import(pub_type, NULL, pem_pub, pem_pub_len, &pem_pub_imported);
yaca_key_destroy(pem_pub_imported);
/* DER public */
-ret = yaca_key_export(pub, YACA_KEY_FORMAT_DEFAULT, YACA_KEY_FILE_FORMAT_DER,
- NULL, &der_pub, &der_pub_len);
+ret = yaca_key_export(pub, YACA_KEY_FORMAT_DEFAULT, YACA_KEY_FILE_FORMAT_DER, NULL, &der_pub, &der_pub_len);
if (ret != YACA_ERROR_NONE)
/* Error handling */
ret = yaca_key_import(pub_type, NULL, der_pub, der_pub_len, &der_pub_imported);
key_material = temp_material;
iv_material = temp_material + key_material_len;
-ret = yaca_key_import(YACA_KEY_TYPE_SYMMETRIC, NULL, key_material,
- key_material_len, &aes_key);
+ret = yaca_key_import(YACA_KEY_TYPE_SYMMETRIC, NULL, key_material, key_material_len, &aes_key);
if (ret != YACA_ERROR_NONE)
/* Error handling */
-ret = yaca_key_import(YACA_KEY_TYPE_IV, NULL, iv_material,
- iv_material_len, &iv);
+ret = yaca_key_import(YACA_KEY_TYPE_IV, NULL, iv_material, iv_material_len, &iv);
if (ret != YACA_ERROR_NONE)
/* Error handling */
if (yaca_sign_initialize(&ctx, YACA_DIGEST_SHA512, prv) != YACA_ERROR_NONE)
/* Error handling */
-if (yaca_context_set_property(ctx, YACA_PROPERTY_PADDING, (char*)(&padding),
- sizeof(padding)) != YACA_ERROR_NONE)
+if (yaca_context_set_property(ctx, YACA_PROPERTY_PADDING, (char*)(&padding), sizeof(padding)) != YACA_ERROR_NONE)
/* Error handling */
if (yaca_sign_update(ctx, lorem4096, LOREM4096_SIZE) != YACA_ERROR_NONE)
if (yaca_verify_initialize(&ctx, YACA_DIGEST_SHA512, pub) != YACA_ERROR_NONE)
/* Error handling */
-if (yaca_context_set_property(ctx, YACA_PROPERTY_PADDING, (char*)(&padding),
- sizeof(padding)) != YACA_ERROR_NONE)
+if (yaca_context_set_property(ctx, YACA_PROPERTY_PADDING, (char*)(&padding), sizeof(padding)) != YACA_ERROR_NONE)
/* Error handling */
if (yaca_verify_update(ctx, lorem4096, LOREM4096_SIZE) != YACA_ERROR_NONE)
yaca_key_h key = YACA_KEY_NULL;
/* Generation */
-if (yaca_key_generate(YACA_KEY_TYPE_SYMMETRIC, YACA_KEY_LENGTH_256BIT, &key)
- != YACA_ERROR_NONE)
+if (yaca_key_generate(YACA_KEY_TYPE_SYMMETRIC, YACA_KEY_LENGTH_256BIT, &key) != YACA_ERROR_NONE)
/* Error handling */
/* Signing */
/* Error handling */
/* Signing */
-if (yaca_simple_calculate_signature(YACA_DIGEST_SHA512, prv, lorem4096,
- LOREM4096_SIZE, &signature, &signature_len)
- != YACA_ERROR_NONE)
+if (yaca_simple_calculate_signature(YACA_DIGEST_SHA512, prv, lorem4096, LOREM4096_SIZE, &signature, &signature_len) != YACA_ERROR_NONE)
/* Error handling */
/* Verification */
-if (yaca_simple_verify_signature(YACA_DIGEST_SHA512, pub, lorem4096, LOREM4096_SIZE,
- signature, signature_len) != YACA_ERROR_NONE)
+if (yaca_simple_verify_signature(YACA_DIGEST_SHA512, pub, lorem4096, LOREM4096_SIZE, signature, signature_len) != YACA_ERROR_NONE)
/* Error handling */
yaca_free(signature);
if (yaca_key_generate(key_type, key_bit_len, &key) != YACA_ERROR_NONE)
/* Error handling */
-if (yaca_encrypt_get_iv_bit_length(algo, bcm, key_bit_len, &iv_bit_len)
- != YACA_ERROR_NONE)
+if (yaca_encrypt_get_iv_bit_length(algo, bcm, key_bit_len, &iv_bit_len) != YACA_ERROR_NONE)
/* Error handling */
-if (iv_bit_len > 0 && yaca_key_generate(YACA_KEY_TYPE_IV, iv_bit_len, &iv)
- != YACA_ERROR_NONE)
+if (iv_bit_len > 0 && yaca_key_generate(YACA_KEY_TYPE_IV, iv_bit_len, &iv) != YACA_ERROR_NONE)
/* Error handling */
/* Encryption */
/* Error handling */
/* For the update */
- if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len) != YACA_ERROR_NONE)
/* Error handling */
/* For finalizing */
if (yaca_malloc(enc_len, (void**)&enc) != YACA_ERROR_NONE)
/* Error handling */
- if (yaca_encrypt_update(ctx, lorem4096, LOREM4096_SIZE, enc, &written_len)
- != YACA_ERROR_NONE)
+ if (yaca_encrypt_update(ctx, lorem4096, LOREM4096_SIZE, enc, &written_len) != YACA_ERROR_NONE)
/* Error handling */
enc_len = written_len;
/* Error handling */
/* For the update */
- if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len) != YACA_ERROR_NONE)
/* Error handling */
/* For finalizing */
/* Error handling */
/* Provide any AAD data */
- if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len) != YACA_ERROR_NONE)
/* Error handling */
/* For the update */
- if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len) != YACA_ERROR_NONE)
/* Error handling */
/* For finalizing */
if (yaca_malloc(enc_len, (void**)&enc) != YACA_ERROR_NONE)
/* Error handling */
- if (yaca_encrypt_update(ctx, lorem4096, LOREM4096_SIZE, enc, &written_len)
- != YACA_ERROR_NONE)
+ if (yaca_encrypt_update(ctx, lorem4096, LOREM4096_SIZE, enc, &written_len) != YACA_ERROR_NONE)
/* Error handling */
enc_len = written_len;
(void*)&tag_len, sizeof(tag_len)) != YACA_ERROR_NONE)
/* Error handling */
- if (yaca_context_get_property(ctx, YACA_PROPERTY_GCM_TAG, (void**)tag, &tag_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_get_property(ctx, YACA_PROPERTY_GCM_TAG, (void**)tag, &tag_len) != YACA_ERROR_NONE)
/* Error handling */
dump_hex(enc, 16, "Encrypted data (16 of %zu bytes): ", enc_len);
/* Error handling */
/* Provide any AAD data */
- if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len) != YACA_ERROR_NONE)
/* Error handling */
/* For the update */
- if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len) != YACA_ERROR_NONE)
/* Error handling */
/* For finalizing */
dec_len = written_len;
/* Set the expected tag value before final decryption */
- if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_TAG, tag, tag_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_TAG, tag, tag_len) != YACA_ERROR_NONE)
/* Error handling */
if (yaca_decrypt_finalize(ctx, dec + written_len, &written_len) != YACA_ERROR_NONE)
/* Error handling */
/* Provide any AAD data */
- if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len) != YACA_ERROR_NONE)
/* Error handling */
/* For the update */
- if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len) != YACA_ERROR_NONE)
/* Error handling */
/* For finalizing */
if (yaca_malloc(enc_len, (void**)&enc) != YACA_ERROR_NONE)
/* Error handling */
- if (yaca_encrypt_update(ctx, lorem4096, LOREM4096_SIZE, enc, &written_len)
- != YACA_ERROR_NONE)
+ if (yaca_encrypt_update(ctx, lorem4096, LOREM4096_SIZE, enc, &written_len) != YACA_ERROR_NONE)
/* Error handling */
enc_len = written_len;
(void*)&tag_len, sizeof(tag_len)) != YACA_ERROR_NONE)
/* Error handling */
- if (yaca_context_get_property(ctx, YACA_PROPERTY_GCM_TAG, (void**)tag, &tag_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_get_property(ctx, YACA_PROPERTY_GCM_TAG, (void**)tag, &tag_len) != YACA_ERROR_NONE)
/* Error handling */
dump_hex(enc, 16, "Encrypted data (16 of %zu bytes): ", enc_len);
/* Error handling */
/* Provide any AAD data */
- if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len) != YACA_ERROR_NONE)
/* Error handling */
/* For the update */
- if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len) != YACA_ERROR_NONE)
/* Error handling */
/* For finalizing */
dec_len = written_len;
/* Set the expected tag value before final decryption */
- if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_TAG, tag, tag_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_TAG, tag, tag_len) != YACA_ERROR_NONE)
/* Error handling */
if (yaca_decrypt_finalize(ctx, dec + written_len, &written_len) != YACA_ERROR_NONE)
YACA_DIGEST_SHA256, key_bit_len, &key) != YACA_ERROR_NONE)
/* Error handling */
-if (yaca_encrypt_get_iv_bit_length(algo, bcm, key_bit_len, &iv_bit_len)
- != YACA_ERROR_NONE)
+if (yaca_encrypt_get_iv_bit_length(algo, bcm, key_bit_len, &iv_bit_len) != YACA_ERROR_NONE)
/* Error handling */
-if (iv_bit_len > 0 && yaca_key_generate(YACA_KEY_TYPE_IV, iv_bit_len, &iv)
- != YACA_ERROR_NONE)
+if (iv_bit_len > 0 && yaca_key_generate(YACA_KEY_TYPE_IV, iv_bit_len, &iv) != YACA_ERROR_NONE)
/* Error handling */
-if (yaca_simple_encrypt(algo, bcm, key, iv, lorem4096, LOREM4096_SIZE, &enc, &enc_len)
- != YACA_ERROR_NONE)
+if (yaca_simple_encrypt(algo, bcm, key, iv, lorem4096, LOREM4096_SIZE, &enc, &enc_len) != YACA_ERROR_NONE)
/* Error handling */
-if (yaca_simple_decrypt(algo, bcm, key, iv, enc, enc_len, &dec, &dec_len)
- != YACA_ERROR_NONE)
+if (yaca_simple_decrypt(algo, bcm, key, iv, enc, enc_len, &dec, &dec_len) != YACA_ERROR_NONE)
/* Error handling */
yaca_free(enc);
size_t written_len;
/* Key generation */
-if (yaca_key_generate(YACA_KEY_TYPE_RSA_PRIV, YACA_KEY_LENGTH_4096BIT, &key_priv)
- != YACA_ERROR_NONE)
+if (yaca_key_generate(YACA_KEY_TYPE_RSA_PRIV, YACA_KEY_LENGTH_4096BIT, &key_priv) != YACA_ERROR_NONE)
/* Error handling */
if (yaca_key_extract_public(key_priv, &key_pub) != YACA_ERROR_NONE)
/* Encryption */
{
- if (yaca_seal_initialize(&ctx, key_pub, algo, bcm, key_bit_len, &sym_key, &iv)
- != YACA_ERROR_NONE)
+ if (yaca_seal_initialize(&ctx, key_pub, algo, bcm, key_bit_len, &sym_key, &iv) != YACA_ERROR_NONE)
/* Error handling */
/* For the update */
- if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len) != YACA_ERROR_NONE)
/* Error handling */
/* For finalizing */
/* Error handling */
/* Seal and finalize */
- if (yaca_seal_update(ctx, lorem4096, LOREM4096_SIZE, enc, &written_len)
- != YACA_ERROR_NONE)
+ if (yaca_seal_update(ctx, lorem4096, LOREM4096_SIZE, enc, &written_len) != YACA_ERROR_NONE)
/* Error handling */
enc_len = written_len;
/* Decryption */
{
- if (yaca_open_initialize(&ctx, key_priv, algo, bcm, key_bit_len, sym_key, iv)
- != YACA_ERROR_NONE)
+ if (yaca_open_initialize(&ctx, key_priv, algo, bcm, key_bit_len, sym_key, iv) != YACA_ERROR_NONE)
/* Error handling */
/* For the update */
- if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len) != YACA_ERROR_NONE)
/* Error handling */
/* For finalizing */
size_t written_len;
/* Key generation */
-if (yaca_key_generate(YACA_KEY_TYPE_RSA_PRIV, YACA_KEY_LENGTH_4096BIT, &key_priv)
- != YACA_ERROR_NONE)
+if (yaca_key_generate(YACA_KEY_TYPE_RSA_PRIV, YACA_KEY_LENGTH_4096BIT, &key_priv) != YACA_ERROR_NONE)
/* Error handling */
if (yaca_key_extract_public(key_priv, &key_pub) != YACA_ERROR_NONE)
/* Encryption */
{
- if (yaca_seal_initialize(&ctx, key_pub, algo, bcm, key_bit_len, &sym_key, &iv)
- != YACA_ERROR_NONE)
+ if (yaca_seal_initialize(&ctx, key_pub, algo, bcm, key_bit_len, &sym_key, &iv) != YACA_ERROR_NONE)
/* Error handling */
/* Provide any AAD data */
- if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len) != YACA_ERROR_NONE)
/* Error handling */
/* For the update */
- if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len) != YACA_ERROR_NONE)
/* Error handling */
/* For finalizing */
if (yaca_malloc(enc_len, (void**)&enc) != YACA_ERROR_NONE)
/* Error handling */
- if (yaca_seal_update(ctx, lorem4096, LOREM4096_SIZE, enc, &written_len)
- != YACA_ERROR_NONE)
+ if (yaca_seal_update(ctx, lorem4096, LOREM4096_SIZE, enc, &written_len) != YACA_ERROR_NONE)
/* Error handling */
enc_len = written_len;
(void*)&tag_len, sizeof(tag_len)) != YACA_ERROR_NONE)
/* Error handling */
- if (yaca_context_get_property(ctx, YACA_PROPERTY_GCM_TAG, (void**)tag, &tag_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_get_property(ctx, YACA_PROPERTY_GCM_TAG, (void**)tag, &tag_len) != YACA_ERROR_NONE)
/* Error handling */
yaca_context_destroy(ctx);
/* Decryption */
{
- if (yaca_open_initialize(&ctx, key_priv, algo, bcm, key_bit_len, sym_key, iv)
- != YACA_ERROR_NONE)
+ if (yaca_open_initialize(&ctx, key_priv, algo, bcm, key_bit_len, sym_key, iv) != YACA_ERROR_NONE)
/* Error handling */
/* Provide any AAD data */
- if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_AAD, aad, aad_len) != YACA_ERROR_NONE)
/* Error handling */
/* For the update */
- if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len) != YACA_ERROR_NONE)
/* Error handling */
/* For finalizing */
/* Error handling */
/* Set the expected tag value before final decryption */
- if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_TAG, tag, tag_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_set_property(ctx, YACA_PROPERTY_GCM_TAG, tag, tag_len) != YACA_ERROR_NONE)
/* Error handling */
dec_len = written_len;
size_t len;
/* Key generation */
-if (yaca_key_generate(YACA_KEY_TYPE_RSA_PRIV, YACA_KEY_LENGTH_3072BIT, &key_priv)
- != YACA_ERROR_NONE)
+if (yaca_key_generate(YACA_KEY_TYPE_RSA_PRIV, YACA_KEY_LENGTH_3072BIT, &key_priv) != YACA_ERROR_NONE)
/* Error handling */
if (yaca_key_extract_public(key_priv, &key_pub) != YACA_ERROR_NONE)
/* Encryption */
{
- if (yaca_seal_initialize(&ctx, key_pub, algo, bcm, key_bit_len, &sym_key, &iv)
- != YACA_ERROR_NONE)
+ if (yaca_seal_initialize(&ctx, key_pub, algo, bcm, key_bit_len, &sym_key, &iv) != YACA_ERROR_NONE)
/* Error handling */
/* Set the tag length (optionally) */
/* Error handling */
/* Provide any AAD data */
- if (yaca_context_set_property(ctx, YACA_PROPERTY_CCM_AAD, aad, aad_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_set_property(ctx, YACA_PROPERTY_CCM_AAD, aad, aad_len) != YACA_ERROR_NONE)
/* Error handling */
/* For the update */
- if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len) != YACA_ERROR_NONE)
/* Error handling */
/* For finalizing */
if (yaca_malloc(enc_len, (void**)&enc) != YACA_ERROR_NONE)
/* Error handling */
- if (yaca_seal_update(ctx, lorem4096, LOREM4096_SIZE, enc, &written_len)
- != YACA_ERROR_NONE)
+ if (yaca_seal_update(ctx, lorem4096, LOREM4096_SIZE, enc, &written_len) != YACA_ERROR_NONE)
/* Error handling */
enc_len = written_len;
enc_len += written_len;
/* Get the tag after final encryption */
- if (yaca_context_get_property(ctx, YACA_PROPERTY_CCM_TAG, (void**)tag, &tag_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_get_property(ctx, YACA_PROPERTY_CCM_TAG, (void**)tag, &tag_len) != YACA_ERROR_NONE)
/* Error handling */
yaca_context_destroy(ctx);
/* Decryption */
{
- if (yaca_open_initialize(&ctx, key_priv, algo, bcm, key_bit_len, sym_key, iv)
- != YACA_ERROR_NONE)
+ if (yaca_open_initialize(&ctx, key_priv, algo, bcm, key_bit_len, sym_key, iv) != YACA_ERROR_NONE)
/* Error handling */
/* Set the expected tag value */
- if (yaca_context_set_property(ctx, YACA_PROPERTY_CCM_TAG, tag, tag_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_set_property(ctx, YACA_PROPERTY_CCM_TAG, tag, tag_len) != YACA_ERROR_NONE)
/* Error handling */
/* The total encrypted text length must be passed (only needed if AAD is passed) */
/* Error handling */
/* Provide any AAD data */
- if (yaca_context_set_property(ctx, YACA_PROPERTY_CCM_AAD, aad, aad_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_set_property(ctx, YACA_PROPERTY_CCM_AAD, aad, aad_len) != YACA_ERROR_NONE)
/* Error handling */
/* For the update */
- if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len)
- != YACA_ERROR_NONE)
+ if (yaca_context_get_output_length(ctx, LOREM4096_SIZE, &output_len) != YACA_ERROR_NONE)
/* Error handling */
/* For finalizing */
<ol>
<li>Add the necessary callbacks for reacting to the keyboard option menu opening and closing, before calling the <code>ime_run()</code> function:
<pre class="prettyprint">
-static void option_window_created(Evas_Object *window, ime_option_window_type_e type,
- void *user_data);
+static void option_window_created(Evas_Object *window, ime_option_window_type_e type, void *user_data);
static void option_window_destroyed(Evas_Object *window, void *user_data);
void
<p>If the user selects the keyboard settings, the <code>option_window_created()</code> callback is executed:</p>
<pre class="prettyprint">
static void
-option_window_created(Evas_Object *window, ime_option_window_type_e type,
- void *user_data)
+option_window_created(Evas_Object *window, ime_option_window_type_e type, void *user_data)
{
/* Create the option window */
/* Draw the content to the given window object */
<pre class="prettyprint">
/* Callback */
void
-state_changed_cb(stt_h stt, stt_state_e previous, stt_state_e current,
- void* user_data)
+state_changed_cb(stt_h stt, stt_state_e previous, stt_state_e current, void* user_data)
{
/* Your code */
}
set_default_language_changed_cb(stt_h stt)
{
int ret;
- ret = stt_set_default_language_changed_cb(stt, default_language_changed_cb,
- NULL);
+ ret = stt_set_default_language_changed_cb(stt, default_language_changed_cb, NULL);
if (STT_ERROR_NONE != ret)
/* Error handling */
}
<pre class="prettyprint">
/* Result time callback */
bool
-result_time_cb(stt_h stt, int index, stt_result_time_event_e event,
- const char* text, long start_time,
- long end_time, void* user_data)
+result_time_cb(stt_h stt, int index, stt_result_time_event_e event, const char* text,
+ long start_time, long end_time, void* user_data)
{
/* Your code */
}
<pre class="prettyprint">
/* Callback */
void
-engine_changed_cb(stt_h stt, const char* engine_id,
- const char* language, bool support_silence,
+engine_changed_cb(stt_h stt, const char* engine_id, const char* language, bool support_silence,
bool need_credential, void* user_data)
{
/* Your code */
<pre class="prettyprint">
/* Callback */
void
-state_changed_cb(tts_h tts, tts_state_e previous, tts_state_e current,
- void* user_data)
+state_changed_cb(tts_h tts, tts_state_e previous, tts_state_e current, void* user_data)
{
/* Your code */
}
<pre class="prettyprint">
/* Callback */
void
-default_voice_changed_cb(tts_h tts, const char* previous_language,
- int previous_voice_type, const char* current_language,
- int current_voice_type, void* user_data)
+default_voice_changed_cb(tts_h tts, const char* previous_language, int previous_voice_type,
+ const char* current_language, int current_voice_type, void* user_data)
{
/* Your code */
}
<pre class="prettyprint">
/* Callback */
void
-__service_state_changed_cb(vc_service_state_e previous, vc_service_state_e current,
- void* user_data)
+__service_state_changed_cb(vc_service_state_e previous, vc_service_state_e current, void* user_data)
{
/* Your code */
}
<pre class="prettyprint">
/* Callback */
void
-__result_cb(vc_result_event_e event, vc_cmd_list_h vc_cmd_list, const char* result,
- void* user_data)
+__result_cb(vc_result_event_e event, vc_cmd_list_h vc_cmd_list, const char* result, void* user_data)
{
int ret = -1;
int count = 0;
<p>In the following example, the <code>actor1</code> and <code>actor2</code> instances are at the position 10.0f, 10.0f, 0.0f at the start of the animation.</p>
<pre class="prettyprint">
// Animate the actor1 position TO 10.0f, 50.0f, 0.0f
-animation.AnimateTo( Property( actor1, Dali::Actor::Property::POSITION ),
- Vector3( 10.0f, 50.0f, 0.0f ) );
+animation.AnimateTo( Property( actor1, Dali::Actor::Property::POSITION ), Vector3( 10.0f, 50.0f, 0.0f ) );
// End Position: 10.0f, 50.0f, 0.0f
// Animate the actor2 position BY 10.0f, 50.0f, 0.0f
-animation.AnimateBy( Property( actor2, Dali::Actor::Property::POSITION ),
- Vector3( 10.0f, 50.0f, 0.0f ) );
+animation.AnimateBy( Property( actor2, Dali::Actor::Property::POSITION ), Vector3( 10.0f, 50.0f, 0.0f ) );
// End Position: 20.0f, 60.0f, 0.0f
</pre>
// Create an animation for the button
Animation animation = Animation::New( 2.0f ); // Duration 2 seconds
- animation.AnimateTo( Property( button, Actor::Property::POSITION ),
- Vector3( 100.0f, 100.0f, 0.0f ) );
+ animation.AnimateTo( Property( button, Actor::Property::POSITION ), Vector3( 100.0f, 100.0f, 0.0f ) );
animation.FinishedSignal().Connect( this, &HelloWorldExample::OnFinished );
animation.Play(); // Fire the animation and forget about it
} // At this point the animation handle has gone out of scope
<p>DALi provides support for animating between several different values, or key frames. A key frame takes a progress value between 0.0f and 1.0f (0 and 100% respectively) and portrays the value of the property when the animation has progressed that much. You can create several key frames:</p>
<pre class="prettyprint">
KeyFrames keyFrames = KeyFrames::New();
-keyFrames.Add( 0.0f,
- Vector3( 10.0f, 10.0f, 10.0f ) );
-keyFrames.Add( 0.7f,
- Vector3( 200.0f, 200.0f, 200.0f ) );
-keyFrames.Add( 1.0f,
- Vector3( 100.0f, 100.0f, 100.0f ) );
+keyFrames.Add( 0.0f, Vector3( 10.0f, 10.0f, 10.0f ) );
+keyFrames.Add( 0.7f, Vector3( 200.0f, 200.0f, 200.0f ) );
+keyFrames.Add( 1.0f, Vector3( 100.0f, 100.0f, 100.0f ) );
</pre>
<p>Next, you can add the key frames to your animation.</p>
<p>The following pseudocode fragment shows how to set up and apply a constraint:</p>
<pre class="prettyprint">
-Constraint constraint =
- Constraint::New< <target-property-type> >( <target-handle>, <target-property>,
- <constraint-function> );
+Constraint constraint = Constraint::New< <target-property-type> >( <target-handle>, <target-property>, <constraint-function> );
constraint.AddSource( <property-input-1> );
constraint.AddSource( <property-input-2> );
mDetector.DetectedSignal().Connect( this, &HelloWorldExample::OnPan );
// Create a constraint that targets the control
- Constraint constraint = Constraint::New< Vector4 >( control, Actor::Property::COLOR,
- MyConstraintFunction );
+ Constraint constraint = Constraint::New< Vector4 >( control, Actor::Property::COLOR, MyConstraintFunction );
// Add the POSITION property of the control as a constraint input
constraint.AddSource( LocalSource( Actor::Property::POSITION ) );
<p>The <code>MyConstraintFunctor()</code> functor can be applied to the <code>control</code> as follows:</p>
<pre class="prettyprint">
-Constraint constraint = Constraint::New< Vector4 >( control, Actor::Property::COLOR,
- MyConstraintFunctor( 200.0f ) );
+Constraint constraint = Constraint::New< Vector4 >( control, Actor::Property::COLOR, MyConstraintFunctor( 200.0f ) );
</pre>
<p>The <code>MyConstraintFunctor()</code> functor can be used also with another constraint with a different distance. Instead of using the default functor (<code>operator()</code>), another function can be declared in the class or struct and used as the constraint function. For more information, see the <code>New()</code> function in the <code>Dali::Constraint</code> class.</p>
<p>The built-in <code>Dali::EqualToConstraint()</code> function can be used if you only need to set a property equal to another property:</p>
<pre class="prettyprint">
-Constraint constraint = Constraint::New< Vector3 >( actor, Actor::Property::POSITION,
- EqualToConstraint() );
+Constraint constraint = Constraint::New< Vector3 >( actor, Actor::Property::POSITION, EqualToConstraint() );
constraint.AddSource( Source( anotherActor, Actor::Property::POSITION ) );
constraint.Apply();
</pre>
<p>The built-in <code>Dali::RelativeToConstraint()</code> and <code>Dali::RelativeToConstraintFloat()</code> functions can be used if you only need to set a property relative to another property:</p>
<pre class="prettyprint">
-Constraint constraint = Constraint::New< Vector3 >( actor, Actor::Property::POSITION,
- RelativeToConstraint( 2.0f ) );
+Constraint constraint = Constraint::New< Vector3 >( actor, Actor::Property::POSITION, RelativeToConstraint( 2.0f ) );
constraint.AddSource( Source( anotherActor, Actor::Property::POSITION ) );
constraint.Apply();
</pre>
class HelloWorldExample : public ConnectionTracker
{
public:
-
HelloWorldExample( Application& application )
- : mApplication( application )
+ : mApplication( application )
{
// Connect to the application's init signal
mApplication.InitSignal().Connect( this, &HelloWorldExample::Create );
stage.Add( textLabel );
// Connect to touch and key event signals
- stage.GetRootLayer().TouchSignal().Connect( this,
- &HelloWorldExample::OnTouch );
+ stage.GetRootLayer().TouchSignal().Connect( this, &HelloWorldExample::OnTouch );
stage.KeyEventSignal().Connect( this, &HelloWorldExample::OnKeyEvent );
}
<p>This means that a slot of the following type can be connected to the return value of the <code>Actor::TouchSignal()</code> function:</p>
<pre class="prettyprint">
-bool YourCallbackName( Actor actor,
- const TouchData& data );
+bool YourCallbackName( Actor actor, const TouchData& data );
</pre>
<p>The return value <code>true</code> indicates that the touch event must be consumed. Otherwise, the signal is emitted on the next sensitive parent of the actor. Note that a callback function signature varies depending on its corresponding signal type. Some signal types do not have a return value in their callback functions.</p>
FlexContainer flexContainer = FlexContainer::New();
flexContainer.SetParentOrigin( ParentOrigin::TOP_LEFT );
flexContainer.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-flexContainer.SetResizePolicy( ResizePolicy::FILL_TO_PARENT,
- Dimension::ALL_DIMENSIONS );
+flexContainer.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
// Set the background color to be white
flexContainer.SetBackgroundColor( Color::WHITE );
// Add the container to the stage
<pre class="prettyprint">
// Display toolbar and content vertically
-flexContainer.SetProperty( FlexContainer::Property::FLEX_DIRECTION,
- FlexContainer::COLUMN );
+flexContainer.SetProperty( FlexContainer::Property::FLEX_DIRECTION, FlexContainer::COLUMN );
</pre>
</li>
toolBar.SetBackgroundColor( Color::CYAN );
// Add it to the main container
flexContainer.Add( toolBar );
-flexContainer.SetProperty( FlexContainer::Property::FLEX_DIRECTION,
- FlexContainer::COLUMN );
+flexContainer.SetProperty( FlexContainer::Property::FLEX_DIRECTION, FlexContainer::COLUMN );
</pre>
</li>
// Display toolbar items horizontally
toolBar.SetProperty( FlexContainer::Property::FLEX_DIRECTION, FlexContainer::ROW );
// Align toolbar items vertically center
-toolBar.SetProperty( FlexContainer::Property::ALIGN_ITEMS,
- FlexContainer::ALIGN_CENTER );
+toolBar.SetProperty( FlexContainer::Property::ALIGN_ITEMS, FlexContainer::ALIGN_CENTER );
// 10 percent of available space in the cross axis
toolBar.SetProperty( FlexContainer::ChildProperty::FLEX, 0.1f );
</pre>
// Display items horizontally
content.SetProperty( FlexContainer::Property::FLEX_DIRECTION, FlexContainer::ROW );
// Align items horizontally center
-content.SetProperty( FlexContainer::Property::JUSTIFY_CONTENT,
- FlexContainer::JUSTIFY_CENTER );
+content.SetProperty( FlexContainer::Property::JUSTIFY_CONTENT, FlexContainer::JUSTIFY_CENTER );
// Align items vertically center
-content.SetProperty( FlexContainer::Property::ALIGN_ITEMS,
- FlexContainer::ALIGN_CENTER );
+content.SetProperty( FlexContainer::Property::ALIGN_ITEMS, FlexContainer::ALIGN_CENTER );
// 90 percent of available space in the cross axis
content.SetProperty( FlexContainer::ChildProperty::FLEX, 0.9f );
// Add it to the main container
// Minimum size the button must keep
prevButton.SetMinimumSize( Vector2( 100.0f, 60.0f ) );
// Set 10 pixel margin around the button
-prevButton.SetProperty( FlexContainer::ChildProperty::FLEX_MARGIN,
- Vector4( 10.0f, 10.0f, 10.0f, 10.0f ) );
+prevButton.SetProperty( FlexContainer::ChildProperty::FLEX_MARGIN, Vector4( 10.0f, 10.0f, 10.0f, 10.0f ) );
toolBar.Add( prevButton );
// Set the button text
Property::Map labelMap;
// Take all the available space left apart from the 2 buttons
title.SetProperty( FlexContainer::ChildProperty::FLEX, 1.0f );
// Set 10 pixel margin around the title
-title.SetProperty( FlexContainer::ChildProperty::FLEX_MARGIN,
- Vector4( 10.0f, 10.0f, 10.0f, 10.0f ) );
+title.SetProperty( FlexContainer::ChildProperty::FLEX_MARGIN, Vector4( 10.0f, 10.0f, 10.0f, 10.0f ) );
toolBar.Add( title );
// Add a button to the right of the toolbar
PushButton nextButton = PushButton::New();
// Minimum size the button must keep
nextButton.SetMinimumSize( Vector2( 100.0f, 60.0f ) );
// Set 10 pixel margin around the button
-nextButton.SetProperty( FlexContainer::ChildProperty::FLEX_MARGIN,
- Vector4( 10.0f, 10.0f, 10.0f, 10.0f ) );
+nextButton.SetProperty( FlexContainer::ChildProperty::FLEX_MARGIN, Vector4( 10.0f, 10.0f, 10.0f, 10.0f ) );
toolBar.Add( nextButton );
// Set the button text
labelMap["text"] = "Next";
// Create the flex container
FlexContainer flexContainer = FlexContainer::New();
// Set the flex direction to lay out the items horizontally
-flexContainer.SetProperty( FlexContainer::Property::FLEX_DIRECTION,
- FlexContainer::ROW );
+flexContainer.SetProperty( FlexContainer::Property::FLEX_DIRECTION, FlexContainer::ROW );
// Create flex items and set the proportion
Control item1 = Control::New();
// Create the flex container
FlexContainer flexContainer = FlexContainer::New();
// Set the flex direction to lay out the items horizontally
-flexContainer.SetProperty( FlexContainer::Property::FLEX_DIRECTION,
- FlexContainer::ROW );
+flexContainer.SetProperty( FlexContainer::Property::FLEX_DIRECTION, FlexContainer::ROW );
// Set the items to be aligned at the beginning of the container
// on the cross axis by default
-flexContainer.SetProperty( FlexContainer::Property::ALIGN_ITEMS,
- FlexContainer::ALIGN_FLEX_START );
+flexContainer.SetProperty( FlexContainer::Property::ALIGN_ITEMS, FlexContainer::ALIGN_FLEX_START );
// Create flex items and add them to the flex container
Control item1 = Control::New();
// Align item1 at the center of the container
-item1.SetProperty( FlexContainer::ChildProperty::ALIGN_SELF,
- FlexContainer::ALIGN_CENTER );
+item1.SetProperty( FlexContainer::ChildProperty::ALIGN_SELF, FlexContainer::ALIGN_CENTER );
flexContainer.Add( item1 );
Control item2 = Control::New();
// item2 is aligned at the beginning of the container
flexContainer.Add( item2 );
Control item3 = Control::New();
// Align item3 at the bottom of the container
-item3.SetProperty( FlexContainer::ChildProperty::ALIGN_SELF,
- FlexContainer::ALIGN_FLEX_END );
+item3.SetProperty( FlexContainer::ChildProperty::ALIGN_SELF, FlexContainer::ALIGN_FLEX_END );
flexContainer.Add( item3 );
Control item4 = Control::New();
// item4 is aligned at the beginning of the container
// Create flex item
Control item = Control::New();
// Add the margin around the item
-item.SetProperty( FlexContainer::ChildProperty::FLEX_MARGIN,
- Vector4( 10.0f, 10.0f, 10.0f, 10.0f ) );
+item.SetProperty( FlexContainer::ChildProperty::FLEX_MARGIN, Vector4( 10.0f, 10.0f, 10.0f, 10.0f ) );
// Add the item to the container
flexContainer.Add( item );
</pre>
Vector3 current;
current = actor.GetCurrentPosition();
-std::cout << "Current position: " << current.x << ", " << current.y
- << ", " << current.z << std::endl;
+std::cout << "Current position: " << current.x << ", " << current.y << ", " << current.z << std::endl;
std::cout << "..." << std::endl;
// Handling another event
current = actor.GetCurrentPosition();
-std::cout << "Current position: " << current.x << ", " << current.y
- << ", " << current.z << std::endl;
+std::cout << "Current position: " << current.x << ", " << current.y << ", " << current.z << std::endl;
</pre>
<p>The above code is likely to output:</p>
RadioButton actor = RadioButton::New();
Stage::GetCurrent().Add( actor );
Animation animation = Animation::New( 2.0f ); // Duration 2 seconds
-animation.AnimateTo( Property( actor, Actor::Property::POSITION ),
- Vector3( 100.0f, 200.0f, 0.0f ) );
+animation.AnimateTo( Property( actor, Actor::Property::POSITION ), Vector3( 100.0f, 200.0f, 0.0f ) );
animation.Play();
</pre>
<p>For example, the following code makes the <code>SIZE</code> property value of an actor the same as the <code>SIZE</code> property value of its parent actor:</p>
<pre class="prettyprint">
-Constraint constraint = Constraint::New<Vector3>( actor, Actor::Property::SIZE,
- EqualToConstraint() );
+Constraint constraint = Constraint::New<Vector3>( actor, Actor::Property::SIZE, EqualToConstraint() );
constraint.AddSource( ParentSource( Actor::Property::SIZE ) );
constraint.Apply();
</pre>
<li>Stereo cameras are parented to the default camera, so if the application needs to change the camera position or orientation, it must change the default camera transformation. The handle to the default camera can be obtained from the default render task as follows:
<pre class="prettyprint">
-Dali::RenderTask defaultRenderTask =
- Dali::Stage::GetCurrent().GetRenderTaskList().GetTask( 0 );
+Dali::RenderTask defaultRenderTask = Dali::Stage::GetCurrent().GetRenderTaskList().GetTask( 0 );
Dali::CameraActor defaultCamera = defaultRenderTask.GetCameraActor();
</pre>
</li>
Geometry geometry = Geometry::New();
geometry.AddVertexBuffer( vertices );
-geometry.SetIndexBuffer( &INDEX_TRIANGLES[0],
- sizeof(INDEX_TRIANGLES)/sizeof(INDEX_TRIANGLES[0]) );
+geometry.SetIndexBuffer( &INDEX_TRIANGLES[0], sizeof(INDEX_TRIANGLES)/sizeof(INDEX_TRIANGLES[0]) );
geometry.SetType( Geometry::TRIANGLES );
</pre>
stage.Add( actor );
mAnimation = Animation::New( 10.0f );
-mAnimation.AnimateTo( Property( actor, Actor::Property::ORIENTATION ),
- Quaternion( Radian( Degree( 180 ) ), Vector3::ZAXIS ) );
-mAnimation.AnimateTo( Property( actor, Actor::Property::ORIENTATION ),
- Quaternion( Radian( Degree( 180 ) ), Vector3::YAXIS ) );
+mAnimation.AnimateTo( Property( actor, Actor::Property::ORIENTATION ), Quaternion( Radian( Degree( 180 ) ), Vector3::ZAXIS ) );
+mAnimation.AnimateTo( Property( actor, Actor::Property::ORIENTATION ), Quaternion( Radian( Degree( 180 ) ), Vector3::YAXIS ) );
mAnimation.Play();
</pre>
void Create( Application& application )
{
- ResourceImage image =
- ResourceImage::New( "https://www.tizen.org/sites/default/files/admins/tizen-branding-lockup-on-light.png" );
- image.LoadingFinishedSignal().Connect( this,
- &ResourceImageController::OnLoadFinished );
+ ResourceImage image = ResourceImage::New( "https://www.tizen.org/sites/default/files/admins/tizen-branding-lockup-on-light.png" );
+ image.LoadingFinishedSignal().Connect( this, &ResourceImageController::OnLoadFinished );
ImageView imageView = ImageView::New( image );
imageView.SetSize( 400, 200 );
<p>The following code snippet is an example of rescaling:</p>
<pre class="prettyprint">
-Dali::Image image = Dali::ResourceImage::New( filename, ImageDimensions( 240, 240 ),
- FittingMode::SCALE_TO_FILL );
+Dali::Image image = Dali::ResourceImage::New( filename, ImageDimensions( 240, 240 ), FittingMode::SCALE_TO_FILL );
</pre>
<p>This example sets the size and fitting mode appropriately for a large thumbnail during the <code>Dali::ResourceImage</code> object construction. In general, to enable scaling on load, pass a non-zero width or height and one of the 4 fitting modes to the <code>Dali::ResourceImage</code> creator function as shown above.</p>
<p>If the application requires the image dimensions immediately, they can be retrieved synchronously:</p>
<pre class="prettyprint">
-Dali::ImageDimensions dimensions =
- Dali::ResourceImage::GetImageSize( "/my-path/my-image.png" );
+Dali::ImageDimensions dimensions = Dali::ResourceImage::GetImageSize( "/my-path/my-image.png" );
</pre>
<p>This is a disk-read operation, which can be slow and block the event thread. This operation is currently not supported for remote resources, such as HTTP or HTTPS URLs.</p>
scrollView.SetRulerY( rulerY );
// To enable snapping, a FixedRuler can be
- // applied to the X axis,with snap
+ // applied to the X axis, with snap
// points spaced to the width of the stage
RulerPtr rulerX1 = new FixedRuler( size.width );
scrollView.SetRulerX( rulerX1 );
// In this case, to 4 times the width of the
// stage, allowing for 4 pages to be scrolled
RulerPtr rulerX2 = new FixedRuler( size.width );
- rulerX2->SetDomain( RulerDomain( 0.0f,
- size.width*4.0f ) );
+ rulerX2->SetDomain( RulerDomain( 0.0f, size.width*4.0f ) );
scrollView.SetRulerX( rulerX2 );
}
</pre>
"visualType": "GRADIENT",
"startPosition": [0.0, -0.5],
"endPosition": [0.0, 0.5],
- "stopOffset": [0.0, 0.5, 0.75,1.0],
- "stopColor": [[0.0,0.0,1.0,1.0], [0.0,0.0,0.75,1.0], [0.0,0.0,0.5,1.0],
- [1.0,1.0,1.0,0.0]]
+ "stopOffset": [0.0, 0.5, 0.75, 1.0],
+ "stopColor": [[0.0,0.0,1.0,1.0], [0.0,0.0,0.75,1.0], [0.0,0.0,0.5,1.0], [1.0,1.0,1.0,0.0]]
}
},
"SliderHandleTextLabel": {
"visualType": "GRADIENT",
"startPosition": [0.0, -0.5],
"endPosition": [0.0, 0.5],
- "stopOffset": [0.0, 0.5, 0.75,1.0],
- "stopColor": [[0.0,0.0,1.0,1.0], [0.0,0.0,0.75,1.0], [0.0,0.0,0.5,1.0],
- [1,1,1,0.09]]
+ "stopOffset": [0.0, 0.5, 0.75, 1.0],
+ "stopColor": [[0.0,0.0,1.0,1.0], [0.0,0.0,0.75,1.0], [0.0,0.0,0.5,1.0], [1,1,1,0.09]]
}
}
}
<pre class="prettyprint">
TextLabel label = TextLabel::New();
-label.SetProperty( TextLabel::Property::TEXT,
- "Hello World" );
+label.SetProperty( TextLabel::Property::TEXT, "Hello World" );
Stage::GetCurrent().Add( label );
</pre>
parent.AddChild( label, TableView::CellPosition( 1, 0 ) );
parent.SetFitHeight( 1 );
-label = TextLabel::New( "لإعادة ترتيب الشاشات، يجب تغيير نوع العرض إل" );
+label = TextLabel::New( "لإعادة ترتيب الشاشات، يجب تغيير نوع العرض إلى شبكة قابلة للتخصيص" );
label.SetAnchorPoint( AnchorPoint::TOP_LEFT );
label.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
label.SetResizePolicy( ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT );
{
public:
VideoViewController( Application& application )
- : mApplication( application )
+ : mApplication( application )
{
mApplication.InitSignal().Connect( this, &VideoViewController::Create );
}
Evas_Object *circle_progressbar;
Evas_Object *parent;
-circle_progressbar = eext_circle_object_progressbar_add(parent,
- surface);
+circle_progressbar = eext_circle_object_progressbar_add(parent, surface);
</pre>
</li>
<li>
elm_image_file_set(image, "music_controller_btn_play.png", NULL);
eext_rotary_selector_item_part_content_set(item, "item,icon",
- EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL,
- image);
+ EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL, image);
/* Set selector content icon */
image = elm_image_add(rotary_selector);
elm_image_file_set(image, "music_controller_btn.png", NULL);
eext_rotary_selector_item_part_content_set(item, "selector,icon",
- EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL,
- image);
+ EEXT_ROTARY_SELECTOR_ITEM_STATE_NORMAL, image);
</pre></li>
<li>Define the item texts. The text is displayed in the selector when the item is selected.
<p>The following example sets the horizontal scrollbar on when needed and the vertical scrollbar always off:</p>
<pre class="prettyprint">
-eext_circle_object_scroller_policy_set(circle_scroller, ELM_SCROLLER_POLICY_AUTO,
- ELM_SCROLLER_POLICY_OFF);
+eext_circle_object_scroller_policy_set(circle_scroller, ELM_SCROLLER_POLICY_AUTO, ELM_SCROLLER_POLICY_OFF);
</pre>
<p>To get the current scroller policy, use the <code>eext_circle_object_scroller_policy_get()</code> function.</p>
<pre class="prettyprint">
Evas_Object *slider = NULL;
-slider = eext_circle_object_slider_add(ad->nf,
- ad->circle_surface);
+slider = eext_circle_object_slider_add(ad->nf, ad->circle_surface);
</pre>
</li>
<li>Configure the circle slider <a href="#feature">features</a>.
</li>
<li>Set a mode to the colorselector with the <code>elm_colorselector_mode_set()</code> function. Currently, only the palette mode is available in Tizen.
<pre class="prettyprint">
-elm_colorselector_mode_set(colorsel,
- ELM_COLORSELECTOR_PALETTE);
+elm_colorselector_mode_set(colorsel, ELM_COLORSELECTOR_PALETTE);
</pre>
</li>
<li>Set a name to the palette with the <code>elm_colorselector_palette_name_set()</code> function. If you use the default palette, you can skip this step.</li>
<li>Append items to the ctxpopup with the <code>elm_ctxpopup_item_append()</code> function.
The function takes 5 parameters: the pointer of the ctxpopup, a file path of an icon, a text, a callback function to call when the item is clicked, and the parameter passed to the callback.
<pre class="prettyprint">
-elm_ctxpopup_item_append(ctxpopup, "icon.png",
- "Call",
- _item_selected_cb,
- NULL);
+elm_ctxpopup_item_append(ctxpopup, "icon.png", "Call", _item_selected_cb, NULL);
</pre>
</li>
<li>Register the <a href="#callback">callback</a> functions.</li>
<p>Set the priority of the direction where the ctxpopup appears from with the <code>elm_ctxpopup_direction_priority_set()</code> function:</p>
<pre class="prettyprint">
-elm_ctxpopup_direction_priority_set(ctxpopup, ELM_CTXPOPUP_DIRECTION_UP,
- ELM_CTXPOPUP_DIRECTION_LEFT,
- ELM_CTXPOPUP_DIRECTION_DOWN,
- ELM_CTXPOPUP_DIRECTION_RIGHT);
+elm_ctxpopup_direction_priority_set(ctxpopup, ELM_CTXPOPUP_DIRECTION_UP, ELM_CTXPOPUP_DIRECTION_LEFT,
+ ELM_CTXPOPUP_DIRECTION_DOWN, ELM_CTXPOPUP_DIRECTION_RIGHT);
</pre>
</li>
<li>
Evas_Object *entry;
Entry = elm_entry_add(layout);
-elm_entry_text_style_user_push(entry,
- "DEFAULT='font=Tizen:style=Light
- font_size=50 color=#00f align=center'");
+elm_entry_text_style_user_push(entry, "DEFAULT='font=Tizen:style=Light font_size=50 color=#00f align=center'");
</pre>
<p>The <code>DEFAULT</code> element sets the style properties to a default style that is applied to the complete text. For more information on style properties, such as font, font size, and color, see <a href="evas_objects_n.htm#block">Textblock Objects</a>.</p>
<ol>
<li>Add a flipselector with the <code>elm_flipselector_add()</code> function:
<pre class="prettyprint">
-Evas_Object *flipsel;
+Evas_Object *flipselector;
-flipsel = elm_flipselector_add(parent);
+flipselector = elm_flipselector_add(parent);
</pre>
</li>
<li>Add items to the flipselector with the <code>elm_flipselector_item_append()</code> function:
<pre class="prettyprint">
Elm_Object_Item *flip_it;
-flip_it = elm_flipselector_item_append(flipsel,
- "99",
- it_select_cb,
- NULL);
+flip_it = elm_flipselector_item_append(flipselector, "99", it_select_cb, NULL);
/* Called when the flip_it object is selected */
void
-it_select_cb(void *data, Evas_Object *obj,
- void *event_info)
+it_select_cb(void *data, Evas_Object *obj, void *event_info)
{
- dlog_print(DLOG_INFO, LOG_TAG,
- "flip_it selected\n");
+ dlog_print(DLOG_INFO, LOG_TAG, "flip_it selected\n");
}
</pre>
</li>
<li>Register the <a href="#callback">callback</a> functions.
<p>The following example shows how to define and register a callback for the <code>selected</code> signal:</p>
<pre class="prettyprint">
-evas_object_smart_callback_add(flipsel, "selected", _flip_selected_cb, NULL);
+evas_object_smart_callback_add(flipselector, "selected", _flip_selected_cb, NULL);
static void
_flip_selected_cb(void *data, Evas_Object *obj, void *event_info)
Evas_Object *win;
Evas_Object *conf;
Evas_Object *nf;
-Evas_Object *flipsel;
+Evas_Object *flipselector;
char buf[8];
int i;
/* win - conformant - naviframe */
/* Add a flipselector */
-flipsel = elm_flipselector_add(nf);
+flipselector = elm_flipselector_add(nf);
for (i = 0; i <= 99; i++) {
snprintf(buf, 8, "%u", i);
- elm_flipselector_item_append(flipsel, buf, flipselector_item_select_cb, NULL);
+ elm_flipselector_item_append(flipselector, buf, flipselector_item_select_cb, NULL);
}
-elm_naviframe_item_push(nf, "Flipselector", NULL, NULL, flipsel, NULL);
+elm_naviframe_item_push(nf, "Flipselector", NULL, NULL, flipselector, NULL);
void
flipselector_item_select_cb(void *data, Evas_Object *obj, void *event_info)
<p>To set the first interval, use the <code>elm_flipselector_first_interval_set()</code> function:</p>
<pre class="prettyprint">
-elm_flipselector_first_interval_set(flipsel, 2.0);
+elm_flipselector_first_interval_set(flipselector, 2.0);
</pre>
</li>
<li>
<p>Show the next text using the <code>elm_flipselector_flip_next()</code> function:</p>
<pre class="prettyprint">
-elm_flipselector_flip_next(flipsel);
+elm_flipselector_flip_next(flipselector);
</pre>
</li>
<li>
<p>Show the previous text using the <code>elm_flipselector_flip_prev()</code> function:</p>
<pre class="prettyprint">
-elm_flipselector_flip_prev(flipsel);
+elm_flipselector_flip_prev(flipselector);
</pre>
</li>
<li>
Elm_Object_Item *it;
int i;
-/* Register the callback functions to make the genlist "expanded" or "contracted" when "selected" */
+/*
+ Register the callback functions to make the genlist
+ "expanded" or "contracted" when "selected"
+*/
evas_object_smart_callback_add(genlist, "selected", gl_selected_cb, NULL);
evas_object_smart_callback_add(genlist, "expanded", gl_expanded_cb, NULL);
evas_object_smart_callback_add(genlist, "contracted", gl_contracted_cb, NULL);
}
static void
-gl_contracted_cb(void *data EINA_UNUSED, Evas_Object *obj EINA_UNUSED, void *event_info)
+gl_contracted_cb(void *data EINA_UNUSED, Evas_Object *obj EINA_UNUSED,
+ void *event_info)
{
Elm_Object_Item *it = event_info;
<li><p>Change the item label using the <code>elm_object_item_part_text_set()</code> function.</p>
<p>To change the item label to "New Label":</p>
<pre class="prettyprint">
-Elm_Object_Item *it = elm_hoversel_item_add(hoversel, "test", NULL,
- ELM_ICON_NONE, NULL, NULL);
+Elm_Object_Item *it = elm_hoversel_item_add(hoversel, "test", NULL, ELM_ICON_NONE, NULL, NULL);
elm_object_item_part_text_set(it, "default", "New label");
</pre></li>
<li><p>Delete all items together with the <code>elm_hoversel_clear()</code> function:</p>
index = elm_index_add(nf);
-for (i = 0; i < 26; i++)
-{
+for (i = 0; i < 26; i++) {
sprintf(buf, "%c", ('A' + i));
elm_index_item_append(index, buf, NULL, NULL);
}
elm_table_pack(table, index, 0, 0, 1, 1);
evas_object_show(index);
-for (i = 0; i < 26; i++)
-{
+for (i = 0; i < 26; i++) {
sprintf(buf, "%c", ('A' + i));
sprintf(str_buf, "%s string", buf);
it = elm_list_item_append(list, str_buf, NULL, NULL, NULL, NULL);
elm_object_part_content_set(panel, "default", button);
evas_object_show(button);
-/* Add a contracted panel to (dis)appear from the bottom to the box */
+/* Add a collapsed panel to (dis)appear from the bottom to the box */
panel = elm_panel_add(box);
elm_panel_orient_set(panel, ELM_PANEL_ORIENT_BOTTOM);
elm_panel_hidden_set(panel, EINA_TRUE);
</li>
<li>Set the title text using the <code>title,text</code> part name:
<pre class="prettyprint">
-elm_object_part_text_set(popup, "title,text",
- "Popup Title");
+elm_object_part_text_set(popup, "title,text", "Popup Title");
</pre>
</li>
<li>Set the content of the popup:
/* Set a text to title and content part */
elm_object_part_text_set(popup, "title,text", "Title");
-elm_object_text_set(popup, "This Popup has title area, content area and action area set, "
- "action area has two buttons OK and Cancel.");
+elm_object_text_set(popup, "This Popup has title area, content area and action area set,
+ action area has two buttons OK and Cancel.");
/* Add an "OK" button to popup */
button = elm_button_add(popup);
<ul>
<li>Set the progressbar pulse mode to activate the progressbar with the <code>elm_progressbar_pulse_set()</code> function:
<pre class="prettyprint">
-elm_progressbar_pulse_set(progressbar,
- EINA_TRUE);
+elm_progressbar_pulse_set(progressbar, EINA_TRUE);
</pre>
<p>The pulse mode makes the progressbar loop infinitely between the start and end position. If you activate the pulse mode in the default style, the unit is invisible.</p>
</li>
<ul>
<li>Set the slider indicator:
<pre class="prettyprint">
-elm_slider_indicator_show_set(slider,
- EINA_TRUE);
-elm_slider_indicator_format_set(slider,
- "%.0f");
+elm_slider_indicator_show_set(slider, EINA_TRUE);
+elm_slider_indicator_format_set(slider, "%.0f");
</pre>
</li>
<li>Set the range and value of the slider:
<li>Configure the toolbar <a href="#option">options</a>.</li>
<li>Append items to the toolbar with <code>elm_toolbar_item_append()</code> function. The function takes 5 parameters: the pointer of the toolbar, a file path of an icon, a text, a callback function to call when the item is clicked, and the parameter passed to the callback.
<pre class="prettyprint">
-elm_toolbar_item_append(toolbar, "icon.png",
- "Tab",
- _item_selected_cb,
- NULL);
+elm_toolbar_item_append(toolbar, "icon.png", "Tab", _item_selected_cb, NULL);
</pre>
<p>The following example shows how to add 2 items and define callbacks for when they are clicked:</p>
<p>The fourth parameter defines a callback which is triggered when the tooltip disappears. Use the callback to delete the previously allocated <code>Evas_Object</code>.</p>
<pre class="prettyprint">
-elm_object_tooltip_content_cb_set(obj, tooltip_content_cb,
- data, tooltip_content_del_cb);
+elm_object_tooltip_content_cb_set(obj, tooltip_content_cb, data, tooltip_content_del_cb);
Evas_Object*
tooltip_content_cb(void *data, Evas_Object *obj, Evas_Object *tooltip)
<li>Add an item (a view) and push it to the stack using the <code>elm_naviframe_item_push()</code> function. The function takes 6 parameters and returns a handler of the item.
<pre class="prettyprint">
Elm_Object_Item
-*elm_naviframe_item_push(Evas_Object *obj,
- const char *title,
- Evas_Object *prev_btn,
- Evas_Object *next_btn,
- Evas_Object *content,
- const char *item_style);
+*elm_naviframe_item_push(Evas_Object *obj, const char *title, Evas_Object *prev_btn,
+ Evas_Object *next_btn, Evas_Object *content, const char *item_style);
</pre>
<ul>
<li><p>In Tizen, the <code>next_btn</code> (fourth parameter) is not shown, so use <code>NULL</code>. The <code>prev_btn</code> (third parameter) is supported, but auto pushing is also supported from Tizen 2.4. As a result, use <code>NULL</code> for <code>prev_btn</code> too, and set the auto-pushed flag (about the <code>prev_btn</code>) to <code>true</code> (like below).</p>
/* Variables for naviframe item push */
const char *title_text = "Naviframe";
-Evas_Object *prev_btn = NULL; /* recommended NULL, replace with elm_naviframe_prev_btn_auto_pushed_set() */
-Evas_Object *next_btn = NULL; /* recommended NULL */
+/* Recommended NULL, replace with elm_naviframe_prev_btn_auto_pushed_set() */
+Evas_Object *prev_btn = NULL;
+/* Recommended NULL */
+Evas_Object *next_btn = NULL;
Evas_Object *empty_content = NULL;
const char *item_style_default = NULL;
const char *item_style_tabbar = "tabbar";
evas_object_show(tb);
/* Push a naviframe item (push 2 items in total to show the back button) */
-elm_naviframe_item_push(nf, title_text, prev_btn, next_btn, empty_content, item_style_default);
+elm_naviframe_item_push(nf, title_text, prev_btn, next_btn,
+ empty_content, item_style_default);
/* Push a naviframe item, set the style as "tabbar" and pass the layout as content */
nf_it = elm_naviframe_item_push(nf, title_text, prev_btn, next_btn, ly, item_style_tabbar);
<pre class="prettyprint">
Evas_Object *left_button;
-elm_object_part_content_set(panes, "left",
- left_button);
+elm_object_part_content_set(panes, "left", left_button);
</pre>
</li>
<li>Add a content to the right pane:
<p>The size of the scroller depends on the size of the parent. When the parent changes, for example, when the window is resized or rotated, the scroller is also resized.</p>
<p>Since you need to be informed when the scroller is resized, add a callback on the <code>EVAS_CALLBACK_RESIZE</code> event for the scroller:</p>
<pre class="prettyprint">
-evas_object_event_callback_add(scroller, EVAS_CALLBACK_RESIZE,
- _scroller_resize_cb, NULL);
+evas_object_event_callback_add(scroller, EVAS_CALLBACK_RESIZE, _scroller_resize_cb, NULL);
</pre>
<p>The callback retrieves the new size of the scroller using the <code>evas_object_geometry_get()</code> function on the object pointer. The pointer is relative to the object that has been resized, which in this case is the scroller itself. Iterate through the images of the scroller and set the minimum size to fit the scroller size:</p>
<pre class="prettyprint">
<li>To create a stringshare, declare a string variable and call the <code>eina_stringshare_add()</code> function:
<pre class="prettyprint">
const char *mystr;
-const char *prologue = "Enlightenment is not just a window manager
- for Linux/X11 and others";
+const char *prologue = "Enlightenment is not just a window manager for Linux/X11 and others";
mystr = eina_stringshare_add(prologue);
</pre></li>
eina_strbuf_insert(mybuffer, "More buffer", 10);
/* Using eina_strbuf_length_get to get the buffer length */
-eina_strbuf_insert_printf(buf, "%s: %d", 6, "length",
- eina_strbuf_length_get(buf));
+eina_strbuf_insert_printf(buf, "%s: %d", 6, "length", eina_strbuf_length_get(buf));
</pre>
</li>
char *old_phone = NULL;
char *phone = NULL;
/* Replace the phone number of Richard Strauss */
-old_phone = eina_hash_modify(phone_book, "Richard Georg Strauss",
- strdup("+23 45 111-11111"));
+old_phone = eina_hash_modify(phone_book, "Richard Georg Strauss", strdup("+23 45 111-11111"));
phone = eina_hash_set(phone_book, "Philippe de Magalhães", strdup("+33 6 111-11111"));
eina_hash_set(phone_book, "Richard Georg Strauss", strdup("+23 45 111-117711"));
</pre>
<pre class="prettyprint">
static Eina_Bool
-pb_foreach_cb(const Eina_Hash *phone_book, const void *key,
- void *data, void *fdata)
+pb_foreach_cb(const Eina_Hash *phone_book, const void *key, void *data, void *fdata)
{
const char *name = key;
const char *number = data;
return ECORE_CALLBACK_RENEW;
}
-anim = ecore_animator_timeline_add(2, _do_animation,
- my_evas_object);
+anim = ecore_animator_timeline_add(2, _do_animation, my_evas_object);
ecore_animator_del(anim);
</pre>
<p>Define the context used by the effect:</p>
<pre class="prettyprint">
static void*
-_custom_context_new(Evas_Coord from_w, Evas_Coord from_h, Evas_Coord to_w,
- Evas_Coord to_h)
+_custom_context_new(Evas_Coord from_w, Evas_Coord from_h, Evas_Coord to_w, Evas_Coord to_h)
{
Custom_Effect *custom_effect;
<pre class="prettyprint">
/* Create Evas instance */
-ad->win = elm_win_util_standard_add(PACKAGE,
- PACKAGE);
+ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
elm_win_autodel_set(ad->win, EINA_TRUE);
/* Get the canvas */
Evas *evas = NULL;
/* Window */
- ad->win = elm_win_util_standard_add("Extra object function",
- "Extra object function");
+ ad->win = elm_win_util_standard_add("Extra object function", "Extra object function");
elm_win_autodel_set(ad->win, EINA_TRUE);
/* Window callbacks */
- evas_object_smart_callback_add(ad->win, "delete,request",
- win_delete_request_cb, NULL);
+ evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
evas = evas_object_evas_get(ad->win);
void *evas_object_image_data_get(const Evas_Object *obj, Eina_Bool for_writing);
void evas_object_image_size_set(Evas_Object *obj, int w, int h);
void evas_object_image_data_update_add(Evas_Object *obj, int x, int y, int w, int h);
-Eina_Bool evas_object_image_save(const Evas_Object *obj, const char *file,
- const char *key, const char *flags);
+Eina_Bool evas_object_image_save(const Evas_Object *obj, const char *file, const char *key, const char *flags);
</pre>
<h3>Creating an Image Object and Setting the Image Data Source</h3>
void
create_rectangle()
{
- /* Initialize an rectangle object to be displayed on the screen */
+ /* Initialize a rectangle object to be displayed on the screen */
Evas_Object *rect = evas_object_rectangle_add(e);
/* Set rectangle color */
main(int argc, char *argv[])
{
event_callback.create = app_create;
- ret = ui_app_main(argc, argv, &event_callback,
- &ad);
+ ret = ui_app_main(argc, argv, &event_callback, &ad);
return ret;
}
<p>To use a hide effect in dismissing the popup, use the <code>elm_popup_dismiss()</code> function in the callback:</p>
<pre class="prettyprint">
static void
-eext_ctxpopup_back_cb(void *data EINA_UNUSED, Evas_Object *obj,
- void *event_info EINA_UNUSED)
+eext_ctxpopup_back_cb(void *data EINA_UNUSED, Evas_Object *obj, void *event_info EINA_UNUSED)
{
elm_ctxpopup_dismiss(obj);
}
<p>The following code is the style sample for the text style:</p>
<pre class="prettyprint">
-style { name: "list_text_main";
+style {
+ name: "list_text_main";
base: "font=Tizen:style=Regular font_size=30 color=#ffffff ellipsis=1.0";
tag: "br" "\n";\
tag: "ps" "ps";\
int
main(int argc, char *argv[])
{
- ret = ui_app_main(argc, argv, &event_callback,
- &ad);
+ ret = ui_app_main(argc, argv, &event_callback, &ad);
return ret;
}
return ECORE_CALLBACK_RENEW;
}
-ecore_main_fd_handler_add(my_fd, ECORE_FD_READ | ECORE_FD_ERROR, my_fd_cb,
- my_data, NULL, NULL);
+ecore_main_fd_handler_add(my_fd, ECORE_FD_READ | ECORE_FD_ERROR, my_fd_cb, my_data, NULL, NULL);
</pre>
</li>
ui_app_low_battery, &ad);
ui_app_add_event_handler(&handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY,
ui_app_low_memory, &ad);
- ui_app_add_event_handler(&handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED],
- APP_EVENT_DEVICE_ORIENTATION_CHANGED,
+ ui_app_add_event_handler(&handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED,
ui_app_orient_changed, &ad);
- ui_app_add_event_handler(&handlers[APP_EVENT_LANGUAGE_CHANGED],
- APP_EVENT_LANGUAGE_CHANGED,
+ ui_app_add_event_handler(&handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED,
ui_app_lang_changed, &ad);
- ui_app_add_event_handler(&handlers[APP_EVENT_REGION_FORMAT_CHANGED],
- APP_EVENT_REGION_FORMAT_CHANGED,
+ ui_app_add_event_handler(&handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED,
ui_app_region_changed, &ad);
ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
/* Create the window */
win = elm_win_util_standard_add(NULL, "extension circle sample");
elm_win_autodel_set(win, EINA_TRUE);
- evas_object_smart_callback_add(win, "delete,request",
- win_delete_request_cb, NULL);
+ evas_object_smart_callback_add(win, "delete,request", win_delete_request_cb, NULL);
/* Register the handler */
eext_rotary_event_handler_add(_rotary_handler_cb, NULL);
/* Window */
win = elm_win_util_standard_add(NULL, "extension sample");
elm_win_autodel_set(win, EINA_TRUE);
- evas_object_smart_callback_add(win, "delete,request",
- win_delete_request_cb, NULL);
+ evas_object_smart_callback_add(win, "delete,request", win_delete_request_cb, NULL);
/* Slider */
slider = elm_slider_add(win);
/* Window */
win = elm_win_util_standard_add(NULL, "extension circle sample");
elm_win_autodel_set(win, EINA_TRUE);
- evas_object_smart_callback_add(win, "delete,request",
- win_delete_request_cb, NULL);
+ evas_object_smart_callback_add(win, "delete,request", win_delete_request_cb, NULL);
/* Conformant */
conform = elm_conformant_add(win);
<span class="highlight">fixed: 1 1;</span>
/* Image size: 720 x 180 pixels (when the scaling factor is 1.0) */
<span class="highlight">min: 720 180;</span>
- /* Y-axis is positioned relative to "rect2" part */
+ /* Y axis is positioned relative to "rect2" part */
<span class="highlight">rel1 {relative: 0.5 0.0; to_y: "rect2";}</span>
<span class="highlight">rel2 {relative: 0.5 0.0; to_y: "rect2";}</span>
/* Bottom-aligned */
font: "TIZEN";
/* Affected by scaling factor */
<span class="highlight">size: 80;</span>
- /* Minimum height of the part container is decided by the text size */
+ /*
+ Minimum height of the part container
+ is decided by the text size
+ */
<span class="highlight">min: 0 1;</span>
text: "Test properties!!";
}
<li>Call the <code>ecore_thread_feedback_run()</code> function to start the thread:
<pre class="prettyprint">
-ecore_thread_feedback_run(_long_function, _set_label_text, _end_func,
- NULL, ad, EINA_FALSE);
+ecore_thread_feedback_run(_long_function, _set_label_text, _end_func, NULL, ad, EINA_FALSE);
</pre>
</li>
</ol>
{
char buf[64];
struct thd *thd = data;
- snprintf(buf, sizeof(buf), "%s %d", (thd->tick_not_tock ? "Tick" : "Tock"),
- thd->iteration);
+ snprintf(buf, sizeof(buf), "%s %d", (thd->tick_not_tock ? "Tick" : "Tock"), thd->iteration);
elm_object_text_set(thd->ad->label, buf);
return NULL;
/* Gesture layer object */
Evas_Object *g;
-win = elm_win_util_standard_add("gesture_layer",
- "Gesture Layer");
+win = elm_win_util_standard_add("gesture_layer", "Gesture Layer");
elm_win_autodel_set(win, EINA_TRUE);
/* Gesture layer transparent object */
<p>The default values are defined in the system policy. In Tizen, they are 0.5 seconds for a long tap, and 0.33 seconds for a double tap.</p>
<pre class="prettyprint">
/* Get or set the gesture layer long tap start timeout of an object */
-void elm_gesture_layer_long_tap_start_timeout_set(Evas_Object *obj,
- double long_tap_start_timeout);
+void elm_gesture_layer_long_tap_start_timeout_set(Evas_Object *obj, double long_tap_start_timeout);
double elm_gesture_layer_long_tap_start_timeout_get(const Evas_Object *obj);
/* Get or set the gesture layer double tap timeout of an object */
-void elm_gesture_layer_double_tap_timeout_set(Evas_Object *obj,
- double double_tap_timeout);
+void elm_gesture_layer_double_tap_timeout_set(Evas_Object *obj, double double_tap_timeout);
double elm_gesture_layer_double_tap_timeout_get(const Evas_Object *obj);
</pre></li>
momentum_move(void *data, void *event_info)
{
Elm_Gesture_Momentum_Info *p = (Elm_Gesture_Momentum_Info *)event_info;
- printf("momentum move x1,y1=<%d,%d> x2,y2=<%d,%d>
- tx,ty=<%u,%u> mx=<%d> my=<%d> n=<%u>\n",
+ printf("momentum move x1,y1=<%d,%d> x2,y2=<%d,%d> tx,ty=<%u,%u> mx=<%d> my=<%d> n=<%u>\n",
p->x1, p->y1, p->x2, p->y2, p->tx, p->ty, p->mx, p->my, p->n);
return EVAS_EVENT_FLAG_ON_HOLD;
momentum_end(void *data, void *event_info)
{
Elm_Gesture_Momentum_Info *p = (Elm_Gesture_Momentum_Info *)event_info;
- printf("momentum ended x1,y1=<%d,%d> x2,y2=<%d,%d>
- tx,ty=<%u,%u> mx=<%d> my=<%d> n=>%u>\n",
+ printf("momentum ended x1,y1=<%d,%d> x2,y2=<%d,%d> tx,ty=<%u,%u> mx=<%d> my=<%d> n=>%u>\n",
p->x1, p->y1, p->x2, p->y2, p->tx, p->ty, p->mx, p->my, p->n);
return EVAS_EVENT_FLAG_ON_HOLD;
int elm_gesture_layer_line_min_length_get(const Evas_Object *obj);
/* Get or set the gesture layer line distance tolerance of an object */
-void elm_gesture_layer_line_distance_tolerance_set(Evas_Object *obj,
- Evas_Coord line_distance_tolerance);
+void elm_gesture_layer_line_distance_tolerance_set(Evas_Object *obj, Evas_Coord line_distance_tolerance);
Evas_Coord elm_gesture_layer_line_distance_tolerance_get(const Evas_Object *obj);
</pre></li>
<p>For example, when drawing a line, the finger can stop moving while the finger stays on the touch screen. This action makes the line end. After the finger continues to move, the line gesture restarts. When the continue mode is disabled, the finger has to be lifted off the touch screen to end a gesture, and then touch the screen again to start a new gesture.</p>
<pre class="prettyprint">
/* Get or set the gesture layer continue mode of an object */
-void elm_gesture_layer_continues_enable_set(Evas_Object *obj,
- Eina_Bool continues_enable);
+void elm_gesture_layer_continues_enable_set(Evas_Object *obj, Eina_Bool continues_enable);
Eina_Bool elm_gesture_layer_continues_enable_get(const Evas_Object *obj);
</pre>
</li></ul>
<p>The default value is defined in the system policy. In Tizen, it is 250 ms.</p>
<pre class="prettyprint">
/* Get or set the gesture layer flick time limit (in milliseconds) of an object */
-void elm_gesture_layer_flick_time_limit_ms_set(Evas_Object *obj,
- unsigned int flick_time_limit_ms);
+void elm_gesture_layer_flick_time_limit_ms_set(Evas_Object *obj, unsigned int flick_time_limit_ms);
unsigned int elm_gesture_layer_flick_time_limit_ms_get(const Evas_Object *obj);
</pre>
double elm_gesture_layer_zoom_step_get(const Evas_Object *obj);
/* Get or set the gesture layer zoom distance tolerance of an object */
-void elm_gesture_layer_zoom_distance_tolerance_set(Evas_Object *obj,
- Evas_Coord zoom_distance_tolerance);
+void elm_gesture_layer_zoom_distance_tolerance_set(Evas_Object *obj, Evas_Coord zoom_distance_tolerance);
Evas_Coord elm_gesture_layer_zoom_distance_tolerance_get(const Evas_Object *obj);
/* Get or set the gesture layer zoom wheel factor of an object */
double elm_gesture_layer_rotate_step_get(const Evas_Object *obj);
/* Get or set the gesture layer rotate angular tolerance of an object */
-void elm_gesture_layer_rotate_angular_tolerance_set(Evas_Object *obj,
- double rotate_angular_tolerance);
+void elm_gesture_layer_rotate_angular_tolerance_set(Evas_Object *obj, double rotate_angular_tolerance);
double elm_gesture_layer_rotate_angular_tolerance_get(const Evas_Object *obj);
</pre>
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
- evas_object_smart_callback_add(ad->win, "delete,request",
- win_delete_request_cb, NULL);
+ evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
/* Conformant */
<li><p>To obtain a list of all the alarms that have been set on a device but not yet triggered, use the <code>getAll()</code> method:</p>
<pre class="prettyprint">
var alarms = tizen.alarm.getAll();
-console.log(alarms.length + " alarms present in the storage.");
+console.log(alarms.length + ' alarms present in the storage.');
</pre></li>
<li>To create an alarm:
<ul>
Alarm repeats every Saturday and Sunday,
at 08:00, starting after April 4, 2012
*/
-var alarm4 = new tizen.AlarmAbsolute(date, ["SA", "SU"]);
+var alarm4 = new tizen.AlarmAbsolute(date, ['SA', 'SU']);
</pre>
<div class="note">
<strong>Note</strong>
Alarm is triggered for the first time in 1 hour,
and then repeated every 2 minutes
*/
-var alarm5 = new tizen.AlarmRelative(tizen.alarm.PERIOD_HOUR,
- 2 * tizen.alarm.PERIOD_MINUTE);
+var alarm5 = new tizen.AlarmRelative(tizen.alarm.PERIOD_HOUR, 2 * tizen.alarm.PERIOD_MINUTE);
</pre></li>
</ul></li>
<pre class="prettyprint">
/* First add created alarm to the device */
/* Tizen alias ID is deprecated since Tizen 2.3.1 */
-tizen.alarm.add(alarm1, "tizen.internet");
+tizen.alarm.add(alarm1, 'tizen.internet');
/* Then remove it */
tizen.alarm.remove(alarm1.id);
</pre>
/* Run the browser */
var alarm = new tizen.AlarmAbsolute(new Date(2012, 10, 4, 8, 0));
/* Tizen alias ID is deprecated since Tizen 2.3.1 */
-tizen.alarm.add(alarm, "tizen.internet");
+tizen.alarm.add(alarm, 'tizen.internet');
</pre></li>
<li> <p>To launch an application with additional information when an alarm is triggered, you must use the application control and define the required arguments as a parameter in the <code>add()</code> method used to add the created alarm to the system:</p>
<pre class="prettyprint">
*/
var alarm = new tizen.AlarmAbsolute(new Date(2012, 10, 4, 8, 0));
-var appControl =
- new tizen.application.ApplicationControl("http://tizen.org/appcontrol/operation/view",
- "http://www.tizen.org");
+var appControl = new tizen.application.ApplicationControl('http://tizen.org/appcontrol/operation/view',
+ 'http://www.tizen.org');
-tizen.alarm.add(alarm, "org.tizen.browser", appControl);
+tizen.alarm.add(alarm, 'org.tizen.browser', appControl);
</pre></li>
</ol>
<pre class="prettyprint">
/* Alarm is triggered at 8:00 on April 4, 2012 */
var alarm = new tizen.AlarmAbsolute(new Date(2012, 3, 4, 8, 0));
-tizen.alarm.add(alarm, "org.tizen.browser");
+tizen.alarm.add(alarm, 'org.tizen.browser');
</pre></li>
<li><p>Use the <code>getNextScheduledDate()</code> method to retrieve the time and date of the next absolute alarm to be triggered:</p>
<pre class="prettyprint">
-console.log("The alarm will trigger at " + alarm.getNextScheduledDate());
+console.log('The alarm will trigger at ' + alarm.getNextScheduledDate());
</pre></li>
<li><p>Create a relative alarm:</p>
<pre class="prettyprint">
/* Alarm is triggered in 3 hours */
var alarm = new tizen.AlarmRelative(3 * tizen.alarm.PERIOD_HOUR);
-tizen.alarm.add(alarm, "org.tizen.browser");
+tizen.alarm.add(alarm, 'org.tizen.browser');
</pre></li>
<li><p>Use the <code>getRemainingSeconds()</code> method to retrieve the number of seconds till the next relative alarm is triggered:</p>
<pre class="prettyprint">
-console.log("The alarm triggers " + alarm.getRemainingSeconds() + " seconds later");
+console.log('The alarm triggers ' + alarm.getRemainingSeconds() + ' seconds later');
</pre></li>
</ol>
<li><p>Create the <code>ApplicationControl</code> and <code>StatusNotificationInit</code> instances needed for the <code>StatusNotification</code> notification type:</p>
<pre class="prettyprint">
/* Create ApplicationControl object */
-var appControl = new tizen.ApplicationControl(
- "http://tizen.org/appcontrol/operation/default",
- null,
- "image/jpg",
- null);
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/default',
+ null, 'image/jpg', null);
/* You can add additional attibutes to the notification dictionary */
-var notificationDict =
-{
- content: "This is a simple notification's content.",
- vibration : true,
- appId: tizen.application.getCurrentApplication().appInfo.id,
- appControl : appControl,
+var notificationDict = {
+ content: 'This is a simple notification\'s content.',
+ vibration: true,
+ appId: tizen.application.getCurrentApplication().appInfo.id,
+ appControl: appControl,
};
/* Create StatusNotification object */
-var notification = new tizen.StatusNotification("SIMPLE", "Simple notification's title", notificationDict);
+var notification = new tizen.StatusNotification('SIMPLE', 'Simple notification\'s title',
+ notificationDict);
</pre></li>
<li><p>Add the alarm notification:</p>
<pre class="prettyprint">
<pre class="prettyprint">
/* Obtain notification object */
var noti = tizen.alarm.getAlarmNotification(alarm.id);
-console.log("Notification title: " + noti.title + ", content: " + noti.content);
+console.log('Notification title: ' + noti.title + ', content: ' + noti.content);
</pre>
<p>You can <a href="removeAlarm">remove the alarm notification</a> with the <code>tizen.alarm.remove()</code> method.</p></li>
</ol>
<p>The following code example shows an <code>ApplicationControl</code> instance that launches an application to pick images:</p>
<pre class="prettyprint">
-var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/pick",
- null, "image/*", null, null);
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/pick',
+ null, 'image/*', null, null);
tizen.application.launchAppControl(appControl, null, successCb, errCb, null);
</pre>
<p>When you make an implicit launch request, there can be multiple applications that can fulfill the request. In that case, the system shows a pop-up which allows the user to select the application of their choice. If you want to select a specific application among the available applications that provide a specific operation, you can use the <code>findAppControl()</code> method of <code>Application</code> interface to search for applications which provide the functionalities that you need. The following code example demonstrates an explicit launch of an application to provide the image view operation that is found using the <code>findAppControl()</code> method:</p>
<pre class="prettyprint">
/*
- Assuming that the filesystem virtual root "images"
+ Assuming that the filesystem virtual root 'images'
has been resolved and saved in variable images
*/
-var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view",
- images.resolve("image12.jpg").toURI(),
- "image/*", null, null);
-
-tizen.application.findAppControl(appControl, function(appInfos, appCtrl)
- {
- if (appInfos.length >= 1)
- {
- tizen.application.launchAppControl(appCtrl, appInfos[0].id, successCB, errCB, null);
- }
- }, function(e) {/* Error handling */});
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/view',
+ images.resolve('image12.jpg').toURI(),
+ 'image/*', null, null);
+
+tizen.application.findAppControl(appControl, function(appInfos, appCtrl) {
+ if (appInfos.length >= 1) {
+ tizen.application.launchAppControl(appCtrl, appInfos[0].id, successCB, errCB, null);
+ }
+}, function(e) {
+ /* Error handling */
+});
</pre>
<pre class="prettyprint">
/*
- Assuming that the filesystem virtual root "images"
+ Assuming that the filesystem virtual root 'images'
has been resolved and saved in variable images
*/
-var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view",
- images.resolve("image12.jpg").toURI(),
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/view',
+ images.resolve('image12.jpg').toURI(),
null, null, null);
</pre>
<p>If the currently loaded page is selected by an incoming application control request, and the <code>reload</code> attribute of the service description is set to <code>disable</code>, an <code>appcontrol</code> event is dispatched to that page instead of reloading it. By using an <code>appcontrol</code> event listener, the Web application can get the requested information by calling the <code>getRequestedAppControl()</code> method of the <code>Application</code> interface. An <code>appcontrol</code> event is dispatched only if the <code>reload</code> attribute of the service description is set to <code>disable</code>.</p>
<p>The following example demonstrates adding an <code>appcontrol</code> event listener and handling an event:</p>
<pre class="prettyprint">
-window.addEventListener("appcontrol", function onAppControl()
- {
- var reqAppControl = tizen.application.getCurrentApplication.getRequestedAppControl();
- if (reqAppControl)
- {
- /* Handle the application control request */
- }
- });
+window.addEventListener('appcontrol', function onAppControl() {
+ var reqAppControl = tizen.application.getCurrentApplication.getRequestedAppControl();
+ if (reqAppControl) {
+ /* Handle the application control request */
+ }
+});
</pre>
<h2 id="prerequisites">Prerequisites</h2>
<ol>
<li><p>To retrieve a list of installed applications, use the <code>getAppsInfo()</code> method of the <code>ApplicationManager</code> interface:</p>
<pre class="prettyprint">
-function onListInstalledApplications(applications)
-{
- console.log("The number of installed applications is " + applications.length);
+function onListInstalledApplications(applications) {
+ console.log('The number of installed applications is ' + applications.length);
}
tizen.application.getAppsInfo(onListInstalledApplications);
</pre>
<p>The list of applications is returned to the <code>ApplicationInformationArraySuccessCallback</code> event handler as an array of <code>ApplicationInformation</code> objects.</p> </li>
<li><p>To retrieve a list of running applications, use the <code>getAppsContext()</code> method of the <code>ApplicationManager</code> interface:</p>
<pre class="prettyprint">
-function onRunningApplicationContexts(contexts)
-{
- console.log("The number of running applications is " + contexts.length);
+function onRunningApplicationContexts(contexts) {
+ console.log('The number of running applications is ' + contexts.length);
}
tizen.application.getAppsContext(onRunningApplicationContexts);
</pre>
<p>The list of application contexts is returned to the given event handler as an array of the <code>ApplicationContext</code> objects.</p></li>
<li><p>To retrieve basic application information, use the <code>getAppInfo()</code> method of the <code>ApplicationManager</code> interface.</p> <p>Provide the application ID of the application whose information you want as a parameter for the method. If no application ID is set, the method retrieves the information about the application calling the method.</p>
<pre class="prettyprint">
-var appinfo = tizen.application.getAppInfo("org.tizen.application");
-console.log("The application icon path: " + appinfo.iconPath);
-console.log("The application name: " + appinfo.name);
+var appinfo = tizen.application.getAppInfo('org.tizen.application');
+console.log('The application icon path: ' + appinfo.iconPath);
+console.log('The application name: ' + appinfo.name);
</pre></li>
<li><p>To retrieve application context information, use the <code>getAppContext()</code> method of the <code>ApplicationManager</code> interface.</p> <p>Provide the context ID of the application whose context information you want as a parameter for the method. If no context ID is set, the method retrieves the information about the application calling the method.</p>
<pre class="prettyprint">
var appContext = tizen.application.getAppContext();
-console.log("Application context retrieved for app " + appContext.id);
+console.log('Application context retrieved for app ' + appContext.id);
</pre></li>
<li><p>To retrieve application battery usage information, use the <code>getBatteryUsageInfo()</code> method of the <code>ApplicationManager</code> interface.</p>
<p>In the first parameter, specify the time period you want to include in the battery usage information, starting from a specific number of days ago. If you set the parameter to <code>null</code>, the time period since the battery was last fully charged is used.</p>
<pre class="prettyprint">
var batteryUsageInfoArray = tizen.application.getBatteryUsageInfo(null, 5);
-batteryUsageInfoArray.forEach(function(abuinfo)
- {
- console.log("ApplicationID: " + abuinfo.appId + ", usage: " + abuinfo.batteryUsage);
- });
+batteryUsageInfoArray.forEach(function(abuinfo) {
+ console.log('ApplicationID: ' + abuinfo.appId + ', usage: ' + abuinfo.batteryUsage);
+});
</pre>
<p>You can expand the obtained data by calling the <code>getAppInfo()</code> method with the <code>ApplicationId</code> parameter you have received from the returned array.</p></li>
</ol>
<pre class="prettyprint">
/* Launch the application */
-tizen.application.launch("samplealarm", onsuccess);
+tizen.application.launch('samplealarm', onsuccess);
/* Stop the application */
-function onGetAppsContextSuccess(appcontexts)
-{
- for (int i = 0; i < appcontexts.length; i++)
- {
- if (appcontexts[i].appId === "samplealarm")
- {
- tizen.application.kill(appcontexts[i].id);
- }
- }
+function onGetAppsContextSuccess(appcontexts) {
+ for (int i = 0; i < appcontexts.length; i++) {
+ if (appcontexts[i].appId === 'samplealarm') {
+ tizen.application.kill(appcontexts[i].id);
+ }
+ }
}
tizen.application.getAppsContext(onGetAppsContextSuccess);
<li><p>To use the application control mechanism to pick image files from a list of images, create an <code>ApplicationControl</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControl">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#ApplicationControl">TV</a> applications).</p>
<p>Define the functionality required from the external application which you want to launch. The application control request must have an operation type suitable for selecting images, with the URI set as <code>null</code>, and the MIME type set as <code>image/*</code>.</p>
<pre class="prettyprint">
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/pick",
- null, "image/*");
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/pick', null, 'image/*');
</pre></li>
<li>Define the format of the reply you want to receive from the application control:
<pre class="prettyprint">
-var appControlReplyCB =
-{
- /* Reply is sent if the requested operation is successfully delivered */
- onsuccess: function(reply)
- {
- for (var num = 0; num < reply.length; num++)
- {
- if (reply[num].key == "http://tizen.org/appcontrol/data/path")
- {
- console.log("picked image path: " + reply[num].value[0]);
- }
- }
- }
+var appControlReplyCB = {
+ /* Reply is sent if the requested operation is successfully delivered */
+ onsuccess: function(reply) {
+ for (var num = 0; num < reply.length; num++) {
+ if (reply[num].key == 'http://tizen.org/appcontrol/data/path') {
+ console.log('picked image path: ' + reply[num].value[0]);
+ }
+ }
+ }
}
</pre></li>
<li>Call the <code>launchAppControl()</code> method to find a suitable application to select the images:
<pre class="prettyprint">
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch appControl succeeded");
- }, function(e) {/* Error handling */}, appControlReplyCB);
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch appControl succeeded');
+}, function(e) {
+ /* Error handling */
+}, appControlReplyCB);
</pre></li>
</ol>
<pre class="prettyprint">
var reqAppControl = tizen.application.getCurrentApplication().getRequestedAppControl();
-if (reqAppControl && reqAppControl.callerAppId)
-{
- console.log("Requester AppID: " + reqAppControl.callerAppId
- + "\nwith operation: " + reqAppControl.appControl.operation);
-}
-else
-{
- console.log("The application was not launched with Application Control.");
+if (reqAppControl && reqAppControl.callerAppId) {
+ console.log('Requester AppID: ' + reqAppControl.callerAppId + '\nwith operation: ' + reqAppControl.appControl.operation);
+} else {
+ console.log('The application was not launched with Application Control.');
}
</pre></li>
<li><p>To send a reply to the caller application, use the <code>replyResult()</code> method of the <code>RequestedApplicationControl</code> interface:</p>
<pre class="prettyprint">
-try
-{
- /* Construct result data */
- var data = new tizen.ApplicationControlData("current-time", [new Date().toString()]);
- /* Reply to caller */
- reqAppControl.replyResult([data]);
+try {
+ /* Construct result data */
+ var data = new tizen.ApplicationControlData('current-time', [new Date().toString()]);
+ /* Reply to caller */
+ reqAppControl.replyResult([data]);
}
</pre></li>
</ol>
<pre class="prettyprint">
var reqAppControl = tizen.application.getCurrentApplication().getRequestedAppControl();
-if (reqAppControl)
-{
- var retData = reqAppControl.appControl.data;
- var i = retData.length;
- while (--i >= 0)
- {
- var dat = retData[i];
- if (dat.key === "http://tizen.org/appcontrol/data/push/launch_type")
- {
- console.log("Cause of application wake-up: " + JSON.stringify(dat.value))
- }
- }
+if (reqAppControl) {
+ var retData = reqAppControl.appControl.data;
+ var i = retData.length;
+ while (--i >= 0) {
+ var dat = retData[i];
+ if (dat.key === 'http://tizen.org/appcontrol/data/push/launch_type') {
+ console.log('Cause of application wake-up: ' + JSON.stringify(dat.value))
+ }
+ }
}
</pre>
<p>To broadcast events, use the <code>broadcastEvent()</code> method:</p>
<pre class="prettyprint">
var app = tizen.application.getCurrentApplication();
-var appEvent = {name: "first_app_event_1"};
-var data = {foo: "bar"};
+var appEvent = {name: 'first_app_event_1'};
+var data = {foo: 'bar'};
app.broadcastEvent(appEvent, data);
</pre>
<pre class="prettyprint">
var app = tizen.application.getCurrentApplication();
-var watchId = app.addEventListener({appId: "a234567890.FirstApp",
- name: "first_app_event_1"},
- function(event, data)
- {
- /* Data from first app must be received here */
- console.log("Data: " + JSON.stringify(data));
- });
+var watchId = app.addEventListener({appId: 'a234567890.FirstApp', name: 'first_app_event_1'},
+ function(event, data) {
+ /* Data from first app must be received here */
+ console.log('Data: ' + JSON.stringify(data));
+});
</pre>
<p>To stop receiving data from the first application, use the <code>removeEventListener()</code> method with the proper <code>watchId</code>:</p>
<p>If you want to monitor the status of a specific application (instead of all installed applications), provide the application ID as a second parameter to the <code>addAppStatusChangeListener()</code> method.</p>
<pre class="prettyprint">
var watchId;
-function appStatusEventCallback(appId, isActive)
-{
- console.log("The application " + appId + " has been " + (isActive ? "activated" : "deactivated"));
+function appStatusEventCallback(appId, isActive) {
+ console.log('The application ' + appId + ' has been ' + (isActive ? 'activated' : 'deactivated'));
}
-try
-{
- watchId = tizen.application.addAppStatusChangeListener(appStatusEventCallback, "app1test.BasicMobileApp");
-}
-catch (err)
-{
- console.log("Exception: " + err.name);
+try {
+ watchId = tizen.application.addAppStatusChangeListener(appStatusEventCallback, 'app1test.BasicMobileApp');
+} catch (err) {
+ console.log('Exception: ' + err.name);
}
</pre>
</li>
<li>When notifications are no longer needed, remove the listener using the watch ID retrieved by the <code>addAppStatusChangeListener()</code> method:
<pre class="prettyprint">
-try
-{
- tizen.application.removeAppStatusChangeListener(watchId);
- console.log("Listener with id " + watchId + " has been removed");
-}
-catch (err)
-{
- console.log("Exception: " + err.name);
+try {
+ tizen.application.removeAppStatusChangeListener(watchId);
+ console.log('Listener with id ' + watchId + ' has been removed');
+} catch (err) {
+ console.log('Exception: ' + err.name);
}
</pre>
</li></ol>
<ol>
<li>Define the application control object with the <code>GROUP</code> mode:
<pre class="prettyprint">
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view",
- null, "image/jpeg", null, [], "GROUP");
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/view',
+ null, 'image/jpeg', null, [], 'GROUP');
</pre>
</li>
<li>Define an array with callbacks for the <code>tizen.application.launchAppControl()</code> method:
<pre class="prettyprint">
-var appControlReplyCallback =
-{
- /* Callee sent a reply */
- onsuccess: function(data)
- {
- console.log("onsuccess");
- },
- /* Callee returned failure */
- onfailure: function()
- {
- console.log("onfailure");
- }
+var appControlReplyCallback = {
+ /* Callee sent a reply */
+ onsuccess: function(data) {
+ console.log('onsuccess');
+ },
+ /* Callee returned failure */
+ onfailure: function() {
+ console.log('onfailure');
+ }
}
</pre>
</li>
<li>Launch the application in the <code>GROUP</code> mode with the previously defined application control object:
<pre class="prettyprint">
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, appControlReplyCallback);
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, appControlReplyCallback);
</pre>
</li>
<li><p>To check the badge number of the current application, use the <code>getBadgeCount()</code> method of the <code>BadgeManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/badge.html#BadgeManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/badge.html#BadgeManager">wearable</a> applications):</p>
<pre class="prettyprint">
var count = tizen.badge.getBadgeCount(appId);
-console.log("Badge count of " + appId + " is " + count);
+console.log('Badge count of ' + appId + ' is ' + count);
</pre></li>
<li><p>To change the badge of the current application, use the <code>setBadgeCount()</code> method:</p>
<pre class="prettyprint">
<ol>
<li><p>To register an event handler for receiving a notification about badge changes, use the <code>addChangeListener()</code> method of the <code>BadgeManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/badge.html#BadgeManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/badge.html#BadgeManager">wearable</a> applications), specifying a list of application IDs:</p>
<pre class="prettyprint">
-function watcher(appId, count)
-{
- console.log(appId + ' badge number were updated: ' + count);
+function watcher(appId, count) {
+ console.log(appId + ' badge number were updated: ' + count);
}
-tizen.badge.addChangeListener(["BDb5tZJe47.TestSample"], watcher);
+tizen.badge.addChangeListener(['BDb5tZJe47.TestSample'], watcher);
</pre>
<p><code>BDb5tZJe47.TestSample</code> is the application ID of the application to monitor. The first argument of the <code>addChangeListener()</code> method is an array of application identifiers. This allows you to bind the listener to several applications at same time.</p></li>
<li><p>To stop receiving notification about badge changes, use the <code>removeChangeListener ()</code> method:</p>
<pre class="prettyprint">
-tizen.badge.removeChangeListener(["BDb5tZJe47.TestSample"]);
+tizen.badge.removeChangeListener(['BDb5tZJe47.TestSample']);
</pre></li>
</ol>
</table>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData =
- new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/text", ["tizen"]);
+var appControlData = new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/text', ['tizen']);
-var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/search",
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/search',
null, null, null, [appControlData], null);
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h3>Loading a Web Page</h3>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view",
- "https://www.tizen.org", null, null, null, null);
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/view',
+ 'https://www.tizen.org', null, null, null, null);
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h2 id="calendar" name="calendar">Calendar in Mobile Applications</h2>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData =
- [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/title", ["My event"]),
- new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/text",
- ["My event text"])];
-
-var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/add",
- null, "application/vnd.tizen.calendar",
- null, appControlData, "GROUP");
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControlData = [new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/title', ['My event']),
+ new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/text', ['My event text'])];
+
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/add', null,
+ 'application/vnd.tizen.calendar', null, appControlData, 'GROUP');
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h3>Editing a Calendar Event</h3>
</table>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData =
- [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/id", ["1"]),
- new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/title",
- ["Edited Title"]),
- new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/all_day", ["true"])];
-
-var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/edit",
- null, "application/vnd.tizen.calendar", null,
- appControlData, "GROUP");
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControlData = [new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/id', ['1']),
+ new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/title', ['Edited Title']),
+ new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/all_day', ['true'])];
+
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/edit', null,
+ 'application/vnd.tizen.calendar', null, appControlData, 'GROUP');
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h3>Viewing a Calendar Event</h3>
<h4>Example Code</h4>
<pre class="prettyprint">
/* To view a calendar event from a vcs file */
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view",
- "file://<app's shared path>/Calendar3.vcs",
- null, null, null, "GROUP");
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControl = new tizen.ApplicationControl(http://tizen.org/appcontrol/operation/view',
+ 'file://<shared path of the app>/Calendar3.vcs',
+ null, null, null, 'GROUP');
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
/* To view a calendar event from a calendar event ID */
-var appControlData =
- [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/id", ["1"])];
-
-var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view",
- null, "application/vnd.tizen.calendar",
- null, appControlData, null);
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControlData = [new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/id', ['1'])];
+
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/view', null,
+ 'application/vnd.tizen.calendar', null, appControlData, null);
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h3>Selecting a Calendar Event</h3>
</table>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData =
- [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/type", ["id"]),
- new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/selection_mode",
- ["single"])];
-
-var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/pick",
- null, "application/vnd.tizen.calendar",
- null, appControlData, "GROUP");
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControlData = [new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/type', ['id']),
+ new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/selection_mode', ['single'])];
+
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/pick', null,
+ 'application/vnd.tizen.calendar', null, appControlData, 'GROUP');
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h2 id="call" name="call">Call in Mobile Applications</h2>
<p>For example: <code>tel:+821234567890</code></p>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/call",
- "tel:0123456789", null, null, null, null);
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/call',
+ 'tel:0123456789', null, null, null, null);
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<p>For example: <code>tel:+821234567890</code></p>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/dial",
- "tel:0123456789", null, null, null, null);
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/dial',
+ 'tel:0123456789', null, null, null, null);
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
</table>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/create_content",
- null, "image/*", null, null, null);
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/create_content',
+ null, 'image/*', null, null, null);
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h3>Capturing a Picture</h3>
</table>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/image_capture",
- null, null, null, null, null);
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/image_capture',
+ null, null, null, null, null);
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h3>Capturing a Video</h3>
</table>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/video_capture",
- null, null, null, null, null);
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/video_capture',
+ null, null, null, null, null);
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h2 id="contact" name="contact">Contact in Mobile Applications</h2>
</table>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData =
- [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/phone",
- ["0123456789"]),
- new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/email",
- ["tizen@tizen.org"]),
- new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/name",
- ["Tizen User"])];
-
-var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/add",
- null, "application/vnd.tizen.contact", null,
- appControlData, "GROUP");
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControlData = [new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/phone', ['0123456789']),
+ new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/email', ['tizen@tizen.org']),
+ new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/name', ['Tizen User'])];
+
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/add', null,
+ 'application/vnd.tizen.contact', null,
+ appControlData, 'GROUP');
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
</table>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData =
- [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/id", ["personId"]),
- new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/phone", ["0123456789"]),
- new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/email", ["2nd Email"])];
-
-var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/edit",
- null, "application/vnd.tizen.contact",
- null, appControlData, "GROUP");
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControlData = [new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/id', ['personId']),
+ new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/phone', ['0123456789']),
+ new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/email', ['2nd Email'])];
+
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/edit',
+ null, 'application/vnd.tizen.contact',
+ null, appControlData, 'GROUP');
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h3>Viewing a Contact</h3>
<h4>Example Code</h4>
<pre class="prettyprint">
-function launchContactDetails(personId)
-{
- var appControlData =
- [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/id", ["personId"])];
-
- var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view",
- null, "application/vnd.tizen.contact",
- null, appControlData, "GROUP");
-
- tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+function launchContactDetails(personId) {
+ var appControlData = [new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/id', ['personId'])];
+
+ var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/view',
+ null, 'application/vnd.tizen.contact',
+ null, appControlData, 'GROUP');
+
+ tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+ }, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+ }, null);
}
-function launchViewVcard(uri)
-{
- var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view",
- uri, "text/vcard", null, null, "GROUP");
-
- tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+function launchViewVcard(uri) {
+ var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/view',
+ uri, 'text/vcard', null, null, 'GROUP');
+
+ tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+ }, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+ }, null);
}
</pre>
<h4>Example Code</h4>
<pre class="prettyprint">
-function launchContactPick(selectionMode, dataType)
-{
- var appControlReplyCallback =
- {
- onsuccess: function(data)
- {
- for (var i = 0; i < data.length; i++)
- {
- if (data[i].key == "http://tizen.org/appcontrol/data/type")
- {
- console.log("type: " + data[i].value[0]);
- }
- else if (data[i].key == "http://tizen.org/appcontrol/data/selected")
- {
- console.log("result: " + data[i].value[0]);
+function launchContactPick(selectionMode, dataType) {
+ var appControlReplyCallback = {
+ onsuccess: function(data) {
+ for (var i = 0; i < data.length; i++) {
+ if (data[i].key == 'http://tizen.org/appcontrol/data/type') {
+ console.log('type: ' + data[i].value[0]);
+ } else if (data[i].key == 'http://tizen.org/appcontrol/data/selected') {
+ console.log('result: ' + data[i].value[0]);
+ }
}
- }
- },
- onfailure: function()
- {
- console.log('The launch application control failed');
- }
- }
-
- var appControlData =
- [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/selection_mode",
- [selectionMode]),
- new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/type", [dataType])];
-
- var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/pick",
- null, "application/vnd.tizen.contact",
- null, appControlData, "GROUP");
-
- tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, appControlReplyCallback);
+ },
+ onfailure: function() {
+ console.log('The launch application control failed');
+ }
+ }
+
+ var appControlData = [new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/selection_mode', [selectionMode]),
+ new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/type', [dataType])];
+
+ var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/pick',
+ null, 'application/vnd.tizen.contact',
+ null, appControlData, 'GROUP');
+
+ tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+ }, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+ }, appControlReplyCallback);
}
</pre>
</table>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData =
- [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/type", ["person"]),
- new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/id", ["person_id"])];
-
-var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/share",
- null, "application/vnd.tizen.contact",
- null, appControlData, "GROUP");
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControlData = [new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/type', ['person']),
+ new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/id', ['person_id'])];
+
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/share',
+ null, 'application/vnd.tizen.contact',
+ null, appControlData, 'GROUP');
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h3>Sharing Multiple Contacts</h3>
</table>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData =
- [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/id",
- ["person_Id1", "person_Id2", "person_Id3"])];
-
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/multi_share",
- null, "application/vnd.tizen.contact",
- null, appControlData, "GROUP");
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControlData = [new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/id',
+ ['person_Id1', 'person_Id2', 'person_Id3'])];
+
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/multi_share',
+ null, 'application/vnd.tizen.contact',
+ null, appControlData, 'GROUP');
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h2 id="email" name="email">Email in Mobile Applications</h2>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData =
- [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/cc",
- ["cc@tizen.org", "cc2@tizen.org"]),
- new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/bcc",
- ["bcc@tizen.org", "bcc2@tizen.org"]),
- new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/subject",
- ["test subject"]),
- new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/text",
- ["line1\nline2"])];
-
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/compose",
- "mailto:to@tizen.org", null, null,
- appControlData, "GROUP");
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControlData = [new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/cc', ['cc@tizen.org', 'cc2@tizen.org']),
+ new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/bcc', ['bcc@tizen.org', 'bcc2@tizen.org']),
+ new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/subject', ['test subject']),
+ new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/text', ['line1\nline2'])];
+
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/compose',
+ 'mailto:to@tizen.org', null, null,
+ appControlData, 'GROUP');
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h3>Sharing a Single File Using an Email Message</h3>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData =
- [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/path", ["img_path"])];
-
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/share",
- "mailto:", "image/*", null,
- appControlData, "GROUP");
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControlData = [new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/path', ['img_path'])];
+
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/share',
+ 'mailto:', 'image/*', null,
+ appControlData, 'GROUP');
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h3>Sharing Multiple Items Using an Email Message</h3>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData =
- [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/path", ["img_path"]),
- new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/path", ["img_path"])];
-
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/multi_share",
- "mailto:", "image/*", null,
- appControlData, "GROUP");
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControlData = [new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/path', ['img_path']),
+ new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/path', ['img_path'])];
+
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/multi_share',
+ 'mailto:', 'image/*', null,
+ appControlData, 'GROUP');
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h3>Sharing Text in an Email</h3>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData =
- [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/path", ["img_path"]),
- new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/subject",
- ["test subject"]),
- new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/text",
- ["line1\nline2"])];
-
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/share_text",
- "mailto:", null, null,
- appControlData, "GROUP");
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControlData = [new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/path', ['img_path']),
+ new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/subject', ['test subject']),
+ new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/text', ['line1\nline2'])];
+
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/share_text',
+ 'mailto:', null, null,
+ appControlData, 'GROUP');
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h2 id="file" name="file">File Storage in Mobile Applications</h2>
</table>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData =
- [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/selection_mode",
- ["single"])];
-
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/pick",
- null, null, null, appControlData, "GROUP");
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControlData = [new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/selection_mode', ['single'])];
+
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/pick',
+ null, null, null, appControlData, 'GROUP');
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h3>Downloading a File</h3>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/download",
- "https://img_path", null, null, null, null);
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/download',
+ 'https://img_path', null, null, null, null);
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view",
- "geo:50.1,-50.1", null, null, null, null);
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/view',
+ 'geo:50.1,-50.1', null, null, null, null);
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h3>Picking a Location from the Map</h3>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData =
- [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/type", ["poi"])];
-
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/pick",
- "geo:0,0?q=Eiffel Tower", null, null, null,
- "GROUP");
-
-var appControlReplyCallback =
-{
- onsuccess: function(data)
- {
- for (var i = 0; i < data.length; i++)
- {
- console.log("ret: " + data[i].key);
- console.log("result: " + data[i].value[0]);
- }
- },
- onfailure: function()
- {
- console.log('The launch application control failed');
- }
+var appControlData = [new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/type', ['poi'])];
+
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/pick',
+ 'geo:0,0?q=Eiffel Tower', null, null, null, 'GROUP');
+
+var appControlReplyCallback = {
+ onsuccess: function(data) {
+ for (var i = 0; i < data.length; i++) {
+ console.log('ret: ' + data[i].key);
+ console.log('result: ' + data[i].value[0]);
+ }
+ },
+ onfailure: function() {
+ console.log('The launch application control failed');
+ }
}
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, appControlReplyCallback);
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, appControlReplyCallback);
</pre>
<h2 id="message" name="message">Message in Mobile Applications</h2>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData =
- [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/text", ["My text"]),
- new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/subject",
- ["My subject"])];
-
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/compose",
- "mmsto:1234567890", null, null, null,
- "GROUP");
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControlData = [new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/text', ['My text']),
+ new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/subject', ['My subject'])];
+
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/compose',
+ 'msto:1234567890', null, null, null, 'GROUP');
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h3>Sharing a Single Item Using a Message</h3>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData =
- [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/path", ["img_path"])];
-
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/share",
- null, null, null, appControlData, "GROUP");
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControlData = [new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/path', ['img_path'])];
+
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/share',
+ null, null, null, appControlData, 'GROUP');
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h3>Sharing Multiple Items Using a Message</h3>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData =
- [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/path", ["img_path"]),
- new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/path", ["img_path"])];
-
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/multi_share",
- "mmsto:", null, null,
- appControlData, "GROUP");
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControlData = [new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/path', ['img_path']),
+ new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/path', ['img_path'])];
+
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/multi_share',
+ 'mmsto:', null, null,
+ appControlData, 'GROUP');
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h3>Sharing Text in a Message</h3>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData =
- [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/text",
- ["Hello, My name is Tizy."]),
- new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/subject",
- ["My subject"])];
-
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/share_text",
- "mmsto:", null, null,
- appControlData, "GROUP");
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControlData = [new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/text', ['Hello, My name is Tizy.']),
+ new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/subject', ['My subject'])];
+
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/share_text',
+ 'mmsto:', null, null,
+ appControlData, 'GROUP');
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed';
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h2 id="multimedia" name="multimedia">Multimedia in Mobile Applications</h2>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view",
- "audio_uri", null, null, null, null);
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/view',
+ 'audio_uri', null, null, null, null);
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h3>Viewing an Image File</h3>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view",
- "image_uri", null, null, null, null);
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/view',
+ 'image_uri', null, null, null, null);
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
</table>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/pick",
- null, "MIME_Type", null, null, "GROUP");
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/pick',
+ null, 'MIME_Type', null, null, 'GROUP');
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h2 id="settings_main" name="settings_main">System Settings in Mobile Applications</h2>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/setting",
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/setting',
null, null, null, null, null);
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h2 id="settings_bluetooth" name="settings_bluetooth">Settings for Bluetooth in Mobile Applications</h2>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/setting/bt_enable",
- null, null, null, null, null);
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/setting/bt_enable',
+ null, null, null, null, null);
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h3>Showing Bluetooth Settings to Configure Visibility</h3>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/setting/bt_visibility",
- null, null, null, null, null);
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/setting/bt_visibility',
+ null, null, null, null, null);
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h2 id="settings_location" name="settings_location">Settings for Location in Mobile Applications</h2>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/setting/location",
- null, null, null, null, null);
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/setting/location',
+ null, null, null, null, null);
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h2 id="settings_nfc" name="settings_nfc">Settings for NFC in Mobile Applications</h2>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/setting/nfc",
- null, null, null, null, null);
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/setting/nfc',
+ null, null, null, null, null);
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h2 id="settings_wifi" name="settings_wifi">Settings for Wi-Fi in Mobile Applications</h2>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/setting/wifi",
- null, null, null, null, null);
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/setting/wifi',
+ null, null, null, null, null);
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h2 id="voice" name="voice">Voice Recorder in Mobile Applications</h2>
</table>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/create_content",
- null, "audio/m4a", null, null, "GROUP");
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/create_content',
+ null, 'audio/m4a', null, null, 'GROUP');
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<h2 id="inputdelegator" name="inputdelegator">Input Delegator in Wearable Applications</h2>
</table>
<h4>Example Code</h4>
<pre class="prettyprint">
-var appControlData =
- new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/input_type",
- ["input_voice"]);
-
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/get_input",
- null, "text/plain", null,
- [appControlData], null);
-
-tizen.application.launchAppControl(appControl, null, function()
- {
- console.log("launch application control succeed");
- }, function(e)
- {
- console.log("launch application control failed. reason: " + e.message);
- }, null);
+var appControlData = new tizen.ApplicationControlData('http://tizen.org/appcontrol/data/input_type', ['input_voice']);
+
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/get_input',
+ null, 'text/plain', null, [appControlData], null);
+
+tizen.application.launchAppControl(appControl, null, function() {
+ console.log('launch application control succeed');
+}, function(e) {
+ console.log('launch application control failed. reason: ' + e.message);
+}, null);
</pre>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<p>You need a running DataControl provider application, which uses the <code>"http://tizen.org/datacontrol/provider/DictionaryDataControlProvider"</code> provider ID.</p>
<pre class="prettyprint">
/* Get the map-type DataControlConsumerObject */
-try
-{
- var globalMappedConsumer =
- tizen.datacontrol.getDataControlConsumer("http://tizen.org/datacontrol/provider/DictionaryDataControlProvider",
- "Dictionary", "MAP");
+try {
+ var globalMappedConsumer = tizen.datacontrol.getDataControlConsumer('http://tizen.org/datacontrol/provider/DictionaryDataControlProvider', 'Dictionary', 'MAP');
}
</pre></li>
<li><p>To meet the API requirement of using unique request identifiers, define a global variable, which is incremented every time a new request ID is needed. When the Data Control API responds to a request, it provides the request ID, which allows connecting the response with the specific request.</p>
</pre></li>
<li><p>Define a common success and error callback:</p>
<pre class="prettyprint">
-function onRequestSuccess(id)
-{
- console.log("Request " + id + " - done");
+function onRequestSuccess(id) {
+ console.log('Request ' + id + ' - done');
}
-function onRequestError(id, error)
-{
- console.log("error in request " + id + ", message: " + error.message);
+function onRequestError(id, error) {
+ console.log('error in request ' + id + ', message: ' + error.message);
}
</pre></li>
<li>To manage key-value pairs:
<ul>
<li><p>To add a key-value pair, use the <code>addValue()</code> method of the <code>MappedDataControlConsumer</code>:</p>
<pre class="prettyprint">
-try
-{
- /* Increase globalReqId for uniqueness */
- globalReqId++;
- globalMappedConsumer.addValue(globalReqId, "tizen", "Foo", onRequestSuccess,
- onRequestError);
+try {
+ /* Increase globalReqId for uniqueness */
+ globalReqId++;
+ globalMappedConsumer.addValue(globalReqId, 'tizen', 'Foo', onRequestSuccess, onRequestError);
}
</pre></li>
<li><p>To retrieve values assigned to a key, use the <code>getValue()</code> method of the <code>MappedDataControlConsumer</code>:</p>
<pre class="prettyprint">
-function onGetValueSuccess(values, id)
-{
- console.log("Values retrieved in request " + id + ": " + values.toString());
+function onGetValueSuccess(values, id) {
+ console.log('Values retrieved in request ' + id + ': ' + values.toString());
}
-try
-{
- globalReqId++;
- globalMappedConsumer.getValue(globalReqId, "tizen", onGetValueSuccess,
- onRequestError);
+try {
+ globalReqId++;
+ globalMappedConsumer.getValue(globalReqId, 'tizen', onGetValueSuccess, onRequestError);
}
</pre></li>
<li><p>To update a value assigned to a key, use the <code>updateValue()</code> method of the <code>MappedDataControlConsumer</code> interface:</p>
<pre class="prettyprint">
-try
-{
- globalReqId++;
- globalMappedConsumer.updateValue(globalReqId, "tizen", "Foo", "Bar",
- onRequestSuccess, onRequestError);
+try {
+ globalReqId++;
+ globalMappedConsumer.updateValue(globalReqId, 'tizen', 'Foo', 'Bar', onRequestSuccess, onRequestError);
}
</pre></li>
<li><p>To remove a key-value pair, use the <code>removeValue()</code> method of the <code>MappedDataControlConsumer</code> interface:</p>
<pre class="prettyprint">
-try
-{
- globalReqId++;
- globalMappedConsumer.removeValue(globalReqId, "tizen", "Bar", onRequestSuccess,
- onRequestError);
+try {
+ globalReqId++;
+ globalMappedConsumer.removeValue(globalReqId, 'tizen', 'Bar', onRequestSuccess, onRequestError);
}
</pre></li></ul></li>
</ol>
<p>You need a running DataControl provider application, which uses the <code>"http://tizen.org/datacontrol/provider/DictionaryDataControlProvider"</code> provider ID.</p>
<pre class="prettyprint">
/* Get SQL type DataControlConsumerObject */
-try
-{
- var globalSQLConsumer =
- tizen.datacontrol.getDataControlConsumer("http://tizen.org/datacontrol/provider/DictionaryDataControlProvider",
- "Dictionary", "SQL");
+try {
+ var globalSQLConsumer = tizen.datacontrol.getDataControlConsumer('http://tizen.org/datacontrol/provider/DictionaryDataControlProvider', 'Dictionary', 'SQL');
}
</pre></li>
<li><p>To meet the API requirement of using unique request identifiers, define a global variable, which is incremented every time new request ID is needed. When the Data Control API responds to a request, it provides the request ID, which allows connecting the response with the specific request.</p>
</pre></li>
<li><p>Define a common success and error callback:</p>
<pre class="prettyprint">
-function onRequestSuccess(id)
-{
- console.log("Request " + id + " - done");
+function onRequestSuccess(id) {
+ console.log('Request ' + id + ' - done');
}
-function onRequestError(id, error)
-{
- console.log("error in request " + id + ", message: " + error.message);
+function onRequestError(id, error) {
+ console.log('error in request ' + id + ', message: ' + error.message);
}
</pre></li>
<ul>
<li><p>To insert data, use the <code>insert()</code> method of the <code>SQLDataControlConsumer</code> interface:</p>
<pre class="prettyprint">
-function onInsertSuccess(reqId, rowId)
-{
- console.log("request: " + reqId + " succeed - inserted row id:" + rowId);
+function onInsertSuccess(reqId, rowId) {
+ console.log('request: ' + reqId + ' succeed - inserted row id:' + rowId);
}
-try
-{
- var rowData =
- {
- columns: ["WORD", "WORD_DESC"],
- values: ["'tizen1'", "'tizen2'"]
- };
- /* Increases globalReqId for uniqueness */
- globalReqId++;
- globalSQLConsumer.insert(globalReqId, rowData, onInsertSuccess, onRequestError);
+try {
+ var rowData = {
+ columns: ['WORD', 'WORD_DESC'],
+ values: ['\'tizen1\'', '\'tizen2\'']
+ };
+ /* Increases globalReqId for uniqueness */
+ globalReqId++;
+ globalSQLConsumer.insert(globalReqId, rowData, onInsertSuccess, onRequestError);
}
</pre></li>
<li><p>To select data, use the <code>select()</code> method of the <code>SQLDataControlConsumer</code> interface:</p>
<pre class="prettyprint">
-function onSelectSuccess(result, id)
-{
- var length = result.length, i, j;
- for (i = 0; i < length; i++)
- {
- console.log("==== Row ", i, ":");
- for (j = 0; j < result[i].columns.length; j++)
- {
- console.log("column: " + result[i].columns[j]
- + ", value: " + result[i].values[j]);
- }
- }
-}
-
-try
-{
- var columns = ["WORD", "WORD_DESC"];
- var order = "WORD ASC";
- var page = null;
- var maxNumberPerPage = null;
-
- globalReqId++;
- globalSQLConsumer.select(globalReqId, columns, "WORD='tizen1'", onSelectSuccess,
- onRequestError, page, maxNumberPerPage, order);
+function onSelectSuccess(result, id) {
+ var length = result.length, i, j;
+ for (i = 0; i < length; i++) {
+ console.log('==== Row ', i, ':');
+ for (j = 0; j < result[i].columns.length; j++) {
+ console.log('column: ' + result[i].columns[j] + ', value: ' + result[i].values[j]);
+ }
+ }
+}
+
+try {
+ var columns = ['WORD', 'WORD_DESC'];
+ var order = 'WORD ASC';
+ var page = null;
+ var maxNumberPerPage = null;
+
+ globalReqId++;
+ globalSQLConsumer.select(globalReqId, columns, 'WORD=\'tizen1\'', onSelectSuccess,
+ onRequestError, page, maxNumberPerPage, order);
}
</pre></li>
<li><p>To update data, use the <code>update()</code> method of the <code>SQLDataControlConsumer</code> interface:</p>
<pre class="prettyprint">
-try
-{
- var rowData =
- {
- columns: ["WORD", "WORD_DESC"],
- values: ["'tizen1'", "'Web apps platform!'"]
- };
- globalReqId++;
- globalSQLConsumer.update(globalReqId, rowData, "WORD='tizen1'",
- onRequestSuccess, onRequestError);
+try {
+ var rowData = {
+ columns: ['WORD', 'WORD_DESC'],
+ values: ['\'tizen1\'', '\'Web apps platform!\'']
+ };
+ globalReqId++;
+ globalSQLConsumer.update(globalReqId, rowData, 'WORD=\'tizen1\'', onRequestSuccess, onRequestError);
}
</pre></li>
<li><p>To remove data, use the <code>remove()</code> method of the <code>SQLDataControlConsumer</code> interface:</p>
<pre class="prettyprint">
-try
-{
- globalReqId++;
- globalSQLConsumer.remove(globalReqId, "WORD='tizen1'", onRequestSuccess,
- onRequestError);
+try {
+ globalReqId++;
+ globalSQLConsumer.remove(globalReqId, 'WORD=\'tizen1\'', onRequestSuccess, onRequestError);
}
</pre> </li></ul></li>
</ol>
<ol>
<li><p>To create a local port which receives messages, use the <code>requestLocalMessagePort()</code> method of the <code>LocalMessagePort</code> interface:</p>
<pre class="prettyprint">
-var localPort = tizen.messageport.requestLocalMessagePort("SAMPLE_PORT");
+var localPort = tizen.messageport.requestLocalMessagePort('SAMPLE_PORT');
</pre></li>
<li><p>To retrieve an instance of the <code>RemoteMessagePort</code> interface, use the <code>requestRemoteMessagePort()</code> method of the <code>tizen.messageport</code> object. The <code>RemoteMessagePort</code> interface sends messages to the port identified by an <code>ApplicationId</code> and a port name.</p>
<pre class="prettyprint">
var targetApplicationId = tizen.application.getCurrentApplication().appInfo.id;
-var remotePort = tizen.messageport.requestRemoteMessagePort(targetApplicationId,
- "SAMPLE_PORT");
+var remotePort = tizen.messageport.requestRemoteMessagePort(targetApplicationId, 'SAMPLE_PORT');
</pre></li>
<li><p>Use the <code>addMessagePortListener()</code> method of the <code>LocalMessagePort</code> interface to add a callback method that is invoked when the message arrives:</p>
<pre class="prettyprint">
-var localPortWatchId = localPort.addMessagePortListener(function(data, replyPort)
-{
- for (var i = 0; i < data.length; i++)
- {
- var key = data[i].key;
- switch (key)
- {
- case "command":
- console.log("key:" + key + " / value:" + data[i].value);
- break;
- case "data":
- case "byteData":
- console.log("key:" + key + " / value:[");
- for (var j = 0; j < data[i].value.length; j++)
- {
- console.log(data[i].value[j] + ", ")
- }
- console.log("]");
- break;
- case "bytesData":
- console.log("key:" + key + " / value:[");
- for (var j = 0; j < data[i].value.length; j++)
- {
- console.log("[");
- for (var k = 0; k < data[i].value.length; k++)
- {
- console.log(data[i].value[j] + ", ")
- }
- console.log("]");
- }
- console.log("]");
- break;
- }
- }
- if (replyPort)
- {
- console.log("replyPort given: " + replyPort.messagePortName);
- }
+var localPortWatchId = localPort.addMessagePortListener(function(data, replyPort) {
+ for (var i = 0; i < data.length; i++) {
+ var key = data[i].key;
+ switch (key) {
+ case 'command':
+ console.log('key:' + key + ' / value:' + data[i].value);
+ break;
+ case 'data':
+ case 'byteData':
+ console.log('key:' + key + ' / value:[');
+ for (var j = 0; j < data[i].value.length; j++) {
+ console.log(data[i].value[j] + ', ')
+ }
+ console.log(']');
+ break;
+ case 'bytesData':
+ console.log('key:' + key + ' / value:[');
+ for (var j = 0; j < data[i].value.length; j++) {
+ console.log('[');
+ for (var k = 0; k < data[i].value.length; k++) {
+ console.log(data[i].value[j] + ', ')
+ }
+ console.log(']');
+ }
+ console.log(']');
+ break;
+ }
+ }
+ if (replyPort) {
+ console.log('replyPort given: ' + replyPort.messagePortName);
+ }
});
</pre></li>
<li><p>Use the <code>sendMessage()</code> method of the <code>RemoteMessagePort</code> interface to send a message:</p>
<pre class="prettyprint">
-var messageData =
-[
- {key:"command", value:"begin"},
- {key:"data", value:{"dummy1", "dummy2"}},
- {key:"byteData", value:[12, 23, 34, 45, 56, 67, 78]},
- {key:"bytesData", value:[[1, 2, 3, 255], [8, 9, 3, 4, 5]]}
+var messageData = [
+ {key:'command', value:'begin'},
+ {key:'data', value:{'dummy1', 'dummy2'}},
+ {key:'byteData', value:[12, 23, 34, 45, 56, 67, 78]},
+ {key:'bytesData', value:[[1, 2, 3, 255], [8, 9, 3, 4, 5]]}
];
remotePort.sendMessage(messageData);
</pre>
<ol>
<li><p>To retrieve a list of installed packages, use the <code>getPackagesInfo()</code> method of the <code>PackageManager</code> interface:</p>
<pre class="prettyprint lang-js">
-function onListInstalledPackages(lists)
-{
- console.log("The number of installed package is " + lists.length);
+function onListInstalledPackages(lists) {
+ console.log('The number of installed package is ' + lists.length);
}
tizen.package.getPackagesInfo(onListInstalledPackages);
<p>The list of installed packages is returned to the <code>PackageInformationArraySuccessCallback()</code> methods as an array of <code>PackageInformation</code> objects.</p></li>
<li><p>To retrieve basic package information, use the <code>getPackageInfo()</code> method of the <code>PackageManager</code> interface, specifying the package ID. If no package ID is set, the method retrieves information of the application package calling the method.</p>
<pre class="prettyprint lang-js">
-var packageInfo = tizen.package.getPackageInfo("org.tizen.calculator");
+var packageInfo = tizen.package.getPackageInfo('org.tizen.calculator');
</pre></li>
</ol>
<ol>
<li><p>To install a package, use the <code>install()</code> method of the <code>PackageManager</code> interface, specifying the local package installation path on your device. You can retrieve the installation progress using the <code>PackageProgressCallback</code> interface.</p>
<pre class="prettyprint lang-js">
-var onInstallation =
-{
- onprogress: function(packageId, percentage)
- {
- console.log("On installation(" + packageId + "): progress(" + percentage + ")");
- },
- oncomplete: function(packageId)
- {
- console.log("Installation(" + packageId + ") Complete");
- }
+var onInstallation = {
+ onprogress: function(packageId, percentage) {
+ console.log('On installation(' + packageId + '): progress(' + percentage + ')');
+ },
+ oncomplete: function(packageId) {
+ console.log('Installation(' + packageId + ') Complete');
+ }
};
-tizen.filesystem.resolve("downloads/test.wgt", function(packageFile)
- {
- tizen.package.install(packageFile.toURI(), onInstallation);
- });
+tizen.filesystem.resolve('downloads/test.wgt', function(packageFile) {
+ tizen.package.install(packageFile.toURI(), onInstallation);
+});
</pre></li>
<li><p>To uninstall a package, use the <code>uninstall()</code> method of the <code>PackageManager</code> interface, specifying the package ID. You can retrieve the uninstallation progress using the <code>PackageProgressCallback</code> interface.</p>
<pre class="prettyprint lang-js">
-var onUninstallation =
-{
- onprogress: function(packageId, percentage)
- {
- console.log("On uninstallation(" + packageId + "): progress(" + percentage + ")");
- },
- oncomplete: function(packageId)
- {
- console.log("Uninstallation(" + packageId + ") Complete");
- }
+var onUninstallation = {
+ onprogress: function(packageId, percentage) {
+ console.log('On uninstallation(' + packageId + '): progress(' + percentage + ')');
+ },
+ oncomplete: function(packageId) {
+ console.log('Uninstallation(' + packageId + ') Complete');
+ }
};
-tizen.package.uninstall("TEST_APP_ID", onUninstallation);
+tizen.package.uninstall('TEST_APP_ID', onUninstallation);
</pre></li>
</ol>
<ol>
<li><p>Define the event handlers for different notifications using the <code>PackageInformationEventCallback</code> listener interface:</p>
<pre class="prettyprint">
-var packageEventCallback =
-{
- oninstalled: function(packageInfo)
- {
- console.log("The package " + packageInfo.name + " is installed");
- },
- onupdated: function(packageInfo)
- {
- console.log("The package " + packageInfo.name + " is updated");
- },
- onuninstalled: function(packageId)
- {
- console.log("The package " + packageId + " is uninstalled");
- }
+var packageEventCallback = {
+ oninstalled: function(packageInfo) {
+ console.log('The package ' + packageInfo.name + ' is installed');
+ },
+ onupdated: function(packageInfo) {
+ console.log('The package ' + packageInfo.name + ' is updated');
+ },
+ onuninstalled: function(packageId) {
+ console.log('The package ' + packageId + ' is uninstalled');
+ }
};
</pre></li>
<li><p>Register the listener to use the defined event handlers with the <code>setPackageInfoEventListener()</code> method of the <code>PackageManager</code> interface:</p>
<h2 id="set_value" name="set_value">Setting up a Preference</h2>
<p>To create a preference with a given key or to change a value of an existing one, use the <code>setValue()</code> method:</p>
<pre class="prettyprint">
-tizen.preference.setValue("key1", "New value");
+tizen.preference.setValue('key1', 'New value');
</pre>
<p>If the preference with the given key does not exist, it is created with the given value. If the preference exists, only its new value is assigned.</p>
<ul>
<li>To get the value of a preference with a given key, use the <code>getValue()</code> method:
<pre class="prettyprint">
-var currentValue = tizen.preference.getValue("key1");
-console.log("The current value of the preference key1 is: " + currentValue);
+var currentValue = tizen.preference.getValue('key1');
+console.log('The current value of the preference key1 is: ' + currentValue);
</pre>
<p>The value returned by the method can be a string, number, or boolean. If the preference with the given key does not exist, an exception is thrown.</p>
</li>
<li>To get all preferences, use the asynchronous <code>getAll()</code> method. Its callback gets an array of all preferences, where each row of the array consists of a field key and value.
<pre class="prettyprint">
-var successCB = function(preferences)
-{
- var i;
- for (i = 0; i < preferences.length; i++)
- {
- console.log("The preference - key: " + preferences[i].key
- + " value: " + preferences[i].value);
- }
+var successCB = function(preferences) {
+ var i;
+ for (i = 0; i < preferences.length; i++) {
+ console.log('The preference - key: ' + preferences[i].key + ' value: ' + preferences[i].value);
+ }
};
tizen.preference.getAll(successCB);
<h2 id="exists" name="exists">Checking Whether a Preference Exists</h2>
<p>To determine whether a preference with a given key exists, use the <code>exists()</code> method:</p>
<pre class="prettyprint">
-if (tizen.preference.exists("key1"))
-{
- console.log("Preference with the key key1 exists");
-}
-else
-{
- console.log("Preference with the key key1 doesn't exist");
+if (tizen.preference.exists('key1')) {
+ console.log('Preference with the key key1 exists');
+} else {
+ console.log('Preference with the key key1 doesn't exist');
}
</pre>
<p>The method returns <code>true</code> if the preference exists and <code>false</code> if it does not.</p>
<ul>
<li>To remove a single preference with the given key, use the <code>remove()</code> method:
<pre class="prettyprint">
-tizen.preference.remove("key1");
+tizen.preference.remove('key1');
</pre>
<p>If the preference with the given key does not exist, an exception is thrown.</p>
</li>
<li>
<p>To start listening, use the <code>setChangeListener()</code> method:</p>
<pre class="prettyprint">
-var listener = function(data)
-{
- console.log("Preference with the key: " + data.key
- + " has a new value: " + data.value);
+var listener = function(data) {
+ console.log('Preference with the key: ' + data.key + ' has a new value: ' + data.value);
};
-tizen.preference.setChangeListener("key1", listener);
+tizen.preference.setChangeListener('key1', listener);
</pre>
<p>The listener callback is called every time the value of the given preference changes. The callback parameter is an object that consists of the <code>key</code> and <code>value</code> fields.</p>
</li>
<li>
<p>To stop listening, use the <code>unsetChangeListener()</code> method:</p>
<pre class="prettyprint">
-var listener = function(data)
-{
- tizen.preference.unsetChangeListener(data.key);
+var listener = function(data) {
+ tizen.preference.unsetChangeListener(data.key);
};
-tizen.preference.setChangeListener("key1", listener);
+tizen.preference.setChangeListener('key1', listener);
</pre>
</li>
</ul>
<ol><li>Create the service entry point with the <code>onStart()</code> callback.
<p>The callback is invoked when the service is launched. Within the callback, you can prepare resources and initialize whatever the service application needs during the execution.</p>
<pre class="prettyprint">
-module.exports.onStart = function()
-{
- console.log("service start");
-
- var remoteMsgPort =
- tizen.messageport.requestRemoteMessagePort("websvcapp0.WebServiceApplication",
- "SERVICE_SAMPLE1");
- var localMsgPort = tizen.messageport.requestLocalMessagePort("SERVICE_SAMPLE2");
-
- function onreceived(data, remoteMsgPort)
- {
- for (var i = 0; i < data.length; i++)
- {
- if (data[i].value == "SERVICE_EXIT")
- {
- localMsgPort.removeMessagePortListener(watchId);
- tizen.application.getCurrentApplication().exit();
- }
- }
- }
- var watchId = localMsgPort.addMessagePortListener(onreceived);
+module.exports.onStart = function() {
+ console.log('service start');
+
+ var remoteMsgPort = tizen.messageport.requestRemoteMessagePort('websvcapp0.WebServiceApplication', 'SERVICE_SAMPLE1');
+ var localMsgPort = tizen.messageport.requestLocalMessagePort('SERVICE_SAMPLE2');
+
+ function onreceived(data, remoteMsgPort) {
+ for (var i = 0; i < data.length; i++) {
+ if (data[i].value == 'SERVICE_EXIT') {
+ localMsgPort.removeMessagePortListener(watchId);
+ tizen.application.getCurrentApplication().exit();
+ }
+ }
+ }
+ var watchId = localMsgPort.addMessagePortListener(onreceived);
}
</pre></li>
<li>Write the request handler with the <code>onRequest()</code> callback.
<p>The callback is invoked to handle incoming service requests. Within the callback, write code for each request from other applications and the platform. To obtain the request, use the <code>getRequestedAppControl()</code> method in the <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application</a> API.</p>
<pre class="prettyprint">
-module.exports.onRequest = function()
-{
- var reqAppControl =
- tizen.application.getCurrentApplication().getRequestedAppControl();
- if (reqAppControl)
- {
- if (reqAppControl.appControl.operation
- == "http://tizen.org/appcontrol/operation/service")
- {
- try
- {
- tizen.systeminfo.addPropertyValueChangeListener("DEVICE_ORIENTATION",
- onDeviceOrientationSuccess);
- }
- }
- }
+module.exports.onRequest = function() {
+ var reqAppControl = tizen.application.getCurrentApplication().getRequestedAppControl();
+ if (reqAppControl) {
+ if (reqAppControl.appControl.operation == 'http://tizen.org/appcontrol/operation/service') {
+ try {
+ tizen.systeminfo.addPropertyValueChangeListener('DEVICE_ORIENTATION', onDeviceOrientationSuccess);
+ }
+ }
+ }
}
</pre></li>
<li>Write the termination with the <code>onExit()</code> callback.
<p>The callback is invoked when the service is about to be stopped. All resources can be cleared and backed up within the callback.</p>
<pre class="prettyprint">
-module.exports.onExit = function()
-{
- console.log("service terminate");
+module.exports.onExit = function() {
+ console.log('service terminate');
}
</pre></li></ol>
<?xml version="1.0" encoding="TF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets"
id="http://yourdomain/WebServiceApplication" version="1.0.0" viewmodes="maximized">
- <tizen:application id="websvcapp0.WebServiceApplication" package="websvcapp0"
- required_version="2.3"/>
+ <tizen:application id="websvcapp0.WebServiceApplication" package="websvcapp0" required_version="2.3"/>
<content src="index.html"/>
<feature name="http://tizen.org/feature/screen.size.all"/>
<icon src="icon.png"/>
<li>Launch by other applications
<p>The Web application launches a service application by calling the <code>launch()</code> or <code>launchAppControl()</code> method with the service application ID:</p>
<pre class="prettyprint">
-tizen.application.launchAppControl(new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/service"),
- "websvcapp0.service1",
- function() {console.log("Launch Service succeeded");},
- function(e) {console.log("Launch Service failed: "
- + e.message);});
+tizen.application.launchAppControl(new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/service'), 'websvcapp0.service1', function() {
+ console.log('Launch Service succeeded');
+}, function(e) {
+ console.log('Launch Service failed: ' + e.message);
+});
</pre>
</li>
<li><p>The service application can terminate itself when it receives a particular request. The following example code uses the <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/messageport.html">Message Port</a> API to send such a request to the service application.</p>
<p>The application sends a message by calling the <code>sendMessage()</code> method.</p>
<pre class="prettyprint">
-var remoteMsgPort = tizen.messageport.requestRemoteMessagePort("websvcapp0.service1",
- "SERVICE_SAMPLE2");
-remoteMsgPort.sendMessage([{key: "key", value: "SERVICE_EXIT"}]);
+var remoteMsgPort = tizen.messageport.requestRemoteMessagePort('websvcapp0.service1', 'SERVICE_SAMPLE2');
+remoteMsgPort.sendMessage([{key: 'key', value: 'SERVICE_EXIT'}]);
</pre>
</li>
<li>The service application can terminate itself by calling the <code>exit()</code> method after getting a signal through the message port:
<pre class="prettyprint">
-var localMsgPort = tizen.messageport.requestLocalMessagePort("SERVICE_SAMPLE2");
-function onreceived(data, remoteMsgPort)
-{
- for (var i = 0; i < data.length; i++)
- {
- if (data[i].value == "SERVICE_EXIT")
- {
- localMsgPort.removeMessagePortListener(watchId);
- tizen.application.getCurrentApplication().exit();
- }
- }
+var localMsgPort = tizen.messageport.requestLocalMessagePort('SERVICE_SAMPLE2');
+function onreceived(data, remoteMsgPort) {
+ for (var i = 0; i < data.length; i++) {
+ if (data[i].value == 'SERVICE_EXIT') {
+ localMsgPort.removeMessagePortListener(watchId);
+ tizen.application.getCurrentApplication().exit();
+ }
+ }
}
var watchId = localMsgPort.addMessagePortListener(onreceived);
</pre>
<tizen:app-widget id="Zyj5WRVa13.DynamicSample.widget001" primary="true">
<tizen:widget-label>TEST_1</tizen:widget-label>
<tizen:widget-content src="widget/widget001/index.html">
- <tizen:widget-size preview="widget/widget001/preview.png">
- 2x2
- </tizen:widget-size>
+ <tizen:widget-size preview="widget/widget001/preview.png">2x2</tizen:widget-size>
</tizen:widget-content>
</tizen:app-widget>
<tizen:app-widget id="Zyj5WRVa13.DynamicSample.widget002" primary="false">
<tizen:widget-label>TEST_2</tizen:widget-label>
<tizen:widget-content src="widget/widget002/index.html">
- <tizen:widget-size preview="widget/widget002/preview.png">
- 2x2
- </tizen:widget-size>
+ <tizen:widget-size preview="widget/widget002/preview.png">2x2</tizen:widget-size>
</tizen:widget-content>
</tizen:app-widget>
- <tizen:application id="Zyj5WRVa13.DynamicSample" package="Zyj5WRVa13"
- required_version="2.3.2"/>
+ <tizen:application id="Zyj5WRVa13.DynamicSample" package="Zyj5WRVa13" required_version="2.3.2"/>
<icon src="icon.png"/>
<name>DynamicSample</name>
</widget>
<!DOCTYPE html>
<html>
<body>
- <div class="category">
- <img id="imgCategory1" src="images/science.png" width="70px"/>
- </div>
+ <div class="category"><img id="imgCategory1" src="images/science.png" width="70px"/></div>
<div id="content1">Counter-Terror Office Funds Tube-Launched...</div>
- <div class="category">
- <img id="imgCategory2" src="images/sports.png" width="70px"/>
- </div>
+ <div class="category"><img id="imgCategory2" src="images/sports.png" width="70px"/></div>
<div id="content2">Presidential Medal of Freedom for Yogi, Mays</div>
<div class="more">+12</div>
</body>
<pre class="prettyprint">
/* JavaScript */
function onload() {
- /* Load news data here */
-
- /* Content update */
- document.getElementById('imgCategory1').src = newsData.firstNewsType + '.png';
- document.getElementById('imgCategory2').src = newsData.secondNewsType + '.png';
- document.getElementById('content1').textContent =
- newsData.firstNewsData.substring(0,40) + '...';
- document.getElementById('content2').textContent =
- newsData.secondNewsData.substring(0,40) + '...';
+ /* Load news data here */
+
+ /* Content update */
+ document.getElementById('imgCategory1').src = newsData.firstNewsType + '.png';
+ document.getElementById('imgCategory2').src = newsData.secondNewsType + '.png';
+ document.getElementById('content1').textContent = newsData.firstNewsData.substring(0,40) + '...';
+ document.getElementById('content2').textContent = newsData.secondNewsData.substring(0,40) + '...';
}
</pre>
var cntImage = 0;
function step() {
- document.getElementById("imgWeather").src = "images/sun_" + (cntImage++) + ".png";
- if (cntImage < 4) {
- window.requestAnimationFrame(step);
- }
+ document.getElementById('imgWeather').src = 'images/sun_' + (cntImage++) + '.png';
+ if (cntImage < 4) {
+ window.requestAnimationFrame(step);
+ }
}
function goAni() {
- window.requestAnimationFrame(step);
+ window.requestAnimationFrame(step);
}
</pre>
var scrollLength = 0;
function step() {
-
- document.getElementById('scheduleTitle').style.transform =
- "translateX(" + (scrollLength--) + "px)"
- if (scrollLength > -300) { /* Max length */
- window.requestAnimationFrame(step);
+ document.getElementById('scheduleTitle').style.transform='translateX(' + (scrollLength--) + 'px)'
+ if (scrollLength > -300) { /* Max length */
+ window.requestAnimationFrame(step);
}
}
function goAni() {
- window.requestAnimationFrame(step);
+ window.requestAnimationFrame(step);
}
</pre>
/* Define the event handler in the main.js file */
function load() {
- /* Load water data from shared file */
- loadWaterData();
+ /* Load water data from shared file */
+ loadWaterData();
- /* Change the current amount of water */
- document.getElementById('currentWaterNum').textContent = currentWaterNum;
+ /* Change the current amount of water */
+ document.getElementById('currentWaterNum').textContent = currentWaterNum;
- /* Change the color of the water cups */
- for (var i = 1; i <= currentWaterNum; ++i) {
- document.getElementById('watercup' + i)).style.backgroundColor = 'blue';
- }
+ /* Change the color of the water cups */
+ for (var i = 1; i <= currentWaterNum; ++i) {
+ document.getElementById('watercup' + i)).style.backgroundColor = 'blue';
+ }
}
</pre>
</li>
/* Define the event handler in the main.js file */
/* When the user clicks the button, update the status and change the style */
function click() {
- /* Increase the water amount */
- currentWaterNum++;
+ /* Increase the water amount */
+ currentWaterNum++;
- /* Change the current amount of water */
- document.getElementById('currentWaterNum').textContent = currentWaterNum;
+ /* Change the current amount of water */
+ document.getElementById('currentWaterNum').textContent = currentWaterNum;
- /* Change the color of the water cup */
- document.getElementById('watercup' + currentWaterNum).style.backgroundColor = 'blue';
+ /* Change the color of the water cup */
+ document.getElementById('watercup' + currentWaterNum).style.backgroundColor = 'blue';
- /* Store water data into a shared file */
- storeWaterData();
+ /* Store water data into a shared file */
+ storeWaterData();
}
</pre>
</li>
/* Define the event handler in the main.js file */
function visibilitychange() {
- if (document.visibilityState === 'hidden') {
- /* Store shared data */
+ if (document.visibilityState === 'hidden') {
+ /* Store shared data */
} else {
- /* Load stored data and update the page */
- }
+ /* Load stored data and update the page */
+ }
}
</pre>
</li>
<p>The following example shows how to set a key-value pair in the <code>Widget_main.js</code> file:</p>
<pre class="prettyprint">
function checkPreference() {
- if (!tizen.preference.exists("KEY")) {
- tizen.preference.setValue("KEY", "Widget_HELLOWORLD1");
- }
-
- if (tizen.preference.exists("KEY")) {
- tizen.preference.remove("KEY");
- tizen.preference.setValue("KEY", "Widget_HELLOWORLD2");
- }
-
- /* [Log] value for KEY: Widget_HELLOWORLD2 */
- console.log('value for KEY: ' + tizen.preference.getValue('KEY'));
-
- /* Callback function */
- var listener = function(data) {
- /* [Log] Preference with the key: KEY has a new value: APP_HELLOWORLD */
- console.log('Preference with the key: ' + data.key
- + ' has a new value: ' + data.value);
- tizen.preference.unsetChangeListener('KEY');
- };
-
- tizen.preference.setChangeListener('KEY', listener);
+ if (!tizen.preference.exists('KEY')) {
+ tizen.preference.setValue('KEY', 'Widget_HELLOWORLD1');
+ }
+
+ if (tizen.preference.exists('KEY')) {
+ tizen.preference.remove('KEY');
+ tizen.preference.setValue('KEY', 'Widget_HELLOWORLD2');
+ }
+
+ /* [Log] value for KEY: Widget_HELLOWORLD2 */
+ console.log('value for KEY: ' + tizen.preference.getValue('KEY'));
+
+ /* Callback function */
+ var listener = function(data) {
+ /* [Log] Preference with the key: KEY has a new value: APP_HELLOWORLD */
+ console.log('Preference with the key: ' + data.key + ' has a new value: ' + data.value);
+ tizen.preference.unsetChangeListener('KEY');
+ };
+
+ tizen.preference.setChangeListener('KEY', listener);
}
</pre>
<p>To set the value in the <code>WebApp_main.js</code> file:</p>
<pre class="prettyprint">
window.onload = function() {
- var timer = setInterval(function() {
- clearInterval(timer);
- try {
- tizen.preference.setValue("KEY", "APP_HELLOWORLD");
+ var timer = setInterval(function() {
+ clearInterval(timer);
+ try {
+ tizen.preference.setValue('KEY', 'APP_HELLOWORLD');
tizen.application.getCurrentApplication().exit();
- } catch (ignore) {}
- }, 2000);
+ } catch (ignore) {}
+ }, 2000);
};
</pre>
var providerAppName = 'WeatherProvider';
function onerror(err) {
- /* Error handling */
+ /* Error handling */
}
var agentCallback = {
- onconnect: function(socket) {
- SASocket = socket;
- SASocket.setSocketStatusListener(function(reason) {
+ onconnect: function(socket) {
+ SASocket = socket;
+ SASocket.setSocketStatusListener(function(reason) {
disconnect();
- });
- SASocket.setDataReceiveListener(onreceive);
- /* Request the provider to get weather info */
- SASocket.sendData(CHANNELID, 'request');
- },
- onerror: onerror
+ });
+ SASocket.setDataReceiveListener(onreceive);
+ /* Request the provider to get weather info */
+ SASocket.sendData(CHANNELID, 'request');
+ },
+ onerror: onerror
};
var peerAgentFindCallback = {
- onpeeragentfound: function(peerAgent) {
+ onpeeragentfound: function(peerAgent) {
try {
if (peerAgent.appName == providerAppName) {
- SAAgent.setServiceConnectionListener(agentCallback);
- SAAgent.requestServiceConnection(peerAgent);
- }
- } catch (err) {
- /* Error handling */
- }
- },
+ SAAgent.setServiceConnectionListener(agentCallback);
+ SAAgent.requestServiceConnection(peerAgent);
+ }
+ } catch (err) {
+ /* Error handling */
+ }
+ },
onerror: onerror
};
function onsuccess(agents) {
- try {
+ try {
if (agents.length > 0) {
- SAAgent = agents[0];
- SAAgent.setPeerAgentFindListener(peerAgentFindCallback);
- SAAgent.findPeerAgents();
- }
+ SAAgent = agents[0];
+ SAAgent.setPeerAgentFindListener(peerAgentFindCallback);
+ SAAgent.findPeerAgents();
+ }
} catch (err) {
- /* Error handling */
- }
+ /* Error handling */
+ }
}
function onreceive(channelId, data) {
- document.getElementById('result').textContent = data;
+ document.getElementById('result').textContent = data;
}
function getDataFromHostApp() {
- if (SASocket) {
- return false; /* Already connected */
- }
- try {
- webapis.sa.requestSAAgent(onsuccess, function(err) {
- /* Error handling */
- });
- } catch (err) {
- /* Error handling */
- }
+ if (SASocket) {
+ return false; /* Already connected */
+ }
+ try {
+ webapis.sa.requestSAAgent(onsuccess, function(err) {
+ /* Error handling */
+ });
+ } catch (err) {
+ /* Error handling */
+ }
}
</pre>
</li>
<pre class="prettyprint">
// Activity (Main) code
try {
- // To widget
- WeatherProviderForWidget.mConnectionHandler
- .send(WeatherProviderForWidget.WIDGET_CHANNEL_ID, jsonData.toString().getBytes());
+ // To widget
+ WeatherProviderForWidget.mConnectionHandler.send(WeatherProviderForWidget.WIDGET_CHANNEL_ID, jsonData.toString().getBytes());
} catch (JSONException e) {
- e.printStackTrace();
+ e.printStackTrace();
} catch (IOException e_io) {
- e_io.printStackTrace();
+ e_io.printStackTrace();
}
// Service (WeatherProviderForWidget)
@Override
-protected void onServiceConnectionResponse(SAPeerAgent peerAgent, SASocket socket,
- int result) {
- if (result == SAAgent.CONNECTION_SUCCESS) {
- if (socket != null) {
- mConnectionHandler = (ServiceConnection) socket;
- }
- } else if (result == SAAgent.CONNECTION_ALREADY_EXIST) {
- Log.e(TAG, "onServiceConnectionResponse, CONNECTION_ALREADY_EXIST");
- }
+protected void onServiceConnectionResponse(SAPeerAgent peerAgent, SASocket socket, int result) {
+ if (result == SAAgent.CONNECTION_SUCCESS) {
+ if (socket != null) {
+ mConnectionHandler = (ServiceConnection) socket;
+ }
+ } else if (result == SAAgent.CONNECTION_ALREADY_EXIST) {
+ Log.e(TAG, "onServiceConnectionResponse, CONNECTION_ALREADY_EXIST");
+ }
}
public class WeatherProviderForWidget extends SAAgent {
- private static final String TAG = "WeatherProviderForWidget";
- private static final Class<ServiceConnection> SASOCKET_CLASS =
- ServiceConnection.class;
- static ServiceConnection mConnectionHandler = null;
- static final int WIDGET_CHANNEL_ID = 1000;
-
- @Override
- public void onCreate() {
- super.onCreate();
- SA mAccessory = new SA();
- try {
- mAccessory.initialize(this); // Connect to Widget
- } catch (Exception e1) {
- e1.printStackTrace();
- }
- }
-
- @Override
- protected void onServiceConnectionRequested(SAPeerAgent peerAgent) {
- if (peerAgent != null) {
+ private static final String TAG = "WeatherProviderForWidget";
+ private static final Class<ServiceConnection> SASOCKET_CLASS = ServiceConnection.class;
+ static ServiceConnection mConnectionHandler = null;
+ static final int WIDGET_CHANNEL_ID = 1000;
+
+ @Override
+ public void onCreate() {
+ super.onCreate();
+ SA mAccessory = new SA();
+ try {
+ mAccessory.initialize(this); // Connect to Widget
+ } catch (Exception e1) {
+ e1.printStackTrace();
+ }
+ }
+
+ @Override
+ protected void onServiceConnectionRequested(SAPeerAgent peerAgent) {
+ if (peerAgent != null) {
acceptServiceConnectionRequest(peerAgent); // Connection Accepted
- }
- }
-
- public class ServiceConnection extends SASocket {
- public ServiceConnection() {
- super(ServiceConnection.class.getName());
- }
-
- @Override
- public void onReceive(int channelId, byte[] data) {
- if (mConnectionHandler == null) {
- return;
- }
- String req_message = new String(data); // Get data from Widget
-
- if (req_message.equals(new String("request"))) {
- final JSONObject jsonData = new JSONObject();
- try {
- Calendar calendar = new GregorianCalendar();
- SimpleDateFormat dateFormat = new SimpleDateFormat("hh:mm");
- String timeStr = dateFormat.format(calendar.getTime());
- jsonData.put("time_text", timeStr);
- jsonData.put("city_text", "city name");
- mConnectionHandler.send(WIDGET_CHANNEL_ID,
- jsonData.toString().getBytes());
- } catch (JSONException e) {
- e.printStackTrace();
- } catch (IOException e) {
- e.printStackTrace();
+ }
+ }
+
+ public class ServiceConnection extends SASocket {
+ public ServiceConnection() {
+ super(ServiceConnection.class.getName());
+ }
+
+ @Override
+ public void onReceive(int channelId, byte[] data) {
+ if (mConnectionHandler == null) {
+ return;
}
- } else if (req_message.equals(new String("delete_widget"))) {
- Log.e(TAG, "The widget was deleted from the viewer");
- } else if (req_message.equals(new String("Add city"))) {
- Context context = getApplicationContext();
- Intent intent = new Intent(context, ProviderActivity.class);
- intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
- context.startActivity(intent);
- }
- }
-
- @Override
- protected void onServiceConnectionLost(int reason) {
- Log.e(TAG, "Service Connection is Lost");
- mConnectionHandler = null;
- }
- }
+ String req_message = new String(data); // Get data from Widget
+
+ if (req_message.equals(new String("request"))) {
+ final JSONObject jsonData = new JSONObject();
+ try {
+ Calendar calendar = new GregorianCalendar();
+ SimpleDateFormat dateFormat = new SimpleDateFormat("hh:mm");
+ String timeStr = dateFormat.format(calendar.getTime());
+ jsonData.put("time_text", timeStr);
+ jsonData.put("city_text", "city name");
+ mConnectionHandler.send(WIDGET_CHANNEL_ID, jsonData.toString().getBytes());
+ } catch (JSONException e) {
+ e.printStackTrace();
+ } catch (IOException e) {
+ e.printStackTrace();
+ }
+ } else if (req_message.equals(new String("delete_widget"))) {
+ Log.e(TAG, "The widget was deleted from the viewer");
+ } else if (req_message.equals(new String("Add city"))) {
+ Context context = getApplicationContext();
+ Intent intent = new Intent(context, ProviderActivity.class);
+ intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
+ context.startActivity(intent);
+ }
+ }
+
+ @Override
+ protected void onServiceConnectionLost(int reason) {
+ Log.e(TAG, "Service Connection is Lost");
+ mConnectionHandler = null;
+ }
+ }
}
</pre>
</li>
<!--HTML-->
<body>
- <button id="button1"
- onclick="getDataFromNetwork('txt.txt', handleResponseTEXT);">Text</button>
- <button id="button2"
- onclick="getDataFromNetwork('json.json', handleResponseJSON);">Json</button>
+ <button id="button1" onclick="getDataFromNetwork('txt.txt', handleResponseTEXT);">Text</button>
+ <button id="button2" onclick="getDataFromNetwork('json.json', handleResponseJSON);">Json</button>
<div id="result"></div>
</body>
</pre>
<pre class="prettyprint">
/* JavaScript */
function errorHandling(e) {
- if (e.target.readyState == 3) {
- /* Error handling */
- e.target.abort();
- }
+ if (e.target.readyState == 3) {
+ /* Error handling */
+ e.target.abort();
+ }
}
function getDataFromNetwork(file, handler) {
- var xhr = new XMLHttpRequest();
- xhr.open('GET', file, true);
- xhr.onreadystatechange = handler;
- xhr.onload = function() {
- if (this.status == 200) {
- /* Handle the response */
- }
- };
- xhr.send();
+ var xhr = new XMLHttpRequest();
+ xhr.open('GET', file, true);
+ xhr.onreadystatechange = handler;
+ xhr.onload = function() {
+ if (this.status == 200) {
+ /* Handle the response */
+ }
+ };
+ xhr.send();
}
/* If getting Text data */
function handleResponseTEXT(e) {
- if (e.target.readyState == 4) {
- if (e.target.status == 200) {
- document.getElementById('result').textContent = e.target.responseText;
- } else {
- /* Error handling */
- }
- }
+ if (e.target.readyState == 4) {
+ if (e.target.status == 200) {
+ document.getElementById('result').textContent = e.target.responseText;
+ } else {
+ /* Error handling */
+ }
+ }
}
/* If getting JSON data */
function handleResponseJSON(e) {
- if (e.target.readyState == 4) {
- if (e.target.status == 200) {
- var data = JSON.parse(e.target.responseText);
- var val = data.employees;
- var result = val[0].firstName + ' ' + val[0].lastName;
- document.getElementById('result').textContent = result;
- } else {
- /* Error handling */
- }
- }
+ if (e.target.readyState == 4) {
+ if (e.target.status == 200) {
+ var data = JSON.parse(e.target.responseText);
+ var val = data.employees;
+ var result = val[0].firstName + ' ' + val[0].lastName;
+ document.getElementById('result').textContent = result;
+ } else {
+ /* Error handling */
+ }
+ }
}
</pre>
var i;
for (i = 0; i < c.length; i++) {
- if (c[i].id === 'leftDiv') {
- /* Do something */
- }
+ if (c[i].id === 'leftDiv') {
+ /* Do something */
+ }
}
</pre>
var i;
for (i = 0; i < c.length; i++) {
- c[i].style.backgroundColor = "red";
+ c[i].style.backgroundColor = 'red';
}
</pre>
<ol>
<li><p>Define a success handler implementing the <code>WidgetArraySuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetArraySuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#WidgetArraySuccessCallback">wearable</a> applications). Optionally, you can specify an error handler too.</p>
<pre class="prettyprint">
-var successCallback = function(widgets)
-{
- console.log("There are " + widgets.length + " installed widgets");
+var successCallback = function(widgets) {
+ console.log('There are ' + widgets.length + ' installed widgets');
};
-var errorCallback = function(error)
-{
- console.log("Error " + error.message);
+var errorCallback = function(error) {
+ console.log('Error ' + error.message);
};
</pre></li>
<li><p>To get a list of all installed widgets, use the <code>getWidgets()</code> method of the <code>WidgetServiceManager</code> interface. If the optional <code>packageId</code> parameter is given, only the widgets belonging to the given package are returned.</p>
<pre class="prettyprint">
-var packageId = "org.tizen.contacts";
+var packageId = 'org.tizen.contacts';
tizen.widgetservice.getWidgets(successCallback, errorCallback, packageId);
</pre>
<p>You can also get a specific widget object by using the <code>getWidget()</code> method of the <code>WidgetServiceManager</code> interface:</p>
<pre class="prettyprint">
-var myWidget = tizen.widgetservice.getWidget("org.tizen.gallery.widget");
+var myWidget = tizen.widgetservice.getWidget('org.tizen.gallery.widget');
</pre></li>
</ol>
<ul>
<li><p>To get the primary widget ID of a given application or package ID, use the <code>getPrimaryWidgetId()</code> method of the <code>WidgetServiceManager</code> interface:</p>
<pre class="prettyprint">
-var widgetId = tizen.widgetservice.getPrimaryWidgetId("org.tizen.music-player");
+var widgetId = tizen.widgetservice.getPrimaryWidgetId('org.tizen.music-player');
</pre></li>
<li><p>To get the size of the corresponding size type, use the <code>getSize()</code> method of the <code>WidgetServiceManager</code> interface, specifying the size type:</p>
<pre class="prettyprint">
-var widgetSize = tizen.widgetservice.getSize("4x4");
+var widgetSize = tizen.widgetservice.getSize('4x4');
</pre></li>
</ul>
<ol>
<li><p>Retrieve the widget whose name you need:</p>
<pre class="prettyprint">
-var myWidget = tizen.widgetservice.getWidget("org.tizen.gallery.widget");
+var myWidget = tizen.widgetservice.getWidget('org.tizen.gallery.widget');
</pre></li>
<li><p>To get the widget name, use the <code>getName()</code> method of the <code>Widget</code> interface. If the locale parameter is omitted, the system locale is used.</p>
<pre class="prettyprint">
-var name = myWidget.getName("en-us");
+var name = myWidget.getName('en-us');
</pre></li>
</ol>
<ol>
<li><p>Define a success handler implementing the <code>WidgetInstancesCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetInstancesCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#WidgetInstancesCallback">wearable</a> applications). Optionally, you can specify an error handler too.</p>
<pre class="prettyprint">
-var successCallback = function(instances)
-{
- console.log("There are " + instances.length + " instances");
+var successCallback = function(instances) {
+ console.log('There are ' + instances.length + ' instances');
};
-var errorCallback = function(error)
-{
- console.log("Error " + error.message);
+var errorCallback = function(error) {
+ console.log('Error ' + error.message);
};
</pre></li>
<ol>
<li><p>Define a success handler implementing the <code>WidgetVariantsCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetVariantsCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#WidgetVariantsCallback">wearable</a> applications). Optionally, you can specify an error handler too.</p>
<pre class="prettyprint">
-var successCallback = function(variants)
-{
- console.log("There are " + variants.length + " variants of the widget");
+var successCallback = function(variants) {
+ console.log('There are ' + variants.length + ' variants of the widget');
};
-var errorCallback = function(error)
-{
- console.log("Error " + error.message);
+var errorCallback = function(error) {
+ console.log('Error ' + error.message);
};
</pre></li>
<li><p>Retrieve the widget whose variants you need:</p>
<pre class="prettyprint">
-var myWidget = tizen.widgetservice.getWidget("org.tizen.gallery.widget");
+var myWidget = tizen.widgetservice.getWidget('org.tizen.gallery.widget');
</pre></li>
<li><p>To get a list of all variants, use the <code>getVariants()</code> method of the <code>Widget</code> interface:</p>
<pre class="prettyprint">
</pre>
<p>You can also get a specific variant by using the <code>getVariant()</code> method with one of the supported size types as a parameter:</p>
<pre class="prettyprint">
-var variant = myWidget.getVariant("4x4");
+var variant = myWidget.getVariant('4x4');
</pre></li>
</ol>
<ol>
<li><p>Define the event handler for state notifications using the <code>WidgetChangeCallback</code> listener interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetChangeCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#WidgetChangeCallback">wearable</a> applications):</p>
<pre class="prettyprint">
-var WidgetChangeCallback = function(instance, event)
-{
- console.log("The instance " + instance + " has state " + event);
+var WidgetChangeCallback = function(instance, event) {
+ console.log('The instance ' + instance + ' has state ' + event);
};
</pre></li>
<li><p>Retrieve the widget object using the <code>getWidget()</code> method of the <code>WidgetServiceManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetServiceManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#WidgetServiceManager">wearable</a> applications):</p>
<pre class="prettyprint">
-var myWidget = tizen.widgetservice.getWidget("org.tizen.music-player.widget");
+var myWidget = tizen.widgetservice.getWidget('org.tizen.music-player.widget');
</pre></li>
<li><p>Add the listener to use the defined event handler with the <code>addStateChangeListener()</code> method of the <code>Widget</code> interface:</p>
<li><p>Retrieve the widget instance with the <code>getInstances()</code> method:</p>
<pre class="prettyprint">
var instance;
-var successCallback = function(instances)
-{
- instance = instances[0];
+var successCallback = function(instances) {
+ instance = instances[0];
};
-var myWidget = tizen.widgetservice.getWidget("org.tizen.gallery.widget");
+var myWidget = tizen.widgetservice.getWidget('org.tizen.gallery.widget');
myWidget.getInstances(successCallback);
</pre></li>
<li><p>To change the update interval, use the <code>changeUpdatePeriod()</code> method of the <code>WidgetInstance</code> interface with the new value (in seconds):</p>
<li><p>Obtain the widget instance with the <code>getInstances()</code> method:</p>
<pre class="prettyprint">
var instance;
-var successCallback = function(instances)
-{
- instance = instances[0];
+var successCallback = function(instances) {
+ instance = instances[0];
};
-var myWidget = tizen.widgetservice.getWidget("org.tizen.gallery.widget");
+var myWidget = tizen.widgetservice.getWidget('org.tizen.gallery.widget');
myWidget.getInstances(successCallback);
</pre></li>
</pre></li>
<li><p>To retrieve widget instance content, define a success handler implementing the <code>WidgetContentCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/widgetservice.html#WidgetContentCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/widgetservice.html#WidgetContentCallback">wearable</a> applications). Optionally, you can specify an error handler too.</p>
<pre class="prettyprint">
-var successCallback = function(object)
-{
- console.log("Data successfully retrieved");
+var successCallback = function(object) {
+ console.log('Data successfully retrieved');
};
-var errorCallback = function(error)
-{
- console.log("Error " + error.message);
+var errorCallback = function(error) {
+ console.log('Error ' + error.message);
};
</pre>
<p>Afterwards, use the <code>getContent()</code> method of the <code>WidgetInstance</code> interface:</p>
<ol>
<li>Retrieve a <code>BluetoothAdapter</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothAdapter">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothAdapter">wearable</a> applications) with the <code>getDefaultAdapter()</code> method and prepare the <code>ApplicationControl</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControl">wearable</a> applications) to request the Bluetooth switching operation:
<pre class="prettyprint">
-var bluetoothSwitchAppControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/edit",
- null, "application/x-bluetooth-on-off");
+var bluetoothSwitchAppControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/edit', null, 'application/x-bluetooth-on-off');
var adapter = tizen.bluetooth.getDefaultAdapter();
</pre></li>
<li>Define a callback for the <code>launchAppControl()</code> method:
<pre class="prettyprint">
-function launchSuccess()
-{
- console.log("Bluetooth Settings application is successfully launched.");
+function launchSuccess() {
+ console.log('Bluetooth Settings application is successfully launched.');
}
-function launchError(error)
-{
- alert("An error occurred: " + error.name
- + ". Please enable Bluetooth through the Settings application.");
+function launchError(error) {
+ alert('An error occurred: ' + error.name + '. Please enable Bluetooth through the Settings application.');
}
</pre></li>
<li>Define the reply callback of the application control which implements the <code>ApplicationControlDataArrayReplyCallback</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlDataArrayReplyCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControlDataArrayReplyCallback">wearable</a> applications):
<pre class="prettyprint">
-var serviceReply =
-{
- /* Called when the launched application reports success */
- onsuccess: function(data)
- {
- if (adapter.powered)
- {
- console.log("Bluetooth is successfully turned on.");
- }
- else
- {
- console.log("Bluetooth is still switched off.");
- }
- },
- /* Called when launched application reports failure */
- onfailure: function()
- {
- alert("Bluetooth Settings application reported failure.");
- }
+var serviceReply = {
+ /* Called when the launched application reports success */
+ onsuccess: function(data) {
+ if (adapter.powered) {
+ console.log('Bluetooth is successfully turned on.');
+ } else {
+ console.log('Bluetooth is still switched off.');
+ }
+ },
+ /* Called when launched application reports failure */
+ onfailure: function() {
+ alert('Bluetooth Settings application reported failure.');
+ }
};
</pre></li>
<li>If necessary, request launching the Bluetooth Settings with the prepared <code>bluetoothSwitchAppControl</code>:
<pre class="prettyprint">
-if (adapter.powered)
-{
- console.log("Bluetooth is already enabled");
-}
-else
-{
- console.log("Try to launch the Bluetooth Settings application.");
- tizen.application.launchAppControl(bluetoothSwitchAppControl, null, launchSuccess,
- launchError, serviceReply);
+if (adapter.powered) {
+ console.log('Bluetooth is already enabled');
+} else {
+ console.log('Try to launch the Bluetooth Settings application.');
+ tizen.application.launchAppControl(bluetoothSwitchAppControl, null, launchSuccess, launchError, serviceReply);
}
</pre></li>
<li><p>To display the Bluetooth visibility switch, use the <code>application/x-bluetooth-visibility</code> mime option. Bluetooth visibility means that the device is discoverable by other Bluetooth devices.</p>
<pre class="prettyprint">
-var bluetoothVisibilityAppControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/edit",
- null, "application/x-bluetooth-visibility");
-function launchVisibilityError(error)
-{
- alert("An error occurred: " + error.name
- + ". Please enable Bluetooth visibility through the Settings application.");
+var bluetoothVisibilityAppControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/edit', null, 'application/x-bluetooth-visibility');
+
+function launchVisibilityError(error) {
+ alert('An error occurred: ' + error.name + '. Please enable Bluetooth visibility through the Settings application.');
}
-var serviceVisibilityReply =
-{
- /* Called when the launched application reports success */
- onsuccess: function(data)
- {
- console.log("Bluetooth is "
- + (adapter.visible ? "now discoverable." : "still not visible."));
- },
- /* Called when launched application reports failure */
- onfailure: function()
- {
- alert("Bluetooth Settings application reported failure.");
- }
+var serviceVisibilityReply = {
+ /* Called when the launched application reports success */
+ onsuccess: function(data) {
+ console.log('Bluetooth is ' + (adapter.visible ? 'now discoverable.' : 'still not visible.'));
+ },
+ /* Called when launched application reports failure */
+ onfailure: function() {
+ alert('Bluetooth Settings application reported failure.');
+ }
};
-tizen.application.launchAppControl(bluetoothVisibilityAppControl, null, null,
- launchVisibilityError, serviceVisibilityReply);
+tizen.application.launchAppControl(bluetoothVisibilityAppControl, null, null, launchVisibilityError, serviceVisibilityReply);
</pre></li>
<li><p>Set a friendly name for the device using the <code>setName()</code> method.</p> <p>The name helps to recognize the device in a list of <a href="#Discovering_BT_Devices">retrieved devices</a>.</p>
<li><p>To search for remote devices, use the <code>discoverDevices()</code> method.</p>
<p>The results of the search are returned in the <code>BluetoothDiscoverDevicesSuccessCallback</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothDiscoverDevicesSuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothDiscoverDevicesSuccessCallback">wearable</a> applications).</p>
<pre class="prettyprint">
-var discoverDevicesSuccessCallback =
-{
- /* When a device is found */
- ondevicefound: function(device)
- {
- console.log("Found device - name: " + device.name);
- }
+var discoverDevicesSuccessCallback = {
+ /* When a device is found */
+ ondevicefound: function(device) {
+ console.log('Found device - name: ' + device.name);
+ }
}
/* Discover devices */
<p>The results of the search are returned in the <code>BluetoothDeviceArraySuccessCallback</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothDeviceArraySuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothDeviceArraySuccessCallback">wearable</a> applications).</p>
<pre class="prettyprint">
/* When a known device is found */
-function onGotDevices(devices)
-{
- console.log("The number of known devices: " + devices.length);
+function onGotDevices(devices) {
+ console.log('The number of known devices: ' + devices.length);
}
/* Retrieve known devices */
</pre></li>
<li><p>To create a bonding with another device, use the <code>createBonding()</code> method:</p>
<pre class="prettyprint">
-function onBondingSuccessCallback(device)
-{
- console.log("A bonding is created - name: " + device.name);
+function onBondingSuccessCallback(device) {
+ console.log('A bond is created - name: ' + device.name);
}
-function onErrorCallback(e)
-{
- console.log("Cannot create a bonding, reason: " + e.message);
+function onErrorCallback(e) {
+ console.log('Cannot create a bond, reason: ' + e.message);
}
-adapter.createBonding("35:F4:59:D1:7A:03", onBondingSuccessCallback, onErrorCallback);
+adapter.createBonding('35:F4:59:D1:7A:03', onBondingSuccessCallback, onErrorCallback);
</pre>
<div class="note">
<li><p>To end the bonding with a remote device, use the <code>destroyBonding()</code> method:</p>
<pre class="prettyprint">
-adapter.destroyBonding("35:F4:59:D1:7A:03");
+adapter.destroyBonding('35:F4:59:D1:7A:03');
</pre></li>
</ol>
</pre></li>
<li><p>To register a service and allow client devices to connect to it, use the <code>registerRFCOMMServiceByUUID()</code> method on the server device:</p>
<pre class="prettyprint">
-adapter.registerRFCOMMServiceByUUID(serviceUUID, "My service");
+adapter.registerRFCOMMServiceByUUID(serviceUUID, 'My service');
</pre>
<div class="note">
<strong>Note</strong>
<li><p>To connect to the server device, use the <code>connectToServiceByUUID()</code> method on the client device:</p>
<pre class="prettyprint">
-device.connectToServiceByUUID(serviceUUID, function(sock)
- {
- console.log("socket connected");
- socket = sock;
- }, function(error)
- {
- console.log("Error while connecting: " + error.message);
- }
-);
+device.connectToServiceByUUID(serviceUUID, function(sock) {
+ console.log('socket connected');
+ socket = sock;
+}, function(error) {
+ console.log('Error while connecting: ' + error.message);
+});
</pre>
<p>When a connection between 2 devices is established, the <code>BluetoothSocketSuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothSocketSuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothSocketSuccessCallback">wearable</a> applications) on the client device and the <code>onconnect</code> event handler in the <code>BluetoothServiceHandler</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothServiceHandler">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothServiceHandler">wearable</a> applications) on the server device are triggered.</p></li>
<li>Retrieve a <code>BluetoothHealthProfileHandler</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthProfileHandler">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthProfileHandler">wearable</a> applications):
<pre class="prettyprint">
var adapter = tizen.bluetooth.getDefaultAdapter();
-var healthProfileHandler = adapter.getBluetoothProfileHandler("HEALTH");
+var healthProfileHandler = adapter.getBluetoothProfileHandler('HEALTH');
var healthApplication = null, healthChannel = null;
</pre></li>
<li><p>Register an application as a sink to wait for connection requests from health source devices (4100 means oximeter):</p>
<pre class="prettyprint">
-function onSinkApp(app)
-{
- console.log("Success");
- healthApplication = app;
+function onSinkApp(app) {
+ console.log('Success');
+ healthApplication = app;
}
-healthProfileHandler.registerSinkApplication(4100, "testSinkApp", onSinkApp);
+healthProfileHandler.registerSinkApplication(4100, 'testSinkApp', onSinkApp);
</pre>
<p>When the sink application is registered successfully, the <code>BluetoothHealthApplicationSuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthApplicationSuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthApplicationSuccessCallback">wearable</a> applications) is invoked and you can get the registered sink application object.</p></li>
<li>Before establishing a connection, your device must be bonded with a health source device. For more information, see <a href="#Creating_Bond">Creating a Bonding with a Bluetooth Device</a>.</li>
<li><p>To connect to the health source device, use the <code>connectToSource()</code> method of the <code>BluetoothHealthProfileHandler</code> interface:</p>
<pre class="prettyprint">
-function onConnect(channel)
-{
- console.log("Success");
- healthChannel = channel;
+function onConnect(channel) {
+ console.log('Success');
+ healthChannel = channel;
}
-adapter.getDevice("35:F4:59:D1:7A:03", function(device)
- {
+adapter.getDevice('35:F4:59:D1:7A:03', function(device) {
healthProfileHandler.connectToSource(device, healthApplication, onConnect);
- });
+});
</pre>
<p>When a connection between 2 devices is established, the success callback of the <code>connectToSource()</code> method is called. In addition, the <code>onconnect</code> event handler of the <code>BluetoothHealthApplication</code> instance (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthApplication">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthApplication">wearable</a> applications) is called, if the success callback attribute is set. You can get the connected <code>BluetoothHealthChannel</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthChannel">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthChannel">wearable</a> applications) from the callbacks.</p></li>
<li><p>To send data to the source device, use the <code>sendData()</code> method:</p>
<li>Define a scan event handler by implementing the <code>BluetoothLEScanCallback</code> callback (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEScanCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEScanCallback">wearable</a> applications).
<p>The callback is invoked when a remote device has been detected.</p>
<pre class="prettyprint">
-function successcallback(device)
-{
- console.log("Found device: " + device.name + " [" + device.address + "]");
-};
+function successcallback(device) {
+ console.log('Found device: ' + device.name + ' [' + device.address + ']');
+}
</pre>
<div class="note">
<li><p>Set up options and start advertising with the <code>startAdvertise()</code> method of the <code>BluetoothLEAdapter</code> interface:</p>
<pre class="prettyprint">
-var advertiseData = new tizen.BluetoothLEAdvertiseData(
-{
- includeName: true,
- serviceuuids: ["180f"] /* 180F is 16bit Battery Service UUID */
+var advertiseData = new tizen.BluetoothLEAdvertiseData({
+ includeName: true,
+ serviceuuids: ['180f'] /* 180F is 16bit Battery Service UUID */
});
var connectable = true;
-adapter.startAdvertise(advertiseData, "ADVERTISE", function onstate(state)
- {
- console.log("Advertising configured: " + state);
- }, function(error)
- {
- console.log("startAdvertise() failed: " + error.message);
- }, "LOW_LATENCY", connectable);
+adapter.startAdvertise(advertiseData, 'ADVERTISE', function onstate(state) {
+ console.log('Advertising configured: ' + state);
+}, function(error) {
+ console.log('startAdvertise() failed: ' + error.message);
+}, 'LOW_LATENCY', connectable);
</pre>
<div class="note">
</li>
<li><p>Define success and error callbacks for the connect operation:</p>
<pre class="prettyprint">
-function connectFail(error)
-{
- console.log("Failed to connect to device: " + e.message);
+function connectFail(error) {
+ console.log('Failed to connect to device: ' + e.message);
}
-function connectSuccess()
-{
- console.log("Connected to device");
+function connectSuccess() {
+ console.log('Connected to device');
}
</pre>
</li>
<pre class="prettyprint">
var remoteDevice = null;
-function onDeviceFound(device)
-{
- if (remoteDevice === null)
- {
- remoteDevice = device;
- console.log("Found device " + device.name + ". Connecting...");
+function onDeviceFound(device) {
+ if (remoteDevice === null) {
+ remoteDevice = device;
+ console.log('Found device ' + device.name + '. Connecting...');
- device.connect(connectSuccess, connectFail);
- }
+ device.connect(connectSuccess, connectFail);
+ }
- adapter.stopScan();
+ adapter.stopScan();
}
</pre>
</li>
</li>
<li><p>Define a connection state change listener by implementing the <code>BluetoothLEConnectChangeCallback</code> callback (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEConnectChangeCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEConnectChangeCallback">wearable</a> applications):</p>
<pre class="prettyprint">
-var connectionListener =
-{
- onconnected: function(device)
- {
- console.log("Connected to the device: " + device.name
- + " [" + device.address + "]");
- },
- ondisconnected: function(device)
- {
- console.log("Disconnected from the device " + device.name
- + " [" + device.address + "]");
- }
+var connectionListener = {
+ onconnected: function(device) {
+ console.log('Connected to the device: ' + device.name + ' [' + device.address + ']');
+ },
+ ondisconnected: function(device) {
+ console.log('Disconnected from the device ' + device.name + ' [' + device.address + ']');
+ }
};
</pre>
</li>
var remoteDevice = null;
var watchId;
-function onDeviceFound(device)
-{
- if (remoteDevice === null)
- {
- remoteDevice = device;
- console.log("Found device " + device.name + ". Connecting...");
+function onDeviceFound(device) {
+ if (remoteDevice === null) {
+ remoteDevice = device;
+ console.log('Found device ' + device.name + '. Connecting...');
- watchId = remoteDevice.addConnectStateChangeListener(connectionListener);
+ watchId = remoteDevice.addConnectStateChangeListener(connectionListener);
- remoteDevice.connect();
- }
+ remoteDevice.connect();
+ }
- adapter.stopScan();
+ adapter.stopScan();
}
</pre>
</li>
<li><a href="#Connecting">Connect to a Bluetooth Low Energy device</a>.</li>
<li><p>Define a connection state change listener by implementing the <code>BluetoothLEConnectChangeCallback</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEConnectChangeCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEConnectChangeCallback">wearable</a> applications):</p>
<pre class="prettyprint">
-function showGATTService(service, indent)
-{
- if (indent === undefined)
- {
- indent = "";
- }
-
- console.log(indent + "Service " + service.uuid + ". Has "
- + service.characteristics.length + " characteristics and "
- + service.services.length + " sub-services.");
-
- for (var i = 0; i < service.services.length; i++)
- {
- showGATTService(service.services[i], indent + " ");
- }
+function showGATTService(service, indent) {
+ if (indent === undefined) {
+ indent = '';
+ }
+
+ console.log(indent + 'Service ' + service.uuid + '. Has ' + service.characteristics.length +
+ ' characteristics and ' + service.services.length + ' sub-services.');
+
+ for (var i = 0; i < service.services.length; i++) {
+ showGATTService(service.services[i], indent + ' ');
+ }
}
</pre>
</li>
<pre class="prettyprint">
var i = 0, service = null;
-for (i; i < serviceUUIDs.length; i++)
-{
- service = remoteDevice.getService(serviceUUIDs[i]);
+for (i; i < serviceUUIDs.length; i++) {
+ service = remoteDevice.getService(serviceUUIDs[i]);
- showGATTService(service);
+ showGATTService(service);
}
</pre>
</li>
<pre class="prettyprint">
var services = remoteDevice.getServiceAllUuids();
-console.log("Services length " + services.length);
+console.log('Services length ' + services.length);
</pre>
</li>
</ol>
</li>
<li><p>Define a callback implementing the <code>ReadValueSuccessCallback</code> callback (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#ReadValueSuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#ReadValueSuccessCallback">wearable</a> applications), which receives the value of the characteristic:</p>
<pre class="prettyprint">
-function readSuccess(value)
-{
- console.log("Characteristic value: " + value);
+function readSuccess(value) {
+ console.log('Characteristic value: ' + value);
}
-function readFail(error)
-{
- console.log("readValue() failed: " + error);
+function readFail(error) {
+ console.log('readValue() failed: ' + error);
}
</pre>
</li>
<li><p>To retrieve the GATT characteristic value, use the <code>readValue()</code> method of the <code>BluetoothGATTCharacteristic</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTCharacteristic">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTCharacteristic">wearable</a> applications):</p>
<pre class="prettyprint">
-if (!property.isReadable)
-{
- console.log("Property seems not to be readable. Attempting to read...");
+if (!property.isReadable) {
+ console.log('Property seems not to be readable. Attempting to read...');
}
property.readValue(readSuccess, readFail);
</pre>
</li>
<li><p>To change the characteristic value, define callbacks and use the <code>writeValue()</code> method of the <code>BluetoothGATTCharacteristic</code> interface:</p>
<pre class="prettyprint">
-function writeSuccess(value)
-{
- console.log("Written");
+function writeSuccess(value) {
+ console.log('Written');
}
-function writeFail(error)
-{
- console.log("writeValue() failed: " + error);
+function writeFail(error) {
+ console.log('writeValue() failed: ' + error);
}
-if (!property.isWritable)
-{
- console.log("Property seems not to be writable. Attempting to write...");
+if (!property.isWritable) {
+ console.log('Property seems not to be writable. Attempting to write...');
}
var newValue = [82];
</li>
<li><p>Define a callback implementing the <code>ReadValueSuccessCallback</code> callback (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#ReadValueSuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#ReadValueSuccessCallback">wearable</a> applications), which receives the value of the characteristic every time the value changes:</p>
<pre class="prettyprint">
-function onValueChange(value)
-{
- console.log("Characteristic value is now: " + value);
+function onValueChange(value) {
+ console.log('Characteristic value is now: ' + value);
}
</pre>
</li>
</li>
<li><p>Define a callback implementing the <code>ReadValueSuccessCallback</code> callback (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#ReadValueSuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#ReadValueSuccessCallback">wearable</a> applications), which receives the value of the descriptor:</p>
<pre class="prettyprint">
-function readSuccess(value)
-{
- console.log("Descriptor value: " + value);
+function readSuccess(value) {
+ console.log('Descriptor value: ' + value);
}
-function readFail(error)
-{
- console.log("readValue() failed: " + error);
+function readFail(error) {
+ console.log('readValue() failed: ' + error);
}
</pre>
</li>
</li>
<li><p>To change the descriptor value, define callbacks and use the <code>writeValue()</code> method of the <code>BluetoothGATTDescriptor</code> interface:</p>
<pre class="prettyprint">
-function writeSuccess(value)
-{
- console.log("Written");
+function writeSuccess(value) {
+ console.log('Written');
}
-function writeFail(error)
-{
- console.log("writeValue() failed: " + error);
+function writeFail(error) {
+ console.log('writeValue() failed: ' + error);
}
var newValue = [3];
<pre class="prettyprint">
var timeout = 60 * 60;
-try
-{
- tizen.convergence.startDiscovery(discoverySuccessCallback, onerror, timeout);
-}
-catch (err)
-{
- console.log(err.name + ': ' + err.message);
+try {
+ tizen.convergence.startDiscovery(discoverySuccessCallback, onerror, timeout);
+} catch (err) {
+ console.log(err.name + ': ' + err.message);
}
</pre></li>
</ul>
<pre class="prettyprint">
-var discoverySuccessCallback =
-{
- onfound: function(device)
- {
- console.log('Found a device');
- console.log(" - id: " + device.id);
- console.log(" - name: " + device.name);
- console.log(" - type: " + device.type);
- console.log(" - service amount: " + device.services.length);
- for (i in device.services)
- {
- if (device.services[i] instanceof RemoteAppControlService)
- {
- if (device.services[i].connectionState != "CONNECTED")
- {
- device.services[i].connect(onconnected, onerror);
+var discoverySuccessCallback = {
+ onfound: function(device) {
+ console.log('Found a device');
+ console.log(' - id: ' + device.id);
+ console.log(' - name: ' + device.name);
+ console.log(' - type: ' + device.type);
+ console.log(' - service amount: ' + device.services.length);
+ for (i in device.services) {
+ if (device.services[i] instanceof RemoteAppControlService) {
+ if (device.services[i].connectionState != 'CONNECTED') {
+ device.services[i].connect(onconnected, onerror);
+ }
}
- }
- }
- },
-
- onfinished: function(foundDevices)
- {
- console.log(' Device discovery has finished');
- if (foundDevices.length > 0)
- {
- console.log(" - devices found: " + foundDevices.length);
- }
- }
+ }
+ },
+
+ onfinished: function(foundDevices) {
+ console.log(' Device discovery has finished');
+ if (foundDevices.length > 0) {
+ console.log(' - devices found: ' + foundDevices.length);
+ }
+ }
};
-function onerror(err)
-{
- console.log(err.name + ': ' + err.message);
+function onerror(err) {
+ console.log(err.name + ': ' + err.message);
}
</pre></li>
<li><p>When a connection is established, the <code>onconnected</code> callback is invoked with the connected <code>service</code> as a parameter:</p>
- <pre class="prettyprint">
-function onconnected(service)
-{
- console.log('Connected to the service');
+<pre class="prettyprint">
+function onconnected(service) {
+ console.log('Connected to the service');
}
</pre>
</li>
</li>
<li>Define the success and error callbacks for the server service start:
<pre class="prettyprint">
-function onerror(err)
-{
- console.log(err.name +': ' + err.message);
+function onerror(err) {
+ console.log(err.name +': ' + err.message);
}
-function onstarted(channel, clientInfo)
-{
- console.log('Channel started');
- console.log('channel uri: ' + channel.uri);
- console.log('channel id: ' + channel.id);
-
- if (clientInfo)
- {
- console.log('clientInfo');
- console.log('isHost: ' + clientInfo.isHost);
- console.log('client id: ' + clientInfo.clientId);
- console.log('connection time: ' + clientInfo.connectionTime);
- }
+function onstarted(channel, clientInfo) {
+ console.log('Channel started');
+ console.log('channel uri: ' + channel.uri);
+ console.log('channel id: ' + channel.id);
+
+ if (clientInfo) {
+ console.log('clientInfo');
+ console.log('isHost: ' + clientInfo.isHost);
+ console.log('client id: ' + clientInfo.clientId);
+ console.log('connection time: ' + clientInfo.connectionTime);
+ }
}
</pre>
</li>
<ol>
<li><p>The started server service handles incoming messages through the <code>onnotify</code> callback, which is invoked when another service attempts to communicate with the server. The callback receives the sent payload and data about its sender.</p>
<pre class="prettyprint">
-function onnotify(channel, payload, senderclientid)
-{
- console.log('On service notification');
- console.log('channel uri: ' + channel.uri);
- console.log('channel id: ' + channel.id);
- console.log('client id of sender: ' + senderclientid);
- for (i in payload)
- {
- console.log('payload: ' + payload[i].key + '-' + payload[i].value);
- }
+function onnotify(channel, payload, senderclientid) {
+ console.log('On service notification');
+ console.log('channel uri: ' + channel.uri);
+ console.log('channel id: ' + channel.id);
+ console.log('client id of sender: ' + senderclientid);
+ for (i in payload) {
+ console.log('payload: ' + payload[i].key + '-' + payload[i].value);
+ }
}
</pre></li>
<li><p>Discover available server services on the client side:</p>
<pre class="prettyprint">
-function onerror(err)
-{
- console.log(err.name +': ' + err.message);
+function onerror(err) {
+ console.log(err.name +': ' + err.message);
}
var timeout = 60 * 60;
-try
-{
- tizen.convergence.startDiscovery(discoverySuccessCallback, onerror, timeout);
-}
-catch (err)
-{
- console.log(err.name + ': ' + err.message);
+try {
+ tizen.convergence.startDiscovery(discoverySuccessCallback, onerror, timeout);
+} catch (err) {
+ console.log(err.name + ': ' + err.message);
}
</pre></li>
<li><p>Create a <code>ChannelInfo</code> instance with the same URI and ID as the channel used on the server side. Then start the available server service and send the payload to it.</p>
var serverService;
var channel = new tizen.ChannelInfo('targetApp0.main', 'chA');
-function onerror(err)
-{
- console.log(err.name +': ' + err.message);
+function onerror(err) {
+ console.log(err.name +': ' + err.message);
}
-var requestPayload =
-{
- key: "testPayload",
- value: "Hello!"
+var requestPayload = {
+ key: 'testPayload',
+ value: 'Hello!'
};
-function sendSuccessCallback(channel)
-{
- console.log('requestPayload sent');
- console.log('channel uri: ' + channel.uri);
- console.log('channel id: ' + channel.id);
+function sendSuccessCallback(channel) {
+ console.log('requestPayload sent');
+ console.log('channel uri: ' + channel.uri);
+ console.log('channel id: ' + channel.id);
}
-function onstarted(channel, clientInfo)
-{
- serverService.send(channel, requestPayload, sendSuccessCallback, onerror);
+function onstarted(channel, clientInfo) {
+ serverService.send(channel, requestPayload, sendSuccessCallback, onerror);
}
-var discoverySuccessCallback =
-{
- onfound: function(device)
- {
- for (i in device.services)
- {
- if (device.services[i] instanceof AppCommunicationServerService)
- {
- serverService = device.services[i];
- device.services[i].start(channel, onstarted, onerror);
- }
- }
- },
-
- onfinished: function(foundDevices)
- {
- console.log(' Device discovery has finished');
- }
+var discoverySuccessCallback = {
+ onfound: function(device) {
+ for (i in device.services) {
+ if (device.services[i] instanceof AppCommunicationServerService) {
+ serverService = device.services[i];
+ device.services[i].start(channel, onstarted, onerror);
+ }
+ }
+ },
+
+ onfinished: function(foundDevices) {
+ console.log(' Device discovery has finished');
+ }
};
</pre></li>
</ol>
<ol>
<li><p>Call the <code>startDiscovery()</code> method to establish connections with remote devices:</p>
<pre class="prettyprint">
-var discoverySuccessCallback =
-{
- onfound: function(device)
- {
- for (i in device.services)
- {
- if (device.services[i].type === "REMOTE_APP_CONTROL")
- {
- if (device.services[i].connectionState != "CONNECTED")
- {
- device.services[i].connect(onconnected, onerror);
- }
- else
- {
- device.services[i].start(onstarted, onerror);
+var discoverySuccessCallback = {
+ onfound: function(device) {
+ for (i in device.services) {
+ if (device.services[i].type === 'REMOTE_APP_CONTROL') {
+ if (device.services[i].connectionState != 'CONNECTED') {
+ device.services[i].connect(onconnected, onerror);
+ } else {
+ device.services[i].start(onstarted, onerror);
+ }
}
- }
- }
- },
-
- onfinished: function(foundDevices)
- {
- console.log('Device discovery has finished');
- }
+ }
+ },
+
+ onfinished: function(foundDevices) {
+ console.log('Device discovery has finished');
+ }
};
-function onerror(err)
-{
- console.log(err.name +': ' + err.message);
+function onerror(err) {
+ console.log(err.name +': ' + err.message);
}
var timeout = 60 * 60;
-try
-{
- tizen.convergence.startDiscovery(discoverySuccessCallback, onerror, timeout);
-}
-catch (err)
-{
- console.log(err.name + ': ' + err.message);
+try {
+ tizen.convergence.startDiscovery(discoverySuccessCallback, onerror, timeout);
+} catch (err) {
+ console.log(err.name + ': ' + err.message);
}
</pre></li>
<li><p>An application on the remote device is started from the <code>onconnected</code> callback. The <code>remoteAppControlCallback</code> method handles the data sent from the remote device.</p>
<pre class="prettyprint">
var requestAppId = 'targetApp0.main';
-function remoteAppControlCallback(data)
-{
- for (var i = 0; i < data.length; i++)
- {
- console.log("key: " + data[i].key + "value: " + data[i].value[0]);
- }
- service.disconnect();
+function remoteAppControlCallback(data) {
+ for (var i = 0; i < data.length; i++) {
+ console.log('key: ' + data[i].key + 'value: ' + data[i].value[0]);
+ }
+ service.disconnect();
}
-function onstarted(service)
-{
- console.log('Remote app control service started');
- service.launch(requestAppId, remoteAppControlCallback, onerror);
+function onstarted(service) {
+ console.log('Remote app control service started');
+ service.launch(requestAppId, remoteAppControlCallback, onerror);
}
-function onconnected(service)
-{
- console.log('Connected to the remote app control service');
- service.start(onstarted, onerror);
- service.launch(requestAppId, remoteAppControlCallback, onerror);
+function onconnected(service) {
+ console.log('Connected to the remote app control service');
+ service.start(onstarted, onerror);
+ service.launch(requestAppId, remoteAppControlCallback, onerror);
}
</pre></li>
</ol>
<ol>
<li><p>Use the <code>startDiscovery()</code> method to search for and connect to a <code>RemoteAppControlService</code>:</p>
<pre class="prettyprint">
-var discoverySuccessCallback =
-{
- onfound: function(device)
- {
- for (i in device.services)
- {
- if (device.services[i] instanceof RemoteAppControlService)
- {
- if (device.services[i].connectionState != "CONNECTED")
- {
- device.services[i].connect(onconnected, onerror);
+var discoverySuccessCallback = {
+ onfound: function(device) {
+ for (i in device.services) {
+ if (device.services[i] instanceof RemoteAppControlService) {
+ if (device.services[i].connectionState != 'CONNECTED') {
+ device.services[i].connect(onconnected, onerror);
+ }
}
- }
- }
- },
-
- onfinished: function(foundDevices)
- {
- console.log(' Device discovery has finished');
- }
-};
+ }
+ },
-function onerror(err)
-{
- console.log(err.name +': ' + err.message);
-}
+ onfinished: function(foundDevices) {
+ console.log(' Device discovery has finished');
+ }
+};
-try
-{
- tizen.convergence.startDiscovery(discoverySuccessCallback, onerror, 60 * 60);
-}
-catch (err)
-{
- console.log(err.name + ': ' + err.message);
+function onerror(err) {
+ console.log(err.name +': ' + err.message);
+} try {
+ tizen.convergence.startDiscovery(discoverySuccessCallback, onerror, 60 * 60);
+} catch (err) {
+ console.log(err.name + ': ' + err.message);
}
</pre></li>
<li><p>Create the <code>ApplicationControl</code> object:</p>
<pre class="prettyprint">
var requestAppControl =
- new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/view', null,
- 'image/jpeg', null,
- [new tizen.ApplicationControlData('images',
- [testImgData])]);
+ new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/view', null,
+ 'image/jpeg', null,
+ [new tizen.ApplicationControlData('images', [testImgData])]);
</pre></li>
<li><p>Use the <code>onconnected()</code> callback to send the application control request to the remote service. The <code>launchAppControl()</code> method takes as parameters the <code>ApplicationControl</code> object, optionally the target application ID, and a callback defining the actions to be taken on the remote service reply.</p><pre class="prettyprint">
-function remoteAppControlCallback(data)
-{
- for (var i = 0; i < data.length; i++)
- {
- console.log("key: " + data[i].key + "value: " + data[i].value[0]);
- }
+function remoteAppControlCallback(data) {
+ for (var i = 0; i < data.length; i++) {
+ console.log('key: ' + data[i].key + 'value: ' + data[i].value[0]);
+ }
}
-function onconnected(service)
-{
- service.launchAppControl(requestAppControl, null,
- remoteAppControlCallback, onerror);
+function onconnected(service) {
+ service.launchAppControl(requestAppControl, null,
+ remoteAppControlCallback, onerror);
}
</pre></li>
</ol>
<ol>
<li><p>Create an instance of the <code>DownloadRequest</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadRequest">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadRequest">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/download.html#DownloadRequest">TV</a> applications) that defines the URL of the file to be downloaded:</p>
<pre class="prettyprint">
-var downloadRequest =
- new tizen.DownloadRequest("http://download.tizen.org/tools/README.txt", "downloads");
+var downloadRequest = new tizen.DownloadRequest('http://download.tizen.org/tools/README.txt', 'downloads');
</pre>
<p>The final parameter (<code>downloads</code>) defines the folder where the downloaded content is stored. The parameter uses a relative folder location defined in the Filesystem API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html">TV</a> applications). The folder is not an absolute folder location, but instead uses a <a href="../data/file_system_w.htm">virtual root location</a> (<code>downloads</code> is the default download location in the virtual root).</p></li>
<li><p>It is not possible to download anything when the device is not connected to a network. To check whether any connection is available, use the <code>getPropertyValue()</code> method of the <code>SystemInfo</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfo">TV</a> applications):</p>
<pre class="prettyprint">
-tizen.systeminfo.getPropertyValue("NETWORK", function(networkInfo)
- {
- if (networkInfo.networkType === "NONE")
- {
- console.log("Network connection is not available.
- Download is not possible.");
- downloadRequest = null;
- }
- });
+tizen.systeminfo.getPropertyValue('NETWORK', function(networkInfo) {
+ if (networkInfo.networkType === 'NONE') {
+ console.log('Network connection is not available.
+ Download is not possible.');
+ downloadRequest = null;
+ }
+});
</pre></li>
<li>Define the event handlers for different download process notifications using the <code>DownloadCallback</code> listener interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadCallback">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadCallback">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/download.html#DownloadCallback">TV</a> applications):
<pre class="prettyprint">
-var listener =
-{
- /* When the download progresses (interval is platform-dependent) */
- onprogress: function(id, receivedSize, totalSize)
- {
- console.log('Received with id: ' + id + ', ' + receivedSize + '/' + totalSize);
- },
-
- /* When the user pauses the download */
- onpaused: function(id)
- {
- console.log('Paused with id: ' + id);
- },
-
- /* When the user cancels the download */
- oncanceled: function(id)
- {
- console.log('Canceled with id: ' + id);
- },
-
- /* When the download is completed */
- oncompleted: function(id, fullPath)
- {
- console.log('Completed with id: ' + id + ', full path: ' + fullPath);
- },
-
- /* When the download fails */
- onfailed: function(id, error)
- {
- console.log('Failed with id: ' + id + ', error name: ' + error.name);
- }
+var listener = {
+ /* When the download progresses (interval is platform-dependent) */
+ onprogress: function(id, receivedSize, totalSize) {
+ console.log('Received with id: ' + id + ', ' + receivedSize + '/' + totalSize);
+ },
+
+ /* When the user pauses the download */
+ onpaused: function(id) {
+ console.log('Paused with id: ' + id);
+ },
+
+ /* When the user cancels the download */
+ oncanceled: function(id) {
+ console.log('Canceled with id: ' + id);
+ },
+
+ /* When the download is completed */
+ oncompleted: function(id, fullPath) {
+ console.log('Completed with id: ' + id + ', full path: ' + fullPath);
+ },
+
+ /* When the download fails */
+ onfailed: function(id, error) {
+ console.log('Failed with id: ' + id + ', error name: ' + error.name);
+ }
};
</pre></li>
<li><p>To start the download of the HTML file from the Internet, use the <code>start()</code> method of the <code>DownloadManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/download.html#DownloadManager">TV</a> applications):</p>
<p>You can also check whether a device supports the API by using the <code>tizen.systeminfo.getCapability()</code> method and accordingly enabling or disabling the code requiring the API:</p>
<pre class="prettyprint">
-try
-{
- /* Checks whether a device supports the Iotcon API */
- var iotcon_feature =
- tizen.systeminfo.getCapability("http://tizen.org/feature/iot.ocf");
- console.log("Iotcon = " + iotcon_feature);
-}
-catch (error)
-{
- console.log("Error name: " + error.name + ", message: " + error.message);
+try {
+ /* Checks whether a device supports the Iotcon API */
+ var iotcon_feature = tizen.systeminfo.getCapability('http://tizen.org/feature/iot.ocf');
+ console.log('Iotcon = ' + iotcon_feature);
+} catch (error) {
+ console.log('Error name: ' + error.name + ', message: ' + error.message);
}
</pre>
</li>
<p>For managing secure virtual resources, a CBOR format file (Concise Binary Object Representation) must be
available, preferably in the application local storage. For more information on security, see <a href="https://wiki.iotivity.org/iotivity_security" target="_blank">Iotivity Security</a>.</p>
<pre class="prettyprint">
-var cborPath = "path_to_my_app_storage/iotcon-server-test.dat";
+var cborPath = 'path_to_my_app_storage/iotcon-server-test.dat';
</pre>
</li>
<li>
<p>Initialize Iotcon and set a human friendly name:</p>
<pre class="prettyprint">
tizen.iotcon.initialize(cborPath);
-tizen.iotcon.deviceName = "Device 1";
+tizen.iotcon.deviceName = 'Device 1';
</pre>
</li>
<li>
<p>On the server side, prepare a variable for storing the resource object and its attributes. The following example shows a door resource:</p>
<pre class="prettyprint">
var doorResource;
-var doorAttributes = {openstate: "open"};
+var doorAttributes = {openstate: 'open'};
</pre>
</li>
<li>
<p>Prepare handlers for the get, put, post, delete, and observing requests from the client.</p>
<p>The exact list of required handlers depends on the resource interfaces. The following example uses the "oic.if.b" interface.</p>
<pre class="prettyprint">
-var requestCallbacks =
-{
- onget: function(request) {/* Handler code */},
- onput: function(request) {/* Handler code */},
- onpost: function(request) {/* Handler code */},
- ondelete: function(request) {/* Handler code */},
- onobserving: function(request, observeType, observeId) {/* Handler code */}
+var requestCallbacks = {
+ onget: function(request) {/* Handler code */},
+ onput: function(request) {/* Handler code */},
+ onpost: function(request) {/* Handler code */},
+ ondelete: function(request) {/* Handler code */},
+ onobserving: function(request, observeType, observeId) {/* Handler code */}
}
</pre>
</li>
</ol>
<pre class="prettyprint">
-var requestCallbacks =
-{
- onget: function(request)
- {
- console.log("onget");
- var response = new tizen.Response(request);
- try
- {
- var representation = new tizen.Representation(doorResource.uriPath);
- representation.resourceTypes = doorResource.resourceTypes;
- representation.resourceInterfaces = doorResource.resourceInterfaces;
- representation.attributes = doorAttributes;
- response.representation = representation;
- response.result = "SUCCESS";
- }
- catch (err)
- {
- console.log(err.name + ": " + err.message);
- response.result = "ERROR";
- }
- response.send();
- }
+var requestCallbacks = {
+ onget: function(request) {
+ console.log('onget');
+ var response = new tizen.Response(request);
+ try {
+ var representation = new tizen.Representation(doorResource.uriPath);
+ representation.resourceTypes = doorResource.resourceTypes;
+ representation.resourceInterfaces = doorResource.resourceInterfaces;
+ representation.attributes = doorAttributes;
+ response.representation = representation;
+ response.result = 'SUCCESS';
+ } catch (err) {
+ console.log(err.name + ': ' + err.message);
+ response.result = 'ERROR';
+ }
+ response.send();
+ }
}
</pre>
</li>
<li>
<p>Create a resource using the prepared handlers, chosen resource path, types, and interfaces:</p>
<pre class="prettyprint">
-var uriPath = "/door";
-var resourceTypes = ["core.door"];
-var resourceInterfaces = ["oic.if.b"];
-var policy =
-{
- isObservable: true,
- isDiscoverable: true
+var uriPath = '/door';
+var resourceTypes = ['core.door'];
+var resourceInterfaces = ['oic.if.b'];
+var policy = {
+ isObservable: true,
+ isDiscoverable: true
};
-doorResource = iotServer.createResource(uriPath, resourceTypes, resourceInterfaces,
- requestCallbacks, policy);
+doorResource = iotServer.createResource(uriPath, resourceTypes, resourceInterfaces, requestCallbacks, policy);
</pre>
</li>
</ol>
<p>For managing secure virtual resources, a CBOR format file (Concise Binary Object Representation) must be
available, preferably in the application local storage. For more information on security, see <a href="https://wiki.iotivity.org/iotivity_security" target="_blank">Iotivity Security</a>.</p>
<pre class="prettyprint">
-var cborPath = "path_to_my_app_storage/iotcon-client-test.dat";
+var cborPath = 'path_to_my_app_storage/iotcon-client-test.dat';
</pre>
</li>
<li>
<p>Initialize Iotcon and set a human friendly name:</p>
<pre class="prettyprint">
tizen.iotcon.initialize(cborPath);
-tizen.iotcon.deviceName = "Device 2";
+tizen.iotcon.deviceName = 'Device 2';
</pre>
</li>
<li>
<p>The <code>hostAddress</code> value must be in the Constrained Application Protocol (CoAP) format (<code>coap(s)://address:port</code>), for example, <code>coaps://[fe80::ae5a:14ff:fe24:b8fe]:12345</code> or <code>coaps://192.168.1.10:12345</code>. The <code>null</code> value indicates that the client communicates with all nodes (multicast).</p>
<pre class="prettyprint">
var hostAddress = null;
-var connectivityType = "IP";
+var connectivityType = 'IP';
</pre>
</li>
<li>
<p>Prepare a query. You can search for specific <code>resourceType</code> and <code>resourceInterface</code> values, and add an attribute filter:</p>
<pre class="prettyprint">
-var query = {resourceType: "core.door"};
+var query = {resourceType: 'core.door'};
</pre>
<p>For more information, see the Query interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/iotcon.html#Query">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/iotcon.html#Query">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/iotcon.html#Query">TV</a> applications).</p>
</li>
</pre>
<p>The <code>foundSuccess</code> and <code>onerror</code> parameters are success and error callbacks for an async operation:</p>
<pre class="prettyprint">
-function onerror(err)
-{
- console.log("Failed to find resource: " + err.message);
+function onerror(err) {
+ console.log('Failed to find resource: ' + err.message);
}
</pre>
<p>The success callback lists information, types, and interfaces for every found remote resource:</p>
<pre class="prettyprint">
-function foundSuccess(resource)
-{
- if (resource)
- {
- console.log(resource.uriPath);
- console.log(resource.hostAddress);
- console.log(resource.deviceId);
- var resourceTypes = resource.resourceTypes;
- for (var i in resourceTypes)
- {
- console.log(resourceTypes[i]);
- }
- var resourceInterfaces = resource.resourceInterfaces;
- for (var i in resourceInterfaces)
- {
- console.log(resourceInterfaces[i]);
- }
- }
+function foundSuccess(resource) {
+ if (resource) {
+ console.log(resource.uriPath);
+ console.log(resource.hostAddress);
+ console.log(resource.deviceId);
+ var resourceTypes = resource.resourceTypes;
+ for (var i in resourceTypes) {
+ console.log(resourceTypes[i]);
+ }
+ var resourceInterfaces = resource.resourceInterfaces;
+ for (var i in resourceInterfaces) {
+ console.log(resourceInterfaces[i]);
+ }
+ }
}
</pre>
</li>
<li>
<p>Prepare the error and success callbacks:</p>
<pre class="prettyprint">
-function onerror(err)
-{
- console.log("Failed to find resource: " + err.message);
+function onerror(err) {
+ console.log('Failed to find resource: ' + err.message);
}
-function foundSuccess(platformInfo)
-{
- console.log(platformInfo.platformId);
- console.log(platformInfo.modelNumber);
- console.log(platformInfo.platformVersion);
- console.log(platformInfo.operatingSystemVersion);
- console.log(platformInfo.systemTime);
- /* Other PlatformInfo object attributes; see the API Reference for details */
+function foundSuccess(platformInfo) {
+ console.log(platformInfo.platformId);
+ console.log(platformInfo.modelNumber);
+ console.log(platformInfo.platformVersion);
+ console.log(platformInfo.operatingSystemVersion);
+ console.log(platformInfo.systemTime);
+ /* Other PlatformInfo object attributes; see the API Reference for details */
}
</pre>
</li>
<p>Prepare the server address, connectivity type, and query (with optional filters):</p>
<pre class="prettyprint">
/* hostAddress must be a valid IP address, or null for all nodes (multicast) */
-var hostAddress = "coaps://192.168.0.10:12345";
-var connectivityType = "IP";
+var hostAddress = 'coaps://192.168.0.10:12345';
+var connectivityType = 'IP';
/* null means no filter */
var query = null;
</pre>
<li>
<p>Get the platform information from the remote server:</p>
<pre class="prettyprint">
-client.findPlatformInfo(hostAddress, query, connectivityType,
- foundSuccess, onerror);
+client.findPlatformInfo(hostAddress, query, connectivityType, foundSuccess, onerror);
</pre>
<p>The success callback is called with the <code>PlatformInfo</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/iotcon.html#PlatformInfo">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/iotcon.html#PlatformInfo">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/iotcon.html#PlatformInfo">TV</a> applications) as a parameter. You can access the platform information in the object attributes.</p>
</li>
<li>
<p>Get the device information from the remote server:</p>
<pre class="prettyprint">
-client.findDeviceInfo(hostDeviceIpAddress, query, connectivityType,
- foundSuccess, onerror);
+client.findDeviceInfo(hostDeviceIpAddress, query, connectivityType, foundSuccess, onerror);
</pre>
<p>The success callback is called with the <code>DeviceInfo</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/iotcon.html#DeviceInfo">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/iotcon.html#DeviceInfo">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/iotcon.html#DeviceInfo">TV</a> applications) as a parameter. You can access the device information in the object attributes.</p>
</li>
<li>
<p>Prepare a callback for reading the attributes:</p>
<pre class="prettyprint">
-function onresponse(remoteResponse)
-{
- if (remoteResponse.result != "SUCCESS")
- {
- console.log("the result is not SUCCESS");
+function onresponse(remoteResponse) {
+ if (remoteResponse.result != 'SUCCESS') {
+ console.log('the result is not SUCCESS');
- return;
- }
+ return;
+ }
- var repr = remoteResponse.representation;
+ var repr = remoteResponse.representation;
- /* You can retrieve attributes from Representation object in RemoteResponse */
- for (var key in repr.attributes)
- {
- console.log(key + ": " + repr.attributes[key]);
- }
+ /* You can retrieve attributes from Representation object in RemoteResponse */
+ for (var key in repr.attributes) {
+ console.log(key + ': ' + repr.attributes[key]);
+ }
}
</pre>
</li>
<p>Once you have a <code>RemoteResource</code> object, use the <code>methodGet()</code> method to send a request to the server. For a list of resource attributes you can request, see the API Reference (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/iotcon.html#RemoteResource">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/iotcon.html#RemoteResource">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/iotcon.html#RemoteResource">TV</a> applications).</p>
<pre class="prettyprint">
/* filter results, query = null means no filter */
-query["filter"] = {openstate: "open"};
+query['filter'] = {openstate: 'open'};
resource.methodGet(onresponse, query, onerror);
</pre>
<p>As a result, the <code>onresponse</code> or (optional) <code>onerror</code> callback is called.</p>
<li>
<p>Prepare a callback that is called after the PUT request:</p>
<pre class="prettyprint">
-function onresponse(remoteResponse)
-{
- console.log("result is " + remoteResponse.result);
- /* remoteResponse.result is expected to be "RESOURCE_CHANGED" */
+function onresponse(remoteResponse) {
+ console.log('result is ' + remoteResponse.result);
+ /* remoteResponse.result is expected to be 'RESOURCE_CHANGED' */
}
</pre>
</li>
<p>Once you have a <code>RemoteResource</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/iotcon.html#RemoteResource">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/iotcon.html#RemoteResource">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/iotcon.html#RemoteResource">TV</a> applications), use the success callback to create a <code>Representation</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/iotcon.html#Representation">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/iotcon.html#Representation">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/iotcon.html#Representation">TV</a> applications). This object represents the changes in attributes, types, and interfaces.</p>
<pre class="prettyprint">
representation = new tizen.Representation(uriPath);
-representation.resourceTypes = ["core.door"];
-representation.attributes = {openstate: "closed"};
+representation.resourceTypes = ['core.door'];
+representation.attributes = {openstate: 'closed'};
</pre>
</li>
<li>
<p>Call the <code>methodPut()</code> method on the <code>RemoteResource</code> object:</p>
<pre class="prettyprint">
/* Optional filter, query = null means no filter */
-query["filter"] = {openstate: "open"}
+query['filter'] = {openstate: 'open'}
resource.methodPut(representation, onresponse, query, onerror);
</pre>
<p>After a successful request, the <code>onresponse</code> callback is called with the result and updated resource representation. In case of a failure, the (optional) <code>onerror</code> callback is called.</p>
<li>
<p>Prepare a callback for state change events:</p>
<pre class="prettyprint">
-function onchanged(isAlive)
-{
- if (isAlive == true)
- {
- console.log("Remote resource is alive");
- }
- else
- {
- console.log("Remote resource is lost");
- }
+function onchanged(isAlive) {
+ if (isAlive == true) {
+ console.log('Remote resource is alive');
+ } else {
+ console.log('Remote resource is lost');
+ }
}
</pre>
</li>
<h2 id="Managing_NFC_Conn" name="Managing_NFC_Conn">Managing NFC Connectivity</h2>
- <p>To use NFC, retrieve the default NFC adapter using the <code>getDefaultAdapter()</code> method of the <code>NFCAdapter</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCAdapter">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCAdapter">wearable</a> applications). You can enable and disable NFC using the <code>setPowered()</code> method.</p>
+ <p>To use NFC, retrieve the default NFC adapter using the <code>getDefaultAdapter()</code> method of the <code>NFCAdapter</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCAdapter">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCAdapter">wearable</a> applications).</p>
<div class="note">
<strong>Note</strong>
<ol>
<li><p>To get the default NFC adapter, use the <code>getDefaultAdapter()</code> method and prepare an <code>ApplicationControl</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControl">wearable</a> applications) to request the NFC switching operation:</p>
<pre class="prettyprint">
-var nfcSwitchAppControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/setting/nfc",
- null, null, null,
- [new tizen.ApplicationControlData("type", "nfc")]);
+var nfcSwitchAppControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/setting/nfc', null, null, null,
+ [new tizen.ApplicationControlData('type', 'nfc')]);
var adapter = tizen.nfc.getDefaultAdapter();
</pre></li>
<li>Define the event listener for the <code>launchAppControl()</code> method:
<pre class="prettyprint">
-function launchSuccess()
-{
- console.log("NFC Settings application has successfully launched.");
+function launchSuccess() {
+ console.log('NFC Settings application has successfully launched.');
}
-function launchError(error)
-{
- alert("An error occurred: " + error.name
- + ". Please enable NFC through the Settings application.");
+function launchError(error) {
+ alert('An error occurred: ' + error.name + '. Please enable NFC through the Settings application.');
}
</pre></li>
<li>Define the event handler for an application control, which implements the <code>ApplicationControlDataArrayReplyCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlDataArrayReplyCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControlDataArrayReplyCallback">wearable</a> applications):
<pre class="prettyprint">
-var serviceReply =
-{
- /* onsuccess is called when the launched application reports success */
- onsuccess: function(data)
- {
- if (adapter.powered)
- {
- console.log("NFC is successfully turned on.");
- }
- }
- /*
- onfailure is called when the launched application
- reports failure of the requested operation
- */
- onfailure: function()
- {
- alert("NFC Settings application reported failure.");
- }
+var serviceReply = {
+ /* onsuccess is called when the launched application reports success */
+ onsuccess: function(data) {
+ if (adapter.powered) {
+ console.log('NFC is successfully turned on.');
+ }
+ }
+ /*
+ onfailure is called when the launched application
+ reports failure of the requested operation
+ */
+ onfailure: function() {
+ alert('NFC Settings application reported failure.');
+ }
}
</pre></li>
<li>If necessary, request launching the NFC Settings with <code>nfcSwitchAppControl</code> as a parameter:
<pre class="prettyprint">
-if (adapter.powered)
-{
- console.log("NFC is already enabled");
-}
-else
-{
- console.log("Try to launch the NFC Settings application.");
- tizen.application.launchAppControl(nfcSwitchAppControl, null, launchSuccess,
- launchError, serviceReply);
+if (adapter.powered) {
+ console.log('NFC is already enabled');
+} else {
+ console.log('Try to launch the NFC Settings application.');
+ tizen.application.launchAppControl(nfcSwitchAppControl, null, launchSuccess, launchError, serviceReply);
}
</pre></li>
</ol>
</pre></li>
<li><p>Define the event handlers for NFC tag detection using the <code>NFCTagDetectCallback</code> listener interface:</p>
<pre class="prettyprint">
-var setTagDetect =
-{
- /* When an NFC tag is detected */
- onattach: function(nfcTag)
- {
- console.log("NFC Tag detected. Its type is: " + nfcTag.type);
- }
-
- /* When an NFC tag becomes unavailable */
- ondetach: function()
- {
- console.log("NFC Tag unavailable");
- }
+var setTagDetect = {
+ /* When an NFC tag is detected */
+ onattach: function(nfcTag) {
+ console.log('NFC Tag detected. Its type is: ' + nfcTag.type);
+ }
+
+ /* When an NFC tag becomes unavailable */
+ ondetach: function() {
+ console.log('NFC Tag unavailable');
+ }
}
</pre></li>
<li><p>Register the listener to use the defined event handlers.</p> <p>You can limit the listener to detect only specific NFC tag types by defining the tag types as the second parameter of the <code>setTagListener()</code> method. In the following example, only MIFARE tags are detected.</p>
<pre class="prettyprint">
/* Defines the tag types to be detected */
-var tagFilter = ["MIFARE_MINI", "MIFARE_1K", "MIFARE_4K",
- "MIFARE_ULTRA", "MIFARE_DESFIRE"];
+var tagFilter = ['MIFARE_MINI', 'MIFARE_1K', 'MIFARE_4K', 'MIFARE_ULTRA', 'MIFARE_DESFIRE'];
/* Registers the event listener */
nfcAdapter.setTagListener(setTagDetect, tagFilter);
<li><p>To create an NDEF URI record, create an <code>NDEFRecordURI</code> interface instance (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordURI">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecordURI">wearable</a> applications) and specify the URI parameter.</p>
<p>Additionally, you can create instances of the <code>NDEFRecord</code>, <code>NDEFRecordText</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordText">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecordText">wearable</a> applications), or <code>NDEFRecordMedia</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordMedia">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecordMedia">wearable</a> applications) interfaces based on the record type to be created.</p>
<pre class="prettyprint">
-var newRecord = new tizen.NDEFRecordURI("https://www.tizen.org/");
+var newRecord = new tizen.NDEFRecordURI('https://www.tizen.org/');
</pre></li>
<li><p>Create an <code>NDEFMessage</code> interface instance:</p>
<pre class="prettyprint">
<p>The <code>setReceiveNDEFListener()</code> method registers the <code>NDEFMessageReadCallback</code> listener interface, which is invoked when an NDEF message from a peer device is read.</p>
<pre class="prettyprint">
/* NDEFMessageReadCallback listener */
-function readMessage(message)
-{
- console.log("Record Count is " + message.recordCount);
+function readMessage(message) {
+ console.log('Record Count is ' + message.recordCount);
}
/* Set a listener to receive an NDEF message */
<p>The <code>readNDEF()</code> method registers the <code>NDEFMessageReadCallback</code> listener interface, which is invoked when an NDEF message is read.</p>
<pre class="prettyprint">
/* NDEFMessageReadCallback listener */
-function readMessage(message)
-{
- console.log("Record Count is " + message.recordCount);
+function readMessage(message) {
+ console.log('Record Count is ' + message.recordCount);
}
/* Check whether the NFC tag supports NDEF format */
-if (Tag.isSupportedNDEF)
-{
- /* Read NDEF data */
- Tag.readNDEF(readMessage);
+if (Tag.isSupportedNDEF) {
+ /* Read NDEF data */
+ Tag.readNDEF(readMessage);
}
</pre></li>
<li><p>To write data on an NFC tag, use the <code>writeNDEF()</code> method:</p>
<pre class="prettyprint">
var newMessage = new tizen.NDEFMessage();
-function writeCallback()
-{
- console.log("Success!");
+function writeCallback() {
+ console.log('Success!');
}
Tag.writeNDEF(newMessage, writeCallback);
</pre>
</pre></li>
<li>Use the <code>addCardEmulationModeChangeListener()</code> method of the <code>NFCAdapter</code> interface to register a listener to monitor the current card emulation mode:
<pre class="prettyprint">
-modeListenerId = adapter.addCardEmulationModeChangeListener(function(mode)
- {
- if (mode === "ALWAYS_ON")
- {
- console.log("We are ready to go now");
- }
- });
+modeListenerId = adapter.addCardEmulationModeChangeListener(function(mode) {
+ if (mode === 'ALWAYS_ON') {
+ console.log('We are ready to go now');
+ }
+});
</pre></li>
<li>To enable NFC card emulation, change the value of the <code>cardEmulationMode</code> attribute:
<pre class="prettyprint">
-adapter.cardEmulationMode = "ALWAYS_ON";
+adapter.cardEmulationMode = 'ALWAYS_ON';
</pre></li>
<li>To be notified when the type of an active NFC secure element changes, use the <code>addActiveSecureElementChangeListener()</code> method of the <code>NFCAdapter</code> interface:
<pre class="prettyprint">
-aseListenerId = adapter.addActiveSecureElementChangeListener(function(seType)
- {
- console.log("Active secure element is " + seType);
- });
+aseListenerId = adapter.addActiveSecureElementChangeListener(function(seType) {
+ console.log('Active secure element is ' + seType);
+});
</pre></li>
<li>To be notified when a NFC secure element transaction data is exchanged, use the <code>addTransactionEventListener()</code> method of the <code>NFCAdapter</code> interface:
<pre class="prettyprint">
-function onDetected(appletId, data)
-{
- console.log("NFC secure element transaction detected. Application: "
- + appletId + ". Protocol data: " + data);
+function onDetected(appletId, data) {
+ console.log('NFC secure element transaction detected. Application: ' + appletId + '. Protocol data: ' + data);
});
-transListenerId = adapter.addTransactionEventListener("UICC", onDetected);
+transListenerId = adapter.addTransactionEventListener('UICC', onDetected);
</pre></li>
<li>Remove the registered listeners when they are no longer necessary and disable NFC card emulation:
<pre class="prettyprint">
adapter.removeActiveSecureElementChangeListener(aseListenerId);
adapter.removeTransactionEventListener(transListenerId);
adapter.removeCardEmulationModeChangeListener(modeListenerId);
-adapter.cardEmulationMode = "OFF";
+adapter.cardEmulationMode = 'OFF';
</pre></li>
</ol>
<p>To tell the platform which AID groups are requested by the application, a metadata element must be included in the <code>config.xml</code> file:</p>
<pre class="prettyprint">
<?xml version="1.0" encoding="utf-8"?>
-<widget xmlns:tizen="http://tizen.org/ns/widgets"
- xmlns="http://www.w3.org/ns/widgets"
+<widget xmlns:tizen="http://tizen.org/ns/wdigets" xmlns="http://www.w3.org/ns/widgets"
id="http://yourdomain/NFCtest" version="1.0.0" viewmodes="maximized">
<profile name="wearable"/>
- <tizen:application id="ZmAk4fxZWY.NFCtest" package="ZmAk4fxZWY"
- required_version="2.3.1"/>
+ <tizen:application id="ZmAk4fxZWY.NFCtest" package="ZmAk4fxZWY" required_version="2.3.1"/>
<icon src="icon.png"/>
<name>NFCtest</name>
<tizen:privilege name="http://tizen.org/privilege/nfc.common"/>
var hceListenerId = 0;
var adapter = tizen.nfc.getDefaultAdapter();
-adapter.cardEmulationMode = "ALWAYS_ON";
+adapter.cardEmulationMode = 'ALWAYS_ON';
</pre></li>
<li>
<p>To detect the HCE event, use the <code>addHCEEventListener()</code> method of the <code>NFCAdapter</code> interface to register a listener.</p>
<p>Use the <code>sendHostAPDUResponse()</code> method of the <code>NFCAdapter</code> interface to send a host APDU response to a contactless front-end. (APDU - Application Protocol Data Unit - is defined in the ISO/IEC 7816-4 specification.)</p>
<pre class="prettyprint">
-var successCB = function()
-{
- console.log("Sending APDU response was successful.");
+var successCB = function() {
+ console.log('Sending APDU response was successful.');
};
-var errorCB = function()
-{
- console.log("Sending APDU response failed.");
+var errorCB = function() {
+ console.log('Sending APDU response failed.');
};
-hceListenerId = adapter.addHCEEventListener(function(event_data)
- {
- if (event_data.eventType == "ACTIVATED")
- {
- console.log("HCE activated");
- }
- else if (event_data.eventType == "DEACTIVATED")
- {
- console.log("HCE deactivated");
- }
- else if (event_data.eventType == "APDU_RECEIVED")
- {
- console.log("APDU received");
+hceListenerId = adapter.addHCEEventListener(function(event_data) {
+ if (event_data.eventType == 'ACTIVATED') {
+ console.log('HCE activated');
+ } else if (event_data.eventType == 'DEACTIVATED') {
+ console.log('HCE deactivated');
+ } else if (event_data.eventType == 'APDU_RECEIVED') {
+ console.log('APDU received');
var apdu_response = [0x00,0xA4,0x04,0x00,0x04,0x11,0x12, 0x13, 0x14];
adapter.sendHostAPDUResponse(apdu_response, successCB, errorCB);
- }
- });
+ }
+});
</pre></li>
<li>To register an AID for a specific category and secure element type, use the <code>registerAID()</code> method of the <code>NFCAdapter</code> interface:
<pre class="prettyprint">
-try
-{
- var aid = "ABC0012345";
- adapter.registerAID("HCE", aid, "PAYMENT")
-}
-catch (err)
-{
- console.log(err.name + ":" + err.message);
+try {
+ var aid = 'ABC0012345';
+ adapter.registerAID('HCE', aid, 'PAYMENT')
+} catch (err) {
+ console.log(err.name + ':' + err.message);
}
</pre></li>
<li>To retrieve the registered AIDs for a specific category and secure element type, use the <code>getAIDsForCategory()</code> method of the <code>NFCAdapter</code> interface:
<pre class="prettyprint">
-try
-{
- var successCallback = function(aid_datas)
- {
- for (var i = 0; i < aid_datas.length; i++)
- {
- console.log("SE Type is " + aid_datas[i].type);
- console.log("AID is " + aid_datas[i].aid);
- console.log("readonly: " + aid_datas[i].readOnly);
- }
- };
-
- var errorCallback = function(error)
- {
- console.log("getAIDsForCategory failed.");
- };
-
- adapter.getAIDsForCategory("HCE", "PAYMENT", successCallback, errorCallback);
-}
-catch (err)
-{
- console.log(err.name + ":" + err.message);
+try {
+ var successCallback = function(aid_datas) {
+ for (var i = 0; i < aid_datas.length; i++) {
+ console.log('SE Type is ' + aid_datas[i].type);
+ console.log('AID is ' + aid_datas[i].aid);
+ console.log('readonly: ' + aid_datas[i].readOnly);
+ }
+ };
+
+ var errorCallback = function(error) {
+ console.log('getAIDsForCategory failed.');
+ };
+
+ adapter.getAIDsForCategory('HCE', 'PAYMENT', successCallback, errorCallback);
+} catch (err) {
+ console.log(err.name + ':' + err.message);
}
</pre></li>
<li>Remove the registered listeners when they are no longer necessary, and disable NFC card emulation:
<pre class="prettyprint">
adapter.removeHCEEventListener(hceListenerId);
-adapter.cardEmulationMode = "OFF";
+adapter.cardEmulationMode = 'OFF';
</pre></li>
</ol>
<ol>
<li><p>To retrieve all the available secure element readers, use the <code>getReaders()</code> method of the <code>SEService</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#SEService">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#SEService">wearable</a> applications). The method registers the <code>ReaderArraySuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#ReaderArraySuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#ReaderArraySuccessCallback">wearable</a> applications), which is invoked when the list of available secure element readers has been successfully retrieved.</p>
<pre class="prettyprint">
-function success(readers)
-{
- for (var i = 0; i < readers.length; i++)
- {
- if (readers[i].isPresent)
- console.log("Reader Name: " + readers[i].getName());
- }
+function success(readers) {
+ for (var i = 0; i < readers.length; i++) {
+ if (readers[i].isPresent)
+ console.log('Reader Name: ' + readers[i].getName());
+ }
}
-tizen.seService.getReaders(success, function(err) {/* Error handling */});
+tizen.seService.getReaders(success, function(err) {
+ /* Error handling */
+});
</pre></li>
<li> <p>To receive reader change notifications, use the <code>registerSEListener()</code> method of the <code>SEService</code> interface:</p>
<ol type="a">
<li><p>Define a listener using the <code>SEChangeListener</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#SEChangeListener">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#SEChangeListener">wearable</a> applications):</p>
<pre class="prettyprint">
-var setSEChange =
-{
- onSEReady: function(reader)
- {
- console.log(reader.getName() + " is ready.");
- },
- onSENotReady: function(reader)
- {
- console.log(reader.getName() + " is not ready.");
- },
+var setSEChange = {
+ onSEReady: function(reader) {
+ console.log(reader.getName() + ' is ready.');
+ },
+ onSENotReady: function(reader) {
+ console.log(reader.getName() + ' is not ready.');
+ },
}
</pre></li>
<li><p>Register the listener:</p>
<ol>
<li><p>To open a session, use the <code>openSession()</code> method of the <code>Reader</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Reader">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#Reader">wearable</a> applications). The method registers the <code>SessionSuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#SessionSuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#SessionSuccessCallback">wearable</a> applications), which is invoked when a session on a specific reader is opened.</p>
<pre class="prettyprint">
-function successCB(session)
-{
- console.log("A session is open successfully");
+function successCB(session) {
+ console.log('A session is open successfully');
}
-function errorCB(err)
-{
- /* Error handling */
+function errorCB(err) {
+ /* Error handling */
}
reader.openSession(successCB, errorCB);
</pre></li>
<ol type="a">
<li><p>Open a basic channel with the <code>openBasicChannel()</code> method of the <code>Session</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Session">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#Session">wearable</a> applications). The method registers the <code>ChannelSuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#ChannelSuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#ChannelSuccessCallback">wearable</a> applications), which is invoked when a channel is opened to communicate with a specific applet.</p>
<pre class="prettyprint">
-function successCB(channel)
-{
- if (channel.isBasicChannel)
- console.log("A basic channel is opened successfully");
- else
- console.log("A logical channel is opened successfully");
+function successCB(channel) {
+ if (channel.isBasicChannel)
+ console.log('A basic channel is opened successfully');
+ else
+ console.log('A logical channel is opened successfully');
}
-function errorCB(err)
-{
- /* Error handling */
+function errorCB(err) {
+ /* Error handling */
}
/* This aid is for testing purposes for your applet */
-session.openBasicChannel([0x1, 0x2, 0x3, 0x4, 0x5, 0x6, 0x7,
- 0x8, 0x9, 0xa, 0xb, 0xc, 0xd, 0xe],
- successCB, errorCB);
+session.openBasicChannel([0x1, 0x2, 0x3, 0x4, 0x5, 0x6, 0x7, 0x8, 0x9, 0xa, 0xb, 0xc, 0xd, 0xe], successCB, errorCB);
</pre></li>
<li><p>Open a logical channel with the <code>openLogicalChannel()</code> method of the <code>Session</code> interface. As with a basic channel, the method registers the <code>ChannelSuccessCallback</code> interface.</p>
<pre class="prettyprint">
-session.openLogicalChannel([0x1, 0x2, 0x3, 0x4, 0x5, 0x6, 0x7,
- 0x8, 0x9, 0xa, 0xb, 0xc, 0xd, 0xe],
- successCB, errorCB);
+session.openLogicalChannel([0x1, 0x2, 0x3, 0x4, 0x5, 0x6, 0x7, 0x8, 0x9, 0xa, 0xb, 0xc, 0xd, 0xe], successCB, errorCB);
</pre></li>
</ol>
</li>
</pre></li>
<li><p>The <code>transmit()</code> method registers the <code>TransmitSuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#TransmitSuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#TransmitSuccessCallback">wearable</a> applications), which is invoked when a command has been successfully transmitted:</p>
<pre class="prettyprint">
-function successCB(response)
-{
- console.log("An APDU is transmitted successfully. The response is " + response);
+function successCB(response) {
+ console.log('An APDU is transmitted successfully. The response is ' + response);
}
-function errorCB(err)
-{
- /* Error handling */
+function errorCB(err) {
+ /* Error handling */
}
</pre></li>
</ol>
<h2 id="prerequisites">Prerequisites</h2>
<p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <code>deviceready</code> event occurs):</p>
<pre class="prettyprint">
-document.addEventListener("deviceready", onDeviceReady, false);
+document.addEventListener('deviceready', onDeviceReady, false);
-function onDeviceReady()
-{
- console.log("Cordova features now available");
- console.log("Connection type: " + navigator.connection.type);
+function onDeviceReady() {
+ console.log('Cordova features now available');
+ console.log('Connection type: ' + navigator.connection.type);
}
</pre>
<p>The <code>console</code> global object is available earlier, but it points to a default system console.</p>
<h2 id="loganderror" name="loganderror">Writing Log Messages and Errors</h2>
<p>To write simple log and error messages to the system console, use the <code>log()</code> and <code>error()</code> methods:</p>
<pre class="prettyprint">
-console.log("console.log works well");
-console.error("console.error works well");
+console.log('console.log works well');
+console.error('console.error works well');
</pre>
<div class="note">
<ul>
<li>To print without formatting:
<pre class="prettyprint">
-var john = {name: "John", surname: "Doe"};
+var john = {name: 'John', surname: 'Doe'};
console.dir(john.name);
</pre></li>
<li>To print with formatting, use <code>%o</code>:
<pre class="prettyprint">
-var john = {name: "John", surname: "Doe"};
-console.dir("my object %o", john);
+var john = {name: 'John', surname: 'Doe'};
+console.dir('my object %o', john);
</pre></li>
</ul>
<ol>
<li>Start the timer and give it a label (a string), which is used to identify the timer:
<pre class="prettyprint">
-console.time("Big array initialization");
+console.time('Big array initialization');
</pre></li>
<li>Perform some operation:
<pre class="prettyprint">
var array = new Array(1000000);
-for (var i = array.length - 1; i >= 0; i -= 1)
-{
- array[i] = new Object();
-};
+for (var i = array.length - 1; i >= 0; i -= 1) {
+ array[i] = new Object();
+}
</pre></li>
<li>Stop the timer by passing the same label to the <code>timeEnd()</code> method:
<pre class="prettyprint">
-console.timeEnd("Big array initialization");
+console.timeEnd('Big array initialization');
</pre>
<p>The following output is shown in the system console:</p>
<pre class="prettyprint">
<strong>Note</strong>
To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <code>deviceready</code> event occurs):
<pre class="prettyprint">
-document.addEventListener("deviceready", onDeviceReady, false);
+document.addEventListener('deviceready', onDeviceReady, false);
-function onDeviceReady()
-{
- console.log("Cordova features now available");
- console.log("Connection type: " + navigator.connection.type);
+function onDeviceReady() {
+ console.log('Cordova features now available');
+ console.log('Connection type: ' + navigator.connection.type);
}
</pre>
</div>
<h2 id="prerequisites">Prerequisites</h2>
<p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <code>deviceready</code> event occurs):</p>
<pre class="prettyprint">
-document.addEventListener("deviceready", onDeviceReady, false);
+document.addEventListener('deviceready', onDeviceReady, false);
-function onDeviceReady()
-{
- console.log("Cordova features now available");
+function onDeviceReady() {
+ console.log('Cordova features now available');
}
</pre>
<ol>
<li><p>Prepare a handler for the <code>deviceready</code> event:</p>
<pre class="prettyprint">
-function onDeviceReady()
-{
- /* Cordova is ready */
-
- console.log("Cordova version: " + device.cordova);
- console.log("Model name: " + device.model);
- console.log("Platform: " + device.platform);
- console.log("OS version: " + device.version);
- console.log("Device UUID: " + device.uuid);
+function onDeviceReady() {
+ /* Cordova is ready */
+
+ console.log('Cordova version: ' + device.cordova);
+ console.log('Model name: ' + device.model);
+ console.log('Platform: ' + device.platform);
+ console.log('OS version: ' + device.version);
+ console.log('Device UUID: ' + device.uuid);
}
</pre>
<p>UUID is a unique identifier for a device, and can be the device IMEI (International Mobile Equipment Identity).</p>
</li>
<li>Wait for the <code>deviceready</code> event:
<pre class="prettyprint">
-document.addEventListener("deviceready", onDeviceReady);
+document.addEventListener('deviceready', onDeviceReady);
</pre></li>
</ol>
<h2 id="prerequisites">Prerequisites</h2>
<p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <code>deviceready</code> event occurs):</p>
<pre class="prettyprint">
-document.addEventListener("deviceready", onDeviceReady, false);
+document.addEventListener('deviceready', onDeviceReady, false);
-function onDeviceReady()
-{
- console.log("Cordova features now available");
+function onDeviceReady() {
+ console.log('Cordova features now available');
}
</pre>
<ol>
<li><p>Define a callback method to be invoked with the current acceleration values:</p>
<pre class="prettyprint">
-function onSuccess(acceleration)
-{
- console.log('Acceleration X: ' + acceleration.x + '\n' +
- 'Acceleration Y: ' + acceleration.y + '\n' +
- 'Acceleration Z: ' + acceleration.z + '\n' +
- 'Timestamp: ' + acceleration.timestamp);
+function onSuccess(acceleration) {
+ console.log('Acceleration X: ' + acceleration.x + '\n' +
+ 'Acceleration Y: ' + acceleration.y + '\n' +
+ 'Acceleration Z: ' + acceleration.z + '\n' +
+ 'Timestamp: ' + acceleration.timestamp);
}
</pre></li>
<li><p>Define a callback method to be invoked when errors occur:</p>
<pre class="prettyprint">
-function onError()
-{
- console.log('onError!');
+function onError() {
+ console.log('onError!');
}
</pre></li>
<li><p>Call the <code>getCurrentAcceleration()</code> method and pass the callbacks:</p>
<ol>
<li><p>Define a callback method to be invoked with the current acceleration values:</p>
<pre class="prettyprint">
-function onSuccess(acceleration)
-{
- console.log('Acceleration X: ' + acceleration.x + '\n' +
- 'Acceleration Y: ' + acceleration.y + '\n' +
- 'Acceleration Z: ' + acceleration.z + '\n' +
- 'Timestamp: '+ acceleration.timestamp);
- console.log('Please wait 3 seconds for the next measurement...');
+function onSuccess(acceleration) {
+ console.log('Acceleration X: ' + acceleration.x + '\n' +
+ 'Acceleration Y: ' + acceleration.y + '\n' +
+ 'Acceleration Z: ' + acceleration.z + '\n' +
+ 'Timestamp: ' + acceleration.timestamp);
+ console.log('Please wait 3 seconds for the next measurement...');
}
</pre></li>
<li><p>Define a callback method to be invoked when errors occur:</p>
<pre class="prettyprint">
-function onError()
-{
- console.log('onError!');
+function onError() {
+ console.log('onError!');
}
</pre></li>
<li>
<h2 id="prerequisites">Prerequisites</h2>
<p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <code>deviceready</code> event occurs):</p>
<pre class="prettyprint">
-document.addEventListener("deviceready", onDeviceReady, false);
+document.addEventListener('deviceready', onDeviceReady, false);
-function onDeviceReady()
-{
- console.log("Cordova features now available");
+function onDeviceReady() {
+ console.log('Cordova features now available');
}
</pre>
<li><p>Define a callback method to be invoked when the user closes the alert.</p>
<p>The callback has no parameters.</p>
<pre class="prettyprint">
-var alertDismissed = function()
-{
- console.log('Alert was dismissed');
+var alertDismissed = function() {
+ console.log('Alert was dismissed');
};
</pre>
</li>
<li><p>Define a callback method to be invoked when the user clicks a button.</p>
<p>The callback has 1 parameter: the index of the pressed button, or 0, if the dialog is dismissed without a button press.</p>
<pre class="prettyprint">
-var confirmCallback = function(buttonIndex)
-{
- console.log('Selected button was ' + buttonIndex);
+var confirmCallback = function(buttonIndex) {
+ console.log('Selected button was ' + buttonIndex);
};
</pre>
</li>
<p>The callback has 1 parameter: the <code>PromptData</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/dialogs.html#PromptData">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/dialogs.html#PromptData">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/dialogs.html#PromptData">TV</a> applications) containing the user input and pressed button index.</p>
<pre class="prettyprint">
-var promptCallback = function(results)
-{
- console.log('User entered a value ' + results.input1
- + ', and selected option ' + results.buttonIndex);
+var promptCallback = function(results) {
+ console.log('User entered a value ' + results.input1 + ', and selected option ' + results.buttonIndex);
};
</pre>
</li>
<h2 id="prerequisites">Prerequisites</h2>
<p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <code>deviceready</code> event occurs):</p>
<pre class="prettyprint">
-document.addEventListener("deviceready", onDeviceReady, false);
+document.addEventListener('deviceready', onDeviceReady, false);
-function onDeviceReady()
-{
- console.log("Cordova features now available");
+function onDeviceReady() {
+ console.log('Cordova features now available');
}
</pre>
<p>Alternatively, you can add the event listener in the <code><body></code> element onload handler:</p>
<pre class="prettyprint">
-window.onload = function()
-{
- document.addEventListener("deviceready", onDeviceReady);
+window.onload = function() {
+ document.addEventListener('deviceready', onDeviceReady);
};
</pre>
<p>The applications typically use the <code>document.addEventListener()</code> method to attach an event listener once the <code>deviceready</code> event fires. This means that event listeners for other events (such as <code>pause</code>, <code>resume</code>, and <code>backbutton</code>) are added during or after the <code>deviceready</code> event handler:</p>
<pre class="prettyprint">
-document.addEventListener("deviceready", onDeviceReady, false);
+document.addEventListener('deviceready', onDeviceReady, false);
-function onDeviceReady()
-{
- document.addEventListener("pause", onPause);
- document.addEventListener("volumeupbutton", onVolumeUp);
+function onDeviceReady() {
+ document.addEventListener('pause', onPause);
+ document.addEventListener('volumeupbutton', onVolumeUp);
}
-function onPause()
-{
- console.log("Application has been put into the background");
+function onPause() {
+ console.log('Application has been put into the background');
}
-function onVolumeUp()
-{
- console.log("Volume up button pressed");
+function onVolumeUp() {
+ console.log('Volume up button pressed');
}
</pre>
<ol>
<li><p>Define the event handlers for the <code>pause</code> and <code>resume</code> events:</p>
<pre class="prettyprint">
-function onPause()
-{
- console.log("Application paused");
+function onPause() {
+ console.log('Application paused');
}
-function onResume()
-{
- console.log("Application resumed");
+function onResume() {
+ console.log('Application resumed');
}
</pre>
</li>
<li><p>In the <code>deviceready</code> event handler, <a href="#add">add the listeners</a>:</p>
<pre class="prettyprint">
-document.addEventListener("pause", onPause);
-document.addEventListener("resume", onResume);
+document.addEventListener('pause', onPause);
+document.addEventListener('resume', onResume);
</pre>
</li>
</ol>
<ol>
<li><p>Define the event handlers for the <code>menubutton</code>, <code>volumeupbutton</code>, and <code>volumeupbutton</code> events:</p>
<pre class="prettyprint">
-function onVolumeChanged()
-{
- console.log("Volume changed");
+function onVolumeChanged() {
+ console.log('Volume changed');
}
-function onMenuButton()
-{
- console.log("Menu button pressed");
+function onMenuButton() {
+ console.log('Menu button pressed');
}
</pre>
</li>
<li><p>In the <code>deviceready</code> event handler, <a href="#add">add the listeners</a>.</p>
<p>In this example, the same listener is used for both the volume up and down buttons.</p>
<pre class="prettyprint">
-document.addEventListener("menubutton", onMenuButton);
-document.addEventListener("volumeupbutton", onVolumeChanged);
-document.addEventListener("volumedownbutton", onVolumeChanged);
+document.addEventListener('menubutton', onMenuButton);
+document.addEventListener('volumeupbutton', onVolumeChanged);
+document.addEventListener('volumedownbutton', onVolumeChanged);
</pre>
</li>
</ol>
<li>
<p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <code>deviceready</code> event occurs):</p>
<pre class="prettyprint">
-document.addEventListener("deviceready", onDeviceReady, false);
+document.addEventListener('deviceready', onDeviceReady, false);
-function onDeviceReady()
-{
- console.log("Cordova features now available");
+function onDeviceReady() {
+ console.log('Cordova features now available');
}
</pre>
</li>
<li><p>By using the <code>requestFileSystem()</code> global async method:</p>
<ol><li>Define a callback for handling the success and failure of the operation:
<pre class="prettyprint">
-successCallback = function(fs)
-{
- console.log('File system name ' + fs.name);
+successCallback = function(fs) {
+ console.log('File system name ' + fs.name);
};
-errorCallback = function(err)
-{
- console.log(err.code);
+errorCallback = function(err) {
+ console.log(err.code);
};
</pre></li>
<li>Call the method with the created callbacks. The filesystem request can use a temporary or persistent filesystem with a defined size.
<p>This method is used to retrieve a <code>DirectoryEntry</code> objects (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html#DirectoryEntry">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/file.html#DirectoryEntry">wearable</a>, or <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/file.html#DirectoryEntry">TV</a> applications) or <code>FileEntry</code> objects (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html#FileEntry">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/file.html#FileEntry">wearable</a>, or <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/file.html#FileEntry">TV</a> applications) using a local URI.</p>
<ol><li>Define the callbacks:
<pre class="prettyprint">
-successCallback = function(entry)
-{
- console.log('Entry name ' + entry.name);
+successCallback = function(entry) {
+ console.log('Entry name ' + entry.name);
};
-errorCallback = function(err)
-{
- console.log(err.code);
+errorCallback = function(err) {
+ console.log(err.code);
};
</pre></li>
<li>Call the method with the provided valid URI for an existing file or directory:
<ul>
<li>To create a directory, you can use the <code>getDirectory()</code> method:
<pre class="prettyprint">
-requestFileSystem(TEMPORARY, 100, function(fs)
- {
- fs.root.getDirectory("ert", {create:true}, function(dir)
- {
- console.log('Created dir: ' + dir.name);
- })
- });
+requestFileSystem(TEMPORARY, 100, function(fs) {
+ fs.root.getDirectory('ert', {create:true}, function(dir) {
+ console.log('Created dir: ' + dir.name);
+ });
+});
</pre>
<p>If the third parameter is <code>{create:false}</code> or <code>NULL</code>, the entry of the existing directory is returned in the success callback.</p>
<li>To create a file, use the <code>getFile()</code> method:
<pre class="prettyprint">
-requestFileSystem(TEMPORARY, 100, function(fs)
- {
- fs.root.getFile("qa.txt", {create:true}, function(file)
- {
- console.log('Created file: ' + file.name);
- });
- });
+requestFileSystem(TEMPORARY, 100, function(fs) {
+ fs.root.getFile('qa.txt', {create:true}, function(file) {
+ console.log('Created file: ' + file.name);
+ });
+});
</pre>
<p>Similarly as when creating a directory, if the third parameter is <code>{create:false}</code> or <code>NULL</code>, the entry of the existing file is returned in the success callback.</p>
<li>To delete a directory and all of its content, you can use the <code>removeRecursively()</code> method:
<pre class="prettyprint">
-requestFileSystem(TEMPORARY, 100, function(fs)
- {
- fs.root.getDirectory("testDirectory", {create:true}, function(directoryEntry)
- {
- directoryEntry.removeRecursively(function()
- {
- console.log("success");
- });
- });
- });
+requestFileSystem(TEMPORARY, 100, function(fs) {
+ fs.root.getDirectory('testDirectory', {create:true}, function(directoryEntry) {
+ directoryEntry.removeRecursively(function() {
+ console.log('success');
+ });
+ });
+});
</pre>
<p>The following output is shown in the system log:</p>
<li>To read entries, first create a reader with the <code>createReader()</code> method:
<pre class="prettyprint">
-requestFileSystem(TEMPORARY, 100, function(entry)
- {
- entry.root.getDirectory("MyDocument", {create:true}, function(dirEntry)
- {
- var directoryReader = dirEntry.createReader();
- });
- });
+requestFileSystem(TEMPORARY, 100, function(entry) {
+ entry.root.getDirectory('MyDocument', {create:true}, function(dirEntry) {
+ var directoryReader = dirEntry.createReader();
+ });
+});
</pre>
<p>With the reader, you can read the next block of entries from the current directory with the <code>readEntries()</code> method:</p>
<pre class="prettyprint">
-requestFileSystem(TEMPORARY, 100, function(fs)
- {
- var a = fs.root.createReader();
- a.readEntries(function successCallback(entries)
- {
- console.log("success");
- });
- });
+requestFileSystem(TEMPORARY, 100, function(fs) {
+ var a = fs.root.createReader();
+ a.readEntries(function successCallback(entries) {
+ console.log('success');
+ });
+});
</pre>
<p>The following output is shown in the system log:</p>
<ul>
<li>To look up metadata about an entry, you can use the <code>getMetadata()</code> method:
<pre class="prettyprint">
-requestFileSystem(TEMPORARY, 100, function(fs)
- {
- fs.root.getMetadata(function(metadata)
- {
- /* Get metadata successfully */
- console.log("Last modification time: " + metadata.modificationTime);
- });
- });
+requestFileSystem(TEMPORARY, 100, function(fs) {
+ fs.root.getMetadata(function(metadata) {
+ /* Get metadata successfully */
+ console.log('Last modification time: ' + metadata.modificationTime);
+ });
+});
</pre>
<p>The following output is shown in the system log:</p>
<li>To move an entry to a different location in the file system, you can use the <code>moveTo()</code> method:
<pre class="prettyprint">
-successCallback = function(entry) {console.log('Full path to the moved file: '
- + entry.fullPath)};
-requestFileSystem(TEMPORARY, 100, function(fs)
- {
- fs.root.getDirectory('testDirectory', {create:true}, function(direntry)
- {
- fs.root.getFile("aa.txt", {create:true}, function(fileentry)
- {
- console.log('Full path before move: ' + fileentry.fullPath);
- fileentry.moveTo(direntry, 'newname.txt', successCallback);
- });
- });
+successCallback = function(entry) {
+ console.log('Full path to the moved file: ' + entry.fullPath)
+};
+requestFileSystem(TEMPORARY, 100, function(fs) {
+ fs.root.getDirectory('testDirectory', {create:true}, function(direntry) {
+ fs.root.getFile('aa.txt', {create:true}, function(fileentry) {
+ console.log('Full path before move: ' + fileentry.fullPath);
+ fileentry.moveTo(direntry, 'newname.txt', successCallback);
+ });
+ });
});
</pre>
<li>To copy an entry to a different location on the file system, you can use the <code>copyTo()</code> method:
<pre class="prettyprint">
-successCallback = function(entry) {console.log('Full path to the copied file: '
- + entry.fullPath);};
-requestFileSystem(TEMPORARY, 100, function(fs)
- {
- fs.root.getDirectory('testDirectory', {create:true}, function(direntry)
- {
- fs.root.getFile("test.txt", {create:true}, function(fileentry)
- {
- fileentry.copyTo(direntry, 'newname.txt', successCallback);
- });
- });
- });
+successCallback = function(entry) {
+ console.log('Full path to the copied file: ' + entry.fullPath);
+};
+requestFileSystem(TEMPORARY, 100, function(fs) {
+ fs.root.getDirectory('testDirectory', {create:true}, function(direntry) {
+ fs.root.getFile('test.txt', {create:true}, function(fileentry) {
+ fileentry.copyTo(direntry, 'newname.txt', successCallback);
+ });
+ });
+});
</pre>
<p>The following output is shown in the system log:</p>
<li>To look up the parent directory entry containing the current entry, you can use the <code>getParent()</code> method:
<pre class="prettyprint">
-requestFileSystem(TEMPORARY, 100, function(fs)
- {
- fs.root.getParent(function(entry)
- {
- console.log("success");
- });
- });
+requestFileSystem(TEMPORARY, 100, function(fs) {
+ fs.root.getParent(function(entry) {
+ console.log('success');
+ });
+});
</pre>
<p>If the entry is the root of its filesystem, its parent is itself.</p>
<li>To delete a file or directory, you can use the <code>remove()</code> method:
<pre class="prettyprint">
-requestFileSystem(TEMPORARY, 100, function(fs)
- {
- fs.root.getFile('test.txt', {create: true}, function(fileEntry)
- {
- fileEntry.remove(function()
- {
- console.log("success");
- });
- });
- });
+requestFileSystem(TEMPORARY, 100, function(fs) {
+ fs.root.getFile('test.txt', {create: true}, function(fileEntry) {
+ fileEntry.remove(function() {
+ console.log('success');
+ });
+ });
+});
</pre>
<div class="note">
<li>To return a URL that can be used to identify the entry, you can use the <code>toURL()</code> method:
<pre class="prettyprint">
-requestFileSystem(TEMPORARY, 100, function(fs)
- {
- fs.root.getDirectory('testDirectory', {create:true}, function(entry)
- {
- var url = entry.toURL();
- console.log('URL: ' + url);
- });
- });
+requestFileSystem(TEMPORARY, 100, function(fs) {
+ fs.root.getDirectory('testDirectory', {create:true}, function(entry) {
+ var url = entry.toURL();
+ console.log('URL: ' + url);
+ });
+});
</pre>
<p>The following output is shown in the system log:</p>
<li>To create a <code>FileWriter</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/file.html#FileWriter">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/file.html#FileWriter">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/file.html#FileWriter">TV</a> applications), use the <code>createWriter()</code> method:
<pre class="prettyprint">
var f; /* Must be a FileEntry object resolved using the methods presented before */
-f.createWriter(function(fileWriter)
- {
- console.log('created fileWriter object for ' + fileWriter.fileName);
- });
+f.createWriter(function(fileWriter) {
+ console.log('created fileWriter object for ' + fileWriter.fileName);
+});
</pre>
<p>The following output is shown in the system log:</p>
<pre class="prettyprint">
var f; /* Must be a FileEntry object resolved using methods presented before */
-f.file(function(file)
- {
- console.log('created file object for ' + file.name);
- });
+f.file(function(file) {
+ console.log('created file object for ' + file.name);
+});
</pre>
<p>The following output is shown in the system log:</p>
<pre class="prettyprint">
var blob = new Blob(['abc']);
var fileReader = new FileReader();
-fileReader.onload = function()
-{
- console.log('Loaded, result = ' + fileReader.result);
+fileReader.onload = function() {
+ console.log('Loaded, result = ' + fileReader.result);
};
fileReader.readAsDataURL(blob);
</pre>
<pre class="prettyprint">
var blob = new Blob(['abc']);
var fileReader = new FileReader();
-fileReader.onload = function()
-{
- console.log('Loaded, result = ' + fileReader.result);
+fileReader.onload = function() {
+ console.log('Loaded, result = ' + fileReader.result);
};
fileReader.readAsText(blob);
</pre>
<pre class="prettyprint">
var blob = new Blob(['abc']);
var fileReader = new FileReader();
-fileReader.onload = function()
-{
- console.log('Loaded, result = ' + fileReader.result);
+fileReader.onload = function() {
+ console.log('Loaded, result = ' + fileReader.result);
};
fileReader.readAsBinaryString(blob);
</pre>
<pre class="prettyprint">
var blob = new Blob(['abc']);
var fileReader = new FileReader();
-fileReader.onload = function()
-{
- resultValue = fileReader.result;
- console.log("Result: " + resultValue.toString() + ' '
- + 'ByteLength: ' + resultValue.byteLength);
+fileReader.onload = function() {
+ resultValue = fileReader.result;
+ console.log('Result: ' + resultValue.toString() + ' ' + 'ByteLength: ' + resultValue.byteLength);
};
fileReader.readAsArrayBuffer(blob);
</pre>
<pre class="prettyprint">
var blob = new Blob(['abc']);
var fileReader = new FileReader();
-fileReader.onload = function()
-{
- console.log('Loaded');
+fileReader.onload = function() {
+ console.log('Loaded');
};
-fileReader.onabort = function()
-{
- console.log('aborted');
+fileReader.onabort = function() {
+ console.log('aborted');
};
fileReader.readAsDataURL(blob);
fileReader.abort();
<li>To write data to a file, you can use the <code>write()</code> method:
<pre class="prettyprint">
-successCallback = function(writer)
-{
- writer.onwrite = function(evt)
- {
- console.log('write success');
- };
- writer.write('some sample text');
+successCallback = function(writer) {
+ writer.onwrite = function(evt) {
+ console.log('write success');
+ };
+ writer.write('some sample text');
};
-errorCallback = function(err)
-{
- console.log(err.code);
+errorCallback = function(err) {
+ console.log(err.code);
};
/* Entry is a FileEntry object retrieved by getFile() of the DirectoryEntry interface */
entry.createWriter(successCallback, errorCallback);
<li>To move the file pointer to a specified byte, you can use the <code>seek()</code> method:
<pre class="prettyprint">
-successCallback = function(writer)
-{
- /* Fast forwards the file pointer to the end of file */
- writer.seek(writer.length);
+successCallback = function(writer) {
+ /* Fast forwards the file pointer to the end of file */
+ writer.seek(writer.length);
};
-errorCallback = function(err)
-{
- console.log(err.code);
+errorCallback = function(err) {
+ console.log(err.code);
};
/* Entry is a FileEntry object retrieved by getFile() of the DirectoryEntry interface */
<li>To shorten the file to the specified length, you can use the <code>truncate()</code> method:
<pre class="prettyprint">
-successCallback = function(writer)
-{
- writer.onwrite = function(evt)
- {
- console.log('truncate success');
- };
- writer.truncate(10);
+successCallback = function(writer) {
+ writer.onwrite = function(evt) {
+ console.log('truncate success');
+ };
+ writer.truncate(10);
};
-errorCallback = function(err)
-{
- console.log(err.code);
+errorCallback = function(err) {
+ console.log(err.code);
};
/* Entry is a FileEntry object retrieved by getFile() of the DirectoryEntry interface */
<li>To abort writing a file, you can use the <code>abort()</code> method:
<pre class="prettyprint">
-successCallback = function(writer)
-{
- writer.onwrite = function(evt)
- {
- console.log('write success');
- };
- writer.onabort = function(e)
- {
- console.log('abort');
- };
- writer.write('some sample text');
- writer.abort();
+successCallback = function(writer) {
+ writer.onwrite = function(evt) {
+ console.log('write success');
+ };
+ writer.onabort = function(e) {
+ console.log('abort');
+ };
+ writer.write('some sample text');
+ writer.abort();
};
-errorCallback = function(err)
-{
- console.log(err.code);
+errorCallback = function(err) {
+ console.log(err.code);
};
/* Entry is a FileEntry object retrieved by getFile() of the DirectoryEntry interface */
<li>
<p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <code>deviceready</code> event occurs):</p>
<pre class="prettyprint">
-document.addEventListener("deviceready", onDeviceReady, false);
+document.addEventListener('deviceready', onDeviceReady, false);
-function onDeviceReady()
-{
- console.log("Cordova features now available");
+function onDeviceReady() {
+ console.log('Cordova features now available');
}
</pre>
</li>
var fileTransfer = new FileTransfer();
var uri = encodeURI('http://some.server.com/download.php');
-fileTransfer.download(uri, destinationURL, function(entry)
- {
- console.log('download complete: ' + entry.toURL());
- }, function(error)
- {
- console.log('download error source ' + error.source);
- console.log('download error target ' + error.target);
- console.log('upload error code' + error.code);
- }, false,
- {
- headers:
- {
- 'Authorization': 'Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=='
- }
- });
+fileTransfer.download(uri, destinationURL, function(entry) {
+ console.log('download complete: ' + entry.toURL());
+}, function(error) {
+ console.log('download error source ' + error.source);
+ console.log('download error target ' + error.target);
+ console.log('upload error code' + error.code);
+}, false, {
+ headers: {
+ 'Authorization': 'Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=='
+ }
+});
</pre>
<p>The following output is shown in the system log:</p>
<pre class="prettyprint">
/* File must exist before the operation */
var fileURL;
-var win = function(r)
-{
- console.log('Code = ' + r.responseCode);
- console.log('Response = ' + r.response);
- console.log('Sent = ' + r.bytesSent);
-}
+var win = function(r) {
+ console.log('Code = ' + r.responseCode);
+ console.log('Response = ' + r.response);
+ console.log('Sent = ' + r.bytesSent);
+};
-var fail = function(error)
-{
- alert('An error has occurred: Code = ' + error.code);
- console.log('upload error source ' + error.source);
- console.log('upload error target ' + error.target);
-}
+var fail = function(error) {
+ alert('An error has occurred: Code = ' + error.code);
+ console.log('upload error source ' + error.source);
+ console.log('upload error target ' + error.target);
+};
var ft = new FileTransfer();
ft.upload(fileURL, encodeURI('http://some.server.com/upload.php'), win, fail);
/* Valid URL needed, such as cdvfile://localhost/persistent/path/to/file.txt */
var fileURL;
-var win = function(r)
-{
- console.log('Should not be called.');
-}
+var win = function(r) {
+ console.log('Should not be called.');
+};
-var fail = function(error)
-{
- /* error.code == FileTransferError.ABORT_ERR */
- alert('An error has occurred: Code = ' + error.code);
- console.log('upload error source ' + error.source);
- console.log('upload error target ' + error.target);
+var fail = function(error) {
+ /* error.code == FileTransferError.ABORT_ERR */
+ alert('An error has occurred: Code = ' + error.code);
+ console.log('upload error source ' + error.source);
+ console.log('upload error target ' + error.target);
};
var ft = new FileTransfer();
/* Valid URL needed, such as cdvfile://localhost/persistent/path/to/file.txt */
var fileURL;
-var win = function(r)
-{
- console.log('Success. File uploaded.');
-}
+var win = function(r) {
+ console.log('Success. File uploaded.');
+};
-var fail = function(error)
-{
- /* error.code == FileTransferError.ABORT_ERR */
- alert('An error has occurred: Code = ' + error.code);
- console.log('upload error source ' + error.source);
- console.log('upload error target ' + error.target);
+var fail = function(error) {
+ /* error.code == FileTransferError.ABORT_ERR */
+ alert('An error has occurred: Code = ' + error.code);
+ console.log('upload error source ' + error.source);
+ console.log('upload error target ' + error.target);
};
var ft = new FileTransfer();
-ft.onprogress = function(event)
-{
- console.log('uploaded: ' + event.loaded);
+ft.onprogress = function(event) {
+ console.log('uploaded: ' + event.loaded);
};
ft.upload(fileURL, encodeURI('http://some.server.com/upload.php'), win, fail);
<h2 id="prerequisites">Prerequisites</h2>
<p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <code>deviceready</code> event occurs):</p>
<pre class="prettyprint">
-document.addEventListener("deviceready",
- onDeviceReady, false);
+document.addEventListener('deviceready', onDeviceReady, false);
-function onDeviceReady()
-{
- console.log("Cordova features now available");
+function onDeviceReady() {
+ console.log('Cordova features now available');
}
</pre>
<h2 id="current_language">Retrieving the Current Language</h2>
<p>To get the current BCP 47 language identifier:</p>
<pre class="prettyprint">
-navigator.globalization.getPreferredLanguage(function(language)
- {
- console.log('Language: ' + language.value);
- }, function() {console.log('Error getting language.');});
+navigator.globalization.getPreferredLanguage(function(language) {
+ console.log('Language: ' + language.value);
+}, function() {
+ console.log('Error getting language.');
+});
</pre>
<p>The following output is shown in the system log:</p>
<p>To get the current BCP 47 locale identifier:
</p>
<pre class="prettyprint">
-navigator.globalization.getLocaleName(function(locale)
- {
- console.log('Locale: ' + locale.value);
- }, function() {console.log('Error getting locale.');});
+navigator.globalization.getLocaleName(function(locale) {
+ console.log('Locale: ' + locale.value);
+}, function() {
+ console.log('Error getting locale.');
+});
</pre>
<p>The following output is shown in the system log:</p>
</ul>
<pre class="prettyprint">
-navigator.globalization.getCurrencyPattern('USD', function(pattern)
- {
- console.log('pattern: ' + pattern.pattern);
- console.log('code: ' + pattern.code);
- console.log('fraction: ' + pattern.fraction);
- console.log('rounding: ' + pattern.rounding);
- console.log('decimal: ' + pattern.decimal);
- console.log('grouping: ' + pattern.grouping);
- }, function() {console.log('Error getting pattern.');});
+navigator.globalization.getCurrencyPattern('USD', function(pattern) {
+ console.log('pattern: ' + pattern.pattern);
+ console.log('code: ' + pattern.code);
+ console.log('fraction: ' + pattern.fraction);
+ console.log('rounding: ' + pattern.rounding);
+ console.log('decimal: ' + pattern.decimal);
+ console.log('grouping: ' + pattern.grouping);
+}, function() {
+ console.log('Error getting pattern.');
+});
</pre>
<p>The following output is shown in the system log:</p>
<h2 id="names_of_months_and_days">Retrieving the Names of the Months and Days of the Week</h2>
<p>To obtain the names of months:</p>
<pre class="prettyprint">
-navigator.globalization.getDateNames(function(names)
- {
- for (var i = 0; i < names.value.length; i++)
- {
- console.log('month: ' + names.value[i]);
- }
- }, function() {console.log('Error getting names.');},
- {type: 'wide', item: 'months'});
+navigator.globalization.getDateNames(function(names) {
+ for (var i = 0; i < names.value.length; i++) {
+ console.log('month: ' + names.value[i]);
+ }
+}, function() {
+ console.log('Error getting names.');
+}, {type: 'wide', item: 'months'});
</pre>
<p>In the above example, the third parameter is <code>{type: 'wide', item: 'months'}</code>, and the names of months are obtained. To obtain the names of weekdays, pass <code>{type: 'wide', item: 'days'}</code> as the third parameter.</p>
</ul>
<pre class="prettyprint">
-function checkDatePattern()
-{
- navigator.globalization.getDatePattern(function(date)
- {
- console.log('Date pattern: ' + date.pattern);
- }, function() {console.log('Error getting pattern');},
- {formatLength: 'short', selector: 'date and time'});
+function checkDatePattern() {
+ navigator.globalization.getDatePattern(function(date) {
+ console.log('Date pattern: ' + date.pattern);
+ }, function() {
+ console.log('Error getting pattern');
+ }, {formatLength: 'short', selector: 'date and time'});
}
checkDatePattern();
<h2 id="first_day_of_week">Retrieving the First Day of the Week</h2>
<p>To obtain information on which day is the first day of the week (1 means Sunday):</p>
<pre class="prettyprint">
-navigator.globalization.getFirstDayOfWeek(function(day)
- {
- console.log('day: ' + day.value);
- }, function()
- {
- console.log('Error getting first day of week.');
- });
+navigator.globalization.getFirstDayOfWeek(function(day) {
+ console.log('day: ' + day.value);
+}, function() {
+ console.log('Error getting first day of week.');
+});
</pre>
<p>The following output is shown in the system log:</p>
<li>Grouping symbol</li>
</ul>
<pre class="prettyprint">
-navigator.globalization.getNumberPattern(function(pattern)
- {
- console.log('pattern: ' + pattern.pattern);
- console.log('symbol: ' + pattern.symbol);
- console.log('fraction: ' + pattern.fraction);
- console.log('rounding: ' + pattern.rounding);
- console.log('positive: ' + pattern.positive);
- console.log('negative: ' + pattern.negative);
- console.log('decimal: ' + pattern.decimal);
- console.log('grouping: ' + pattern.grouping);
- }, function() {console.log('An error occurred.');},
- {type: 'decimal'});
+navigator.globalization.getNumberPattern(function(pattern) {
+ console.log('pattern: ' + pattern.pattern);
+ console.log('symbol: ' + pattern.symbol);
+ console.log('fraction: ' + pattern.fraction);
+ console.log('rounding: ' + pattern.rounding);
+ console.log('positive: ' + pattern.positive);
+ console.log('negative: ' + pattern.negative);
+ console.log('decimal: ' + pattern.decimal);
+ console.log('grouping: ' + pattern.grouping);
+}, function() {
+ console.log('An error occurred.');
+}, {type: 'decimal'});
</pre>
<p>The following output is shown in the system log:</p>
<h2 id="dst">Retrieving the Daylight Saving Time Status</h2>
<p>To obtain information on whether the daylight saving time is in effect for a given date using the current time zone:</p>
<pre class="prettyprint">
-navigator.globalization.isDayLightSavingsTime(new Date(), function(date)
- {
- console.log('dst: ' + date.dst);
- }, function() {console.log('Error getting the DST state.');});
+navigator.globalization.isDayLightSavingsTime(new Date(), function(date) {
+ console.log('dst: ' + date.dst);
+}, function() {
+ console.log('Error getting the DST state.');
+});
</pre>
<p>The following output is shown in the system log:</p>
<pre class="prettyprint">
/* This example uses the default conversion options */
-navigator.globalization.dateToString(new Date(), function(date)
- {
- console.log('Date: ' + date.value);
- }, function() {console.log('Error getting dateString.');},
- {formatLength: 'short', selector: 'date and time'});
+navigator.globalization.dateToString(new Date(), function(date) {
+ console.log('Date: ' + date.value);
+}, function() {
+ console.log('Error getting dateString.');
+}, {formatLength: 'short', selector: 'date and time'});
</pre>
<p>The following output is shown in the system log:</p>
<p>To convert a date formatted as a DOMString according to the user's locale and time zone:</p>
<pre class="prettyprint">
-navigator.globalization.stringToDate('9/25/2012', function(date)
- {
- console.log('month: ' + date.month + ', day: ' + date.day +
- ', year: ' + date.year)
- }, function() {console.log('Error getting date.');},
- {selector: 'date'});
+navigator.globalization.stringToDate('9/25/2012', function(date) {
+ console.log('month: ' + date.month + ', day: ' + date.day +
+ ', year: ' + date.year)
+}, function() {
+ console.log('Error getting date.');
+}, {selector: 'date'});
</pre>
<p>The following output is shown in the system log:</p>
<li>Number to string
<p>To return a number formatted as a string according to the user's preferences:</p>
<pre class="prettyprint">
-navigator.globalization.numberToString(3.1415926, function(number)
- {
- console.log('decimal number: ' + number.value);
- }, function() {console.log('Error getting number.');},
- {type: 'decimal'});
-
-navigator.globalization.numberToString(1000003, function(number)
- {
- console.log('big decimal number: ' + number.value);
- }, function() {console.log('Error getting number.');},
- {type: 'decimal'});
-
-navigator.globalization.numberToString(0.3183099, function(number)
- {
- console.log('percentile: ' + number.value);
- }, function() {console.log('Error getting number.');},
- {type: 'percent'});
-
-navigator.globalization.numberToString(1099.95, function(number)
- {
- console.log('currency: ' + number.value);
- }, function() {console.log('Error getting number');},
- {type: 'currency'});
+navigator.globalization.numberToString(3.1415926, function(number) {
+ console.log('decimal number: ' + number.value);
+}, function() {
+ console.log('Error getting number.');
+}, {type: 'decimal'});
+
+navigator.globalization.numberToString(1000003, function(number) {
+ console.log('big decimal number: ' + number.value);
+}, function() {
+ console.log('Error getting number.');
+}, {type: 'decimal'});
+
+navigator.globalization.numberToString(0.3183099, function(number) {
+ console.log('percentile: ' + number.value);
+}, function() {
+ console.log('Error getting number.');
+}, {type: 'percent'});
+
+navigator.globalization.numberToString(1099.95, function(number) {
+ console.log('currency: ' + number.value);
+}, function() {
+ console.log('Error getting number');
+}, {type: 'currency'});
</pre>
<p>The following output is shown in the system log:</p>
<li>String to number
<p>To parse a number formatted as a string according to the user's preferences and return the corresponding number:</p>
<pre class="prettyprint">
-navigator.globalization.stringToNumber('1234.56', function(number)
- {
- console.log('number: ' + number.value);
- }, function() {console.log('Error getting number.');},
- {type: 'decimal'});
+navigator.globalization.stringToNumber('1234.56', function(number) {
+ console.log('number: ' + number.value);
+}, function() {
+ console.log('Error getting number.');
+}, {type: 'decimal'});
</pre>
<p>The following output is shown in the system log:</p>
<li>
<p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <code>deviceready</code> event occurs):</p>
<pre class="prettyprint">
-document.addEventListener("deviceready", onDeviceReady, false);
+document.addEventListener('deviceready', onDeviceReady, false);
-function onDeviceReady()
-{
- console.log("Cordova features now available");
+function onDeviceReady() {
+ console.log('Cordova features now available');
}
</pre>
</li>
<li><p>Place the audio file in a directory on a device. In this example, it is in the owner home directory: <code>/home/owner/content/Music/play.mp3</code>.</p></li>
<li><p>Construct a new media object from the audio file. No additional parameters are required.</p>
<pre class="prettyprint">
-var myMedia = new Media("file:///home/owner/content/Music/play.mp3");
+var myMedia = new Media('file:///home/owner/content/Music/play.mp3');
</pre>
</li>
<li><p>Call the <code>play()</code> method:</p>
<ol>
<li><p>Construct a new media object from the audio file.</p>
<pre class="prettyprint">
-var myMedia = new Media("file:///home/owner/content/Music/play.mp3");
+var myMedia = new Media('file:///home/owner/content/Music/play.mp3');
</pre>
</li>
<li><p>Start playing:</p>
<li><p>After 5 seconds, seek the position of 10 seconds.</p>
<p>A timer is registered using the <code>setTimeout()</code> global function.</p>
<pre class="prettyprint">
-setTimeout(function()
- {
- myMedia.seekTo(10000);
- console.log('Playback position has been set to 10 seconds.');
- }, 5000);
+setTimeout(function() {
+ myMedia.seekTo(10000);
+ console.log('Playback position has been set to 10 seconds.');
+}, 5000);
</pre></li>
<li><p>Stop the media and release after 10 seconds:</p>
<pre class="prettyprint">
-setTimeout(function()
- {
- myMedia.release();
- }, 10000);
+setTimeout(function() {
+ myMedia.release();
+}, 10000);
</pre>
</li>
</ol>
<ol>
<li><p>Construct a new media object from the audio file:</p>
<pre class="prettyprint">
-var myMedia = new Media("file:///home/owner/content/Music/play.mp3");
+var myMedia = new Media('file:///home/owner/content/Music/play.mp3');
</pre>
</li>
<li><p>Start playing:</p>
</li>
<li><p>Mute the volume after 2 seconds:</p>
<pre class="prettyprint">
-setTimeout(function()
- {
- myMedia.setVolume(0.0);
- }, 2000);
+setTimeout(function() {
+ myMedia.setVolume(0.0);
+}, 2000);
</pre></li>
<li><p>Set volume to 1.0 after 5 seconds:</p>
<pre class="prettyprint">
-setTimeout(function()
- {
- myMedia.setVolume(1.0);
- }, 5000);
+setTimeout(function() {
+ myMedia.setVolume(1.0);
+}, 5000);
</pre>
</li>
</ol>
<li>
<p>Define a success callback, which is called when the playback finishes successfully:</p>
<pre class="prettyprint">
-var successCallback = function()
-{
- console.log('Audio file has been played back.');
-}
+var successCallback = function() {
+ console.log('Audio file has been played back.');
+};
</pre>
</li>
<li>
<p>Define an error callback, which is called when an error occurs. The only parameter contains the error code (for a list of error codes, see the <code>MediaError</code> API Reference in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/media.html#MediaError">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/media.html#MediaError">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/media.html#MediaError">TV</a> applications).</p>
<pre class="prettyprint">
-var errorCallback = function(err)
-{
- console.log('An error occurred: ' + err.code);
-}
+var errorCallback = function(err) {
+ console.log('An error occurred: ' + err.code);
+};
</pre>
</li>
<li>
<p>Define a status callback, which is called when a playback event (such as preparing to playback, running, paused, and stopped) occurs:</p>
<pre class="prettyprint">
-var statusCallback = function(status)
-{
- switch (status)
- {
- case Media.MEDIA_NONE: console.log('Audio file status is none');
- break;
- case Media.MEDIA_STARTING: console.log('Audio file is starting');
- break;
- case Media.MEDIA_RUNNING: console.log('Audio file is running');
- break;
- case Media.MEDIA_PAUSED: console.log('Audio file is paused');
- break;
- case Media.MEDIA_STOPPED: console.log('Audio file is stopped');
- break;
- default: console.log('Audio file status unknown');
- break;
- }
-}
+var statusCallback = function(status) {
+ switch (status) {
+ case Media.MEDIA_NONE: console.log('Audio file status is none');
+ break;
+ case Media.MEDIA_STARTING: console.log('Audio file is starting');
+ break;
+ case Media.MEDIA_RUNNING: console.log('Audio file is running');
+ break;
+ case Media.MEDIA_PAUSED: console.log('Audio file is paused');
+ break;
+ case Media.MEDIA_STOPPED: console.log('Audio file is stopped');
+ break;
+ default: console.log('Audio file status unknown');
+ break;
+ }
+};
</pre>
</li>
<li><p>Construct a new media object and pass the callbacks as parameters.</p>
<p>Since the callbacks are optional, you do not need to provide them all. However, to monitor status changes, you must provide the status callback defined in the previous step.</p>
<pre class="prettyprint">
-var src = "file:///home/owner/content/Music/play.mp3";
+var src = 'file:///home/owner/content/Music/play.mp3';
var myMedia = new Media(src, successCallback, errorCallback, statusCallback);
</pre>
</li>
<li>
<p>Test the callbacks by pausing and resuming playback after 3 and 5 seconds:</p>
<pre class="prettyprint">
-setTimeout(function()
- {
- myMedia.pause();
- }, 3000);
-
-setTimeout(function()
- {
- myMedia.play();
- }, 5000);
+setTimeout(function() {
+ myMedia.pause();
+}, 3000);
+
+setTimeout(function() {
+ myMedia.play();
+}, 5000);
</pre>
</li>
</ol>
<li>
<p>Construct a new media object from an audio file:</p>
<pre class="prettyprint">
-var myMedia = new Media("file:///home/owner/content/Music/play.mp3");
+var myMedia = new Media('file:///home/owner/content/Music/play.mp3');
</pre>
</li>
<li>
<li>
<p>The method for getting the current position is asynchronous, so a callback is used. Define the callback:</p>
<pre class="prettyprint">
-var positionCallback = function(position)
-{
- console.log('Current position in seconds is ' + position);
-}
+var positionCallback = function(position) {
+ console.log('Current position in seconds is ' + position);
+};
</pre>
</li>
<li>
<p>Define the optional callback for errors in retrieving the position. For the specific error codes, see the <code>MediaError</code> API Reference (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/cordova/media.html#MediaError">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/cordova/media.html#MediaError">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/cordova/media.html#MediaError">TV</a> applications).</p>
<pre class="prettyprint">
-var errorCallback = function(err)
-{
- console.log('An error occurred: ' + err.code);
-}
+var errorCallback = function(err) {
+ console.log('An error occurred: ' + err.code);
+};
</pre>
</li>
<li>
<li>
<p>You can set a timer to get the position 5 seconds later:</p>
<pre class="prettyprint">
-setTimeout(function()
- {
- myMedia.getCurrentPosition(positionCallback, errorCallback);
- }, 5000);
+setTimeout(function() {
+ myMedia.getCurrentPosition(positionCallback, errorCallback);
+}, 5000);
</pre>
<p>Something similar to the following example is shown in the system log:</p>
<pre class="prettyprint">
<ol>
<li><p>Define the optional success and error callbacks:</p>
<pre class="prettyprint">
-var successCallback = function()
-{
- console.log('Started recording audio file.');
-}
+var successCallback = function() {
+ console.log('Started recording audio file.');
+};
-var errorCallback = function(err)
-{
- console.log('Error occurred ' + err.code);
-}
+var errorCallback = function(err) {
+ console.log('Error occurred ' + err.code);
+};
</pre>
</li>
<li><p>Construct a media object and pass the name for the new audio file:</p>
<pre class="prettyprint">
-var myMedia = new Media("recording.mp3", successCallback, errorCallback);
+var myMedia = new Media('recording.mp3', successCallback, errorCallback);
</pre>
</li>
<li><p>Start recording:</p>
</li>
<li><p>Stop recording after 10 seconds and release the media object:</p>
<pre class="prettyprint">
-setTimeout(function()
- {
- myMedia.stopRecord();
- console.log('Stopped recording an audio file.');
- myMedia.release();
- }, 10000);
+setTimeout(function() {
+ myMedia.stopRecord();
+ console.log('Stopped recording an audio file.');
+ myMedia.release();
+}, 10000);
</pre>
<p>Always release the media object when no longer needed.</p>
</li>
<li>
<p>To perform any Cordova-related operations, you must wait until Cordova is fully set up (the <code>deviceready</code> event occurs):</p>
<pre class="prettyprint">
-document.addEventListener("deviceready", onDeviceReady, false);
+document.addEventListener('deviceready', onDeviceReady, false);
-function onDeviceReady()
-{
- console.log("Cordova features now available");
+function onDeviceReady() {
+ console.log('Cordova features now available');
}
</pre>
</li>
</li>
<li>Compare the connection type to one of the defined values in the <code>Connection</code> global dictionary:
<pre class="prettyprint">
-if (state == Connection.WIFI)
-{
- document.querySelector('#wifi-indicator').textContent = "Connected to WiFi";
-}
-else
-{
- document.querySelector('#wifi-indicator').textContent = "Not connected to WiFi";
+if (state == Connection.WIFI) {
+ document.querySelector('#wifi-indicator').textContent = 'Connected to WiFi';
+} else {
+ document.querySelector('#wifi-indicator').textContent = 'Not connected to WiFi';
}
</pre>
<pre class="prettyprint">
document.addEventListener('deviceready', register);
-function register()
-{
- document.addEventListener('online', went_online);
- document.addEventListener('offline', went_offline);
+function register() {
+ document.addEventListener('online', went_online);
+ document.addEventListener('offline', went_offline);
}
</pre>
</li>
<li>Define the handlers:
<pre class="prettyprint">
-function went_online()
-{
- console.log("Went online");
+function went_online() {
+ console.log('Went online');
}
-function went_offline()
-{
- console.log("Went offline");
+function went_offline() {
+ console.log('Went offline');
}
</pre>
<p>The <code>online</code> event fires when <code>connection.type</code> changes from <code>Connection.NONE</code> to any other value. Similarly, the <code>offline</code> event fires when <code>connection.type</code> becomes <code>Connection.NONE</code>.</p>
/* (meaning that you search for all events occurring today) */
var now = tizen.time.getCurrentDateTime();
var today_begin = new tizen.TZDate(now.getFullYear(), now.getMonth(), now.getDate());
-var today_end = today_begin.addDuration(new tizen.TimeDuration(1, "DAYS"));
-var dateRangeFilter =
- new tizen.AttributeRangeFilter("startDate", today_begin, today_end);
+var today_end = today_begin.addDuration(new tizen.TimeDuration(1, 'DAYS'));
+var dateRangeFilter = new tizen.AttributeRangeFilter('startDate', today_begin, today_end);
</pre></li>
<li> <p> Call the <code>find()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> interface to find events. The filter (<code>dateRangeFilter</code>) you created is included as a parameter.</p>
<pre class="prettyprint">
-tizen.calendar.getDefaultCalendar("EVENT").find(successCB, errorCB, dateRangeFilter);
+tizen.calendar.getDefaultCalendar('EVENT').find(successCB, errorCB, dateRangeFilter);
</pre></li>
</ol>
<p>Create the filter with the <code>CompositeFilter</code> constructor. You can specify multiple sub-filters for the filter set.</p>
<pre class="prettyprint">
/* Create an attribute filter based on the firstName attribute */
-var firstNameFilter = new tizen.AttributeFilter("name.firstName", "CONTAINS", "Chris");
+var firstNameFilter = new tizen.AttributeFilter('name.firstName', 'CONTAINS', 'Chris');
/* Create an attribute filter based on the lastName attribute */
-var lastNameFilter = new tizen.AttributeFilter("name.lastName", "EXACTLY", "Smith");
+var lastNameFilter = new tizen.AttributeFilter('name.lastName', 'EXACTLY', 'Smith');
/*
Create a composite filter based on the intersection of these 2 filters
(intersection means that both filters must match
for the contact to be included in the results)
*/
-var nameCompositeFilter =
- new tizen.CompositeFilter("INTERSECTION", [firstNameFilter, lastNameFilter]);
+var nameCompositeFilter = new tizen.CompositeFilter('INTERSECTION', [firstNameFilter, lastNameFilter]);
</pre></li>
<li><p> Call the <code>find()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface to find matching contacts. The filter (<code>nameCompositeFilter</code>) you created is included as a parameter.</p>
<pre class="prettyprint">
<p>The following sorting modes are supported:</p>
<ul>
- <li> <p><code>"ASC"</code>: Ascending sorting order</p> </li>
- <li> <p><code>"DESC"</code>: Descending sorting order</p> </li>
+ <li> <p><code>'ASC'</code>: Ascending sorting order</p> </li>
+ <li> <p><code>'DESC'</code>: Descending sorting order</p> </li>
</ul>
<p> Learning how to use sorting modes allows you effectively incorporate query methods in your application:</p>
<p>Create the sort order with the <code>SortMode()</code> method. Specify an attribute name to sort by and an order option.</p>
<pre class="prettyprint">
/* Use the firstName attribute with an ASC order */
-var sortMode = new tizen.SortMode("name.firstName", "ASC");
+var sortMode = new tizen.SortMode('name.firstName', 'ASC');
</pre></li>
<li><p> Call the <code>find()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface to find matching contacts. In this example, the filter parameter in the <code>find()</code> method is defined as <code>null</code>, which means that the method retrieves all contacts in the address book.</p>
<pre class="prettyprint">
<ol>
<li> <p>Create attribute filters to include all content whose media type is either video or image:</p>
<pre class="prettyprint">
-function makeQueryAndFire()
-{
- /* Filter for the video media type */
- var typeVideoFilter = new tizen.AttributeFilter("type", "EXACTLY", "VIDEO");
+function makeQueryAndFire() {
+ /* Filter for the video media type */
+ var typeVideoFilter = new tizen.AttributeFilter('type', 'EXACTLY', 'VIDEO');
- /* Filter for the image media type */
- var typeImageFilter = new tizen.AttributeFilter("type", "EXACTLY", "IMAGE");
+ /* Filter for the image media type */
+ var typeImageFilter = new tizen.AttributeFilter('type', 'EXACTLY', 'IMAGE');
</pre></li>
<li> <p>Create a composite filter that finds all content that matches one of the media type filters:</p>
<pre class="prettyprint">
- var typeFilter =
- new tizen.CompositeFilter("UNION", [typeVideoFilter, typeImageFilter]);
+ var typeFilter =
+ new tizen.CompositeFilter('UNION', [typeVideoFilter, typeImageFilter]);
</pre></li>
<li> <p>Create another attribute filter that includes content containing the word "special" in its title:</p>
<pre class="prettyprint">
- var titleFilter = new tizen.AttributeFilter("title", "CONTAINS", "special");
+ var titleFilter = new tizen.AttributeFilter('title', 'CONTAINS', 'special');
</pre></li>
<li> <p>Create the final composite filter that finds all content that matches both the composite media type filter and the title filter:</p>
<pre class="prettyprint">
- var finalFilter =
- new tizen.CompositeFilter("INTERSECTION", [typeFilter, titleFilter]);
+ var finalFilter =
+ new tizen.CompositeFilter('INTERSECTION', [typeFilter, titleFilter]);
</pre></li>
<li> <p>Call the <code>find()</code> method of the Content API's <code>ContentManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#ContentManager">TV</a> applications) to retrieve the media items that match the final filter:</p>
<pre class="prettyprint">
- tizen.content.find(findMediaContentsCallback, onError, null, finalFilter);
+ tizen.content.find(findMediaContentsCallback, onError, null, finalFilter);
}
</pre>
<p>The <code>findMediaContentsCallback()</code> event handler returns the query result.</p> </li>
<pre class="prettyprint">
var myArchive = null;
-function openSuccess(arch)
-{
- console.log("ArchiveFile mode: " + arch.mode);
- myArchive = arch;
+function openSuccess(arch) {
+ console.log('ArchiveFile mode: ' + arch.mode);
+ myArchive = arch;
}
-tizen.archive.open("downloads/archive.zip", "r", openSuccess);
+tizen.archive.open('downloads/archive.zip', 'r', openSuccess);
</pre></li>
<li> <p>Get the list of all files contained inside the archive using the <code>getEntries()</code> method of the <code>ArchiveFile</code> interface.</p>
<pre class="prettyprint">
-function listSuccess(members)
-{
- if (members.length === 0)
- {
- console.log("The archive is empty");
-
- return;
- }
- console.log("Files in the archive:")
- for (var i = 0; i < members.length; i++)
- {
- console.log(members[i].name);
- }
+function listSuccess(members) {
+ if (members.length === 0) {
+ console.log('The archive is empty');
+
+ return;
+ }
+ console.log('Files in the archive:')
+ for (var i = 0; i < members.length; i++) {
+ console.log(members[i].name);
+ }
}
myArchive.getEntries(listSuccess);
</pre>
<li><p>To create the archive file, use the <code>open()</code> method of the <code>ArchiveManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/archive.html#ArchiveManager">TV</a> applications) and set the mode as <code>w</code>:</p>
<pre class="prettyprint">
-tizen.archive.open("downloads/new_archive.zip", "w", createSuccess);
+tizen.archive.open('downloads/new_archive.zip', 'w', createSuccess);
</pre>
</li>
<pre class="prettyprint">
-function progressCallback(opId, val, name)
-{
- console.log("opId: " + opId + " with progress val: " + (val * 100).toFixed(0) + "%");
+function progressCallback(opId, val, name) {
+ console.log('opId: ' + opId + ' with progress val: ' + (val * 100).toFixed(0) + '%');
}
-function successCallback()
-{
- console.log("File added");
+function successCallback() {
+ console.log('File added');
}
-function createSuccess(archive)
-{
- archive.add("downloads/file.txt", successCallback, null, progressCallback);
+function createSuccess(archive) {
+ archive.add('downloads/file.txt', successCallback, null, progressCallback);
}
</pre>
</li>
<p>To access an archive file, use the <code>open()</code> method of the <code>ArchiveManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/archive.html#ArchiveManager">TV</a> applications). The "r" mode is suitable for extracting from the archive.</p>
<pre class="prettyprint">
-tizen.archive.open("downloads/some_archive.zip", "r", openSuccess, openError);
+tizen.archive.open('downloads/some_archive.zip', 'r', openSuccess, openError);
</pre>
</li>
<p>To extract all files from the archive, use the <code>extractAll()</code> method of the <code>ArchiveFile</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveFile">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveFile">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/archive.html#ArchiveFile">TV</a> applications).</p>
<pre class="prettyprint">
-function progressCallback(opId, val, name)
-{
- console.log("extracting operation (: " + opId + ") is in progress ("
- + (val * 100).toFixed(1) + "%)");
+function progressCallback(opId, val, name) {
+ console.log('extracting operation (: ' + opId + ') is in progress (' + (val * 100).toFixed(1) + '%)');
}
-function openSuccess(archive)
-{
- archive.extractAll("music", null, null, progressCallback);
+function openSuccess(archive) {
+ archive.extractAll('music', null, null, progressCallback);
}
</pre>
</li>
<p>First, get the <code>archiveFileEntry</code> object using the <code>getEntryByName()</code> or <code>getEntries()</code> method of the <code>ArchiveFile</code> interface.</p>
<pre class="prettyprint">
-function extractSuccessCallback()
-{
- console.log("File extracted");
+function extractSuccessCallback() {
+ console.log('File extracted');
}
-function getEntrySuccess(entry)
-{
- entry.extract("downloads/extract", extractSuccessCallback);
+function getEntrySuccess(entry) {
+ entry.extract('downloads/extract', extractSuccessCallback);
}
-function openSuccess(archive)
-{
- archive.getEntryByName("my_file.txt", getEntrySuccess);
+function openSuccess(archive) {
+ archive.getEntryByName('my_file.txt', getEntrySuccess);
}
</pre>
</li>
<p>To abort the file archive operation, use the operation ID and the <code>abort()</code> method of the <code>ArchiveManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/archive.html#ArchiveManager">TV</a> applications):</p>
<pre class="prettyprint">
-function openSuccess(archive)
-{
- operationId = archive.extractAll("downloads/extracted");
- tizen.archive.abort(operationId);
+function openSuccess(archive) {
+ operationId = archive.extractAll('downloads/extracted');
+ tizen.archive.abort(operationId);
}
-tizen.archive.open("downloads/some_archive.zip", "r", openSuccess);
+tizen.archive.open('downloads/some_archive.zip', 'r', openSuccess);
</pre>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<li><p>To list available storages, use the <code>listStorages()</code> method of the <code>FileSystemManager</code> interface to search for the storages available on the device.</p> <p>If the search is successful, a list of found <code>FileSystemStorage</code> objects (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileSystemStorage">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileSystemStorage">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#FileSystemStorage">TV</a> applications) is passed to the success event handler.</p>
<pre class="prettyprint">
/* Success event handler */
-function checkCorruptedRemovableDrives(storages)
-{
- for (var i = 0; i < storages.length; i++)
- {
- if (storages[i].type != "EXTERNAL")
- continue;
- if (storages[i].state == "UNMOUNTABLE")
- console.log("External drive " + storages[i].label + " is corrupted.");
- }
+function checkCorruptedRemovableDrives(storages) {
+ for (var i = 0; i < storages.length; i++) {
+ if (storages[i].type != 'EXTERNAL')
+ continue;
+ if (storages[i].state == 'UNMOUNTABLE')
+ console.log('External drive ' + storages[i].label + ' is corrupted.');
+ }
}
/* Search for the storages */
<li> <p>To get storage details based on the storage name (the <code>label</code> attribute), use the <code>getStorage()</code> method.</p> <p>The success callback receives the <code>FileSystemStorage</code> object containing the storage details as an input parameter.</p>
<pre class="prettyprint">
/* Success event handler */
-function onStorage(storage)
-{
- console.log("Storage found:" + storage.label);
+function onStorage(storage) {
+ console.log('Storage found:' + storage.label);
}
/* Retrieve a storage */
-tizen.filesystem.getStorage("music", onStorage);
+tizen.filesystem.getStorage('music', onStorage);
</pre></li>
<li><p>To receive notifications on the storage state changes, for example, additions and removals, register an event handler with the <code>addStorageStateChangeListener()</code> method.</p> <p>An event is generated each time the storage state changes.</p>
<pre class="prettyprint">
var watchID;
/* Define the event handler */
-function onStorageStateChanged(storage)
-{
- if (storage.state == "MOUNTED")
- console.log("Storage " + storage.label + " was added!");
+function onStorageStateChanged(storage) {
+ if (storage.state == 'MOUNTED')
+ console.log('Storage ' + storage.label + ' was added!');
}
/* Register the event handler */
<li><p>To create a file in the current directory, use the <code>createFile()</code> method of the <code>File</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#File">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#File">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#File">TV</a> applications):</p>
<pre class="prettyprint">
var documentsDir, newFile;
-tizen.filesystem.resolve("documents", function(result)
- {
- documentsDir = result;
- newFile = documentsDir.createFile("newFilePath");
- });
+tizen.filesystem.resolve('documents', function(result) {
+ documentsDir = result;
+ newFile = documentsDir.createFile('newFilePath');
+});
</pre></li>
<li><p>To create a directory within the file system, use the <code>createDirectory()</code> method.</p> <p>The directory (and any sub-directories defined in the method parameter) is created relative to the current directory where the operation is performed on.</p>
<pre class="prettyprint">
-var newDir = documentsDir.createDirectory("newDir");
-var anotherNewDir = documentsDir.createDirectory("newDir1/subNewDir1");
+var newDir = documentsDir.createDirectory('newDir');
+var anotherNewDir = documentsDir.createDirectory('newDir1/subNewDir1');
</pre></li>
<li><p>To delete a file, use the <code>deleteFile()</code> method:</p>
<pre class="prettyprint">
-function onDelete()
-{
- console.log("deletedFile() is successfully done.");
+function onDelete() {
+ console.log('deletedFile() is successfully done.');
}
documentsDir.deleteFile(newFile.fullPath, onDelete);
<p>The <code>File</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#File">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#File">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/filesystem.html#File">TV</a> applications) is returned in the success event handler.</p> </li>
<li>To retrieve a list of all the files and their directories located in a specified directory, use the <code>listFiles()</code> method of the <code>File</code> object:
<pre class="prettyprint">
-function onResolveSuccess(dir)
-{
- dir.listFiles(onsuccess);
+function onResolveSuccess(dir) {
+ dir.listFiles(onsuccess);
}
</pre>
<p>The method returns an array of <code>File</code> objects.</p> </li>
<li><p>To retrieve the file URI, use the <code>toURI()</code> method:</p>
<pre class="prettyprint">
-function onsuccess(files)
-{
- for (var i = 0; i < files.length; i++)
- {
- /* Display the file name and URI */
- console.log("File name is " + files[i].name + ", URI is " + files[i].toURI());
+function onsuccess(files) {
+ for (var i = 0; i < files.length; i++) {
+ /* Display the file name and URI */
+ console.log('File name is ' + files[i].name + ', URI is ' + files[i].toURI());
</pre></li>
<li><p>To retrieve the file content as a DOMString, use the <code>readAsText()</code> method. </p><p>The encoding input parameter of the method defines the format in which the file content is returned.</p>
<pre class="prettyprint">
- if (files[i].isDirectory == false)
- {
- files[i].readAsText(function(str)
- {
- console.log("File content: " + str);
- }, null, "UTF-8");
- }
- }
+ if (files[i].isDirectory == false) {
+ files[i].readAsText(function(str) {
+ console.log('File content: ' + str);
+ }, null, 'UTF-8');
+ }
+ }
}
</pre></li>
</ol>
<pre class="prettyprint">
var documentsDir;
-tizen.filesystem.resolve("documents", function(result)
- {
- documentsDir = result;
- });
+tizen.filesystem.resolve('documents', function(result) {
+ documentsDir = result;
+});
-var testFile = documentsDir.createFile("test.txt");
-if (testFile != null)
-{
- testFile.openStream("rw", onOpenSuccess, null, "UTF-8");
+var testFile = documentsDir.createFile('test.txt');
+if (testFile != null) {
+ testFile.openStream('rw', onOpenSuccess, null, 'UTF-8');
}
</pre></li>
<li>Perform all actual operations, such as reading, writing, or closing, on the file through the <code>FileStream</code> object based on a position attribute, which represents the current position in the file:
<pre class="prettyprint">
-function onOpenSuccess(fs)
-{
- /* Write HelloWorld to the file */
- fs.write("HelloWorld");
+function onOpenSuccess(fs) {
+ /* Write HelloWorld to the file */
+ fs.write('HelloWorld');
- /* Move pointer to the beginning */
- fs.position = 0;
+ /* Move pointer to the beginning */
+ fs.position = 0;
- /* Read the file content from the beginning */
- fs.read(testFile.fileSize);
+ /* Read the file content from the beginning */
+ fs.read(testFile.fileSize);
- /* Close the file */
- fs.close();
+ /* Close the file */
+ fs.close();
}
</pre></li>
<li><p>To copy a file or directory, use the <code>copyTo()</code> method. The following example copies the files to the <code>images/backup/</code> directory. Since the third parameter is set to <code>true</code>, any existing files with the same name in the target directory are overwritten.</p>
<pre class="prettyprint">
var files; /* Assume that this is an array of File objects */
-function onSuccess()
-{
- console.log("success");
+function onSuccess() {
+ console.log('success');
}
-for (var i = 0; i < files.length; i++)
-{
- documentsDir.copyTo(files[i].fullPath, "images/backup/"+files[i].name,
- true, onSuccess);
+for (var i = 0; i < files.length; i++) {
+ documentsDir.copyTo(files[i].fullPath, 'images/backup/' + files[i].name,
+ true, onSuccess);
}
</pre></li>
<li><p>To move a file or directory, use the <code>moveTo()</code> method. The following example moves the files to the <code>images/newFolder/</code> directory. Since the third parameter is set to <code>false</code>, no existing files with the same name in the target directory are overwritten.</p>
<pre class="prettyprint">
var files; /* Assume that this is an array of File objects */
-for (var i = 0; i < files.length; i++)
-{
- documentsDir.moveTo(files[i].fullPath, "images/newFolder/"+files[i].name,
- false, onSuccess);
+for (var i = 0; i < files.length; i++) {
+ documentsDir.moveTo(files[i].fullPath, 'images/newFolder/' + files[i].name,
+ false, onSuccess);
}
</pre></li>
</ol>
</pre></li>
<li> <p>To search for the content directories in the local device, use the <code>getDirectories()</code> method of the <code>ContentManager</code> interface. The method returns an array of <code>ContentDirectory</code> objects (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentDirectory">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentDirectory">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#ContentDirectory">TV</a> applications).</p>
<pre class="prettyprint">
-function onDirectoryArraySuccess(directories)
-{
- for (var i = 0; i < directories.length; i++)
- {
- /* Retrieve folder-specific information */
- }
+function onDirectoryArraySuccess(directories) {
+ for (var i = 0; i < directories.length; i++) {
+ /* Retrieve folder-specific information */
+ }
}
manager.getDirectories(onDirectoryArraySuccess);
</pre></li>
<li>To search for the content items in all directories, use the <code>find()</code> method of the <code>ContentManager</code> interface. The method returns an array of <code>Content</code> objects (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#Content">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#Content">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#Content">TV</a> applications).
<pre class="prettyprint">
-function onContentItemArraySuccess(contents)
-{
- for (var i = 0; i < contents.length; i++)
- {
- console.log(i + ":" + contents[i].type + ":" + contents[i].title
- + ":" + contents[i].mimeType);
- }
+function onContentItemArraySuccess(contents) {
+ for (var i = 0; i < contents.length; i++) {
+ console.log(i + ':' + contents[i].type + ':' + contents[i].title + ':' + contents[i].mimeType);
+ }
}
-var contentType = "VIDEO";
-var filter = new tizen.AttributeFilter("type", "EXACTLY", contentType);
+var contentType = 'VIDEO';
+var filter = new tizen.AttributeFilter('type', 'EXACTLY', contentType);
manager.find(onContentItemArraySuccess, null, null, filter);
</pre>
<pre class="prettyprint">
var manager = tizen.content;
-var filter = new tizen.AttributeFilter("title", "EXACTLY", "image7.jpg");
+var filter = new tizen.AttributeFilter('title', 'EXACTLY', 'image7.jpg');
manager.find(onMediaItemArraySuccess, null, null, filter);
</pre></li>
<li>In the success event handler of the <code>find()</code> method, view the content item details by displaying them in the console log:
<pre class="prettyprint">
-function onMediaItemArraySuccess(item)
-{
- if (items.length > 0)
- {
- console.log(items[0].type + ": " + items[0].title + ": " + items[0].mimeType);
- console.log("geolocation-latitude: " + items[0].geolocation.latitude +
- " longitude:" + items[0].geolocation.longitude);
- update(items[0]);
- }
+function onMediaItemArraySuccess(item) {
+ if (items.length > 0) {
+ console.log(items[0].type + ': ' + items[0].title + ': ' + items[0].mimeType);
+ console.log('geolocation-latitude: ' + items[0].geolocation.latitude +
+ ' longitude:' + items[0].geolocation.longitude);
+ update(items[0]);
+ }
}
</pre></li>
<li><p>To update the editable attributes of the content item, use the <code>update()</code> method. In the example below, the rating of the content item is increased.</p>
<pre class="prettyprint">
-function update(item)
-{
- /* Checks whether the attribute is editable */
- if (item.editableAttributes.indexOf("rating") >= 0)
- {
- /* Changes an attribute */
- item.rating = 1;
-
- /* Updates the item */
- manager.update(item);
- }
+function update(item) {
+ /* Checks whether the attribute is editable */
+ if (item.editableAttributes.indexOf('rating') >= 0) {
+ /* Changes an attribute */
+ item.rating = 1;
+
+ /* Updates the item */
+ manager.update(item);
+ }
}
</pre></li>
<li><p>To scan for the content item file, use the <code>scanFile()</code> method. Because scanning is not performed automatically when the content file is copied or moved, call the <code>scanFile()</code> method to find the file.</p>
<pre class="prettyprint">
/* Assume the images/photo.jpg is copied to the device */
-function onScanSuccessCallback(path)
-{
- console.log("Scanning completed:" + path);
-};
+function onScanSuccessCallback(path) {
+ console.log('Scanning completed:' + path);
+}
-tizen.filesystem.resolve("images/photo.jpg", function(file)
- {
- tizen.content.scanFile(file.toURI(), onScanSuccessCallback);
- });
+tizen.filesystem.resolve('images/photo.jpg', function(file) {
+ tizen.content.scanFile(file.toURI(), onScanSuccessCallback);
+});
</pre></li>
<li><p>To create a thumbnail for a content item, use the <code>createThumbnail()</code> method:</p>
<pre class="prettyprint">
-function createCB(path)
-{
- console.log("A path of a just created thumbnail is " + path);
+function createCB(path) {
+ console.log('A path of a just created thumbnail is ' + path);
}
-function findCB(contents)
-{
- if (contents.length > 0)
- {
- tizen.content.createThumbnail(contents[0], createCB);
- }
+function findCB(contents) {
+ if (contents.length > 0) {
+ tizen.content.createThumbnail(contents[0], createCB);
+ }
}
tizen.content.find(findCB);
<ol>
<li><p>Define the event handlers for different notifications using the <code>ContentChangeCallback</code> listener instance (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentChangeCallback">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentChangeCallback">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#ContentChangeCallback">TV</a> applications):</p>
<pre class="prettyprint">
-var listener =
-{
- /* When new items are added */
- oncontentadded: function(content)
- {
- console.log(content.contentURI + " content was added");
- },
-
- /* When items are updated */
- oncontentupdated: function(content)
- {
- console.log(content.contentURI + " content was updated");
- },
-
- /* When items are deleted */
- oncontentremoved: function(id)
- {
- console.log(id + " was removed");
- }
+var listener = {
+ /* When new items are added */
+ oncontentadded: function(content) {
+ console.log(content.contentURI + ' content was added');
+ },
+
+ /* When items are updated */
+ oncontentupdated: function(content) {
+ console.log(content.contentURI + ' content was updated');
+ },
+
+ /* When items are deleted */
+ oncontentremoved: function(id) {
+ console.log(id + ' was removed');
+ }
};
</pre></li>
<li><p>Register the listener to use the defined event handlers:</p>
<li><p>To create a new empty playlist, use the <code>createPlaylist()</code> method of the <code>ContentManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#ContentManager">TV</a> applications):</p>
<pre class="prettyprint">
-function createSuccess(playlist)
-{
- console.log("create SUCCESS");
+function createSuccess(playlist) {
+ console.log('create SUCCESS');
}
-tizen.content.createPlaylist("My new playlist", createSuccess);
+tizen.content.createPlaylist('My new playlist', createSuccess);
</pre></li>
<li>To create a new playlist based on an existing one (basically copy the existing playlist content to a new playlist), use the <code>createPlaylist()</code> method, passing the source playlist as a parameter:
<pre class="prettyprint">
-function createSuccess(playlist)
-{
- console.log("create SUCCESS");
+function createSuccess(playlist) {
+ console.log('create SUCCESS');
}
-tizen.content.getPlaylists(function(playlists)
-{
- var existingPlaylist = playlists[0];
- tizen.content.createPlaylist("My new playlist", createSuccess,
- null, existingPlaylist);
+tizen.content.getPlaylists(function(playlists) {
+ var existingPlaylist = playlists[0];
+ tizen.content.createPlaylist('My new playlist', createSuccess, null, existingPlaylist);
});
</pre>
</li>
<li><p>To retrieve a list of all playlists, use the <code>getPlaylists()</code> method of the <code>ContentManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#ContentManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#ContentManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#ContentManager">TV</a> applications):</p>
<pre class="prettyprint">
-function getPlaylistsSuccess(playlists)
-{
- for (var i = 0; i < playlists.length; i++)
- {
- var cur = playlists[i];
- console.log("[" + i + "] name:" + cur.name
- + " number of tracks:" + cur.numberOfTracks);
- }
+function getPlaylistsSuccess(playlists) {
+ for (var i = 0; i < playlists.length; i++) {
+ var cur = playlists[i];
+ console.log('[' + i + '] name:' + cur.name + ' number of tracks:' + cur.numberOfTracks);
+ }
}
tizen.content.getPlaylists(getPlaylistsSuccess);
</pre></li>
<li>To remove a playlist, use the <code>removePlaylist()</code> method providing the ID of the playlist:
<pre class="prettyprint">
-function removePlaylistSuccess()
-{
- console.log("removePlaylist() is successfully done.");
+function removePlaylistSuccess() {
+ console.log('removePlaylist() is successfully done.');
}
-tizen.content.getPlaylists(function(playlists)
-{
- var myPlaylist = playlists[0];
- tizen.content.removePlaylist(myPlaylist.id, removePlaylistSuccess);
+tizen.content.getPlaylists(function(playlists) {
+ var myPlaylist = playlists[0];
+ tizen.content.removePlaylist(myPlaylist.id, removePlaylistSuccess);
});
</pre></li>
<pre class="prettyprint">
var myPlaylist;
-tizen.content.getPlaylists(function(playlists)
-{
- myPlaylist = playlists[0];
- tizen.content.find(findSuccess, null, null,
- new tizen.AttributeFilter("type", "EXACTLY", "AUDIO"));
+tizen.content.getPlaylists(function(playlists) {
+ myPlaylist = playlists[0];
+ tizen.content.find(findSuccess, null, null, new tizen.AttributeFilter('type', 'EXACTLY', 'AUDIO'));
});
</pre></li>
<li>To add multiple items to the retrieved playlist, use the <code>addBatch()</code> method of the <code>Playlist</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html#Playlist">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html#Playlist">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/content.html#Playlist">TV</a> applications):
<pre class="prettyprint">
-function findSuccess(contents)
-{
- if (contents.length >= 3)
- {
- myPlaylist.addBatch([contents[0], contents[1], contents[2]]);
- }
- else
- {
- console.log("Not enough items. Need at least 3");
- }
+function findSuccess(contents) {
+ if (contents.length >= 3) {
+ myPlaylist.addBatch([contents[0], contents[1], contents[2]]);
+ } else {
+ console.log('Not enough items. Need at least 3');
+ }
}
</pre></li>
<li>To add a single item to the retrieved playlist, use the <code>add()</code> method of the <code>Playlist</code> interface:
<pre class="prettyprint">
-function findSuccess(contents)
-{
- if (contents.length > 0)
- {
- myPlaylist.add(contents[0]);
- }
+function findSuccess(contents) {
+ if (contents.length > 0) {
+ myPlaylist.add(contents[0]);
+ }
}
</pre>
</li>
<li>To retrieve items from a playlist, use the <code>get()</code> method of the <code>Playlist</code> interface:
<pre class="prettyprint">
-function getSuccess(items)
-{
- console.log("Playlist items:");
- for (var i = 0; i < items.length; ++i)
- {
- console.log("[" + i + "]: name:" + items[i].name);
- }
+function getSuccess(items) {
+ console.log('Playlist items:');
+ for (var i = 0; i < items.length; ++i) {
+ console.log('[' + i + ']: name:' + items[i].name);
+ }
}
-tizen.content.getPlaylists(function(playlists)
-{
- var myPlaylist = playlists[0];
- myPlaylist.get(getSuccess);
+tizen.content.getPlaylists(function(playlists) {
+ var myPlaylist = playlists[0];
+ myPlaylist.get(getSuccess);
});
</pre>
</li>
<p>Note that before moving the item, first you must retrieve it using the <code>get()</code> method.</p>
<pre class="prettyprint">
var myItem; /* Assume that it was retrieved using the get() method */
-function moveSuccess()
-{
- console.log("move item SUCCESS");
+function moveSuccess() {
+ console.log('move item SUCCESS');
}
-tizen.content.getPlaylists(function(playlists)
-{
- var myPlaylist = playlists[0];
- myPlaylist.move(myItem, -2, moveSuccess);
+tizen.content.getPlaylists(function(playlists) {
+ var myPlaylist = playlists[0];
+ myPlaylist.move(myItem, -2, moveSuccess);
});
</pre>
<li>Execute the <code>setOrder()</code> method:
<pre class="prettyprint">
-function setOrderSuccess()
-{
- console.log("Set items order SUCCESS");
+function setOrderSuccess() {
+ console.log('Set items order SUCCESS');
}
myPlaylist.setOrder(newOrder, setOrderSuccess);
<p>You can check whether a feedback type (sound or vibration) is supported for a specified pattern. To get information about the supported specified system predefined pattern type pairs, use the <code>isPatternSupported()</code> method of the <code>FeedbackManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/feedback.html#FeedbackManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/feedback.html#FeedbackManager">wearable</a> applications):</p>
<pre class="prettyprint">
-var pattern = "BT_CONNECTED", type = "TYPE_SOUND";
+var pattern = 'BT_CONNECTED', type = 'TYPE_SOUND';
var isSupported = tizen.feedback.isPatternSupported(pattern, type);
-var isSupportedStr = "";
-if (!isSupported)
-{
- isSupportedStr = " not";
+var isSupportedStr = '';
+if (!isSupported) {
+ isSupportedStr = ' not';
}
-console.log("pattern " + pattern + " is" + isSupportedStr + " supported");
+console.log('pattern ' + pattern + ' is' + isSupportedStr + ' supported');
</pre>
<ol>
<li><p>To set a specified type of reaction for an event, use the <code>play()</code> method of the <code>FeedbackManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/feedback.html#FeedbackManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/feedback.html#FeedbackManager">wearable</a> applications):</p>
<pre class="prettyprint">
-try
-{
- tizen.feedback.play("CHARGERCONN");
-}
-catch (err)
-{
- console.log(err.name +': ' + err.message);
+try {
+ tizen.feedback.play('CHARGERCONN');
+} catch (err) {
+ console.log(err.name + ': ' + err.message);
}
</pre>
</li>
<ol>
<li><p>To set the power state, call the <code>request()</code> method of the <code>PowerManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/power.html#PowerManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/power.html#PowerManager">wearable</a> applications) with the intended power resource and its state. In this example, the <code>SCREEN_NORMAL</code> state is requested for the screen resource:</p>
<pre class="prettyprint">
-tizen.power.request("SCREEN", "SCREEN_NORMAL");
+tizen.power.request('SCREEN', 'SCREEN_NORMAL');
</pre></li>
<li><p>To release a power state, call the <code>release()</code> method with the intended resource:</p>
<pre class="prettyprint">
-tizen.power.release("SCREEN");
+tizen.power.release('SCREEN');
</pre></li>
<li><p>To listen to the screen state changes, use the <code>setScreenStateChangeListener()</code> method:</p>
<pre class="prettyprint">
-function onScreenStateChanged(previousState, changedState)
-{
- console.log("Screen state changed from" + previousState + "to" + changedState);
+function onScreenStateChanged(previousState, changedState) {
+ console.log('Screen state changed from' + previousState + 'to' + changedState);
}
tizen.power.setScreenStateChangeListener(onScreenStateChanged);
</pre></li>
<li>
<p>To get a specific capability of the device, use the <code>getCapability()</code> method:</p>
<pre class="prettyprint">
-var barometer =
- tizen.systeminfo.getCapability("http://tizen.org/feature/sensor.barometer");
-console.log(" Barometer = " + barometer);
+var barometer = tizen.systeminfo.getCapability('http://tizen.org/feature/sensor.barometer');
+console.log(' Barometer = ' + barometer);
</pre>
</li>
</ol>
<li> <p>To check the current state of the property, use the <code>getPropertyValue()</code> method. </p> <p>The first method parameter must be of the <code>SystemInfoPropertyId</code> type (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoPropertyId">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoPropertyId">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfoPropertyId">TV</a> applications). For the available values, see the <a href="#property">Available properties</a> table.</p>
<pre class="prettyprint">
/* Retrieve the battery property */
-tizen.systeminfo.getPropertyValue("BATTERY", onPowerSuccessCallback);
+tizen.systeminfo.getPropertyValue('BATTERY', onPowerSuccessCallback);
/* Retrieve the cellular network property */
-tizen.systeminfo.getPropertyValue("CELLULAR_NETWORK", onCellularSuccessCallback);
+tizen.systeminfo.getPropertyValue('CELLULAR_NETWORK', onCellularSuccessCallback);
</pre>
<p>After retrieving a property, you can use all the details of the property in your code. The property values are returned in the success event handlers defined below.</p> </li>
<li> <p>Use the power property values.</p> <p>In the following example, the battery level and charging status of the power property are printed to a console log.</p>
<pre class="prettyprint">
-function onPowerSuccessCallback(battery)
-{
- /* Log the device battery level to the console */
- console.log("The battery level is " + battery.level);
+function onPowerSuccessCallback(battery) {
+ /* Log the device battery level to the console */
+ console.log('The battery level is ' + battery.level);
- /* Check whether the device is charging */
- var charging = battery.isCharging;
+ /* Check whether the device is charging */
+ var charging = battery.isCharging;
}
</pre></li>
<li> <p>Retrieve the current states of a specific device property using the <code>getPropertyValueArray()</code> method. For example, you can check the state of SIM cards, which are mounted in the Tizen device.</p>
<pre class="prettyprint">
-function successCallback(properties)
-{
- console.log("The number of the returned system properties is " + properties.length);
- for (var i = 0; i properties.length; i++)
- {
- console.log("[" + (i + 1) + "] SIM's state is " + properties[i].state);
- }
+function successCallback(properties) {
+ console.log('The number of the returned system properties is ' + properties.length);
+ for (var i = 0; i properties.length; i++) {
+ console.log('[' + (i + 1) + '] SIM\'s state is ' + properties[i].state);
+ }
}
-tizen.systeminfo.getPropertyValueArray("SIM", successCallback);
+tizen.systeminfo.getPropertyValueArray('SIM', successCallback);
</pre></li>
<li> <p>Retrieve the number of system property information using the <code>getCount()</code> method. For example, you can check the number of SIM cards, which are installed in the Tizen device.</p>
<pre class="prettyprint">
-console.log("The number of SIM cards in the device is "
- + tizen.systeminfo.getCount("SIM"));
+console.log('The number of SIM cards in the device is ' + tizen.systeminfo.getCount('SIM'));
</pre></li>
</ol>
<li><p>To get the total amount of system memory, use the <code>getTotalMemory()</code> method:</p>
<pre class="prettyprint">
-console.log("The total memory size is " + tizen.systeminfo.getTotalMemory()
- + " bytes.");
+console.log('The total memory size is ' + tizen.systeminfo.getTotalMemory() + ' bytes.');
</pre></li>
<li><p>To get the available amount of system memory, use the <code>getAvailableMemory()</code> method:</p>
<pre class="prettyprint">
-console.log("The available memory size is " + tizen.systeminfo.getAvailableMemory()
- + " bytes.");
+console.log('The available memory size is ' + tizen.systeminfo.getAvailableMemory() + ' bytes.');
</pre></li>
</ul>
<ol>
<li> <p>To retrieve the current orientation of the device, use the <code>getPropertyValue()</code> method of the <code>SystemInfo</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/systeminfo.html#SystemInfo">TV</a> applications) and query the <code>DEVICE_ORIENTATION</code> property:</p>
<pre class="prettyprint">
-function onDeviceOrientation(deviceOrientation)
-{
- console.log("The device orientation is now: " + deviceOrientation.status);
+function onDeviceOrientation(deviceOrientation) {
+ console.log('The device orientation is now: ' + deviceOrientation.status);
}
-tizen.systeminfo.getPropertyValue("DEVICE_ORIENTATION", onDeviceOrientation);
+tizen.systeminfo.getPropertyValue('DEVICE_ORIENTATION', onDeviceOrientation);
</pre></li>
<li>The user can rotate the device and change its orientation. To receive notifications about the orientation changes, use the <code>addPropertyValueChangeListener()</code> method of the <code>SystemInfo</code> interface:
<pre class="prettyprint">
var orientationListenerId;
-orientationListenerId =
- tizen.systeminfo.addPropertyValueChangeListener("DEVICE_ORIENTATION",
- onDeviceOrientation);
+orientationListenerId = tizen.systeminfo.addPropertyValueChangeListener('DEVICE_ORIENTATION', onDeviceOrientation);
</pre></li>
<li> <p>To stop receiving change notifications, use the <code>removePropertyValueChangeListener()</code> method of the <code>SystemInfo</code> interface:</p>
<ol>
<li> <p>Register a <code>SystemInfoPropertySuccessCallback</code> event handler for the property value changes using the <code>addPropertyValueChangeListener()</code> method of the <code>SystemInfo</code> interface.</p> <p>The first parameter defines the property whose value changes you want to track, and the optional last parameter defines any thresholds when you want the notifications to be triggered. In the following example, an event handler is registered for the memory property value changes.</p>
<pre class="prettyprint">
-function successCallback(memory)
-{
- console.log("The memory state is " + memory.state);
+function successCallback(memory) {
+ console.log('The memory state is ' + memory.state);
}
-tizen.systeminfo.addPropertyValueChangeListener("MEMORY", successCallback);
+tizen.systeminfo.addPropertyValueChangeListener('MEMORY', successCallback);
</pre>
<p>The method returns a watch identifier, which can be used to deregister the event handler.</p> </li>
<li> <p>In the success event handler of the <code>addPropertyValueChangeListener()</code> method, define the notification event actions. </p> <p>In the following example, a warning about the low battery is logged to the console.</p>
<pre class="prettyprint">
/* Trigger a notification */
-function onSuccessCallback(battery)
-{
- console.log("Low battery: " + battery.level);
+function onSuccessCallback(battery) {
+ console.log('Low battery: ' + battery.level);
}
-tizen.systeminfo.addPropertyValueChangeListener("BATTERY", onSuccessCallback);
+tizen.systeminfo.addPropertyValueChangeListener('BATTERY', onSuccessCallback);
</pre></li>
<li> <p>To deregister the event handler, use <code>removePropertyValueChangeListener()</code> method with the watch identifier returned from the <code>addPropertyValueChangeListener()</code> method.</p> <p>In the following example, the event handler is deregistered when the first change of the SIM card state is detected.</p>
<pre class="prettyprint">
-function successCallback(properties)
-{
- for (var i = 0; i properties.length; i++)
- {
- console.log("[" + (i + 1) + "] SIM's state is " + properties[i].state);
- }
- removePropertyValueChangeListener(id);
+function successCallback(properties) {
+ for (var i = 0; i properties.length; i++) {
+ console.log('[' + (i + 1) + '] SIM\'s state is ' + properties[i].state);
+ }
+ removePropertyValueChangeListener(id);
}
-var id = tizen.systeminfo.addPropertyValueArrayChangeListener("SIM", successCallback);
+var id = tizen.systeminfo.addPropertyValueArrayChangeListener('SIM', successCallback);
</pre></li>
</ol>
<ul>
<li><p>To set the specified image as the lock screen wallpaper, use the <code>setProperty()</code> method:</p>
<pre class="prettyprint">
-function setLockscreenWallpaper()
-{
- tizen.filesystem.resolve("images/Background.jpg", function(imageFile)
- {
- try
- {
- tizen.systemsetting.setProperty("LOCK_SCREEN",
- imageFile.toURI().replace("file://", ""),
+function setLockscreenWallpaper() {
+ tizen.filesystem.resolve('images/Background.jpg', function(imageFile) {
+ try {
+ tizen.systemsetting.setProperty('LOCK_SCREEN',
+ imageFile.toURI().replace('file://', ''),
successCB, errorCB);
- }
- catch (error)
- {
- console.log("Error: " + error);
- }
- });
+ } catch (error) {
+ console.log('Error: ' + error);
+ }
+ });
}
</pre></li>
<li><p>To get the current system setting information for the home screen wallpaper, use the <code>getProperty()</code> method:</p>
<pre class="prettyprint">
-function getHomescreenWallpaper()
-{
- try
- {
- tizen.systemsetting.getProperty("HOME_SCREEN", successCB, errorCB);
- }
- catch (error)
- {
- console.log("Error: " + error);
- }
+function getHomescreenWallpaper() {
+ try {
+ tizen.systemsetting.getProperty('HOME_SCREEN', successCB, errorCB);
+ } catch (error) {
+ console.log('Error: ' + error);
+ }
}
</pre></li>
</ul>
<ul>
<li><p>To set the specified audio file as the notification tone for emails, use the <code>setProperty()</code> method of the <code>SystemSettingManager</code> interface:</p>
<pre class="prettyprint">
-function onSet()
-{
- console.log("It's set");
+function onSet() {
+ console.log('It\'s set');
}
-tizen.filesystem.resolve("music/Favorite track.mp3", function(musicFile)
- {
- try
- {
- tizen.systemsetting.setProperty("NOTIFICATION_EMAIL",
- musicFile.toURI().replace("file://", ""),
- onSet);
- }
- catch (error)
- {
- console.log("Error: " + error);
- }
- });
+tizen.filesystem.resolve('music/Favorite track.mp3', function(musicFile) {
+ try {
+ tizen.systemsetting.setProperty('NOTIFICATION_EMAIL',
+ musicFile.toURI().replace('file://', ''),
+ onSet);
+ } catch (error) {
+ console.log('Error: ' + error);
+ }
+});
</pre></li>
<li><p>To get the current system setting information for the incoming call ringtone, use the <code>getProperty()</code> method:</p>
<pre class="prettyprint">
-function onGet(value)
-{
- console.log("Current setting option value is: " + value);
+function onGet(value) {
+ console.log('Current setting option value is: ' + value);
}
-try
-{
- tizen.systemsetting.getProperty("INCOMING_CALL", onGet);
-}
-catch (error)
-{
- console.log("Error: " + error);
+try {
+ tizen.systemsetting.getProperty('INCOMING_CALL', onGet);
+} catch (error) {
+ console.log('Error: ' + error);
}
</pre></li>
</ul>
<li> <p>To get the current date and time, use the <code>getCurrentDateTime()</code> method, which returns a <code>TZDate</code> object:</p>
<pre class="prettyprint">
var current_dt = tizen.time.getCurrentDateTime();
-console.log("Current time / date is " + current_dt.toLocaleString());
+console.log('Current time / date is ' + current_dt.toLocaleString());
</pre>
</li>
<li>To handle time zone information:
<ol type="a">
<li> <p>To retrieve the current time zone, use the <code>getLocalTimezone()</code> method:</p>
<pre class="prettyprint">
-console.log("The current time zone is " + tizen.time.getLocalTimezone());
+console.log('The current time zone is ' + tizen.time.getLocalTimezone());
</pre>
<p>The general format of the time zones is "general descriptor/specific descriptor 1/specific descriptor 2/specific descriptor n". For example, "America/Argentina/Buenos_Aires".</p> </li>
<li> <p>To get the number of available time zones, use the <code>getAvailableTimezones()</code> method:</p>
<pre class="prettyprint">
var tzids = tizen.time.getAvailableTimezones();
-console.log("The device supports " + tzids.length + " time zones.");
+console.log('The device supports ' + tzids.length + ' time zones.');
</pre></li>
</ol>
</li>
var current_dt = tizen.time.getCurrentDateTime();
var is_leap = tizen.time.isLeapYear(current_dt.getFullYear());
if (is_leap)
- console.log("This year is a leap year.");
+ console.log('This year is a leap year.');
</pre>
<p> The <code>getFullYear()</code> method returns the year (4 digits) of the <code>TZDate</code> object. </p>
</li>
<li> <p>To check the date format, use the <code>getDateFormat()</code> method:</p>
<pre class="prettyprint">
var dateFormat = tizen.time.getDateFormat();
-console.log("Date format is " + dateFormat);
+console.log('Date format is ' + dateFormat);
</pre></li>
<li> <p>To check the time format, use the <code>getTimeFormat()</code> method:</p>
<pre class="prettyprint">
var timeFormat = tizen.time.getTimeFormat();
-console.log("Time format is " + timeFormat);
+console.log('Time format is ' + timeFormat);
</pre></li>
</ol>
/* Calculate event1.duration - event2.duration */
var diff = event1.duration.difference(event2.duration);
if (diff.length < 0)
- console.log("Event1 is longer than Event2.");
+ console.log('Event1 is longer than Event2.');
else if (diff.length == 0)
- console.log("Event1 is as long as Event2.");
+ console.log('Event1 is as long as Event2.');
else
- console.log("Event1 is shorter than Event2.");
+ console.log('Event1 is shorter than Event2.');
</pre>
<div class="note">
</li>
<li> <p> To compare 2 <code>TimeDuration</code> objects for equality, use the <code>equalsTo()</code> method: </p>
<pre class="prettyprint">
-var d1 = new tizen.TimeDuration(60, "MINS");
-var d2 = new tizen.TimeDuration(1, "HOURS");
+var d1 = new tizen.TimeDuration(60, 'MINS');
+var d2 = new tizen.TimeDuration(1, 'HOURS');
var ret = d1.equalsTo(d2); /* Returns true */
</pre></li>
<li> <p> To check whether 1 <code>TimeDuration</code> object is shorter than another, use the <code>lessThan()</code> method: </p>
<pre class="prettyprint">
/* Check whether d1 is shorter than d2 */
-var d1 = new tizen.TimeDuration(1, "HOURS");
-var d2 = new tizen.TimeDuration(120, "MINS");
+var d1 = new tizen.TimeDuration(1, 'HOURS');
+var d2 = new tizen.TimeDuration(120, 'MINS');
var ret = d1.lessThan(d2); /* Returns true */
</pre></li>
<li> <p> To check whether 1 <code>TimeDuration</code> object is longer than another, use the <code>greaterThan()</code> method: </p>
<pre class="prettyprint">
/* Check whether d1 is longer than d2 */
-var d1 = new tizen.TimeDuration(2, "HOURS");
-var d2 = new tizen.TimeDuration(60, "MINS");
+var d1 = new tizen.TimeDuration(2, 'HOURS');
+var d2 = new tizen.TimeDuration(60, 'MINS');
var ret = d1.greaterThan(d2); /* Returns true */
</pre></li>
<li> <p>To add a predefined time to the current date, use the <code>addDuration()</code> method:</p>
<pre class="prettyprint">
/* Convert the current date to the date of the next day, at the same time */
var now = tizen.time.getCurrentDateTime();
-var tomorrow = now.addDuration(new tizen.TimeDuration(1,"DAYS");
+var tomorrow = now.addDuration(new tizen.TimeDuration(1, 'DAYS');
</pre>
<p> If the number of added time is negative, date or time is set to an earlier moment of time. </p> </li>
</ol>
<ul>
<li> <p>The time change event handler is called when the user adjusts the clock:</p>
<pre class="prettyprint">
-function timeChangedCallback()
-{
- try
- {
- var current_dt = tizen.time.getCurrentDateTime();
- console.log("Clock has been set. Current date/time is "
- + current_dt.toLocaleString());
- }
+function timeChangedCallback() {
+ try {
+ var current_dt = tizen.time.getCurrentDateTime();
+ console.log('Clock has been set. Current date/time is ' + current_dt.toLocaleString());
+ }
}
</pre></li>
<li> <p>The time zone change event handler is called when the user switches the time zone:</p>
<pre class="prettyprint">
-function timezoneChangedCallback()
-{
- try
- {
- /*
- New time zone can be retrieved
- through tizen.time.getLocalTimezone()
- */
- var zone = tizen.time.getLocalTimezone();
- console.log("Time zone has been set to " + zone);
- }
+function timezoneChangedCallback() {
+ try {
+ /*
+ New time zone can be retrieved
+ through tizen.time.getLocalTimezone()
+ */
+ var zone = tizen.time.getLocalTimezone();
+ console.log('Time zone has been set to ' + zone);
+ }
}
</pre></li>
</ul> </li>
<p>Use the <code>setUserAgentString()</code> method to set a Web view user agent string:</p>
<pre class="prettyprint">
-function successCallback()
-{
- console.log("The requested user agent string has just been set successfully."
- + navigator.userAgent);
+function successCallback() {
+ console.log('The requested user agent string has just been set successfully.' + navigator.userAgent);
}
/* Set a user agent string */
-var userAgent = "CUSTOM_USER_AGENT_STRING";
+var userAgent = 'CUSTOM_USER_AGENT_STRING';
tizen.websetting.setUserAgentString(userAgent, successCallback);
</pre>
<p>Use the <code>removeAllCookies()</code> method to delete all the Web view cookies:</p>
<pre class="prettyprint">
-function CookiesRemovedSuccessCallback()
-{
- console.log("The cookies saved for your application have just been removed.");
+function CookiesRemovedSuccessCallback() {
+ console.log('The cookies saved for your application have just been removed.');
}
tizen.websetting.removeAllCookies(CookiesRemovedSuccessCallback);
<ol>
<li> <p>The generic <code>onSuccess()</code> event handler of the <code>SuccessCallBack</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SuccessCallback">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SuccessCallback">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#SuccessCallback">TV</a> applications) can be used with methods that do not require a return value when successful.</p> <p>In this example, the event handler is used to stop a running application with the <code>kill()</code> method of the <code>Application</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#Application">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#Application">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/application.html#Application">TV</a> applications).</p>
<pre class="prettyprint">
-function onSuccess()
-{
- console.log("Application terminated successfully");
+function onSuccess() {
+ console.log('Application terminated successfully');
}
tizen.application.kill(ctxIDToKill, onSuccess);
</pre></li>
<li> <p> The generic <code>onError()</code> event handler of the <code>ErrorCallBack</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#ErrorCallback">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#ErrorCallback">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/tizen.html#ErrorCallback">TV</a> applications) can be used with methods that only require an error as an input parameter in the error callback.</p> <p>In this example, the event handler is used to handle possible errors with the <code>getCalendars()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p>
<pre class="prettyprint">
-function errorCallback(error)
-{
- console.log("The following error occurred: " + error.name);
+function errorCallback(error) {
+ console.log('The following error occurred: ' + error.name);
}
-tizen.calendar.getCalendars("EVENT", calendarListCallback, errorCallback);
+tizen.calendar.getCalendars('EVENT', calendarListCallback, errorCallback);
</pre></li>
</ol>
<ul>
<li><code>en/language.js</code>:
<pre class="prettyprint lang-javascript">
-LANG_JSON_DATA=
-{
- "hello": "hello"
+LANG_JSON_DATA = {
+ 'hello': 'hello'
}
</pre></li>
<li><code>ko/language.js</code>:
<pre class="prettyprint lang-javascript">
-LANG_JSON_DATA=
-{
- "hello": "안녕"
+LANG_JSON_DATA = {
+ 'hello': '안녕'
}
</pre></li>
</ul>
<p>
The Web Runtime loads the <code>language.js</code> file for the current locale and you can use the defined string element to display localized content. For example:</p>
<pre class="prettyprint lang-javascript">
-log("hello=" + LANG_JSON_DATA["hello"]);
+log('hello=' + LANG_JSON_DATA['hello']);
</pre>
<div class="note">
<li>Get the current volume level using the <code>getVolume()</code> method:
<pre class="prettyprint">
-var vol = tizen.sound.getVolume("RINGTONE");
+var vol = tizen.sound.getVolume('RINGTONE');
</pre>
</li>
<p>The following example increases the ringtone volume by 10% of the maximum volume level:</p>
<pre class="prettyprint">
-tizen.sound.setVolume("RINGTONE", vol + 0.1);
+tizen.sound.setVolume('RINGTONE', vol + 0.1);
</pre>
</li>
<pre class="prettyprint">
var mode = tizen.sound.getSoundMode();
-console.log("Sound Mode is " + mode);
+console.log('Sound Mode is ' + mode);
</pre>
</li>
<li>Register the volume change listener to track changes in the volume level:
<pre class="prettyprint">
-function onsuccessCB(type, volume)
-{
- console.log("SoundType is " + type);
- console.log("Volume is " + volume);
- tizen.sound.unsetVolumeChangeListener();
+function onsuccessCB(type, volume) {
+ console.log('SoundType is ' + type);
+ console.log('Volume is ' + volume);
+ tizen.sound.unsetVolumeChangeListener();
}
tizen.sound.setVolumeChangeListener(onsuccessCB);
<li>Register the sound mode change listener to track changes in the sound mode:
<pre class="prettyprint">
-function onsuccessCB(mode)
-{
- console.log("Mode is " + mode);
- tizen.sound.unsetSoundModeChangeListener();
+function onsuccessCB(mode) {
+ console.log('Mode is ' + mode);
+ tizen.sound.unsetSoundModeChangeListener();
}
tizen.sound.setSoundModeChangeListener(onsuccessCB);
<pre class="prettyprint">
var infoArr = tizen.sound.getConnectedDeviceList();
-for (var i = 0; i < infoArr.length; i++)
-{
- console.log(infoArr[i].device);
+for (var i = 0; i < infoArr.length; i++) {
+ console.log(infoArr[i].device);
}
</pre>
</li>
<pre class="prettyprint">
var infoArr = tizen.sound.getActivatedDeviceList();
-for (var i = 0; i < infoArr.length; i++)
-{
- console.log(infoArr[i].device);
+for (var i = 0; i < infoArr.length; i++) {
+ console.log(infoArr[i].device);
}
</pre>
</li>
<li>Add a sound device state change listener to track changes in the sound device state:
<pre class="prettyprint">
-function onchangedCB(info)
-{
- if (info.isConnected)
- {
- console.log(info.device + " is connected");
- }
- else
- {
- console.log(info.device + " is not connected");
- }
-
- if (info.isActivated)
- {
- console.log(info.device + " is activated");
- }
- else
- {
- console.log(info.device + " is not activated");
- }
+function onchangedCB(info) {
+ if (info.isConnected) {
+ console.log(info.device + ' is connected');
+ } else {
+ console.log(info.device + ' is not connected');
+ }
+
+ if (info.isActivated) {
+ console.log(info.device + ' is activated');
+ } else {
+ console.log(info.device + ' is not activated');
+ }
}
var listenerId = tizen.sound.addDeviceStateChangeListener(onChangedCB);
var stream;
navigator.webkitGetUserMedia({video: true, audio: false}, gotStreamCallback,
noStreamCallback);
-function gotStream(rStream)
-{
- stream = rStream;
+function gotStream(rStream) {
+ stream = rStream;
}
</pre>
</li>
</li>
<li>You can use the <code>cameraControl</code> in the success event handler of the <code>createCameraControl()</code> method, where it is provided as a parameter:
<pre class="prettyprint">
-function gotCameraCallback(cameraControl)
+function gotCameraCallback(cameraControl) {}
</pre>
</li>
</ol>
<li>Use the <code>applySettings()</code> method to modify the camera settings (to set the file name of the recorded video or captured image):
<pre class="prettyprint">
-var recordingSetting =
-{
- fileName: "sample.3gp";
+var recordingSetting = {
+ fileName: 'sample.3gp';
}
cameraControl.recorder.applySettings(recordingSetting,
recorderSettingSuccessCallback,
<ol>
<li>Access the camera preview stream using the <code>getUserMedia()</code> method:
<pre class="prettyprint">
-function initCameraPreview()
-{
- navigator.webkitGetUserMedia({video: true, audio: false},
- onPreviewStream,
- onPreviewStreamError);
+function initCameraPreview() {
+ navigator.webkitGetUserMedia({video: true, audio: false},
+ onPreviewStream,
+ onPreviewStreamError);
}
-function onPreviewStream(stream)
-{
- cameraStream = stream;
+function onPreviewStream(stream) {
+ cameraStream = stream;
}
</pre>
</li>
<li>Use the <code>onVisibilityChange()</code> event listener to detect changes in the visibility state of the application. When the application becomes invisible, the <code>cameraStream.stop()</code> method is called to release the preview stream. When the application becomes visible again, the preview stream is re-initialized.
<pre class="prettyprint">
-function onVisibilityChange()
-{
- if (document.visibilityState !== 'visible')
- {
- cameraStream.stop();
- }
- else
- {
- initCameraPreview();
- }
+function onVisibilityChange() {
+ if (document.visibilityState !== 'visible') {
+ cameraStream.stop();
+ } else {
+ initCameraPreview();
+ }
}
</pre>
</li>
<li><p>To retrieve the EXIF data from specific file, you need the URI of an image file in an absolute URI format (for example <code>file:///opt/usr/media/Images/tizen.jpg</code>). The <code>tizen.filesystem.resolve()</code> and <code>toURI()</code> methods can be used to convert a virtual path to a URI.</p>
<pre class="prettyprint">
-var fileURI = "";
-function resolveSuccess(file)
-{
- fileURI = file.toURI();
- console.log("Successfully resolved file: " + fileURI);
+var fileURI = '';
+function resolveSuccess(file) {
+ fileURI = file.toURI();
+ console.log('Successfully resolved file: ' + fileURI);
}
-function resolveFail(error)
-{
- console.log("resolve() error occurred: " + error.name
- + " with message: " + error.message);
+function resolveFail(error) {
+ console.log('resolve() error occurred: ' + error.name + ' with message: ' + error.message);
}
-tizen.filesystem.resolve("images/tizen.jpg", resolveSuccess, resolveFail);
+tizen.filesystem.resolve('images/tizen.jpg', resolveSuccess, resolveFail);
</pre></li>
<li><p>With a valid <code>File</code> object, use the <code>getExifInfo()</code> method of the <code>ExifManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/exif.html#ExifManager">TV</a> applications) and pass the URI to the method.</p>
<pre class="prettyprint">
-function onSuccess(exifInfo)
-{
- console.log("Successfully got EXIF information object");
+function onSuccess(exifInfo) {
+ console.log('Successfully got EXIF information object');
}
-function onError(error)
-{
- console.log("Error occurred: " + error.name + " with message:" + error.message);
+function onError(error) {
+ console.log('Error occurred: ' + error.name + ' with message:' + error.message);
}
tizen.exif.getExifInfo(fileURI, onSuccess, onError);
<ol type="a"><li>Resolve the input JPEG file:
<pre class="prettyprint">
-var fileURI = "";
+var fileURI = '';
-tizen.filesystem.resolve("images/tizen.jpg", resolveSuccess, resolveFail);
+tizen.filesystem.resolve('images/tizen.jpg', resolveSuccess, resolveFail);
</pre></li>
<li>Use the <code>getThumbnail()</code> method to retrieve the thumbnail:
<pre class="prettyprint">
-function onSuccess(thumbData)
-{
- console.log("Got thumbnail data from EXIF stored in JPEG file");
- if (thumbData)
- {
- var img = new Image();
- img.src = thumbData;
- document.body.appendChild(img);
+function onSuccess(thumbData) {
+ console.log('Got thumbnail data from EXIF stored in JPEG file');
+ if (thumbData) {
+ var img = new Image();
+ img.src = thumbData;
+ document.body.appendChild(img);
}
}
-function onError(error)
-{
- console.log("Error occurred: " + error.name
- + " with message: " + error.message);
+function onError(error) {
+ console.log('Error occurred: ' + error.name + ' with message: ' + error.message);
}
-function resolveSuccess(file)
-{
- fileURI = file.toURI();
- console.log("Successfully resolved file: " + file.toURI());
- tizen.exif.getThumbnail(fileURI, onSuccess, onError);
+function resolveSuccess(file) {
+ fileURI = file.toURI();
+ console.log('Successfully resolved file: ' + file.toURI());
+ tizen.exif.getThumbnail(fileURI, onSuccess, onError);
}
</pre></li></ol></li>
<pre class="prettyprint">
var myNewExif = new tizen.ExifInformation();
-myNewExif.userComment = "Photo taken on Charles Bridge in Prague";
+myNewExif.userComment = 'Photo taken on Charles Bridge in Prague';
myNewExif.gpsLocation = new tizen.SimpleCoordinates(50.086447, 14.411856);
</pre>
<li><p>Resolve the virtual path to the output JPEG file and get the URI:</p>
<pre class="prettyprint">
-var fileNoExifURI = "";
-function resolveSuccess(file)
-{
- fileNoExifURI = file.toURI();
- console.log("Successfully resolved file: " + fileNoExifURI);
+var fileNoExifURI = '';
+function resolveSuccess(file) {
+ fileNoExifURI = file.toURI();
+ console.log('Successfully resolved file: ' + fileNoExifURI);
}
-function resolveFail(error)
-{
- console.log("Error occurred: " + error.name + " with message: " + error.message);
+function resolveFail(error) {
+ console.log('Error occurred: ' + error.name + ' with message: ' + error.message);
}
-tizen.filesystem.resolve("images/image_without_exif.jpg", resolveSuccess, resolveFail);
+tizen.filesystem.resolve('images/image_without_exif.jpg', resolveSuccess, resolveFail);
</pre>
</li>
<li><p>When you have a valid URI to the file, set it in the <code>myNewExif</code> object and call the <code>saveExifInfo()</code> method of the <code>ExifManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/exif.html#ExifManager">TV</a> applications):</p>
<pre class="prettyprint">
-function onSaveSuccess()
-{
- console.log("Successfully saved EXIF information to JPEG file");
+function onSaveSuccess() {
+ console.log('Successfully saved EXIF information to JPEG file');
}
-function onSaveError(error)
-{
- console.log("Error occurred:" + error.name + " with message:" + error.message);
+function onSaveError(error) {
+ console.log('Error occurred:' + error.name + ' with message:' + error.message);
}
myNewExif.uri = fileNoExifURI;
<p>You can remove information from the file by setting the property to <code>null</code>.</p>
<pre class="prettyprint">
-function getSuccess(exifInfo)
-{
- exifInfo.orientation = "FLIP_HORIZONTAL";
- exifInfo.userComment = "Great times!";
-
- /* Remove basic GPS information */
- exifInfo.gpsLocation = null;
- exifInfo.gpsAltitude = null;
+function getSuccess(exifInfo) {
+ exifInfo.orientation = 'FLIP_HORIZONTAL';
+ exifInfo.userComment = 'Great times!';
+
+ /* Remove basic GPS information */
+ exifInfo.gpsLocation = null;
+ exifInfo.gpsAltitude = null;
}
-tizen.filesystem.resolve("images/photo.jpg", function(file)
- {
- tizen.exif.getExifInfo(file.toURI(), getSuccess);
- });
+tizen.filesystem.resolve('images/photo.jpg', function(file) {
+ tizen.exif.getExifInfo(file.toURI(), getSuccess);
+});
</pre></li>
<li>After updating the property values, use the <code>saveExifInfo()</code> method of the <code>ExifManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/exif.html#ExifManager">TV</a> applications) to save the changes to the file:
<pre class="prettyprint">
-function saveSuccess(exifInfo)
-{
- console.log("new EXIF saved");
+function saveSuccess(exifInfo) {
+ console.log('new EXIF saved');
}
tizen.exif.saveExifInfo(exifInfo, saveSuccess);
<pre class="prettyprint">
var sourceExifInfo = null;
-function resolveOutSuccess(outFile)
-{
- console.log("Successfully resolved file: " + outFile.toURI());
- sourceExifInfo.uri = outFile.toURI();
+function resolveOutSuccess(outFile) {
+ console.log('Successfully resolved file: ' + outFile.toURI());
+ sourceExifInfo.uri = outFile.toURI();
}
-function resolveOutFail(error)
-{
- console.log("Error occurred: " + error.name + " with message: " + error.message);
+function resolveOutFail(error) {
+ console.log('Error occurred: ' + error.name + ' with message: ' + error.message);
}
-function onSuccess(exifInfo)
-{
- console.log("Successfully got EXIF information object");
- sourceExifInfo = exifInfo;
- tizen.filesystem.resolve("images/image_without_exif.jpg", resolveOutSuccess,
- resolveOutFail);
+function onSuccess(exifInfo) {
+ console.log('Successfully got EXIF information object');
+ sourceExifInfo = exifInfo;
+ tizen.filesystem.resolve('images/image_without_exif.jpg', resolveOutSuccess, resolveOutFail);
}
tizen.exif.getExifInfo(fileURI, onSuccess);
<li>Use the <code>saveExifInfo()</code> method of the <code>ExifManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifManager">mobile</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifManager">wearable</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/tv/tizen/exif.html#ExifManager">TV</a> applications) to save the changes in the output JPEG file:
<pre class="prettyprint">
-function onSaveSuccess()
-{
- console.log("Successfully saved EXIF information to JPEG file");
+function onSaveSuccess() {
+ console.log('Successfully saved EXIF information to JPEG file');
}
-function onSaveError(error)
-{
- console.log("Error occurred:" + error.name + " with message:" + error.message);
+function onSaveError(error) {
+ console.log('Error occurred:' + error.name + ' with message:' + error.message);
}
-function resolveOutSuccess(outFile)
-{
- console.log("Successfully resolved file: " + outFile.toURI());
- sourceExifInfo.uri = outFile.toURI();
- tizen.exif.saveExifInfo(sourceExifInfo, onSaveSuccess, onSaveError);
+function resolveOutSuccess(outFile) {
+ console.log('Successfully resolved file: ' + outFile.toURI());
+ sourceExifInfo.uri = outFile.toURI();
+ tizen.exif.saveExifInfo(sourceExifInfo, onSaveSuccess, onSaveError);
}
</pre></li>
<pre class="prettyprint">
var mcServerInfo;
-function findSuccessCallback(servers)
-{
- console.log("Found " + servers.length + " servers");
- if (servers.length > 0)
- {
- mcServerInfo = servers[0];
- }
+function findSuccessCallback(servers) {
+ console.log('Found ' + servers.length + ' servers');
+ if (servers.length > 0) {
+ mcServerInfo = servers[0];
+ }
}
-function findErrorCallback(e)
-{
- console.log("Error name: " + e.name + " Error message: " + e.message);
+function findErrorCallback(e) {
+ console.log('Error name: ' + e.name + ' Error message: ' + e.message);
}
</pre>
<p>Each listener must invoke the appropriate function to perform the related update on the server and send an appropriate notification to the client. For example, the <code>onplaybackstaterequest</code> listener must use the <code>updatePlaybackState()</code> method to update the playback state.</p>
<pre class="prettyprint">
-var requestPlaybackInfoCb =
-{
- onplaybackstaterequest: function(state)
- {
- console.log('Request to change the playback state to: ' + state);
- mcServer.updatePlaybackState(state);
- },
- onplaybackpositionrequest: function(position)
- {
- console.log('Request to change the playback position to: ' + position);
- mcServer.updatePlaybackPosition(position);
- },
- onshufflemoderequest: function(mode)
- {
- console.log('Request to change the playback shuffle mode to: '
- + (mode ? 'TRUE' : 'FALSE'));
- mcServer.updateShuffleMode(mode);
- },
- onrepeatmoderequest: function(mode)
- {
- console.log('Request to change the playback repeat mode to: '
- + (mode ? 'TRUE' : 'FALSE'));
- mcServer.updateRepeatMode(mode);
- }
+var requestPlaybackInfoCb = {
+ onplaybackstaterequest: function(state) {
+ console.log('Request to change the playback state to: ' + state);
+ mcServer.updatePlaybackState(state);
+ },
+ onplaybackpositionrequest: function(position) {
+ console.log('Request to change the playback position to: ' + position);
+ mcServer.updatePlaybackPosition(position);
+ },
+ onshufflemoderequest: function(mode) {
+ console.log('Request to change the playback shuffle mode to: ' + (mode ? 'TRUE' : 'FALSE'));
+ mcServer.updateShuffleMode(mode);
+ },
+ onrepeatmoderequest: function(mode) {
+ console.log('Request to change the playback repeat mode to: ' + (mode ? 'TRUE' : 'FALSE'));
+ mcServer.updateRepeatMode(mode);
+ }
};
</pre>
</li>
<li>At the client side, before sending a request, define optional success and error callbacks:
<pre class="prettyprint">
-function successCallback()
-{
- console.log("Playback has been paused.");
+function successCallback() {
+ console.log('Playback has been paused.');
}
-function errorCallback(e)
-{
- console.log("Error name: " + e.name + " Error message: " + e.message);
+function errorCallback(e) {
+ console.log('Error name: ' + e.name + ' Error message: ' + e.message);
}
</pre>
</p>
<pre class="prettyprint">
-mcServerInfo.sendPlaybackState("PAUSE", successCallback, errorCallback);
+mcServerInfo.sendPlaybackState('PAUSE', successCallback, errorCallback);
</pre>
</li>
<li>Define the event handlers for different notifications by implementing the <code>MediaControllerPlaybackInfoChangeCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerPlaybackInfoChangeCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html#MediaControllerPlaybackInfoChangeCallback">wearable</a> applications):
<pre class="prettyprint">
-var playbackListener =
-{
- onplaybackchanged: function(state, position)
- {
- console.log("Current playback state: " + state);
- console.log("Current playback position: " + position);
- },
- onshufflemodechanged: function(mode)
- {
- console.log("Shuffle mode changed to: " + mode);
- },
- onrepeatmodechanged: function(mode)
- {
- console.log("Repeat mode changed to: " + mode);
- },
- onmetadatachanged: function(metadata)
- {
- console.log("Playback metadata changed: " + JSON.stringify(metadata));
- }
+var playbackListener = {
+ onplaybackchanged: function(state, position) {
+ console.log('Current playback state: ' + state);
+ console.log('Current playback position: ' + position);
+ },
+ onshufflemodechanged: function(mode) {
+ console.log('Shuffle mode changed to: ' + mode);
+ },
+ onrepeatmodechanged: function(mode) {
+ console.log('Repeat mode changed to: ' + mode);
+ },
+ onmetadatachanged: function(metadata) {
+ console.log('Playback metadata changed: ' + JSON.stringify(metadata));
+ }
};
</pre>
<ol><li>Define your custom command:
<pre class="prettyprint">
-var exampleCustomCommandData =
-{
- myFilter: "rock"
+var exampleCustomCommandData = {
+ myFilter: 'rock'
};
</pre>
<li>Define a success (and optionally error) callback implementing the <code>MediaControllerSendCommandSuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerSendCommandSuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html#MediaControllerSendCommandSuccessCallback">wearable</a> applications):
<pre class="prettyprint">
-function sendCommandSuccessCallback(response)
-{
- console.log("Command executed with result: " + JSON.stringify(response));
+function sendCommandSuccessCallback(response) {
+ console.log('Command executed with result: ' + JSON.stringify(response));
}
-function sendCommandErrorCallback(e)
-{
- console.log("Error name: " + e.name + " Error message: " + e.message);
+function sendCommandErrorCallback(e) {
+ console.log('Error name: ' + e.name + ' Error message: ' + e.message);
}
</pre>
<li>Send the command to the server using the <code>sendCommand()</code> method:
<pre class="prettyprint">
-mcServerInfo.sendCommand("myPlaylistFilter", sendCommandSuccessCallback,
- sendCommandErrorCallback);
+mcServerInfo.sendCommand('myPlaylistFilter', sendCommandSuccessCallback, sendCommandErrorCallback);
</pre>
</li>
<li>Create the <code>MediaControllerReceiveCommandCallback</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerReceiveCommandCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html#MediaControllerReceiveCommandCallback">wearable</a> applications) to define a listener for receiving custom commands from a client:
<pre class="prettyprint">
-var commandReceiveListener = function(client, command, data)
-{
- console.log('command: ' + command + ' client: ' + client
- + ' data: ' + JSON.stringify(data));
+var commandReceiveListener = function(client, command, data) {
+ console.log('command: ' + command + ' client: ' + client + ' data: ' + JSON.stringify(data));
- return {reply: 'response from server'};
+ return {reply: 'response from server'};
};
</pre>
<p>The callback within the listener returns the object with the response to the client. The client can obtain this value as an argument of the success callback of the <code>sendCommand()</code> method that it used to send the command.</p>
<li>Implement the listener to handle media key state changes. The listener can contain event listeners for key press (<code>onpressed</code>) and release (<code>onreleased</code>) notifications.
<pre class="prettyprint">
-var myMediaKeyChangeListener =
-{
- onpressed: function(key)
- {
- console.log("Pressed key: " + key);
- },
- onreleased: function(key)
- {
- console.log("Released key: " + key);
- }
+var myMediaKeyChangeListener = {
+ onpressed: function(key) {
+ console.log('Pressed key: ' + key);
+ },
+ onreleased: function(key) {
+ console.log('Released key: ' + key);
+ }
}
</pre>
<pre class="prettyprint">
var latencyMode;
-try
-{
- latencyMode = tizen.playerutil.getLatencyMode();
-}
-catch (error)
-{
- console.log(error.name + ': ' + error.message);
+try {
+ latencyMode = tizen.playerutil.getLatencyMode();
+} catch (error) {
+ console.log(error.name + ': ' + error.message);
}
</pre>
<p>To set a new latency mode, use one of the available modes defined in the <code>LatencyMode</code> enumerator (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/playerutil.html#LatencyMode">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/playerutil.html#LatencyMode">wearable</a> applications):</p>
<pre class="prettyprint">
-try
-{
- tizen.playerutil.setLatencyMode('HIGH');
-}
-catch (error)
-{
- console.log(error.name + ': ' + error.message);
+try {
+ tizen.playerutil.setLatencyMode('HIGH');
+} catch (error) {
+ console.log(error.name + ': ' + error.message);
}
</pre>
var radioState = tizen.fmradio.state;
var frequencyToPlay = 99.0;
-if (radioState == "READY" || radioState == "PLAYING")
-{
- tizen.fmradio.start(frequencyToPlay);
+if (radioState == 'READY' || radioState == 'PLAYING') {
+ tizen.fmradio.start(frequencyToPlay);
}
</pre>
<p>
<pre class="prettyprint">
var radioState = tizen.fmradio.state;
-if (radioState == "PLAYING")
-{
- tizen.fmradio.stop();
+if (radioState == 'PLAYING') {
+ tizen.fmradio.stop();
}
</pre>
</li>
<p>To find a radio channel at a higher frequency than the current one, use the <code>seekUp()</code>method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html#FMRadioManager">FMRadioManager</a> interface. This function is available only in <code>PLAYING</code> radio state.</p>
<pre class="prettyprint">
-if (tizen.fmradio.state === "PLAYING")
-{
- tizen.fmradio.seekUp(successCallback, errorCallback);
+if (tizen.fmradio.state === 'PLAYING') {
+ tizen.fmradio.seekUp(successCallback, errorCallback);
}
</pre>
</li>
<p>To find a radio channel at a lower frequency than the current one, use the <code>seekDown()</code>method of the <code>FMRadioManager</code> interface. This function is available only in <code>PLAYING</code> radio state.</p>
<pre class="prettyprint">
-if (tizen.fmradio.state === "PLAYING")
-{
- tizen.fmradio.seekDown(successCallback, errorCallback);
+if (tizen.fmradio.state === 'PLAYING') {
+ tizen.fmradio.seekDown(successCallback, errorCallback);
}
</pre>
</li>
<li>To scan all available radio channels, use the <code>scanStart()</code> method of the <code>FMRadioManager</code> interface. This function is available only in the <code>READY</code> state. During scanning, the state is changed to <code>SCANNING</code>.
<pre class="prettyprint">
-var radioScanCallback =
-{
- onfrequencyfound: function(frequency)
- {
- console.log("A new frequency found: " + frequency);
- },
- onfinished: function(frequencies)
- {
- console.log(frequencies.length + "frequencies found!");
- for (var i = 0; i < frequencies.length; i++)
- {
- console.log(i + ": " + frequencies[i]);
- }
- }
+var radioScanCallback = {
+ onfrequencyfound: function(frequency) {
+ console.log('A new frequency found: ' + frequency);
+ },
+ onfinished: function(frequencies) {
+ console.log(frequencies.length + 'frequencies found!');
+ for (var i = 0; i < frequencies.length; i++) {
+ console.log(i + ': ' + frequencies[i]);
+ }
+ }
};
-if (tizen.fmradio.state === "READY")
-{
- tizen.fmradio.scanStart(radioScanCallback, errorCallback);
+if (tizen.fmradio.state === 'READY') {
+ tizen.fmradio.scanStart(radioScanCallback, errorCallback);
}
</pre>
<li>To stop scanning before all stations are found, use the <code>scanStop()</code> method:
<pre class="prettyprint">
-function successCallback()
-{
- console.log("The scanning stops");
+function successCallback() {
+ console.log('The scanning stops');
}
-if (tizen.fmradio.state === "SCANNING")
-{
- tizen.fmradio.scanStop(successCallback, errorCallback);
+if (tizen.fmradio.state === 'SCANNING') {
+ tizen.fmradio.scanStop(successCallback, errorCallback);
}
</pre>
</li>
<li>
<p>Set the <code>oninterrupted</code> listener to receive notifications when the radio is interrupted. The event handler receives the reason of the interruption (such as an incoming call or notification tone). You can also use the event handler to restart the playback.</p>
<pre class="prettyprint">
-var interruptCallback =
-{
- oninterrupted: function(reason)
- {
- console.log("Radio interrupted: " + reason);
- },
- oninterruptfinished: function()
- {
- console.log("The radio interruption finished.");
- if (tizen.radio.state === "READY")
- {
- tizen.radio.start();
- }
- }
+var interruptCallback = {
+ oninterrupted: function(reason) {
+ console.log('Radio interrupted: ' + reason);
+ },
+ oninterruptfinished: function() {
+ console.log('The radio interruption finished.');
+ if (tizen.radio.state === 'READY') {
+ tizen.radio.start();
+ }
+ }
};
tizen.fmradio.setFMRadioInterruptedListener(interruptCallback);
<ol>
<li><p>Retrieve the messaging service using the <code>getMessageServices()</code> method. The first parameter specifies the type of the messaging service to retrieve. There are 3 possible types: "messaging.sms", "messaging.mms" and "messaging.email". In the following example, the SMS service is retrieved.</p>
<pre class="prettyprint">
-function errorCallback(error)
-{
- console.log(error.name + ": " + error.message);
+function errorCallback(error) {
+ console.log(error.name + ': ' + error.message);
}
-tizen.messaging.getMessageServices("messaging.sms", serviceListCB, errorCallback);
+tizen.messaging.getMessageServices('messaging.sms', serviceListCB, errorCallback);
</pre></li>
<li><p>In the success callback of the <code>getMessageServices()</code> method, use the <code>Message</code> interface to define the content and attributes of the message, and then send the message using the <code>sendMessage()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageService">MessageService</a> interface. The <code>sendMessage()</code> method requires both success and error event handlers. Depending on the result of the sending operation, the message is moved to the device's Sent Items or Drafts folder, and additionally stored in the message storage database.</p>
<p>If the message is not ready to be sent yet, save the message draft using the <code>addDraftMessage()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface.</p>
<pre class="prettyprint">
-function onAddSuccess()
-{
- console.log("Successfully added");
+function onAddSuccess() {
+ console.log('Successfully added');
}
-function serviceListCB(services)
-{
- /* Define SMS message */
- var msg = new tizen.Message("messaging.sms",
- {
- plainBody: "I will arrive in 10 minutes.",
- to: ["+34666666666", "+34888888888"]
- });
-
- var msgReady = true;
-
- if (msgReady)
- {
- /* Send SMS message */
- services[0].sendMessage(msg, messageSent, errorCallback);
- }
- else
- {
- /* Save a draft */
- services[0].messageStorage.addDraftMessage(msg, onAddSuccess, errorCallback);
- }
+function serviceListCB(services) {
+ /* Define SMS message */
+ var msg = new tizen.Message('messaging.sms', {
+ plainBody: 'I will arrive in 10 minutes.',
+ to: ['+34666666666', '+34888888888']
+ });
+
+ var msgReady = true;
+
+ if (msgReady) {
+ /* Send SMS message */
+ services[0].sendMessage(msg, messageSent, errorCallback);
+ } else {
+ /* Save a draft */
+ services[0].messageStorage.addDraftMessage(msg, onAddSuccess, errorCallback);
+ }
}
</pre>
<p>In case you are sending MMS or email messages with attachments, add the attachments as an array of <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageAttachment">MessageAttachment</a> objects with the file path and the MIME type (<code>image/png</code>, <code>text/pdf</code>, or <code>text/html</code>) defined for each object.</p>
<p>Assign the array to the <code>attachments</code> attribute of the <code>Message</code> object.</p>
<pre class="prettyprint">
-var msg = new tizen.Message("messaging.email");
-msg.attachments = [new tizen.MessageAttachment("images/myimage.png", "image/png"),
- new tizen.MessageAttachment("docs/mydoc.pdf","text/pdf")];
+var msg = new tizen.Message('messaging.email');
+msg.attachments = [new tizen.MessageAttachment('images/myimage.png', 'image/png'),
+ new tizen.MessageAttachment('docs/mydoc.pdf', 'text/pdf')];
</pre></li>
<li><p>Define the message sending success callback that is called if the message is sent successfully. (For email, that means that the message is sent to the email delivery system, not to the final recipient of the message.) </p>
<p>For messaging technologies, such as SMS, where the message is sent individually to every message recipient, the success callback must be invoked individually for each recipient.</p>
<pre class="prettyprint">
-function messageSent(recipients)
-{
- for (var i = 0; i < recipients.length; i++)
- {
- console.log("The SMS has been sent to " + recipients[i]);
- }
+function messageSent(recipients) {
+ for (var i = 0; i < recipients.length; i++) {
+ console.log('The SMS has been sent to ' + recipients[i]);
+ }
}
</pre>
<p>Defining a sending error callback allows you to handle all possible errors and exceptions that can occur causing the message delivery to fail.</p> </li>
<ol>
<li>To check how many SIM cards are available, call the <code>getCount()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">SystemInfo</a> interface.
<pre class="prettyprint">
-var count = tizen.systeminfo.getCount("SIM");
-if (count > 1)
-{
- console.log("Dual SIM is supported");
+var count = tizen.systeminfo.getCount('SIM');
+if (count > 1) {
+ console.log('Dual SIM is supported');
}
</pre>
</li>
<li>To retrieve additional information on the available SIM cards, use the <code>getPropertyValueArray()</code> method of the <code>SystemInfo</code> interface:
<pre class="prettyprint">
-function getPropertySuccess(sims)
-{
- for (var i = 0; i < sims.length; i++)
- {
- console.log("SIM" + (i+1) + " - " + sims[i].msisdn
- + " (" + sims[i].operatorName + ") " + sims[i].state);
- }
+function getPropertySuccess(sims) {
+ for (var i = 0; i < sims.length; i++) {
+ console.log('SIM' + (i+1) + ' - ' + sims[i].msisdn + ' (' + sims[i].operatorName + ') ' + sims[i].state);
+ }
}
-tizen.systeminfo.getPropertyValueArray("SIM", getPropertySuccess);
+tizen.systeminfo.getPropertyValueArray('SIM', getPropertySuccess);
</pre>
<p>The information can be presented to the user to let them select the SIM card they want.</p>
</li>
<li>To send the message using the second SIM card, call the <code>sendMessage()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageService">MessageService</a> interface specifying the SIM index as <code>2</code>:
<pre class="prettyprint">
-function sendSuccess()
-{
- console.log("Message has been sent");
+function sendSuccess() {
+ console.log('Message has been sent');
}
-function serviceSuccess(messageService)
-{
- message = new Message(messageService.type,
- {
- to: ["0001"],
- plainBody: "Surprise!"
- });
- /* SIM is selected (first SIM - 1, second SIM - 2) */
- messageService.sendMessage(message, sendSuccess, null, 2);
+function serviceSuccess(messageService) {
+ message = new Message(messageService.type, {
+ to: ['0001'],
+ plainBody: 'Surprise!'
+ });
+ /* SIM is selected (first SIM - 1, second SIM - 2) */
+ messageService.sendMessage(message, sendSuccess, null, 2);
}
-tizen.messaging.getMessageServices("messaging.sms", serviceSuccess);
+tizen.messaging.getMessageServices('messaging.sms', serviceSuccess);
</pre>
</li>
</ol>
<p>When searching for messages, you can create <a href="../data/data_filter_w.htm#filter">attribute filters</a>, <a href="../data/data_filter_w.htm#range">attribute range filters</a>, and <a href="../data/data_filter_w.htm#composite">composite filters</a> based on <a href="../data/data_filter_w.htm#messaging">specific filter attributes</a>. You can also <a href="../data/data_filter_w.htm#use_modes">sort the search results</a>.</p>
<pre class="prettyprint">
var emailService;
-function serviceListCB(services)
-{
- emailService = services[0];
- /* Set the attribute filter */
- var filter = new tizen.AttributeFilter("from", "CONTAINS", "me");
+function serviceListCB(services) {
+ emailService = services[0];
+ /* Set the attribute filter */
+ var filter = new tizen.AttributeFilter('from', 'CONTAINS', 'me');
- emailService.messageStorage.findMessages(filter, messageArrayCB);
+ emailService.messageStorage.findMessages(filter, messageArrayCB);
}
-tizen.messaging.getMessageServices("messaging.email", serviceListCB);
+tizen.messaging.getMessageServices('messaging.email', serviceListCB);
</pre>
<p>The <code>findMessages()</code> method returns an array of <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#Message">Message</a> objects as the search result.</p> <p>The search result does not contain the actual bodies of the messages. To <a href="#Synchronizing_with_the_Server">load a message body</a>, call the <code>loadMessageBody()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageService">MessageService</a> interface.</p> </li>
<li><p>To update a message in the message storage, use the <code>updateMessages()</code> method. The method uses an array of <code>Message</code> objects found previously by the <code>findMessages()</code> method as a parameter.</p>
<p>In the following example, the <code>isRead</code> attribute of the first <code>Message</code> object in the given array is updated to <code>true</code>.</p>
<pre class="prettyprint">
-function successCallback()
-{
- console.log("Success");
+function successCallback() {
+ console.log('Success');
}
-function messageArrayCB(messages)
-{
- messages[0].isRead = true;
- emailService.messageStorage.updateMessages(messages, successCallback);
+function messageArrayCB(messages) {
+ messages[0].isRead = true;
+ emailService.messageStorage.updateMessages(messages, successCallback);
}
</pre></li>
<li><p>To delete a message from the message storage, use the <code>removeMessages()</code> method:</p>
<pre class="prettyprint">
-function messageArrayCB(messages)
-{
- emailService.messagingStorage.removeMessages(messages, successCallback);
+function messageArrayCB(messages) {
+ emailService.messagingStorage.removeMessages(messages, successCallback);
}
</pre></li>
</ol>
<pre class="prettyprint">
var service;
-function serviceListCB(services)
-{
- console.log("Found " + services.length + " email services");
- service = services[0];
+function serviceListCB(services) {
+ console.log('Found ' + services.length + ' email services');
+ service = services[0];
}
-tizen.messaging.getMessageServices("messaging.email", serviceListCB);
+tizen.messaging.getMessageServices('messaging.email', serviceListCB);
</pre></li>
<li><p>Define a success handler implementing the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageFolderArraySuccessCallback">MessageFolderArraySuccessCallback</a> interface, and optionally an error handler too:</p>
<pre class="prettyprint">
-function onFindFolders(folders)
-{
- console.log(folders.length + " folder(s) found.");
+function onFindFolders(folders) {
+ console.log(folders.length + ' folder(s) found.');
- for (var i = 0; i < folders.length; i++)
- {
- console.log("Folder " + (i + 1) + ": " + folders[i].name);
- }
+ for (var i = 0; i < folders.length; i++) {
+ console.log('Folder ' + (i + 1) + ': ' + folders[i].name);
+ }
}
-function onFindFoldersFail(error)
-{
- console.log("Error occurred: " + error.name);
+function onFindFoldersFail(error) {
+ console.log('Error occurred: ' + error.name);
}
</pre></li>
<li><p>Define a filter (for attributes supported by the message folder filter, see <a href="../data/data_filter_w.htm#messaging">Messaging Filter Attributes</a>):</p>
<pre class="prettyprint">
-var filter = new tizen.AttributeFilter("serviceId", "EXACTLY", service.id);
+var filter = new tizen.AttributeFilter('serviceId', 'EXACTLY', service.id);
</pre></li>
<li><p>To get all message folders, use the <code>findFolders()</code> method of the <code>MessageStorage</code> interface:</p>
<pre class="prettyprint">
<ol>
<li><p>Retrieve the messaging service using the <code>getMessageServices()</code> method.</p>
<pre class="prettyprint">
-tizen.messaging.getMessageServices("messaging.email", serviceListCB, errorCallback);
+tizen.messaging.getMessageServices('messaging.email', serviceListCB, errorCallback);
</pre></li>
<li><p>Search for all email messages with attachments using the <code>findMessages()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface:</p>
<pre class="prettyprint">
-service.messageStorage.findMessages(new tizen.AttributeFilter("hasAttachment",
- "EXACTLY", true),
+service.messageStorage.findMessages(new tizen.AttributeFilter('hasAttachment', 'EXACTLY', true),
messageQueryCallback);
</pre></li>
<li><p>To load a message body, use the <code>loadMessageBody()</code> method of the <code>MessageService</code> interface:</p>
<pre class="prettyprint">
/* Success callback for the search operation */
-function messageQueryCallback(messages)
-{
- for (var i = 0; i < messages.length; i++)
- {
- var message = messages[i];
- if (!message.body.loaded)
- {
- tizen.messaging.loadMessageBody(message, successCallback, errorCallback);
+function messageQueryCallback(messages) {
+ for (var i = 0; i < messages.length; i++) {
+ var message = messages[i];
+ if (!message.body.loaded) {
+ tizen.messaging.loadMessageBody(message, successCallback, errorCallback);
</pre></li>
<li><p>To download the message attachments, use the <code>loadMessageAttachment()</code> method with an array of attachments (with valid file paths) as a parameter:</p>
<pre class="prettyprint">
- tizen.messaging.loadMessageAttachment(message.attachments[0], successCallback,
- errorCallback);
+ tizen.messaging.loadMessageAttachment(message.attachments[0], successCallback,
+ errorCallback);
}
}
}
<li><p>To synchronize all account folders, use the <code>sync()</code> method:</p>
<pre class="prettyprint">
/* Synchronize the folders in the success event handler */
-function servicesListSuccessCB(services)
-{
- services[0].sync(serviceSyncedCB, null, 30);
+function servicesListSuccessCB(services) {
+ services[0].sync(serviceSyncedCB, null, 30);
}
/* Get the email service */
-tizen.messaging.getMessageServices("messaging.email", servicesListSuccessCB);
+tizen.messaging.getMessageServices('messaging.email', servicesListSuccessCB);
</pre></li>
<li>To synchronize a specific folder, use the <code>syncFolder()</code> method. In the following example, only folders containing "INBOX" in their name are synchronized.
<pre class="prettyprint">
var emailService; /* Assume email service is initialized */
-function serviceCallback(services)
-{
- emailService = services[0];
+function serviceCallback(services) {
+ emailService = services[0];
}
/* Synchronize in the search success event handler */
-function folderQueryCallback(folders)
-{
- for (var i = 0; i < folders.length; i++)
- {
- if (folders[i].type === "INBOX")
- {
- emailService.syncFolder(folders[i], folderSyncedCB, null, 30);
- }
- }
-};
+function folderQueryCallback(folders) {
+ for (var i = 0; i < folders.length; i++) {
+ if (folders[i].type === 'INBOX') {
+ emailService.syncFolder(folders[i], folderSyncedCB, null, 30);
+ }
+ }
+}
/* Get the email service */
-tizen.messaging.getMessageServices("messaging.email", serviceCallback,
- errorCallback);
+tizen.messaging.getMessageServices('messaging.email', serviceCallback, errorCallback);
/* Search for specific folders */
-var filter = new tizen.AttributeFilter("serviceId", "EXISTS");
+var filter = new tizen.AttributeFilter('serviceId', 'EXISTS');
emailService.messageStorage.findFolders(filter, folderQueryCallback));
</pre></li>
</ol> </li>
</pre></li>
<li><p>Define the event handlers for different notifications by implementing the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessagesChangeCallback">MessagesChangeCallback</a> listener interface:</p>
<pre class="prettyprint">
-var messageChangeCallback =
-{
- /* When messages are updated */
- messagesupdated: function(messages)
- {
- console.log(messages.length + " message(s) updated");
- },
-
- /* When messages are added */
- messagesadded: function(messages)
- {
- console.log(messages.length + " message(s) added");
- },
-
- /* When messages are deleted */
- messagesremoved: function(messages)
- {
- console.log(messages.length + " message(s) removed");
- }
+var messageChangeCallback = {
+ /* When messages are updated */
+ messagesupdated: function(messages) {
+ console.log(messages.length + ' message(s) updated');
+ },
+
+ /* When messages are added */
+ messagesadded: function(messages) {
+ console.log(messages.length + ' message(s) added');
+ },
+
+ /* When messages are deleted */
+ messagesremoved: function(messages) {
+ console.log(messages.length + ' message(s) removed');
+ }
};
</pre></li>
<li>Register the listener to use the defined event handlers:
Define the data to be used when this process
is launched by the notification service
*/
-var service =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/push_test");
+var service = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/push_test');
/* Define the error callback */
-function errorCallback(response)
-{
- console.log("The following error occurred: " + response.name);
+function errorCallback(response) {
+ console.log('The following error occurred: ' + response.name);
}
/* Define the registration success callback */
-function registerSuccessCallback(id)
-{
- console.log("Registration succeeded with id: " + id);
+function registerSuccessCallback(id) {
+ console.log('Registration succeeded with id: ' + id);
}
</pre>
</li>
<li><p>Define event handlers:</p>
<pre class="prettyprint">
/* Define the error callback */
-function errorCallback(response)
-{
- console.log("The following error occurred: " + response.name);
+function errorCallback(response) {
+ console.log('The following error occurred: ' + response.name);
}
/* Define the registration success callback */
-function registerSuccessCallback(id)
-{
- console.log("Registration succeeded with id: " + id);
+function registerSuccessCallback(id) {
+ console.log('Registration succeeded with id: ' + id);
}
/* Define the state change callback */
-function stateChangeCallback(state)
-{
- console.log("The state is changed to: " + state);
-
- if (state == "UNREGISTERED")
- {
- /* Request application registration */
- tizen.push.register(registerSuccessCallback, errorCallback);
- }
+function stateChangeCallback(state) {
+ console.log('The state is changed to: ' + state);
+
+ if (state == 'UNREGISTERED') {
+ /* Request application registration */
+ tizen.push.register(registerSuccessCallback, errorCallback);
+ }
}
/* Define the notification callback */
-function notificationCallback(notification)
-{
- console.log("A notification arrives.");
+function notificationCallback(notification) {
+ console.log('A notification arrives.');
}
</pre>
</li>
<p>If the registration is successful, the <code>registerSuccessCallback()</code> callback is called, and the registration ID is passed as a parameter. Any time after a successful registration, you can get the registration ID using the <code>getRegistrationId()</code> method:</p>
<pre class="prettyprint">
var registrationId = tizen.push.getRegistrationId();
-if (registrationId != null)
-{
- console.log("The registration id: " + registrationId);
+if (registrationId != null) {
+ console.log('The registration id: ' + registrationId);
}
</pre>
<p>Since Tizen 3.0, you must connect to the push service before getting the registration ID.</p>
<ol>
<li><p>Define the event handlers for the push connection. The push notifications are delivered in the success event handler.</p>
<pre class="prettyprint">
-function errorCallback(response)
-{
- console.log('The following error occurred: ' + response.name);
+function errorCallback(response) {
+ console.log('The following error occurred: ' + response.name);
}
-function notificationCallback(message)
-{
- console.log("New push message: " + message.alertMessage
- + ", date: " + message.date
- + ", data: " + message.appData);
+function notificationCallback(message) {
+ console.log('New push message: ' + message.alertMessage + ', date: ' + message.date + ', data: ' + message.appData);
}
/* Since Tizen 3.0, you must provide PushRegistrationStateChangeCallback */
/* Define the state change callback */
-function stateChangeCallback(state)
-{
- console.log("The state is changed to: " + state);
+function stateChangeCallback(state) {
+ console.log('The state is changed to: ' + state);
}
</pre>
<p>The following table lists the fields available in the notification callback.</p>
<li>Call the <code>connectService()</code> method to connect to the Tizen push server and receive new push notifications:
<pre class="prettyprint">
/* Method to be called when the notification message arrives */
-function notificationCallback(message)
-{
- console.log("New push message: " + message.alertMessage
- + ", date: " + message.date
- + ", data: " + message.appData);
+function notificationCallback(message) {
+ console.log('New push message: ' + message.alertMessage + ', date: ' + message.date + ', data: ' + message.appData);
}
tizen.push.connectService(notificationCallback);
<p>Call the <code>connect()</code> method to connect to the Tizen push server, and retrieve any unread messages with the <code>getUnreadNotifications()</code> method in the state change callback when the application is registered:</p>
<pre class="prettyprint">
/* Define the error callback */
-function errorCallback(response)
-{
- console.log("The following error occurred: " + response.name);
+function errorCallback(response) {
+ console.log('The following error occurred: ' + response.name);
}
/* Define the registration success callback */
-function registerSuccessCallback(id)
-{
- console.log("Registration succeeded with id: " + id);
+function registerSuccessCallback(id) {
+ console.log('Registration succeeded with id: ' + id);
}
/* Define the state change callback */
-function stateChangeCallback(state)
-{
- console.log("The state is changed to: " + state);
-
- if (state === "UNREGISTERED")
- {
- /* Request application registration */
- tizen.push.register(registerSuccessCallback, errorCallback);
- }
- else if (state === "REGISTERED")
- {
- /* Gets unread push notifications */
- tizen.push.getUnreadNotifications();
- }
+function stateChangeCallback(state) {
+ console.log('The state is changed to: ' + state);
+
+ if (state === 'UNREGISTERED') {
+ /* Request application registration */
+ tizen.push.register(registerSuccessCallback, errorCallback);
+ } else if (state === 'REGISTERED') {
+ /* Gets unread push notifications */
+ tizen.push.getUnreadNotifications();
+ }
}
/* Define the notification callback */
-function notificationCallback(notification)
-{
- console.log("A notification arrives.");
+function notificationCallback(notification) {
+ console.log('A notification arrives.');
}
tizen.push.connect(stateChangeCallback, notificationCallback, errorCallback);
<ol>
<li>Get the requested application control with the <code>getRequestedAppControl()</code> method:
<pre class="prettyprint">
-var requestedAppControl =
- tizen.application.getCurrentApplication().getRequestedAppControl().appControl;
+var requestedAppControl = tizen.application.getCurrentApplication().getRequestedAppControl().appControl;
</pre></li>
<li>Determine the reason for the application launch. If the reason for the launch is a notification, retrieve the latest push message.
<pre class="prettyprint">
-for (var i = 0; i < requestedAppControl.data.length; ++i)
-{
- if (requestedAppControl.data[i].key
- === 'http://tizen.org/appcontrol/data/push/launch_type')
- {
- /* Launch type is 'registration_change' or 'notification' */
- var appData = requestedAppControl.data[i].value[0];
- console.log('launch_type: ' + appData);
- if (appData === 'registration_change')
- {
- /* Launched due to change in the registration state */
- }
- else if (appData === 'notification')
- {
- /* Launched due to a notification */
- try
- {
- /* Retrieve the latest message */
- var pushMessage = tizen.push.getPushMessage();
- /* <a href="#GetPushMessage">Handle the retrieved message</a> */
- }
- catch (error)
- {
- console.log(error.name + ': ' + error.message);
- }
- }
- }
+for (var i = 0; i < requestedAppControl.data.length; ++i) {
+ if (requestedAppControl.data[i].key === 'http://tizen.org/appcontrol/data/push/launch_type') {
+ /* Launch type is 'registration_change' or 'notification' */
+ var appData = requestedAppControl.data[i].value[0];
+ console.log('launch_type: ' + appData);
+ if (appData === 'registration_change') {
+ /* Launched due to change in the registration state */
+ } else if (appData === 'notification') {
+ /* Launched due to a notification */
+ try {
+ /* Retrieve the latest message */
+ var pushMessage = tizen.push.getPushMessage();
+ /* <a href="#GetPushMessage">Handle the retrieved message</a> */
+ } catch (error) {
+ console.log(error.name + ': ' + error.message);
+ }
+ }
+ }
}
</pre></li>
</ol>
</pre></li>
<li>Read the message content:
<pre class="prettyprint">
-if (pushMessage)
-{
- console.log('notification received on ' + pushMessage.date
- + ' from: ' + pushMessage.sender);
- console.log('Details:');
- console.log(' - data: ' + pushMessage.appData);
- console.log(' - alert message: ' + pushMessage.alertMessage);
- console.log(' - message: ' + pushMessage.message);
- console.log(' - session: ' + pushMessage.sessionInfo);
- console.log(' - request ID: ' + pushMessage.requestId);
- console.log(' - type: ' + pushMessage.type);
+if (pushMessage) {
+ console.log('notification received on ' + pushMessage.date + ' from: ' + pushMessage.sender);
+ console.log('Details:');
+ console.log(' - data: ' + pushMessage.appData);
+ console.log(' - alert message: ' + pushMessage.alertMessage);
+ console.log(' - message: ' + pushMessage.message);
+ console.log(' - session: ' + pushMessage.sessionInfo);
+ console.log(' - request ID: ' + pushMessage.requestId);
+ console.log(' - type: ' + pushMessage.type);
}
</pre></li>
</ol>
<li><p>Define the status notification properties of the <code>StatusNotificationInit</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#StatusNotificationInit">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#StatusNotificationInit">wearable</a> applications):</p>
<pre class="prettyprint">
/* Application control */
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/create_content",
- null, "image/jpg", null, null);
-
-var notificationDict =
-{
- /* Notification content */
- content: "This is a simple notification.",
- /* Path to the notification icon */
- iconPath: "images/image1.jpg",
- /* Path to the sound file to be played when the notification is displayed */
- soundPath: "music/Over the horizon.mp3",
- /* Device vibrates when the notification is displayed */
- vibration: true,
- /* Application control to be launched when the user selects the notification */
- appControl: appControl
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/create_content',
+ null, 'image/jpg', null, null);
+
+var notificationDict = {
+ /* Notification content */
+ content: 'This is a simple notification.',
+ /* Path to the notification icon */
+ iconPath: 'images/image1.jpg',
+ /* Path to the sound file to be played when the notification is displayed */
+ soundPath: 'music/Over the horizon.mp3',
+ /* Device vibrates when the notification is displayed */
+ vibration: true,
+ /* Application control to be launched when the user selects the notification */
+ appControl: appControl
};
</pre>
<p>The path in the <code>iconPath</code> and <code>soundPath</code> parameters means a relative file location defined in the Filesystem API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">wearable</a> applications). The path is not an absolute file location, but instead uses a <a href="../data/file_system_w.htm">virtual root location</a> (such as <code>images</code> in <code>images/image1.jpg</code>).</p></li>
<li><p>To be able to display the notification, create a <code>StatusNotification</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#StatusNotification">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#StatusNotification">wearable</a> applications) with the status notification type, title, and the additional notification properties defined in the previous step.</p>
<pre class="prettyprint">
-var notification = new tizen.StatusNotification("SIMPLE", "Simple notification",
- notificationDict);
+var notification = new tizen.StatusNotification('SIMPLE', 'Simple notification', notificationDict);
</pre></li>
<li><p>To post the notification, use the <code>post()</code> method of the <code>NotificationManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#NotificationManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#NotificationManager">wearable</a> applications):</p>
<pre class="prettyprint">
<li><p>Define the status notification properties of the <code>StatusNotificationInit</code> dictionary (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#StatusNotificationInit">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#StatusNotificationInit">wearable</a> applications):</p>
<pre class="prettyprint">
/* Application control */
-var appControl =
- new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/create_content",
- null, "image/jpg", null, null);
-
-var notificationDict =
-{
- content: "This is a progress notification.",
- iconPath: "images/image1.jpg",
- vibration: false,
- appControl: appControl,
- progressType: "PERCENTAGE",
- progressValue: 0
+var appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/create_content',
+ null, 'image/jpg', null, null);
+
+var notificationDict = {
+ content: 'This is a progress notification.',
+ iconPath: 'images/image1.jpg',
+ vibration: false,
+ appControl: appControl,
+ progressType: 'PERCENTAGE',
+ progressValue: 0
};
</pre>
<p>The path in the <code>iconPath</code> and <code>soundPath</code> parameters means a file location defined in the Filesystem API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">wearable</a> applications). The path is not an absolute file location, but instead uses a <a href="../data/file_system_w.htm">virtual root location</a> (such as <code>images</code> in <code>images/image1.jpg</code>).</p></li>
<li><p>To be able to display the notification, create a <code>StatusNotification</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#StatusNotification">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#StatusNotification">wearable</a> applications) with the status notification type, title, and the additional notification properties defined in the previous step:</p>
<pre class="prettyprint">
-var notification =
- new tizen.StatusNotification("PROGRESS", "Progress notification", notificationDict);
+var notification = new tizen.StatusNotification('PROGRESS', 'Progress notification', notificationDict);
</pre></li>
<li><p>Define a function which uses the <code>update()</code> method of the <code>NotificationManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#NotificationManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#NotificationManager">wearable</a> applications) to update the posted notification every second:</p>
<pre class="prettyprint">
-function updateProgressNotification(progress)
-{
- if (progress <= 100)
- {
- notification.progressValue = progress;
- tizen.notification.update(notification);
- setTimeout(function()
- {
+function updateProgressNotification(progress) {
+ if (progress <= 100) {
+ notification.progressValue = progress;
+ tizen.notification.update(notification);
+ setTimeout(function() {
updateProgressNotification(progress + 10);
- }, 1000);
- }
- else
- {
- tizen.notification.remove(notification.id);
- }
+ }, 1000);
+ } else {
+ tizen.notification.remove(notification.id);
+ }
}
</pre></li>
<li><p>To post the notification, use the <code>post()</code> method of the <code>NotificationManager</code> interface. If the progress value is set, the progress bar is displayed in the notification. The progress value can change the amount of progress as it moves forward or backward.</p><p>The application must keep the progress value for its job, because the saved value in the notification status tray can be different (rounded) from the exact progress value.</p>
var index = 0;
/* For each notification, write the ID and title in the console log */
-for (index = 0; index < notifications.length; index++)
-{
- console.log(notifications[index].id);
- console.log(notifications[index].title);
+for (index = 0; index < notifications.length; index++) {
+ console.log(notifications[index].id);
+ console.log(notifications[index].title);
}
</pre></li>
</ol></li>
<li><p>To update a previously posted notification, use the <code>update()</code> method by specifying the updated notification object:</p>
<pre class="prettyprint">
-myNotification.content = "My notification";
+myNotification.content = 'My notification';
tizen.notification.update(myNotification);
</pre></li>
<li>To remove notifications:
<li>Save the template with the <code>saveNotificationAsTemplate()</code> method of the <code>NotificationManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#NotificationManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#NotificationManager">wearable</a> applications):
<pre class="prettyprint">
try {
- var templateName = "importantNoti";
- tizen.notification.saveNotificationAsTemplate(templateName, myNotification);
-} catch(e) {
- console.log("Error " + e.message + " occured");
+ var templateName = 'importantNoti';
+ tizen.notification.saveNotificationAsTemplate(templateName, myNotification);
+} catch (e) {
+ console.log('Error ' + e.message + ' occurred');
}
</pre></li></ol>
</li>
<li>To use the template when creating a new notification, use the <code>createNotificationFromTemplate()</code> method of the <code>NotificationManager</code> interface:
<pre class="prettyprint">
try {
- var newTemplateNotification = tizen.notification.createNotificationFromTemplate(templateName);
- console.log("Content of new notification: " + content);
+ var newTemplateNotification = tizen.notification.createNotificationFromTemplate(templateName);
+ console.log('Content of new notification: ' + content);
} catch (e) {
- console.log("Error " + e.message + " occured");
+ console.log('Error ' + e.message + ' occurred');
}
</pre></li></ul>
<tizen:icon section="Account">icon.png</tizen:icon>
<tizen:icon section="AccountSmall">icon.png</tizen:icon>
<tizen:display-name xml:lang="en-gb">Test</tizen:display-name>
- <tizen:capability>
- http://tizen.org/account/capability/contact
- </tizen:capability>
+ <tizen:capability>http://tizen.org/account/capability/contact</tizen:capability>
</tizen:account>
</pre>
</li>
<li>To retrieve information about all available accounts, use the <code>getAccounts()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#AccountManager">AccountManager</a> interface:
<pre class="prettyprint">
-function getAccountsSuccess(accounts)
-{
- for (var i = 0; i < accounts.length; i++)
- {
- /* Use the retrieved accounts */
- }
+function getAccountsSuccess(accounts) {
+ for (var i = 0; i < accounts.length; i++) {
+ /* Use the retrieved accounts */
+ }
}
-function getAccountsError(error)
-{
- console.log('Error: ' + error.message);
+function getAccountsError(error) {
+ console.log('Error: ' + error.message);
}
tizen.account.getAccounts(getAccountsSuccess, getAccountsError);
</pre>
<li>To get information about all available account providers, use the <code>getProviders()</code> method of the <code>AccountManager</code> interface:
<pre class="prettyprint">
-function getProvidersSuccess(providers)
-{
- /* Providers is an array whose members are providers with contact capability */
+function getProvidersSuccess(providers) {
+ /* Providers is an array whose members are providers with contact capability */
}
-function getProvidersError(error)
-{
- console.log('Error: ' + error.message);
+function getProvidersError(error) {
+ console.log('Error: ' + error.message);
}
-tizen.account.getProviders(getProvidersSuccess, getProvidersError,
- "http://tizen.org/account/capability/contact");
+tizen.account.getProviders(getProvidersSuccess, getProvidersError, 'http://tizen.org/account/capability/contact');
</pre>
</li>
</ul>
<li>Create an instance of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#Account">Account</a> interface:
<pre class="prettyprint">
-var account =
- new tizen.Account(accountProvider, {userName: 'admin', iconUri: 'path/to/icon.jpg'});
+var account = new tizen.Account(accountProvider, {userName: 'admin', iconUri: 'path/to/icon.jpg'});
</pre>
</li>
<li>Add the account to the account database:
<li>Define a listener implementing the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#AccountChangeCallback">AccountChangeCallback</a> interface:
<pre class="prettyprint">
-var accountChangeListener =
-{
- onadded: function(account)
- {
- /* Called when an account is added */
- },
- onremoved: function(accountId)
- {
- /* Called when an account is removed */
- },
- onupdated: function(account)
- {
- /* Called when a registered account is changed */
- }
+var accountChangeListener = {
+ onadded: function(account) {
+ /* Called when an account is added */
+ },
+ onremoved: function(accountId) {
+ /* Called when an account is removed */
+ },
+ onupdated: function(account) {
+ /* Called when a registered account is changed */
+ }
};
</pre>
</li>
<li>To retrieve all extended data for an account, use the asynchronous version of the <code>getExtendedData()</code> method. The success callback contains an array of the extended data key-value pairs.
<pre class="prettyprint">
-account.getExtendedData(function(extendedData)
- {
- for (var i = 0; i < extendedData.length; i++)
- {
- var key = extendedData.key;
- var value = extendedData.value;
- console.log(key + ": " + value);
- }
- }, function(e)
- {
- console.log("Error: " + e.message);
- });
+account.getExtendedData(function(extendedData) {
+ for (var i = 0; i < extendedData.length; i++) {
+ var key = extendedData.key;
+ var value = extendedData.value;
+ console.log(key + ': ' + value);
+ }
+}, function(e) {
+ console.log('Error: ' + e.message);
+});
</pre>
</li></ul></li></ul></li>
<ol>
<li><p>Create an instance of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkFolder">BookmarkFolder</a> interface by specifying the bookmark folder name:</p>
<pre class="prettyprint">
-var folder1 = new tizen.BookmarkFolder("folder1");
+var folder1 = new tizen.BookmarkFolder('folder1');
</pre></li>
<li><p>Create an instance of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkItem">BookmarkItem</a> interface by specifying the bookmark item name and URL:</p>
<pre class="prettyprint">
-var tizen = new tizen.BookmarkItem("tizen", "https://www.tizen.org");
+var tizen = new tizen.BookmarkItem('tizen', 'https://www.tizen.org');
</pre></li>
<li><p>Use the <code>add()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkManager">BookmarkManager</a> interface to add both a bookmark folder and a bookmark to the root bookmark folder:</p>
<pre class="prettyprint">
<ol>
<li><p>Create an instance of the <code>BookmarkFolder</code> and <code>BookmarkItem</code> interface:</p>
<pre class="prettyprint">
-var folder2 = new tizen.BookmarkFolder("folder2");
-var developerTizen =
- new tizen.BookmarkItem("developerTizen", "https://developer.tizen.org");
+var folder2 = new tizen.BookmarkFolder('folder2');
+var developerTizen = new tizen.BookmarkItem('developerTizen', 'https://developer.tizen.org');
</pre></li>
<li><p>Use the <code>add()</code> method to add a folder and a bookmark to a bookmark subfolder by specifying the parent bookmark folder name:</p>
<pre class="prettyprint">
<li>Define a success callback for the <code>getAccounts()</code> method. The callback receives a list of <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#Account">Account</a> objects. Use the first account ID to construct a new <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object.
<p>Add the new calendar to the system using the <code>addCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface:</p>
<pre class="prettyprint">
-function getAccountsSuccess(accounts)
-{
- var account = accounts[0];
- if (account)
- {
- /* New calendar can be created and added */
- myCalendar = new tizen.Calendar(account.id, "remote calendar", "TASK");
- tizen.calendar.addCalendar(myCalendar);
- console.log("New calendar created with ID=" + myCalendar.id);
- }
+function getAccountsSuccess(accounts) {
+ var account = accounts[0];
+ if (account) {
+ /* New calendar can be created and added */
+ myCalendar = new tizen.Calendar(account.id, 'remote calendar', 'TASK');
+ tizen.calendar.addCalendar(myCalendar);
+ console.log('New calendar created with ID=' + myCalendar.id);
+ }
}
</pre></li>
<li>To retrieve available accounts, use the <code>getAccounts()</code> method. The following method call invokes the <code>getAccountsSuccess</code> event handler defined above:
<li>To retrieve the default calendar, use the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.
<p>The following example retrieves the event-type default calendar:</p>
<pre class="prettyprint">
-tizen.calendar.getDefaultCalendar("EVENT");
+tizen.calendar.getDefaultCalendar('EVENT');
</pre></li>
<li>To retrieve all the available calendars as an array, use the <code>getCalendars()</code> method.
<p>The following example retrieves all event-type calendars:</p>
<pre class="prettyprint">
-tizen.calendar.getCalendars("EVENT", calendarListCallback, errorCallback);
+tizen.calendar.getCalendars('EVENT', calendarListCallback, errorCallback);
</pre></li>
<li>To retrieve a special calendar, which combines events (or tasks) from all calendars of the same type, use the <code>getUnifiedCalendar()</code> method of the <code>CalendarManager</code> interface.
<p>The following example retrieves a unified event-type calendar:</p>
<pre class="prettyprint">
-tizen.calendar.getUnifiedCalendar("EVENT");
+tizen.calendar.getUnifiedCalendar('EVENT');
</pre></li>
</ul>
<ol>
<li><p>Retrieve the default system calendar using the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as an event.</p>
<pre class="prettyprint">
-var calendar = tizen.calendar.getDefaultCalendar("EVENT");
+var calendar = tizen.calendar.getDefaultCalendar('EVENT');
</pre></li>
<li><p>Create a <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarEvent">CalendarEvent</a> object and define the event properties:</p>
<pre class="prettyprint">
-var ev = new tizen.CalendarEvent
-({
- description:"HTML5 Introduction",
- summary:"HTML5 Webinar",
- startDate: new tizen.TZDate(2011, 3, 30, 10, 0),
- duration: new tizen.TimeDuration(1, "HOURS"),
- location:"Huesca",
+var ev = new tizen.CalendarEvent({
+ description:'HTML5 Introduction',
+ summary:'HTML5 Webinar',
+ startDate: new tizen.TZDate(2011, 3, 30, 10, 0),
+ duration: new tizen.TimeDuration(1, 'HOURS'),
+ location:'Huesca',
</pre></li>
<li><p>To make a recurring event, define a recurrence rule.</p> <p>In this example, the event repeats once a day for 3 days.</p>
<pre class="prettyprint">
- recurrenceRule: new tizen.CalendarRecurrenceRule("DAILY", {occurrenceCount: 3})
+ recurrenceRule: new tizen.CalendarRecurrenceRule('DAILY', {occurrenceCount: 3})
});
</pre></li>
<li><p>To set up an alarm to remind the user about the event, create an alarm with the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarAlarm">CalendarAlarm</a> interface, and add the alarm to the event:</p>
<pre class="prettyprint">
/* Alarm is triggered with sound 30 minutes before the event start time */
-var alarm = new tizen.CalendarAlarm(new tizen.TimeDuration(30, "MINS"), "SOUND");
+var alarm = new tizen.CalendarAlarm(new tizen.TimeDuration(30, 'MINS'), 'SOUND');
ev.alarms = [alarm];
</pre></li>
<ol>
<li><p>Retrieve the default system calendar using the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface:</p>
<pre class="prettyprint">
-var calendar = tizen.calendar.getDefaultCalendar("EVENT");
+var calendar = tizen.calendar.getDefaultCalendar('EVENT');
</pre></li>
<li><p>Define the items to be added as an array:</p>
<pre class="prettyprint">
-var ev = new tizen.CalendarEvent
-({
- description:"HTML5 Introduction",
- summary:"HTML5 Webinar",
- startDate: new tizen.TZDate(2011, 3, 30, 10, 0),
- duration: new tizen.TimeDuration(1, "HOURS"),
- location:"Huesca"
+var ev = new tizen.CalendarEvent({
+ description:'HTML5 Introduction',
+ summary:'HTML5 Webinar',
+ startDate: new tizen.TZDate(2011, 3, 30, 10, 0),
+ duration: new tizen.TimeDuration(1, 'HOURS'),
+ location:'Huesca'
});
</pre>
<ol>
<li><p>Retrieve the default system calendar using the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as event.</p>
<pre class="prettyprint">
-var myCalendar = tizen.calendar.getDefaultCalendar("EVENT");
+var myCalendar = tizen.calendar.getDefaultCalendar('EVENT');
</pre></li>
<li><p>Retrieve all events stored in the calendar by using the <code>find()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p>
<pre class="prettyprint">
<li><p>Update or delete the found item inside the <code>eventSearchSuccessCallback()</code> event handler.</p> <p>In this example, the description parameter of the first event is changed and the event is updated in the calendar using the <code>update()</code> method. The second event is deleted using the <code>remove()</code> method.</p>
<pre class="prettyprint">
/* Define the event success callback */
-function eventSearchSuccessCallback(events)
-{
- /* Update the first existing event */
- events[0].description = "New Description";
- myCalendar.update(events[0]);
-
- /* Delete the second existing event */
- myCalendar.remove(events[1].id);
+function eventSearchSuccessCallback(events) {
+ /* Update the first existing event */
+ events[0].description = 'New Description';
+ myCalendar.update(events[0]);
+
+ /* Delete the second existing event */
+ myCalendar.remove(events[1].id);
}
</pre></li>
</ol>
<li><p>Retrieve the default system calendar using the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p>
<p>Retrieve the event using the <code>get()</code> method by specifying the event ID.</p>
<pre class="prettyprint">
-var calendar = tizen.calendar.getDefaultCalendar("EVENT");
+var calendar = tizen.calendar.getDefaultCalendar('EVENT');
var event = calendar.get(evId);
</pre></li>
<li>Expand the recurring event to get its instances by using the <code>expandRecurrence()</code> method of the <code>CalendarEvent</code> object:
<li><p>Update a single instance of the expanded recurring event.</p> <p>In case of recurring events, you can use the second parameter of the <code>update()</code> method to determine whether a single instance or all occurrences of the event are updated. If the parameter is set to <code>true</code>, all instances are updated, while if it is set to <code>false</code>, only the indicated instance of the recurring event is updated (based on the <code>id.rid</code> attribute).</p> <p>In this example, the second instance of the event is updated.</p>
<pre class="prettyprint">
/* Success event handler */
-function eventExpandSuccessCB(events)
-{
- events[1].summary = 'updated summary';
- calendar.update(events[1], false);
+function eventExpandSuccessCB(events) {
+ events[1].summary = 'updated summary';
+ calendar.update(events[1], false);
}
</pre></li>
</ol>
<ol>
<li><p>Retrieve the default system calendar using the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as event.</p>
<pre class="prettyprint">
-var myCalendar = tizen.calendar.getDefaultCalendar("EVENT");
+var myCalendar = tizen.calendar.getDefaultCalendar('EVENT');
</pre></li>
<li><p>Retrieve all events stored in the calendar by using the <code>find()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p>
<pre class="prettyprint">
<ol type="a">
<li><p>Define the items to be updated in the success event handler of the <code>find()</code> method:</p>
<pre class="prettyprint">
-function eventSearchSuccessCallback(events)
-{
- events[0].description = "New Description 1";
- events[1].description = "New Description 2";
+function eventSearchSuccessCallback(events) {
+ events[0].description = 'New Description 1';
+ events[1].description = 'New Description 2';
</pre></li>
<li><p>Use the <code>updateBatch()</code> method to update multiple calendar items asynchronously:</p>
<pre class="prettyprint">
- /* Update the first 2 existing events */
- myCalendar.updateBatch(events.slice(0, 2));
+ /* Update the first 2 existing events */
+ myCalendar.updateBatch(events.slice(0, 2));
}
</pre></li>
</ol> </li>
<li><p>To delete events, use the <code>removeBatch()</code> method in the success event handler of the <code>find()</code> method to delete multiple calendar items asynchronously:</p>
<pre class="prettyprint">
-function eventSearchSuccessCallback(events)
-{
- /* Delete the first 2 existing events */
- myCalendar.removeBatch([events[0].id, events[1].id]);
+function eventSearchSuccessCallback(events) {
+ /* Delete the first 2 existing events */
+ myCalendar.removeBatch([events[0].id, events[1].id]);
}
</pre></li>
</ol>
<ol>
<li><p>Retrieve the default system calendar using the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as event.</p>
<pre class="prettyprint">
-var calendar = tizen.calendar.getDefaultCalendar("EVENT");
+var calendar = tizen.calendar.getDefaultCalendar('EVENT');
</pre></li>
<li>Create a new <code>CalendarEvent</code> object from the iCalendar string and add it to the default calendar:
<pre class="prettyprint">
-try
-{
- var ev = new tizen.CalendarEvent
- (
- "BEGIN:VCALENDAR\r\n" +
- "BEGIN:VEVENT\r\n" +
- "DTSTAMP:19970901T1300Z\r\n" +
- "DTSTART:19970903T163000Z\r\n" +
- "DTEND:19970903T190000Z\r\n" +
- "SUMMARY:Tizen, Annual Employee Review\r\n" +
- "CATEGORIES:BUSINESS,HUMAN RESOURCES\r\n" +
- "END:VEVENT\r\n" +
- "END:VCALENDAR", "ICALENDAR_20"
- );
-
- calendar.add(ev);
- console.log('Event added with UID ' + ev.id.uid);
+try {
+ var ev = new tizen.CalendarEvent('BEGIN:VCALENDAR\r\n' +
+ 'BEGIN:VEVENT\r\n' +
+ 'DTSTAMP:19970901T1300Z\r\n' +
+ 'DTSTART:19970903T163000Z\r\n' +
+ 'DTEND:19970903T190000Z\r\n' +
+ 'SUMMARY:Tizen, Annual Employee Review\r\n' +
+ 'CATEGORIES:BUSINESS,HUMAN RESOURCES\r\n' +
+ 'END:VEVENT\r\n' +
+ 'END:VCALENDAR', 'ICALENDAR_20');
+
+ calendar.add(ev);
+ console.log('Event added with UID ' + ev.id.uid);
}
</pre></li>
</ol> <p>To convert multiple strings and import them to a calendar, convert the strings one by one and then use the <code>addBatch()</code> method to <a href="#Adding_Events_Batch">add all the events at once in a batch mode</a>.</p> </li>
<pre class="prettyprint">
var myCalendar;
-myCalendar = tizen.calendar.getDefaultCalendar("EVENT");
+myCalendar = tizen.calendar.getDefaultCalendar('EVENT');
/* Define a filter */
-var filter = new tizen.AttributeFilter("summary", "CONTAINS", "Tizen");
+var filter = new tizen.AttributeFilter('summary', 'CONTAINS', 'Tizen');
/* Search for the events */
myCalendar.find(eventSearchSuccessCallback, errorCallback, filter);
</pre></li>
<li>Convert an event to an iCalendar string in the success event handler of the <code>find()</code> method using the <code>convertToString()</code> method:
<pre class="prettyprint">
-function eventSearchSuccessCallback(events)
-{
- /* Convert the first event */
- var vevent = events[0].convertToString("ICALENDAR_20");
+function eventSearchSuccessCallback(events) {
+ /* Convert the first event */
+ var vevent = events[0].convertToString('ICALENDAR_20');
}
</pre></li>
</ol>
<ol>
<li><p>Retrieve the default system calendar using the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as task.</p>
<pre class="prettyprint">
-var calendar = tizen.calendar.getDefaultCalendar("TASK");
+var calendar = tizen.calendar.getDefaultCalendar('TASK');
</pre></li>
<li><p>Create a <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarTask">CalendarTask</a> object and define the task properties:</p>
<pre class="prettyprint">
-var task = new tizen.CalendarTask
-({
- description:"HTML5 Introduction",
- summary:"HTML5 Webinar",
- startDate: new tizen.TZDate(2011, 3, 10, 10, 0),
- dueDate: new tizen.TZDate(2011, 3, 30, 10, 0),
- completedDate: new tizen.TZDate(2011, 3, 20, 10, 0),
- location:"Huesca"
+var task = new tizen.CalendarTask({
+ description:'HTML5 Introduction',
+ summary:'HTML5 Webinar',
+ startDate: new tizen.TZDate(2011, 3, 10, 10, 0),
+ dueDate: new tizen.TZDate(2011, 3, 30, 10, 0),
+ completedDate: new tizen.TZDate(2011, 3, 20, 10, 0),
+ location:'Huesca'
});
</pre></li>
<li><p>To set up an alarm to remind the user about the task, create an alarm with the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarAlarm">CalendarAlarm</a> interface, and add the alarm to the task:</p>
<pre class="prettyprint">
/* Alarm is triggered with sound 30 minutes before the task start time */
-var alarm = new tizen.CalendarAlarm(new tizen.TimeDuration(30, "MINS"), "SOUND");
+var alarm = new tizen.CalendarAlarm(new tizen.TimeDuration(30, 'MINS'), 'SOUND');
task.alarms = [alarm];
</pre></li>
<ol>
<li><p>Retrieve the default system calendar using the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface:</p>
<pre class="prettyprint">
-var calendar = tizen.calendar.getDefaultCalendar("TASK");
+var calendar = tizen.calendar.getDefaultCalendar('TASK');
</pre></li>
<li><p>Define the items to be added as an array:</p>
<pre class="prettyprint">
-var task = new tizen.CalendarTask
-({
- description:"HTML5 Introduction",
- summary:"HTML5 Webinar",
- startDate: new tizen.TZDate(2011, 3, 30, 10, 0),
- dueDate: new tizen.TZDate(2011, 5, 30, 10, 0),
- completedDate: new tizen.TZDate(2011, 4, 30, 10, 0),
- location:"Huesca"
+var task = new tizen.CalendarTask({
+ description:'HTML5 Introduction',
+ summary:'HTML5 Webinar',
+ startDate: new tizen.TZDate(2011, 3, 30, 10, 0),
+ dueDate: new tizen.TZDate(2011, 5, 30, 10, 0),
+ completedDate: new tizen.TZDate(2011, 4, 30, 10, 0),
+ location:'Huesca'
});
</pre>
<ol>
<li><p>Retrieve the default system calendar using the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as task.</p>
<pre class="prettyprint">
-var myCalendar = tizen.calendar.getDefaultCalendar("TASK");
+var myCalendar = tizen.calendar.getDefaultCalendar('TASK');
</pre></li>
<li><p>Retrieve all tasks stored in the calendar by using the <code>find()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p>
<pre class="prettyprint">
<li><p>Update or delete the found item inside the <code>taskSearchSuccessCallback()</code> event handler.</p> <p>In this example, the description parameter of the first task is changed and the task is updated in the calendar using the <code>update()</code> method. The second task is deleted using the <code>remove()</code> method.</p>
<pre class="prettyprint">
/* Define the event success callback */
-function taskSearchSuccessCallback(tasks)
-{
- /* Update the first existing task */
- tasks[0].description = "New Description";
- myCalendar.update(tasks[0]);
-
- /* Delete the second existing task */
- myCalendar.remove(tasks[1].id);
+function taskSearchSuccessCallback(tasks) {
+ /* Update the first existing task */
+ tasks[0].description = 'New Description';
+ myCalendar.update(tasks[0]);
+
+ /* Delete the second existing task */
+ myCalendar.remove(tasks[1].id);
}
</pre></li>
</ol>
<ol>
<li><p>Retrieve the default system calendar using the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as task.</p>
<pre class="prettyprint">
-var myCalendar = tizen.calendar.getDefaultCalendar("TASK");
+var myCalendar = tizen.calendar.getDefaultCalendar('TASK');
</pre></li>
<li><p>Retrieve all tasks stored in the calendar by using the <code>find()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p>
<pre class="prettyprint">
<ol type="a">
<li><p>Define the items to be updated in the success event handler of the <code>find()</code> method:</p>
<pre class="prettyprint open-bottom">
-function taskSearchSuccessCallback(tasks)
-{
- tasks[0].description = "New Description 1";
- tasks[1].description = "New Description 2";
+function taskSearchSuccessCallback(tasks) {
+ tasks[0].description = 'New Description 1';
+ tasks[1].description = 'New Description 2';
</pre></li>
<li><p>Use the <code>updateBatch()</code> method to update multiple calendar items asynchronously:</p>
<pre class="prettyprint open-top">
- /* Update the first 2 existing tasks */
- myCalendar.updateBatch(tasks.slice(0, 2));
+ /* Update the first 2 existing tasks */
+ myCalendar.updateBatch(tasks.slice(0, 2));
}
</pre></li>
</ol> </li>
<li><p>To delete tasks, use the <code>removeBatch()</code> method in the success event handler of the <code>find()</code> method to delete multiple calendar items asynchronously:</p>
<pre class="prettyprint">
-function taskSearchSuccessCallback(tasks)
-{
- /* Delete the first 2 existing tasks */
- myCalendar.removeBatch([tasks[0].id, tasks[1].id]);
+function taskSearchSuccessCallback(tasks) {
+ /* Delete the first 2 existing tasks */
+ myCalendar.removeBatch([tasks[0].id, tasks[1].id]);
}
</pre></li>
</ol>
<ol>
<li><p>Retrieve the default system calendar using the <code>getDefaultCalendar()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as task.</p>
<pre class="prettyprint">
-var calendar = tizen.calendar.getDefaultCalendar("TASK");
+var calendar = tizen.calendar.getDefaultCalendar('TASK');
</pre></li>
<li>Create a new <code>CalendarTask</code> object from the iCalendar string and add it to the default calendar:
<pre class="prettyprint">
-var task = new tizen.CalendarTask
-(
- "BEGIN:VCALENDAR\r\n" +
- "VERSION:2.0\r\n" +
- "BEGIN:VTODO\r\n" +
- "DTSTAMP:TZID=CET:20110902T110000Z\r\n" +
- "DTSTART;TZID=CET:20110906T140000Z\r\n" +
- "DUE;TZID=CET:20110906T150000Z\r\n" +
- "SUMMARY:Tizen, discuss the schedule\r\n" +
- "DESCRIPTION:Find the feasible schedule\r\n" +
- "CATEGORIES:HUMAN RESOURCES\r\n" +
- "END:VTODO\r\n" +
- "END:VCALENDAR", "ICALENDAR_20"
-);
+var task = new tizen.CalendarTask('BEGIN:VCALENDAR\r\n' +
+ 'VERSION:2.0\r\n' +
+ 'BEGIN:VTODO\r\n' +
+ 'DTSTAMP:TZID=CET:20110902T110000Z\r\n' +
+ 'DTSTART:TZID=CET:20110906T140000Z\r\n' +
+ 'DUE:TZID=CET:20110906T150000Z\r\n' +
+ 'SUMMARY:Tizen, discuss the schedule\r\n' +
+ 'DESCRIPTION:Find the feasible schedule\r\n' +
+ 'CATEGORIES:HUMAN RESOURCES\r\n' +
+ 'END:VTODO\r\n' +
+ 'END:VCALENDAR', 'ICALENDAR_20');
calendar.add(task);
console.log('Task added with id ' + task.id);
<pre class="prettyprint">
var myCalendar;
-myCalendar = tizen.calendar.getDefaultCalendar("TASK");
+myCalendar = tizen.calendar.getDefaultCalendar('TASK');
/* Define a filter */
-var filter = new tizen.AttributeFilter("summary", "CONTAINS", "Tizen");
+var filter = new tizen.AttributeFilter('summary', 'CONTAINS', 'Tizen');
/* Search for the tasks */
myCalendar.find(taskSearchSuccessCallback, null, filter);
</pre></li>
<li>Convert a calendar item to an iCalendar string in the success event handler of the <code>find()</code> method using the <code>convertToString()</code> method:
<pre class="prettyprint">
-function taskSearchSuccessCallback(tasks)
-{
- /* Convert the first task */
- var vtodo = tasks[0].convertToString("ICALENDAR_20");
+function taskSearchSuccessCallback(tasks) {
+ /* Convert the first task */
+ var vtodo = tasks[0].convertToString('ICALENDAR_20');
}
</pre></li>
</ol> <p>To export and convert multiple tasks from a calendar, find the required tasks using the <code>find()</code> method with an applicable filter, and then convert the found tasks one by one.</p> </li>
</pre></li>
<li><p>Define the event handlers for different notifications using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarChangeCallback">CalendarChangeCallback</a> listener interface:</p>
<pre class="prettyprint">
-var watcher =
-{
- /* When new items are added */
- onitemsadded: function(items)
- {
- console.log(items.length + " items were added");
- },
-
- /* When items are updated */
- onitemsupdated: function(items)
- {
- console.log(items.length + " items were updated");
- },
-
- /* When items are deleted */
- onitemsremoved: function(ids)
- {
- console.log(ids.length + " items were removed");
- }
+var watcher = {
+ /* When new items are added */
+ onitemsadded: function(items) {
+ console.log(items.length + ' items were added');
+ },
+
+ /* When items are updated */
+ onitemsupdated: function(items) {
+ console.log(items.length + ' items were updated');
+ },
+
+ /* When items are deleted */
+ onitemsremoved: function(ids) {
+ console.log(ids.length + ' items were removed');
+ }
};
</pre></li>
<li><p>Register the listener to use the defined event handlers:</p>
</pre></li>
<li><p>To stop the notifications, use the <code>removeChangeListener()</code> method: </p>
<pre class="prettyprint">
-function cancelWatch()
-{
- calendar.removeChangeListener(watcherId);
+function cancelWatch() {
+ calendar.removeChangeListener(watcherId);
}
</pre></li>
</ol>
</pre></li>
<li> <p>Use the <code>SuccessCallback</code> parameter of the <code>find()</code> method to define an event handler for the query result set.</p> <p>In the following code snippet, the found call history items are appended to the console log.</p>
<pre class="prettyprint">
-function onSuccess(results)
-{
- console.log(results.length + " call history item(s) found!");
- for (var i = 0; i < results.length; i++)
- {
- console.log(i + ". " + results[i].toString());
- /* Process the CallHistoryEntry */
- }
+function onSuccess(results) {
+ console.log(results.length + ' call history item(s) found!');
+ for (var i = 0; i < results.length; i++) {
+ console.log(i + '. ' + results[i].toString());
+ /* Process the CallHistoryEntry */
+ }
}
</pre></li>
<li> <p>Use the <code>filter</code> parameter of the <code>find()</code> method to define a filter for the query result set. A filter with the <code>CallHistoryEntry</code> attributes is used to limit the results of the call history search.</p>
<li><p>The <code>AttributeFilter</code> type is used to search based on a single <code>CallHistoryEntry</code> attribute.</p> <p>For example, the following filters define that only cellular calls or calls where the remote party has the telephone number 123456789 are included in the query results:</p>
<pre class="prettyprint">
/* First filter example */
-var filter = new tizen.AttributeFilter("type", "EXACTLY", "TEL");
+var filter = new tizen.AttributeFilter('type', 'EXACTLY', 'TEL');
/* Second filter example */
-var numberFilter = new tizen.AttributeFilter("remoteParties.remoteParty",
- "EXACTLY", "123456789");
+var numberFilter = new tizen.AttributeFilter('remoteParties.remoteParty', 'EXACTLY', '123456789');
</pre></li>
<li> <p> The <code>CompositeFilter</code> type represents a set of filters. The <code>UNION</code> type composite filter matches any object that is matched by any of its filters; the <code>INTERSECTION</code> type composite filter matches all objects that are matched by all of its filters.</p> <p>For example, the following code snippet defines a set of filters that include in the query results only the video calls where the remote party has the telephone number 123456789 and the call has started during the year 2009 or 2011:</p>
<pre class="prettyprint">
/* Create the ranges for the time filter */
-var y2009Filter = new tizen.AttributeRangeFilter("startTime",
+var y2009Filter = new tizen.AttributeRangeFilter('startTime',
new Date(2009, 0, 1),
new Date(2010, 0, 1));
-var y2011Filter = new tizen.AttributeRangeFilter("startTime",
+var y2011Filter = new tizen.AttributeRangeFilter('startTime',
new Date(2011, 0, 1),
new Date(2012, 0, 1));
/* Create a time filter */
-var dataFilter = new tizen.CompositeFilter("UNION",
+var dataFilter = new tizen.CompositeFilter('UNION',
[y2009Filter, y2011Filter]);
/* Create a video call filter */
-var tfilter = new tizen.AttributeFilter("features", "EXACTLY", "VIDEOCALL");
+var tfilter = new tizen.AttributeFilter('features', 'EXACTLY', 'VIDEOCALL');
/* Combine the filters into a set */
-var ifilter = new tizen.CompositeFilter("INTERSECTION",
- [numberFilter, dataFilter, tfilter]);
+var ifilter = new tizen.CompositeFilter('INTERSECTION', [numberFilter, dataFilter, tfilter]);
</pre></li>
</ul> </li>
<li> <p>Use the <code>sortMode</code> parameter to <a href="../data/data_filter_w.htm#use_modes">order the query result set</a>. If the parameter is undefined or set to <code>null</code>, the results are sorted by default in a descending order.</p> <p>In the following code snippet, the found call history items are sorted according to the start time, in descending order:</p>
<pre class="prettyprint">
-var sortMode = new tizen.SortMode("startTime", "DESC");
+var sortMode = new tizen.SortMode('startTime', 'DESC');
</pre></li>
<li> <p>Use the <code>limit</code> and <code>offset</code> parameters of the <code>find()</code> method to specify the starting point and upper limit of the results that are returned.</p> <p>The <code>limit</code> parameter specifies the maximum number of matching results that are returned (the value 0 makes the limit infinite), while the <code>offset</code> parameter skips that many matching results that are to be returned (the value 0 means nothing is skipped).</p> <p>For example, if your search results consist of 100 matching results and you have specified an offset of 10 and a limit of 20, you get the objects from 10-29. The matching results from 0-9 are skipped due to the offset, and the 20 results starting from the first result after the offset are returned.</p> </li>
</ol>
<li><p> Use the <code>remove()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface to remove a specific item from the call history. First, search for the entry to be removed with the <code>find()</code> method, and then handle the removal in the event handler that is called when the <code>find()</code> method is successful.</p>
<pre class="prettyprint">
/* Remove the found call history item */
-function onSuccess(results)
-{
- if (results.length > 0)
- tizen.callhistory.remove(results[0]);
+function onSuccess(results) {
+ if (results.length > 0)
+ tizen.callhistory.remove(results[0]);
}
-var numberFilter = new tizen.AttributeFilter("remoteParties.remoteParty",
- "EXACTLY", "123456789");
+var numberFilter = new tizen.AttributeFilter('remoteParties.remoteParty',
+ 'EXACTLY', '123456789');
/* Search for the item to be removed */
tizen.callhistory.find(onSuccess, onError, numberFilter, null, 1);
</pre></li>
<li><p> To remove multiple call history items, use the <code>removeBatch()</code> method.</p> <p>The <code>removeBatch()</code> method functions similarly as the <code>remove()</code> method, except that it removes a list of call history items instead of a single item:</p>
<pre class="prettyprint">
/* Define success callback */
-function onSuccess(results)
-{
- tizen.callhistory.removeBatch(results);
+function onSuccess(results) {
+ tizen.callhistory.removeBatch(results);
}
-var numberFilter = new tizen.AttributeFilter("remoteParties.remoteParty",
- "EXACTLY", "123456789");
+var numberFilter = new tizen.AttributeFilter('remoteParties.remoteParty',
+ 'EXACTLY', '123456789');
tizen.callhistory.find(onSuccess, onError, numberFilter);
</pre></li>
<li><p> To remove all call history items, use the <code>removeAll()</code> method:</p>
<li> <p>Define the <code>onadded</code> event handler of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistoryChangeCallback">CallHistoryChangeCallback</a> listener interface, which tracks all new incoming and outgoing calls that are added to the call history.</p>
<pre class="prettyprint">
-var onHistoryChange =
-{
- onadded: function(newItems)
- {
- for (var i in newItems)
- {
- console.log("Item " + i + " is newly added. Its startTime: "
- + newItems[i].startTime);
- }
- },
+var onHistoryChange = {
+ onadded: function(newItems) {
+ for (var i in newItems) {
+ console.log('Item ' + i + ' is newly added. Its startTime: ' + newItems[i].startTime);
+ }
+ },
</pre></li>
<li> <p>Define the <code>onchanged</code> event handler, which tracks all changes in the call history.</p> <p>The event handler receives as an argument an array of <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistoryEntry">CallHistoryEntry</a> instances, which represent the changed items in the call history.</p>
<pre class="prettyprint">
- onchanged: function(changedItems)
- {
- for (var i in changedItems)
- {
- console.log("Item " + i + " is updated. Its direction: "
- + changedItems[i].direction);
- }
- },
+ onchanged: function(changedItems) {
+ for (var i in changedItems) {
+ console.log('Item ' + i + ' is updated. Its direction: ' + changedItems[i].direction);
+ }
+ },
</pre></li>
<li><p>Define the <code>onremoved</code> event handler, which tracks all items that are removed from the call history:</p>
<pre class="prettyprint">
- onremoved: function(removedItems)
- {
- for (var i in removedItems)
- {
- console.log("Item " + i + " is removed. The removed item's UID: "
- + removedItems[i]);
- }
- }
+ onremoved: function(removedItems) {
+ for (var i in removedItems) {
+ console.log('Item ' + i + ' is removed. The removed item UID: ' + removedItems[i]);
+ }
+ }
};
</pre>
</li>
<p>Add the new address book to the system using the <code>addAddressBook()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p>
<pre class="prettyprint">
-function getAccountsSuccess(accounts)
-{
- var account = accounts[0];
- if (account)
- {
- /* New address book can be created and added */
- myAddressBook = new tizen.AddressBook(account.id, "remote address book");
- tizen.contact.addAddressBook(myAddressBook);
- console.log("New address book created with ID=" + myAddressBook.id);
- }
+function getAccountsSuccess(accounts) {
+ var account = accounts[0];
+ if (account) {
+ /* New address book can be created and added */
+ myAddressBook = new tizen.AddressBook(account.id, 'remote address book');
+ tizen.contact.addAddressBook(myAddressBook);
+ console.log('New address book created with ID=' + myAddressBook.id);
+ }
}
</pre></li>
<li>To retrieve available accounts, use the <code>getAccounts()</code> method. The following method call invokes the <code>getAccountsSuccess</code> event handler defined above.
<pre class="prettyprint">
var addressBook;
-function addressBooksCB(addressBooks)
-{
- if (addressBooks.length > 0)
- {
- addressBook = addressBooks[0];
- console.log("The addressbook name is " + addressBook.name);
- }
+function addressBooksCB(addressBooks) {
+ if (addressBooks.length > 0) {
+ addressBook = addressBooks[0];
+ console.log('The addressbook name is ' + addressBook.name);
+ }
}
/* Get the list of available address books */
</pre></li>
<li><p>Create a <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#Contact">Contact</a> object and define its properties as a <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactInit">ContactInit</a> object (the parameter of the <code>Contact</code> constructor):</p>
<pre class="prettyprint">
-var contact = new tizen.Contact
-({
- name: new tizen.ContactName({firstName: "Jeffrey", lastName: "Hyman"}),
- emails: [new tizen.ContactEmailAddress("user@example.com")]
+var contact = new tizen.Contact({
+ name: new tizen.ContactName({firstName: 'Jeffrey', lastName: 'Hyman'}),
+ emails: [new tizen.ContactEmailAddress('user@example.com')]
});
</pre></li>
<li><p>Add the <code>Contact</code> object to the default address book with the <code>add()</code> method of the <code>AddressBook</code> interface:</p>
<pre class="prettyprint">
/* contactRef is retrieved by other APIs */
var contactRef;
-try
-{
- /* Retrieve the contact corresponding to the given reference */
- var addressBook = tizen.contact.getAddressBook(contactRef.addressBookId);
- var contact = addressBook.get(contactRef.contactId);
+try {
+ /* Retrieve the contact corresponding to the given reference */
+ var addressBook = tizen.contact.getAddressBook(contactRef.addressBookId);
+ var contact = addressBook.get(contactRef.contactId);
}
</pre></li>
<li>To manage a single contact:
</pre></li>
<li><p>Retrieve contacts stored in the address book by using the <code>find()</code> method of the <code>AddressBook</code> interface:</p>
<pre class="prettyprint">
-var filter = new tizen.AttributeFilter("name.firstName", "CONTAINS", "Chris");
-var sortMode = new tizen.SortMode("name.lastName", "ASC");
+var filter = new tizen.AttributeFilter('name.firstName', 'CONTAINS', 'Chris');
+var sortMode = new tizen.SortMode('name.lastName', 'ASC');
-try
-{
- addressbook.find(contactsFoundCB, null, filter, sortMode);
+try {
+ addressbook.find(contactsFoundCB, null, filter, sortMode);
}
</pre>
<li><p>Update or delete the found contact inside the <code>contactsFoundCB</code> event handler.</p> <p>In this example, the first name of the first contact is changed and the contact is updated in the address book using the <code>update()</code> method. The second contact is deleted using the <code>remove()</code> method.</p>
<pre class="prettyprint">
/* Define the event success callback */
-function contactsFoundCB(contacts)
-{
- contacts[0].name.firstName = "Christopher";
- try
- {
- /* Update the first found contact */
- addressbook.update(contacts[0]);
-
- /* Delete the second found contact */
- addressbook.remove(contacts[1].id);
- }
+function contactsFoundCB(contacts) {
+ contacts[0].name.firstName = 'Christopher';
+ try {
+ /* Update the first found contact */
+ addressbook.update(contacts[0]);
+
+ /* Delete the second found contact */
+ addressbook.remove(contacts[1].id);
+ }
}
</pre></li>
</ol> </li>
</pre></li>
<li><p>Define the event handlers for different notifications about changes in the selected address book using the <code>AddressBookChangeCallback</code> listener interface:</p>
<pre class="prettyprint">
-var watcher =
-{
- /* When contacts are added */
- oncontactsadded: function(contacts)
- {
- console.log(contacts.length + " contacts were added");
- },
-
- /* When contacts are updated */
- oncontactsupdated: function(contacts)
- {
- console.log(contacts.length + " contacts were updated");
- },
-
- /* When contacts are deleted */
- oncontactsremoved: function(ids)
- {
- console.log(ids.length + " contacts were deleted");
- }
+var watcher = {
+ /* When contacts are added */
+ oncontactsadded: function(contacts) {
+ console.log(contacts.length + ' contacts were added');
+ },
+
+ /* When contacts are updated */
+ oncontactsupdated: function(contacts) {
+ console.log(contacts.length + ' contacts were updated');
+ },
+
+ /* When contacts are deleted */
+ oncontactsremoved: function(ids) {
+ console.log(ids.length + ' contacts were deleted');
+ }
};
</pre></li>
<li><p>Register the listener to use the defined event handlers:</p>
</pre></li>
<li><p>Define the items to be added as an array:</p>
<pre class="prettyprint">
-var c1 = new tizen.Contact(
-{
- name: new tizen.ContactName({firstName:"Jeffrey", lastName:"Hyman"}),
- emails: [new tizen.ContactEmailAddress("user1@example.com")]
+var c1 = new tizen.Contact({
+ name: new tizen.ContactName({firstName:'Jeffrey', lastName:'Hyman'}),
+ emails: [new tizen.ContactEmailAddress('user1@example.com')]
});
-var c2 = new tizen.Contact(
-{
- name: new tizen.ContactName({firstName:"Elton", lastName:"John"}),
- emails: [new tizen.ContactEmailAddress("user2@example.com")]
+var c2 = new tizen.Contact({
+ name: new tizen.ContactName({firstName:'Elton', lastName:'John'}),
+ emails: [new tizen.ContactEmailAddress('user2@example.com')]
});
</pre></li>
<li><p>Use the <code>addBatch()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface to add the contacts in the array to the address book:</p>
</pre></li>
<li><p>Retrieve contacts stored in the address book by using the <code>find()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface:</p>
<pre class="prettyprint">
-var filter = new tizen.AttributeFilter("name.firstName", "CONTAINS", "Chris"};
-var sortMode = new tizen.SortMode("name.lastName", "ASC");
+var filter = new tizen.AttributeFilter('name.firstName', 'CONTAINS', 'Chris'};
+var sortMode = new tizen.SortMode('name.lastName', 'ASC');
-try
-{
- addressbook.find(contactsFoundCB, null, filter, sortMode);
+try {
+ addressbook.find(contactsFoundCB, null, filter, sortMode);
}
</pre>
<p>When searching for contacts, you can create <a href="../data/data_filter_w.htm#filter">attribute filters</a>, <a href="../data/data_filter_w.htm#range">attribute range filters</a>, and <a href="../data/data_filter_w.htm#composite">composite filters</a> based on <a href="../data/data_filter_w.htm#contact">specific filter attributes</a>. You can also <a href="../data/data_filter_w.htm#use_modes">sort the search results</a>. In this example, contacts whose first name contains "Chris" are retrieved and sorted in the ascending order based on their last name.</p>
<ol type="a">
<li><p>Define the contact changes to be made in the success event handler of the <code>find()</code> method:</p>
<pre class="prettyprint">
-function contactsFoundCB(contacts)
-{
- /* Change the first names of all the found contacts */
- for (var i = 0; i < contacts.length; i++)
- {
- contacts[i].name.firstName = "Christopher";
- }
+function contactsFoundCB(contacts) {
+ /* Change the first names of all the found contacts */
+ for (var i = 0; i < contacts.length; i++) {
+ contacts[i].name.firstName = 'Christopher';
+ }
</pre></li>
<li><p>Use the <code>updateBatch()</code> method to update multiple contacts asynchronously:</p>
<pre class="prettyprint">
- /* Update all found contacts */
- addressbook.updateBatch(contacts);
+ /* Update all found contacts */
+ addressbook.updateBatch(contacts);
}
</pre></li>
</ol> </li>
<li><p>To delete contacts, use the <code>removeBatch()</code> method in the success event handler of the <code>find()</code> method to delete multiple contacts asynchronously:</p>
<pre class="prettyprint">
-function contactsFoundCB(contacts)
-{
- /* Delete the first 2 found contacts */
- addressbook.removeBatch([contacts[0].id, contacts[1].id]);
+function contactsFoundCB(contacts) {
+ /* Delete the first 2 found contacts */
+ addressbook.removeBatch([contacts[0].id, contacts[1].id]);
}
</pre></li>
</ol>
<li><p>To create a <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactGroup">ContactGroup</a> object and add the newly create group to the system, use the constructor and the <code>addGroup()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface:</p>
<pre class="prettyprint">
var group;
-try
-{
- group = new tizen.ContactGroup("Company");
- addressbook.addGroup(group)
- console.log("Group added with ID " + group.id);
+try {
+ group = new tizen.ContactGroup('Company');
+ addressbook.addGroup(group)
+ console.log('Group added with ID ' + group.id);
}
</pre></li>
of the <code>AddressBook</code> interface:</p>
<pre class="prettyprint">
var groups;
-try
-{
- groups = addressbook.getGroups();
+try {
+ groups = addressbook.getGroups();
}
</pre></li>
<li><p>To change the name of the group, assign the <code>name</code> property a new value and use the <code>updateGroup()</code>
method of the <code>AddressBook</code> interface:</p>
<pre class="prettyprint">
-try
-{
- groups[0].name = "Friends";
- addressbook.updateGroup(groups[0]);
- console.log("First group updated");
+try {
+ groups[0].name = 'Friends';
+ addressbook.updateGroup(groups[0]);
+ console.log('First group updated');
}
</pre></li>
<li><p>To retrieve a specific group, use the <code>getGroup()</code> method of
the <code>AddressBook</code> interface:</p>
<pre class="prettyprint">
-try
-{
- group = addressbook.getGroup(group.id);
+try {
+ group = addressbook.getGroup(group.id);
}
</pre></li>
<li><p>To remove a group from the address book, use the <code>removeGroup()</code> method of
the <code>AddressBook</code> interface:</p>
<pre class="prettyprint">
-try
-{
- addressbook.removeGroup(group.id);
- console.log("Group was removed");
+try {
+ addressbook.removeGroup(group.id);
+ console.log('Group was removed');
}
</pre></li></ul></li>
</ol>
<li><p>To retrieve persons, use the <code>find()</code> method of the <code>ContactManager</code> interface.</p>
<p>You can retrieve the most frequently used persons using the sort mode as the final parameter.</p>
<pre class="prettyprint">
-var sortMode = new tizen.SortMode("usageCount", "ASC");
+var sortMode = new tizen.SortMode('usageCount', 'ASC');
tizen.contact.find(personsFoundCB, personsErrorCB, null, sortMode);
</pre>
<p>When searching for persons, you can create <a href="../data/data_filter_w.htm#filter">attribute filters</a>, <a href="../data/data_filter_w.htm#range">attribute range filters</a>, and <a href="../data/data_filter_w.htm#composite">composite filters</a> based on <a href="../data/data_filter_w.htm#contact">specific filter attributes</a>. You can also <a href="../data/data_filter_w.htm#use_modes">sort the search results</a>. In this example, all contacts are retrieved (since no filter is defined), and the result is sorted in the ascending order based on the most frequently used persons.</p>
<li><p>Update or delete the found persons in the <code>personsFoundCB()</code> event handler. In this example, the favorite flag of the first person is changed and the contact is updated using the <code>update()</code> method. The second person is deleted using the <code>remove()</code> method.</p>
<pre class="prettyprint">
/* Define the event success callback */
-function personsFoundCB(persons)
-{
- persons[0].isFavorite = true;
- try
- {
- /* Update the first found person */
- tizen.contact.update(persons[0]);
-
- /* Delete the second found person */
- tizen.contact.remove(persons[1].id);
- }
+function personsFoundCB(persons) {
+ persons[0].isFavorite = true;
+ try {
+ /* Update the first found person */
+ tizen.contact.update(persons[0]);
+
+ /* Delete the second found person */
+ tizen.contact.remove(persons[1].id);
+ }
}
</pre></li>
</ol> </li>
<li>Retrieve the persons as described above.</li>
<li><p>Define the persons to be merged in the <code>personsFoundCB()</code> event handler:</p>
<pre class="prettyprint">
-function personsFoundCB(persons)
-{
- var sourcePerson = persons[0];
- var targetPerson = persons[1];
+function personsFoundCB(persons) {
+ var sourcePerson = persons[0];
+ var targetPerson = persons[1];
</pre></li>
<li><p>Use the <code>link()</code> method to link contacts that are linked to the other person:</p>
<pre class="prettyprint">
- /*
- Link 2 persons, contacts from sourcePerson are added to targetPerson
- and sourcePerson is removed
- */
- targetPerson.link(sourcePerson.id);
+ /*
+ Link 2 persons, contacts from sourcePerson are added to targetPerson
+ and sourcePerson is removed
+ */
+ targetPerson.link(sourcePerson.id);
}
</pre></li>
</ol> </li>
<pre class="prettyprint">
var contact = null;
-try
-{
- contact = new tizen.Contact("BEGIN:VCARD\n"+
- "VERSION:3.0\n"+
- "N:Gump;Forrest\n"+
- "FN:Forrest Gump\n"+
- "ORG:Bubba Gump Shrimp Co.\n"+
- "TITLE:Shrimp Man\n"+
- "TEL;WORK:(111) 555-1212\n"+
- "TEL;HOME:(404) 555-1212\n"+
- "EMAIL;WORK;PREF:forrestgump@example.com\n"+
- "END:VCARD");
-
- addressbook.add(contact);
- console.log("Contact was added with ID " + contact.id);
+try {
+ contact = new tizen.Contact('BEGIN:VCARD\n' +
+ 'VERSION:3.0\n' +
+ 'N:Gump;Forrest\n' +
+ 'FN:Forrest Gump\n' +
+ 'ORG:Bubba Gump Shrimp Co.\n' +
+ 'TITLE:Shrimp Man\n' +
+ 'TEL;WORK:(111) 555-1212\n' +
+ 'TEL;HOME:(404) 555-1212\n' +
+ 'EMAIL;WORK;PREF:forrestgump@example.com\n' +
+ 'END:VCARD');
+
+ addressbook.add(contact);
+ console.log('Contact was added with ID ' + contact.id);
}
</pre></li>
</ol> <p>To convert multiple strings and import them to an address book, convert the strings one by one and then use the <code>addBatch()</code> method of the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface to <a href="#Adding_Multiple_Contact">add all the contacts at once in the batch mode</a>.</p>
var addressbook = tizen.contact.getDefaultAddressBook();
/* Define a filter */
-var filter = new tizen.AttributeFilter("name.firstName", "CONTAINS", "Chris");
+var filter = new tizen.AttributeFilter('name.firstName', 'CONTAINS', 'Chris');
/* Search for the contacts */
addressbook.find(contactsFoundCB, errorCB, filter);
</pre></li>
<li><p>Convert a contact to a vCard string in the success event handler of the <code>find()</code> method.</p> <p>In the following example, the first found contact is exported by converting it to the vCard version 3.0 format.</p>
<pre class="prettyprint">
-function contactsFoundCB(contacts)
-{
- /* Convert the first contact */
- var vcard = contacts[0].convertToString("VCARD_30");
+function contactsFoundCB(contacts) {
+ /* Convert the first contact */
+ var vcard = contacts[0].convertToString('VCARD_30');
}
</pre></li>
</ol>
</pre></li>
<li><p>Create a sync profile. Use the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncInfo">SyncInfo</a>, <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncServiceInfo">SyncServiceInfo</a>, and <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/datasync.html#SyncProfileInfo">SyncProfileInfo</a> interfaces to provide sync profile and operation information:</p>
<pre class="prettyprint">
-if ((numMaxProfiles <= 0) || (numProfiles < numMaxProfiles))
-{
- var syncInfo = new tizen.SyncInfo("http://example.com/sync", "myId", "myPassword",
- "MANUAL", "TWO_WAY");
- var contactInfo = new tizen.SyncServiceInfo(true, "CONTACT", "serverContact");
- var eventInfo = new tizen.SyncServiceInfo(true, "EVENT", "serverEvent");
- var serviceInfo = [contactInfo, eventInfo];
- var profile = new tizen.SyncProfileInfo("MyProfile", syncInfo, serviceInfo);
+if ((numMaxProfiles <= 0) || (numProfiles < numMaxProfiles)) {
+ var syncInfo = new tizen.SyncInfo('http://example.com/sync', 'myId', 'myPassword', 'MANUAL', 'TWO_WAY');
+ var contactInfo = new tizen.SyncServiceInfo(true, 'CONTACT', 'serverContact');
+ var eventInfo = new tizen.SyncServiceInfo(true, 'EVENT', 'serverEvent');
+ var serviceInfo = [contactInfo, eventInfo];
+ var profile = new tizen.SyncProfileInfo('MyProfile', syncInfo, serviceInfo);
</pre></li>
<li><p>To be able to use the created profile, add it to your device using the <code>add()</code> method of the <code>DataSynchronizationManager</code> interface:</p>
<pre class="prettyprint">
- tizen.datasync.add(profile);
- var profileId = profile.profileId;
+ tizen.datasync.add(profile);
+ var profileId = profile.profileId;
}
</pre></li>
</ol>
<ol>
<li><p>Define the event handlers for the notifications using the <code>SyncProgressCallback</code> listener interface:</p>
<pre class="prettyprint">
-var syncCallback =
-{
- onprogress: function(profileId, serviceType, isFromServer,
- totalPerType, syncedPerType)
- {
- console.log('Total: ' + totalPerType + ', synced: '
- + syncedPerType + ' for the sync type: ' + serviceType);
- },
- onfailed: function(profileId, error)
- {
- console.log('Failed with id: ' + profileId + ', error name: ' + error.name);
- }
+var syncCallback = {
+ onprogress: function(profileId, serviceType, isFromServer, totalPerType, syncedPerType) {
+ console.log('Total: ' + totalPerType + ', synced: ' + syncedPerType + ' for the sync type: ' + serviceType);
+ },
+ onfailed: function(profileId, error) {
+ console.log('Failed with id: ' + profileId + ', error name: ' + error.name);
+ }
};
</pre></li>
<li><p>Start the sync operation using the <code>startSync()</code> method, with the corresponding listener as a parameter:</p>
<li><p>Save the data using the <code>saveData()</code> method:</p>
<pre class="prettyprint">
-var data_name = "data1", raw_data = "my data";
+var data_name = 'data1', raw_data = 'my data';
tizen.keymanager.saveData(data_name, raw_data, null, onSave);
</pre></li>
<p>To set a permission for an application to remove the data, use the <code>setPermission()</code> method in the data saving callback.</p>
<p>In this example, the permission is granted for an application with the 9PdoiICQ4c ID:</p>
<pre class="prettyprint">
-function onPermissionSet()
-{
- console.log("Successfully set permission");
+function onPermissionSet() {
+ console.log('Successfully set permission');
}
-function onSave()
-{
- /*
- Dictionary does not require a package ID because an
- application can only set permission for data which it saved
- */
- tizen.keymanager.setPermission({"name": data_name}, "9PdoiICQ4c",
- "READ_REMOVE", onPermissionSet);
+function onSave() {
+ /*
+ Dictionary does not require a package ID because an
+ application can only set permission for data which it saved
+ */
+ tizen.keymanager.setPermission({'name': data_name}, '9PdoiICQ4c',
+ 'READ_REMOVE', onPermissionSet);
}
</pre>
</li>
<ul>
<li><p>Retrieve data which your application has added:</p>
<pre class="prettyprint">
-var data_name = "data1", raw_data = "my data";
-
-function onSave()
-{
- /*
- Dictionary does not require a package ID because the
- application calling getData() saved "data1"
- */
- var app_data = tizen.keymanager.getData({"name": data_name});
- console.log("App data: " + app_data + " was retrieved");
+var data_name = 'data1', raw_data = 'my data';
+
+function onSave() {
+ /*
+ Dictionary does not require a package ID because the
+ application calling getData() saved 'data1'
+ */
+ var app_data = tizen.keymanager.getData({'name': data_name});
+ console.log('App data: ' + app_data + ' was retrieved');
}
tizen.keymanager.saveData(data_name, raw_data, null, onSave);
<pre class="prettyprint">
var aliases = tizen.keymanager.getDataAliasList();
-if (aliases.length != 0)
-{
- /*
- Assuming that the application calling getData()
- has permission to read aliases[0]
- */
- var app_data = tizen.keymanager.getData(aliases[0]);
- console.log("App data: " + app_data + " was retrieved");
+if (aliases.length != 0) {
+ /*
+ Assuming that the application calling getData()
+ has permission to read aliases[0]
+ */
+ var app_data = tizen.keymanager.getData(aliases[0]);
+ console.log('App data: ' + app_data + ' was retrieved');
}
</pre>
</li>
<li><p>Remove data which your application has added:</p>
<pre class="prettyprint">
-var data_name = "data1", raw_data = "my data";
+var data_name = 'data1', raw_data = 'my data';
-function onSave()
-{
- /* Do something */
+function onSave() {
+ /* Do something */
- /*
- Dictionary does not require a package ID because the
- application calling removeData() saved "data1"
- */
- tizen.keymanager.removeData({"name": data_name});
+ /*
+ Dictionary does not require a package ID because the
+ application calling removeData() saved 'data1'
+ */
+ tizen.keymanager.removeData({'name': data_name});
}
tizen.keymanager.saveData(data_name, raw_data, null, onSave);
<pre class="prettyprint">
var aliases = tizen.keymanager.getDataAliasList();
-if (aliases.length != 0)
-{
- /*
- Assuming that the application calling removeData()
- has permission to remove aliases[0]
- */
- var app_data = tizen.keymanager.removeData(aliases[0]);
+if (aliases.length != 0) {
+ /*
+ Assuming that the application calling removeData()
+ has permission to remove aliases[0]
+ */
+ var app_data = tizen.keymanager.removeData(aliases[0]);
}
</pre>
</li>
<li id="support"><p>Check that the sensor is supported by the device using the <code>getCapability()</code> method of the <code>SystemInfo</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a> applications) for the proper <a href="#capability">capability</a> related to the sensor:</p>
<pre class="prettyprint">
-var proximityCapability =
- tizen.systeminfo.getCapability("http://tizen.org/feature/sensor.proximity");
+var proximityCapability = tizen.systeminfo.getCapability('http://tizen.org/feature/sensor.proximity');
-if (proximityCapability === true)
-{
- /* Device supports the proximity sensor */
- var proximitySensor = tizen.sensorservice.getDefaultSensor("PROXIMITY");
+if (proximityCapability === true) {
+ /* Device supports the proximity sensor */
+ var proximitySensor = tizen.sensorservice.getDefaultSensor('PROXIMITY');
}
</pre>
</li>
<pre class="prettyprint">
var sensors = tizen.sensorservice.getAvailableSensors();
-console.log("Available sensor: " + sensors.toString());
+console.log('Available sensor: ' + sensors.toString());
</pre>
</li>
<li><p>Obtain the <code>Sensor</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html#Sensor">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sensor.html#Sensor">wearable</a> applications) using the <code>getDefaultSensor()</code> method of the <code>SensorService</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html#SensorService">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sensor.html#SensorService">wearable</a> applications). Enable the sensor using the <code>start()</code> method:</p>
<pre class="prettyprint">
-var proximitySensor = tizen.sensorservice.getDefaultSensor("PROXIMITY");
+var proximitySensor = tizen.sensorservice.getDefaultSensor('PROXIMITY');
-function onsuccessCB()
-{
- console.log("The proximity sensor started successfully.");
+function onsuccessCB() {
+ console.log('The proximity sensor started successfully.');
}
proximitySensor.start(onsuccessCB);
<li><p>To get data from the sensor, use the appropriate method of the sensor object. For example, for the <code>LightSensor</code> (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html#LightSensor">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sensor.html#LightSensor">wearable</a> applications), use the <code>getLightSensorData()</code> method:</p>
<pre class="prettyprint">
-var lightSensor = tizen.sensorservice.getDefaultSensor("LIGHT");
+var lightSensor = tizen.sensorservice.getDefaultSensor('LIGHT');
-function onGetSuccessCB(sensorData)
-{
- console.log("light level: " + sensorData.lightLevel);
+function onGetSuccessCB(sensorData) {
+ console.log('light level: ' + sensorData.lightLevel);
}
-function onsuccessCB()
-{
- console.log("sensor started");
- lightSensor.getLightSensorData(onGetSuccessCB);
- lightSensor.stop();
+function onsuccessCB() {
+ console.log('sensor started');
+ lightSensor.getLightSensorData(onGetSuccessCB);
+ lightSensor.stop();
}
lightSensor.start(onsuccessCB);
<li>Define an event handler for sensor data changes by implementing the <code>SensorDataSuccessCallback</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html#SensorDataSuccessCallback">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sensor.html#SensorDataSuccessCallback">wearable</a> applications):
<pre class="prettyprint">
-function onchangedCB(sensorData)
-{
- console.log("Light sensor data: " + sensorData.lightLevel);
+function onchangedCB(sensorData) {
+ console.log('Light sensor data: ' + sensorData.lightLevel);
}
</pre>
</li>
</ul>
<pre class="prettyprint">
-var lightSensor = tizen.sensorservice.getDefaultSensor("LIGHT");
+var lightSensor = tizen.sensorservice.getDefaultSensor('LIGHT');
-function onsuccessCB()
-{
- console.log("Light sensor service has started successfully.");
+function onsuccessCB() {
+ console.log('Light sensor service has started successfully.');
}
-function onchangedCB(sensorData)
-{
- console.log("Light sensor data: " + sensorData.lightLevel);
+function onchangedCB(sensorData) {
+ console.log('Light sensor data: ' + sensorData.lightLevel);
}
lightSensor.setChangeListener(onchangedCB, 500, 2000);
<p>The default value of the second parameter is 100 and for the third parameter 0. If you do not pass a value, the default is used:</p>
<pre class="prettyprint">
-var lightSensor = tizen.sensorservice.getDefaultSensor("LIGHT");
+var lightSensor = tizen.sensorservice.getDefaultSensor('LIGHT');
-function onsuccessCB()
-{
- console.log("Light sensor service has started successfully.");
+function onsuccessCB() {
+ console.log('Light sensor service has started successfully.');
}
-function onchangedCB(sensorData)
-{
- console.log("Light sensor data: " + sensorData.lightLevel);
+function onchangedCB(sensorData) {
+ console.log('Light sensor data: ' + sensorData.lightLevel);
}
/* Use the default interval value (100 ms) */
<li>Define a success callback for handling a <code>SensorHardwareInfo</code> object (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html#SensorHardwareInfo">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sensor.html#SensorHardwareInfo">wearable</a> applications). You can also define an optional error callback.
<pre class="prettyprint">
-function onsuccessCB(hwInfo)
-{
- console.log("name: " + hwInfo.name);
- console.log("type: " + hwInfo.type);
- console.log("vendor: " + hwInfo.vendor);
- console.log("minValue: " + hwInfo.minValue);
- console.log("maxValue: " + hwInfo.maxValue);
- console.log("resolution: " + hwInfo.resolution);
- console.log("minInterval: " + hwInfo.minInterval);
- console.log("maxBatchCount: " + hwInfo.maxBatchCount);
+function onsuccessCB(hwInfo) {
+ console.log('name: ' + hwInfo.name);
+ console.log('type: ' + hwInfo.type);
+ console.log('vendor: ' + hwInfo.vendor);
+ console.log('minValue: ' + hwInfo.minValue);
+ console.log('maxValue: ' + hwInfo.maxValue);
+ console.log('resolution: ' + hwInfo.resolution);
+ console.log('minInterval: ' + hwInfo.minInterval);
+ console.log('maxBatchCount: ' + hwInfo.maxBatchCount);
}
-function onerrorCB(error)
-{
- console.log("An error occurred: " + error.message);
+function onerrorCB(error) {
+ console.log('An error occurred: ' + error.message);
}
</pre>
</li>
<li>Call the <code>getSensorHardwareInfo()</code> method of an existing <code>Sensor</code> object to obtain its hardware information as the <code>SensorHardwareInfo</code> object:
<pre class="prettyprint">
-var proximitySensor = tizen.sensorservice.getDefaultSensor("PROXIMITY");
+var proximitySensor = tizen.sensorservice.getDefaultSensor('PROXIMITY');
proximitySensor.getSensorHardwareInfo(onsuccessCB, onerrorCB);
</pre>
<p>To check whether a specific gesture type is supported on the current device, use the <code>isGestureSupported()</code> method of the <code>HumanActivityMonitorManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html#HumanActivityMonitorManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html#HumanActivityMonitorManager">wearable</a> applications):</p>
<pre class="prettyprint">
-try
-{
- var isSupported = tizen.humanactivitymonitor.isGestureSupported("GESTURE_PICK_UP");
- console.log("GESTURE_PICK_UP is " + (isSupported ? "supported" : "not supported"));
-}
-catch (error)
-{
- console.log("Error " + error.name + ": " + error.message);
+try {
+ var isSupported = tizen.humanactivitymonitor.isGestureSupported('GESTURE_PICK_UP');
+ console.log('GESTURE_PICK_UP is ' + (isSupported ? 'supported' : 'not supported'));
+} catch (error) {
+ console.log('Error ' + error.name + ': ' + error.message);
}
</pre>
<pre class="prettyprint">
var listenerId;
-function listener(data)
-{
- console.log("Received " + data.event + " event on " + new Date(data.timestamp * 1000) + " for "+ data.type + " type");
+function listener(data) {
+ console.log('Received ' + data.event + ' event on ' + new Date(data.timestamp * 1000) + ' for '+ data.type + ' type');
}
-function errorCallback(error)
-{
- console.log(error.name + ": " + error.message);
+function errorCallback(error) {
+ console.log(error.name + ': ' + error.message);
}
-try
-{
- listenerId = tizen.humanactivitymonitor.addGestureRecognitionListener("GESTURE_SHAKE", listener, errorCallback);
-}
-catch (error)
-{
- console.log("Error " + error.name + ": " + error.message);
+try {
+ listenerId = tizen.humanactivitymonitor.addGestureRecognitionListener('GESTURE_SHAKE', listener, errorCallback);
+} catch (error) {
+ console.log('Error ' + error.name + ': ' + error.message);
}
</pre>
</li>
<li>To stop receiving the notifications, remove the listener using the <code>removeGestureRecognitionListener()</code> method of the <code>HumanActivityMonitorManager</code> interface with the listener ID:
<pre class="prettyprint">
-try
-{
- tizen.humanactivitymonitor.removeGestureRecognitionListener(listenerId);
-}
-catch (err)
-{
- console.log("Exception: " + err.name);
+try {
+ tizen.humanactivitymonitor.removeGestureRecognitionListener(listenerId);
+} catch (err) {
+ console.log('Exception: ' + err.name);
}
</pre>
</li>
<pre class="prettyprint">
var counter = 0;
-function onchangedCB(hrmInfo)
-{
- console.log("Heart Rate: " + hrmInfo.heartRate);
- console.log("Peak-to-peak interval: " + hrmInfo.rRInterval + " milliseconds");
-
- counter++;
- if (counter > 10)
- {
- /* Stop the sensor after detecting a few changes */
- tizen.humanactivitymonitor.stop("HRM");
- }
+function onchangedCB(hrmInfo) {
+ console.log('Heart Rate: ' + hrmInfo.heartRate);
+ console.log('Peak-to-peak interval: ' + hrmInfo.rRInterval + ' milliseconds');
+
+ counter++;
+ if (counter > 10) {
+ /* Stop the sensor after detecting a few changes */
+ tizen.humanactivitymonitor.stop('HRM');
+ }
}
-tizen.humanactivitymonitor.start("HRM", onchangedCB);
+tizen.humanactivitymonitor.start('HRM', onchangedCB);
</pre>
<p>You can also detect the wrist up gesture using the <code>start()</code> method:</p>
<pre class="prettyprint">
-function onchangedCB()
-{
- console.log("You are looking at your smartwatch");
+function onchangedCB() {
+ console.log('You are looking at your smartwatch');
}
-tizen.humanactivitymonitor.start("WRIST_UP", onchangedCB)
+tizen.humanactivitymonitor.start('WRIST_UP', onchangedCB)
</pre>
</li>
<li>When the heart rate monitor (HRM) is enabled, you can get the current data using the <code>getHumanActivityData()</code> method of the <code>HumanActivityMonitorManager</code> interface:
<pre class="prettyprint">
-function onsuccessCB(hrmInfo)
-{
- console.log("Heart rate: " + hrmInfo.heartRate);
+function onsuccessCB(hrmInfo) {
+ console.log('Heart rate: ' + hrmInfo.heartRate);
}
-function onerrorCB(error)
-{
- console.log("Error occurred: " + error.message);
+function onerrorCB(error) {
+ console.log('Error occurred: ' + error.message);
}
-tizen.humanactivitymonitor.getHumanActivityData("HRM", onsuccessCB, onerrorCB);
+tizen.humanactivitymonitor.getHumanActivityData('HRM', onsuccessCB, onerrorCB);
</pre>
</li>
<li>To disable HAM when it is no longer required, use the <code>stop()</code> method of the <code>HumanActivityMonitorManager</code> interface:
<pre class="prettyprint">
-tizen.humanactivitymonitor.stop("HRM");
+tizen.humanactivitymonitor.stop('HRM');
</pre>
</li>
</ol>
<ol>
<li>To check whether a sensor is supported, use the <code>getCapability()</code> method of the <code>SystemInfo</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a> applications):
<pre class="prettyprint">
-if (tizen.systeminfo.getCapability("http://tizen.org/feature/sensor.barometer")
- === false)
-{
- console.log("PRESSURE is not supported on this device.");
+if (tizen.systeminfo.getCapability('http://tizen.org/feature/sensor.barometer') === false) {
+ console.log('PRESSURE is not supported on this device.');
- return;
+ return;
}
</pre>
</li>
<pre class="prettyprint">
var type = 'PRESSURE';
-var options =
-{
- retentionPeriod: 1 /* 1 hour */
+var options = {
+ retentionPeriod: 1 /* 1 hour */
}
-try
-{
- tizen.humanactivitymonitor.startRecorder(type, options);
-}
-catch (err)
-{
- console.log(err.name + ': ' + err.message);
+try {
+ tizen.humanactivitymonitor.startRecorder(type, options);
+} catch (err) {
+ console.log(err.name + ': ' + err.message);
}
</pre>
<p>To stop recording sensor data, use the <code>stopRecorder()</code> method of the <code>HumanActivityMonitorManager</code> interface:</p>
<pre class="prettyprint">
-try
-{
- tizen.humanactivitymonitor.stopRecorder('PRESSURE');
-}
-catch (err)
-{
- console.log(err.name + ': ' + err.message);
+try {
+ tizen.humanactivitymonitor.stopRecorder('PRESSURE');
+} catch (err) {
+ console.log(err.name + ': ' + err.message);
}
</pre>
</li>
<p>Even if your application never recorded any data, you can access any data that has been recorded in the database by other applications.</p>
<pre class="prettyprint">
-function onerror(error)
-{
- console.log(error.name + ': ' + error.message);
+function onerror(error) {
+ console.log(error.name + ': ' + error.message);
}
-function onread(data)
-{
- for (var idx = 0; idx < data.length; ++idx)
- {
- console.log('average pressure: ' + data[idx].average);
- }
+function onread(data) {
+ for (var idx = 0; idx < data.length; ++idx) {
+ console.log('average pressure: ' + data[idx].average);
+ }
}
var type = 'PRESSURE';
-try
-{
- tizen.humanactivitymonitor.readRecorderData(type, query, onread, onerror);
-}
-catch (error)
-{
- console.log(error.name + ': ' + error.message);
+try {
+ tizen.humanactivitymonitor.readRecorderData(type, query, onread, onerror);
+} catch (error) {
+ console.log(error.name + ': ' + error.message);
}
</pre>
</li>
var myCallbackInterval = 240000;
var mySampleInterval = 10000;
-function onchangedCB(gpsInfo)
-{
- console.log("this callback is called every " + myCallbackInterval + " milliseconds");
- console.log("the gpsInfo includes the information of the GPS that is collected every "
- + mySampleInterval + " milliseconds");
+function onchangedCB(gpsInfo) {
+ console.log('this callback is called every ' + myCallbackInterval + ' milliseconds');
+ console.log('the gpsInfo includes the GPS information that is collected every ' +
+ mySampleInterval + ' milliseconds');
}
-function onerrorCB(error)
-{
- console.log("Error occurred. Name:" + error.name + ", message: " + error.message);
+function onerrorCB(error) {
+ console.log('Error occurred. Name:' + error.name + ', message: ' + error.message);
}
-var option = {"callbackInterval": myCallbackInterval,
- "sampleInterval": mySampleInterval};
+var option = {
+ 'callbackInterval': myCallbackInterval,
+ 'sampleInterval': mySampleInterval
+};
-tizen.humanactivitymonitor.start("GPS", onchangedCB, onerrorCB, option);
+tizen.humanactivitymonitor.start('GPS', onchangedCB, onerrorCB, option);
</pre>
</li>
<li>When the heart-rate monitor (HRM) is enabled, you can get the current data using the <code>getHumanActivityData()</code> method of the <code>HumanActivityMonitorManager</code> interface:
<pre class="prettyprint">
-function onsuccessCB(hrmInfo)
-{
- console.log("Heart rate: " + hrmInfo.heartRate);
+function onsuccessCB(hrmInfo) {
+ console.log('Heart rate: ' + hrmInfo.heartRate);
}
-function onerrorCB(error)
-{
- console.log("Error occurred: " + error.message);
+function onerrorCB(error) {
+ console.log('Error occurred: ' + error.message);
}
-tizen.humanactivitymonitor.getHumanActivityData("HRM", onsuccessCB, onerrorCB);
+tizen.humanactivitymonitor.getHumanActivityData('HRM', onsuccessCB, onerrorCB);
</pre>
</li>
<li>To disable HAM when it is no longer required, use the <code>stop()</code> method of the <code>HumanActivityMonitorManager</code> interface:
<pre class="prettyprint">
-tizen.humanactivitymonitor.stop("HRM");
+tizen.humanactivitymonitor.stop('HRM');
</pre>
</li>
</ol>
<ol>
<li>To register an event handler for accumulative pedometer changes, use the <code>setAccumulativePedometerListener()</code> method of the <code>HumanActivityMonitorManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html#HumanActivityMonitorManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html#HumanActivityMonitorManager">wearable</a> applications):
<pre class="prettyprint">
-function onchangedCB(pedometerInfo)
-{
- console.log("Step status: " + pedometerInfo.stepStatus);
- console.log("Speed: " + pedometerInfo.speed);
- console.log("Walking frequency: " + pedometerInfo.walkingFrequency);
- /* Deregisters a previously registered listener */
- tizen.humanactivitymonitor.unsetAccumulativePedometerListener();
+function onchangedCB(pedometerInfo) {
+ console.log('Step status: ' + pedometerInfo.stepStatus);
+ console.log('Speed: ' + pedometerInfo.speed);
+ console.log('Walking frequency: ' + pedometerInfo.walkingFrequency);
+ /* Deregisters a previously registered listener */
+ tizen.humanactivitymonitor.unsetAccumulativePedometerListener();
}
tizen.humanactivitymonitor.setAccumulativePedometerListener(onchangedCB);
<ol>
<li>To register an event handler for recognizing a walking activity, use the <code>addActivityRecognitionListener()</code> method of the <code>HumanActivityMonitorManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html#HumanActivityMonitorManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html#HumanActivityMonitorManager">wearable</a> applications):
<pre class="prettyprint">
-function errorCallback(error)
-{
- console.log(error.name +": " + error.message);
+function errorCallback(error) {
+ console.log(error.name + ': ' + error.message);
}
-function listener(info)
-{
- console.log("type: " + info.type);
- console.log("timestamp: " + info.timestamp);
- console.log("accuracy: " + info.accuracy);
+function listener(info) {
+ console.log('type: ' + info.type);
+ console.log('timestamp: ' + info.timestamp);
+ console.log('accuracy: ' + info.accuracy);
}
-try
-{
- var listenerId =
- tizen.humanactivitymonitor.addActivityRecognitionListener("WALKING", listener,
- errorCallback);
-}
-catch (error)
-{
- console.log(error.name +": " + error.message);
+try {
+ var listenerId = tizen.humanactivitymonitor.addActivityRecognitionListener('WALKING', listener, errorCallback);
+} catch (error) {
+ console.log(error.name + ': ' + error.message);
}
</pre></li>
<pre class="prettyprint">
var listenerId;
-function errorCallback(error)
-{
- console.log(error.name + ": " + error.message);
+function errorCallback(error) {
+ console.log(error.name + ': ' + error.message);
}
-function listener(info)
-{
- console.log("type: " + info.type);
- console.log("timestamp: " + info.timestamp);
- console.log("accuracy: " + info.accuracy);
+function listener(info) {
+ console.log('type: ' + info.type);
+ console.log('timestamp: ' + info.timestamp);
+ console.log('accuracy: ' + info.accuracy);
- tizen.humanactivitymonitor.removeActivityRecognitionListener(listenerId,
- errorCallback);
+ tizen.humanactivitymonitor.removeActivityRecognitionListener(listenerId, errorCallback);
}
-try
-{
- listenerId =
- tizen.humanactivitymonitor.addActivityRecognitionListener("WALKING", listener,
- errorCallback);
-}
-catch (error)
-{
- console.log(error.name +": " + error.message);
+try {
+ listenerId = tizen.humanactivitymonitor.addActivityRecognitionListener('WALKING', listener, errorCallback);
+} catch (error) {
+ console.log(error.name + ': ' + error.message);
}
</pre>
</li>
<ol>
<li>To enable the monitor and start collecting data, use the <code>start()</code> method of the <code>HumanActivityMonitorManager</code> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html#HumanActivityMonitorManager">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html#HumanActivityMonitorManager">wearable</a> applications):
<pre class="prettyprint">
-function onchangedCB(sleepInfo)
-{
- console.log("Sleep status: " + sleepInfo.status);
- console.log("Timestamp: " + sleepInfo.timestamp + " milliseconds");
+function onchangedCB(sleepInfo) {
+ console.log('Sleep status: ' + sleepInfo.status);
+ console.log('Timestamp: ' + sleepInfo.timestamp + ' milliseconds');
}
-tizen.humanactivitymonitor.start("SLEEP_MONITOR", onchangedCB);
+tizen.humanactivitymonitor.start('SLEEP_MONITOR', onchangedCB);
</pre>
</li>
<li>To disable the monitor when it is no longer required, use the <code>stop()</code> method of the <code>HumanActivityMonitorManager</code> interface:
<pre class="prettyprint">
-tizen.humanactivitymonitor.stop("SLEEP_MONITOR");
+tizen.humanactivitymonitor.stop('SLEEP_MONITOR');
</pre>
</li>
</ol>
var keyCodes = {};
var supportedKeys = tizen.inputdevice.getSupportedKeys();
-console.log("Supported keys list");
-for (var i = 0; i < supportedKeys.length; ++i)
-{
- keyCodes[supportedKeys[i].name] = supportedKeys[i].code;
- console.log(i + ": " + supportedKeys[i].name + " - " + supportedKeys[i].code);
+console.log('Supported keys list');
+for (var i = 0; i < supportedKeys.length; ++i) {
+ keyCodes[supportedKeys[i].name] = supportedKeys[i].code;
+ console.log(i + ': ' + supportedKeys[i].name + ' - ' + supportedKeys[i].code);
}
</pre></li>
<p>If you do not want to gather information about all supported keys, create a separate list of keys for information gathering. If you want information about all supported keys, use the list retrieved in the previous use case.</p>
<pre class="prettyprint">
-var keys = ["VolumeUp", "VolumeDown"];
+var keys = ['VolumeUp', 'VolumeDown'];
var keyCodes = {};
</pre>
</li>
<p>If the result of the <code>getKey()</code> method is not <code>null</code>, you can access the key information. If the result is <code>null</code>, the key is not supported.</p>
<pre class="prettyprint">
-for (var i = 0; i < keys.length; i++)
-{
- try
- {
- var key = tizen.inputdevice.getKey(keys[i]);
- if (key == null)
- {
- console.log("key: " + keys[i] + " is not supported");
- }
- else
- {
- keyCodes[key.name] = key.code;
- console.log("key: " + key.name + " has code: " + key.code);
- }
- }
- catch (e)
- {
- console.log("error: " + e.name + ":" + e.message
- + ", when getting key with name " + keys[i]);
- }
+for (var i = 0; i < keys.length; i++) {
+ try {
+ var key = tizen.inputdevice.getKey(keys[i]);
+ if (key == null) {
+ console.log('key: ' + keys[i] + ' is not supported');
+ } else {
+ keyCodes[key.name] = key.code;
+ console.log('key: ' + key.name + ' has code: ' + key.code);
+ }
+ } catch (e) {
+ console.log('error: ' + e.name + ':' + e.message + ', when getting key with name ' + keys[i]);
+ }
}
</pre>
</li>
var codeNamesMap = {};
var supportedKeys = tizen.inputdevice.getSupportedKeys();
-for (var i = 0; i < supportedKeys.length; ++i)
-{
- try
- {
- tizen.inputdevice.registerKey(supportedKeys[i].name);
- codeNamesMap[supportedKeys[i].code] = supportedKeys[i].name;
- console.log("key: " + supportedKeys[i].name
- + " was registered for event handling");
- }
- catch (error)
- {
- console.log("failed to register " + supportedKeys[i].name + ": " + error);
- }
+for (var i = 0; i < supportedKeys.length; ++i) {
+ try {
+ tizen.inputdevice.registerKey(supportedKeys[i].name);
+ codeNamesMap[supportedKeys[i].code] = supportedKeys[i].name;
+ console.log('key: ' + supportedKeys[i].name + ' was registered for event handling');
+ } catch (error) {
+ console.log('failed to register ' + supportedKeys[i].name + ': ' + error);
+ }
}
</pre>
<p>If you know the exact list of keys you want to register, the registration can also be done with the asynchronous <code>registerKeyBatch()</code> method:</p>
<pre class="prettyprint">
-var keys = ["VolumeUp", "VolumeDown"];
+var keys = ['VolumeUp', 'VolumeDown'];
-function errorCB(err)
-{
- console.log('The following error occurred: ' + err.name);
+function errorCB(err) {
+ console.log('The following error occurred: ' + err.name);
}
-function successCB()
-{
- console.log('All keys registered successfully');
+function successCB() {
+ console.log('All keys registered successfully');
}
tizen.inputdevice.registerKeyBatch(keys, successCB, errorCB);
<li>
<p>To handle events for registered keys:</p>
<pre class="prettyprint">
-window.addEventListener("keydown", function(keyEvent)
- {
- if (codeNamesMap.hasOwnProperty(keyEvent.keyCode))
- {
- console.log("Registered key was pressed");
- /* Define some custom action */
- }
- else
- {
- console.log("Some other key was pressed");
- }
- });
-
-window.addEventListener("keyup", function(keyEvent)
- {
- if (codeNamesMap.hasOwnProperty(keyEvent.keyCode))
- {
- console.log("Registered key was released");
- /* Define some custom action */
- }
- else
- {
- console.log("Some other key was released");
- }
- });
+window.addEventListener('keydown', function(keyEvent) {
+ if (codeNamesMap.hasOwnProperty(keyEvent.keyCode)) {
+ console.log('Registered key was pressed');
+ /* Define some custom action */
+ } else {
+ console.log('Some other key was pressed');
+ }
+});
+
+window.addEventListener('keyup', function(keyEvent) {
+ if (codeNamesMap.hasOwnProperty(keyEvent.keyCode)) {
+ console.log('Registered key was released');
+ /* Define some custom action */
+ } else {
+ console.log('Some other key was released');
+ }
+});
</pre>
</li>
<li>
<p>When custom actions are no longer needed, deregister the keys:</p>
<pre class="prettyprint">
-for (var i = 0; i < supportedKeys.length; ++i)
-{
- tizen.inputdevice.unregisterKey(supportedKeys[i].name);
- console.log("key: " + supportedKeys[i].name
- + " was unregistered for event handling");
+for (var i = 0; i < supportedKeys.length; ++i) {
+ tizen.inputdevice.unregisterKey(supportedKeys[i].name);
+ console.log('key: ' + supportedKeys[i].name + ' was unregistered for event handling');
}
</pre>
<p>The deregistration can also be done with the <code>unregisterKeyBatch()</code> method:</p>
<pre class="prettyprint">
-var keys = ["VolumeUp", "VolumeDown"];
+var keys = ['VolumeUp', 'VolumeDown'];
-function errorCB(err)
-{
- console.log('The following error occurred: ' + err.name);
+function errorCB(err) {
+ console.log('The following error occurred: ' + err.name);
}
-function successCB()
-{
- console.log('Unregistered successfully');
+function successCB() {
+ console.log('Unregistered successfully');
}
tizen.inputdevice.unregisterKeyBatch(keys, successCB, errorCB);
<p><code>handler</code> parameter: Handler object implementing the <code>on*</code> event handlers.</p>
<p>The following example shows how to initialize the <code>WebHelperClient</code> by passing a customized handler object.</p>
<pre class="prettyprint">
-var WebHelperClientHandler =
-{
- onInit: function()
- {
- /* Do what you want when your IME gets the INIT message */
- }
+var WebHelperClientHandler = {
+ onInit: function() {
+ /* Do what you want when your IME gets the INIT message */
+ }
};
WebHelperClient.initialize(WebHelperClientHandler);
</pre>
<td>Enumeration values used when invoking the <code>sendKeyEvent()</code> and <code>forwardKeyEvent()</code> methods.
<p>Keycode example:</p>
<pre class="prettyprint">
-Keycode:
-{
- BACKSPACE:0xff08,
- TAB:0xff09,
- RETURN:0xff0d,
+Keycode: {
+ BACKSPACE:0xff08,
+ TAB:0xff09,
+ RETURN:0xff0d,
- ASCIITILDE:0x07e
+ ASCIITILDE:0x07e
},
</pre>
</div>
<pre class="prettyprint">
-var WebHelperClientHandler =
-{
- onProcessKeyEvent: function(code, mask, layout)
- {
- if (code == WebHelperClient.Keycode.a)
- {
- WebHelperClient.commitString("ㅁ");
-
- return true;
- }
- else
- {
- return false;
- }
- }
+var WebHelperClientHandler = {
+ onProcessKeyEvent: function(code, mask, layout) {
+ if (code == WebHelperClient.Keycode.a) {
+ WebHelperClient.commitString('ㅁ');
+
+ return true;
+ } else {
+ return false;
+ }
+ }
};
WebHelperClient.initialize(WebHelperClientHandler);
</pre>
<p>To prevent the key event from being sent back to the Web IME (as there is no need to translate that key event again), use the <code>forwardKeyEvent()</code> method that invokes the client application's fallback key event handler.</p>
<pre class="prettyprint">
<script type="text/javascript">
- /* Trigger the Web IME onProcessKeyEvent() event handler */
- WebHelperClient.sendKeyEvent(WebHelperClient.Keycode.a);
- /* Do NOT trigger the Web IME onProcessKeyEvent() event handler */
- WebHelperClient.forwardKeyEvent(WebHelperClient.Keycode.SEMICOLON);
+ /* Trigger the Web IME onProcessKeyEvent() event handler */
+ WebHelperClient.sendKeyEvent(WebHelperClient.Keycode.a);
+ /* Do NOT trigger the Web IME onProcessKeyEvent() event handler */
+ WebHelperClient.forwardKeyEvent(WebHelperClient.Keycode.SEMICOLON);
</script>
</pre>
<p>To send a batch of strings simultaneously, without generating key events for each of the component of a specific string, use the <code>commitString()</code> method:</p>
<pre class="prettyprint">
/*
- Generate the "a" key event in the client application
- "a" is appended to the client application's editable widget
+ Generate the 'a' key event in the client application
+ 'a' is appended to the client application's editable widget
*/
WebHelperClient.forwardKeyEvent(WebHelperClient.Keycode.a);
/*
- Append the string "www." to the client application's editable widget,
+ Append the string 'www.' to the client application's editable widget,
without generating key events
*/
-WebHelperClient.commitString("www.");
+WebHelperClient.commitString('www.');
</pre>
<p>To display a pre-edit string (a string that has not been finalized and can be substituted with another string), use the <code>updatePreeditString()</code> method:</p>
<pre class="prettyprint">
/*
- Show the pre-edit string "abc", usually marked with an underline or highlight,
- such as "<u>abc</u>" or "<span class="highlight">abc</span>"
+ Show the pre-edit string 'abc', usually marked with an underline or highlight,
+ such as '<u>abc</u>' or '<span class="highlight">abc</span>'
*/
-WebHelperClient.updatePreeditString("abc");
+WebHelperClient.updatePreeditString('abc');
/*
- Substitute the "abc" pre-edit string with a new pre-edit string "def",
- erasing the existing "abc" pre-edit string and displaying "<u>def</u>"
- or "<span class="highlight">def</span>" string on the editable widget
+ Substitute the 'abc' pre-edit string with a new pre-edit string 'def',
+ erasing the existing 'abc' pre-edit string and displaying '<u>def</u>'
+ or '<span class="highlight">def</span>' string on the editable widget
*/
-WebHelperClient.updatePreeditString("def");
+WebHelperClient.updatePreeditString('def');
</pre>
<h2 id="lifecycle" name="lifecycle">Web IME Life-cycle</h2>
<p align="center"><strong>Figure: Target object</strong></p>
<p align="center"><img src="../../../images/tau_animation_2.png" alt="Target object" /></p>
<pre class="prettyprint">
-<div id="blueBox"
- style="background-color: 'blue'; position:absolute; width:100px; height:100px;">
+<div id="blueBox" style="background-color: 'blue'; position:absolute; width:100px; height:100px;">
</div>
</pre>
<pre class="prettyprint">
<li>Create an animation with transform, CSS properties, effects, and ease.
<p>Once the target object is made, you can create an animation. The animation consists of an animation value including transform, CSS properties, and effect. Basically, an animation option is inserted with the duration of 1 s (1000 ms) only as a default. If you want to add an ease function, delay, loop, or callback, create an object for an animation option.</p>
<pre class="prettyprint">
-<div id="blueBox"
- style="background-color: 'blue'; position:absolute; width:100px; height:100px;">
+<div id="blueBox" style="background-color: 'blue'; position:absolute; width:100px; height:100px;">
</div>
</pre>
<pre class="prettyprint">
</pre>
<p><code>{animation}</code> can be various animations, such as transform, CSS property, or predefined effect. Basically, <code>{animation}</code> indicates the destination of the animation. For example, <code>{rotateZ: 90}</code> indicates a rotation from the current value to 90 degrees. To do this, you must set the starting point of the animation, and for this, an additional animation form is provided. <code>{rotateZ: [30, 90]}</code> indicates the changing rotation value of the transform from 30 to 90.</p>
<pre class="prettyprint">
-<div id="redBox"
- style="background-color: 'red'; position:absolute; width:100px; height:100px;"></div>
-<div id="blueBox"
- style="background-color: 'blue'; position:absolute;
- width:100px; height:100px; left: 200px;"></div>
+<div id="redBox" style="background-color: 'red'; position:absolute; width:100px; height:100px;"></div>
+<div id="blueBox" style="background-color: 'blue'; position:absolute; width:100px; height:100px; left: 200px;"></div>
</pre>
<pre class="prettyprint">
var t = tau.animation.target;
<h3 id="chaining">Chaining</h3>
<p>The animation is inserted to the animation queue automatically before playing. At first, this feature does not seem important for making an animation, but if this method is supported, the LOC (Line Of Code) is decreased significantly.</p>
<pre class="prettyprint">
-<div id="blueBox"
- style="background-color: 'blue'; position:absolute; width:100px; height:100px;"></div>
+<div id="blueBox" style="background-color: 'blue'; position:absolute; width:100px; height:100px;"></div>
</pre>
<pre class="prettyprint">
var t = tau.animation.target;
<p>To make an identical effect, you can make many single animations. The following example shows the <code>shake</code> effect:</p>
<pre class="prettyprint">
-<div id="blueBox"
- style="background-color: 'blue'; position:absolute; width:100px; height:100px;"></div>
+<div id="blueBox" style="background-color: 'blue'; position:absolute; width:100px; height:100px;"></div>
</pre>
<pre class="prettyprint">
var t = tau.animation.target;
</pre>
<p>Or instead, you can use a predefined animation:</p>
<pre class="prettyprint">
-<div id="blueBox"
- style="background-color: 'blue'; position:absolute; width:100px; height:100px;"></div>
+<div id="blueBox" style="background-color: 'blue'; position:absolute; width:100px; height:100px;"></div>
</pre>
<pre class="prettyprint">
var t = tau.animation.target;
</pre>
<pre class="prettyprint"
>var t = tau.animation.target;
-t('#blueBox').tween({translateY: [0, 150], rotateZ: [0, 180]},
-{
- duration: 1000,
- onStart: function()
- {
- t('#blueBox').innerText = 'start';
- },
- onComplete: function()
- {
- t('#blueBox').tween({backgroundColor: 'navy'}, {duration: 1000});
- }
+t('#blueBox').tween({translateY: [0, 150], rotateZ: [0, 180]}, {
+ duration: 1000,
+ onStart: function() {
+ t('#blueBox').innerText = 'start';
+ },
+ onComplete: function() {
+ t('#blueBox').tween({backgroundColor: 'navy'}, {duration: 1000});
+ }
});
</pre>
<p>In the above animation, the box is translated by Y axis from 0 to 150 and rotated from 0 to 180. Before translating and rotating, the <code>start</code> text is inserted into the box. After translating and rotating, the box's background color is changed to navy.</p>
<li>Edit the HTML code to add the component to your application screen:
<pre class="prettyprint">
-<div class="ui-page ui-page-active" id="pageCircleProgressBar"
- data-enable-page-scroll="false">
+<div class="ui-page ui-page-active" id="pageCircleProgressBar" data-enable-page-scroll="false">
<header class="ui-header">
<h2 class="ui-title">Circle Progress</h2>
</header>
<a href="#" class="ui-btn" id="minus">-10%</a>
<a href="#" class="ui-btn" id="plus">+10%</a>
</footer>
- <progress class="ui-circle-progress" id="circleprogress"
- max="100" value="20"></progress>
+ <progress class="ui-circle-progress" id="circleprogress" max="100" value="20"></progress>
</div>
</pre>
</li>
<li>Edit the CSS code to set the visual style of the progress bar:
<pre class="prettyprint">
-.ui-progressbar-large
-{
+.ui-progressbar-large {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
}
-.result
-{
+.result {
font-size: 35px;
text-align: center;
top: 33%;
position: absolute;
}
-@media all and (-tizen-geometric-shape: circle)
-{
- .result
- {
+@media all and (-tizen-geometric-shape: circle) {
+ .result {
top: 50%;
margin: 0;
}
- .ui-footer
- {
+ .ui-footer {
display: none;
}
}
<li>Edit the JavaScript code to manage the progress bar events and other functionality:
<pre class="prettyprint">
-(function()
-{
- var page = document.getElementById("pageCircleProgressBar"),
- progressBar = document.getElementById("circleprogress"),
- minusBtn = document.getElementById("minus"),
- plusBtn = document.getElementById("plus"),
- resultDiv = document.getElementById("result"),
- isCircle = tau.support.shape.circle,
- progressBarWidget,
- resultText,
- i;
-
- function printResult()
- {
- resultText = progressBarWidget.value();
- resultDiv.innerHTML = resultText + "%";
- };
-
- function clearVariables()
- {
- page = null;
- progressBar = null;
- minusBtn = null;
- plusBtn = null;
- resultDiv = null;
- };
-
- function unbindEvents()
- {
- page.removeEventListener("pageshow", pageBeforeShowHandler);
- page.removeEventListener("pagehide", pageHideHandler);
- if (isCircle)
- {
- document.removeEventListener("rotarydetent", rotaryDetentHandler);
- }
- else
- {
- minusBtn.removeEventListener("click", minusBtnClickHandler);
- plusBtn.removeEventListener("click", plusBtnClickHandler);
- }
- };
-
- function minusBtnClickHandler()
- {
- i = i - 10;
- if (i < 0)
- {
- i = 0;
- }
- progressBarWidget.value(i);
- printResult();
- };
-
- function plusBtnClickHandler()
- {
- i = i + 10;
- if (i > 100)
- {
- i = 100;
- }
- progressBarWidget.value(i);
- printResult();
- };
-
- function rotaryDetentHandler()
- {
- /* Get the rotary direction */
- var direction = event.detail.direction,
- value = parseInt(progressBarWidget.value());
-
- if (direction === "CW")
- {
- /* Right direction */
- if (value < 100)
- {
- value++;
- }
- else
- {
- value = 100;
- }
- }
- else if (direction === "CCW")
- {
- /* Left direction */
- if (value > 0)
- {
- value--;
- }
- else
- {
- value = 0;
- }
- }
-
- progressBarWidget.value(value);
- printResult();
- }
-
- function pageBeforeShowHandler()
- {
- if (isCircle)
- {
- /* Make the circular progressbar object */
- progressBarWidget = new tau.widget.CircleProgressBar(progressBar,
- {size: "full"});
- document.addEventListener("rotarydetent", rotaryDetentHandler);
- }
- else
- {
- progressBarWidget = new tau.widget.CircleProgressBar(progressBar,
- {size: "large"});
- minusBtn.addEventListener("click", minusBtnClickHandler);
- plusBtn.addEventListener("click", plusBtnClickHandler);
- }
-
- i = parseInt(progressBarWidget.value());
- resultDiv.innerHTML = i + "%";
- };
-
- function pageHideHandler()
- {
- unbindEvents();
- clearVariables();
- /* Release the object */
- progressBarWidget.destroy();
- };
-
- page.addEventListener("pagebeforeshow", pageBeforeShowHandler);
- page.addEventListener("pagehide", pageHideHandler);
+(function() {
+ var page = document.getElementById('pageCircleProgressBar'),
+ progressBar = document.getElementById('circleprogress'),
+ minusBtn = document.getElementById('minus'),
+ plusBtn = document.getElementById('plus'),
+ resultDiv = document.getElementById('result'),
+ isCircle = tau.support.shape.circle,
+ progressBarWidget,
+ resultText,
+ i;
+
+ function printResult() {
+ resultText = progressBarWidget.value();
+ resultDiv.innerHTML = resultText + '%';
+ }
+
+ function clearVariables() {
+ page = null;
+ progressBar = null;
+ minusBtn = null;
+ plusBtn = null;
+ resultDiv = null;
+ }
+
+ function unbindEvents() {
+ page.removeEventListener('pageshow', pageBeforeShowHandler);
+ page.removeEventListener('pagehide', pageHideHandler);
+ if (isCircle) {
+ document.removeEventListener('rotarydetent', rotaryDetentHandler);
+ } else {
+ minusBtn.removeEventListener('click', minusBtnClickHandler);
+ plusBtn.removeEventListener('click', plusBtnClickHandler);
+ }
+ }
+
+ function minusBtnClickHandler() {
+ i = i - 10;
+ if (i < 0) {
+ i = 0;
+ }
+ progressBarWidget.value(i);
+ printResult();
+ }
+
+ function plusBtnClickHandler() {
+ i = i + 10;
+ if (i > 100) {
+ i = 100;
+ }
+ progressBarWidget.value(i);
+ printResult();
+ }
+
+ function rotaryDetentHandler() {
+ /* Get the rotary direction */
+ var direction = event.detail.direction,
+ value = parseInt(progressBarWidget.value());
+
+ if (direction === 'CW') {
+ /* Right direction */
+ if (value < 100) {
+ value++;
+ } else {
+ value = 100;
+ }
+ } else if (direction === 'CCW') {
+ /* Left direction */
+ if (value > 0) {
+ value--;
+ } else {
+ value = 0;
+ }
+ }
+
+ progressBarWidget.value(value);
+ printResult();
+ }
+
+ function pageBeforeShowHandler() {
+ if (isCircle) {
+ /* Make the circular progressbar object */
+ progressBarWidget = new tau.widget.CircleProgressBar(progressBar, {size: 'full'});
+ document.addEventListener('rotarydetent', rotaryDetentHandler);
+ } else {
+ progressBarWidget = new tau.widget.CircleProgressBar(progressBar, {size: 'large'});
+ minusBtn.addEventListener('click', minusBtnClickHandler);
+ plusBtn.addEventListener('click', plusBtnClickHandler);
+ }
+
+ i = parseInt(progressBarWidget.value());
+ resultDiv.innerHTML = i + '%';
+ }
+
+ function pageHideHandler() {
+ unbindEvents();
+ clearVariables();
+ /* Release the object */
+ progressBarWidget.destroy();
+ }
+
+ page.addEventListener('pagebeforeshow', pageBeforeShowHandler);
+ page.addEventListener('pagehide', pageHideHandler);
}());
</pre>
</li>
<title>Support for Circular UI</title>
<link rel="stylesheet" href="tau.css">
<!--CSS media query on a link element-->
- <link rel="stylesheet"
- media="all and (-tizen-geometric-shape: circle)"
- href="tau.circle.css">
+ <link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="tau.circle.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript" src="tau.js"></script>
<script>
- if (tau.support.shape.circle)
- {
- /* Implement your code for circular UI */
- }
- else
- {
- /* Implement your code for rectangular UI */
- }
+ if (tau.support.shape.circle) {
+ /* Implement your code for circular UI */
+ } else {
+ /* Implement your code for rectangular UI */
+ }
</script>
</body>
</pre>
</table>
<pre class="prettyprint">
-.className
-{
+.className {
/* Implement the basic CSS style for all types of devices (rectangular and circular) */
}
-@media screen and (-tizen-geometric-shape: circle)
-{
- .className
- {
+@media screen and (-tizen-geometric-shape: circle) {
+ .className {
/* Implement the CSS style to be overridden in circular */
}
}
<p>TAU provides the <code>tau.support.shape.circle</code> property that checks whether the device screen is a circle. If you want to implement code selectively for a circular UI and rectangular UI, you can use the property with a boolean value. Note that for developing in a browser environment, this property is always set to <code>true</code> when the <code>tau.circle.css</code> file is loaded.</p>
<pre class="prettyprint">
-if (tau.support.shape.circle)
-{
- /* Implement your code for circular UI */
-}
-else
-{
- /* Implement your code for rectangular UI */
+if (tau.support.shape.circle) {
+ /* Implement your code for circular UI */
+} else {
+ /* Implement your code for rectangular UI */
}
</pre>
<p>The following code snippet shows how to create a TAU Animation:</p>
<pre class="prettyprint">
-<div id="redBox"
- style="background-color: 'red'; position:absolute; width:100px; height:100px;"></div>
-<div id="blueBox"
- style="background-color: 'blue'; position:absolute;
- width:100px; height:100px; left: 200px;"></div>
+<div id="redBox" style="background-color: 'red'; position:absolute; width:100px; height:100px;"></div>
+<div id="blueBox" style="background-color: 'blue'; position:absolute; width:100px; height:100px; left: 200px;"></div>
</pre>
<pre class="prettyprint">
var t = tau.animation.target;
</li>
</ul>
<pre class="prettyprint">
-<div id="redBox"
- style="background-color: 'red'; position:absolute; width:100px; height:100px;">
-</div>
+<div id="redBox" style="background-color: 'red'; position:absolute; width:100px; height:100px;"></div>
</pre>
<pre class="prettyprint">
var t = tau.animation.target;
<p>An <code>option</code> consists of a duration, ease, delay, callback, and stagger. In order to provide better usage, if you want to use only duration, you can set the duration as a number value like in the previous examples. If any other options are needed, you must make an <code>{option}</code> object and insert the <code>duration: value</code> into the object.
</p>
<pre class="prettyprint">
-<div id="redBox"
- style="background-color: 'red'; position:absolute; width:100px; height:100px;">
-</div>
-<div id="blueBox"
- style="background-color: 'blue'; position:absolute;
- width:100px; height:100px; left: 200px;"></div>
+<div id="redBox" style="background-color: 'red'; position:absolute; width:100px; height:100px;"></div>
+<div id="blueBox" style="background-color: 'blue'; position:absolute; width:100px; height:100px; left: 200px;"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
t('#blueBox').tween({rotateZ: 120}, {duration: 1000, ease: 'bounceInOut'});
/* After 500ms, blueBox is rotated */
t('#blueBox').tween({rotateZ: 120}, {duration: 1000, delay: 500});
-t('#blueBox').tween({rotateZ: 120}, {duration: 1000, onStart: function()
- {
- /* Before animation, the text is inserted into blueBox */
- t('#blueBox').style.innerText = 'start';
- }, onComplete: function()
- {
- /* After animation, blueBox is animated with a predefined effect */
- t('#blueBox').tween('swing', 1000);
- }
+t('#blueBox').tween({rotateZ: 120}, {
+ duration: 1000,
+ onStart: function() {
+ /* Before animation, the text is inserted into blueBox */
+ t('#blueBox').style.innerText = 'start';
+ }, onComplete: function() {
+ /* After animation, blueBox is animated with a predefined effect */
+ t('#blueBox').tween('swing', 1000);
+ }
});
/*
All boxes that include the className 'box' are
<html>
<head>
<style>
- .box
- {
+ .box {
position: absolute;
width: 100px;
height: 100px;
<script src="lib/tau/animation/tau.animation.min.js" type="text/javascript"></script>
</head>
<body>
- <div id="redBox"
- style="background-color: 'red'; position:absolute; width:100px; height:100px;"></div>
- <div id="blueBox"
- style="background-color: 'blue'; position:absolute; width:100px; height:100px;"></div>
+ <div id="redBox" style="background-color: 'red'; position:absolute; width:100px; height:100px;"></div>
+ <div id="blueBox" style="background-color: 'blue'; position:absolute; width:100px; height:100px;"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script>
- var t = tau.animation.target;
- /* Single animation */
- t('#redBox').tween('swing', 1000);
- /* Single animation */
- t('#blueBox').tween({rotateZ: 120}, 1000).tween({translateX: 400}, 1000);
- /* Group animation */
- t('.box').tween({translateY: 500}, {duration: 1000, stagger: 200});
+ var t = tau.animation.target;
+ /* Single animation */
+ t('#redBox').tween('swing', 1000);
+ /* Single animation */
+ t('#blueBox').tween({rotateZ: 120}, 1000).tween({translateX: 400}, 1000);
+ /* Group animation */
+ t('.box').tween({translateY: 500}, {duration: 1000, stagger: 200});
</script>
</body>
</html>
</table>
<p>To bind an event callback on the <code>tizenhwkey</code> events, use the following code:</p>
<pre class="prettyprint">
-window.addEventListener("tizenhwkey", function(ev)
- {
- if (ev.keyName == "back")
- {
- /* Call window.history.back() to go to previous browser window */
- /* Call tizen.application.getCurrentApplication().exit() to exit application */
- /* Add script to add another behavior */
- }
- });
+window.addEventListener('tizenhwkey', function(ev) {
+ if (ev.keyName == 'back') {
+ /* Call window.history.back() to go to previous browser window */
+ /* Call tizen.application.getCurrentApplication().exit() to exit application */
+ /* Add script to add another behavior */
+ }
+});
</pre>
<h3>Exiting the Application with the Back Key</h3>
<p>The Tizen Device APIs provide an application exit method. Even if the application has many pages, it can handle the back/exit process.</p>
<p>With a TAU page, just remember the ID of the main page. In the following example, the ID of the main page is <code>main</code>.</p>
<pre class="prettyprint">
-(function()
-{
- window.addEventListener("tizenhwkey", function(ev);
- {
- if (ev.keyName === "back")
- {
- var page = document.getElementsByClassName("ui-page-active")[0],
- pageid = page ? page.id: "";
- if (pageid === "main")
- {
- try
- {
- tizen.application.getCurrentApplication().exit();
- }
- catch (ignore)
- {
- }
+(function() {
+ window.addEventListener('tizenhwkey', function(ev) {
+ if (ev.keyName === 'back') {
+ var page = document.getElementsByClassName('ui-page-active')[0],
+ pageid = page ? page.id : '';
+ if (pageid === 'main') {
+ try {
+ tizen.application.getCurrentApplication().exit();
+ } catch (ignore) {}
+ } else {
+ window.history.back();
}
- else
- {
- window.history.back();
- }
- }
- });
+ }
+ });
}());
</pre>
<p>To bind an event callback on rotary events, use the following code:</p>
<pre class="prettyprint">
-document.addEventListener("rotarydetent", function(ev)
- {
- var direction = ev.detail.direction;
- /* Add behavior for detent detected event with a direction value */
- });
+document.addEventListener('rotarydetent', function(ev) {
+ var direction = ev.detail.direction;
+ /* Add behavior for detent detected event with a direction value */
+});
</pre>
<h2 class="ui-title">Bottom Button</h2>
</header>
<div class="ui-content content-padding">
- It was a real pleasure for me to finally get to meet you. My colleagues join me
- in sending you our holiday greetings.
+ It was a real pleasure for me to finally get to meet you. My colleagues join me in sending you our holiday greetings.
</div>
<footer class="ui-footer ui-bottom-button">
<a href="#" class="ui-btn">Button</a>
<h2 class="ui-title">Multiple Buttons</h2>
</header>
<div class="ui-content content-padding">
- It was a real pleasure for me to finally get to meet you.
- My colleagues join me in sending you our holiday greetings.
+ It was a real pleasure for me to finally get to meet you. My colleagues join me in sending you our holiday greetings.
</div>
<a class="drawer-handler"></a>
<!--Circle profile-->
- <div id="moreoptionsDrawer" class="ui-drawer drawer-elem"
- data-drawer-target="#bottomButtonWithMorePage" data-position="right"
- data-enable="true" data-drag-edge="1">
+ <div id="moreoptionsDrawer" class="ui-drawer drawer-elem" data-drawer-target="#bottomButtonWithMorePage" data-position="right" data-enable="true" data-drag-edge="1">
<div id="selector" class="ui-selector">
<div class="ui-item show-icon" data-title="2"></div>
<div class="ui-item human-icon" data-title="3"></div>
<li>Edit the CSS code to set the visual style of the buttons:
<pre class="prettyprint">
-.drawer-elem
-{
+.drawer-elem {
display: none;
}
-@media all and (-tizen-geometric-shape: circle)
-{
- .drawer-handler
- {
+@media all and (-tizen-geometric-shape: circle) {
+ .drawer-handler {
width: 24px;
height: 115px;
position: fixed;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: 0 40px;
}
- .ui-bottom-button a + a
- {
+ .ui-bottom-button a + a {
display: none;
}
}
</li>
<li>Edit the JavaScript code to manage the footer button events and other functionalities:
<pre class="prettyprint">
-(function()
-{
- var page = document.querySelector("#bottomButtonWithMorePage"),
- drawer = page.querySelector("#moreoptionsDrawer"),
- handler = page.querySelector(".ui-more");
-
- page.addEventListener("pagebeforeshow", function()
- {
- if (tau.support.shape.circle)
- {
- tau.helper.DrawerMoreStyle.create(drawer,
- {
- handler: ".drawer-handler",
+(function() {
+ var page = document.querySelector('#bottomButtonWithMorePage'),
+ drawer = page.querySelector('#moreoptionsDrawer'),
+ handler = page.querySelector('.ui-more');
+
+ page.addEventListener('pagebeforeshow', function() {
+ if (tau.support.shape.circle) {
+ tau.helper.DrawerMoreStyle.create(drawer, {
+ handler: '.drawer-handler',
});
- }
- });
+ }
+ });
})();
</pre>
</li>
<li>Set the locale using the following example code:
<pre class="prettyprint">
var globalize = tau.util.globalize,
- localeId = "ko-KR";
-
-document.addEventListener('pageshow', function()
- {
- globalize.setLocale(localeId).done(function(ko)
- {
- /* "ko" is the Globalize utility instance */
- console.log(ko.getLocale()); /* "ko" */
- })
- })
+ localeId = 'ko-KR';
+
+document.addEventListener('pageshow', function() {
+ globalize.setLocale(localeId).done(function(ko) {
+ /* 'ko' is the Globalize utility instance */
+ console.log(ko.getLocale()); /* 'ko' */
+ });
+});
</pre>
<p>The <code>setLocale()</code> method is not synchronous, and it returns the deferred object with the methods <code>then()</code>, <code>done()</code>, and <code>fail()</code>. Use these methods to receive the Globalize utility instance.</p>
<li><code>formatCurrency()</code>:
<pre class="prettyprint">
var globalize = tau.util.globalize,
- localeId = "ko-KR",
- currency_unit = "KRW"; /* ISO 4217 */
-
-document.addEventListener('pageshow', function()
- {
- globalize.setLocale(localeId).done(function(ko)
- {
- console.log(ko.formatCurrency(69000, currency_unit)); /* ₩69,900 */
- })
- })
+ localeId = 'ko-KR',
+ currency_unit = 'KRW'; /* ISO 4217 */
+
+document.addEventListener('pageshow', function() {
+ globalize.setLocale(localeId).done(function(ko) {
+ console.log(ko.formatCurrency(69000, currency_unit)); /* ₩69,900 */
+ });
+});
</pre>
<p>For more information, see the <a href="http://en.wikipedia.org/wiki/ISO_4217" target="_blank">currency unit standard in ISO 4217</a>.</p>
</li>
<li><code>formatDate()</code>:
<pre class="prettyprint">
var globalize = tau.util.globalize,
- localeId = "ko-KR",
- currency_unit = "KRW"; /* ISO 4217 */
-
-document.addEventListener('pageshow', function()
- {
- globalize.setLocale(localeId).done(function(ko)
- {
- console.log(ko.formatDate(new Date(), {datetime:"medium"});
- })
- })
+ localeId = 'ko-KR',
+ currency_unit = 'KRW'; /* ISO 4217 */
+
+document.addEventListener('pageshow', function() {
+ globalize.setLocale(localeId).done(function(ko) {
+ console.log(ko.formatDate(new Date(), {datetime:'medium'});
+ });
+});
</pre>
<p>For more information, see <a href="https://github.com/jquery/globalize/blob/master/doc/api/date/date-formatter.md" target="_blank">date-formatter</a>.</p>
</li>
<li><code>getCalendar()</code>:
<pre class="prettyprint">
var globalize = tau.util.globalize,
- localeId = "ko-KR";
-
-document.addEventListener('pageshow', function()
- {
- globalize.setLocale(localeId).done(function(ko)
- {
- console.log(ko.getCalendar().months.format.wide, undefined, 4));
- })
- })
+ localeId = 'ko-KR';
+
+document.addEventListener('pageshow', function() {
+ globalize.setLocale(localeId).done(function(ko) {
+ console.log(ko.getCalendar().months.format.wide, undefined, 4));
+ });
+});
</pre>
<p>The calendar format is specified in the <code>gregorian.json</code> file in the CLDR data.</p>
</li>
<li>Create a JSON file for the <code>formatMessage</code> strings (custom locale strings) in locales paths:
<pre class="prettyprint">
{
- "en":
- {
- "like":
- [
+ "en": {
+ "like": [
"{0, plural, offset:1",
"=0 {Be the first to like this}",
"=1 {You liked this}",
"other {You and # others liked this}",
"}"
],
- "greeting":
- {
+ "greeting": {
"hello":"hello",
"bye":"bye"
},
- "longText":
- [
+ "longText": [
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non",
"quis exercitationem culpa nesciunt nihil aut nostrum explicabo",
"reprehenderit optio amet ab temporibus asperiores quasi cupiditate.",
<li>Call the <code>setLocale()</code> method to load the custom locale files automatically:
<pre class="prettyprint">
var globalize = tau.util.globalize,
- localeId = "ko-KR";
-
-document.addEventListener('pageshow', function()
- {
- globalize.setLocale(localeId).done(function(ko)
- {
- console.log(ko.formatMessage("greeting/hello"));
- console.log(ko.formatMessage("greeting/bye"));
- console.log(ko.formatMessage("longText"));
- })
- })
+ localeId = 'ko-KR';
+
+document.addEventListener('pageshow', function() {
+ globalize.setLocale(localeId).done(function(ko) {
+ console.log(ko.formatMessage('greeting/hello'));
+ console.log(ko.formatMessage('greeting/bye'));
+ console.log(ko.formatMessage('longText'));
+ });
+});
</pre>
</li>
</ol>
<li>Create a locale resource in the locales path:
<pre class="prettyprint">
{
- "en":
- {
- "formatter":
- {
+ "en": {
+ "formatter": {
"welcome":"Hello Mr. {0}",
"thankyou":"Bye Mr. {custom}."
}
<li>Use the <code>messageFormatter()</code> method:
<pre class="prettyprint">
var globalize = tau.util.globalize,
- localeId = "en-US";
-
-document.addEventListener('pageshow', function()
- {
- globalize.setLocale(localeId).done(function(en)
- {
- var welcomeFormatter = en.messageFormatter('formatter/welcome'),
- thankyouFormatter = en.messageFormatter('formatter/thankyou'),
- welcomeMessageList = ["Tom"],
- thankyouMessageList = {custom:"Tom"};
-
- console.log(welcomeFormatter(welcomeMessageList));
- console.log(thankyouFormatter(thankyouMessageList));
- })
- })
+ localeId = 'en-US';
+
+document.addEventListener('pageshow', function() {
+ globalize.setLocale(localeId).done(function(en) {
+ var welcomeFormatter = en.messageFormatter('formatter/welcome'),
+ thankyouFormatter = en.messageFormatter('formatter/thankyou'),
+ welcomeMessageList = ['Tom'],
+ thankyouMessageList = {custom:'Tom'};
+
+ console.log(welcomeFormatter(welcomeMessageList));
+ console.log(thankyouFormatter(thankyouMessageList));
+ });
+});
</pre>
</li>
</ol>
<li>The following example has ar-EG as the given locale, and the language has an RTL direction:
<pre class="prettyprint">
var globalize = tau.util.globalize,
- localeId = "ar-EG";
-
-document.addEventListener('pageshow', function()
- {
- globalize.setLocale(localeId).done(function(ar)
- {
- /* Do something */
- })
- })
+ localeId = 'ar-EG';
+
+document.addEventListener('pageshow', function() {
+ globalize.setLocale(localeId).done(function(ar) {
+ /* Do something */
+ });
+});
</pre>
</li>
<li>The following example uses the locale-specific CSS to switch on the RTL feature for a UI component:
<pre class="prettyprint">
-.ui-script-direction-rtl .ui-listview
-{
+.ui-script-direction-rtl .ui-listview {
direction: rtl;
}
-.ui-script-direction-rtl .ui-li.ui-li-static
-{
+.ui-script-direction-rtl .ui-li.ui-li-static {
text-align: right;
unicode-bidi: bidi-override;
}
<p>The following example shows how to use the RTL property in a locale object (the <code>rtl</code> variable). If a given locale has an RTL direction, the variable is <code>true</code>.</p>
<pre class="prettyprint">
var globalize = tau.util.globalize,
- localeId = "ar-EG";
-
-document.addEventListener('pageshow', function()
- {
- globalize.setLocale(localeId).done(function(ar)
- {
- console.log(ar.rtl); /* true */
- })
- })
+ localeId = 'ar-EG';
+
+document.addEventListener('pageshow', function() {
+ globalize.setLocale(localeId).done(function(ar) {
+ console.log(ar.rtl); /* true */
+ });
+});
</pre>
<p>The following examples show header events with Marquee.</p>
<pre class="prettyprint">
-var page = document.querySelector("#myPage");
-
-page.addEventListener("pagebeforeshow", function()
- {
- var textElement = page.querySelector(".ui-title"),
- marquee = new tau.widget.Marquee(textElement);
- }, false);
-
-page.addEventListener("headercollapse", function()
- {
- if (marquee)
- {
- marquee.reset();
- }
- }, false);
-
-page.addEventListener("headerexpandcomplete", function()
- {
- if (marquee)
- {
- marquee.start();
- }
- }, false);
+var page = document.querySelector('#myPage');
+
+page.addEventListener('pagebeforeshow', function() {
+ var textElement = page.querySelector('.ui-title'),
+ marquee = new tau.widget.Marquee(textElement);
+}, false);
+
+page.addEventListener('headercollapse', function() {
+ if (marquee) {
+ marquee.reset();
+ }
+}, false);
+
+page.addEventListener('headerexpandcomplete', function() {
+ if (marquee) {
+ marquee.start();
+ }
+}, false);
</pre>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<p>This scaling mode is best suited for Tizen devices, since the entire screen can be scaled on the viewport level. In the viewport scaling mode, set the size of all resources to fit the 360 px screen width.</p>
<p>You can also use fixed-width scaling if you do not want to scale your application or if you want to set your own scale. In this case, declare a viewport but note that the default viewport scaling is overridden by the declared viewport. In the Tizen Web UI components, viewport scaling is set automatically to <code>device-width</code>:</p>
<pre class="prettyprint lang-html">
-<meta name="viewport"
- content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</pre>
<p>To enable fixed-width scaling, the header must contain the <code><meta name="viewport"></code> element:</p>
<pre class="prettyprint">
<pre class="prettyprint">
<script>
- var helperInstance = tau.helper.<NameSpace>
+ var helperInstance = tau.helper.<NameSpace>;
</script>
</pre>
<div class="ui-content">
<ul class="ui-listview ui-snap-listview expand-list" id="snapList">
<li class="li-has-2line">
- <div class="ui-marquee ui-marquee-gradient">
- 1.SnapListview with Marquee SnapListview with Marquee
- </div>
+ <div class="ui-marquee ui-marquee-gradient">1.SnapListview with Marquee SnapListview with Marquee</div>
<div class="li-text-sub ui-li-sub-text">sub-text</div>
</li>
<li class="li-has-2line">
- <div class="ui-marquee ui-marquee-gradient">
- 2.SnapListview with Marquee SnapListview with Marquee
- </div>
+ <div class="ui-marquee ui-marquee-gradient">2.SnapListview with Marquee SnapListview with Marquee</div>
<div class="li-text-sub ui-li-sub-text">sub-text</div>
</li>
<li class="li-has-2line">
- <div class="ui-marquee ui-marquee-gradient">
- 3.SnapListview with Marquee SnapListview with Marquee
- </div>
+ <div class="ui-marquee ui-marquee-gradient">3.SnapListview with Marquee SnapListview with Marquee</div>
<div class="li-text-sub ui-li-sub-text">sub-text</div>
</li>
<li class="li-has-2line">
- <div class="ui-marquee ui-marquee-gradient">
- 4.SnapListview with Marquee SnapListview with Marquee
- </div>
+ <div class="ui-marquee ui-marquee-gradient">4.SnapListview with Marquee SnapListview with Marquee</div>
<div class="li-text-sub ui-li-sub-text">sub-text</div>
</li>
</ul>
<li>Edit the CSS code to set your list animation style:
<pre class="prettyprint">
-.ui-listview.expand-list li.li-has-2line .ui-marquee
-{
+.ui-listview.expand-list li.li-has-2line .ui-marquee {
-webkit-transform: translate3d(0, 16px, 0);
-webkit-transition: all ease .5s;
}
-.ui-listview.expand-list li.li-has-2line.ui-snap-listview-selected .ui-marquee
-{
+.ui-listview.expand-list li.li-has-2line.ui-snap-listview-selected .ui-marquee {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: all ease 1s;
}
-.ui-listview.expand-list li.li-has-2line .ui-li-sub-text
-{
+.ui-listview.expand-list li.li-has-2line .ui-li-sub-text {
-webkit-transform: translate3d(0, -20px, 0);
opacity: 0;
-webkit-transition: all ease .5s;
}
-.ui-listview.expand-list li.li-has-2line.ui-snap-listview-selected .ui-li-sub-text
-{
+.ui-listview.expand-list li.li-has-2line.ui-snap-listview-selected .ui-li-sub-text {
-webkit-transform: translate3d(0, 0, 0);
opacity: 1;
-webkit-transition: all ease 1s;
<li>Edit the JavaScript code to make your list into a SnapListMarqueeStyle component and manage the list events:
<pre class="prettyprint">
<script>
-var page = document.getElementById("snaplistTest"),
- list = document.getElementById("snapList"),
+var page = document.getElementById('snaplistTest'),
+ list = document.getElementById('snapList'),
listHelper;
-page.addEventListener("pageshow", function()
- {
- listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
- });
+page.addEventListener('pageshow', function() {
+ listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
+});
-page.addEventListener("pagehide", function()
- {
- listHelper.destroy();
- });
+page.addEventListener('pagehide', function() {
+ listHelper.destroy();
+});
</script>
</pre>
</li>
</ul>
<script>
- var list = document.getElementById("snapList"),
- listHelper;
+ var list = document.getElementById('snapList'),
+ listHelper;
- /* Create the helper */
- listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
+ /* Create the helper */
+ listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
</script>
</pre>
</li>
</ul>
<script>
- var list = document.getElementById("snapList"),
- listHelper;
+ var list = document.getElementById('snapList'),
+ listHelper;
- /* Create the helper */
- listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
+ /* Create the helper */
+ listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
- /* Destroy the helper */
- listHelper.destroy();
+ /* Destroy the helper */
+ listHelper.destroy();
</script>
</pre>
</li>
<li>Edit the JavaScript code to manage the index scroll bar events and other functionality:
<p>To create a component selectively:</p>
<pre class="prettyprint">
-var indexScrollbarElement = document.getElementById("indexscrollbar");
-
-if (!tau.support.shape.circle)
-{
- /* Create IndexScrollbar */
- indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement);
-}
-else
-{
- /* Create CircularIndexScrollbar */
- indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement);
+var indexScrollbarElement = document.getElementById('indexscrollbar');
+
+if (!tau.support.shape.circle) {
+ /* Create IndexScrollbar */
+ indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement);
+} else {
+ /* Create CircularIndexScrollbar */
+ indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement);
}
</pre>
<p>To use the callback:</p>
<pre class="prettyprint">
-indexScrollbarElement.addEventListener("select", function(event)
- {
- var index = event.detail.index;
- /* Do something using the index */
- console.log(index);
- });
+indexScrollbarElement.addEventListener('select', function(event) {
+ var index = event.detail.index;
+ /* Do something using the index */
+ console.log(index);
+});
</pre>
<p>In the following example, the list scrolls to the position of the list item defined using the <code>ui-listview-divider</code> class, selected by the index scroll bar.</p>
<p>Note that in a rectangular UI, touching the index generates the selection, but in a round UI, the selection occurs when using the rotary.</p>
<pre class="prettyprint">
-(function()
-{
- var page = document.getElementById("pageIndexScrollbar"),
- listviewElement = document.getElementById("list1"),
- isCircle = tau.support.shape.circle,
- scroller,
- indexScrollbar;
-
- page.addEventListener("pageshow", function(ev)
- {
- var indexScrollbarElement = document.getElementById("indexscrollbar"),
- /* List dividers */
- listDividers =
- listviewElement.getElementsByClassName("ui-listview-divider"),
- dividers = {}, /* Collection of list dividers */
- indices = [], /* Index list */
- divider,
- i, idx;
-
- /* For all list dividers */
- for (i = 0; i < listDividers.length; i++)
- {
+(function() {
+ var page = document.getElementById('pageIndexScrollbar'),
+ listviewElement = document.getElementById('list1'),
+ isCircle = tau.support.shape.circle,
+ scroller,
+ indexScrollbar;
+
+ page.addEventListener('pageshow', function(ev) {
+ var indexScrollbarElement = document.getElementById('indexscrollbar'),
+ /* List dividers */
+ listDividers = listviewElement.getElementsByClassName('ui-listview-divider'),
+ dividers = {}, /* Collection of list dividers */
+ indices = [], /* Index list */
+ divider,
+ i, idx;
+
+ /* For all list dividers */
+ for (i = 0; i < listDividers.length; i++) {
/* Add the list divider elements to the collection */
divider = listDividers[i];
idx = divider.innerText;
/* Add the index to the index list */
indices.push(idx);
- }
-
- scroller = tau.util.selectors.getScrollableParent(listviewElement);
-
- if (!isCircle)
- {
- indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement,
- {index: indices,
- container: scroller});
- }
- else
- {
+ }
+
+ scroller = tau.util.selectors.getScrollableParent(listviewElement);
+
+ if (!isCircle) {
+ indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement, {index: indices, container: scroller});
+ } else {
/* Create IndexScrollbar */
- indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement,
- {index: indices});
-
- /* Add SnapListview item "selected" event handler */
- listviewElement.addEventListener("selected", function(ev)
- {
- var indexValue = ev.target.textContent[0];
- indexScrollbar.value(indexValue);
+ indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement, {index: indices});
+
+ /* Add SnapListview item 'selected' event handler */
+ listviewElement.addEventListener('selected', function(ev) {
+ var indexValue = ev.target.textContent[0];
+ indexScrollbar.value(indexValue);
});
- }
+ }
- /* Add IndexScrollbar index "select" event handler */
- indexScrollbarElement.addEventListener("select", function(ev)
- {
+ /* Add IndexScrollbar index 'select' event handler */
+ indexScrollbarElement.addEventListener('select', function(ev) {
var divider,
idx = ev.detail.index;
divider = dividers[idx];
- if (divider && scroller)
- {
- /* Scroll to the ui-listview-divider element */
- scroller.scrollTop = divider.offsetTop - scroller.offsetTop;
+ if (divider && scroller) {
+ /* Scroll to the ui-listview-divider element */
+ scroller.scrollTop = divider.offsetTop - scroller.offsetTop;
}
- });
- });
+ });
+ });
- page.addEventListener("pagehide", function(ev)
- {
- indexScrollbar.destroy();
- });
+ page.addEventListener('pagehide', function(ev) {
+ indexScrollbar.destroy();
+ });
}());
</pre>
</li>
<div class="ui-content">
<ul class="ui-listview ui-snap-listview expand-list" id="snapList">
<li class="li-has-3line">
- <div class="ui-marquee ui-marquee-gradient">
- 1.3line SnapListview with Marquee SnapListview with Marquee
- </div>
+ <div class="ui-marquee ui-marquee-gradient">1.3line SnapListview with Marquee SnapListview with Marquee</div>
<div class="li-text-sub ui-li-sub-text">sub-text</div>
<div class="li-text-sub ui-li-sub-text">sub-text</div>
</li>
<li class="li-has-3line">
- <div class="ui-marquee ui-marquee-gradient">
- 2.3line SnapListview with Marquee SnapListview with Marquee
- </div>
+ <div class="ui-marquee ui-marquee-gradient">2.3line SnapListview with Marquee SnapListview with Marquee</div>
<div class="li-text-sub ui-li-sub-text">sub-text</div>
<div class="li-text-sub ui-li-sub-text">sub-text</div>
</li>
<li class="li-has-3line">
- <div class="ui-marquee ui-marquee-gradient">
- 3.3line SnapListview with Marquee SnapListview with Marquee
- </div>
+ <div class="ui-marquee ui-marquee-gradient">3.3line SnapListview with Marquee SnapListview with Marquee</div>
<div class="li-text-sub ui-li-sub-text">sub-text</div>
<div class="li-text-sub ui-li-sub-text">sub-text</div>
</li>
<li class="li-has-3line">
- <div class="ui-marquee ui-marquee-gradient">
- 4.3line SnapListview with Marquee SnapListview with Marquee
- </div>
+ <div class="ui-marquee ui-marquee-gradient">4.3line SnapListview with Marquee SnapListview with Marquee</div>
<div class="li-text-sub ui-li-sub-text">sub-text</div>
<div class="li-text-sub ui-li-sub-text">sub-text</div>
</li>
<li class="li-has-3line">
- <div class="ui-marquee ui-marquee-gradient">
- 5.3line SnapListview with Marquee SnapListview with Marquee
- </div>
+ <div class="ui-marquee ui-marquee-gradient">5.3line SnapListview with Marquee SnapListview with Marquee</div>
<div class="li-text-sub ui-li-sub-text">sub-text</div>
<div class="li-text-sub ui-li-sub-text">sub-text</div>
</li>
<li>Edit the CSS code to set the visual style of the list:
<pre class="prettyprint">
-.ui-listview li .li-text-sub
-{
+.ui-listview li .li-text-sub {
display: block;
text-overflow: ellipsis;
overflow: hidden;
color: rgb(51, 51, 51);
}
-.ui-listview li.li-has-3line
-{
+.ui-listview li.li-has-3line {
padding-top: 0;
padding-bottom: 0;
height: 115px;
}
-.ui-listview.expand-list li.li-has-3line .ui-marquee
-{
+.ui-listview.expand-list li.li-has-3line .ui-marquee {
-webkit-transform: translate3d(0, 30px, 0);
}
-.ui-listview.expand-list li.li-has-3line.ui-snap-listview-selected .ui-marquee
-{
+.ui-listview.expand-list li.li-has-3line.ui-snap-listview-selected .ui-marquee {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: all ease 1s;
}
-.ui-listview.expand-list li.li-has-3line .ui-li-sub-text:nth-child(2)
-{
+.ui-listview.expand-list li.li-has-3line .ui-li-sub-text:nth-child(2) {
-webkit-transform: translate3d(0, -10px, 0);
opacity: 0;
}
-.ui-listview.expand-list
-li.li-has-3line.ui-snap-listview-selected .ui-li-sub-text:nth-child(2)
-{
+.ui-listview.expand-list li.li-has-3line.ui-snap-listview-selected .ui-li-sub-text:nth-child(2) {
-webkit-transform: translate3d(0, 0, 0);
opacity: 1;
-webkit-transition: all ease 1s;
}
-.ui-listview.expand-list li.li-has-3line .ui-li-sub-text:last-child
-{
+.ui-listview.expand-list li.li-has-3line .ui-li-sub-text:last-child {
-webkit-transform: translate3d(0, -42px, 0);
opacity: 0;
}
-.ui-listview.expand-list
-li.li-has-3line.ui-snap-listview-selected .ui-li-sub-text:last-child
-{
+.ui-listview.expand-list li.li-has-3line.ui-snap-listview-selected .ui-li-sub-text:last-child {
-webkit-transform: translate3d(0, 0, 0);
opacity: 1;
-webkit-transition: all ease 1s;
<li>Edit the JavaScript code to manage the list events and other functionality:
<pre class="prettyprint">
-var page = document.querySelector("#snapListPage"),
+var page = document.querySelector('#snapListPage'),
listHelper;
-page.addEventListener("pagebeforeshow", function()
- {
- var list = document.getElementById("snapList");
-
- if (tau.support.shape.circle)
- {
- listHelper =
- tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
- }
- });
-
-page.addEventListener("pagehide", function()
- {
- if (tau.support.shape.circle)
- {
- if (listHelper)
- {
+page.addEventListener('pagebeforeshow', function() {
+ var list = document.getElementById('snapList');
+
+ if (tau.support.shape.circle) {
+ listHelper = tau.helper.SnapListMarqueeStyle.create(list, {marqueeDelay: 1000});
+ }
+});
+
+page.addEventListener('pagehide', function() {
+ if (tau.support.shape.circle) {
+ if (listHelper) {
listHelper.destroy();
- }
- }
- });
+ }
+ }
+});
</pre>
</li>
</ol>
<button id="first-button">Click here to change to page two</button>
</div>
<script>
- var el1 = document.getElementById("first-button");
- el1.addEventListener("click", function()
- {
- tau.changePage("pageTwo.html");
- });
+ var el1 = document.getElementById('first-button');
+ el1.addEventListener('click', function() {
+ tau.changePage('pageTwo.html');
+ });
</script>
</div>
<button id="second-button">Click here to change to page one</button>
</div>
<script>
- var el2 = document.getElementById("second-button");
- el2.addEventListener("click", function()
- {
- tau.changePage("pageOne.html");
- });
+ var el2 = document.getElementById('second-button');
+ el2.addEventListener('click', function() {
+ tau.changePage('pageOne.html');
+ });
</script>
</div>
</pre>
<button type="button" class="ui-more ui-icon-overflow">More Options</button>
</header>
<div class="ui-content content-padding">
- It was a real pleasure for me to finally get to meet you. My colleagues join me
- in sending you our holiday greetings.
+ It was a real pleasure for me to finally get to meet you. My colleagues join me in sending you our holiday greetings.
</div>
<!--Rectangular profile-->
</div>
<!--Circular profile-->
- <div id="moreoptionsDrawer" class="ui-drawer"
- data-drawer-target="#moreoptionsPage" data-position="right"
- data-enable="true" data-drag-edge="1">
+ <div id="moreoptionsDrawer" class="ui-drawer" data-drawer-target="#moreoptionsPage" data-position="right" data-enable="true" data-drag-edge="1">
<div id="selector" class="ui-selector">
<div class="ui-item show-icon" data-title="Show"></div>
<div class="ui-item human-icon" data-title="Human"></div>
<li>Edit the CSS code to set the visual style of the buttons:
<pre class="prettyprint">
-#moreoptionsDrawer
-{
+#moreoptionsDrawer {
display: none;
}
-@media all and (-tizen-geometric-shape: circle)
-{
- #moreoptionsDrawer
- {
+@media all and (-tizen-geometric-shape: circle) {
+ #moreoptionsDrawer {
display: block;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 100%;
}
- #moreoptionsPopup
- {
+ #moreoptionsPopup {
display: none;
}
}
<li>Edit the JavaScript code to manage the option button events and other functionality:
<pre class="prettyprint">
-(function()
-{
- var page = document.querySelector("#moreoptionsPage"),
- popup = page.querySelector("#moreoptionsPopup"),
- handler = page.querySelector(".ui-more"),
- drawer = page.querySelector("#moreoptionsDrawer"),
- selector = page.querySelector("#selector"),
- helper,
- clickHandlerBound;
-
- function clickHandler(event)
- {
- tau.openPopup(popup);
- }
-
- page.addEventListener("pagebeforeshow", function()
- {
- if (tau.support.shape.circle)
- {
- helper = tau.helper.DrawerMoreStyle.create(drawer,
- {
- handler: ".drawer-handler"
+(function() {
+ var page = document.querySelector('#moreoptionsPage'),
+ popup = page.querySelector('#moreoptionsPopup'),
+ handler = page.querySelector('.ui-more'),
+ drawer = page.querySelector('#moreoptionsDrawer'),
+ selector = page.querySelector('#selector'),
+ helper,
+ clickHandlerBound;
+
+ function clickHandler(event) {
+ tau.openPopup(popup);
+ }
+
+ page.addEventListener('pagebeforeshow', function() {
+ if (tau.support.shape.circle) {
+ helper = tau.helper.DrawerMoreStyle.create(drawer, {
+ handler: '.drawer-handler'
});
- }
- else
- {
+ } else {
/* Shape is square */
clickHandlerBound = clickHandler.bind(null);
- handler.addEventListener("click", clickHandlerBound);
- }
- });
-
- page.addEventListener("pagebeforehide", function()
- {
- if (tau.support.shape.circle)
- {
- handler.removeEventListener("click", clickHandlerBound);
+ handler.addEventListener('click', clickHandlerBound);
+ }
+ });
+
+ page.addEventListener('pagebeforehide', function() {
+ if (tau.support.shape.circle) {
+ handler.removeEventListener('click', clickHandlerBound);
helper.destroy();
- }
- });
+ }
+ });
})();
</pre>
</li>
<p>Because the application runs on mobile or wearable devices, make sure that you have the correct <code>tau.css</code> styles for the corresponding profile:</p>
<ul><li>Mobile:
<pre class="prettyprint">
-<link rel="stylesheet" type="text/css"
- href="lib/tau/mobile/theme/default/tau.min.css"/>
+<link rel="stylesheet" type="text/css" href="lib/tau/mobile/theme/default/tau.min.css"/>
</pre></li>
<li>Wearable:
<pre class="prettyprint">
-<link rel="stylesheet" type="text/css"
- href="lib/tau/wearable/theme/default/tau.min.css"/>
+<link rel="stylesheet" type="text/css" href="lib/tau/wearable/theme/default/tau.min.css"/>
</pre>
</li></ul>
<p>Add also your own styles for the application:</p>
<pre class="prettyprint">
<head>
<meta charset="utf-8"/>
- <meta name="viewport"
- content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="Tizen basic template generated by Tizen Web IDE"/>
<title>Notepad</title>
<li>Link to the TAU library sources and add the script to the application:
<pre class="prettyprint">
<script src="lib/jquery.js"></script>
-<script type="text/javascript" src="lib/tau/mobile/js/tau.js"
- data-build-remove="false"></script>
+<script type="text/javascript" src="lib/tau/mobile/js/tau.js" data-build-remove="false"></script>
<script src="js/main.js"></script>
</pre>
<li>Add styles for the content:
<pre class="prettyprint">
-a
-{
+a {
color: #FFF;
}
-#notesList.ui-listview
-{
+#notesList.ui-listview {
width: 100%;
}
-#notesList.ui-listview li
-{
+#notesList.ui-listview li {
margin: 0;
white-space: nowrap;
}
-#notesList.ui-listview li .ui-inline
-{
+#notesList.ui-listview li .ui-inline {
position: absolute;
right: 5px;
top: 5px;
}
-#notesList.ui-listview li .ui-swipe-item-cover-inner
-{
+#notesList.ui-listview li .ui-swipe-item-cover-inner {
text-overflow: ellipsis;
overflow: hidden;
}
-#editor .ui-scrollview-view
-{
+#editor .ui-scrollview-view {
height: 100%;
}
-#editor textarea
-{
+#editor textarea {
height: 95%;
width: 100%;
}
<li>Create the <code>main.js</code> file and create a function to close the application.
<p>The application is started when the HTML content is ready.</p>
<pre class="prettyprint">
-document.addEventListener("DOMContentLoaded", function()
- {
- 'use strict';
-
- var newBtn = document.getElementById('newBtn'),
- saveBtn = document.getElementById('saveBtn'),
- editorField = document.getElementById('editorField'),
- notesList = document.getElementById('notesList'),
- editorPage = document.getElementById('editor'),
-
- mainPageId = '#main',
- editorPageId = '#editor',
-
- currentIndex = null,
-
- EMPTY_CONTENT = '(empty)',
- STORAGE_KEY = 'notepad';
-
- /*
- Get data from local storage
- @return {Array}
- */
- function getStorage(key)
- {
- return JSON.parse(window.localStorage.getItem(key)) || false;
- }
-
- /*
- Add data to local storage
- @param {Array} data
- */
- function addStorage(data)
- {
- window.localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
- }
-
- /*
- Return current page ID
- @returns
- */
- function getCurrentPageId()
- {
- return $('.ui-page:visible')[0].id;
- }
-
- /* Refresh current page */
- function refreshCurrentPage()
- {
- $('#' + getCurrentPageId()).trigger('create');
- }
-
- /*
- Get notes from storage
- @return {Array}
- */
- function getNotes()
- {
- return getStorage(STORAGE_KEY) || [];
- }
-
- /* Clear list with notes */
- function clearNotesList()
- {
- notesList.innerHTML = '';
- }
-
- /* Delete note from storage */
- function deleteNote(index)
- {
- var notes = getNotes();
-
- if (notes[index] !== undefined)
- {
+document.addEventListener('DOMContentLoaded', function() {
+ 'use strict';
+
+ var newBtn = document.getElementById('newBtn'),
+ saveBtn = document.getElementById('saveBtn'),
+ editorField = document.getElementById('editorField'),
+ notesList = document.getElementById('notesList'),
+ editorPage = document.getElementById('editor'),
+
+ mainPageId = '#main',
+ editorPageId = '#editor',
+
+ currentIndex = null,
+
+ EMPTY_CONTENT = '(empty)',
+ STORAGE_KEY = 'notepad';
+
+ /*
+ Get data from local storage
+ @return {Array}
+ */
+ function getStorage(key) {
+ return JSON.parse(window.localStorage.getItem(key)) || false;
+ }
+
+ /*
+ Add data to local storage
+ @param {Array} data
+ */
+ function addStorage(data) {
+ window.localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+ }
+
+ /*
+ Return current page ID
+ @returns
+ */
+ function getCurrentPageId() {
+ return $('.ui-page:visible')[0].id;
+ }
+
+ /* Refresh current page */
+ function refreshCurrentPage() {
+ $('#' + getCurrentPageId()).trigger('create');
+ }
+
+ /*
+ Get notes from storage
+ @return {Array}
+ */
+ function getNotes() {
+ return getStorage(STORAGE_KEY) || [];
+ }
+
+ /* Clear list with notes */
+ function clearNotesList() {
+ notesList.innerHTML = '';
+ }
+
+ /* Delete note from storage */
+ function deleteNote(index) {
+ var notes = getNotes();
+
+ if (notes[index] !== undefined) {
notes.splice(index, 1);
addStorage(notes);
- }
- else
- {
+ } else {
console.error('deleteNote: note not found');
- }
-
- showNotes();
- refreshCurrentPage();
- event.stopPropagation();
- }
-
- /*
- Edit note using array index
- @param index
- */
- function editNote(index)
- {
- var notes = getNotes();
-
- if (notes[index] !== undefined)
- {
+ }
+
+ showNotes();
+ refreshCurrentPage();
+ event.stopPropagation();
+ }
+
+ /*
+ Edit note using array index
+ @param index
+ */
+ function editNote(index) {
+ var notes = getNotes();
+
+ if (notes[index] !== undefined) {
currentIndex = index;
editorField.value = getNotes()[index];
tau.changePage(editorPageId);
- }
- else
- {
+ } else {
console.error('editNote: note not found');
showNotes();
refreshCurrentPage();
- }
- }
-
- /* Show all notes extracted from local storage */
- function showNotes()
- {
- var notes = getNotes(),
- notesLen = notes.length,
- li = {},
- swipeCover = {},
- swipeItem = {},
- deleteBtn = {},
- i = 0,
- notesListInst;
-
- clearNotesList();
-
- for (i; i < notesLen; i += 1)
- {
+ }
+ }
+
+ /* Show all notes extracted from local storage */
+ function showNotes() {
+ var notes = getNotes(),
+ notesLen = notes.length,
+ li = {},
+ swipeCover = {},
+ swipeItem = {},
+ deleteBtn = {},
+ i = 0,
+ notesListInst;
+
+ clearNotesList();
+
+ for (i; i < notesLen; i += 1) {
li = document.createElement('li');
li.addEventListener('click', editNote.bind(this, i), false);
notesListInst = tau.widget.getInstance(notesList);
tau.widget.Button(deleteBtn);
notesListInst.refresh();
- }
- }
-
- /* Clear editor textarea */
- function clearEditor()
- {
- editorField.value = '';
- }
-
- /* Save note to storage */
- function saveNote()
- {
- var notes = getNotes();
-
- if (currentIndex !== null)
- {
+ }
+ }
+
+ /* Clear editor textarea */
+ function clearEditor() {
+ editorField.value = '';
+ }
+
+ /* Save note to storage */
+ function saveNote() {
+ var notes = getNotes();
+
+ if (currentIndex !== null) {
notes[currentIndex] = editorField.value;
- }
- else
- {
+ } else {
notes.push(editorField.value);
- }
-
- addStorage(notes);
-
- clearEditor();
- showNotes();
- tau.changePage(mainPageId);
- }
-
- /* New note button handler */
- function newNote()
- {
- currentIndex = null;
- clearEditor();
-
- tau.changePage(editorPageId);
- }
-
- /* On editor page show handler */
- function onEditorPageShow()
- {
- editorField.focus();
- }
-
- /* Attach events */
- function events()
- {
- newBtn.addEventListener('click', newNote);
- saveBtn.addEventListener('click', saveNote);
-
- editorPage.addEventListener('pageshow', onEditorPageShow);
-
- window.addEventListener('tizenhwkey', function(e)
- {
- if (e.keyName === "back"
- && window.tizen
- && window.tizen.application)
- {
- switch (getCurrentPageId())
- {
- case 'main':
+ }
+
+ addStorage(notes);
+
+ clearEditor();
+ showNotes();
+ tau.changePage(mainPageId);
+ }
+
+ /* New note button handler */
+ function newNote() {
+ currentIndex = null;
+ clearEditor();
+
+ tau.changePage(editorPageId);
+ }
+
+ /* On editor page show handler */
+ function onEditorPageShow() {
+ editorField.focus();
+ }
+
+ /* Attach events */
+ function events() {
+ newBtn.addEventListener('click', newNote);
+ saveBtn.addEventListener('click', saveNote);
+
+ editorPage.addEventListener('pageshow', onEditorPageShow);
+
+ window.addEventListener('tizenhwkey', function(e) {
+ if (e.keyName === 'back'
+ && window.tizen
+ && window.tizen.application) {
+ switch (getCurrentPageId()) {
+ case 'main':
window.tizen.application.getCurrentApplication().exit();
break;
- default:
+ default:
window.history.back();
break;
- }
-
- return false;
- }
- }, false);
- }
-
- /* Initialize */
- function init()
- {
- showNotes();
- events();
- }
-
- init();
- }, false);
+ }
+
+ return false;
+ }
+ }, false);
+ }
+
+ /* Initialize */
+ function init() {
+ showNotes();
+ events();
+ }
+
+ init();
+}, false);
</pre>
<p>Now the application is ready and you can deploy it to a device or emulator.</p>
</li>
<li>Edit the CSS code to set the visual style of the processing component:
<pre class="prettyprint">
-.ui-processing-full-size
-{
+.ui-processing-full-size {
display: none;
}
-@media all and (-tizen-geometric-shape: circle)
-{
- .ui-processing
- {
+@media all and (-tizen-geometric-shape: circle) {
+ .ui-processing {
display: none;
}
- .ui-processing.ui-processing-full-size
- {
+ .ui-processing.ui-processing-full-size {
display: block;
}
}
<input type="radio" name="radio-1" id="radio-1"/>
<script>
- var element1 = document.getElementById("checkbox-1"),
- element2 = document.getElementById("radio-1"),
- checkboxWidget = tau.widget.Checkboxradio(element1),
- radioWidget = tau.widget.Checkboxradio(element2);
+ var element1 = document.getElementById('checkbox-1'),
+ element2 = document.getElementById('radio-1'),
+ checkboxWidget = tau.widget.Checkboxradio(element1),
+ radioWidget = tau.widget.Checkboxradio(element2);
- checkboxWidget.enable();
- radioWidget.disable();
+ checkboxWidget.enable();
+ radioWidget.disable();
</script>
</pre>
<input type="radio" name="radio-1" id="radio-1"/>
<script>
- var element1 = document.getElementById("checkbox-1"),
- element2 = document.getElementById("radio-1"),
- checkboxWidget = tau.widget.Checkbox(element1),
- radioWidget = tau.widget.Radio(element2);
+ var element1 = document.getElementById('checkbox-1'),
+ element2 = document.getElementById('radio-1'),
+ checkboxWidget = tau.widget.Checkbox(element1),
+ radioWidget = tau.widget.Radio(element2);
- checkboxWidget.enable();
- radioWidget.disable();
+ checkboxWidget.enable();
+ radioWidget.disable();
</script>
</pre>
</li>
</ul>
<script>
- var collapsibleElement = document.getElementById("collapsible"),
- collapsible = tau.widget.Collapsible(collapsibleElement);
+ var collapsibleElement = document.getElementById('collapsible'),
+ collapsible = tau.widget.Collapsible(collapsibleElement);
</script>
</pre>
</div>
<script>
- var expandableEl = document.getElementById("expandable"),
- expandableWidget = tau.widget.Expandable(expandableEl);
+ var expandableEl = document.getElementById('expandable'),
+ expandableWidget = tau.widget.Expandable(expandableEl);
</script>
</pre>
</li>
</div>
<script>
- var fastscroll = tau.widget.FastScroll(document.getElementById("list"));
+ var fastscroll = tau.widget.FastScroll(document.getElementById('list'));
</script>
</pre>
</div>
<script>
- var isb = tau.widget.IndexScrollbar(document.getElementById("indexscrollbar"));
+ var isb = tau.widget.IndexScrollbar(document.getElementById('indexscrollbar'));
</script>
</pre>
</li>
</div>
<script>
- var galleryWidget = tau.widget.Gallery(document.getElementById("gallery"));
+ var galleryWidget = tau.widget.Gallery(document.getElementById('gallery'));
- galleryWidget.add("./images/01.jpg");
- galleryWidget.add("./images/02.jpg");
- galleryWidget.add("./images/03.jpg");
- galleryWidget.refresh(1);
+ galleryWidget.add('./images/01.jpg');
+ galleryWidget.add('./images/02.jpg');
+ galleryWidget.add('./images/03.jpg');
+ galleryWidget.refresh(1);
</script>
</pre>
</div>
<script>
- var sectionChangerElement = document.getElementById("gallerySection"),
- sectionChangerWidget = tau.widget.SectionChanger(sectionChangerElement),
- newSectionElement = document.createElement("section");
-
- newSectionElement.innerHTML = "<img src='images/03.jpg'>";
- sectionsParentNode.appendChild(newSectionElement);
- sectionChangerWidget.refresh();
- sectionChangerWidget.setActiveSection(1);
+ var sectionChangerElement = document.getElementById('gallerySection'),
+ sectionChangerWidget = tau.widget.SectionChanger(sectionChangerElement),
+ newSectionElement = document.createElement('section');
+
+ newSectionElement.innerHTML = '<img src="images/03.jpg">';
+ sectionsParentNode.appendChild(newSectionElement);
+ sectionChangerWidget.refresh();
+ sectionChangerWidget.setActiveSection(1);
</script>
</pre>
</li>
</div>
<script>
- var notification = tau.widget.Notification(document.getElementById("notification")),
- buttonEl = document.getElementById("noti-demo");
+ var notification = tau.widget.Notification(document.getElementById('notification')),
+ buttonEl = document.getElementById('noti-demo');
- buttonEl.addEventListener("vclick", function()
- {
- notification.open();
- });
+ buttonEl.addEventListener('vclick', function() {
+ notification.open();
+ });
</script>
</pre>
</div>
<script>
- var btn = document.getElementById("open");
+ var btn = document.getElementById('open');
- btn.addEventListener("vclick", function()
- {
- tau.openPopup("#popup_toast");
- });
+ btn.addEventListener('vclick', function() {
+ tau.openPopup('#popup_toast');
+ });
</script>
</pre>
</li>
<div data-role="progressbar" id="progressbar"></div>
<script>
- var progressbarWidget =
- tau.widget.ProgressBar(document.getElementById("progressbar"));
+ var progressbarWidget = tau.widget.ProgressBar(document.getElementById('progressbar'));
- progressbarWidget.value(30);
+ progressbarWidget.value(30);
</script>
</pre>
<div class="ui-progress" data-type="bar" id="progressbar"></div>
<script>
- var progressWidget = tau.widget.Progress(document.getElementById("progressbar"));
+ var progressWidget = tau.widget.Progress(document.getElementById('progressbar'));
- progressWidget.value(30);
+ progressWidget.value(30);
</script>
</pre>
</li>
<input type="search" name="search" id="search-bar"/>
<script>
- var searchBarElement = document.getElementById("searchbar"),
- searchBarWidget = tau.widget.SearchBar(searchBarElement);
+ var searchBarElement = document.getElementById('searchbar'),
+ searchBarWidget = tau.widget.SearchBar(searchBarElement);
- value = searchBarWidget.disable();
+ value = searchBarWidget.disable();
</script>
</pre>
<input type="search" id="search-test"/>
<script>
- var searchEl = document.getElementById("search-test"),
- searchWidget = tau.widget.SearchInput(searchEl);
+ var searchEl = document.getElementById('search-test'),
+ searchWidget = tau.widget.SearchInput(searchEl);
- searchInputWidget.disable();
+ searchInputWidget.disable();
</script>
</pre>
</li>
</select>
<script>
- var element = document.getElementById("selectmenu"),
- widget = tau.widget.SelectMenu(element);
+ var element = document.getElementById('selectmenu'),
+ widget = tau.widget.SelectMenu(element);
- widget.open();
+ widget.open();
</script>
</pre>
</select>
<script>
- var element = document.getElementById("dropdownmenu"),
- widget = tau.widget.DropdownMenu(element);
+ var element = document.getElementById('dropdownmenu'),
+ widget = tau.widget.DropdownMenu(element);
- widget.open();
+ widget.open();
</script>
</pre>
</li>
</div>
<script>
- var tabBar = tau.widget.TabBar(document.getElementById("tab-bar"));
+ var tabBar = tau.widget.TabBar(document.getElementById('tab-bar'));
</script>
</pre>
</div>
<script>
- var tabsElement = document.getElementById("tabs"),
- tabs = tau.widget.Tabs(tabsElement);
+ var tabsElement = document.getElementById('tabs'),
+ tabs = tau.widget.Tabs(tabsElement);
- tabs.setIndex(1);
+ tabs.setIndex(1);
</script>
</pre>
</li>
<div data-role="tokentextarea" id="tokentext"></div>
<script>
- var tokenWidget = tau.widget.TokenTextarea(document.getElementById("tokentext"));
+ var tokenWidget = tau.widget.TokenTextarea(document.getElementById('tokentext'));
- tokenWidget.add("foobar");
+ tokenWidget.add('foobar');
</script>
</pre>
<div class="ui-text-enveloper"></div>
<script>
- var textEnveloperElement = document.getElementById("textenveloper"),
- textEnveloper = tau.component.TextEnveloper(textEnveloperElement);
+ var textEnveloperElement = document.getElementById('textenveloper'),
+ textEnveloper = tau.component.TextEnveloper(textEnveloperElement);
- textEnveloper.add("hello");
+ textEnveloper.add('hello');
</script>
</pre>
</li>
</div>
</pre>
<pre class="prettyprint">
-(function()
-{
- var page = document.getElementById("pageSwipe");
- page.addEventListener("pagebeforeshow", function()
- {
- var content = document.getElementById("content");
- tau.event.enableGesture(content, new tau.event.gesture.Swipe(
- {
- orientation: "horizontal"
- }));
- });
+(function() {
+ var page = document.getElementById('pageSwipe');
+ page.addEventListener('pagebeforeshow', function() {
+ var content = document.getElementById('content');
+ tau.event.enableGesture(content, new tau.event.gesture.Swipe({
+ orientation: 'horizontal'
+ }));
+ });
}());
</pre>
<p>When the <code>swipe</code> event is enabled, the application can handle this event with some event detail data:</p>
<pre class="prettyprint">
-(function()
-{
- var content = document.getElementById("content");
-
- content.addEventListener("swipe", function(e)
- {
- console.log("swipe direction = " + e.detail.direction);
- });
+(function() {
+ var content = document.getElementById('content');
+
+ content.addEventListener('swipe', function(e) {
+ console.log('swipe direction = ' + e.detail.direction);
+ });
}());
</pre>
</pre>
<p>Before:</p>
<pre class="prettyprint">
-var button = document.getElementById("btn");
+var button = document.getElementById('btn');
-button.addEventListener("tap", eventHandler);
+button.addEventListener('tap', eventHandler);
</pre>
<p>After:</p>
<pre class="prettyprint">
-var button = document.getElementById("btn");
+var button = document.getElementById('btn');
-button.addEventListener("click", eventHandler);
+button.addEventListener('click', eventHandler);
</pre>
</li>
</ul>
<!--Script-->
<script>
- (function()
- {
- var SCROLL_STEP = 50, /* Distance of moving scroll for each rotary event */
- page = document.getElementById("main"); /* Query with page ID */
+ (function() {
+ var SCROLL_STEP = 50, /* Distance of moving scroll for each rotary event */
+ page = document.getElementById('main'); /* Query with page ID */
- page.addEventListener("popupshow", function popupOpenHandler(e)
- {
+ page.addEventListener('popupshow', function popupOpenHandler(e) {
var popup = e.target, /* Popup element */
/* Element that has scroll */
- scroller = popup.querySelector(".ui-popup-wrapper"),
+ scroller = popup.querySelector('.ui-popup-wrapper'),
/* Rotary event handler */
- rotaryEventHandler = function(e)
- {
- if (e.detail.direction === "CW")
- /* Right direction */
- {
- scroller.scrollTop += SCROLL_STEP;
- }
- else if (e.detail.direction === "CCW")
- /* Left direction */
- {
- scroller.scrollTop -= SCROLL_STEP;
- }
+ rotaryEventHandler = function(e) {
+ if (e.detail.direction === 'CW') {
+ /* Right direction */
+ scroller.scrollTop += SCROLL_STEP;
+ } else if (e.detail.direction === 'CCW') {
+ /* Left direction */
+ scroller.scrollTop -= SCROLL_STEP;
+ }
};
/* Register the rotary event */
- document.addEventListener("rotarydetent", rotaryEventHandler, false);
+ document.addEventListener('rotarydetent', rotaryEventHandler, false);
/* Deregister the rotary event */
- popup.addEventListener("popuphide", function popupHideHandler()
- {
- popup.removeEventListener("popuphide", popupHideHandler, false);
- document.removeEventListener("rotarydetent", rotaryEventHandler, false);
- }, false);
- }, false);
-
- page.addEventListener("pagebeforeshow", function pageScrollHandler(e)
- {
+ popup.addEventListener('popuphide', function popupHideHandler() {
+ popup.removeEventListener('popuphide', popupHideHandler, false);
+ document.removeEventListener('rotarydetent', rotaryEventHandler, false);
+ }, false);
+ }, false);
+
+ page.addEventListener('pagebeforeshow', function pageScrollHandler(e) {
var page = e.target;
- elScroller = page.querySelector(".ui-scroller");
+ elScroller = page.querySelector('.ui-scroller');
/* Rotary event handler */
- rotaryEventHandler = function(e)
- {
- if (e.detail.direction === "CW")
- /* Right direction */
- {
- elScroller.scrollTop += SCROLL_STEP;
- }
- else if (e.detail.direction === "CCW")
- /* Left direction */
- {
- elScroller.scrollTop -= SCROLL_STEP;
- }
+ rotaryEventHandler = function(e) {
+ if (e.detail.direction === 'CW') {
+ /* Right direction */
+ elScroller.scrollTop += SCROLL_STEP;
+ } else if (e.detail.direction === 'CCW') {
+ /* Left direction */
+ elScroller.scrollTop -= SCROLL_STEP;
+ }
};
/* Register the rotary event */
- document.addEventListener("rotarydetent", rotaryEventHandler, false);
+ document.addEventListener('rotarydetent', rotaryEventHandler, false);
/* Deregister the rotary event */
- page.addEventListener("pagebeforehide", function pageHideHandler()
- {
- page.removeEventListener("pagebeforehide", pageHideHandler, false);
- document.removeEventListener("rotarydetent", rotaryEventHandler, false);
- }, false);
-
- }, false);
- }());
+ page.addEventListener('pagebeforehide', function pageHideHandler() {
+ page.removeEventListener('pagebeforehide', pageHideHandler, false);
+ document.removeEventListener('rotarydetent', rotaryEventHandler, false);
+ }, false);
+
+ }, false);
+ }());
</script>
</pre>
<h2 id="snaplist">Controlling a Snap List</h2>
<!--Script-->
<script>
- (function(tau)
- {
- var list,
- snapListviewWidget,
- rotarydetentHandler = function(e)
- {
- var selectedIndex = snapListviewWidget.getSelectedIndex(),
- direction = e.detail.direction;
-
- if (direction === "CW" && selectedIndex !== null)
- {
- snapListviewWidget.scrollToPosition(++selectedIndex);
- }
- else if (direction === "CCW" && selectedIndex !== null)
- {
- snapListviewWidget.scrollToPosition(--selectedIndex);
- }
- };
-
- if (tau.support.shape.circle)
- {
- document.addEventListener("pagebeforeshow", function()
- {
- list = document.getElementById("snapList");
- snapListviewWidget = tau.widget.SnapListview(list);
- window.addEventListener("rotarydetent", rotarydetentHandler);
+ (function(tau) {
+ var list,
+ snapListviewWidget,
+ rotarydetentHandler = function(e) {
+ var selectedIndex = snapListviewWidget.getSelectedIndex(),
+ direction = e.detail.direction;
+
+ if (direction === 'CW' && selectedIndex !== null) {
+ snapListviewWidget.scrollToPosition(++selectedIndex);
+ } else if (direction === 'CCW' && selectedIndex !== null) {
+ snapListviewWidget.scrollToPosition(--selectedIndex);
+ }
+ };
+
+ if (tau.support.shape.circle) {
+ document.addEventListener('pagebeforeshow', function() {
+ list = document.getElementById('snapList');
+ snapListviewWidget = tau.widget.SnapListview(list);
+ window.addEventListener('rotarydetent', rotarydetentHandler);
});
- document.addEventListener("pagebeforehide", function(e)
- {
- if (list)
- {
- snapListviewWidget.destroy();
- window.removeEventListener("rotarydetent", rotarydetentHandler);
- }
+ document.addEventListener('pagebeforehide', function(e) {
+ if (list) {
+ snapListviewWidget.destroy();
+ window.removeEventListener('rotarydetent', rotarydetentHandler);
+ }
});
- }
- }(tau));
+ }
+ }(tau));
</script>
</pre>
<h2 id="sectionchanger">Changing the Section Changer Index</h2>
<!--Script-->
<script>
- (function(tau)
- {
- var changer,
- sectionChangerWidget,
- sections,
- sectionsLength;
-
- rotarydetentHandler = function(event)
- {
- var direction = event.detail.direction,
- activeSection;
-
- activeSection = sectionChangerWidget.getActiveSectionIndex();
-
- if (direction === "CW")
- /* Right direction */
- {
- if (activeSection < sectionsLength - 1)
- {
- sectionChangerWidget.setActiveSection(activeSection + 1, 30);
+ (function(tau) {
+ var changer,
+ sectionChangerWidget,
+ sections,
+ sectionsLength,
+
+ rotarydetentHandler = function(event) {
+ var direction = event.detail.direction,
+ activeSection;
+
+ activeSection = sectionChangerWidget.getActiveSectionIndex();
+
+ if (direction === 'CW') {
+ /* Right direction */
+ if (activeSection < sectionsLength - 1) {
+ sectionChangerWidget.setActiveSection(activeSection + 1, 30);
+ }
+ } else if (direction === 'CCW') {
+ /* Left direction */
+ if (activeSection > 0) {
+ sectionChangerWidget.setActiveSection(activeSection - 1, 30);
+ }
}
- }
- else if (direction === "CCW")
- /* Left direction */
- {
- if (activeSection > 0)
- {
- sectionChangerWidget.setActiveSection(activeSection - 1, 30);
- }
- }
- };
-
- if (tau.support.shape.circle)
- {
- document.addEventListener("pagebeforeshow", function()
- {
- changer = document.getElementById("hsectionchanger");
- sectionChangerWidget = tau.widget.SectionChanger(changer,
- {
- circular: false,
- orientation: "horizontal",
- useBouncingEffect: false
- });
- sections = changer.querySelectorAll(".section");
- sectionsLength = sections.length;
-
- document.addEventListener("rotarydetent", rotarydetentHandler);
+ };
+
+ if (tau.support.shape.circle) {
+ document.addEventListener('pagebeforeshow', function() {
+ changer = document.getElementById('hsectionchanger');
+ sectionChangerWidget = tau.widget.SectionChanger(changer, {
+ circular: false,
+ orientation: 'horizontal',
+ useBouncingEffect: false
+ });
+ sections = changer.querySelectorAll('.section');
+ sectionsLength = sections.length;
+
+ document.addEventListener('rotarydetent', rotarydetentHandler);
});
- document.addEventListener("pagebeforehide", function(e)
- {
- sectionChangerWidget.destroy();
- document.removeEventListener("rotarydetent", rotarydetentHandler);
+ document.addEventListener('pagebeforehide', function(e) {
+ sectionChangerWidget.destroy();
+ document.removeEventListener('rotarydetent', rotarydetentHandler);
});
- }
- }(tau));
+ }
+ }(tau));
</script>
</pre>
<h2 id="progress">Changing the Circle-shaped Progress Bar Value</h2>
<!--Script-->
<script>
- (function()
- {
- var progressBar,
- progressBarWidget,
- resultDiv,
- value,
- direction,
- rotaryDetentHandler = function(e)
- {
- /* Get rotary direction */
- direction = e.detail.direction;
-
- if (direction === "CW")
- {
- /* Right direction */
- if (parseInt(progressBarWidget.value(), 10) < 100)
- {
- value = parseInt(progressBarWidget.value(), 10) + 1;
- }
- else
- {
- value = 100;
+ (function() {
+ var progressBar,
+ progressBarWidget,
+ resultDiv,
+ value,
+ direction,
+ rotaryDetentHandler = function(e) {
+ /* Get rotary direction */
+ direction = e.detail.direction;
+
+ if (direction === 'CW') {
+ /* Right direction */
+ if (parseInt(progressBarWidget.value(), 10) < 100) {
+ value = parseInt(progressBarWidget.value(), 10) + 1;
+ } else {
+ value = 100;
+ }
+ } else if (direction === 'CCW') {
+ /* Left direction */
+ if (parseInt(progressBarWidget.value(), 10) > 0) {
+ value = parseInt(progressBarWidget.value(), 10) - 1;
+ } else {
+ value = 0;
+ }
}
- }
- else if (direction === "CCW")
- {
- /* Left direction */
- if (parseInt(progressBarWidget.value(), 10) > 0)
- {
- value = parseInt(progressBarWidget.value(), 10) - 1;
- }
- else
- {
- value = 0;
- }
- }
- resultDiv.innerText = value + "%";
- progressBarWidget.value(value);
- };
+ resultDiv.innerText = value + '%';
+ progressBarWidget.value(value);
+ };
- document.addEventListener("pagebeforeshow", function()
- {
- resultDiv = document.getElementById("result");
+ document.addEventListener('pagebeforeshow', function() {
+ resultDiv = document.getElementById('result');
- progressBar = document.getElementById("circleprogress");
- progressBarWidget = new tau.widget.CircleProgressBar(progressBar,
- {size: "large"});
- resultDiv.innerText = progressBarWidget.value() + "%";
+ progressBar = document.getElementById('circleprogress');
+ progressBarWidget = new tau.widget.CircleProgressBar(progressBar, {size: 'large'});
+ resultDiv.innerText = progressBarWidget.value() + '%';
/* Add rotarydetent handler to document */
- document.addEventListener("rotarydetent", rotaryDetentHandler);
- });
+ document.addEventListener('rotarydetent', rotaryDetentHandler);
+ });
- document.addEventListener("pagehide", function()
- {
+ document.addEventListener('pagehide', function() {
progressBarWidget.destroy();
- document.removeEventListener("rotarydetent", rotaryDetentHandler);
- });
- }());
+ document.removeEventListener('rotarydetent', rotaryDetentHandler);
+ });
+ }());
</script>
</pre>
<ol>
<li>Edit the HTML code to add the thumbnail component to your application screen:
<pre class="prettyprint">
-<div class="ui-page ui-page-active" id="sectionChangerPage"
- data-enable-page-scroll="false">
+<div class="ui-page ui-page-active" id="sectionChangerPage" data-enable-page-scroll="false">
<div id="sectionChanger" class="ui-content ui-section-changer">
<div id="scroller">
<section class="ui-section-active">
<li>Edit the CSS code to set the visual style of the thumbnail:
<pre class="prettyprint">
-section
-{
+section {
padding: 0 10px 0 10px;
height: 100%;
}
-.thumbnail
-{
+.thumbnail {
height: 300px;
width: 200px;
background-color: #80482f;
text-align: center;
line-height: 300px;
}
-.ui-section-active .thumbnail
-{
+.ui-section-active .thumbnail {
background-color: #000000;
border: 1px solid #a06322;
}
-@media all and (-tizen-geometric-shape: circle)
-{
- section
- {
+@media all and (-tizen-geometric-shape: circle) {
+ section {
padding: 0;
}
- .thumbnail
- {
+ .thumbnail {
height: 200px;
width: 200px;
border-radius: 50%;
transform: scale(0.8) translate3d(0, -60%, 0);
transition: transform 300ms;
}
- .ui-section-active .thumbnail
- {
+ .ui-section-active .thumbnail {
transform: scale(1) translate3d(0, -50%, 0);
}
}
</li>
<li>Edit the JavaScript code to manage the thumbnail events and other functionalities:
<pre class="prettyprint">
-(function()
-{
- var page = document.getElementById("sectionChangerPage"),
- sectionChanger = document.getElementById("sectionChanger");
-
- page.addEventListener("pagebeforeshow", function()
- {
- tau.widget.SectionChanger(sectionChanger,
- {
- orientation: "horizontal",
+(function() {
+ var page = document.getElementById('sectionChangerPage'),
+ sectionChanger = document.getElementById('sectionChanger');
+
+ page.addEventListener('pagebeforeshow', function() {
+ tau.widget.SectionChanger(sectionChanger, {
+ orientation: 'horizontal',
fillContent: false
- });
- });
+ });
+ });
})();
</pre>
</li>
<header class="ui-header">
<h2 class="ui-title">SectionChanger</h2>
</header>
- <div class="ui-section-changer" data-orientation="horizontal"
- data-circular="true" data-use-tab="true">
+ <div class="ui-section-changer" data-orientation="horizontal" data-circular="true" data-use-tab="true">
<div>
<section>
<h3>LEFT1 PAGE</h3>
</div>
<script>
- var sectionEl = document.getElementById("sectionchanger"),
- sectionChangerWidget = tau.widget.SectionChanger(sectionEl,
- {
- orientation: "horizontal",
- circular: true
- useTab: true
- });
+ var sectionEl = document.getElementById('sectionchanger'),
+ sectionChangerWidget = tau.widget.SectionChanger(sectionEl, {
+ orientation: 'horizontal',
+ circular: true
+ useTab: true
+ });
</script>
</pre>
</li>
<header class="ui-header">
<h2 class="ui-title">SectionChanger</h2>
</header>
- <div class="ui-section-changer" data-orientation="horizontal"
- data-circular="true" data-use-tab="true">
+ <div class="ui-section-changer" data-orientation="horizontal" data-circular="true" data-use-tab="true">
<div>
<section>
<h3>LEFT1 PAGE</h3>
</div>
<script>
- var sectionEl = document.getElementById("sectionchanger"),
- sectionChangerWidget = tau.widget.SectionChanger(sectionEl);
+ var sectionEl = document.getElementById('sectionchanger'),
+ sectionChangerWidget = tau.widget.SectionChanger(sectionEl);
- sectionChangerWidget.option("circular", true);
+ sectionChangerWidget.option('circular', true);
</script>
</pre>
</li>
<pre class="prettyprint">
<div class="ui-indexscrollbar" id="indexscrollbar"></div>
<script>
- $("#indexscrollbar").indexscrollbar();
+ $('#indexscrollbar').indexscrollbar();
</script>
</pre>
</li>
<li>Use the call methods:
<pre class="prettyprint">
-$(".selector").componentName("methodName", argument1, argument2, ...);
+$('.selector').componentName('methodName', argument1, argument2, ...);
</pre>
<pre class="prettyprint">
<div class="ui-indexscrollbar" id="indexscrollbar"></div>
<script>
- /* If the IndexScrollBar component is created */
- $("#indexscrollbar").indexscrollbar("destroy");
+ /* If the IndexScrollBar component is created */
+ $('#indexscrollbar').indexscrollbar('destroy');
</script>
</pre>
</li>
<li>Create an <a href="http://www.w3.org/TR/2015/REC-eventsource-20150203/#the-eventsource-interface" target="_blank">EventSource</a> interface instance:
<pre class="prettyprint lang-js">
<script>
- var serverPage = "http://165.213.198.151:8080/server_sent_events_server.php";
- var eventSource = new EventSource(serverPage);
+ var serverPage = 'http://165.213.198.151:8080/server_sent_events_server.php';
+ var eventSource = new EventSource(serverPage);
</pre>
<div class="note">
</li>
<li>Implement the event handler for the <a href="http://www.w3.org/TR/2015/REC-eventsource-20150203/#handler-eventsource-onopen" target="_blank">open</a> event:
<pre class="prettyprint">
- var log = document.getElementById("log")
+ var log = document.getElementById('log')
- /* Open event */
- eventSource.onopen = function(e)
- {
- log.innerHTML+= "<p>open: " + new Date() + "</p>";
- };
+ /* Open event */
+ eventSource.onopen = function(e) {
+ log.innerHTML += '<p>open: ' + new Date() + '</p>';
+ };
</script>
</pre>
<p>The <code>open</code> event is triggered repeatedly based on the <code>retry</code> value of the <a href="http://www.w3.org/TR/2015/REC-eventsource-20150203/#event-stream-interpretation" target="_blank">event stream data format</a>, to request push messages from the server.</p>
<p>Create an <a href="http://www.w3.org/TR/2015/REC-eventsource-20150203/#the-eventsource-interface" target="_blank">EventSource</a> interface instance and implement the event handler for the <a href="http://www.w3.org/TR/2015/REC-eventsource-20150203/#handler-eventsource-onmessage" target="_blank">message</a> event:</p>
<pre class="prettyprint">
<script>
- var serverPage = "http://localhost/server_sent_events_server.php";
- var eventSource = new EventSource(serverPage);
- var log = document.getElementById("log");
-
- /* Open event */
- eventSource.onopen = function(e)
- {
- log.innerHTML+= "<p>-----------------------</p>";
- log.innerHTML+= "<p>open: " + new Date() + "</p>";
- };
-
- /* message event */
- eventSource.onmessage = function(e)
- {
- log.innerHTML+= "<p>[push data]: <br/>" + e.data + "</p>";
- };
+ var serverPage = 'http://localhost/server_sent_events_server.php';
+ var eventSource = new EventSource(serverPage);
+ var log = document.getElementById('log');
+
+ /* Open event */
+ eventSource.onopen = function(e) {
+ log.innerHTML += '<p>-----------------------</p>';
+ log.innerHTML += '<p>open: ' + new Date() + '</p>';
+ };
+
+ /* message event */
+ eventSource.onmessage = function(e) {
+ log.innerHTML += '<p>[push data]: <br/>' + e.data + '</p>';
+ };
</script>
</pre>
</li>
<li>Create document A and B.</li>
<li>Insert document B as <code>iframe</code> into document A:
<pre class="prettyprint">
-<iframe id="frame1"
- src="./web_messaging_cross_document_messaging_iframe.htm"></iframe>
+<iframe id="frame1" src="./web_messaging_cross_document_messaging_iframe.htm"></iframe>
</pre>
</li>
<li>In document A, use the <code>sendMessage()</code> method to send a message to document B.
<p>Use the <code>postMessage()</code> method of the <code>iframe</code> window, which sends the message from the method content, to deliver the message to the <code>iframe</code>.</p>
<pre class="prettyprint">
<script>
- function sendMessage(message)
- {
- var frame1 = document.getElementById('frame1');
- frame1.contentWindow.postMessage(message, '*');
- }
+ function sendMessage(message) {
+ var frame1 = document.getElementById('frame1');
+ frame1.contentWindow.postMessage(message, '*');
+ }
</script>
</pre>
</li>
<li>Register the <code>message</code> event handler in document B to receive the sent message:
<pre class="prettyprint">
<script>
- btnSendMessageHandler = function(e)
- {
- var messageEle = document.getElementById('message');
- sendMessage(messageEle.value);
- };
- /* Register event handler */
- btnSendMessage.onclick = btnSendMessageHandler;
+ btnSendMessageHandler = function(e) {
+ var messageEle = document.getElementById('message');
+ sendMessage(messageEle.value);
+ };
+ /* Register event handler */
+ btnSendMessage.onclick = btnSendMessageHandler;
</script>
</pre>
</li>
<p>The <code>port2</code> attribute of the <code>MessageChannel</code> instance is delivered to document B through the <code>postMessage()</code> method of the document B window object:</p>
<pre class="prettyprint">
<script>
- var messageChannel = new MessageChannel();
-
- function setMessagePort()
- {
- /* iframe element ID of the port to be delivered */
- var frame1 = document.getElementById('iframe1');
- frame1.contentWindow.postMessage('', [messageChannel.port2], '*');
- };
-
- window.onload = function()
- {
- setMessagePort();
- };
-
- /* Message is sent to port2 through port1 */
- function sendMessage(message)
- {
- messageChannel.port1.postMessage(message);
- };
+ var messageChannel = new MessageChannel();
+
+ function setMessagePort() {
+ /* iframe element ID of the port to be delivered */
+ var frame1 = document.getElementById('iframe1');
+ frame1.contentWindow.postMessage('', [messageChannel.port2], '*');
+ }
+
+ window.onload = function() {
+ setMessagePort();
+ };
+
+ /* Message is sent to port2 through port1 */
+ function sendMessage(message) {
+ messageChannel.port1.postMessage(message);
+ }
</script>
</pre>
<li>Define a <code>message</code> event in the <code>window</code> object of document B, and register the event handler in the <code>port</code> sent from document A.
<pre class="prettyprint">
<script>
- var port = null;
-
- messageHandler = function(e)
- {
- port = e.ports[0];
- port.onmessage = function(e)
- {
- var messageEle = document.getElementById('message');
- messageEle.innerHTML = e.data;
- };
- };
-
- window.onmessage = messageHandler;
+ var port = null;
+
+ messageHandler = function(e) {
+ port = e.ports[0];
+ port.onmessage = function(e) {
+ var messageEle = document.getElementById('message');
+ messageEle.innerHTML = e.data;
+ };
+ };
+
+ window.onmessage = messageHandler;
</script>
</pre>
<p>A message sent through the <code>postMessage()</code> method of <code>port1</code> from document A is received through the <code>message</code> event of <code>port2</code> in document B, and the message sent through the <code>postMessage()</code> method of <code>port2</code> from document B is received through the <code>message</code> event of <code>port1</code> in document A.</p>
<ol>
<li><p>Create a <a href="http://www.w3.org/TR/2012/CR-websockets-20120920/#the-websocket-interface" target="_blank">WebSocket</a> interface instance using a valid socket server URL as a parameter:</p>
<pre class="prettyprint">
-var webSocketUrl = "wss://html5labs-interop.cloudapp.net:443/echo";
+var webSocketUrl = 'wss://html5labs-interop.cloudapp.net:443/echo';
var webSocket = new WebSocket(webSocketURL);
</pre>
<li><p>Use the <code>open</code> and <code>error</code> events to track the connection status:</p>
<pre class="prettyprint">
/* If the connection is established */
-webSocket.onopen = function(e)
-{
- console.log('connection open, readyState: ' + e.target.readyState);
+webSocket.onopen = function(e) {
+ console.log('connection open, readyState: ' + e.target.readyState);
};
/* If the connection fails or is closed with prejudice */
-webSocket.onerror = function(e)
-{
- /* Error handling */
+webSocket.onerror = function(e) {
+ /* Error handling */
};
</pre>
<p>If the connection is established, the <code>readyState</code> attribute is changed to <code>1</code> and the <code>open</code> event is triggered. If the connection fails, the attribute value is set to <code>3</code>, and the HTTP 503 error is returned.</p>
<ol>
<li><p>Create a <a href="http://www.w3.org/TR/2012/CR-websockets-20120920/#the-websocket-interface" target="_blank">WebSocket</a> interface instance using a valid socket server URL as a parameter:</p>
<pre class="prettyprint">
-var webSocketUrl = "wss://html5labs-interop.cloudapp.net:443/echo";
+var webSocketUrl = 'wss://html5labs-interop.cloudapp.net:443/echo';
var webSocket = new WebSocket(webSocketURL);
</pre>
<li><p>Check the <code>readyState</code> attribute value, which is <code>1</code> (OPEN), if the socket is connected. </p>
<p>If the socket is connected, use the <code>send()</code> method to send the data.</p>
<pre class="prettyprint">
-function sendMessage(msg)
-{
- if (webSocket.readyState === 1)
- {
- webSocket.send(msg);
- }
-};
+function sendMessage(msg) {
+ if (webSocket.readyState === 1) {
+ webSocket.send(msg);
+ }
+}
</pre>
</li>
</ol>
<ol>
<li><p>Create a <a href="http://www.w3.org/TR/2012/CR-websockets-20120920/#the-websocket-interface" target="_blank">WebSocket</a> interface instance using a valid socket server URL as a parameter:</p>
<pre class="prettyprint">
-var webSocketUrl = "wss://html5labs-interop.cloudapp.net:443/echo";
+var webSocketUrl = 'wss://html5labs-interop.cloudapp.net:443/echo';
var webSocket = new WebSocket(webSocketURL);
</pre>
</li>
<li><p>Register the <code>message</code> event in the <code>WebSocket</code> instance. The event is triggered when data is received from the server.</p>
<pre class="prettyprint">
-webSocket.onmessage = function(e)
-{
- console.log('server message: ' + e.data);
+webSocket.onmessage = function(e) {
+ console.log('server message: ' + e.data);
};
</pre>
</li>
<ol>
<li><p>Create a <a href="http://www.w3.org/TR/2012/CR-websockets-20120920/#the-websocket-interface" target="_blank">WebSocket</a> interface instance using a valid socket server URL as a parameter:</p>
<pre class="prettyprint">
-var webSocketUrl = "wss://html5labs-interop.cloudapp.net:443/echo";
+var webSocketUrl = 'wss://html5labs-interop.cloudapp.net:443/echo';
var webSocket = new WebSocket(webSocketURL);
</pre>
</li>
<li><p>Register a <code>close</code> event in the <code>WebSocket</code> instance to be notified when the connection closes:</p>
<pre class="prettyprint">
-webSocket.onclose = function(e)
-{
- console.log('connection close, readyState: ' + e.target.readyState);
+webSocket.onclose = function(e) {
+ console.log('connection close, readyState: ' + e.target.readyState);
};
</pre>
</li>
<li><p>Check the <code>readyState</code> attribute value, which is <code>1</code> (OPEN), if the socket is connected.</p>
<p>If the socket is connected, use the <code>close()</code> method to close the connection between the client and the server.</p>
<pre class="prettyprint">
-function closeConnection()
-{
- if (webSocket.readyState === 1)
- {
- webSocket.close();
- }
-};
+function closeConnection() {
+ if (webSocket.readyState === 1) {
+ webSocket.close();
+ }
+}
</pre>
</li>
</ol>
<li><p>Create an <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#dom-xmlhttprequest" target="_blank">XMLHttpRequest</a> interface instance:</p>
<pre class="prettyprint lang-js">
<script>
- var client = new XMLHttpRequest();
+ var client = new XMLHttpRequest();
</pre>
</li>
<li><p>Open the connection with the <code>open()</code> method using the cross-domain URL as a parameter. Send the request with the <code>send()</code> method.</p>
<pre class="prettyprint">
- client.open("GET", "video_sample.mp4");
- client.send();
+ client.open('GET', 'video_sample.mp4');
+ client.send();
</script>
</pre>
</p>
<pre class="prettyprint">
<script>
- var client = new XMLHttpRequest();
-
- function upload()
- {
- var file = document.getElementById("uploadfile");
-
- /* Create a FormData instance */
- var formData = new FormData();
- /* Add the file */
- formData.append("upload", file.files[0]);
-
- client.open("post", "/upload", true);
- client.setRequestHeader("Content-Type", "multipart/form-data");
- client.send(formData); /* Send to server */
- }
-
- /* Check the response status */
- client.onreadystatechange = function()
- {
- if (client.readyState == 4 && client.status == 200)
- {
- alert(client.statusText);
- }
- }
+ var client = new XMLHttpRequest();
+
+ function upload() {
+ var file = document.getElementById('uploadfile');
+
+ /* Create a FormData instance */
+ var formData = new FormData();
+ /* Add the file */
+ formData.append('upload', file.files[0]);
+
+ client.open('post', '/upload', true);
+ client.setRequestHeader('Content-Type', 'multipart/form-data');
+ client.send(formData); /* Send to server */
+ }
+
+ /* Check the response status */
+ client.onreadystatechange = function() {
+ if (client.readyState == 4 && client.status == 200) {
+ alert(client.statusText);
+ }
+ };
</script>
</pre>
</li>
<li><p>Create an <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#dom-xmlhttprequest" target="_blank">XMLHttpRequest</a> interface instance and define event handlers for it:</p>
<pre class="prettyprint lang-js">
<script>
- var html = "";
-
- var client = new XMLHttpRequest();
-
- /* Event handlers */
- client.onloadstart = onloadstarthandler;
- client.onprogress = onprogresshandler;
- client.onabort = onaborthandler;
- client.onerror = onerrorhandler;
- client.onload = onloadhandler;
- client.ontimeout = ontimeouthandler;
- client.onloadend = onloadendhandler;
- client.onreadystatechange = onreadystatechangehandler;
-
- /* Assign request type and server path */
- client.open("GET", "video_sample.mp4");
- client.send();
+ var html = '';
+
+ var client = new XMLHttpRequest();
+
+ /* Event handlers */
+ client.onloadstart = onloadstarthandler;
+ client.onprogress = onprogresshandler;
+ client.onabort = onaborthandler;
+ client.onerror = onerrorhandler;
+ client.onload = onloadhandler;
+ client.ontimeout = ontimeouthandler;
+ client.onloadend = onloadendhandler;
+ client.onreadystatechange = onreadystatechangehandler;
+
+ /* Assign request type and server path */
+ client.open('GET', 'video_sample.mp4');
+ client.send();
</pre>
</li>
<li><p>Define the actions of each <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#event-handlers" target="_blank">event handler</a>:</p>
<pre class="prettyprint">
- /* When the request begins */
- function onloadstarthandler(e)
- {
- html += "onloadstart<br/>";
- document.getElementById("divText").innerHTML = html;
- }
-
- /* When the request is in progress */
- function onprogresshandler(e)
- {
- html += "onprogress<br/>";
- document.getElementById("divText").innerHTML = html;
- }
-
- /* When the client cancels the request */
- function onaborthandler(e)
- {
- html += "onabort<br/>";
- document.getElementById("divText").innerHTML = html;
- }
-
- /* When server exception occurs */
- function onerrorhandler(e)
- {
- html += "onerror<br/>";
- document.getElementById("divText").innerHTML = html;
- }
-
- /* When the request is successfully terminated */
- function onloadhandler(e)
- {
- html += "onload<br/>";
- document.getElementById("divText").innerHTML = html;
- }
-
- /* When a timeout occurs */
- function ontimeouthandler(e)
- {
- html += "ontimeout<br/>";
- document.getElementById("divText").innerHTML = html;
- }
-
- /* When request is terminated regardless of success or failure */
- function onloadendhandler(e)
- {
- html += "onloadend<br/>";
- document.getElementById("divText").innerHTML = html;
- }
-
- /* Checks current progress based on a random repetition period */
- function onreadystatechangehandler(e)
- {
- html += "onreadystate<br/>";
- document.getElementById("divText").innerHTML = html;
- }
+ /* When the request begins */
+ function onloadstarthandler(e) {
+ html += 'onloadstart<br/>';
+ document.getElementById('divText').innerHTML = html;
+ }
+
+ /* When the request is in progress */
+ function onprogresshandler(e) {
+ html += 'onprogress<br/>';
+ document.getElementById('divText').innerHTML = html;
+ }
+
+ /* When the client cancels the request */
+ function onaborthandler(e) {
+ html += 'onabort<br/>';
+ document.getElementById('divText').innerHTML = html;
+ }
+
+ /* When server exception occurs */
+ function onerrorhandler(e) {
+ html += 'onerror<br/>';
+ document.getElementById('divText').innerHTML = html;
+ }
+
+ /* When the request is successfully terminated */
+ function onloadhandler(e) {
+ html += 'onload<br/>';
+ document.getElementById('divText').innerHTML = html;
+ }
+
+ /* When a timeout occurs */
+ function ontimeouthandler(e) {
+ html += 'ontimeout<br/>';
+ document.getElementById('divText').innerHTML = html;
+ }
+
+ /* When request is terminated regardless of success or failure */
+ function onloadendhandler(e) {
+ html += 'onloadend<br/>';
+ document.getElementById('divText').innerHTML = html;
+ }
+
+ /* Checks current progress based on a random repetition period */
+ function onreadystatechangehandler(e) {
+ html += 'onreadystate<br/>';
+ document.getElementById('divText').innerHTML = html;
+ }
</script>
</pre>
</li>
<li><p>Create an <a href="http://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/#dom-xmlhttprequest" target="_blank">XMLHttpRequest</a> interface instance and define the handlers for the <code>onprogress</code> and <code>onabort</code> events to track the download progress and cancellation events:</p>
<pre class="prettyprint">
<script>
- var client = new XMLHttpRequest();
+ var client = new XMLHttpRequest();
- client.onprogress = onprogresshandler;
- client.onabort = onaborthandler;
+ client.onprogress = onprogresshandler;
+ client.onabort = onaborthandler;
</script>
</pre>
</li>
<li><p>Use the <code>send()</code> method to request for a file to be read when the <strong>Start download</strong> button is clicked. When the <strong>Cancel download</strong> button is clicked, use the <code>abort()</code> method to cancel the download.</p>
<pre class="prettyprint lang-js">
<script>
- /* When Start download button is clicked */
- function sendRequest()
- {
- client.send();
- }
-
- /* When Cancel download button is clicked */
- function abortRequest()
- {
- client.abort();
- }
+ /* When Start download button is clicked */
+ function sendRequest() {
+ client.send();
+ }
+
+ /* When Cancel download button is clicked */
+ function abortRequest() {
+ client.abort();
+ }
</pre>
</li>
<li><p>During the download, use the <code>onprogresshandler</code> event handler to track the current and total download size, and calculate the download status. With the <code>onaborthandler</code> event handler, you can display the cancellation notification on the screen.</p>
<pre class="prettyprint">
- function onprogresshandler(e)
- {
- document.getElementById("divText").innerHTML = "DownLoading... (" + parseInt(e.loaded / e.total * 100) + "%)";
- }
-
- function onaborthandler(e)
- {
- document.getElementById("divText").innerHTML = "Download has been cancelled by user.";
- }
+ function onprogresshandler(e) {
+ document.getElementById('divText').innerHTML = 'DownLoading... (' + parseInt(e.loaded / e.total * 100) + '%)';
+ }
+
+ function onaborthandler(e) {
+ document.getElementById('divText').innerHTML = 'Download has been cancelled by user.';
+ }
</script>
</pre>
</li>
<pre class="prettyprint">
<script>
- /* As Tizen is webkit-based, it uses the webkit prefix */
- var battery = navigator.battery || navigator.webkitBattery
- || navigator.mozBattery;
+ /* As Tizen is webkit-based, it uses the webkit prefix */
+ var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
</script>
</pre>
</li>
<pre class="prettyprint">
<script>
- window.addEventListener('load', function(e)
- {
- /* Charging status: true or false */
- document.querySelector('#charging').textContent =
- battery.charging ? 'charging' : 'not charging';
-
- /* Battery.level: between 0 and 1 (for example, 0.50) */
- document.querySelector('#level').textContent =
- Math.floor(battery.level * 100) + '%';
- }, false);
+ window.addEventListener('load', function(e) {
+ /* Charging status: true or false */
+ document.querySelector('#charging').textContent = battery.charging ? 'charging' : 'not charging';
+
+ /* Battery.level: between 0 and 1 (for example, 0.50) */
+ document.querySelector('#level').textContent = Math.floor(battery.level * 100) + '%';
+ }, false);
</script>
</pre></li>
</ol>
<pre class="prettyprint">
<script>
- /* As Tizen is webkit-based, it uses the webkit prefix */
- var battery = navigator.battery || navigator.mozBattery
- || navigator.webkitBattery;
+ /* As Tizen is webkit-based, it uses the webkit prefix */
+ var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
</script>
</pre>
</li>
<pre class="prettyprint">
<script>
- window.addEventListener('load', getBatteryState);
+ window.addEventListener('load', getBatteryState);
- /* Detects changes in the battery charging status */
- battery.addEventListener('chargingchange', getBatteryState);
- /* Detects changes in the battery level */
- battery.addEventListener('levelchange', getBatteryState);
+ /* Detects changes in the battery charging status */
+ battery.addEventListener('chargingchange', getBatteryState);
+ /* Detects changes in the battery level */
+ battery.addEventListener('levelchange', getBatteryState);
</script>
</pre>
</li>
<pre class="prettyprint">
<script>
- function getBatteryState()
- {
- var message = "";
-
- var charging = battery.charging;
- var level = Math.floor(battery.level * 100);
-
- if (charging == false && level < 100)
- {
- /* Not charging */
- }
- else if (level == 100)
- {
- message = "Charging is completed";
- }
-
- document.querySelector('#charging').textContent =
- charging ? 'charging...' : 'Please connect the charger.';
- document.querySelector('#level').textContent = level + "%";
- document.querySelector('#progress').value = level;
- document.querySelector('#message').textContent = message;
- }
+ function getBatteryState() {
+ var message = '';
+
+ var charging = battery.charging;
+ var level = Math.floor(battery.level * 100);
+
+ if (charging == false && level < 100) {
+ /* Not charging */
+ }
+ } else if (level == 100) {
+ message = 'Charging is completed';
+ }
+
+ document.querySelector('#charging').textContent = charging ? 'charging...' : 'Please connect the charger.';
+ document.querySelector('#level').textContent = level + '%';
+ document.querySelector('#progress').value = level;
+ document.querySelector('#message').textContent = message;
+ }
</script>
</pre>
<p>If the battery is not charging, a message is displayed telling you to charge the battery.</p>
<script>
</pre>
<pre class="prettyprint lang-js">
- function updateIndicator()
- {
- var status = navigator.onLine ? 'online' : 'offline';
- document.getElementById('indicator').textContent = status;
- }
+ function updateIndicator() {
+ var status = navigator.onLine ? 'online' : 'offline';
+ document.getElementById('indicator').textContent = status;
+ }
</pre></li>
<li><p>Subscribe to event listeners to be informed when the connection state changes:</p>
<pre class="prettyprint lang-js">
- /* Receive event when page is loaded */
- window.onload = updateIndicator;
- /* Receive event when network connection is available */
- window.ononline = updateIndicator;
- /* Receive event when network connection is unavailable */
- window.onoffline = updateIndicator;
+ /* Receive event when page is loaded */
+ window.onload = updateIndicator;
+ /* Receive event when network connection is available */
+ window.ononline = updateIndicator;
+ /* Receive event when network connection is unavailable */
+ window.onoffline = updateIndicator;
</pre>
<pre class="prettyprint lang-html">
</script>
<script>
</pre>
<pre class="prettyprint lang-js">
- var alphaElem = document.getElementById("alpha");
- var betaElem = document.getElementById("beta");
- var gammaElem = document.getElementById("gamma");
+ var alphaElem = document.getElementById('alpha');
+ var betaElem = document.getElementById('beta');
+ var gammaElem = document.getElementById('gamma');
</pre></li>
<li>To track changes in the device rotation, subscribe to the <a href="http://www.w3.org/TR/2011/WD-orientation-event-20111201/#deviceorientation" target="_blank">deviceorientation</a> event:
<pre class="prettyprint lang-js">
- window.addEventListener("deviceorientation", function(e)
- {
- alphaElem.innerHTML ='alpha value ' + Math.round(e.alpha);
- betaElem.innerHTML = 'beta value ' + Math.round(e.beta);
- gammaElem.innerHTML = 'gamma value ' + Math.round(e.gamma);
- }, true);
+ window.addEventListener('deviceorientation', function(e) {
+ alphaElem.innerHTML ='alpha value ' + Math.round(e.alpha);
+ betaElem.innerHTML = 'beta value ' + Math.round(e.beta);
+ gammaElem.innerHTML = 'gamma value ' + Math.round(e.gamma);
+ }, true);
</pre>
<pre class="prettyprint lang-html">
</script>
<script>
</pre>
<pre class="prettyprint lang-js">
- var firElem = document.getElementById("firElem");
- var secElem = document.getElementById("secElem");
- var thirElem = document.getElementById("thirElem");
+ var firElem = document.getElementById('firElem');
+ var secElem = document.getElementById('secElem');
+ var thirElem = document.getElementById('thirElem');
</pre></li>
-<li>To track changes in
the device acceleration, subscribe to the <a href="http://www.w3.org/TR/2011/WD-orientation-event-20111201/#devicemotion" target="_blank">devicemotion</a> event:
+<li>To track changes in device acceleration, subscribe to the <a href="http://www.w3.org/TR/2011/WD-orientation-event-20111201/#devicemotion" target="_blank">devicemotion</a> event:
<pre class="prettyprint lang-js">
- window.addEventListener("devicemotion", function(e)
- {
- /* Data for acceleration */
- firElem.innerHTML = 'acceleration value<br/><br/> '
- + '[ x value: ' + Math.round(e.acceleration.x) + " ]<br/>"
- + '[ y value: ' + Math.round(e.acceleration.y) + " ]<br/>"
- + '[ z value: ' + Math.round(e.acceleration.z) + ']';
-
- /* Data for acceleration, including gravity */
- secElem.innerHTML = 'accelerationIncludingGravity value<br/><br/> '
- + '[ x value: ' + Math.round(e.accelerationIncludingGravity.x) + " ]<br/>"
- + '[ y value: ' + Math.round(e.accelerationIncludingGravity.y) + " ]<br/>"
- + '[ z value: ' + Math.round(e.accelerationIncludingGravity.z) + ']';
-
- /* Data for rotation rate */
- thirElem.innerHTML = 'rotationRate value<br/><br/> '
- + '[ alpha value: ' + Math.round(e.rotationRate.alpha) + " degree ]<br/>"
- + '[ beta value: ' + Math.round(e.rotationRate.beta) + " degree ]<br/>"
- + '[ gamma value: ' + Math.round(e.rotationRate.gamma) + ' degree ]';
- }, true);
+ window.addEventListener('devicemotion', function(e) {
+ /* Data for acceleration */
+ firElem.innerHTML = 'acceleration value<br/><br/> ' +
+ '[ x value: ' + Math.round(e.acceleration.x) + ' ]<br/>' +
+ '[ y value: ' + Math.round(e.acceleration.y) + ' ]<br/>' +
+ '[ z value: ' + Math.round(e.acceleration.z) + ']';
+
+ /* Data for acceleration, including gravity */
+ secElem.innerHTML = 'accelerationIncludingGravity value<br/><br/> ' +
+ '[ x value: ' + Math.round(e.accelerationIncludingGravity.x) + ' ]<br/>' +
+ '[ y value: ' + Math.round(e.accelerationIncludingGravity.y) + ' ]<br/>' +
+ '[ z value: ' + Math.round(e.accelerationIncludingGravity.z) + ']';
+
+ /* Data for rotation rate */
+ thirElem.innerHTML = 'rotationRate value<br/><br/> ' +
+ '[ alpha value: ' + Math.round(e.rotationRate.alpha) + ' degree ]<br/>' +
+ '[ beta value: ' + Math.round(e.rotationRate.beta) + ' degree ]<br/>' +
+ '[ gamma value: ' + Math.round(e.rotationRate.gamma) + ' degree ]';
+ }, true);
</pre>
<pre class="prettyprint lang-html">
</script>
<p>To receive notifications of the screen orientation changes, add an event listener to the <code>Screen</code> object, or assign a function reference to the <code>screen.onorientationchange</code> attribute:</p>\r
<pre class="prettyprint">\r
/* Add listener */\r
-screen.addEventListener("orientationchange", handleScreenOrientationFun, false);\r
+screen.addEventListener('orientationchange', handleScreenOrientationFun, false);\r
\r
/* Or assign reference */\r
screen.onorientationchange = handleScreenOrientationFun;\r
<p id="currentOrientation" class="current-orientation"></p>\r
\r
<button id="portrait-primary" class="button">Portrait primary</button><br/>\r
- <button id="landscape-secondary"\r
- class="button">Landscape secondary</button><br/>\r
- <button id="portrait-secondary"\r
- class="button">Portrait secondary</button><br/>\r
+ <button id="landscape-secondary" class="button">Landscape secondary</button><br/>\r
+ <button id="portrait-secondary" class="button">Portrait secondary</button><br/>\r
<button id="landscape-primary" class="button">Landscape primary</button><br/>\r
<button id="unlock-orientation" class="button">Unlock orientation</button>\r
</div>\r
\r
<pre class="prettyprint lang-js">\r
<script>\r
- function updateCurrOrrTxt()\r
- {\r
- document.getElementById("currentOrientation").innerHTML = screen.orientation;\r
- }\r
+ function updateCurrOrrTxt() {\r
+ document.getElementById('currentOrientation').innerHTML = screen.orientation;\r
+ }\r
\r
- window.onload = function()\r
- {\r
- document.getElementById("currentOrientation").innerHTML = screen.orientation;\r
- screen.addEventListener("orientationchange", updateCurrOrrTxt, false);\r
+ window.onload = function() {\r
+ document.getElementById('currentOrientation').innerHTML = screen.orientation;\r
+ screen.addEventListener('orientationchange', updateCurrOrrTxt, false);\r
</pre></li>\r
\r
<li><p>Use the <code>onclick</code> event handlers to react to the button clicks. For the first 4 buttons, use the <code>lockOrientation()</code> method to lock the screen orientation in place, and for the final button, use the <code>unlockOrientation()</code> method to release the orientation lock.\r
<p>The <code>lockOrientation()</code> method accepts the following parameter values: <code>portrait-primary</code>, <code>portrait-secondary</code>, <code>landscape-primary</code>, <code>landscape-secondary</code>, <code>portrait</code>, and <code>landscape</code>.</p>\r
\r
<pre class="prettyprint">\r
- document.getElementById("portrait-primary").onclick = function()\r
- {\r
- screen.lockOrientation('portrait-primary');\r
- }\r
+ document.getElementById('portrait-primary').onclick = function() {\r
+ screen.lockOrientation('portrait-primary');\r
+ };\r
\r
- /* Other 3 orientation buttons are handled similarly */\r
+ /* Other 3 orientation buttons are handled similarly */\r
\r
- document.getElementById("unlock-orientation").onclick = function()\r
- {\r
- screen.unlockOrientation();\r
- }\r
- }\r
+ document.getElementById('unlock-orientation').onclick = function() {\r
+ screen.unlockOrientation();\r
+ };\r
+ };\r
</script>\r
</pre>\r
\r
<li>Define CSS styles in the <head> section of the document to make the application more eye-catching.\r
<pre class="prettyprint">\r
<style type="text/css">\r
- *\r
- {\r
+ * {\r
font-family: Lucida Sans, Arial, Helvetica, sans-serif;\r
}\r
- .main\r
- {\r
+\r
+ .main {\r
font-size: 32px;\r
text-align: center;\r
margin-top: auto;\r
margin-bottom: auto;\r
}\r
\r
- .button\r
- {\r
+ .button {\r
font-size: x-large;\r
margin-top: 25px;\r
width: 80%;\r
height: 50px;\r
}\r
\r
- .current-orientation\r
- {\r
+ .current-orientation {\r
font-size: xx-large;\r
font-weight: bolder;\r
}\r
<pre class="prettyprint">
<div id="touchable">
Touch or drag this box with one finger.
- <img src="https://www.tizen.org/sites/all/themes/tizen_theme/logo.png"
- alt="Tizen logo">
+ <img src="https://www.tizen.org/sites/all/themes/tizen_theme/logo.png" alt="Tizen logo">
</div>
<div id="log"></div>
</pre>
<li>Add event handlers for the defined element:
<pre class="prettyprint">
<script>
- var log = document.querySelector("log");
- var touchable = document.querySelector("touchable");
-
- /* touchstart event */
- touchable.addEventListener("touchstart", function(e)
- {
- log.innerHTML = "<p>Touch Event: touchstart</p>";
- }, false);
-
- /* touchend event */
- touchable.addEventListener("touchend", function(e)
- {
- log.innerHTML += "<p>Touch Event: touchend</p>";
- }, false);
-
- /* touchmove event */
- touchable.addEventListener("touchmove", function(e)
- {
- log.innerHTML += "<p>Touch Event: touchmove</p>";
- }, false);
-
- /* touchcancel event */
- touchable.addEventListener("touchcancel", function(e)
- {
- log.innerHTML += "<p>Touch Event: touchcancel</p>";
- }, false);
+ var log = document.querySelector('log');
+ var touchable = document.querySelector('touchable');
+
+ /* touchstart event */
+ touchable.addEventListener('touchstart', function(e) {
+ log.innerHTML = '<p>Touch Event: touchstart</p>';
+ }, false);
+
+ /* touchend event */
+ touchable.addEventListener('touchend', function(e) {
+ log.innerHTML += '<p>Touch Event: touchend</p>';
+ }, false);
+
+ /* touchmove event */
+ touchable.addEventListener('touchmove', function(e) {
+ log.innerHTML += '<p>Touch Event: touchmove</p>';
+ }, false);
+
+ /* touchcancel event */
+ touchable.addEventListener('touchcancel', function(e) {
+ log.innerHTML += '<p>Touch Event: touchcancel</p>';
+ }, false);
</script>
</pre>
</li></ol>
Since the device input takes place by touching the screen, sometimes the features of your application and the browser can respond simultaneously to the same touch event. To prevent the unintended effects (for example, the customized gesture and the browser scroll operating simultaneously), use the <code>preventDefault()</code> method to prevent the basic browser events:
<pre class="prettyprint">
<script>
- touchable.addEventListener("touchmove", function(e)
- {
- if (event.touches.length >= 1)
- {
- log.innerHTML += "<p>Touch Event: touchmove</p>";
+ touchable.addEventListener('touchmove', function(e) {
+ if (event.touches.length >= 1) {
+ log.innerHTML += '<p>Touch Event: touchmove</p>';
e.preventDefault(); /* Prevent default scroll action */
- }
- }, false);
+ }
+ }, false);
</script>
</pre>
</div>
<li>Add an event listener and handler for the <a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#the-touchmove-event" target="_blank">touchmove</a> event to the defined element:
<pre class="prettyprint">
<script>
- var log = document.getElementById("log");
- var touchable = document.getElementById("touchable");
-
- /* touchmove event */
- touchable.addEventListener("touchmove", phaseCalcul, false);
-
- function phaseCalcul(e)
- {
- var pTarget = e.touches.item(0);
-
- log.innerHTML =
- '<strong>pageX:</strong> ' + pTarget.pageX +
- '<br/><strong>pageY:</strong> ' + pTarget.pageY +
- '<br/><strong>clientX:</strong> ' + pTarget.clientX +
- '<br/><strong>clientY:</strong> ' + pTarget.clientY +
- '<br/><strong>screenX:</strong> ' + pTarget.screenX +
- '<br/><strong>screenY:</strong> ' + pTarget.screenY;
-
- e.preventDefault();
- }
+ var log = document.getElementById('log');
+ var touchable = document.getElementById('touchable');
+
+ /* touchmove event */
+ touchable.addEventListener('touchmove', phaseCalcul, false);
+
+ function phaseCalcul(e) {
+ var pTarget = e.touches.item(0);
+
+ log.innerHTML = '<strong>pageX:</strong> ' + pTarget.pageX +
+ '<br/><strong>pageY:</strong> ' + pTarget.pageY +
+ '<br/><strong>clientX:</strong> ' + pTarget.clientX +
+ '<br/><strong>clientY:</strong> ' + pTarget.clientY +
+ '<br/><strong>screenX:</strong> ' + pTarget.screenX +
+ '<br/><strong>screenY:</strong> ' + pTarget.screenY;
+
+ e.preventDefault();
+ }
</script>
</pre>
<li>Add an event listener and handler for the <a href="http://www.w3.org/TR/2013/REC-touch-events-20131010/#the-touchstart-event" target="_blank">touchstart</a> event to the defined element:
<pre class="prettyprint">
<script>
- var touchable = document.getElementById("touchable");
-
- /* touchstart event */
- touchable.addEventListener("touchstart", touchStartHandler, false);
-
- function touchStartHandler(e)
- {
- /* Return if there is no multi-point touch */
- if (e.touches.length < 2) return;
-
- var width = Math.abs(e.touches.item(0).clientX - e.touches.item(1).clientX);
- var height = Math.abs(e.touches.item(0).clientY - e.touches.item(1).clientY);
-
- /* Create a new image object instance */
- var tizenLogo = document.createElement("img");
- tizenLogo.setAttribute("src", "sample_image.png");
- tizenLogo.setAttribute("width", width);
- tizenLogo.setAttribute("height", height);
- tizenLogo.style.position = "absolute";
-
- /* Assign the position where the image is shown based on the touch point */
- tizenLogo.style.left =
- (e.touches.item(0).pageX + e.touches.item(1).pageX - width) / 2 + "px";
- tizenLogo.style.top =
- (e.touches.item(0).pageY + e.touches.item(1).pageY - height) / 2 + "px";
-
- this.appendChild(tizenLogo);
- }
+ var touchable = document.getElementById('touchable');
+
+ /* touchstart event */
+ touchable.addEventListener('touchstart', touchStartHandler, false);
+
+ function touchStartHandler(e) {
+ /* Return if there is no multi-point touch */
+ if (e.touches.length < 2) return;
+
+ var width = Math.abs(e.touches.item(0).clientX - e.touches.item(1).clientX);
+ var height = Math.abs(e.touches.item(0).clientY - e.touches.item(1).clientY);
+
+ /* Create a new image object instance */
+ var tizenLogo = document.createElement('img');
+ tizenLogo.setAttribute('src', 'sample_image.png');
+ tizenLogo.setAttribute('width', width);
+ tizenLogo.setAttribute('height', height);
+ tizenLogo.style.position = 'absolute';
+
+ /* Assign the position where the image is shown based on the touch point */
+ tizenLogo.style.left = (e.touches.item(0).pageX + e.touches.item(1).pageX - width) / 2 + 'px';
+ tizenLogo.style.top = (e.touches.item(0).pageY + e.touches.item(1).pageY - height) / 2 + 'px';
+
+ this.appendChild(tizenLogo);
+ }
</script>
</pre>
<a id="test" href="#">Click test using touch event</a>
<div id="log"></div>
<script>
- var moved = false;
+ var moved = false;
- $('#test').on('touchstart', function(e)
- {
- moved = false;
- });
+ $('#test').on('touchstart', function(e) {
+ moved = false;
+ });
- $('#test').on('touchmove', function(e)
- {
- moved = true;
- });
+ $('#test').on('touchmove', function(e) {
+ moved = true;
+ });
- $('#test').on('touchend', function(e)
- {
- if (!moved)
- $('#log').innerHTML = "Test link is clicked!";
+ $('#test').on('touchend', function(e) {
+ if (!moved)
+ $('#log').innerHTML = 'Test link is clicked!';
- return false;
- });
+ return false;
+ });
</script>
</pre>
<p>To avoid activating the click event after the touch event, set the return type to <code>false</code>.</p></li>
<a id="test" href="#">Click test using touch event</a>
<div id="log"></div>
<script>
- $('#test').on('vclick', function(e)
- {
- $('#log').html("Test link is clicked!");
+ $('#test').on('vclick', function(e) {
+ $('#log').html('Test link is clicked!');
- return false;
- });
+ return false;
+ });
</script>
</pre>
</li>
<script>
</pre>
<pre class="prettyprint lang-js">
- function singleVibration()
- {
- /* Vibrate for 2 seconds */
- navigator.vibrate(2000);
- }
+ function singleVibration() {
+ /* Vibrate for 2 seconds */
+ navigator.vibrate(2000);
+ }
</pre>
</li>
<li>To launch a vibration that uses a pattern of vibration and still periods, define the pattern as the <code>vibrate()</code> method parameter:
<pre class="prettyprint">
- function patternVibration()
- {
- /* Vibrate in a given pattern: 1 sec on, 1 sec off, 2 sec on, 2 sec off */
- navigator.vibrate([1000, 1000, 2000, 2000, 1000]);
- }
+ function patternVibration() {
+ /* Vibrate in a given pattern: 1 sec on, 1 sec off, 2 sec on, 2 sec off */
+ navigator.vibrate([1000, 1000, 2000, 2000, 1000]);
+ }
</pre>
</li>
<li>To stop the vibration before it ends naturally, use the <code>vibrate()</code> method with <code>0</code> or <code>[]</code> as a parameter. The method call cancels all existing vibrations.
<pre class="prettyprint">
- function stopVibration()
- {
- navigator.vibrate(0);
- }
+ function stopVibration() {
+ navigator.vibrate(0);
+ }
</pre>
</li>
<li>Create the buttons used to manage the vibrations:
<li>Use the <code>CanvasRenderingContext2D</code> interface (in <a href="http://www.w3.org/TR/2015/REC-2dcontext-20151119/#canvasrenderingcontext2d" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2012/CR-2dcontext-20121217/#canvasrenderingcontext2d" target="_blank">wearable</a> applications) to connect to the canvas and get the canvas context:
<pre class="prettyprint">
-var canvas = document.querySelector("canvas"),
-var context = canvas.getContext('2d');
+var canvas = document.querySelector('canvas'),
+ context = canvas.getContext('2d');
</pre>
<p>The interface has various methods and attributes for expressing images and shapes.</p></li>
<li>To manage the work stack of the canvas, use the following methods:
<p>There is a need to separately check whether the canvas 2D context can be used by using the <code>getContext()</code> method:</p>
<pre class="prettyprint">
-if (!(canvas.getContext))
-{
- alert("This browser is not supported");
+if (!(canvas.getContext)) {
+ alert('This browser is not supported');
}
</pre>
<h3>Source Code</h3>
var transImage = context.getImageData(30, 20, image.width, image.height);
/* Convert the data color value for each image pixel */
-for (var i = 0; i < transImage.data.length; i += 4)
-{
- transImage.data[i + 0] = 255 - transImage.data[i + 0];
- transImage.data[i + 1] = 255 - transImage.data[i + 1];
- transImage.data[i + 2] = 255 - transImage.data[i + 2];
+for (var i = 0; i < transImage.data.length; i += 4) {
+ transImage.data[i + 0] = 255 - transImage.data[i + 0];
+ transImage.data[i + 1] = 255 - transImage.data[i + 1];
+ transImage.data[i + 2] = 255 - transImage.data[i + 2];
}
/* Insert the converted image back to the canvas */
<pre class="prettyprint">
<style>
- body
- {
+ body {
background: url(images/tizen_blackfold3.png) no-repeat;
background-size: cover;
}
<li>Initialize the canvas:
<pre class="prettyprint">
-window.onload = function()
-{
- canvas = document.getElementById('canvas');
- context = canvas.getContext("2d");
- if (!context)
- {
- return;
- }
-}
+window.onload = function() {
+ canvas = document.getElementById('canvas');
+ context = canvas.getContext('2d');
+ if (!context) {
+ return;
+ }
+};
</pre>
</li>
<pre class="prettyprint">
var img = new Image();
-img.addEventListener('load', function()
- {
- context.drawImage(img, 0, 0);
- });
-img.src = "images/TizenPinwheelArrows.png";
+img.addEventListener('load', function() {
+ context.drawImage(img, 0, 0);
+});
+img.src = 'images/TizenPinwheelArrows.png';
context.lineWidth = brushSize;
context.lineCap = 'round';
</pre>
</li>
<li>Define the button events and brushes:
<pre class="prettyprint">
-var smallBtn = document.getElementById("smallBrush");
+var smallBtn = document.getElementById('smallBrush');
smallBtn.addEventListener('click', smallBrush);
-var bigBtn = document.getElementById("bigBrush");
+var bigBtn = document.getElementById('bigBrush');
bigBtn.addEventListener('click', bigBrush);
-function smallBrush(e)
-{
- context.beginPath();
- brushSize = 4;
- context.lineWidth = brushSize;
+function smallBrush(e) {
+ context.beginPath();
+ brushSize = 4;
+ context.lineWidth = brushSize;
}
/* Define the big brush similarly */
</pre></li>
</li>
<li>Use the <code>updateLastPos()</code> method to update the <code>lastX</code> and <code>lastY</code> variable values. The real coordinates can be calculated by reducing the offset position of the canvas element from the touch position coordinates. The <code>'touch'</code> string indicates that the event is a touch event.
<pre class="prettyprint">
-function updateLastPos(e)
-{
- if (e.type.indexOf('touch') >= 0)
- {
- var pos = e.touches.item(0);
- lastX = pos.clientX-pos.target.offsetLeft;
- lastY = pos.clientY-pos.target.offsetTop;
- }
- else
- {
- lastX = e.offsetX;
- lastY = e.offsetY;
- }
+function updateLastPos(e) {
+ if (e.type.indexOf('touch') >= 0) {
+ var pos = e.touches.item(0);
+ lastX = pos.clientX-pos.target.offsetLeft;
+ lastY = pos.clientY-pos.target.offsetTop;
+ } else {
+ lastX = e.offsetX;
+ lastY = e.offsetY;
+ }
}
</pre>
</li>
<li>When the user starts drawing, the <code>touchstart</code> or <code>mousedown</code> event calls the <code>startDraw()</code> method, which updates the event position, sets the composite operations property to make the drawing a mask, begins to draw a new path, moves the drawing point to the selected coordinates, and sets the button or touch event state to <code>true</code>.
<pre class="prettyprint">
-function startDraw(e)
-{
- updateLastPos(e);
- context.globalCompositeOperation = 'destination-out';
- context.beginPath();
- context.moveTo(lastX, lastY);
- mouseBtn = true;
+function startDraw(e) {
+ updateLastPos(e);
+ context.globalCompositeOperation = 'destination-out';
+ context.beginPath();
+ context.moveTo(lastX, lastY);
+ mouseBtn = true;
}
</pre>
</li>
<li>While the user is drawing, the <code>touchmove</code> and <code>mousemove</code> events are handled with the <code>drawStep()</code> method based on the button state retrieved from the <code>mouseBtn</code> variable. The <code>drawStep()</code> method calls the <code>updateLastPos()</code> method only when the mouse or finger is being moved. Use the <code>stroke()</code> method to make the drawn line visible.
<pre class="prettyprint">
-function drawStep(e)
-{
- if (mouseBtn)
- {
- updateLastPos(e);
- context.lineTo(lastX, lastY);
- context.stroke();
- }
+function drawStep(e) {
+ if (mouseBtn) {
+ updateLastPos(e);
+ context.lineTo(lastX, lastY);
+ context.stroke();
+ }
}
</pre>
</li>
<li>When the touch event ends or the mouse button is released, use the <code>stopDraw()</code> method to stop drawing:
<pre class="prettyprint">
-function stopDraw(e)
-{
- context.globalCompositeOperation = 'source-over';
- mouseBtn = false;
+function stopDraw(e) {
+ context.globalCompositeOperation = 'source-over';
+ mouseBtn = false;
}
</pre>
<p align="center"><img alt="Drawing masks" src="../../../images/canvas_drawing_masks.png" /></p>
<li><p>To draw a line, use the <code>moveTo()</code> method to assign the beginning point of the line, and the <code>lineTo()</code> method to assign the end point of the line. The <code>stroke()</code> method draws the full line. </p>
<pre class="prettyprint">
-context.lineJoin = "bevel";
+context.lineJoin = 'bevel';
context.lineWidth = 20;
context.beginPath();
-context.lineJoin = "round";
+context.lineJoin = 'round';
context.moveTo(20, 20);
context.lineTo(100, 40);
context.stroke();
<pre class="prettyprint">
context.font = 'italic 400 22px/2 sans-serif';
-context.strokeStyle = "#f00";
-context.textBaseline = "alphabetic";
+context.strokeStyle = '#f00';
+context.textBaseline = 'alphabetic';
context.moveTo(150, 20);
context.lineTo(150, 170);
context.stroke();
<li><p>Use the <code>textAlign</code> attribute and the <code>fillText()</code> method to position the text in the assigned location:</p>
<pre class="prettyprint">
-context.textAlign = "start";
-context.fillText("textAlign=start", 150, 50);
-context.textAlign = "end";
-context.measureText("textAlign=end", 150, 100);
+context.textAlign = 'start';
+context.fillText('textAlign=start', 150, 50);
+context.textAlign = 'end';
+context.measureText('textAlign=end', 150, 100);
</pre></li>
</ol>
<pre class="prettyprint">
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
- <rect x="1" y="1" width="120" height="40" fill="blue"
- stroke="red" stroke-width="2">
- <animate attributeName="width" to="300" dur="5s"
- repeatCount="1" fill="remove"/>
+ <rect x="1" y="1" width="120" height="40" fill="blue" stroke="red" stroke-width="2">
+ <animate attributeName="width" to="300" dur="5s" repeatCount="1" fill="remove"/>
</rect>
- <rect x="1" y="50" width="120" height="40"
- fill="blue" stroke="red" stroke-width="2">
- <animate attributeName="width" to="300" dur="5s"
- repeatCount="1" fill="freeze"/>
+ <rect x="1" y="50" width="120" height="40" fill="blue" stroke="red" stroke-width="2">
+ <animate attributeName="width" to="300" dur="5s" repeatCount="1" fill="freeze"/>
</rect>
</svg>
</pre></li>
<pre class="prettyprint">
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
- <rect x="1" y="1" width="120" height="40"
- fill="blue" stroke="red" stroke-width="2">
- <animateColor to="red" attributeName="fill" dur="5s"
- repeatCount="indefinite"/>
+ <rect x="1" y="1" width="120" height="40" fill="blue" stroke="red" stroke-width="2">
+ <animateColor to="red" attributeName="fill" dur="5s" repeatCount="indefinite"/>
</rect>
</svg>
</pre></li>
<pre class="prettyprint">
<script>
- var rectElemt = document.getElementById('rect')
- rectElemt].addEventListener('click', rect_click);
-
- function rect_click(event)
- {
- var target = event.target
- var targetWidth = target.getAttribute("width");
- if (targetWidth == 120)
- {
- target.setAttribute("width", targetWidth * 2);
- }
- else
- {
- target.setAttribute("width", targetWidth * 0.5);
- };
- };
+ var rectElemt = document.getElementById('rect')
+ rectElemt.addEventListener('click', rect_click);
+
+ function rect_click(event) {
+ var target = event.target
+ var targetWidth = target.getAttribute('width');
+ if (targetWidth == 120) {
+ target.setAttribute('width', targetWidth * 2);
+ } else {
+ target.setAttribute('width', targetWidth * 0.5);
+ }
+ }
</script>
</pre></li></ol>
<h3>Source Code</h3>
<p>The <a href="http://www.w3.org/TR/2013/REC-geolocation-API-20131024/#geolocation_interface" target="_blank">Geolocation</a> interface allows 2 types of location requests: "one-shot" position request and repeated position updates. Both request types use the same event handlers. The success event handler is invoked when an attempt to obtain the current location is successful, while the error event handler is invoked when the attempt fails. The success event handler is mandatory, and contains a <code>position</code> parameter that hold the actual position information.</p>
<pre class="prettyprint">
-function successCallback(position)
-{
- document.getElementById("locationInfo").innerHTML =
- "Latitude: " + position.coords.latitude
- + "<br/>Longitude: " + position.coords.longitude;
+function successCallback(position) {
+ document.getElementById('locationInfo').innerHTML = 'Latitude: ' + position.coords.latitude +
+ '<br/>Longitude: ' + position.coords.longitude;
}
-function errorCallback(error)
-{
- var errorInfo = document.getElementById("locationInfo");
-
- switch (error.code)
- {
- case error.PERMISSION_DENIED:
- errorInfo.innerHTML = "User denied the request for Geolocation.";
- break;
- case error.POSITION_UNAVAILABLE:
- errorInfo.innerHTML = "Location information is unavailable.";
- break;
- case error.TIMEOUT:
- errorInfo.innerHTML = "The request to get user location timed out.";
- break;
- case error.UNKNOWN_ERROR:
- errorInfo.innerHTML = "An unknown error occurred.";
- break;
- }
+function errorCallback(error) {
+ var errorInfo = document.getElementById('locationInfo');
+
+ switch (error.code) {
+ case error.PERMISSION_DENIED:
+ errorInfo.innerHTML = 'User denied the request for Geolocation.';
+ break;
+ case error.POSITION_UNAVAILABLE:
+ errorInfo.innerHTML = 'Location information is unavailable.';
+ break;
+ case error.TIMEOUT:
+ errorInfo.innerHTML = 'The request to get user location timed out.';
+ break;
+ case error.UNKNOWN_ERROR:
+ errorInfo.innerHTML = 'An unknown error occurred.';
+ break;
+ }
}
</pre>
</li>
<li>Create a "one-shot" position request with the <code>getCurrentPosition()</code> method.
<p>The <code>maximumAge</code> parameter determines that if the user agent does not have cached position information that is fresher than 60000 milliseconds (1 minute), new location information is automatically obtained.</p>
<pre class="prettyprint">
-function oneShotFunc()
-{
- if (navigator.geolocation)
- {
- navigator.geolocation.getCurrentPosition(successCallback, errorCallback,
- {maximumAge: 60000});
- }
- else
- {
- document.getElementById("locationInfo").innerHTML =
- "Geolocation is not supported.";
- }
+function oneShotFunc() {
+ if (navigator.geolocation) {
+ navigator.geolocation.getCurrentPosition(successCallback, errorCallback,
+ {maximumAge: 60000});
+ } else {
+ document.getElementById('locationInfo').innerHTML = 'Geolocation is not supported.';
+ }
}
</pre>
<p>If you do not want to wait for new position information, but are willing to use cached information regardless of how old it is, you can use the <code>maximumAge</code> and <code>timeout</code> parameters together (<code>{maximumAge: Infinity, timeout: 0}</code>). In this case, if the user agent has no position information cached, it automatically invokes the error event handler.</p>
</li>
<li>Create a repeated position update request with the <code>watchPosition()</code> method:
<pre class="prettyprint">
-function watchFunc()
-{
- if (navigator.geolocation)
- {
- watchId = navigator.geolocation.watchPosition(successCallback, errorCallback);
- }
- else
- {
- document.getElementById("locationInfo").innerHTML =
- "Geolocation is not supported.";
- }
+function watchFunc() {
+ if (navigator.geolocation) {
+ watchId = navigator.geolocation.watchPosition(successCallback, errorCallback);
+ } else {
+ document.getElementById('locationInfo').innerHTML = 'Geolocation is not supported.';
+ }
}
</pre>
</li>
<li>The repeated position update request continues until the <code>clearWatch()</code> method is called with the corresponding identifier:
<pre class="prettyprint">
-function stopWatchFunc()
-{
- if (navigator.geolocation)
- {
- navigator.geolocation.clearWatch(watchId);
- }
- else
- {
- document.getElementById("locationInfo").innerHTML =
- "Geolocation is not supported.";
- }
+function stopWatchFunc() {
+ if (navigator.geolocation) {
+ navigator.geolocation.clearWatch(watchId);
+ } else {
+ document.getElementById('locationInfo').innerHTML = 'Geolocation is not supported.';
+ }
}
</pre>
</li>
<li>Use the <code>navigator.webkitGetUserMedia()</code> method to derive audio streams:\r
<pre class="prettyprint">\r
<script>\r
- function getVideoStream()\r
- {\r
- navigator.webkitGetUserMedia({video: true}, successCallBack, errorCallBack);\r
- }\r
+ function getVideoStream() {\r
+ navigator.webkitGetUserMedia({video: true}, successCallBack, errorCallBack);\r
+ }\r
</script>\r
</pre>\r
\r
<li>Retrieve audio stream information and create stream URL:\r
<pre class="prettyprint">\r
<script>\r
- function SuccessCallback(stream)\r
- {\r
- var URL = window.webkitURL;\r
- document.getElementById("videoPlay").src = URL.createObjectURL(stream);\r
- }\r
+ function SuccessCallback(stream) {\r
+ var URL = window.webkitURL;\r
+ document.getElementById('videoPlay').src = URL.createObjectURL(stream);\r
+ }\r
</script>\r
</pre>\r
</li>\r
<body>\r
<video id="videoView" src="" autoplay></video><br/>\r
<img id="imgView" src="">\r
- <canvas id="canvasView" style="display: none;"\r
- width="300" height="225"></canvas><br/>\r
- <input type="button" value="WebCamStart"\r
- onclick="getVideoStream();" id="btnPlay"/>\r
+ <canvas id="canvasView" style="display: none;" width="300" height="225"></canvas><br/>\r
+ <input type="button" value="WebCamStart" onclick="getVideoStream();" id="btnPlay"/>\r
<input type="button" value="Capture" onclick="getCapture();" id="btnCapture"/>\r
</body>\r
</pre>\r
<li><p>Enable rendering of the retrieved media stream by calling the <code>webkitGetUserMedia()</code> method:</p>\r
<pre class="prettyprint">\r
<script>\r
- function getVideoStream()\r
- {\r
- navigator.webkitGetUserMedia({video: true}, SuccessCallBack, ErrorCallBack);\r
- }\r
- function SuccessCallBack(stream)\r
- {\r
- var URL = window.webkitURL;\r
- document.getElementById("videoView").src = URL.createObjectURL(stream);\r
- localStream = stream;\r
- }\r
- function ErrorCallBack(e)\r
- {\r
- /* Error handling */\r
- }\r
+ function getVideoStream() {\r
+ navigator.webkitGetUserMedia({video: true}, SuccessCallBack, ErrorCallBack);\r
+ }\r
+ function SuccessCallBack(stream) {\r
+ var URL = window.webkitURL;\r
+ document.getElementById('videoView').src = URL.createObjectURL(stream);\r
+ localStream = stream;\r
+ }\r
+ function ErrorCallBack(e) {\r
+ /* Error handling */\r
+ }\r
</script>\r
</pre>\r
</li>\r
<li><p>Display the captured frame in a <a href="video_audio_w.htm">video</a> element using the <code>drawImage()</code> method: </p>\r
<pre class="prettyprint">\r
<script>\r
- var localStream = "";\r
- function getCapture()\r
- {\r
- if (localStream)\r
- {\r
- var canvas = document.getElementById("canvasView");\r
- var context = canvas.getContext('2d');\r
-\r
- context.drawImage(document.getElementById("videoView"), 0, 0, 300, 225);\r
- document.getElementById("imgView").src = canvas.toDataURL('image/web');\r
- }\r
- }\r
+ var localStream = '';\r
+ function getCapture() {\r
+ if (localStream) {\r
+ var canvas = document.getElementById('canvasView');\r
+ var context = canvas.getContext('2d');\r
+\r
+ context.drawImage(document.getElementById('videoView'), 0, 0, 300, 225);\r
+ document.getElementById('imgView').src = canvas.toDataURL('image/web');\r
+ }\r
+ }\r
</script>\r
</pre>\r
</li>\r
\r
<pre class="prettyprint lang-js">\r
<script>\r
- var play_button = document.getElementById("v-play");\r
- var pause_button = document.getElementById("v-pause");\r
-\r
- play_button.addEventListener("click", function()\r
- {\r
- video.play(); /* Play movie */\r
- }, false);\r
-\r
- pause_button.addEventListener("click", function()\r
- {\r
- video.pause(); /* Pause movie */\r
- }, false);\r
+ var play_button = document.getElementById('v-play');\r
+ var pause_button = document.getElementById('v-pause');\r
+\r
+ play_button.addEventListener('click', function() {\r
+ video.play(); /* Play movie */\r
+ }, false);\r
+\r
+ pause_button.addEventListener('click', function() {\r
+ video.pause(); /* Pause movie */\r
+ }, false);\r
</pre>\r
</li>\r
\r
<li>\r
<p>Apply event listeners to detect button events an react to them:</p>\r
<pre class="prettyprint">\r
- var video = document.getElementById("video");\r
-\r
- video.addEventListener("play", function()\r
- {\r
- play_button.disabled = true; /* Play button disabled */\r
- pause_button.disabled = false; /* Pause button enabled */\r
- }, false);\r
-\r
- video.addEventListener("pause", function()\r
- {\r
- play_button.disabled = false; /* Play button enabled */\r
- pause_button.disabled = true; /* Pause button disabled */\r
- }, false);\r
-\r
- video.addEventListener("ended", function()\r
- {\r
- play_button.disabled = false; /* Play button enabled */\r
- pause_button.disabled = true; /* Pause button disabled */\r
- }, false);\r
+ var video = document.getElementById('video');\r
+\r
+ video.addEventListener('play', function() {\r
+ play_button.disabled = true; /* Play button disabled */\r
+ pause_button.disabled = false; /* Pause button enabled */\r
+ }, false);\r
+\r
+ video.addEventListener('pause', function() {\r
+ play_button.disabled = false; /* Play button enabled */\r
+ pause_button.disabled = true; /* Pause button disabled */\r
+ }, false);\r
+\r
+ video.addEventListener('ended', function() {\r
+ play_button.disabled = false; /* Play button enabled */\r
+ pause_button.disabled = true; /* Pause button disabled */\r
+ }, false);\r
</script>\r
</pre>\r
\r
\r
<pre class="prettyprint lang-js">\r
<script>\r
- var video = document.getElementById("video");\r
- var currentTime = document.getElementById("currentTime");\r
- var totalTime = document.getElementById("totalTime");\r
-\r
- /* Indicate the total duration */\r
- video.addEventListener("loadedmetadata", function()\r
- {\r
- /* Total video duration */\r
- var totalSec = video.duration;\r
-\r
- /* Import method to change seconds to time (HH:MM:SS) format */\r
- var time = secondsToTime(totalSec);\r
-\r
- /* Display the calculated time on screen */\r
- totalTime.innerHTML = parseInt(totalSec)\r
- + "sec (" + time.h + ":" + time.m + ":" + time.s + ")";\r
- }, false);\r
+ var video = document.getElementById('video');\r
+ var currentTime = document.getElementById('currentTime');\r
+ var totalTime = document.getElementById('totalTime');\r
+\r
+ /* Indicate the total duration */\r
+ video.addEventListener('loadedmetadata', function() {\r
+ /* Total video duration */\r
+ var totalSec = video.duration;\r
+\r
+ /* Import method to change seconds to time (HH:MM:SS) format */\r
+ var time = secondsToTime(totalSec);\r
+\r
+ /* Display the calculated time on screen */\r
+ totalTime.innerHTML = parseInt(totalSec) + 'sec (' + time.h +\r
+ ':' + time.m + ':' + time.s + ')';\r
+ }, false);\r
</pre>\r
</li>\r
<li>\r
<p>Apply the <code>timeupdate</code> media event to the <code>video</code> object to get the playing time:</p>\r
<pre class="prettyprint">\r
- /* Indicate play time status */\r
- video.addEventListener("timeupdate", function()\r
- {\r
- /* Current play time */\r
- var currSec = video.currentTime;\r
- var c_time = secondsToTime(currSec\r
-\r
- /* Display the current play time */\r
- currentTime.innerHTML = parseInt(currSec)\r
- + "sec (" + c_time.h + ":" + c_time.m + ":" + c_time.s + ")";\r
- }, false);\r
+ /* Indicate play time status */\r
+ video.addEventListener('timeupdate', function() {\r
+ /* Current play time */\r
+ var currSec = video.currentTime;\r
+ var c_time = secondsToTime(currSec);\r
+\r
+ /* Display the current play time */\r
+ currentTime.innerHTML = parseInt(currSec) + 'sec (' + c_time.h +\r
+ ':' + c_time.m + ':' + c_time.s + ')';\r
+ }, false);\r
</script>\r
</pre>\r
</li>\r
\r
<pre class="prettyprint">\r
<script>\r
- /* Change seconds to time (HH:MM:SS) format */\r
- function secondsToTime(secs)\r
- {\r
- var hours = Math.floor(secs / (60 * 60));\r
-\r
- var divisor_for_minutes = secs % (60 * 60);\r
- var minutes = Math.floor(divisor_for_minutes / 60);\r
-\r
- var divisor_for_seconds = divisor_for_minutes % 60;\r
- var seconds = Math.ceil(divisor_for_seconds);\r
-\r
- /* Set as JSON object */\r
- var obj =\r
- {\r
- "h": intToString(hours),\r
- "m": intToString(minutes),\r
- "s": intToString(seconds)\r
- };\r
-\r
- return obj;\r
- }\r
-\r
- /* Ensure that each time is set in 2 characters according to the time format */\r
- function intToString(time)\r
- {\r
- return (parseInt(time) < 10 ? ("0" + time) : time);\r
- }\r
+ /* Change seconds to time (HH:MM:SS) format */\r
+ function secondsToTime(secs) {\r
+ var hours = Math.floor(secs / (60 * 60));\r
+\r
+ var divisor_for_minutes = secs % (60 * 60);\r
+ var minutes = Math.floor(divisor_for_minutes / 60);\r
+\r
+ var divisor_for_seconds = divisor_for_minutes % 60;\r
+ var seconds = Math.ceil(divisor_for_seconds);\r
+\r
+ /* Set as JSON object */\r
+ var obj = {\r
+ 'h': intToString(hours),\r
+ 'm': intToString(minutes),\r
+ 's': intToString(seconds)\r
+ };\r
+\r
+ return obj;\r
+ }\r
+\r
+ /* Ensure that each time is set in 2 characters according to the time format */\r
+ function intToString(time) {\r
+ return (parseInt(time) < 10 ? ('0' + time) : time);\r
+ }\r
</script>\r
</pre>\r
<p align="center"><strong>Figure: Displaying the duration and play time (in mobile applications only)</strong></p>\r
\r
<pre class="prettyprint">\r
<script>\r
- var video = document.getElementById("video"); /* Video object */\r
- var back_button = document.getElementById("v-back"); /* Back button */\r
- var forw_button = document.getElementById("v-forw"); /* Forward button */\r
- var go_button = document.getElementById("v-goto"); /* Jump button */\r
-\r
- /* Move 5 seconds back */\r
- back_button.addEventListener("click", function()\r
- {\r
- video.currentTime -= 5;\r
- }, false);\r
-\r
- /* Move 5 seconds forward */\r
- forw_button.addEventListener("click", function()\r
- {\r
- video.currentTime += 5;\r
- }, false);\r
-\r
- /* Move timeline to 40 seconds */\r
- go_button.addEventListener("click", function()\r
- {\r
- video.currentTime = 40;\r
- }, false);\r
+ var video = document.getElementById('video'); /* Video object */\r
+ var back_button = document.getElementById('v-back'); /* Back button */\r
+ var forw_button = document.getElementById('v-forw'); /* Forward button */\r
+ var go_button = document.getElementById('v-goto'); /* Jump button */\r
+\r
+ /* Move 5 seconds back */\r
+ back_button.addEventListener('click', function() {\r
+ video.currentTime -= 5;\r
+ }, false);\r
+\r
+ /* Move 5 seconds forward */\r
+ forw_button.addEventListener('click', function() {\r
+ video.currentTime += 5;\r
+ }, false);\r
+\r
+ /* Move timeline to 40 seconds */\r
+ go_button.addEventListener('click', function() {\r
+ video.currentTime = 40;\r
+ }, false);\r
</script>\r
</pre>\r
<p>If the metadata of the media file is loaded, you can move to the assigned timeline position even when the media file is not playing. For more information, see <a href="#retrieve">Retrieving Media Information.</a></p>\r
\r
<pre class="prettyprint">\r
<div class="media">\r
- <video id="video" src="media/video_sample.mp4" controls\r
- poster="media/poster_sample.png"></video>\r
+ <video id="video" src="media/video_sample.mp4" controls poster="media/poster_sample.png"></video>\r
<div>Progress: <span id="state"></span></div>\r
</div>\r
</pre>\r
\r
<pre class="prettyprint lang-js">\r
<script>\r
- var video = document.getElementById("video")\r
+ var video = document.getElementById('video');\r
\r
- /* Progress event */\r
- video.addEventListener("progress", function()\r
- {\r
- /* Returns a TimeRanges object */\r
- var buffered = video.buffered;\r
+ /* Progress event */\r
+ video.addEventListener('progress', function() {\r
+ /* Returns a TimeRanges object */\r
+ var buffered = video.buffered;\r
\r
- /* Returns time in seconds */\r
- var buffered_end = buffered.end();\r
+ /* Returns time in seconds */\r
+ var buffered_end = buffered.end();\r
</pre>\r
</li>\r
<li>\r
<p>Use the <code>progress</code> <a href="http://www.w3.org/wiki/HTML/Elements/video#Media_Events" target="_blank">media event</a> to convert the end time to percent form, and display the progress state:</p>\r
<pre class="prettyprint lang-js">\r
- /* Change to progress rate percent */\r
- var progress = (buffered_end / video.duration) * 100;\r
+ /* Change to progress rate percent */\r
+ var progress = (buffered_end / video.duration) * 100;\r
\r
- /* Display the progress state */\r
- document.getElementById("state").innerHTML = parseInt(progress) + "%";\r
- }, false);\r
+ /* Display the progress state */\r
+ document.getElementById('state').innerHTML = parseInt(progress) + '%';\r
+ }, false);\r
</script>\r
</pre>\r
<p align="center"><strong>Figure: Displaying the progress state (in mobile applications only)</strong></p>\r
\r
<pre class="prettyprint">\r
<script>\r
- var video = document.getElementById("video")\r
-\r
- /* Resize to big size */\r
- document.getElementById("size_big").addEventListener("click", function()\r
- {\r
- video.width = 600;\r
- video.height = 410;\r
- }, false);\r
-\r
- /* Resize to middle size */\r
- document.getElementById("size_middle").addEventListener("click", function()\r
- {\r
- video.width = 320;\r
- video.height = 220;\r
- }, false);\r
-\r
- /* Resize to small size */\r
- document.getElementById("size_small").addEventListener("click", function()\r
- {\r
- video.width = 150;\r
- video.height = 150;\r
- }, false);\r
+ var video = document.getElementById('video');\r
+\r
+ /* Resize to big size */\r
+ document.getElementById('size_big').addEventListener('click', function() {\r
+ video.width = 600;\r
+ video.height = 410;\r
+ }, false);\r
+\r
+ /* Resize to middle size */\r
+ document.getElementById('size_middle').addEventListener('click', function() {\r
+ video.width = 320;\r
+ video.height = 220;\r
+ }, false);\r
+\r
+ /* Resize to small size */\r
+ document.getElementById('size_small').addEventListener('click', function() {\r
+ video.width = 150;\r
+ video.height = 150;\r
+ }, false);\r
</script>\r
</pre>\r
<p align="center"><strong>Figure: Resizing the video screen (in mobile applications only)</strong></p>\r
<li><p>Use the <code>canPlayType()</code> method (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#dom-navigator-canplaytype" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/CR-html5-20140429/embedded-content-0.html#dom-navigator-canplaytype" target="_blank">wearable</a> applications) to check, whether the selected media files have an acceptable MIME type, and can be played:</p>\r
<pre class="prettyprint">\r
<script>\r
- var video1 = document.getElementById("video1");\r
- var video2 = document.getElementById("video2");\r
- var videoElem03 = document.getElementById("video3");\r
+ var video1 = document.getElementById('video1');\r
+ var video2 = document.getElementById('video2');\r
+ var videoElem03 = document.getElementById('video3');\r
\r
- /* Check the ogg format */\r
- document.getElementById("vlog1").innerHTML = video1.canPlayType('video/ogg');\r
+ /* Check the ogg format */\r
+ document.getElementById('vlog1').innerHTML = video1.canPlayType('video/ogg');\r
\r
- /* Check the webm format */\r
- document.getElementById("vlog2").innerHTML = video2.canPlayType('audio/acc');\r
+ /* Check the webm format */\r
+ document.getElementById('vlog2').innerHTML = video2.canPlayType('audio/acc');\r
</script>\r
</pre>\r
</li>\r
<li><p>Add an event listener to detect errors and trigger error messages:</p>\r
<pre class="prettyprint">\r
<script>\r
- var video = document.getElementById("video")\r
-\r
- /* Button event: induce error */\r
- document.getElementById("btn01").addEventListener("click", function()\r
- {\r
- video.src = ""; /* Set value as null value */\r
- }, false);\r
-\r
- video.addEventListener("error", function()\r
- {\r
- /* Video playback failed: show a message saying why */\r
- switch (video.error.code)\r
- {\r
+ var video = document.getElementById('video');\r
+\r
+ /* Button event: induce error */\r
+ document.getElementById('btn01').addEventListener('click', function() {\r
+ video.src = ''; /* Set value as null value */\r
+ }, false);\r
+\r
+ video.addEventListener('error', function() {\r
+ /* Video playback failed: show a message saying why */\r
+ switch (video.error.code) {\r
case 1:\r
- alert("MEDIA_ERR_ABORTED = 1 Media data download is stopped by the user");\r
- break;\r
+ alert('MEDIA_ERR_ABORTED = 1 Media data download is stopped by the user');\r
+ break;\r
case 2:\r
- alert("MEDIA_ERR_NETWORK = 2 Download is stopped due to network error ");\r
- break;\r
+ alert('MEDIA_ERR_NETWORK = 2 Download is stopped due to network error ');\r
+ break;\r
case 3:\r
- alert("MEDIA_ERR_DECODE = 3 Media data decoding failure ");\r
- break;\r
+ alert('MEDIA_ERR_DECODE = 3 Media data decoding failure ');\r
+ break;\r
case 4:\r
- alert("MEDIA_ERR_SRC_NOT_SUPPORTED = 4 Format not supported");\r
- break\r
- }\r
- }, false);\r
+ alert('MEDIA_ERR_SRC_NOT_SUPPORTED = 4 Format not supported');\r
+ break\r
+ }\r
+ }, false);\r
</script>\r
</pre>\r
</li>\r
<li><p>Load a source audio file using XMLHttpRequest. Set the <code>responseType</code> to <code>arraybuffer</code> to receive binary response:</p>\r
<pre class="prettyprint">\r
<script>\r
- var url = "sample.mp3";\r
- var request = new XMLHttpRequest();\r
- request.open("GET", url, true);\r
- request.responseType = "arraybuffer";\r
+ var url = 'sample.mp3';\r
+ var request = new XMLHttpRequest();\r
+ request.open('GET', url, true);\r
+ request.responseType = 'arraybuffer';\r
\r
- request.send();\r
+ request.send();\r
</script>\r
</pre>\r
</li>\r
<li><p>The <code>onload</code> event is triggered. Retrieve the decoded audio data:</p>\r
<pre class="prettyprint">\r
<script>\r
- /* Asynchronous event handling */\r
- request.onload = function()\r
- {\r
- /* Put the modulated audio data into the audioData variable */\r
- var audioData = request.response;\r
- };\r
+ /* Asynchronous event handling */\r
+ request.onload = function() {\r
+ /* Put the modulated audio data into the audioData variable */\r
+ var audioData = request.response;\r
+ };\r
</script>\r
</pre>\r
<p>This data is used in the <a href="https://www.w3.org/TR/2015/WD-webaudio-20151208/#AudioBuffer" target="_blank">AudioBuffer</a>.</p>\r
<p>Create a WebKit-based <code>AudioContext</code> instance, which plays and manages the audio data:</p>\r
<pre class="prettyprint">\r
<script>\r
- var context;\r
- context = new webkitAudioContext();\r
+ var context;\r
+ context = new webkitAudioContext();\r
</script>\r
</pre>\r
<p>AudioContext instance supports various sound inputs, and it is possible to create an audio graph. You can create 1 or more sound sources to manage sound and connect to the sound destination.</p>\r
<li><p>Create the audio buffer using the <code>createBuffer()</code> method:</p>\r
<pre class="prettyprint">\r
<script>\r
- var context = new webkitAudioContext();\r
- function setSound()\r
- {\r
- var url = "sample_audio.mp3";\r
- var request = new XMLHttpRequest();\r
- request.open("GET", url, true);\r
- request.responseType = "arraybuffer";\r
-\r
- /* Asynchronous callback */\r
- request.onload = function()\r
- {\r
- /* Create the sound source */\r
- soundSource = context.createBufferSource();\r
- soundBuffer = context.createBuffer(request.response, true);\r
- soundSource.buffer = soundBuffer;\r
- };\r
- request.send();\r
- }\r
+ var context = new webkitAudioContext();\r
+ function setSound() {\r
+ var url = 'sample_audio.mp3';\r
+ var request = new XMLHttpRequest();\r
+ request.open('GET', url, true);\r
+ request.responseType = 'arraybuffer';\r
+\r
+ /* Asynchronous callback */\r
+ request.onload = function() {\r
+ /* Create the sound source */\r
+ soundSource = context.createBufferSource();\r
+ soundBuffer = context.createBuffer(request.response, true);\r
+ soundSource.buffer = soundBuffer;\r
+ };\r
+ request.send();\r
+ }\r
</script>\r
</pre>\r
<p>The <code>createBuffer()</code> method is used as a synchronous decoding method to create an audio buffer of the required size.</p>\r
<li><p>Create the audio buffer using the <code>decodeAudioData()</code> method:</p>\r
<pre class="prettyprint">\r
<script>\r
- var context = new webkitAudioContext();\r
- function setSound()\r
- {\r
- var url = "sample_audio.mp3";\r
- var request = new XMLHttpRequest();\r
- request.open("GET", url, true);\r
- request.responseType = "arraybuffer";\r
-\r
- /* Asynchronous callback */\r
- request.onload = function()\r
- {\r
- /* Create the sound source */\r
- soundSource = context.createBufferSource();\r
-\r
- /*\r
- Import a callback that provides PCM audio data\r
- decoded as an audio buffer\r
- */\r
- context.decodeAudioData(request.response, function(buffer)\r
- {\r
- bufferData = buffer;\r
- soundSource.buffer = bufferData;\r
+ var context = new webkitAudioContext();\r
+ function setSound() {\r
+ var url = 'sample_audio.mp3';\r
+ var request = new XMLHttpRequest();\r
+ request.open('GET', url, true);\r
+ request.responseType = 'arraybuffer';\r
+\r
+ /* Asynchronous callback */\r
+ request.onload = function() {\r
+ /* Create the sound source */\r
+ soundSource = context.createBufferSource();\r
+\r
+ /*\r
+ Import a callback that provides PCM audio data\r
+ decoded as an audio buffer\r
+ */\r
+ context.decodeAudioData(request.response, function(buffer) {\r
+ bufferData = buffer;\r
+ soundSource.buffer = bufferData;\r
}, this.onDecodeError);\r
- };\r
- request.send();\r
- }\r
+ };\r
+ request.send();\r
+ }\r
</script>\r
</pre>\r
<p>The <code>decodeAudioData()</code> method asynchronously decodes audio data from the <a href="../communication/xmlhttprequest_w.htm">XMLHttpRequest</a> array buffer. Since this method does not prevent the execution of JavaScript threads, consider using it instead of the <code>createBuffer()</code> method.</p>\r
<li><p>Create a WebKit-based <a href="https://www.w3.org/TR/2015/WD-webaudio-20151208/#AudioContext" target="_blank">AudioContext</a> instance:</p>\r
<pre class="prettyprint">\r
<script>\r
- var context;\r
- context = new webkitAudioContext();\r
+ var context;\r
+ context = new webkitAudioContext();\r
</pre>\r
</li>\r
<li><p>Route a single audio source directly to the output:</p>\r
<pre class="prettyprint">\r
- var soundSource;\r
+ var soundSource;\r
\r
- function startSound(audioData)\r
- {\r
- soundSource = context.createBufferSource();\r
- soundSource.buffer = soundBuffer;\r
+ function startSound(audioData) {\r
+ soundSource = context.createBufferSource();\r
+ soundSource.buffer = soundBuffer;\r
\r
- /* Direct routing to speaker */\r
- soundSource.connect(volumeNode);\r
- volumeNode.connect(context.destination);\r
- }\r
+ /* Direct routing to speaker */\r
+ soundSource.connect(volumeNode);\r
+ volumeNode.connect(context.destination);\r
+ }\r
</script>\r
</pre>\r
<p>All routing occurs within an <code>AudioContext</code> containing a single <a href="https://www.w3.org/TR/2015/WD-webaudio-20151208/#AudioDestinationNode" target="_blank">AudioDestinationNode</a>.</p>\r
<li><p>Create an <code>AudioContext</code> instance:</p>\r
<pre class="prettyprint">\r
<script>\r
- var context;\r
- context = new webkitAudioContext();\r
+ var context;\r
+ context = new webkitAudioContext();\r
</pre>\r
</li>\r
<li><p>Create the sound source:</p>\r
<pre class="prettyprint lang-js">\r
- function startSound(audioData)\r
- {\r
- soundSource = context.createBufferSource();\r
- soundBuffer = context.createBuffer(audioData, true);\r
- soundSource.buffer = soundBuffer;\r
+ function startSound(audioData) {\r
+ soundSource = context.createBufferSource();\r
+ soundBuffer = context.createBuffer(audioData, true);\r
+ soundSource.buffer = soundBuffer;\r
\r
- volumeNode = context.createGainNode();\r
- filter = context.createBiquadFilter();\r
- audioAnalyser = context.createAnalyser();\r
+ volumeNode = context.createGainNode();\r
+ filter = context.createBiquadFilter();\r
+ audioAnalyser = context.createAnalyser();\r
\r
</pre>\r
</li>\r
<li><p>Create the node to manage the output, for example, adjusting volume and applying filters:</p>\r
<pre class="prettyprint lang-js">\r
- soundSource.connect(volumeNode);\r
- volumeNode.connect(filter);\r
- filter.connect(audioAnalyser);\r
- audioAnalyser.connect(context.destination);\r
- }\r
+ soundSource.connect(volumeNode);\r
+ volumeNode.connect(filter);\r
+ filter.connect(audioAnalyser);\r
+ audioAnalyser.connect(context.destination);\r
+ }\r
</script>\r
</pre>\r
\r
<li><p>Create a WebKit-based <a href="https://www.w3.org/TR/2015/WD-webaudio-20151208/#AudioContext" target="_blank">AudioContext</a> instance:</p>\r
<pre class="prettyprint">\r
<script>\r
- var context;\r
- context = new webkitAudioContext();\r
+ var context;\r
+ context = new webkitAudioContext();\r
</pre>\r
</li>\r
<li><p>Play audio through direct sound destination using the <code>noteOn()</code> method:</p>\r
<pre class="prettyprint">\r
- function playSound()\r
- {\r
- var soundSource = context.createBufferSource();\r
- soundSource.buffer = soundBuffer;\r
- soundSource.connect(context.destination);\r
- soundSource.noteOn(context.currentTime);\r
- }\r
+ function playSound() {\r
+ var soundSource = context.createBufferSource();\r
+ soundSource.buffer = soundBuffer;\r
+ soundSource.connect(context.destination);\r
+ soundSource.noteOn(context.currentTime);\r
+ }\r
</script>\r
</pre>\r
<p>Use time as parameter of the <code>noteOn()</code> method. Time is based on the <code>currentTime</code> property of the <code>AudioContext</code>, and expressed in seconds. If you set the value as '0', the playback begins immediately.</p>\r
<p>The following example shows how using a cache improves performance.</p>\r
<pre class="prettyprint">\r
/* Code#1 */\r
-$("#search_dom").on('click', function() {});\r
-$("#search_dom").removeClass('blue');\r
-$("#search_dom").addClass('red');\r
+$('#search_dom').on('click', function() {});\r
+$('#search_dom').removeClass('blue');\r
+$('#search_dom').addClass('red');\r
</pre>\r
<pre class="prettyprint">\r
/* Code#2 */\r
-var $search_button = $("#search_dom");\r
+var $search_button = $('#search_dom');\r
$search_button.on('click', function() {});\r
$search_button.removeClass('blue');\r
$search_button.addClass('red');\r
<p>When a DOM element is changed, chaining ties similar object references into groups for execution. jQuery objects need not be repeatedly created as existing ones can be reused. The following example shows how chaining improves performance.</p>\r
<pre class="prettyprint">\r
/* Code#1 */\r
-$("#contents").addClass('active');\r
-$("#contents").css('border', '1px solid');\r
-$("#contents").('background-color', 'red');\r
+$('#contents').addClass('active');\r
+$('#contents').css('border', '1px solid');\r
+$('#contents').('background-color', 'red');\r
</pre>\r
<pre class="prettyprint">\r
/* Code#2 */\r
-$("#contents").addClass('active').css('border', '1px solid').('background-color', 'red');\r
+$('#contents').addClass('active').css('border', '1px solid').('background-color', 'red');\r
</pre>\r
<p align="center"><strong>Figure: jQuery performance improvement result (in mobile applications only)</strong></p>\r
<p align="center"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_chaining.png" /></p>\r
var $contents_list = $('#contents_list'),\r
array_list = [...];\r
\r
-for (var i = 0, len = array_list.length; i < len; i++)\r
-{\r
- $contents_list.append('<li>' + array_list[i] + '</li>');\r
+for (var i = 0, len = array_list.length; i < len; i++) {\r
+ $contents_list.append('<li>' + array_list[i] + '</li>');\r
}\r
</pre>\r
<pre class="prettyprint">\r
array_list = [...],\r
list = '';\r
\r
-for (var i = 0, len = array_list.length; i < len; i++)\r
-{\r
- list += '<li>' + array_list[i] + '</li>';\r
+for (var i = 0, len = array_list.length; i < len; i++) {\r
+ list += '<li>' + array_list[i] + '</li>';\r
}\r
$contents_list.append(list);\r
</pre>\r
var array_list = [0,1,2,3,4,5,6,7,8,9],\r
new_array_list = [];\r
\r
-for (var i = 0, len = array_list.length; i < len; i++)\r
-{\r
- new_array_list.push(array_list[i]);\r
- console.log(array_list[i]);\r
+for (var i = 0, len = array_list.length; i < len; i++) {\r
+ new_array_list.push(array_list[i]);\r
+ console.log(array_list[i]);\r
}\r
</pre>\r
<pre class="prettyprint">\r
var array_list = [0,1,2,3,4,5,6,7,8,9],\r
new_array_list = [];\r
\r
-for (var i = 0, len = array_list.length; i < len; i++)\r
-{\r
- new_array_list.push(array_list[i])\r
+for (var i = 0, len = array_list.length; i < len; i++) {\r
+ new_array_list.push(array_list[i])\r
}\r
</pre>\r
<p align="center"><strong>Figure: JavaScript performance improvement result (in mobile applications only)</strong></p>\r
/* Code#1 */\r
var array_list = [0,1,2,3,4,5,6,7,8,9],\r
new_array_list = [];\r
-for (var idx in array_list)\r
-{\r
- new_array_list.push(array_list[idx]);\r
+for (var idx in array_list) {\r
+ new_array_list.push(array_list[idx]);\r
}\r
</pre>\r
\r
/* Code#2 */\r
var array_list = [0,1,2,3,4,5,6,7,8,9],\r
new_array_list = [];\r
-for (var i = 0, len = array_list.length; i < len; i++)\r
-{\r
- new_array_list.push(array_list[i]);\r
+for (var i = 0, len = array_list.length; i < len; i++) {\r
+ new_array_list.push(array_list[i]);\r
}\r
</pre>\r
<p align="center"><strong>Figure: JavaScript performance improvement result (in mobile applications only)</strong></p>\r
var array_list = [],\r
new_array_list = [],\r
i = 0;\r
-for (i = 0; i < 100; i++)\r
-{\r
- array_list.push(i);\r
+for (i = 0; i < 100; i++) {\r
+ array_list.push(i);\r
}\r
-for (i = 0; i < array_list.length; i++)\r
-{\r
- new_array_list.push(array_list[i]);\r
+for (i = 0; i < array_list.length; i++) {\r
+ new_array_list.push(array_list[i]);\r
}\r
</pre>\r
<pre class="prettyprint">\r
new_array_list = [],\r
i = 0,\r
arrayLen = 0;\r
-for (i = 0; i < 100; i++)\r
-{\r
- array_list.push(i);\r
+for (i = 0; i < 100; i++) {\r
+ array_list.push(i);\r
}\r
-for (i = 0, arrayLen = array_list.length; i < arrayLen; i++)\r
-{\r
- new_array_list.push(array_list[i]);\r
+for (i = 0, arrayLen = array_list.length; i < arrayLen; i++) {\r
+ new_array_list.push(array_list[i]);\r
}\r
</pre>\r
<p align="center"><strong>Figure: JavaScript performance improvement result (in mobile applications only)</strong></p>\r
<p> Using literal expressions instead of newly created ones improves the JavaScript performance. Literal expressions are optimized for modern browser engines. They reduce the amount of interpretation time of the JavaScript interpreter. The following example shows how using literal expressions improves performance.</p>\r
<pre class="prettyprint">\r
/* Code#1 */\r
-var str = "";\r
-for (var i = 0; i < 100; i++)\r
-{\r
- str = new String("abcd");\r
+var str = '';\r
+for (var i = 0; i < 100; i++) {\r
+ str = new String('abcd');\r
}\r
</pre>\r
<pre class="prettyprint">\r
/* Code#2 */\r
-var str = "";\r
-for (var i = 0; i < 100; i++)\r
-{\r
- str = "abcd";\r
+var str = '';\r
+for (var i = 0; i < 100; i++) {\r
+ str = 'abcd';\r
}\r
</pre>\r
\r
var id = document.getElementById('contents_list').getAttribute('id');\r
var name = document.getElementById('contents_list').getAttribute('name');\r
var style = document.getElementById('contents_list').getAttribute('style');\r
-for (var i = 0; i < 100; i++)\r
-{\r
- id = document.getElementById('contents_list').getAttribute('id');\r
- name = document.getElementById('contents_list').getAttribute('name');\r
- style = document.getElementById('contents_list').getAttribute('style');\r
+for (var i = 0; i < 100; i++) {\r
+ id = document.getElementById('contents_list').getAttribute('id');\r
+ name = document.getElementById('contents_list').getAttribute('name');\r
+ style = document.getElementById('contents_list').getAttribute('style');\r
}\r
</pre>\r
<pre class="prettyprint">\r
var id = contents_list.getAttribute('id');\r
var name = contents_list.getAttribute('name');\r
var style = contents_list.getAttribute('style');\r
-for (var i = 0; i < 100; i++)\r
-{\r
- id = contents_list.getAttribute('id');\r
- name = contents_list.getAttribute('name');\r
- style = contents_list.getAttribute('style');\r
+for (var i = 0; i < 100; i++) {\r
+ id = contents_list.getAttribute('id');\r
+ name = contents_list.getAttribute('name');\r
+ style = contents_list.getAttribute('style');\r
}\r
</pre>\r
<p align="center"><strong>Figure: JavaScript performance improvement result (in mobile applications only)</strong></p>\r
<li><p>Retrieve the page visibility status with the <code>hidden</code> property: </p>\r
<pre class="prettyprint lang-js">\r
<script>\r
- var logText = document.querySelector('.log');\r
+ var logText = document.querySelector('.log');\r
\r
- function pageVisibilityHandler()\r
- {\r
- logText.innerHTML +=\r
- '<p>Hidden: <span>' + document.webkitHidden; + '</span></p>';\r
+ function pageVisibilityHandler() {\r
+ logText.innerHTML += '<p>Hidden: <span>' + document.webkitHidden; +\r
+ '</span></p>';\r
</pre>\r
<p>The <code>hidden</code> property returns <code>true</code> if the document in the top-level browsing context (root window in the browser's viewport) [HTML5] is not visible at all. If the document is at least partially visible, the property returns <code>false</code>.</p>\r
</li>\r
<li><p>Retrieve the page visibility status with the <code>visibilityState</code> property:</p>\r
<pre class="prettyprint lang-js">\r
- logText.innerHTML +=\r
- '<p>VisibilityState: <span>' + document.webkitVisibilityState;\r
- + '</span></p>';\r
- }\r
+ logText.innerHTML += '<p>VisibilityState: <span>' +\r
+ document.webkitVisibilityState; + '</span></p>';\r
+ }\r
</script>\r
</pre>\r
<p>The <code>visibilityState</code> property returns one of the following DOMString types:</p>\r
<li><p>Add event listeners to play and pause the video based on the button clicks:</p>\r
<pre class="prettyprint">\r
<script>\r
- var play_button = document.getElementById("v-play");\r
- var pause_button = document.getElementById("v-pause");\r
- var video = document.getElementById("video");\r
-\r
- play_button.addEventListener("click", function()\r
- {\r
- video.play(); /* Play video */\r
- }, false);\r
-\r
- pause_button.addEventListener("click", function()\r
- {\r
- video.pause(); /* Pause video */\r
- }, false);\r
-\r
- /* Enable and disable buttons based on the playback status */\r
- video.addEventListener("play", function()\r
- {\r
- play_button.disabled = true; /* Disable play button */\r
- pause_button.disabled = false; /* Enable pause button */\r
- }, false);\r
-\r
- video.addEventListener("pause", function()\r
- {\r
- play_button.disabled = false; /* Enable play button */\r
- pause_button.disabled = true; /* Disable pause button */\r
- }, false);\r
+ var play_button = document.getElementById('v-play');\r
+ var pause_button = document.getElementById('v-pause');\r
+ var video = document.getElementById('video');\r
+\r
+ play_button.addEventListener('click', function() {\r
+ video.play(); /* Play video */\r
+ }, false);\r
+\r
+ pause_button.addEventListener('click', function() {\r
+ video.pause(); /* Pause video */\r
+ }, false);\r
+\r
+ /* Enable and disable buttons based on the playback status */\r
+ video.addEventListener('play', function() {\r
+ play_button.disabled = true; /* Disable play button */\r
+ pause_button.disabled = false; /* Enable pause button */\r
+ }, false);\r
+\r
+ video.addEventListener('pause', function() {\r
+ play_button.disabled = false; /* Enable play button */\r
+ pause_button.disabled = true; /* Disable pause button */\r
+ }, false);\r
</script>\r
</pre>\r
</li>\r
<li><p>Add an event listener to track the page visibility status changes. When the status changes and the <code>visibilityChange</code> event is triggered, use the <code>hidden</code> property to check whether the page is hidden or visible, and to play or pause the video accordingly.</p>\r
<pre class="prettyprint">\r
<script>\r
- /* Add visibility status event listener */\r
- document.addEventListener("webkitvisibilitychange", pageVisibilityHandler, false);\r
-\r
- /* When the visibility status changes */\r
- function pageVisibilityHandler()\r
- {\r
- /* Check whether the page is hidden */\r
- if (!(document.webkitHidden))\r
- {\r
- video.play(); /* Play video */\r
- }\r
- else\r
- {\r
- video.pause(); /* Pause video */\r
- }\r
- }\r
+ /* Add visibility status event listener */\r
+ document.addEventListener('webkitvisibilitychange', pageVisibilityHandler, false);\r
+\r
+ /* When the visibility status changes */\r
+ function pageVisibilityHandler() {\r
+ /* Check whether the page is hidden */\r
+ if (!(document.webkitHidden)) {\r
+ video.play(); /* Play video */\r
+ } else {\r
+ video.pause(); /* Pause video */\r
+ }\r
+ }\r
</script>\r
</pre>\r
</li>\r
<strong>Note</strong>\r
In mobile applications, when using the emulator, you must include the <code>webkit</code> prefix in method names, such as <code>window.performance.webkitNow()</code>. However, when using a device, the prefix must not be used. In addition, when using the emulator, methods assigned to variables must be formatted as follows:\r
<pre class="prettyprint">\r
-window.performance.windowNow =\r
- window.performance.now || window.performance.webkitNow || Date.now;\r
+window.performance.windowNow = window.performance.now || window.performance.webkitNow || Date.now;\r
window.performance.windowNow();\r
</pre>\r
\r
<p>In wearable applications, when you are using the emulator and want to support backward compatibility, methods assigned to variables must be formatted as follows:</p>\r
<pre class="prettyprint">\r
-window.performance.windowNow =\r
- window.performance.now || window.performance.webkitNow || Date.now;\r
+window.performance.windowNow = window.performance.now || window.performance.webkitNow || Date.now;\r
window.performance.windowNow();\r
</pre>\r
</div>\r
<ol type="a">\r
<li><p>Define properties for a flexible vertical layout for the content area, and the <code>nav</code> container:</p>\r
<pre class="prettyprint">\r
-body\r
-{\r
+body {\r
display: -webkit-flex;\r
-webkit-flex-direction: column;\r
}\r
\r
-nav\r
-{\r
+nav {\r
display: -webkit-flex;\r
-webkit-flex-direction: row;\r
-webkit-align-content: stretch;\r
</pre></li>\r
<li><p>To enable the rotation of the background, define the <code>pinwheel</code> element in relation to its children, and set its size to change according to the display size. Define the <code>rotateBackground</code> element to have a fixed size depending on the display size:</p>\r
<pre class="prettyprint">\r
-#pinwheel\r
-{\r
+#pinwheel {\r
width: 90vw;\r
height: 80vh;\r
position: relative;\r
text-align: center;\r
}\r
\r
-#rotateBackground\r
-{\r
+#rotateBackground {\r
background: url(images/Tizen-Pinwheel-On-Dark-RGB.png) no-repeat center;\r
background-size: 90vw;\r
content: "";\r
<li><p>Declare the variables used in the application:</p>\r
<pre class="prettyprint lang-js">\r
<script type="text/javascript">\r
- var leftDiv, rightDiv, playstopDiv,\r
- handlerRequest, rotateBackgroundDiv, rotation = 0, speed = -1;\r
+ var leftDiv, rightDiv, playstopDiv,\r
+ handlerRequest, rotateBackgroundDiv, rotation = 0, speed = -1;\r
</script>\r
</pre>\r
<p>The <code>leftDiv</code>, <code>rightDiv</code>, <code>playstopDiv</code>, and <code>rotateBackgroundDiv</code> variables contain DOM elements from the application UI. The <code>handlerRequest</code> variable handles the <code>requestAnimationFrame()</code> requests. The <code>rotation</code> variable is the current angle of the pinwheel, and the <code>speed</code> variable is the rotation speed in degrees per frame.</p>\r
</li>\r
<li><p>Create a DOM object for the <strong>Play</strong> or <strong>Stop</strong> button and define button events:</p>\r
<pre class="prettyprint">\r
-playstopDiv = document.getElementById("playstopBtn");\r
-\r
-playstopDiv.onclick = function()\r
-{\r
- if (handlerRequest)\r
- {\r
- window.webkitCancelRequestAnimationFrame(handlerRequest);\r
- handlerRequest = 0;\r
- playstopDiv.innerHTML = "Play";\r
- }\r
- else\r
- {\r
- handlerRequest = window.webkitRequestAnimationFrame(nextFrame);\r
- playstopDiv.innerHTML = "Stop";\r
- }\r
-}\r
+playstopDiv = document.getElementById('playstopBtn');\r
+\r
+playstopDiv.onclick = function() {\r
+ if (handlerRequest) {\r
+ window.webkitCancelRequestAnimationFrame(handlerRequest);\r
+ handlerRequest = 0;\r
+ playstopDiv.innerHTML = 'Play';\r
+ } else {\r
+ handlerRequest = window.webkitRequestAnimationFrame(nextFrame);\r
+ playstopDiv.innerHTML = 'Stop';\r
+ }\r
+};\r
</pre>\r
<p>When the <code>handlerRequest</code> variable returns <code>true</code>, the animation is played. Clicking the button calls the <code>cancelRequestAnimationFrame()</code> method to stop the animation. The <code>handlerRequest</code> is reset to value 0, and the button text changes from <strong>Stop</strong> to <strong>Play</strong>.</p>\r
<p>If the <code>handlerRequest</code> value is undefined or 0, the animation is not played. Clicking the button calls the <code>requestAnimationFrame()</code> method to play the animation, and the button text changes from <strong>Play</strong> to <strong>Stop</strong>. The parameter of the <code>requestAnimationFrame()</code> method defines the callback.</p>\r
</li>\r
<li><p>In the callback of the <code>requestAnimationFrame()</code> method, to avoid rotation value overflow, define the rotation value to be decreased when the absolute value is greater than the round angle (360 degrees). Set the background rotation using the <code>rotate()</code> method, and use the <code>requestAnimationFrame()</code> method to update the next frame of the animation:</p>\r
<pre class="prettyprint">\r
-function nextFrame(arg)\r
-{\r
- rotation += speed;\r
-\r
- if (rotation > 360)\r
- {\r
- rotation -= 360;\r
- }\r
- else if (rotation < -360)\r
- {\r
- rotation += 360;\r
- }\r
- rotateBackgroundDiv.style.webkitTransform = "rotate(" + rotation + "deg)";\r
- handlerRequest = window.webkitRequestAnimationFrame(nextFrame);\r
+function nextFrame(arg) {\r
+ rotation += speed;\r
+\r
+ if (rotation > 360) {\r
+ rotation -= 360;\r
+ } else if (rotation < -360) {\r
+ rotation += 360;\r
+ }\r
+ rotateBackgroundDiv.style.webkitTransform = 'rotate(' + rotation + 'deg)';\r
+ handlerRequest = window.webkitRequestAnimationFrame(nextFrame);\r
}\r
</pre>\r
<p>The callback method is automatically called before the screen is updated. To keep the animation going, the <code>requestAnimationFrame()</code> method is called at the end of the callback method. Because the callback is synchronized with screen updates, when application is in the background and not visible on the screen, the updates are not called and the animation stops.</p>\r
</li>\r
<li><p>Set events for the <strong>Left</strong> and <strong>Right</strong> buttons. Tapping the buttons increases or decreases the animation speed.</p>\r
<pre class="prettyprint">\r
-leftDiv = document.getElementById("leftBtn");\r
-leftDiv.onclick = function()\r
-{\r
- speed -= 0.5;\r
-}\r
-rightDiv = document.getElementById("rightBtn");\r
-rightDiv.onclick = function()\r
-{\r
- speed += 0.5;\r
-}\r
+leftDiv = document.getElementById('leftBtn');\r
+leftDiv.onclick = function() {\r
+ speed -= 0.5;\r
+};\r
+rightDiv = document.getElementById('rightBtn');\r
+rightDiv.onclick = function() {\r
+ speed += 0.5;\r
+};\r
handlerRequest = window.webkitRequestAnimationFrame(nextFrame);\r
</pre>\r
</li>\r
<li><p>Create JavaScript code for a simple Boolean operation:</p>\r
<pre class="prettyprint">\r
var n = 1;\r
-index: while (true)\r
-{\r
- n += 1;\r
- for (var i = 2; i <= Math.sqrt(n); i += 1)\r
- if (n % i == 0) continue index;\r
- postMessage(n);\r
+index: while (true) {\r
+ n += 1;\r
+ for (var i = 2; i <= Math.sqrt(n); i += 1) {\r
+ if (n % i == 0) continue index;\r
+ }\r
+ postMessage(n);\r
}\r
</pre>\r
<p>This JavaScript operation delivers the calculated value of the <code>Math.sqrt(n)</code> method to the <code>postMessage()</code> method. It cannot be used for continuous posting of the Boolean operation.</p>\r
</pre>\r
<pre class="prettyprint lang-js">\r
<script>\r
- var worker = new Worker("worker3.js");\r
-\r
- function workerStart()\r
- {\r
- worker.onmessage = function(e)\r
- {\r
- document.querySelector("output").textContent = e.data;\r
- };\r
- }\r
+ var worker = new Worker('worker3.js');\r
+\r
+ function workerStart() {\r
+ worker.onmessage = function(e) {\r
+ document.querySelector('output).textContent = e.data;\r
+ };\r
+ }\r
</script>\r
</pre>\r
<p>When the <strong>Start</strong> button is clicked, message data is received from the worker and displayed in the <code><output></code> element. When the <strong>Stop</strong> button is clicked, the worker is terminated.</p>\r
<ul>\r
<li><p>If an error occurs when the worker is being executed, the <code>onerror()</code> event is triggered. It takes <code>filename</code>, <code>lineno</code>, and <code>message</code> attributes, and displays an error message:</p>\r
<pre class="prettyprint">\r
-worker.onerror = function(e)\r
-{\r
- document.querySelectorAll("output")[1].textContent =\r
- ['filename: ', e.filename, ' lineno: ', e.lineno, ' error: ', e.message]\r
- .join(' ');\r
+worker.onerror = function(e) {\r
+ document.querySelectorAll('output')[1].textContent = ['filename: ', e.filename, ' lineno: ', e.lineno, ' error: ', e.message].join(' ');\r
};\r
</pre>\r
</li>\r
<li><p>The <code>addEventListener</code> can be used instead of the <code>onerror</code> event to detect errors and display an error message:</p>\r
<pre class="prettyprint">\r
-function errorMessage(e)\r
-{\r
- document.querySelectorAll("output")[1].textContent =\r
- ['filename: ', e.filename, ' lineno: ', e.lineno, ' error: ', e.message]\r
- .join(' ');\r
+function errorMessage(e) {\r
+ document.querySelectorAll('output')[1].textContent = ['filename: ', e.filename, ' lineno: ', e.lineno, ' error: ', e.message].join(' ');\r
}\r
\r
worker.addEventListener('error', errorMessage, false);\r
<p>Use the <code>postMessage()</code> method to send a "Hello" message to a Web worker:</p>\r
<pre class="prettyprint">\r
var worker = new Worker('worker1.js');\r
-worker.postMessage("Hello");\r
+worker.postMessage('Hello');\r
</pre>\r
</li>\r
<li>\r
<p>Use the JSON format to send the message:</p>\r
<pre class="prettyprint">\r
var worker = new Worker('worker2.js');\r
-worker.postMessage(\r
-{\r
- a: "Hello", b: "Tizen"\r
+worker.postMessage({\r
+ a: 'Hello', b: 'Tizen'\r
});\r
</pre>\r
</li>\r
<ul>\r
<li><p>Use the <code>onMessage</code> event handler to respond to receiving a message:</p>\r
<pre class="prettyprint">\r
-worker.onmessage = function(e)\r
-{\r
- alert(e.data);\r
+worker.onmessage = function(e) {\r
+ alert(e.data);\r
};\r
</pre>\r
</li>\r
<li><p>Use the <code>addEventListener()</code> method to listen to the event of receiving a message:</p>\r
<pre class="prettyprint">\r
-worker.addEventListener("message", function(e)\r
- {\r
- alert(e.data);\r
- }, false);\r
+worker.addEventListener('message', function(e) {\r
+ alert(e.data);\r
+}, false);\r
</pre>\r
</li>\r
</ul>\r
<ul>\r
<li><p>Use <code>worker1.js</code>:</p>\r
<pre class="prettyprint">\r
-self.onmessage = function(e)\r
-{\r
- self.postMessage("You say: " + e.data);\r
+self.onmessage = function(e) {\r
+ self.postMessage('You say: ' + e.data);\r
};\r
</pre>\r
</li>\r
<li><p>Use <code>worker2.js</code>:</p>\r
<pre class="prettyprint">\r
-self.onmessage = function(e)\r
-{\r
- var b = e.data.b;\r
- if (b === "Tizen")\r
- {\r
- self.postMessage(e.data.b + " say: " + e.data.a);\r
- }\r
- else\r
- {\r
- self.postMessage("You say: " + e.data.a);\r
- }\r
+self.onmessage = function(e) {\r
+ var b = e.data.b;\r
+ if (b === 'Tizen') {\r
+ self.postMessage(e.data.b + ' say: ' + e.data.a);\r
+ } else {\r
+ self.postMessage('You say: ' + e.data.a);\r
+ }\r
};\r
</pre>\r
</li>\r
<p align="center"><img alt="Color filter application using UI thread (in mobile applications only)" src="../../../images/color_filter_app_ui_thread.png" /></p>\r
\r
<pre class="prettyprint">\r
-function colorFilterStart()\r
-{\r
- var picture = document.getElementById('picture');\r
- var canvas = document.querySelector('canvas');\r
- canvas.width = document.width;\r
- canvas.height = picture.clientHeight;\r
- var tempContext = canvas.getContext("2d");\r
- tempContext.drawImage(picture, 0, 0, canvas.width, canvas.height);\r
- var pixels = canvas.width * canvas.height * 4;\r
- var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);\r
- var binaryData = canvasData.data;\r
- var timeStart = new Date();\r
-\r
- colorFilter(binaryData, pixels);\r
- tempContext.putImageData(canvasData, 0, 0);\r
- var timeDiffer = new Date() - timeStart;\r
- message.innerHTML = timeDiffer + " ms";\r
-};\r
+function colorFilterStart() {\r
+ var picture = document.getElementById('picture');\r
+ var canvas = document.querySelector('canvas');\r
+ canvas.width = document.width;\r
+ canvas.height = picture.clientHeight;\r
+ var tempContext = canvas.getContext('2d');\r
+ tempContext.drawImage(picture, 0, 0, canvas.width, canvas.height);\r
+ var pixels = canvas.width * canvas.height * 4;\r
+ var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);\r
+ var binaryData = canvasData.data;\r
+ var timeStart = new Date();\r
+\r
+ colorFilter(binaryData, pixels);\r
+ tempContext.putImageData(canvasData, 0, 0);\r
+ var timeDiffer = new Date() - timeStart;\r
+ message.innerHTML = timeDiffer + ' ms';\r
+}\r
\r
-function colorChange(scale, gab, position)\r
-{\r
- return Math.max(Math.min(255, (scale * gab + (1 - scale) * position)), 0);\r
-};\r
+function colorChange(scale, gab, position) {\r
+ return Math.max(Math.min(255, (scale * gab + (1 - scale) * position)), 0);\r
+}\r
\r
-function colorFilter(binaryData, pixels)\r
-{\r
- var data = binaryData;\r
- var colorValue = parseFloat((Math.random() * 0.9 + 0.1).toFixed(3));\r
- for (var i = 0; i < pixels; i += .5)\r
- {\r
- binaryData[i] =\r
- colorChange(Math.random() * 0.5 + 0.5, (data[i] * colorValue)\r
- + (data[i + 1] * 0.769) + (data[i + 2] * 0.189), data[i]);\r
- binaryData[i + 1] =\r
- colorChange(Math.random() * 0.5 + 0.5, (data[i] * 0.349)\r
- + (data[i + 1] * 0.686) + (data[i + 2] * 0.168), data[i + 1]);\r
- binaryData[i + 2] =\r
- colorChange(Math.random() * 0.5 + 0.5, (data[i] * 0.272)\r
- + (data[i + 1] * 0.534) + (data[i + 2] * 0.131), data[i + 2]);\r
- }\r
-};\r
+function colorFilter(binaryData, pixels) {\r
+ var data = binaryData;\r
+ var colorValue = parseFloat((Math.random() * 0.9 + 0.1).toFixed(3));\r
+ for (var i = 0; i < pixels; i += .5) {\r
+ binaryData[i] = colorChange(Math.random() * 0.5 + 0.5,\r
+ (data[i] * colorValue) +\r
+ (data[i + 1] * 0.769) +\r
+ (data[i + 2] * 0.189), data[i]);\r
+ binaryData[i + 1] = colorChange(Math.random() * 0.5 + 0.5,\r
+ (data[i] * 0.349) +\r
+ (data[i + 1] * 0.686) +\r
+ (data[i + 2] * 0.168), data[i + 1]);\r
+ binaryData[i + 2] = colorChange(Math.random() * 0.5 + 0.5,\r
+ (data[i] * 0.272) +\r
+ (data[i + 1] * 0.534) +\r
+ (data[i + 2] * 0.131), data[i + 2]);\r
+ }\r
+}\r
</pre>\r
\r
<p>You can test the application performance using the <a href="../../../../../org.tizen.studio/html/web_tools/web_inspector_w.htm">Web Inspector</a>. In the <a href="../../../../../org.tizen.studio/html/web_tools/web_inspector_w.htm#time">Timeline panel</a>, the event of performing all the calculations in a single UI thread creates a delay of 16218 milliseconds.</p>\r
<p align="center"><img alt="Color filter application using multi-thread Web workers (in mobile applications only)" src="../../../images/color_filter_app_multi_thread.png" /></p>\r
\r
<pre class="prettyprint">\r
-function colorFilterStart()\r
-{\r
- var picture = document.getElementById('picture');\r
- var canvas = document.querySelector('canvas');\r
- canvas.width = document.width;\r
- canvas.height = picture.clientHeight;\r
- var tempContext = canvas.getContext("2d");\r
- var pixels = canvas.width * canvas.height * 4;\r
- tempContext.drawImage(picture, 0, 0, canvas.width, canvas.height);\r
- var workerNember = 4;\r
- var count = 0;\r
- var pixelLength = pixels / workerNember;\r
- var pixelSize = canvas.height / workerNember;\r
- var timeStart = new Date();\r
-\r
- /* Loop to use multi-thread Web workers */\r
- for (var i = 0; i < workerNember; i++)\r
- {\r
- var worker = new Worker("js/worker.js");\r
- var canvasData =\r
- tempContext.getImageData(0, pixelSize * i, canvas.width, pixelSize);\r
-\r
- /* Handle data received from the host worker */\r
- worker.onmessage = function(e)\r
- {\r
- count++;\r
- tempContext.putImageData(e.data.canvasData, 0, pixelSize * e.data.count);\r
- if (count == workerNember)\r
- {\r
- var timeDiffer = new Date() - timeStart;\r
- message.innerHTML = timeDiffer + " ms";\r
- }\r
- };\r
-\r
- /* Send data to the host worker */\r
- worker.postMessage(\r
- {\r
- "data": canvasData,\r
- "length": pixelLength,\r
- "count": i\r
- });\r
- }\r
+function colorFilterStart() {\r
+ var picture = document.getElementById('picture');\r
+ var canvas = document.querySelector('canvas');\r
+ canvas.width = document.width;\r
+ canvas.height = picture.clientHeight;\r
+ var tempContext = canvas.getContext('2d');\r
+ var pixels = canvas.width * canvas.height * 4;\r
+ tempContext.drawImage(picture, 0, 0, canvas.width, canvas.height);\r
+ var workerNember = 4;\r
+ var count = 0;\r
+ var pixelLength = pixels / workerNember;\r
+ var pixelSize = canvas.height / workerNember;\r
+ var timeStart = new Date();\r
+\r
+ /* Loop to use multi-thread Web workers */\r
+ for (var i = 0; i < workerNember; i++) {\r
+ var worker = new Worker('js/worker.js');\r
+ var canvasData = tempContext.getImageData(0, pixelSize * i, canvas.width, pixelSize);\r
+\r
+ /* Handle data received from the host worker */\r
+ worker.onmessage = function(e) {\r
+ count++;\r
+ tempContext.putImageData(e.data.canvasData, 0, pixelSize * e.data.count);\r
+ if (count == workerNember) {\r
+ var timeDiffer = new Date() - timeStart;\r
+ message.innerHTML = timeDiffer + ' ms';\r
+ }\r
+ };\r
+\r
+ /* Send data to the host worker */\r
+ worker.postMessage({\r
+ 'data': canvasData,\r
+ 'length': pixelLength,\r
+ 'count': i\r
+ });\r
+ }\r
}\r
</pre>\r
\r
<p>The <code>worker.js</code> file contains code to perform calculations for all 4 Web workers simultaneously.</p>\r
<pre class="prettyprint">\r
-onmessage = function(e)\r
-{\r
- var canvasData = e.data.data;\r
- var binaryData = canvasData.data;\r
- var pixels = e.data.length;\r
- var count = e.data.count;\r
-\r
- colorFilter(binaryData, pixels);\r
- postMessage(\r
- {\r
- "canvasData": canvasData,\r
- "count": count\r
- });\r
+onmessage = function(e) {\r
+ var canvasData = e.data.data;\r
+ var binaryData = canvasData.data;\r
+ var pixels = e.data.length;\r
+ var count = e.data.count;\r
+\r
+ colorFilter(binaryData, pixels);\r
+ postMessage({\r
+ 'canvasData': canvasData,\r
+ 'count': count\r
+ });\r
};\r
\r
-function colorChange(scale, gab, position)\r
-{\r
- return Math.max(Math.min(255, (scale * gab + (1 - scale) * position)), 0);\r
-};\r
+function colorChange(scale, gab, position) {\r
+ return Math.max(Math.min(255, (scale * gab + (1 - scale) * position)), 0);\r
+}\r
\r
-function colorFilter(binaryData, pixels)\r
-{\r
- var data = binaryData;\r
- var colorValue = parseFloat((Math.random() * 0.9 + 0.1).toFixed(3));\r
- for (var i = 0; i < pixels; i += .5)\r
- {\r
- binaryData[i] =\r
- colorChange(Math.random() * 0.5 + 0.5, (data[i] * colorValue)\r
- + (data[i + 1] * 0.769) + (data[i + 2] * 0.189), data[i]);\r
- binaryData[i + 1] =\r
- colorChange(Math.random() * 0.5 + 0.5, (data[i] * 0.349)\r
- + (data[i + 1] * 0.686) + (data[i + 2] * 0.168), data[i + 1]);\r
- binaryData[i + 2] =\r
- colorChange(Math.random() * 0.5 + 0.5, (data[i] * 0.272)\r
- + (data[i + 1] * 0.534) + (data[i + 2] * 0.131), data[i + 2]);\r
- }\r
-};\r
+function colorFilter(binaryData, pixels) {\r
+ var data = binaryData;\r
+ var colorValue = parseFloat((Math.random() * 0.9 + 0.1).toFixed(3));\r
+ for (var i = 0; i < pixels; i += .5) {\r
+ binaryData[i] = colorChange(Math.random() * 0.5 + 0.5,\r
+ (data[i] * colorValue) +\r
+ (data[i + 1] * 0.769) +\r
+ (data[i + 2] * 0.189), data[i]);\r
+ binaryData[i + 1] = colorChange(Math.random() * 0.5 + 0.5,\r
+ (data[i] * 0.349) +\r
+ (data[i + 1] * 0.686) +\r
+ (data[i + 2] * 0.168), data[i + 1]);\r
+ binaryData[i + 2] = colorChange(Math.random() * 0.5 + 0.5,\r
+ (data[i] * 0.272) +\r
+ (data[i + 1] * 0.534) +\r
+ (data[i + 2] * 0.131), data[i + 2]);\r
+ }\r
+}\r
</pre>\r
\r
<p>By using 4 Web workers in the application, the application performance improves 7 times compared to using a UI thread in the same application.</p>\r
<li>Create an <a href="../communication/xmlhttprequest_w.htm">XML HTTP request</a> on the client side, using JavaScript code that requests Ajax communication:\r
<pre class="prettyprint">\r
<script>\r
- var method = "GET";\r
- var url = "http://another-domain.com/CORS/";\r
- var xhr = new XMLHttpRequest();\r
+ var method = 'GET';\r
+ var url = 'http://another-domain.com/CORS/';\r
+ var xhr = new XMLHttpRequest();\r
\r
- xhr.open(method, url);\r
- xhr.send();\r
+ xhr.open(method, url);\r
+ xhr.send();\r
</script>\r
</pre>\r
</li>\r
<li>Create an <a href="../communication/xmlhttprequest_w.htm">XML HTTP request</a> on the client side, using JavaScript code that requests Ajax communication. In addition, define the request <code>Content-Type</code> and add a custom header.\r
<pre class="prettyprint">\r
<script>\r
- var xhr = new XMLHttpRequest();\r
- xhr.open("PUT", "http://another-domain.com/CORS/");\r
+ var xhr = new XMLHttpRequest();\r
+ xhr.open('PUT', 'http://another-domain.com/CORS/');\r
\r
- xhr.setRequestHeader("Content-Type", "application/json");\r
+ xhr.setRequestHeader('Content-Type', 'application/json');\r
\r
- xhr.setRequestHeader("Header-Custom-TizenCORS", "OK");\r
- xhr.send(data);\r
+ xhr.setRequestHeader('Header-Custom-TizenCORS', 'OK');\r
+ xhr.send(data);\r
</script>\r
</pre>\r
</li>\r
header("Access-Control-Max-Age: 86400");\r
\r
/* Options request exits before the page is completely loaded */\r
- if (strtolower($_SERVER['REQUEST_METHOD']) == 'options')\r
- {\r
+ if (strtolower($_SERVER['REQUEST_METHOD']) == 'options') {\r
exit();\r
}\r
\r
<li>Create a test cookie:\r
<pre class="prettyprint">\r
<script>\r
- SetCookie('userid', 'example@tizen.org', 7);\r
-\r
- function SetCookie(name, value, expiredays)\r
- {\r
- var today = new Date();\r
- today.setDate(today.getDate() + expiredays);\r
- document.cookie =\r
- name + "=" + escape(value) + "; path=/; expires="\r
- + today.toGMTString() + ";";\r
- }\r
+ SetCookie('userid', 'example@tizen.org', 7);\r
+\r
+ function SetCookie(name, value, expiredays) {\r
+ var today = new Date();\r
+ today.setDate(today.getDate() + expiredays);\r
+ document.cookie = name + '=' + escape(value) +\r
+ '; path=/; expires=' + today.toGMTString() + ';';\r
+ }\r
</script>\r
</pre></li>\r
\r
<li>To block cookie access, remove the <code>allow-same-origin</code> attribute from the <code>sandbox</code> attribute value:\r
<pre class="prettyprint">\r
<script>\r
- function setSandbox()\r
- {\r
- var checkbox = document.querySelector('#chkSandbox');\r
- var frame = document.querySelector('#iframe');\r
- var frameInfo = "", flag = "";\r
-\r
- if (checkbox.checked)\r
- {\r
- /* Access to cookies within the same domain is not allowed */\r
- flag = "allow-scripts';\r
- frameInfo = "<iframe src sandbox="allow-scripts"></iframe>";\r
- }\r
- else\r
- {\r
- /* Access to cookies within the same domain is allowed */\r
- flag = "allow-scripts allow-same-origin";\r
- frameInfo =\r
- "<iframe src sandbox="allow-scripts allow-same-origin"></iframe>";\r
- }\r
-\r
- frame.setAttribute("sandbox", flag);\r
- frame.setAttribute("src", "iframe_cookie_stolen.html");\r
- document.querySelector("#description").textContent = frameInfo;\r
- }\r
+ function setSandbox() {\r
+ var checkbox = document.querySelector('#chkSandbox');\r
+ var frame = document.querySelector('#iframe');\r
+ var frameInfo = '', flag = '';\r
+\r
+ if (checkbox.checked) {\r
+ /* Access to cookies within the same domain is not allowed */\r
+ flag = 'allow-scripts';\r
+ frameInfo = '<iframe src sandbox="allow-scripts"></iframe>';\r
+ } else {\r
+ /* Access to cookies within the same domain is allowed */\r
+ flag = 'allow-scripts allow-same-origin';\r
+ frameInfo = '<iframe src sandbox="allow-scripts allow-same-origin"></iframe>';\r
+ }\r
+\r
+ frame.setAttribute('sandbox', flag);\r
+ frame.setAttribute('src', 'iframe_cookie_stolen.html');\r
+ document.querySelector('#description').textContent = frameInfo;\r
+ }\r
</script>\r
</pre></li>\r
<li>Display the result:\r
<li>If the sandboxing functionality is active, a message is displayed. If the sandboxing functionality is inactive, the imported cookie is displayed:\r
<pre class="prettyprint">\r
<script>\r
- window.onload = function()\r
- {\r
- var message = document.getElementById("message");\r
- try\r
- {\r
- message.innerHTML =\r
- "<h3>stole parent window's cookie</h3> userid: " + GetCookie("userid");\r
- }\r
- catch (e)\r
- {\r
- message.innerHTML = "<h3>HTML5 Sandbox blocked access to cookies.</h3>";\r
- }\r
- }\r
-\r
- function GetCookie(Name)\r
- {\r
- var search = Name + "="\r
-\r
- if (document.cookie.length > 0)\r
- {\r
-\r
- offset = document.cookie.indexOf(search)\r
-\r
- if (offset != -1)\r
- {\r
- offset += search.length\r
- end = document.cookie.indexOf(";", offset)\r
-\r
- if (end == -1) end = document.cookie.length\r
-\r
- return unescape(document.cookie.substring(offset, end));\r
- }\r
- }\r
-\r
- return "";\r
- }\r
+ window.onload = function() {\r
+ var message = document.getElementById('message');\r
+ try {\r
+ message.innerHTML = '<h3>stole parent window\'s cookie</h3> userid: ' + GetCookie('userid');\r
+ } catch (e) {\r
+ message.innerHTML = '<h3>HTML5 Sandbox blocked access to cookies.</h3>';\r
+ }\r
+ };\r
+\r
+ function GetCookie(Name) {\r
+ var search = Name + '='\r
+\r
+ if (document.cookie.length > 0) {\r
+ offset = document.cookie.indexOf(search);\r
+\r
+ if (offset != -1) {\r
+ offset += search.length;\r
+ end = document.cookie.indexOf(';', offset);\r
+\r
+ if (end == -1)\r
+ end = document.cookie.length;\r
+\r
+ return unescape(document.cookie.substring(offset, end));\r
+ }\r
+ }\r
+\r
+ return '';\r
+ }\r
</script>\r
</pre></li>\r
</ol>\r
<li>If the <code>sandbox</code> attribute is deactivated, set the <code>allow-top-navigation</code> attribute to the <code>sandbox</code> attribute value:\r
<pre class="prettyprint">\r
<script>\r
- function setSandbox()\r
- {\r
- var checkbox = document.querySelector("#chkSandbox");\r
- var frame = document.querySelector("#iframe");\r
- var frameInfo = "", flag = "";\r
-\r
- if (checkbox.checked)\r
- {\r
- flag = "allow-scripts allow-top-navigation";\r
- frameInfo =\r
- "<iframe src sandbox="allow-scripts allow-top-navigation"></iframe>";\r
- }\r
- else\r
- {\r
- flag = "allow-scripts";\r
- frameInfo = "<iframe src sandbox="allow-scripts"></iframe>";\r
- }\r
-\r
- frame.setAttribute("sandbox", flag);\r
- frame.setAttribute("src", "iframe_page_redirection.html");\r
- document.querySelector("#description").textContent = frameInfo;\r
- }\r
+ function setSandbox() {\r
+ var checkbox = document.querySelector('#chkSandbox');\r
+ var frame = document.querySelector('#iframe');\r
+ var frameInfo = '', flag = '';\r
+\r
+ if (checkbox.checked) {\r
+ flag = 'allow-scripts allow-top-navigation';\r
+ frameInfo = '<iframe src sandbox="allow-scripts allow-top-navigation"></iframe>';\r
+ } else {\r
+ flag = 'allow-scripts';\r
+ frameInfo = '<iframe src sandbox="allow-scripts"></iframe>';\r
+ }\r
+\r
+ frame.setAttribute('sandbox', flag);\r
+ frame.setAttribute('src', 'iframe_page_redirection.html');\r
+ document.querySelector('#description').textContent = frameInfo;\r
+ }\r
</script>\r
</pre></li>\r
\r
<li>If the page redirection is blocked, a message is displayed. If not, the user is redirected to the <code>warning.html</code> page:\r
<pre class="prettyprint">\r
<script>\r
- try\r
- {\r
- location = "warning.html";\r
- }\r
- catch (e)\r
- {\r
- alert("HTML5 Sandbox prevented top level navigation.");\r
- }\r
+ try {\r
+ location = 'warning.html';\r
+ } catch (e) {\r
+ alert('HTML5 Sandbox prevented top level navigation.');\r
+ }\r
</script>\r
</pre></li>\r
</ol>\r
<li>If the <code>sandbox</code> attribute is activated, remove the <code>allow-forms</code> attribute from the <code>sandbox</code> attribute value:\r
<pre class="prettyprint">\r
<script>\r
- function setSandbox()\r
- {\r
- var checkbox = document.querySelector('#chkSandbox');\r
- var frame = document.querySelector('#iframe');\r
- var frameInfo = "", flag = "";\r
-\r
- if (checkbox.checked)\r
- {\r
- flag = "allow-scripts allow-same-origin";\r
- frameInfo =\r
- "<iframe src sandbox="allow-scripts allow-same-origin"></iframe>";\r
- }\r
- else\r
- {\r
- flag = "allow-scripts allow-same-origin allow-forms";\r
- frameInfo =\r
- "<iframe src sandbox='allow-scripts allow-same-origin allow-forms'></iframe>";\r
- }\r
-\r
- frame.setAttribute("sandbox", flag);\r
- frame.setAttribute("src", "iframe_form_submission.html");\r
- document.querySelector("#description").textContent = frameInfo;\r
- }\r
+ function setSandbox() {\r
+ var checkbox = document.querySelector('#chkSandbox');\r
+ var frame = document.querySelector('#iframe');\r
+ var frameInfo = '', flag = '';\r
+\r
+ if (checkbox.checked) {\r
+ flag = 'allow-scripts allow-same-origin';\r
+ frameInfo = '<iframe src sandbox="allow-scripts allow-same-origin"></iframe>';\r
+ } else {\r
+ flag = 'allow-scripts allow-same-origin allow-forms';\r
+ frameInfo = '<iframe src sandbox="allow-scripts allow-same-origin allow-forms"></iframe>';\r
+ }\r
+\r
+ frame.setAttribute('sandbox', flag);\r
+ frame.setAttribute('src', 'iframe_form_submission.html');\r
+ document.querySelector('#description').textContent = frameInfo;\r
+ }\r
</script>\r
</pre></li>\r
<li>Create a form for the login screen with <code><input></code> elements to enter an email and password, and submit them:\r
\r
<fieldset>\r
<legend>Login</legend>\r
- <input type="text" id="email" name="email"\r
- placeholder="e-mail address" required />\r
- <input type="password" id="password" name="password"\r
- placeholder="password" required />\r
+ <input type="text" id="email" name="email" placeholder="e-mail address" required />\r
+ <input type="password" id="password" name="password" placeholder="password" required />\r
</fieldset>\r
<input type="submit" value="Login"/>\r
</form>\r
<li>If the <code>sandbox</code> attribute is deactivated, the imported login information is displayed:\r
<pre class="prettyprint">\r
<script>\r
- window.onload = function()\r
- {\r
- var html;\r
-\r
- if (location.href.indexOf("?") >= 0)\r
- {\r
- html =\r
- ['<div id="message">',\r
- '<h3>Catches login qualification certifying information</h3>',\r
- (location.href.split("?")[1]).replace("&", "<br />"),\r
- '</div>'].join('');\r
-\r
- document.body.innerHTML = html;\r
- }\r
- }\r
+ window.onload = function() {\r
+ var html;\r
+\r
+ if (location.href.indexOf('?') >= 0) {\r
+ html = ['<div id='message'>',\r
+ '<h3>Catches login qualification certifying information</h3>',\r
+ (location.href.split('?')[1]).replace('&', '<br/>'),\r
+ '</div>'].join('');\r
+\r
+ document.body.innerHTML = html;\r
+ }\r
+ };\r
</script>\r
</pre></li>\r
</ol>\r
<li>If the <code>sandbox</code> attribute is activated, remove the <code>allow-popups</code> flag from the <code>sandbox</code> attribute value:\r
<pre class="prettyprint">\r
<script>\r
- function setSandbox()\r
- {\r
- var checkbox = document.querySelector('#chkSandbox');\r
- var frame = document.querySelector('#iframe');\r
- var frameInfo = "", flag ="";\r
-\r
- if (checkbox.checked)\r
- {\r
- flag = 'allow-scripts allow-same-origin';\r
- frameInfo =\r
- '<iframe src sandbox="allow-scripts allow-same-origin"></iframe>';\r
- }\r
- else\r
- {\r
- flag = 'allow-scripts allow-same-origin allow-popups'\r
- frameInfo =\r
- '<iframe src sandbox="allow-scripts allow-same-origin allow-popups"></iframe>';\r
- }\r
-\r
- frame.setAttribute("sandbox", flag);\r
- frame.setAttribute("src", "iframe_popup.html");\r
- document.querySelector("#description").textContent = frameInfo;\r
- }\r
+ function setSandbox() {\r
+ var checkbox = document.querySelector('#chkSandbox');\r
+ var frame = document.querySelector('#iframe');\r
+ var frameInfo = '', flag ='';\r
+\r
+ if (checkbox.checked) {\r
+ flag = 'allow-scripts allow-same-origin';\r
+ frameInfo = '<iframe src sandbox="allow-scripts allow-same-origin"></iframe>';\r
+ } else {\r
+ flag = 'allow-scripts allow-same-origin allow-popups'\r
+ frameInfo = '<iframe src sandbox="allow-scripts allow-same-origin allow-popups"></iframe>';\r
+ }\r
+\r
+ frame.setAttribute('sandbox', flag);\r
+ frame.setAttribute('src', 'iframe_popup.html');\r
+ document.querySelector('#description').textContent = frameInfo;\r
+ }\r
</script>\r
</pre></li>\r
<li>Create an external link in the <code>iframe</code> element:\r
<p>Reconnect and check whether there are edited items in the manifest file using the <code>update()</code> method:</p>
<pre class="prettyprint">
<script>
- var update = function()
- {
- var appCache = window.applicationCache;
- appCache.addEventListener('updateready', handleCacheEvent, false);
- appCache.update();
+ var update = function() {
+ var appCache = window.applicationCache;
+ appCache.addEventListener('updateready', handleCacheEvent, false);
+ appCache.update();
</pre>
</li>
<li>
<p>If there are changes in the manifest file, use the <code>swapCache()</code> and <code>handleCacheEvent()</code> methods to update the cache:</p>
<pre class="prettyprint">
- function handleCacheEvent(e)
- {
- if (appCache.status == appCache.UPDATEREADY)
- {
- try
- {
- window.applicationCache.swapCache();
- document.getElementById('log').innerHTML = "Update is successful";
+ function handleCacheEvent(e) {
+ if (appCache.status == appCache.UPDATEREADY) {
+ try {
+ window.applicationCache.swapCache();
+ document.getElementById('log').innerHTML = 'Update is successful';
+ }
}
- }
- }
- };
+ }
+ };
</script>
</pre>
</li>
<p>Check the <code>window.applicationCache.status</code> value:</p>
<pre class="prettyprint">
<script>
- var appCache = window.applicationCache;
-
- switch (appCache.status)
- {
- case 0: /* ApplicationCache.status is UNCACHED */
- break;
- case 1: /* ApplicationCache.status is IDLE */
- break;
- case 2: /* ApplicationCache.status is CHECKING */
- break;
- case 3: /* ApplicationCache.status is DOWNLOADING */
- break;
- case 4: /* ApplicationCache.status is UPDATEREADY */
- break;
- case 5: /* ApplicationCache.status is OBSOLETE */
- break;
- default: break;
- }
+ var appCache = window.applicationCache;
+
+ switch (appCache.status) {
+ case 0: /* ApplicationCache.status is UNCACHED */
+ break;
+ case 1: /* ApplicationCache.status is IDLE */
+ break;
+ case 2: /* ApplicationCache.status is CHECKING */
+ break;
+ case 3: /* ApplicationCache.status is DOWNLOADING */
+ break;
+ case 4: /* ApplicationCache.status is UPDATEREADY */
+ break;
+ case 5: /* ApplicationCache.status is OBSOLETE */
+ break;
+ default: break;
+ }
</script>
</pre>
</li>
<p>Different events can occur based on the cache status. Use the <code>addEventListener()</code> method to add listeners in order to detect events:</p>
<pre class="prettyprint">
<script>
- var appCache = window.applicationCache;
- appCache.addEventListener('cached', function()
- {
- /* Cached resource is downloaded */
- }, false);
-
- appCache.addEventListener('checking', function()
- {
- /*
- Manifest file is downloaded for the first time
- or if there is an update in the manifest
- */
- }, false);
-
- appCache.addEventListener('downloading', function()
- {
- /* Content is being updated */
- }, false);
-
- appCache.addEventListener('error', function()
- {
- /* Error occurred */
- }, false);
-
- appCache.addEventListener('noupdate', function()
- {
- /* No update is available */
- }, false);
-
- appCache.addEventListener('obsolete', function()
- {
- /* Manifest file cannot be found */
- }, false);
-
- appCache.addEventListener('progress', function()
- {
- /* Cache file is being downloaded */
- }, false);
-
- appCache.addEventListener('updateready', function()
- {
- /* All resources for update are downloaded */
- }, false);
+ var appCache = window.applicationCache;
+ appCache.addEventListener('cached', function() {
+ /* Cached resource is downloaded */
+ }, false);
+
+ appCache.addEventListener('checking', function() {
+ /*
+ Manifest file is downloaded for the first time
+ or if there is an update in the manifest
+ */
+ }, false);
+
+ appCache.addEventListener('downloading', function() {
+ /* Content is being updated */
+ }, false);
+
+ appCache.addEventListener('error', function() {
+ /* Error occurred */
+ }, false);
+
+ appCache.addEventListener('noupdate', function() {
+ /* No update is available */
+ }, false);
+
+ appCache.addEventListener('obsolete', function() {
+ /* Manifest file cannot be found */
+ }, false);
+
+ appCache.addEventListener('progress', function() {
+ /* Cache file is being downloaded */
+ }, false);
+
+ appCache.addEventListener('updateready', function() {
+ /* All resources for update are downloaded */
+ }, false);
</script>
</pre>
</li>
<li>Create a <code>FileList</code> instance (in <a href="http://www.w3.org/TR/2015/WD-FileAPI-20150421/#dfn-filelist" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#dfn-filelist" target="_blank">wearable</a> applications):
<pre class="prettyprint">
<script>
- var files = document.getElementById("tizenFiles").files;
- if (files.length === 0) return;
+ var files = document.getElementById('tizenFiles').files;
+ if (files.length === 0) return;
</script>
</pre>
</li>
<li>Use the <code>readSelectedFiles()</code> method of the <code>FileList</code> interface to retrieve and display file information, such as file name, size, MIME type, and modification date:
<pre class="prettyprint">
<script>
- function readSelectedFiles()
- {
- var displaySection = document.getElementById('selectedFileInfoList');
- var html = [];
- for (var i = 0; i < files.length; i++)
- {
- var file = files[i];
- html.push("<li>",
- "<strong>", escape(file.name), "</strong><br />",
- " type: ", file.type, "<br />", /* MIME type */
- " size: ", file.size, "bytes<br />", /* Size */
- " lastModifiedDate: ", /* Last modification date */
- (file.lastModifiedDate ?
- file.lastModifiedDate.toLocaleDateString() : ""),
- " <br />",
- "</li>");
- }
- displaySection.innerHTML = "<ul>" + html.join("") + "</ul>";
- }
+ function readSelectedFiles() {
+ var displaySection = document.getElementById('selectedFileInfoList');
+ var html = [];
+ for (var i = 0; i < files.length; i++) {
+ var file = files[i];
+ html.push('<li>',
+ '<strong>', escape(file.name), '</strong><br/>',
+ ' type: ', file.type, '<br/>', /* MIME type */
+ ' size: ', file.size, 'bytes<br/>', /* Size */
+ ' lastModifiedDate: ', /* Last modification date */
+ (file.lastModifiedDate ? file.lastModifiedDate.toLocaleDateString() : ''),
+ ' <br/>',
+ '</li>');
+ }
+ displaySection.innerHTML = '<ul>' + html.join('') + '</ul>';
+ }
</script>
</pre>
<p align="center"><strong>Figure: Displaying file information (in mobile applications only)</strong></p>
<p>If the data is loaded, an <code>onload</code> event is fired. Create an <code>img</code> element to allocate the event result property value for rendering:</p>
<pre class="prettyprint">
<script>
- function readSelectedFiles()
- {
- var files = document.getElementById("tizenFiles").files;
- if (files.length === 0)
- {
- return;
- }
-
- var html = [];
- for (var i = 0; i < files.length; i++)
- {
- var file = files[i];
-
- var reader = new FileReader();
-
- /* Check whether the file is an image */
- if (!file.type.match("image.*"))
- {
- continue;
- }
-
- reader.onload = (function(e)
- {
- var img = document.createElement("img");
- img.src = e.target.result;
-
- /* Set the selected image's dataURL */
- img.title = escape(file.name);
- img.className = "img";
-
- document.getElementById("selectedFileInfoList").appendChild(img);
- };
- reader.readAsDataURL(file);
- }
- }
+ function readSelectedFiles() {
+ var files = document.getElementById('tizenFiles').files;
+ if (files.length === 0) {
+ return;
+ }
+
+ var html = [];
+ for (var i = 0; i < files.length; i++) {
+ var file = files[i];
+
+ var reader = new FileReader();
+
+ /* Check whether the file is an image */
+ if (!file.type.match('image.*')) {
+ continue;
+ }
+
+ reader.onload = (function(e) {
+ var img = document.createElement('img');
+ img.src = e.target.result;
+
+ /* Set the selected image's dataURL */
+ img.title = escape(file.name);
+ img.className = 'img';
+
+ document.getElementById('selectedFileInfoList').appendChild(img);
+ };
+ reader.readAsDataURL(file);
+ }
+ }
</script>
</pre>
<ol>
<li>Create the <code><input type="file"></code> element, the element for inputting the start byte and the end byte for slice, and the element for displaying the slicing result:
<pre class="prettyprint">
-<input type="file" id="tizenFile" name="tizenFile"
- onchange="setFileSize();"/> <br />
-start byte: <input type="text" id="startByte"
- name="startByte" style="width: 100px;"/>~
+<input type="file" id="tizenFile" name="tizenFile" onchange="setFileSize();"/> <br/>
+start byte: <input type="text" id="startByte" name="startByte" style="width: 100px;"/>~
end byte: <input type="text" id="endByte" name="endByte" style="width: 100px;"/>
<input type="button" value="Slice File" onclick="readBinaryString();"/>
<li>To read the local file, create a <code>FileReader</code> instance (in <a href="http://www.w3.org/TR/2015/WD-FileAPI-20150421/#dfn-filereader" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#FileReader-interface" target="_blank">wearable</a> applications):
<pre class="prettyprint">
<script>
- var reader = new FileReader();
+ var reader = new FileReader();
</script>
</pre>
</li>
<pre class="prettyprint lang-js">
<script>
- function readBinaryString()
- {
- if (document.getElementById("tizenFile").files.length === 0)
- {
- alert("Upload File");
+ function readBinaryString() {
+ if (document.getElementById('tizenFile').files.length === 0) {
+ alert('Upload File');
- return;
- }
+ return;
+ }
- var file = document.getElementById("tizenFile").files[0];
- var startByte = document.getElementById("startByte").value;
- var endByte = document.getElementById("endByte").value;
+ var file = document.getElementById('tizenFile').files[0];
+ var startByte = document.getElementById('startByte').value;
+ var endByte = document.getElementById('endByte').value;
- var blob = file.slice(startByte, endByte);
+ var blob = file.slice(startByte, endByte);
</pre>
<p>A new <code>Blob</code> object is created. </p>
</li>
<li>
<p>Read the data as a binary string using the <code>readAsBinaryString()</code> method:</p>
<pre class="prettyprint lang-html">
- reader.readAsBinaryString(blob);
- }
+ reader.readAsBinaryString(blob);
+ }
</script>
</pre>
</li>
<li>If the data loading is complete, the read data is displayed. Check the status using the <code>onloadend</code> event:
<pre class="prettyprint">
<script>
- reader.onloadend = function(e)
- {
- if (e.target.readyState == FileReader.DONE) /* DONE == 2 */
- {
- document.getElementById('result').textContent = e.target.result;
- }
- };
+ reader.onloadend = function(e) {
+ if (e.target.readyState == FileReader.DONE) /* DONE == 2 */ {
+ document.getElementById('result').textContent = e.target.result;
+ }
+ };
</script>
</pre>
<li>Use the <code>requestFileSystem()</code> method of the <a href="http://www.w3.org/TR/2011/WD-file-system-api-20110419/#using-localfilesystem" target="_blank">LocalFileSystem</a> interface to request access to sandboxed sections of a local file system:
<pre class="prettyprint">
<script>
- /* Tizen uses the webkit prefix */
- window.requestFileSystem = window.webkitRequestFileSystem;
-
- var fs = null;
-
- /* Initialize the file system when loading a page */
- if (window.requestFileSystem)
- {
- initFS();
- }
-
- function initFS()
- {
- /* Request for access to the sandboxed file system */
- /* and define PERSISTENT or TEMPORARY storage */
- window.requestFileSystem(window.TEMPORARY,
- 1024 * 1024, /* Storage space (bytes) */
- function(filesystem) {fs = filesystem;},
- errorHandler);
- }
+ /* Tizen uses the webkit prefix */
+ window.requestFileSystem = window.webkitRequestFileSystem;
+
+ var fs = null;
+
+ /* Initialize the file system when loading a page */
+ if (window.requestFileSystem) {
+ initFS();
+ }
+
+ function initFS() {
+ /* Request for access to the sandboxed file system */
+ /* and define PERSISTENT or TEMPORARY storage */
+ window.requestFileSystem(window.TEMPORARY,
+ 1024 * 1024, /* Storage space (bytes) */
+ function(filesystem) {fs = filesystem;},
+ errorHandler);
+ }
</script>
</pre>
<li>To read the entry within the file system, use the <code>createReader()</code> method of the <a href="http://www.w3.org/TR/2011/WD-file-system-api-20110419/#the-directoryentry-interface" target="_blank">DirectoryEntry</a> interface:
<pre class="prettyprint lang-js">
<script>
- function ShowFileList()
- {
- if (!fs) return;
+ function ShowFileList() {
+ if (!fs) return;
- var objResultSection = document.querySelector('#resultSection');
+ var objResultSection = document.querySelector('#resultSection');
- var root = fs.root;
- var dirReader = root.createReader();
+ var root = fs.root;
+ var dirReader = root.createReader();
</pre>
</li>
<li>Use the <code>readEntries()</code> method of the <a href="http://www.w3.org/TR/2011/WD-file-system-api-20110419/#the-directoryreader-interface" target="_blank">DirectoryReader</a> interface to read all entries:
<pre class="prettyprint">
- dirReader.readEntries(function(entries)
- {
+ dirReader.readEntries(function(entries) {
</pre>
</li>
<li>Display the list of the relevant entries using the <a href="http://www.w3.org/TR/2011/WD-file-system-api-20110419/#the-entry-interface" target="_blank">Entry</a> interface:
<pre class="prettyprint">
- if (!entries.length)
- {
- objResultSection.innerHTML = 'Filesystem is empty.';
- }
- else
- {
- var fragment = document.createDocumentFragment();
- var entry, i;
-
- for (i = 0; i < entries.length; i++)
- {
- entry = entries[i];
-
- var img =
- entry.isDirectory ? '<img class="icon-img"
- src="img/icon_folder.png" alt="folder">'
- : '<img class="icon-img" src="img/icon_file.png" alt="file">';
-
- var li = document.createElement('li');
- /* Display entry name */
- li.innerHTML = [img, '<span>', entry.name, '</span>'].join('');
- objResultSection.innerHTML = '';
- fragment.appendChild(li);
+ if (!entries.length) {
+ objResultSection.innerHTML = 'Filesystem is empty.';
+ } else {
+ var fragment = document.createDocumentFragment();
+ var entry, i;
+
+ for (i = 0; i < entries.length; i++) {
+ entry = entries[i];
+
+ var img = entry.isDirectory ?
+ '<img class="icon-img" src="img/icon_folder.png" alt="folder">' :
+ '<img class="icon-img" src="img/icon_file.png" alt="file">';
+
+ var li = document.createElement('li');
+ /* Display entry name */
+ li.innerHTML = [img, '<span>', entry.name, '</span>'].join('');
+ objResultSection.innerHTML = '';
+ fragment.appendChild(li);
+ }
+ objResultSection.appendChild(fragment);
}
- objResultSection.appendChild(fragment);
- }
- }, errorHandler);
- }
+ }, errorHandler);
+ }
</script>
</pre>
</li></ol>
<option value="dir">Directory</option>
<option value="file">File</option>
</select>
-<input type="text" id="txtName" name="txtName"
- style="width: 200px;" maxlength="20"/>
+<input type="text" id="txtName" name="txtName" style="width: 200px;" maxlength="20"/>
<input type="button" value="Add File or Directory" onclick="AddFile();"/>
</pre>
</li>
<li>To create a directory, use the <code>getDirectory()</code> method. To create a file, use the <code>getFile()</code> method:
<pre class="prettyprint">
<script>
- function AddFile()
- {
- if (!fs) return;
-
- var type = document.querySelector('#selType').value;
- var name = document.querySelector('#txtName').value;
-
- if (name == "")
- {
- return alert("Enter File or Directory Name.");
- }
-
- if (type == "file")
- {
- /* Create file */
- fs.root.getFile(name, {create: true}, null, errorHandler);
- }
- else if (type == "dir")
- {
- /* Create directory */
- fs.root.getDirectory(name, {create: true}, null, errorHandler);
- }
-
- document.querySelector('#resultSection').innerHTML = 'Files created.';
- }
+ function AddFile() {
+ if (!fs) return;
+
+ var type = document.querySelector('#selType').value;
+ var name = document.querySelector('#txtName').value;
+
+ if (name == '') {
+ return alert('Enter File or Directory Name.');
+ }
+
+ if (type == 'file') {
+ /* Create file */
+ fs.root.getFile(name, {create: true}, null, errorHandler);
+ } else if (type == 'dir') {
+ /* Create directory */
+ fs.root.getDirectory(name, {create: true}, null, errorHandler);
+ }
+
+ document.querySelector('#resultSection').innerHTML = 'Files created.';
+ }
</script>
</pre>
<li>To delete a directory and all the files in it, use the <code>removeRecursively()</code> method. To delete an individual file, use the <code>remove()</code> method:
<pre class="prettyprint">
<script>
- function RemoveFile()
- {
- if (!fs) return;
-
- var dirReader = fs.root.createReader();
- var entry, i;
-
- dirReader.readEntries(function(entries)
- {
- for (i = 0; i < entries.length; i++)
- {
- entry = entries[i];
- if (entry.isDirectory)
- {
- entry.removeRecursively(function() {}, errorHandler);
- }
- else
- {
- entry.remove(function() {}, errorHandler);
- }
+ function RemoveFile() {
+ if (!fs) return;
+
+ var dirReader = fs.root.createReader();
+ var entry, i;
+
+ dirReader.readEntries(function(entries) {
+ for (i = 0; i < entries.length; i++) {
+ entry = entries[i];
+ if (entry.isDirectory) {
+ entry.removeRecursively(function() {}, errorHandler);
+ } else {
+ entry.remove(function() {}, errorHandler);
+ }
}
- document.querySelector('#resultSection').innerHTML =
- 'Directory emptied.';
- }, errorHandler);
- }
+ document.querySelector('#resultSection').innerHTML = 'Directory emptied.';
+ }, errorHandler);
+ }
</script>
</pre>
<pre class="prettyprint">
<script>
- if (!window.webkitIndexedDB)
- {
- window.alert("Does not support IndexedDB");
- }
- else
- {
- var tizenDB = {}
- var request = window.webkitIndexedDB.open("TizenIndexedDB");
-
- request.onsuccess = function(e) {}
- request.onerror = function(e) {/* Error handling */}
- }
+ if (!window.webkitIndexedDB) {
+ window.alert('Does not support IndexedDB');
+ } else {
+ var tizenDB = {};
+ var request = window.webkitIndexedDB.open('TizenIndexedDB');
+
+ request.onsuccess = function(e) {};
+ request.onerror = function(e) {/* Error handling */};
+ }
</script>
</pre>
<p>Delete the generated database using the <code>window.webkitIndexedDB.deleteDatabase()</code> method:</p>
<pre class="prettyprint">
<script>
- window.webkitIndexedDB.deleteDatabase('TizenIndexedDB');
+ window.webkitIndexedDB.deleteDatabase('TizenIndexedDB');
</script>
</pre>
</li>
<pre class="prettyprint">
<script>
- var tizenDB = {}
- var request = window.webkitIndexedDB.open("TizenIndexedDB");
- request.onupgradeneeded = function(e)
- {
- tizenDB.db = event.target.result;
- try
- {
- var objStore = tizenDB.db.createObjectStore("tizenStore", {keyPath: "key"});
- }
- };
+ var tizenDB = {}
+ var request = window.webkitIndexedDB.open('TizenIndexedDB');
+ request.onupgradeneeded = function(e) {
+ tizenDB.db = event.target.result;
+ try {
+ var objStore = tizenDB.db.createObjectStore('tizenStore', {keyPath: 'key'});
+ }
+ };
</script>
</pre>
<p>The name and key path of an independent object are defined in the object store.
<p>To delete the object store, use the <code>deleteObjectStore()</code> method:</p>
<pre class="prettyprint">
<script>
- window.webkitIndexedDB.deleteObjectStore('tizenStore');
+ window.webkitIndexedDB.deleteObjectStore('tizenStore');
</script>
</pre>
</li>
<pre class="prettyprint">
<script>
- objStore.transaction.oncomplete = function(e)
- {
- var trans = tizenDB.db.transaction("tizenStore", "readwrite");
- var tizenStore = trans.objectStore("tizenStore");
- var data =
- {
- "key": new Date().getTime(),
- "text": "Tizen-" + Math.random()
- };
-
- var request = tizenStore.put(data);
- request.onsuccess = function(e)
- {
- tizenDB.db.objectStoreId = request.result;
- console.log(request.result);
- };
- }
+ objStore.transaction.oncomplete = function(e) {
+ var trans = tizenDB.db.transaction('tizenStore', 'readwrite');
+ var tizenStore = trans.objectStore('tizenStore');
+ var data = {
+ 'key': new Date().getTime(),
+ 'text': 'Tizen-' + Math.random()
+ };
+
+ var request = tizenStore.put(data);
+ request.onsuccess = function(e) {
+ tizenDB.db.objectStoreId = request.result;
+ console.log(request.result);
+ };
+ };
</script>
</pre>
<pre class="prettyprint">
<script>
- var request = tizenStore.put(data);
- request.onsuccess = function(e)
- {
- tizenDB.db.objectStoreId = request.result;
- var data = tizenStore.get(tizenDB.db.objectStoreId);
- };
+ var request = tizenStore.put(data);
+ request.onsuccess = function(e) {
+ tizenDB.db.objectStoreId = request.result;
+ var data = tizenStore.get(tizenDB.db.objectStoreId);
+ };
</script>
</pre>
</li><li>
<pre class="prettyprint">
<script>
- var request = tizenStore.put(data);
- request.onsuccess = function(e)
- {
- tizenDB.db.objectStoreId = request.result;
- var data = tizenStore.delete(tizenDB.db.objectStoreId);
- data.onsuccess = function(e)
- {
- console.log(data);
- }
- };
+ var request = tizenStore.put(data);
+ request.onsuccess = function(e) {
+ tizenDB.db.objectStoreId = request.result;
+ var data = tizenStore.delete(tizenDB.db.objectStoreId);
+ data.onsuccess = function(e) {
+ console.log(data);
+ };
+ };
</script>
</pre>
<pre class="prettyprint lang-js">
<script>
- var objStore = tizenDB.db.createObjectStore("tizenStore", {keyPath: "key"});
- tizenDB.index = objStore.createIndex("tizen01", "text");
+ var objStore = tizenDB.db.createObjectStore('tizenStore', {keyPath: 'key'});
+ tizenDB.index = objStore.createIndex('tizen01', 'text');
</pre>
</li>
<li>
<p>Access the index using the <code>objStore.index()</code> method:</p>
<pre class="prettyprint">
- var dbIndex = objStore.index("tizen01");
+ var dbIndex = objStore.index('tizen01');
</pre>
</li>
<li>
<p>Delete the index using the <code>objStore.deleteIndex()</code> method:</p>
<pre class="prettyprint">
- tizenDB.index = objStore.deleteIndex("tizen01");
+ tizenDB.index = objStore.deleteIndex('tizen01');
</script>
</pre>
</li>
<p>To save data in the storage, use the <code>setItem()</code> method that saves data in the key-value format:</p>
<pre class="prettyprint">
<script>
- localStorage.setItem(key.value, data.value);
+ localStorage.setItem(key.value, data.value);
</script>
</pre>
<p>To get the saved data, use the <code>getItem()</code> method with the data key:</p>
<pre class="prettyprint">
<script>
- for (var i = 0; i < localStorage.length; i++)
- {
- localhtml +=
- "<li>" + localStorage.key(i) + " : "
- + localStorage.getItem(localStorage.key(i)) + "</li>";
- }
+ for (var i = 0; i < localStorage.length; i++) {
+ localhtml += '<li>' + localStorage.key(i) + ' : ' + localStorage.getItem(localStorage.key(i)) + '</li>';
+ }
</script>
</pre>
</li>
<li>To delete a specific item, use the <code>removeItem()</code> method with the data key:
<pre class="prettyprint">
<script>
- localStorage.removeItem(key.value);
+ localStorage.removeItem(key.value);
</script>
</pre>
</li>
<p>To delete all the data stored in the local storage, use the <code>clear()</code> method:</p>
<pre class="prettyprint">
<script>
- localStorage.clear();
+ localStorage.clear();
</script>
</pre>
<input type="text" id="storageKey" style="width: 50px"/>
value:
<input type="text" id="storageData" style="width: 50px"/>
- <input type="button" id="save" value="SAVE"
- onclick="addStorage(); return false;" />
+ <input type="button" id="save" value="SAVE" onclick="addStorage(); return false;"/>
</body>
</pre>
</li>
<pre class="prettyprint">
<script>
- function addStorage()
- {
- var key = document.getElementById("storageKey");
- var data = document.getElementById("storageData");
-
- /* Set the local storage item */
- if ("localStorage" in window)
- {
- localStorage.setItem(key.value, data.value);
- location.reload();
- }
- else
- {
- alert("no localStorage in window");
- }
-
- /* Set the session storage item */
- if ("sessionStorage" in window)
- {
- sessionStorage.setItem(key.value, data.value);
- location.reload();
- }
- else
- {
- alert("no sessionStorage in window");
- }
- }
+ function addStorage() {
+ var key = document.getElementById('storageKey');
+ var data = document.getElementById('storageData');
+
+ /* Set the local storage item */
+ if ('localStorage' in window) {
+ localStorage.setItem(key.value, data.value);
+ location.reload();
+ } else {
+ alert('no localStorage in window');
+ }
+
+ /* Set the session storage item */
+ if ('sessionStorage' in window) {
+ sessionStorage.setItem(key.value, data.value);
+ location.reload();
+ } else {
+ alert('no sessionStorage in window');
+ }
+ }
</script>
</pre>
</li>
<pre class="prettyprint">
<script>
- window.onload = function()
- {
- var localhtml = "";
- var sessionhtml = "";
-
- /* Get the local storage item */
- for (var i = 0; i < localStorage.length; i++)
- {
- localhtml +=
- "<li>" + localStorage.key(i) + " : "
- + localStorage.getItem(localStorage.key(i)) + "</li>";
- }
- document.getElementById("localStorageData").innerHTML = localhtml;
-
- /* Get the session storage item */
- for (var j = 0; j < sessionStorage.length; j++)
- {
- sessionhtml +=
- "<li>" + sessionStorage.key(j) + " : "
- + sessionStorage.getItem(sessionStorage.key(j)) + "</li>";
- }
- document.getElementById("sessionStorageData").innerHTML = sessionhtml;
- }
+ window.onload = function() {
+ var localhtml = '';
+ var sessionhtml = '';
+
+ /* Get the local storage item */
+ for (var i = 0; i < localStorage.length; i++) {
+ localhtml += '<li>' + localStorage.key(i) + ' : ' + localStorage.getItem(localStorage.key(i)) + '</li>';
+ }
+ document.getElementById('localStorageData').innerHTML = localhtml;
+
+ /* Get the session storage item */
+ for (var j = 0; j < sessionStorage.length; j++) {
+ sessionhtml += '<li>' + sessionStorage.key(j) + ' : ' + sessionStorage.getItem(sessionStorage.key(j)) + '</li>';
+ }
+ document.getElementById('sessionStorageData').innerHTML = sessionhtml;
+ };
</script>
</pre>
<pre class="prettyprint">
var db;
var version = 1.0;
-var dbName = "tizendb";
-var dbDisplayName = "tizen_test_db";
+var dbName = 'tizendb';
+var dbDisplayName = 'tizen_test_db';
var dbSize = 2 * 1024 * 1024;
-try
-{
- db = openDatabase(dbName, version, dbDisplayName, dbSize, function(database)
- {
- alert("database creation callback");
- });
+try {
+ db = openDatabase(dbName, version, dbDisplayName, dbSize, function(database) {
+ alert('database creation callback');
+ });
}
</pre>
<p>The method takes the following arguments: unique name of the database, expected version of the database to be opened (if an empty string is given any version can be loaded), display name, the estimated size of database (number of bytes), and, optionally, the database creation event handler.</p>
<p>In the Web SQL Database API, each SQL statement must be executed under a transaction. To create a transaction, use either <code>transaction()</code> or <code>readTransaction()</code> method returned by the <code>openDatabase()</code> method:</p>
<pre class="prettyprint">
-db.transaction(function(t) {/* Place SQL statements here */},
- function() {alert("SQL statements were executed successfully.");});
+db.transaction(function(t) {
+ /* Place SQL statements here */
+}, function() {
+ alert('SQL statements were executed successfully.');
+});
</pre>
<p>The difference between the <code>transaction()</code> and <code>readTransaction()</code> methods is that the latter cannot be used with SQL statements that change the database (such as <code>INSERT</code>, <code>UPDATE</code>, <code>DELETE</code>, or <code>CREATE</code>).</p>
<li>
<p>To execute a SQL statement, use the <code>executeSql()</code> method. The SQL statement is the first parameter of the method and cannot contain SQL transaction statements (such as <code>BEGIN</code>, <code>END</code>, or <code>ROLLBACK</code>):</p>
<pre class="prettyprint">
-t.executeSql("CREATE TABLE tizenTable (id INTEGER PRIMARY KEY, title TEXT,
- content TEXT, insertDay DATETIME)", [],
- function(sqlTransaction, sqlResultSet)
- {
- alert("Table has been created.");
- }, function(sqlTransaction, sqlError)
- {
- /* Error handling */
- });
+t.executeSql('CREATE TABLE tizenTable (id INTEGER PRIMARY KEY, title TEXT, content TEXT, insertDay DATETIME)',
+ [], function(sqlTransaction, sqlResultSet) {
+ alert('Table has been created.');
+}, function(sqlTransaction, sqlError) {
+ /* Error handling */
+});
</pre>
</li>
<li>
<p>Pass arguments to the SQL statement:</p>
<pre class="prettyprint">
-sqlTransaction.executeSql("SELECT * FROM tizenTable WHERE id=?", [value]);
+sqlTransaction.executeSql('SELECT * FROM tizenTable WHERE id=?', [value]);
</pre>
<div class="note">
<ul>
<li>The result object of the INSERT statement contains the insert ID, which stores the identifier of the added record. If multiple records were inserted, the insert ID contains the ID of the last inserted record:
<pre class="prettyprint">
-sqlTransaction.executeSql("INSERT INTO tizenTable(title, content, insertDay)
- VALUES (?, ?, ?)", [title, context, day],
- function(sqlTransaction, sqlResultSet)
- {
- alert("The 'id' of the new record is " + sqlResultSet.insertId);
- });
+sqlTransaction.executeSql('INSERT INTO tizenTable(title, content, insertDay) VALUES (?, ?, ?)',
+ [title, context, day], function(sqlTransaction, sqlResultSet) {
+ alert('The 'id' of the new record is ' + sqlResultSet.insertId);
+});
</pre>
</li>
It contains the number of selected rows (length field) and the <code>item()</code> method. Use the method with the index argument (integer value from 0 to <code>rows.length</code> - 1) to get individual records:
<pre class="prettyprint">
-sqlTransaction.executeSql("SELECT id, title, author FROM books", [],
- function(sqlTransaction, sqlResultSet)
- {
- var book, i, booksNumber = sqllResultSet.rows.length;
- for (i = 0; i < booksNumber; i++)
- {
- book = sqlResultSet.rows.item(i);
- alert("id: " + book.id + ", title: " + book.title
- + ", author: " + book.author);
- }
- });
+sqlTransaction.executeSql('SELECT id, title, author FROM books', [], function(sqlTransaction, sqlResultSet) {
+ var book, i, booksNumber = sqllResultSet.rows.length;
+ for (i = 0; i < booksNumber; i++) {
+ book = sqlResultSet.rows.item(i);
+ alert('id: ' + book.id + ', title: ' + book.title +
+ ', author: ' + book.author);
+ }
+});
</pre>
</li>
</ul>
<p>Handle a syntax error in the <code>sqlError</code> object:</p>
<pre class="prettyprint">
-sqlTransaction.executeSql("SELECT * FROM notExistingTable", [],
- function(sqlTransaction, sqlResultSet) {},
- function(sqlTransaction, sqlError)
- {
- switch (sqlError.code)
- {
- case sqlError.SYNTAX_ERR:
- alert("Syntax error has occurred. " + sqlError.message);
+sqlTransaction.executeSql('SELECT * FROM notExistingTable', [], function(sqlTransaction, sqlResultSet) {},
+ function(sqlTransaction, sqlError) {
+ switch (sqlError.code) {
+ case sqlError.SYNTAX_ERR:
+ alert('Syntax error has occurred. ' + sqlError.message);
break;
- default:
- alert("Other error");
- }
- });
+ default:
+ alert('Other error');
+ }
+});
</pre>
<p>Other types of errors that can occur are exceptions. The <code>sqlException</code> object has the same fields as the <code>sqlError</code> object but it must be handled in the <code>try - catch</code> block.</p>
</li>
<p>Use the <code>openDatabaseSync()</code> method to access a database. The method can only be used in the <a href="../perf_opt/web_workers_w.htm#js_performance">Web Worker</a> context. If the database does not exist, the method first creates it and then opens it:</p>
<pre class="prettyprint">
var databaseSync = null;
-try
-{
- databaseSync = openDatabaseSync("dbName", "1.0", "display database name",
- 1024 * 1024, function(databaseSync)
- {
- alert("database creation callback");
- });
+try {
+ databaseSync = openDatabaseSync('dbName', '1.0', 'display database name', 1024 * 1024, function(databaseSync) {
+ alert('database creation callback');
+ });
}
</pre>
<p>In the Web SQL Database API, each SQL statement must be executed under a transaction. To create a transaction, use either <code>transaction()</code> or <code>readTransaction()</code> method returned by the <code>openDatabaseSync()</code> method:</p>
<pre class="prettyprint">
-database.transaction(function(sqlTransactionSync) {/* Place SQL statements here */},
- function() {alert("SQL statements were executed successfully.");});
+database.transaction(function(sqlTransactionSync) {
+ /* Place SQL statements here */
+}, function() {
+ alert('SQL statements were executed successfully.');
+});
</pre>
<p>The difference between the <code>transaction()</code> and <code>readTransaction()</code> methods is that the latter cannot be used with SQL statements that change the database (such as <code>INSERT</code>, <code>UPDATE</code>, <code>DELETE</code>, or <code>CREATE</code>).</p>
<li>
<p>To execute a SQL statement, use the <code>executeSql()</code> method. The SQL statement is the first parameter of the method and cannot contain SQL transaction statements (such as <code>BEGIN</code>, <code>END</code>, or <code>ROLLBACK</code>):</p>
<pre class="prettyprint">
-var sqlResultSet =
- sqlTransactionSync.executeSql("CREATE TABLE IF NOT EXISTS books(id INTEGER
- PRIMARY KEY, title TEXT, author TEXT)", []);
+var sqlResultSet = sqlTransactionSync.executeSql('CREATE TABLE IF NOT EXISTS books(id INTEGER PRIMARY KEY,
+ title TEXT, author TEXT)', []);
</pre>
</li>
<li>
<p>Pass arguments to the SQL statement:</p>
<pre class="prettyprint">
-var sqlResultSet =
- sqlTransactionSync.executeSql("SELECT id FROM books WHERE title=? AND author=?",
- ["Ulysses", "James Joyce"]);
+var sqlResultSet = sqlTransactionSync.executeSql('SELECT id FROM books WHERE title=? AND author=?',
+ ['Ulysses', 'James Joyce']);
</pre>
<div class="note">
<ul>
<li>The result object of the INSERT statement contains the insert ID, which stores the identifier of the added record. If multiple records were inserted, the insert ID contains the ID of the last inserted record:
<pre class="prettyprint">
-var sqlResultSet =
- sqlTransactionSync.executeSql("INSERT INTO books (id, title, author)
- VALUES(NULL, ?, ?)",
- ["Ulysses", "James Joyce"]);
-alert("The 'id' of the new record is " + sqlResultSet.insertId);
+var sqlResultSet = sqlTransactionSync.executeSql('INSERT INTO books (id, title, author) VALUES(NULL, ?, ?)',
+ ['Ulysses', 'James Joyce']);
+alert('The 'id' of the new record is ' + sqlResultSet.insertId);
</pre>
</li>
It contains the number of selected rows (length field) and the <code>item()</code> method. Use the method with the index argument (integer value from 0 to <code>rows.length</code> - 1) to get individual records:
<pre class="prettyprint">
-var sqlResultSet =
- sqlTransactionSync.executeSql("SELECT id, title, author FROM books");
+var sqlResultSet = sqlTransactionSync.executeSql('SELECT id, title, author FROM books');
var book, i, booksNumber = sqlResultSet.rows.length;
-for (i = 0; i < booksNumber; i++)
-{
- book = sqlResultSet.rows.item(i);
- alert("id: " + book.id + ", title: "
- + book.title + ", author: " + book.author);
+for (i = 0; i < booksNumber; i++) {
+ book = sqlResultSet.rows.item(i);
+ alert('id: ' + book.id + ', title: ' + book.title + ', author: ' + book.author);
}
</pre>
</li>
<li>Handle errors in the <code>sqlException</code> object:
<pre class="prettyprint">
-try
-{
- databaseSync.transaction(function(sqlTransactionSync)
- {
- var sqlResultSet =
- sqlTransactionSync.executeSql("DELETE FROM books WHERE id=?", [id]);
- });
- /* Instructions if the above SQL statement is executed successfully */
-}
-catch (sqlException)
-{
- postMessage("An error has occurred during deleting the book from the table!
- Error code: " + sqlException.code
- + " (" + sqlException.message + ").");
+try {
+ databaseSync.transaction(function(sqlTransactionSync) {
+ var sqlResultSet = sqlTransactionSync.executeSql('DELETE FROM books WHERE id=?', [id]);
+ });
+ /* Instructions if the above SQL statement is executed successfully */
+} catch (sqlException) {
+ postMessage('An error has occurred during deleting the book from the table!
+ Error code: ' + sqlException.code + ' (' + sqlException.message + ').');
}
</pre>
</li>
var stream;\r
navigator.webkitGetUserMedia({video: true, audio: false}, gotStreamCallback,\r
noStreamCallback);\r
-function gotStream(rStream)\r
-{\r
- stream = rStream;\r
+function gotStream(rStream) {\r
+ stream = rStream;\r
}\r
</pre>\r
</li>\r
\r
<li>Use the <code>applySettings()</code> method to modify the camera settings (to set the file name of the recorded video or captured image):\r
<pre class="prettyprint">\r
-var recordingSetting =\r
-{\r
- fileName: "sample.3gp";\r
+var recordingSetting = {\r
+ fileName: 'sample.3gp';\r
}\r
cameraControl.recorder.applySettings(recordingSetting,\r
recorderSettingSuccessCallback,\r
<ol>\r
<li>Access the camera preview stream using the <code>getUserMedia()</code> method:\r
<pre class="prettyprint">\r
-function initCameraPreview()\r
-{\r
- navigator.webkitGetUserMedia({video: true, audio: false},\r
- onPreviewStream,\r
- onPreviewStreamError);\r
+function initCameraPreview() {\r
+ navigator.webkitGetUserMedia({video: true, audio: false},\r
+ onPreviewStream,\r
+ onPreviewStreamError);\r
}\r
\r
-function onPreviewStream(stream)\r
-{\r
- cameraStream = stream;\r
+function onPreviewStream(stream) {\r
+ cameraStream = stream;\r
}\r
</pre>\r
</li>\r
<li>Use the <code>onVisibilityChange()</code> event listener to detect changes in the visibility state of the application. When the application becomes invisible, the <code>cameraStream.stop()</code> method is called to release the preview stream. When the application becomes visible again, the preview stream is re-initialized.\r
<pre class="prettyprint">\r
-function onVisibilityChange()\r
-{\r
- if (document.visibilityState !== 'visible')\r
- {\r
- cameraStream.stop();\r
- }\r
- else\r
- {\r
- initCameraPreview();\r
- }\r
+function onVisibilityChange() {\r
+ if (document.visibilityState !== 'visible') {\r
+ cameraStream.stop();\r
+ } else {\r
+ initCameraPreview();\r
+ }\r
}\r
</pre>\r
</li>\r
<li><p>Define the fullscreen mode style by expressing the fullscreen status of the element with the <a href="https://wiki.mozilla.org/index.php?title=Gecko:FullScreenAPI#full-screen_pseudo-class" target="_blank">:full-screen</a> CSS pseudo-class (<code>-webkit-full-screen</code>):</p>\r
<pre class="prettyprint">\r
<style>\r
- #fs-image: -webkit-full-screen\r
- {\r
+ #fs-image: -webkit-full-screen {\r
background: #39c;\r
}\r
- #fs-image: full-screen\r
- {\r
+ #fs-image: full-screen {\r
background: #39c;\r
}\r
</style>\r
\r
<pre class="prettyprint">\r
<script>\r
- function toggleFullScreenHandler(e, target)\r
- {\r
- var target = document.getElementById(target);\r
- /* Check whether in fullscreen mode */\r
- if (document.webkitIsFullScreen)\r
- {\r
- /* Cancel the fullscreen mode */\r
- document.webkitCancelFullScreen();\r
- }\r
- else\r
- {\r
- /* Switch on the fullscreen mode */\r
- target.webkitRequestFullScreen();\r
- }\r
- }\r
-\r
- document.getElementById('toggleImage').addEventListener('click', function(e)\r
- {\r
- toggleFullScreenHandler(e, 'fs-image')\r
- }, false);\r
-\r
- document.getElementById('toggleVideo').addEventListener('click', function(e)\r
- {\r
- toggleFullScreenHandler(e, 'video')\r
- }, false);\r
-\r
- document.addEventListener('click', function(e)\r
- {\r
- toggleFullScreenHandler(e)\r
- }, false);\r
+ function toggleFullScreenHandler(e, target) {\r
+ var target = document.getElementById(target);\r
+ /* Check whether in fullscreen mode */\r
+ if (document.webkitIsFullScreen) {\r
+ /* Cancel the fullscreen mode */\r
+ document.webkitCancelFullScreen();\r
+ } else {\r
+ /* Switch on the fullscreen mode */\r
+ target.webkitRequestFullScreen();\r
+ }\r
+ }\r
+\r
+ document.getElementById('toggleImage').addEventListener('click', function(e) {\r
+ toggleFullScreenHandler(e, 'fs-image')\r
+ }, false);\r
+\r
+ document.getElementById('toggleVideo').addEventListener('click', function(e) {\r
+ toggleFullScreenHandler(e, 'video')\r
+ }, false);\r
+\r
+ document.addEventListener('click', function(e) {\r
+ toggleFullScreenHandler(e)\r
+ }, false);\r
</script>\r
</pre>\r
</li>\r
<li>Create a new <a href="http://www.khronos.org/registry/typedarray/specs/latest/#5" target="_blank">ArrayBuffer</a> with a specific length:
<pre class="prettyprint lang-js">
<script>
- var log = document.getElementById("log");
+ var log = document.getElementById('log');
- /* Create a 12-byte buffer */
- var buffer = new ArrayBuffer(12);
- var x = new Int32Array(buffer);
+ /* Create a 12-byte buffer */
+ var buffer = new ArrayBuffer(12);
+ var x = new Int32Array(buffer);
- /* Check the buffer length */
- log.innerHTML = "<div>" + buffer.byteLength + "<div>";
+ /* Check the buffer length */
+ log.innerHTML = '<div>' + buffer.byteLength + '<div>';
</pre>
<p>The content of the array buffer is initialized to 0. If the requested number of bytes are not allocated, an exception is raised.</p></li>
<li>Slice the array buffer to copy the buffer bytes and return a new array buffer:
<pre class="prettyprint">
- /* Get slice: "1234" */
- x[1] = 1234;
- var slice = buffer.slice(4);
- var y = new Int32Array(slice);
- log.innerHTML += "<div>" + x[1] + "<div>";
- log.innerHTML += "<div>" + y[0] + "<div>";
-
- /* Get slice: "6789" */
- x[1] = 6789;
- log.innerHTML += "<div>" + x[1] + "<div>";
- log.innerHTML += "<div>" + y[0] + "<div>";
+ /* Get slice: '1234' */
+ x[1] = 1234;
+ var slice = buffer.slice(4);
+ var y = new Int32Array(slice);
+ log.innerHTML += '<div>' + x[1] + '<div>';
+ log.innerHTML += '<div>' + y[0] + '<div>';
+
+ /* Get slice: '6789' */
+ x[1] = 6789;
+ log.innerHTML += '<div>' + x[1] + '<div>';
+ log.innerHTML += '<div>' + y[0] + '<div>';
</script>
</pre></li>
</ol>
<li>Create new instances of the typed array view types with a general fixed-length binary buffer:
<pre class="prettyprint">
<script>
- /* 8-bit 2's complement signed integer */
- var int8 = new Int8Array(8);
- /* 8-bit unsigned integer */
- var uint8 = new Uint8Array(16);
- /* 8-bit unsigned integer (clamped) */
- var uint8Cl = new Uint8ClampedArray(32);
- /* 16-bit 2's complement signed integer */
- var int16 = new Int16Array(64);
- /* 16-bit unsigned integer */
- var uint16 = new Uint16Array(8);
- /* 32-bit 2's complement signed integer */
- var int32 = new Int32Array(16);
- /* 32-bit unsigned integer */
- var uint32 = new Uint32Array(32);
- /* 32-bit IEEE floating point */
- var float32 = new Float32Array(64);
- /* 64-bit IEEE floating point */
- var float64 = new Float64Array(8);
+ /* 8-bit 2's complement signed integer */
+ var int8 = new Int8Array(8);
+ /* 8-bit unsigned integer */
+ var uint8 = new Uint8Array(16);
+ /* 8-bit unsigned integer (clamped) */
+ var uint8Cl = new Uint8ClampedArray(32);
+ /* 16-bit 2's complement signed integer */
+ var int16 = new Int16Array(64);
+ /* 16-bit unsigned integer */
+ var uint16 = new Uint16Array(8);
+ /* 32-bit 2's complement signed integer */
+ var int32 = new Int32Array(16);
+ /* 32-bit unsigned integer */
+ var uint32 = new Uint32Array(32);
+ /* 32-bit IEEE floating point */
+ var float32 = new Float32Array(64);
+ /* 64-bit IEEE floating point */
+ var float64 = new Float64Array(8);
</script>
</pre>
<li>Create a typed array view:
<pre class="prettyprint lang-js">
<script>
- var log = document.getElementById("log");
- /* Create an array buffer */
- var buffer = new ArrayBuffer(12);
+ var log = document.getElementById('log');
+ /* Create an array buffer */
+ var buffer = new ArrayBuffer(12);
- /* Create a typed array view that points to the array buffer */
- var x = new Int32Array(buffer, 0, 2);
+ /* Create a typed array view that points to the array buffer */
+ var x = new Int32Array(buffer, 0, 2);
</pre>
<p>You can use the view to establish a detailed data structure by creating the value of 32-bit signed integers in a byte-type composition element.</p>
</li>
<li>Use the typed array view buffer:
<pre class="prettyprint">
- var y = new Int32Array(x.buffer, 4, 2);
- log.innerHTML += "<div>" + (x.buffer === y.buffer) + "<div>";
+ var y = new Int32Array(x.buffer, 4, 2);
+ log.innerHTML += '<div>' + (x.buffer === y.buffer) + '<div>';
- /* Use the byteLength, length, and byteOffset properties */
- log.innerHTML += "<div>" + x.byteLength + "<div>";
- log.innerHTML += "<div>" + (x.length * Int32Array.BYTES_PER_ELEMENT) + "<div>";
- log.innerHTML += "<div>" + x.byteOffset + "<div>";
+ /* Use the byteLength, length, and byteOffset properties */
+ log.innerHTML += '<div>' + x.byteLength + '<div>';
+ log.innerHTML += '<div>' + (x.length * Int32Array.BYTES_PER_ELEMENT) + '<div>';
+ log.innerHTML += '<div>' + x.byteOffset + '<div>';
</script>
</pre>
<li>Replace the <code>CanvasPixelArray</code> instance with the <code>Uint8ClampedArray</code> instance:
<pre class="prettyprint">
<script>
- var buffer = new ArrayBuffer(12);
- var x = new Uint8ClampedArray(buffer, 4, 2);
- log.innerHTML += "<div>[Result1]</div>";
- log.innerHTML += "<div>" + x.byteLength + "<div>";
- log.innerHTML += "<div>" + x.length + "<div>";
- log.innerHTML += "<div>" + Uint8ClampedArray.BYTES_PER_ELEMENT + "<div>";
-
- var x = new Uint8ClampedArray(10);
- x.set([18, 93, 42], 3);
- log.innerHTML += "<br/><div>[Result2]</div>";
- log.innerHTML += "<div>" + x[3] + "<div>";
- log.innerHTML += "<div>" + x[4] + "<div>";
- log.innerHTML += "<div>" + x[5] + "<div>";
-
- var x = new Uint8ClampedArray([0, 1, 2, 3, 4, 5]);
- var y = x.subarray(2, 5);
- log.innerHTML += "<br/><div>[Result3]</div>";
- log.innerHTML += "<div>" + y.length + "<div>";
+ var buffer = new ArrayBuffer(12);
+ var x = new Uint8ClampedArray(buffer, 4, 2);
+ log.innerHTML += '<div>[Result1]</div>';
+ log.innerHTML += '<div>' + x.byteLength + '<div>';
+ log.innerHTML += '<div>' + x.length + '<div>';
+ log.innerHTML += '<div>' + Uint8ClampedArray.BYTES_PER_ELEMENT + '<div>';
+
+ var x = new Uint8ClampedArray(10);
+ x.set([18, 93, 42], 3);
+ log.innerHTML += '<br/><div>[Result2]</div>';
+ log.innerHTML += '<div>' + x[3] + '<div>';
+ log.innerHTML += '<div>' + x[4] + '<div>';
+ log.innerHTML += '<div>' + x[5] + '<div>';
+
+ var x = new Uint8ClampedArray([0, 1, 2, 3, 4, 5]);
+ var y = x.subarray(2, 5);
+ log.innerHTML += '<br/><div>[Result3]</div>';
+ log.innerHTML += '<div>' + y.length + '<div>';
</script>
</pre>
<li>When an <code>ArrayBuffer</code> with heterogeneous type of data is used, you can take advantage of the <code>DataView</code> of the buffer:
<pre class="prettyprint">
<script>
- var log = document.getElementById("log");
+ var log = document.getElementById('log');
- /* Create DataView */
- var x = new DataView(new ArrayBuffer(12), 0);
+ /* Create DataView */
+ var x = new DataView(new ArrayBuffer(12), 0);
- /* Store the variable */
- x.setFloat32(1, Math.PI);
+ /* Store the variable */
+ x.setFloat32(1, Math.PI);
- /* Get the variable */
- log.innerHTML += "<div>" + x.getFloat32(1) + "<div>";
- log.innerHTML += "<div>" + Math.PI + "<div>";
+ /* Get the variable */
+ log.innerHTML += '<div>' + x.getFloat32(1) + '<div>';
+ log.innerHTML += '<div>' + Math.PI + '<div>';
</script>
</pre>
<p>The <code>DataView</code> stores the values of the given type at the specified byte offset from the start of the view. Moreover, alignment is not a constraint, and it can store the multi-byte values at any offset. For multi-byte values, the optional <code>littleEndian</code> argument indicates that the value can be stored in a big-endian or little-endian byte order. If the argument is set to <code>false</code> or is undefined, the value gets stored in the big-endian byte order.</p>
<li>For the WebGL - Khronos API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webgl">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#webgl">wearable</a> applications), import the <code>gl.bufferData()</code> method to set the buffer object to deliver texture data:
<pre class="prettyprint">
<script>
- var textureCoords =
- [0.0, 0.5, 0.25, 0.5, 0.25, 1.0, 0.0, 1.0, /* Front */
- 0.5, 0.5, 0.75, 0.5, 0.75, 1.0, 0.5, 1.0, /* Back */
- 0.0, 0.5, 0.25, 0.5, 0.25, 0.0, 0.0, 0.0, /* Top */
- 0.25, 0.5, 0.5, 0.5, 0.5, 0.0, 0.25, 0.0, /* Bottom */
- 0.25, 0.5, 0.5, 0.5, 0.5, 1.0, 0.25, 1.0, /* Right */
- 0.75, 0.5, 1.0, 0.5, 1.0, 1.0, 0.75, 1.0]; /* Left */
-
- cubeVertexTextureCoordBuffer = gl.createBuffer();
- gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
- gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
- cubeVertexTextureCoordBuffer.itemSize = 2;
- cubeVertexTextureCoordBuffer.numItems = 24;
+ var textureCoords = [0.0, 0.5, 0.25, 0.5, 0.25, 1.0, 0.0, 1.0, /* Front */
+ 0.5, 0.5, 0.75, 0.5, 0.75, 1.0, 0.5, 1.0, /* Back */
+ 0.0, 0.5, 0.25, 0.5, 0.25, 0.0, 0.0, 0.0, /* Top */
+ 0.25, 0.5, 0.5, 0.5, 0.5, 0.0, 0.25, 0.0, /* Bottom */
+ 0.25, 0.5, 0.5, 0.5, 0.5, 1.0, 0.25, 1.0, /* Right */
+ 0.75, 0.5, 1.0, 0.5, 1.0, 1.0, 0.75, 1.0]; /* Left */
+
+ cubeVertexTextureCoordBuffer = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
+ cubeVertexTextureCoordBuffer.itemSize = 2;
+ cubeVertexTextureCoordBuffer.numItems = 24;
</script>
</pre></li>
<li>Deliver the pixel expression of the canvas element:
<pre class="prettyprint">
<script>
- var tempContext = canvas.getContext("2d");
- tempContext.drawImage(picture, 0, 0, canvas.width, canvas.height);
- var pixels = canvas.width * canvas.height * 4;
- var canvasData =
- tempContext.getImageData(0, 0, canvas.width, canvas.height);
- var binaryData = canvasData.data;
+ var tempContext = canvas.getContext('2d');
+ tempContext.drawImage(picture, 0, 0, canvas.width, canvas.height);
+ var pixels = canvas.width * canvas.height * 4;
+ var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);
+ var binaryData = canvasData.data;
</script>
</pre></li></ol>
<li>For the XMLHttpRequest API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">wearable</a> applications), set the response type of the <code>XMLHttpRequest</code> object as <code>arraybuffer</code> to receive a typed array response. This way by delivering data directly in multimedia, you can parse the binary file through the network:
<pre class="prettyprint">
-this.setSound = function()
-{
- var request = new XMLHttpRequest();
- request.open("GET", url, true);
- request.responseType = "arraybuffer";
-
- request.onload = function()
- {
- var data = request.response;
- };
- request.send();
-}
+this.setSound = function() {
+ var request = new XMLHttpRequest();
+ request.open('GET', url, true);
+ request.responseType = 'arraybuffer';
+
+ request.onload = function() {
+ var data = request.response;
+ };
+ request.send();
+};
</pre></li>
</ol>
<li><p>Use the <code>getContext()</code> method of the <code>Canvas</code> object to import the WebGL™ context:</p>
<pre class="prettyprint">
<script>
- function startWegGL()
- {
- gl = getWebGLContext();
- }
-
- function getWebGLContext()
- {
- var webGLContext;
- var canvas = document.getElementById("canvas");
-
- /* Context name can differ according to the browser used */
- /* Store the context name in an array and check its validity */
- var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
- for (var i = 0; i < names.length; ++i)
- {
- try
- {
- webGLContext = canvas.getContext(names[i]);
- }
- if (webGLContext) break;
- }
-
- return webGLContext;
- }
+ function startWegGL() {
+ gl = getWebGLContext();
+ }
+
+ function getWebGLContext() {
+ var webGLContext;
+ var canvas = document.getElementById('canvas');
+
+ /* Context name can vary depending on the browser used */
+ /* Store the context name in an array and check its validity */
+ var names = ['webgl', 'experimental-webgl', 'webkit-3d', 'moz-webgl'];
+ for (var i = 0; i < names.length; ++i) {
+ try {
+ webGLContext = canvas.getContext(names[i]);
+ }
+ if (webGLContext) break;
+ }
+
+ return webGLContext;
+ }
</script>
</pre>
</li>
<li><p>Define the vertex shader and fragment shader using the <code>gl_Position</code> and <code>gl_FragColor</code> variables of the <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL® ES Shading Language</a> (GLSL ES):</p>
<pre class="prettyprint">
<script id="vshader" type="x-shader/x-vertex">
- attribute vec2 attVertexPos;
+ attribute vec2 attVertexPos;
- void main()
- {
-
- /* vec4(2D coordinates, depth, perspective) */
- gl_Position = vec4(attVertexPos, 0, 2);
- }
+ void main() {
+ /* vec4(2D coordinates, depth, perspective) */
+ gl_Position = vec4(attVertexPos, 0, 2);
+ }
</script>
<script id="fshader" type="x-shader/x-fragment">
- void main()
- {
+ void main() {
- /* Color stored in the gl_FragColor variable becomes the pixel color */
- /* vec4(R, G, B, A) */
- gl_FragColor = vec4(1, 0.5, 0.5, 1);
- }
+ /* Color stored in the gl_FragColor variable becomes the pixel color */
+ /* vec4(R, G, B, A) */
+ gl_FragColor = vec4(1, 0.5, 0.5, 1);
+ }
</script>
</pre>
</li>
<li><p>Import the <code>createShader()</code> method to create the shaders:</p>
<pre class="prettyprint">
<script>
- var vshader = gl.createShader(gl.VERTEX_SHADER);
- var fshader = gl.createShader(gl.FRAGMENT_SHADER);
+ var vshader = gl.createShader(gl.VERTEX_SHADER);
+ var fshader = gl.createShader(gl.FRAGMENT_SHADER);
</pre>
</li>
<li><p>Import the <code>shaderSource()</code> method to attach the source elements to the shaders:</p>
<pre class="prettyprint">
- gl.shaderSource(vshader, document.getElementById('vshader').text);
- gl.shaderSource(fshader, document.getElementById('fshader').text);
+ gl.shaderSource(vshader, document.getElementById('vshader').text);
+ gl.shaderSource(fshader, document.getElementById('fshader').text);
</pre>
</li>
<li><p>Import the <code>compileShader()</code> method and compile the shaders:</p>
<pre class="prettyprint">
- gl.compileShader(vshader);
- gl.compileShader(fshader);
+ gl.compileShader(vshader);
+ gl.compileShader(fshader);
</pre>
<div class="note">
<li><p>Import the <code>createProgram()</code> method to create a new instance of the <a href="https://www.khronos.org/registry/webgl/specs/1.0/#5.6" target="_blank">WebGLProgram</a> object, in which the shaders are then attached:</p>
<pre class="prettyprint">
- var program = null;
- program = gl.createProgram();
+ var program = null;
+ program = gl.createProgram();
</pre>
</li>
<li><p>Import the <code>attachShader()</code> method to attach the shaders to the program:</p>
<pre class="prettyprint">
- gl.attachShader(program, vshader);
- gl.attachShader(program, fshader);
+ gl.attachShader(program, vshader);
+ gl.attachShader(program, fshader);
</pre>
</li>
<li><p>Import the <code>linkProgram()</code> method to connect to the program:</p>
<pre class="prettyprint">
- gl.linkProgram(program);
+ gl.linkProgram(program);
</pre>
</li>
<li><p>Import the <code>useProgram()</code> method to enable WebGL™ to use the program:</p>
<pre class="prettyprint">
- /* Shaders are loaded and used */
- gl.useProgram(program);
+ /* Shaders are loaded and used */
+ gl.useProgram(program);
</script>
</pre>
<pre class="prettyprint">
<script>
- var vertices =
- [1.0, 1.0, /* p2 */
- -1.0, 1.0, /* p1 */
- 1.0, -1.0]; /* p4 */
+ var vertices = [1.0, 1.0, /* p2 */
+ -1.0, 1.0, /* p1 */
+ 1.0, -1.0]; /* p4 */
</script>
</pre>
</li>
<li><p>Import the <code>createBuffer()</code> method to create the vertex buffer object (VBO):</p>
<pre class="prettyprint">
<script>
- triangleVerticesBuffer = gl.createBuffer();
+ triangleVerticesBuffer = gl.createBuffer();
</pre>
</li>
<li><p>Import the <code>bindBuffer()</code> method to bind the VBO:</p>
<pre class="prettyprint">
- gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
+ gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
</pre>
</li>
<li><p>Import the <code>bufferData()</code> method to store data to the VBO:</p>
<pre class="prettyprint">
- /* Convert to Float32Array format that allows the array to be used in WebGL™ */
- gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+ /* Convert to Float32Array format that allows the array to be used in WebGL™ */
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
</script>
</pre>
</li>
<li><p>Import the <code>getAttribLocation()</code> method to bring the attribute location from the WebGL™ program:</p>
<pre class="prettyprint">
<script>
- var vertexPositionAttribute = gl.getAttribLocation(program, "attVertexPos");
+ var vertexPositionAttribute = gl.getAttribLocation(program, 'attVertexPos');
</pre>
<p>The shader is an external program that is compiled. To enable the attribute to be searched and referenced in the program, allocate it to the <code>vertexPositionAttribute</code> variable.</p>
</li>
<li><p>Activate the attribute data array:</p>
<pre class="prettyprint">
- gl.enableVertexAttribArray(vertexPositionAttribute);
+ gl.enableVertexAttribArray(vertexPositionAttribute);
</pre>
</li>
<p>The second argument value is the number of components per vertex. It can be 2, 3, or, in case of RGBA, 4.</p>
<pre class="prettyprint">
- gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
+ gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
</pre>
</li>
<li><p>Use the <code>drawArrays()</code> method to send the shape to the drawing buffer:</p>
<pre class="prettyprint">
- gl.drawArrays(gl.TRIANGLES, 0, 3);
+ gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</pre>
<p align="center"><img alt="Points" src="../../../images/drawing_points.png" /></p>
<pre class="prettyprint">
-var vertices =
- [1.0, 1.0,
- -1.0, 1.0,
- 1.0, -1.0,
- -1.0, -1.0];
-
-gl.vertexAttribPointer(vertexPositionAttribute, 2,
- gl.FLOAT, false, 0, 0);
+var vertices = [1.0, 1.0,
+ -1.0, 1.0,
+ 1.0, -1.0,
+ -1.0, -1.0];
+
+gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.POINTS, 0, 4);
</pre>
</td>
<p align="center"><img alt="Lines" src="../../../images/drawing_lines.png" /></p>
<pre class="prettyprint">
-var vertices =
- [-1.0, 1.0,
- 1.0, 1.0,
+var vertices = [-1.0, 1.0,
+ 1.0, 1.0,
- 1.0, 1.0,
- 1.0, 0.0,
+ 1.0, 1.0,
+ 1.0, 0.0,
- 1.0, -1.0,
- -1.0, -1.0];
+ 1.0, -1.0,
+ -1.0, -1.0];
-gl.vertexAttribPointer(vertexPositionAttribute, 2,
- gl.FLOAT, false, 0, 0);
+gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.LINES, 0, 6);
</pre>
</td>
<p align="center"><img alt="Lines strip" src="../../../images/drawing_line_strip.png" /></p>
<pre class="prettyprint">
-var vertices =
- [-1.0, 1.0,
- 1.0, 1.0,
- 1.0, -1.0,
- -1.0, -1.0];
-
-gl.vertexAttribPointer(vertexPositionAttribute, 2,
- gl.FLOAT, false, 0, 0);
+var vertices = [-1.0, 1.0,
+ 1.0, 1.0,
+ 1.0, -1.0,
+ -1.0, -1.0];
+
+gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl. LINE_STRIP, 0, 4);
</pre>
</td>
<p align="center"><img alt="Line loop" src="../../../images/drawing_line_loop.png" /></p>
<pre class="prettyprint">
-var vertices =
- [-1.0, 1.0,
- 1.0, 1.0,
- 1.0, -1.0,
- -1.0, -1.0];
-
-gl.vertexAttribPointer(vertexPositionAttribute, 2,
- gl.FLOAT, false, 0, 0);
+var vertices = [-1.0, 1.0,
+ 1.0, 1.0,
+ 1.0, -1.0,
+ -1.0, -1.0];
+
+gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl. LINE_LOOP, 0, 4);
</pre>
</td>
<p align="center"><img alt="Triangles" src="../../../images/drawing_triangles.png" /></p>
<pre class="prettyprint">
-var vertices =
- [-1.0, 1.0,
- 1.0, 1.0,
- 0.0, 0.0,
+var vertices = [-1.0, 1.0,
+ 1.0, 1.0,
+ 0.0, 0.0,
- 0.0, 0.0,
- -1.0, -1.0,
- -1.0, 0.0];
+ 0.0, 0.0,
+ -1.0, -1.0,
+ -1.0, 0.0];
-gl.vertexAttribPointer(vertexPositionAttribute, 2,
- gl.FLOAT, false, 0, 0);
+gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl. TRIANGLES, 0, 6);
</pre>
</td>
<p align="center"><img alt="Triangle strip" src="../../../images/drawing_triangle_strip.png" /></p>
<pre class="prettyprint">
-var vertices =
- [1.0, 1.0, /* p1 */
- 0.0, 1.0, /* p2 */
- 1.0, 0.0, /* p3 */
- 0.0, 0.0, /* p4 */
- 1.0, -1.0, /* p5 */
- 0.0, -1.0]; /* p6 */
-
-gl.vertexAttribPointer(vertexPositionAttribute, 2,
- gl.FLOAT, false, 0, 0);
+var vertices = [1.0, 1.0, /* p1 */
+ 0.0, 1.0, /* p2 */
+ 1.0, 0.0, /* p3 */
+ 0.0, 0.0, /* p4 */
+ 1.0, -1.0, /* p5 */
+ 0.0, -1.0]; /* p6 */
+
+gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl. TRIANGLE_STRIP, 0, 6);
</pre>
</td>
<p align="center"><img alt="Triangle fan" src="../../../images/drawing_triangle_fan.png" /></p>
<pre class="prettyprint">
-var vertices =
- [0.0, 0.0, /* p0 */
- 1.0, 0.8, /* p1 */
- -0.5, 1.0, /* p2 */
- -0.8, 0.2, /* p3 */
- -1.0, -1.0, /* p4 */
- 1.0, -1.0]; /* p5 */
-
-gl.vertexAttribPointer(vertexPositionAttribute, 2,
- gl.FLOAT, false, 0, 0);
+var vertices = [0.0, 0.0, /* p0 */
+ 1.0, 0.8, /* p1 */
+ -0.5, 1.0, /* p2 */
+ -0.8, 0.2, /* p3 */
+ -1.0, -1.0, /* p4 */
+ 1.0, -1.0]; /* p5 */
+
+gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl. TRIANGLE_FAN, 0, 6);
</pre>
</td>
<li><p>Define the vertex shader and fragment shader using the <code>gl_Position</code> and <code>gl_FragColor</code> variables of the <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL® ES Shading Language</a> (GLSL ES):</p>
<pre class="prettyprint">
<script id="vshader" type="x-shader/x-vertex">
- attribute vec2 attVertexPos;
- attribute vec4 attVertexColor;
+ attribute vec2 attVertexPos;
+ attribute vec4 attVertexColor;
- varying vec4 vColor;
+ varying vec4 vColor;
- void main()
- {
- gl_Position = vec4(attVertexPos, 0, 2);
- vColor = attVertexColor;
- }
+ void main() {
+ gl_Position = vec4(attVertexPos, 0, 2);
+ vColor = attVertexColor;
+ }
</script>
<script id="fshader" type="x-shader/x-fragment">
- precision mediump float;
+ precision mediump float;
- varying vec4 vColor;
+ varying vec4 vColor;
- void main()
- {
- gl_FragColor = vColor;
- }
+ void main() {
+ gl_FragColor = vColor;
+ }
</script>
</pre>
</li>
<li><p>Define a rectangular vertex comprised of 2 triangles:</p>
<pre class="prettyprint lang-js">
<script>
- var vertices =
- [1.0, 1.0, /* p1 */
- -1.0, 1.0, /* p2 */
- 1.0, -1.0, /* p3 */
- -1.0, -1.0]; /* p4 */
+ var vertices = [1.0, 1.0, /* p1 */
+ -1.0, 1.0, /* p2 */
+ 1.0, -1.0, /* p3 */
+ -1.0, -1.0]; /* p4 */
</pre>
<p align="center"><img alt="Result of the coordinates on the left" src="../../../images/color_vertex.png" /></p>
<li><p>Create the color buffer and render the 2 triangles using the <code>gl.TRIANGLE_STRIP</code> attribute:</p>
<pre class="prettyprint">
- /* Define the color of each vertex as an array */
- var colors =
- [1.0, 0.0, 0.0, 1.0, /* Red */
- 0.0, 1.0, 0.0, 1.0, /* Green */
- 0.0, 0.0, 1.0, 1.0, /* Blue */
- 1.0, 0.0, 0.0, 1.0]; /* Red */
-
- /* Create a buffer for storing the color value */
- var triangleVerticesColorBuffer = gl.createBuffer();
- /* Bind the buffer */
- gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesColorBuffer);
- /* Store data in the buffer */
- gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
-
- /* Bring the color attribute position from the WebGlProgram instance */
- var vertexColorAttribute = gl.getAttribLocation(program, "attVertexColor");
- /* Activate the attribute data array */
- gl.enableVertexAttribArray(vertexColorAttribute);
- gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
-
- gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+ /* Define the color of each vertex as an array */
+ var colors = [1.0, 0.0, 0.0, 1.0, /* Red */
+ 0.0, 1.0, 0.0, 1.0, /* Green */
+ 0.0, 0.0, 1.0, 1.0, /* Blue */
+ 1.0, 0.0, 0.0, 1.0]; /* Red */
+
+ /* Create a buffer for storing the color value */
+ var triangleVerticesColorBuffer = gl.createBuffer();
+ /* Bind the buffer */
+ gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesColorBuffer);
+ /* Store data in the buffer */
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+
+ /* Bring the color attribute position from the WebGlProgram instance */
+ var vertexColorAttribute = gl.getAttribLocation(program, 'attVertexColor');
+ /* Activate the attribute data array */
+ gl.enableVertexAttribArray(vertexColorAttribute);
+ gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
+
+ gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
</script>
</pre>
<pre class="prettyprint">
<script id="vshader" type="x-shader/x-vertex">
- attribute vec2 attVertexPos;
- varying highp vec2 varTextureCoord;
-
- void main(void)
- {
- gl_Position = vec4(attVertexPos, 0, 2.0);
- varTextureCoord = 0.5 * attVertexPos.xy + 0.5;
- }
+ attribute vec2 attVertexPos;
+ varying highp vec2 varTextureCoord;
+
+ void main(void) {
+ gl_Position = vec4(attVertexPos, 0, 2.0);
+ varTextureCoord = 0.5 * attVertexPos.xy + 0.5;
+ }
</script>
<script id="fshader" type="x-shader/x-fragment">
- varying highp vec2 varTextureCoord;
- uniform sampler2D unfSampler; /* Used to access the texture */
-
- void main(void)
- {
- /* texture2D(texture sampler, texture coordinate) */
- gl_FragColor =
- texture2D(unfSampler, vec2(varTextureCoord.s, varTextureCoord.t));
- }
+ varying highp vec2 varTextureCoord;
+ uniform sampler2D unfSampler; /* Used to access the texture */
+
+ void main(void) {
+ /* texture2D(texture sampler, texture coordinate) */
+ gl_FragColor= texture2D(unfSampler, vec2(varTextureCoord.s, varTextureCoord.t));
+ }
</script>
</pre>
<li><p>Create a new <code>texture</code> instance using the <code>createTexture()</code> method:</p>
<pre class="prettyprint">
<script>
- var texture = gl.createTexture();
+ var texture = gl.createTexture();
</pre>
<div class="note">
<li><p>Load the image file to be used as texture data, and bind the texture using the <code>bindTexture()</code> method:</p>
<pre class="prettyprint">
- var textureImage = new Image();
- textureImage.onload = function()
- {
- loadedTextureHandler(texture);
- };
- textureImage.src = "images/carp.jpg"
-
- function loadedTextureHandler(texture)
- {
- /* Initialize texture */
- gl.bindTexture(gl.TEXTURE_2D, texture);
- gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+ var textureImage = new Image();
+ textureImage.onload = function() {
+ loadedTextureHandler(texture);
+ };
+ textureImage.src = 'images/carp.jpg'
+
+ function loadedTextureHandler(texture) {
+ /* Initialize texture */
+ gl.bindTexture(gl.TEXTURE_2D, texture);
+ gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
</pre>
<p>The image data loaded in HTML has the opposite y-axis as the WebGL™ direction. Use the <code>gl.UNPACK_FLIP_Y_WEBGL</code> attribute to reverse the data and store it.</p>
</li>
<li><p>Use the loaded image file to fill the texture data. The <code>texImage2D()</code> method assigns the image to be used as a texture, and the <code>textParameteri()</code> method assigns a filter.</p>
<pre class="prettyprint">
- gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,
- gl.UNSIGNED_BYTE, textureImage);
+ gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImage);
- /* Filter texture */
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+ /* Filter texture */
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
- /* Wrap texture */
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+ /* Wrap texture */
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
</pre>
</li>
<li>Import the <code>unfSampler</code> uniform location to use in the program:
<pre class="prettyprint">
- var unfSampler = gl.getUniformLocation(program, "uSampler");
- gl.uniform1i(unfSampler, 0);
+ var unfSampler = gl.getUniformLocation(program, 'uSampler');
+ gl.uniform1i(unfSampler, 0);
</pre>
</li>
<li>Draw the image using the <code>drawArrays()</code> method:
<pre class="prettyprint">
- var vertexPositionAttribute = gl.getAttribLocation(program, "attVertexPos");
- gl.enableVertexAttribArray(vertexPositionAttribute);
- gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
- gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
+ var vertexPositionAttribute = gl.getAttribLocation(program, 'attVertexPos');
+ gl.enableVertexAttribArray(vertexPositionAttribute);
+ gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
+ gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
- gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
- }
+ gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+ }
</script>
</pre>
</li>
<li>Calculate the central point:
<pre class="prettyprint lang-js">
<script>
- var r = 0.1; /* Radius */
- var n = 50; /* Number of vertices */
- var cx = 0; /* x axis central point */
- var cy = 0; /* y axis central point */
-
- /* Common coordinates for all triangles (the central point of a circle) */
- var centerVertices = [cx, cy];
- var circumVertices = [];
- var lastVertices = [];
- var vertices = [];
- var angle = 0.0;
- draw();
-
- function draw()
- {
- gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); /* Clear the canvas */
- /* Calculate the coordinate of central point to be moved to */
- cy = cx = Math.sin(angle) * 0.9;
- centerVertices = [cx, cy];
- circumVertices = [];
- lastVertices = [];
- vertices = [];
+ var r = 0.1; /* Radius */
+ var n = 50; /* Number of vertices */
+ var cx = 0; /* X axis central point */
+ var cy = 0; /* Y axis central point */
+
+ /* Common coordinates for all triangles (the central point of a circle) */
+ var centerVertices = [cx, cy];
+ var circumVertices = [];
+ var lastVertices = [];
+ var vertices = [];
+ var angle = 0.0;
+ draw();
+
+ function draw() {
+ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); /* Clear the canvas */
+ /* Calculate the coordinate of central point to be moved to */
+ cy = cx = Math.sin(angle) * 0.9;
+ centerVertices = [cx, cy];
+ circumVertices = [];
+ lastVertices = [];
+ vertices = [];
</pre></li>
<li>Use a trigonometric function to calculate the vertex location of a regular N polygon with the central point as the center. Store the n(50) vertex coordinates using the changed central point as the center of the array.
<pre class="prettyprint">
- for (var i = 0; i < n; i++)
- {
- circumVertices.push(cx+r * Math.cos(i/n*2 * Math.PI - Math.PI/2));
- circumVertices.push(cy+r * Math.sin(i/n*2 * Math.PI - Math.PI/2));
- }
-
- lastVertices = [circumVertices[0], circumVertices[1]];
- circumVertices = circumVertices.concat(lastVertices);
- vertices = vertices.concat(centerVertices);
- vertices = vertices.concat(circumVertices);
+ for (var i = 0; i < n; i++) {
+ circumVertices.push(cx+r * Math.cos(i/n*2 * Math.PI - Math.PI/2));
+ circumVertices.push(cy+r * Math.sin(i/n*2 * Math.PI - Math.PI/2));
+ }
+
+ lastVertices = [circumVertices[0], circumVertices[1]];
+ circumVertices = circumVertices.concat(lastVertices);
+ vertices = vertices.concat(centerVertices);
+ vertices = vertices.concat(circumVertices);
</pre>
</li>
<li>Change the value of the variable in order to calculate the central point. Render the circle with the central point and vertex location, using the <code>TRIANGLE_FAN</code> argument that allows all triangles to share a central point to make a circle.
<pre class="prettyprint">
- /* Change the angle value to change the central point coordinates */
- angle += 0.01;
-
- var triangleVerticesBuffer = gl.createBuffer();
- gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
- gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
-
- var vertexPositionAttribute = gl.getAttribLocation(program, "attVertexPos");
- gl.enableVertexAttribArray(vertexPositionAttribute);
- gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
- gl.drawArrays(gl.TRIANGLE_FAN, 0, n + 2);
- }
+ /* Change the angle value to change the central point coordinates */
+ angle += 0.01;
+
+ var triangleVerticesBuffer = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+
+ var vertexPositionAttribute = gl.getAttribLocation(program, 'attVertexPos');
+ gl.enableVertexAttribArray(vertexPositionAttribute);
+ gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
+ gl.drawArrays(gl.TRIANGLE_FAN, 0, n + 2);
+ }
</pre>
</li>
<li>Use the <code>setInterval()</code> method to set the rendering interval of the circle:
<pre class="prettyprint">
- window.setInterval(function() {draw();}, 10);
+ window.setInterval(function() {draw();}, 10);
</script>
</pre>
<li><p>Set the vertex coordinate and color buffer values to draw 2 triangles:</p>
<pre class="prettyprint">
<script>
- function setupBuffers()
- {
- var colors =
- [1.0, 0.5, 0.5,
- 1.0, 0.5, 0.5,
- 1.0, 0.5, 0.5,
-
- 1.0, 0.8, 0.0,
- 1.0, 0.8, 0.0,
- 1.0, 0.8, 0.0];
-
- triangleVerticesColorBuffer = gl.createBuffer();
- gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesColorBuffer);
- gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
- }
-
- function setupVerticesBuffer()
- {
- var vertices =
- [-0.5, 0.5, 0.0,
- 0.5, -0.5, 0.0,
- -0.5, -0.5, 0.0,
-
- 0.5, 0.5, 0.0,
- -0.5, 0.5, 0.0,
- 0.5, -0.5, 0.0];
-
- triangleVerticesBuffer = gl.createBuffer();
- gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
- gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
- }
-
- function drawScene()
- {
- vertexColorAttribute = gl.getAttribLocation(program, "attVertexColor");
- gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesColorBuffer);
- gl.enableVertexAttribArray(vertexColorAttribute);
- gl.vertexAttribPointer(vertexColorAttribute, 3, gl.FLOAT, false, 0,0);
-
- vertexPositionAttribute = gl.getAttribLocation(program, "attVertexPos");
-
- gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
- gl.enableVertexAttribArray(vertexPositionAttribute);
- gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0,0);
-
- gl.drawArrays(gl.TRIANGLES, 0, 6);
- }
+ function setupBuffers() {
+ var colors = [1.0, 0.5, 0.5,
+ 1.0, 0.5, 0.5,
+ 1.0, 0.5, 0.5,
+
+ 1.0, 0.8, 0.0,
+ 1.0, 0.8, 0.0,
+ 1.0, 0.8, 0.0];
+
+ triangleVerticesColorBuffer = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesColorBuffer);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+ }
+
+ function setupVerticesBuffer() {
+ var vertices = [-0.5, 0.5, 0.0,
+ 0.5, -0.5, 0.0,
+ -0.5, -0.5, 0.0,
+
+ 0.5, 0.5, 0.0,
+ -0.5, 0.5, 0.0,
+ 0.5, -0.5, 0.0];
+
+ triangleVerticesBuffer = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+ }
+
+ function drawScene() {
+ vertexColorAttribute = gl.getAttribLocation(program, 'attVertexColor');
+ gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesColorBuffer);
+ gl.enableVertexAttribArray(vertexColorAttribute);
+ gl.vertexAttribPointer(vertexColorAttribute, 3, gl.FLOAT, false, 0, 0);
+
+ vertexPositionAttribute = gl.getAttribLocation(program, 'attVertexPos');
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, triangleVerticesBuffer);
+ gl.enableVertexAttribArray(vertexPositionAttribute);
+ gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+
+ gl.drawArrays(gl.TRIANGLES, 0, 6);
+ }
</script>
</pre>
<p align="center"><img alt="2 triangles" src="../../../images/3d.png" /></p>
<li><p>Define the vertex shader and fragment shader with using the <code>gl_Position</code> and <code>gl_FragColor</code> variables of the <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL® ES Shading Language</a> (GLSL ES), and modify the GLSL ES variables:</p>
<pre class="prettyprint">
<script id="vshader" type="x-shader/x-vertex">
- attribute vec3 attVertexPos;
- attribute vec3 attVertexColor;
+ attribute vec3 attVertexPos;
+ attribute vec3 attVertexColor;
- uniform mat4 uMVMatrix; /* Uniform variable delivered with the model view matrix */
- uniform mat4 uPMatrix; /* Uniform variable delivered with the projection matrix */
+ uniform mat4 uMVMatrix; /* Uniform variable delivered with the model view matrix */
+ uniform mat4 uPMatrix; /* Uniform variable delivered with the projection matrix */
- varying vec4 vColor;
+ varying vec4 vColor;
- void main()
- {
- /*
- Multiply the model view matrix and projection matrix
- to the original coordinates
- */
- gl_Position = uPMatrix * uMVMatrix * vec4(attVertexPos, 1.0);
+ void main() {
+ /*
+ Multiply the model view matrix and projection matrix
+ to the original coordinates
+ */
+ gl_Position = uPMatrix * uMVMatrix * vec4(attVertexPos, 1.0);
- vColor = vec4(attVertexColor, 1.0);
- }
+ vColor = vec4(attVertexColor, 1.0);
+ }
</script>
<script id="fshader" type="x-shader/x-fragment">
- precision mediump float;
+ precision mediump float;
- varying vec4 vColor;
+ varying vec4 vColor;
- void main()
- {
- gl_FragColor = vColor;
- }
+ void main() {
+ gl_FragColor = vColor;
+ }
</script>
</pre>
<li><p>Edit the z coordinate of the right triangle to apply perspective:</p>
<pre class="prettyprint">
<script>
- gl.viewport(0, 0, canvas.width, canvas.height);
- mat4.perspective(45, canvas.width / canvas.height, 0.1, 100.0, pMatrix);
- mat4.identity(mvMatrix);
- mat4.translate(mvMatrix, [0, 0, -2.0]);
+ gl.viewport(0, 0, canvas.width, canvas.height);
+ mat4.perspective(45, canvas.width / canvas.height, 0.1, 100.0, pMatrix);
+ mat4.identity(mvMatrix);
+ mat4.translate(mvMatrix, [0, 0, -2.0]);
</script>
</pre>
</li>
<li><p>Declare the variable to store the model view matrix and projection matrix:</p>
<pre class="prettyprint">
<script>
- var mvMatrix = mat4.create();
- var pMatrix = mat4.create();
+ var mvMatrix = mat4.create();
+ var pMatrix = mat4.create();
</script>
</pre>
</li>
<li><p>Check that the location of the <code>uPMatrix</code> and <code>uMVMatrix</code> uniforms can be used in program:</p>
<pre class="prettyprint">
<script>
- function getMatrixUniforms()
- {
- pMatrixUniform = gl.getUniformLocation(program, "uPMatrix");
- mvMatrixUniform = gl.getUniformLocation(program, "uMVMatrix");
- }
-
- function setMatrixUniforms()
- {
- gl.uniformMatrix4fv(pMatrixUniform, false, pMatrix);
- gl.uniformMatrix4fv(mvMatrixUniform, false, mvMatrix);
- }
+ function getMatrixUniforms() {
+ pMatrixUniform = gl.getUniformLocation(program, 'uPMatrix');
+ mvMatrixUniform = gl.getUniformLocation(program, 'uMVMatrix');
+ }
+
+ function setMatrixUniforms() {
+ gl.uniformMatrix4fv(pMatrixUniform, false, pMatrix);
+ gl.uniformMatrix4fv(mvMatrixUniform, false, mvMatrix);
+ }
</script>
</pre>
</li>
<li><p>Define the vertex shader and fragment shader using the <code>gl_Position</code> and <code>gl_FragColor</code> variables of the <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL® ES Shading Language</a> (GLSL ES):</p>
<pre class="prettyprint">
<script id="vshader" type="x-shader/x-vertex">
- attribute vec3 attVertexPos; /* Vertex coordinate attribute */
- attribute vec2 attTextureCoord; /* Texture coordinate attribute */
-
- uniform mat4 unifMVMatrix; /* Model–view uniform */
- uniform mat4 unifPMatrix; /* Projection matrix uniform */
-
- /* Texture coordinate storing variable used in the fragment shader */
- varying vec2 vTextureCoord;
-
- void main(void)
- {
- /*
- Multiply the model-view matrix and projection matrix
- to the original coordinates to apply the 3D perspective
- */
- gl_Position = unifPMatrix * unifMVMatrix * vec4(attVertexPos, 1.0);
- /* Store the texture coordinates */
- vTextureCoord = attTextureCoord;
- }
+ attribute vec3 attVertexPos; /* Vertex coordinate attribute */
+ attribute vec2 attTextureCoord; /* Texture coordinate attribute */
+
+ uniform mat4 unifMVMatrix; /* Model–view uniform */
+ uniform mat4 unifPMatrix; /* Projection matrix uniform */
+
+ /* Texture coordinate storing variable used in the fragment shader */
+ varying vec2 vTextureCoord;
+
+ void main(void) {
+ /*
+ Multiply the model-view matrix and projection matrix
+ to the original coordinates to apply the 3D perspective
+ */
+ gl_Position = unifPMatrix * unifMVMatrix * vec4(attVertexPos, 1.0);
+ /* Store the texture coordinates */
+ vTextureCoord = attTextureCoord;
+ }
</script>
<script id="fshader" type="x-shader/x-fragment">
- /*
- Use a floating point arithmetic value to define
- the display precision (highp, mediump, or lowp)
- */
- precision mediump float;
+ /*
+ Use a floating point arithmetic value to define
+ the display precision (highp, mediump, or lowp)
+ */
+ precision mediump float;
- varying vec2 vTextureCoord;
+ varying vec2 vTextureCoord;
- uniform sampler2D unifSampler; /* Handle the cube mapped texture */
+ uniform sampler2D unifSampler; /* Handle the cube mapped texture */
- void main(void)
- {
- gl_FragColor = texture2D(unifSampler, vec2(vTextureCoord.s, vTextureCoord.t));
- }
+ void main(void) {
+ gl_FragColor = texture2D(unifSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+ }
</script>
</pre>
</li>
<li><p>Define the variables to be used and the methods to be executed when the window is loaded:</p>
<pre class="prettyprint">
<script>
- var gl = null;
- var program = null;
+ var gl = null;
+ var program = null;
- var diceTexture;
- var mvMatrix = mat4.create();
- var pMatrix = mat4.create();
+ var diceTexture;
+ var mvMatrix = mat4.create();
+ var pMatrix = mat4.create();
- var cubeVertexPositionBuffer; /* Buffer for vertex coordinate information */
- var cubeVertexTextureCoordBuffe; /* Buffer for texture coordinate information */
- var cubeVertexIndexBuffer; /* Buffer for index information */
+ var cubeVertexPositionBuffer; /* Buffer for vertex coordinate information */
+ var cubeVertexTextureCoordBuffer; /* Buffer for texture coordinate information */
+ var cubeVertexIndexBuffer; /* Buffer for index information */
- var xRot = 30;
- var yRot = 30;
+ var xRot = 30;
+ var yRot = 30;
- window.onload = startWegGL;
+ window.onload = startWegGL;
- function startWegGL()
- {
- gl = getWebGLContext();
- initShaders();
- initBuffers();
- initTexture(drawScene);
+ function startWegGL() {
+ gl = getWebGLContext();
+ initShaders();
+ initBuffers();
+ initTexture(drawScene);
- gl.clearColor(0.5,0.5,0.4,1.0);
- gl.enable(gl.DEPTH_TEST);
+ gl.clearColor(0.5, 0.5, 0.4, 1.0);
+ gl.enable(gl.DEPTH_TEST);
- initEvent();
- }
+ initEvent();
+ }
</script>
</pre>
</li>
<li><p>Use the <code>getContext()</code> method of the <code>canvas</code> object to import the WebGL™ context:</p>
<pre class="prettyprint">
<script>
- function getWebGLContext()
- {
- canvas = document.getElementById("canvas");
- var webGLContext = canvas.getContext("experimental-webgl");
+ function getWebGLContext() {
+ canvas = document.getElementById('canvas');
+ var webGLContext = canvas.getContext('experimental-webgl');
- return webGLContext;
- }
+ return webGLContext;
+ }
</script>
<body>
<li><p>Create the shaders and programs using the <code>createShader()</code> and <code>createProgram()</code> methods:</p>
<pre class="prettyprint lang-js">
<script>
- function initShaders()
- {
- var vshader = gl.createShader(gl.VERTEX_SHADER);
- var fshader = gl.createShader(gl.FRAGMENT_SHADER);
- gl.shaderSource(vshader, document.getElementById('vshader').text);
- gl.shaderSource(fshader, document.getElementById('fshader').text);
- gl.compileShader(vshader);
- gl.compileShader(fshader);
-
- program = gl.createProgram();
- gl.attachShader(program, vshader);
- gl.attachShader(program, fshader);
- gl.linkProgram(program); /* Link to program */
- gl.useProgram(program); /* Shaders are loaded and used */
-
- program.vertexPositionAttribute = gl.getAttribLocation(program, "attVertexPos");
- gl.enableVertexAttribArray(program.vertexPositionAttribute);
-
- program.textureCoordAttribute =
- gl.getAttribLocation(program, "attTextureCoord");
- gl.enableVertexAttribArray(program.textureCoordAttribute);
-
- program.pMatrixUniform = gl.getUniformLocation(program, "unifPMatrix");
- program.mvMatrixUniform = gl.getUniformLocation(program, "unifMVMatrix");
+ function initShaders() {
+ var vshader = gl.createShader(gl.VERTEX_SHADER);
+ var fshader = gl.createShader(gl.FRAGMENT_SHADER);
+ gl.shaderSource(vshader, document.getElementById('vshader').text);
+ gl.shaderSource(fshader, document.getElementById('fshader').text);
+ gl.compileShader(vshader);
+ gl.compileShader(fshader);
+
+ program = gl.createProgram();
+ gl.attachShader(program, vshader);
+ gl.attachShader(program, fshader);
+ gl.linkProgram(program); /* Link to program */
+ gl.useProgram(program); /* Shaders are loaded and used */
+
+ program.vertexPositionAttribute = gl.getAttribLocation(program, 'attVertexPos');
+ gl.enableVertexAttribArray(program.vertexPositionAttribute);
+
+ program.textureCoordAttribute = gl.getAttribLocation(program, 'attTextureCoord');
+ gl.enableVertexAttribArray(program.textureCoordAttribute);
+
+ program.pMatrixUniform = gl.getUniformLocation(program, 'unifPMatrix');
+ program.mvMatrixUniform = gl.getUniformLocation(program, 'unifMVMatrix');
</pre>
</li>
<li>To send the loaded texture image to the shader program, and add a reference to the shader program <code>unifSampler</code> location:
<pre class="prettyprint">
- program.samplerUniform = gl.getUniformLocation(program, "unifSampler");
- }
+ program.samplerUniform = gl.getUniformLocation(program, 'unifSampler');
+ }
</pre>
</li>
<li><p>Initialize the buffer:</p>
<pre class="prettyprint">
- function initBuffers()
- {
- vertices =
- /* Front */
- [-1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0,
- /* Back */
- -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0,
- /* Top */
- -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0,
- /* Bottom */
- -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0,
- /* Right */
- 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0,
- /* Left */
- -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0];
- cubeVertexPositionBuffer = gl.createBuffer();
- gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
- /* Convert to Float32Array */
- gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
- cubeVertexPositionBuffer.itemSize = 3;
- cubeVertexPositionBuffer.numItems = 24;
-
- var textureCoords =
- [0.0, 0.5, 0.25, 0.5, 0.25, 1.0, 0.0, 1.0, /* Front */
- 0.5, 0.5, 0.75, 0.5, 0.75, 1.0, 0.5, 1.0, /* Back */
- 0.0, 0.5, 0.25, 0.5, 0.25, 0.0, 0.0, 0.0, /* Top */
- 0.25, 0.5, 0.5, 0.5, 0.5, 0.0, 0.25, 0.0, /* Bottom */
- 0.25, 0.5, 0.5, 0.5, 0.5, 1.0, 0.25, 1.0, /* Right */
- 0.75, 0.5, 1.0, 0.5, 1.0, 1.0, 0.75, 1.0]; /* Left */
- cubeVertexTextureCoordBuffer = gl.createBuffer();
- gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
- gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords),
- gl.STATIC_DRAW);
- cubeVertexTextureCoordBuffer.itemSize = 2;
- cubeVertexTextureCoordBuffer.numItems = 24;
-
- cubeVertexIndexBuffer = gl.createBuffer();
- gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
- var cubeVertexIndices =
- [0, 1, 2, 0, 2, 3, /* Front */
- 4, 5, 6, 4, 6, 7, /* Back */
- 8, 9, 10, 8, 10, 11, /* Top */
- 12, 13, 14, 12, 14, 15, /* Bottom */
- 16, 17, 18, 16, 18, 19, /* Right */
- 20, 21, 22, 20, 22, 23]; /* Left */
-
- gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices),
- gl.STATIC_DRAW);
- cubeVertexIndexBuffer.itemSize = 1;
- cubeVertexIndexBuffer.numItems = 36;
- }
+ function initBuffers() {
+ vertices = [-1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, /* Front */
+ -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, /* Back */
+ -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, /* Top */
+ -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, /* Bottom */
+ 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, /* Right */
+ -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0]; /* Left */
+ cubeVertexPositionBuffer = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
+ /* Convert to Float32Array */
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+ cubeVertexPositionBuffer.itemSize = 3;
+ cubeVertexPositionBuffer.numItems = 24;
+
+ var textureCoords = [0.0, 0.5, 0.25, 0.5, 0.25, 1.0, 0.0, 1.0, /* Front */
+ 0.5, 0.5, 0.75, 0.5, 0.75, 1.0, 0.5, 1.0, /* Back */
+ 0.0, 0.5, 0.25, 0.5, 0.25, 0.0, 0.0, 0.0, /* Top */
+ 0.25, 0.5, 0.5, 0.5, 0.5, 0.0, 0.25, 0.0, /* Bottom */
+ 0.25, 0.5, 0.5, 0.5, 0.5, 1.0, 0.25, 1.0, /* Right */
+ 0.75, 0.5, 1.0, 0.5, 1.0, 1.0, 0.75, 1.0]; /* Left */
+ cubeVertexTextureCoordBuffer = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
+ cubeVertexTextureCoordBuffer.itemSize = 2;
+ cubeVertexTextureCoordBuffer.numItems = 24;
+
+ cubeVertexIndexBuffer = gl.createBuffer();
+ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
+ var cubeVertexIndices = [0, 1, 2, 0, 2, 3, /* Front */
+ 4, 5, 6, 4, 6, 7, /* Back */
+ 8, 9, 10, 8, 10, 11, /* Top */
+ 12, 13, 14, 12, 14, 15, /* Bottom */
+ 16, 17, 18, 16, 18, 19, /* Right */
+ 20, 21, 22, 20, 22, 23]; /* Left */
+
+ gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
+ cubeVertexIndexBuffer.itemSize = 1;
+ cubeVertexIndexBuffer.numItems = 36;
+ }
</pre>
</li>
<li><p>Initialize the WebGL™ texture and load the image to be used as the texture (the figure shows the coordinates of the image to be loaded):</p>
<pre class="prettyprint">
- function initTexture(callback)
- {
- textureImage = new Image();
- textureImage.onload = function()
- {
- handleLoadedTexture(textureImage)
- if (callback) callback();
- }
- textureImage.src = "images/dice.gif";
- }
-
- function handleLoadedTexture(textureImage)
- {
- diceTexture = gl.createTexture();
- gl.bindTexture(gl.TEXTURE_2D, diceTexture);
-
- gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
- gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,
- gl.UNSIGNED_BYTE, textureImage);
-
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
- }
+ function initTexture(callback) {
+ textureImage = new Image();
+ textureImage.onload = function() {
+ handleLoadedTexture(textureImage)
+ if (callback) callback();
+ };
+ textureImage.src = 'images/dice.gif';
+ }
+
+ function handleLoadedTexture(textureImage) {
+ diceTexture = gl.createTexture();
+ gl.bindTexture(gl.TEXTURE_2D, diceTexture);
+
+ gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+ gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImage);
+
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+ }
</pre>
<p align="center"><img alt="Image and coordinate of image to be loaded" src="../../../images/dice.png" /></p>
</li>
<li><p>Define the rendering location and canvas width and height:</p>
<pre class="prettyprint lang-js">
- function drawScene()
- {
- gl.viewport(0, 0, canvas.width, canvas.height);
- gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); /* Clear the canvas */
+ function drawScene() {
+ gl.viewport(0, 0, canvas.width, canvas.height);
+ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); /* Clear the canvas */
</pre>
</li>
</div>
<pre class="prettyprint lang-js">
- mat4.perspective(45, canvas.width / canvas.height, 0.1, 100.0, pMatrix);
- mat4.identity(mvMatrix);
+ mat4.perspective(45, canvas.width / canvas.height, 0.1, 100.0, pMatrix);
+ mat4.identity(mvMatrix);
- mat4.translate(mvMatrix, [0.0, 0.0, -5.0]);
+ mat4.translate(mvMatrix, [0.0, 0.0, -5.0]);
- mat4.rotate(mvMatrix, xRot * Math.PI / 180, [1, 0, 0]);
- mat4.rotate(mvMatrix, yRot * Math.PI / 180, [0, 1, 0]);
+ mat4.rotate(mvMatrix, xRot * Math.PI / 180, [1, 0, 0]);
+ mat4.rotate(mvMatrix, yRot * Math.PI / 180, [0, 1, 0]);
- gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
- gl.vertexAttribPointer(program.vertexPositionAttribute,
- cubeVertexPositionBuffer.itemSize,
- gl.FLOAT, false, 0, 0);
+ gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
+ gl.vertexAttribPointer(program.vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
- gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
- gl.vertexAttribPointer(program.textureCoordAttribute,
- cubeVertexTextureCoordBuffer.itemSize,
- gl.FLOAT, false, 0, 0);
+ gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
+ gl.vertexAttribPointer(program.textureCoordAttribute, cubeVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
- gl.activeTexture(gl.TEXTURE0);
- gl.bindTexture(gl.TEXTURE_2D, diceTexture);
- gl.uniform1i(program.samplerUniform, 0);
+ gl.activeTexture(gl.TEXTURE0);
+ gl.bindTexture(gl.TEXTURE_2D, diceTexture);
+ gl.uniform1i(program.samplerUniform, 0);
- gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
+ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
- gl.uniformMatrix4fv(program.pMatrixUniform, false, pMatrix);
- gl.uniformMatrix4fv(program.mvMatrixUniform, false, mvMatrix);
+ gl.uniformMatrix4fv(program.pMatrixUniform, false, pMatrix);
+ gl.uniformMatrix4fv(program.mvMatrixUniform, false, mvMatrix);
- gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems,
- gl.UNSIGNED_SHORT, 0);
- }
+ gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
+ }
</pre>
</li>
<li><p>Add touch events:</p>
<pre class="prettyprint">
- var touches;
- function initEvent()
- {
- var startPosX;
- var startPosY;
- var movedPosX;
- var movedPosY;
-
- function mouseMoveHandler(e)
- {
- movedPosX = e.touches[0].pageX - startPosX;
- movedPosY = e.touches[0].pageY - startPosY;
- xRot += movedPosY * 0.05;
- yRot += movedPosX * 0.05;
-
- drawScene();
- }
-
- canvas.addEventListener('touchstart', function(e)
- {
+ var touches;
+ function initEvent() {
+ var startPosX;
+ var startPosY;
+ var movedPosX;
+ var movedPosY;
+
+ function mouseMoveHandler(e) {
+ movedPosX = e.touches[0].pageX - startPosX;
+ movedPosY = e.touches[0].pageY - startPosY;
+ xRot += movedPosY * 0.05;
+ yRot += movedPosX * 0.05;
+
+ drawScene();
+ }
+
+ canvas.addEventListener('touchstart', function(e) {
touches = e.touches.item(0);
startPosX = touches.pageX;
startPosY = touches.pageY;
canvas.addEventListener('touchmove', mouseMoveHandler)
- });
+ });
- canvas.addEventListener('touchend', function(e)
- {
+ canvas.addEventListener('touchend', function(e) {
canvas.removeEventListener('touchmove', mouseMoveHandler)
- })
+ });
- canvas.addEventListener('touchend', function()
- {
+ canvas.addEventListener('touchend', function() {
canvas.removeEventListener('touchmove', mouseMoveHandler)
- });
- }
+ });
+ }
</script>
</pre>
</li></ol>
<div>
<span id='webGLContainer'></span>
<span>
- <table style='padding: 0px; background: black' border="1"
- cellspacing="0" cellpadding="5">
+ <table style='padding: 0px; background: black' border="1" cellspacing="0" cellpadding="5">
<tr>
<td colspan="2" class="hd"><b>directionalLight</b></td>
</tr>
<tr>
<td align='right'>X:</td>
- <td width='150px'>
- <input id="slider-lx" type="range"
- min="-1" max="1" step="0.01"/>
- </td>
+ <td width='150px'><input id="slider-lx" type="range" min="-1" max="1" step="0.01"/></td>
</tr>
<tr>
<td align='right'>Y:</td>
- <td width='150px'>
- <input id="slider-ly" type="range"
- min="-1" max="1" step="0.01"/>
- </td>
+ <td width='150px'><input id="slider-ly" type="range" min="-1" max="1" step="0.01"/></td>
</tr>
<tr>
<td align='right'>Z:</td>
- <td width='150px'>
- <input id="slider-lz" type="range"
- min="-1" max="1" step="0.01"/>
- </td>
+ <td width='150px'><input id="slider-lz" type="range" min="-1" max="1" step="0.01"/></td>
</tr>
<tr>
<td colspan="2" class="hd"><b>Camera</b></td>
</tr>
<tr>
<td align='right'>Z:</td>
- <td width='150px'>
- <input id="slider-cz" type="range"
- min="300" max="800" step="10"/>
- </td>
+ <td width='150px'><input id="slider-cz" type="range" type="range" min="300" max="800" step="10"/></td>
</tr>
<tr>
<td align='right'>rotate-X:</td>
- <td width='150px'>
- <input id="slider-cax" type="range"
- min="-0.5" max="0.5" step="0.01"/>
- </td>
+ <td width='150px'><input id="slider-cax" type="range" min="-0.5" max="0.5" step="0.01"/></td>
</tr>
<tr>
<td align='right'>rotate-Y:</td>
- <td width='150px'>
- <input id="slider-cay" type="range"
- min="-0.5" max="0.5" step="0.01"/>
- </td>
+ <td width='150px'><input id="slider-cay" type="range" min="-0.5" max="0.5" step="0.01"/></td>
</tr>
</table>
</span>
<li><p>Define the variables to be used and the methods to be executed when the window is loaded. Once the window load is complete, import the <code>startWebGl()</code> method.</p>
<pre class="prettyprint lang-js">
<script>
- var canvasWidth = 250; /* Canvas width */
- var canvasHeight = 250; /* Canvas height */
-
- var renderer = null; /* Variable containing the WebGLRenderer object */
- var camera = null; /* Variable containing the PerspectiveCamera object */
- var scene = null; /* Variable containing the Scene object */
-
- /*
- Object type variable containing, for example,
- light and mesh information
- */
- var components = {};
-
- window.onload = startWegGL;
-
- function startWegGL()
- {
- setupWebGLRenderer();
- setupCamera();
- setupScene();
-
- animate();
- manipulate();
- }
+ var canvasWidth = 250; /* Canvas width */
+ var canvasHeight = 250; /* Canvas height */
+
+ var renderer = null; /* Variable containing the WebGLRenderer object */
+ var camera = null; /* Variable containing the PerspectiveCamera object */
+ var scene = null; /* Variable containing the Scene object */
+
+ /*
+ Object type variable containing, for example,
+ light and mesh information
+ */
+ var components = {};
+
+ window.onload = startWegGL;
+
+ function startWegGL() {
+ setupWebGLRenderer();
+ setupCamera();
+ setupScene();
+
+ animate();
+ manipulate();
+ }
</pre>
</li>
<li><p>Create a new <code>WebGLRenderer</code> instance and, after setting the canvas size, add the <code>domElement</code> to the designated HTML location:</p>
<pre class="prettyprint">
- function setupWebGLRenderer()
- {
- renderer = new THREE.WebGLRenderer();
- renderer.setSize(canvasWidth, canvasHeight);
-
- /* Add the canvas element to HTML */
- document.getElementById('webGLContainer').appendChild(renderer.domElement);
- }
+ function setupWebGLRenderer() {
+ renderer = new THREE.WebGLRenderer();
+ renderer.setSize(canvasWidth, canvasHeight);
+
+ /* Add the canvas element to HTML */
+ document.getElementById('webGLContainer').appendChild(renderer.domElement);
+ }
</pre>
</li>
<li><p>Create a new <code>PerspectiveCamera</code> instance:</p>
<pre class="prettyprint">
- function setupCamera()
- {
- camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 1000);
- camera.position.z = 500;
- }
+ function setupCamera() {
+ camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 1000);
+ camera.position.z = 500;
+ }
</pre>
<div class="note">
<li><p>Create a new <code>Scene</code> instance and create the mesh and light elements using the <code>createMeshs()</code> and <code>setupLight()</code> methods:</p>
<pre class="prettyprint">
- function setupScene()
- {
- scene = new THREE.Scene();
- createMeshs();
- setupLight();
-
- /*
- Circulate components and add the mesh
- and light elements to the scene object
- */
- for (n in components)
- {
- scene.add(components[n]);
- }
- }
-
- function createMeshs()
- {
- /* Create the cube mesh */
- components.cubeMesh = (function()
- {
- var cube =
- new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100),
- new THREE.MeshLambertMaterial({color: new THREE.Color(0xff8080)}));
- cube.overdraw = true;
- cube.rotation.x = Math.PI * 0.1;
- cube.position.x = -50;
-
- return cube;
- })();
-
- /* Create the sphere mesh */
- components.sphereMesh = (function()
- {
- var sphere =
- new THREE.Mesh(new THREE.SphereGeometry(50, 40, 40),
- new THREE.MeshLambertMaterial({color: new THREE.Color(0xff8080)}));
- sphere.overdraw = true;
- sphere.position.x = 50;
- sphere.position.z = 50;
-
- return sphere;
- })();
-
- /* Create the plane mesh */
- components.planeMesh = (function()
- {
- var plane =
- new THREE.Mesh(new THREE.PlaneGeometry(300, 300, 10,0),
- new THREE.MeshLambertMaterial({color:'red'}));
- plane.overdraw = true;
- plane.position.y = -100;
- plane.rotation.x = Math.PI * -0.4;
-
- return plane;
- })();
- }
-
- function setupLight()
- {
- /* Create a new DirectionalLight instance */
- var directionalLight = new THREE.DirectionalLight(0xffffff);
- /* Set the DirectionalLight location */
- directionalLight.position.set(0, 0, 1).normalize();
- /* Set directionalLight as a component element */
- components.directionalLight = directionalLight;
-
- /* Create a new AmbientLight instance and set it as a component element */
- components.ambientLight = new THREE.AmbientLight(0x915656);
- }
+ function setupScene() {
+ scene = new THREE.Scene();
+ createMeshs();
+ setupLight();
+
+ /*
+ Circulate components and add the mesh
+ and light elements to the scene object
+ */
+ for (n in components) {
+ scene.add(components[n]);
+ }
+ }
+
+ function createMeshs() {
+ /* Create the cube mesh */
+ components.cubeMesh = (function() {
+ var cube = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100),
+ new THREE.MeshLambertMaterial({color: new THREE.Color(0xff8080)}));
+ cube.overdraw = true;
+ cube.rotation.x = Math.PI * 0.1;
+ cube.position.x = -50;
+
+ return cube;
+ })();
+
+ /* Create the sphere mesh */
+ components.sphereMesh = (function() {
+ var sphere = new THREE.Mesh(new THREE.SphereGeometry(50, 40, 40),
+ new THREE.MeshLambertMaterial({color: new THREE.Color(0xff8080)}));
+ sphere.overdraw = true;
+ sphere.position.x = 50;
+ sphere.position.z = 50;
+
+ return sphere;
+ })();
+
+ /* Create the plane mesh */
+ components.planeMesh = (function() {
+ var plane = new THREE.Mesh(new THREE.PlaneGeometry(300, 300, 10, 0),
+ new THREE.MeshLambertMaterial({color:'red'}));
+ plane.overdraw = true;
+ plane.position.y = -100;
+ plane.rotation.x = Math.PI * -0.4;
+
+ return plane;
+ })();
+ }
+
+ function setupLight() {
+ /* Create a new DirectionalLight instance */
+ var directionalLight = new THREE.DirectionalLight(0xffffff);
+ /* Set the DirectionalLight location */
+ directionalLight.position.set(0, 0, 1).normalize();
+ /* Set directionalLight as a component element */
+ components.directionalLight = directionalLight;
+
+ /* Create a new AmbientLight instance and set it as a component element */
+ components.ambientLight = new THREE.AmbientLight(0x915656);
+ }
</pre>
</li>
<li><p>Add an animation:</p>
<pre class="prettyprint">
- function animate()
- {
- var speed= 0.2;
- var lastTime = 0;
- var angle = 0.0;
-
- (function moveWebGLObject()
- {
- /* Update */
- var time = (new Date()).getTime();
- var timeDiff = time - lastTime;
- var angleChange = speed * timeDiff * 2 * Math.PI / 1000;
- components.cubeMesh.rotation.x =
- components.cubeMesh.rotation.z =
- components.cubeMesh.rotation.y += angleChange;
-
- var range = Math.sin(angle);
- if (range < 0)
- {
- range *=-1;
- }
- components.sphereMesh.position.y = range * 200 - 50;
-
- lastTime = time;
-
- /* Render */
- renderer.render(scene, camera);
-
- /* Request a new frame */
- requestAnimationFrame(function()
- {
- moveWebGLObject();
- });
-
- angle += 0.03;
- })();
- }
+ function animate() {
+ var speed= 0.2;
+ var lastTime = 0;
+ var angle = 0.0;
+
+ (function moveWebGLObject() {
+ /* Update */
+ var time = (new Date()).getTime();
+ var timeDiff = time - lastTime;
+ var angleChange = speed * timeDiff * 2 * Math.PI / 1000;
+ components.cubeMesh.rotation.x = components.cubeMesh.rotation.z = components.cubeMesh.rotation.y += angleChange;
+
+ var range = Math.sin(angle);
+ if (range < 0) {
+ range *=-1;
+ }
+ components.sphereMesh.position.y = range * 200 - 50;
+
+ lastTime = time;
+
+ /* Render */
+ renderer.render(scene, camera);
+
+ /* Request a new frame */
+ requestAnimationFrame(function() {
+ moveWebGLObject();
+ });
+
+ angle += 0.03;
+ })();
+ }
</pre>
</li>
<li><p>Adjust the camera and light location using events in the <code>manipulate()</code> method:</p>
<pre class="prettyprint">
- function manipulate()
- {
- /*
- Search for the HTML <input type='range'> element
- as the ID value and store it in the variable
- */
- var sliderLx = document.getElementById('slider-lx');
- var sliderLy = document.getElementById('slider-ly');
- var sliderLz = document.getElementById('slider-lz');
-
- var sliderCz = document.getElementById('slider-cz');
-
- var sliderCax = document.getElementById('slider-cax');
- var sliderCay = document.getElementById('slider-cay');
-
- /* Add an event listener to each <input type='range'> element */
- sliderLx.addEventListener('change', function(){changeLightDirection(this,"x")});
- sliderLy.addEventListener('change', function(){changeLightDirection(this,"y")});
- sliderLz.addEventListener('change', function(){changeLightDirection(this,"z")});
-
- sliderCz.addEventListener('change', function(){changeCameraDirection(this,"z")});
-
- sliderCax.addEventListener('change', function(){changeCameraAngle(this,"x")});
- sliderCay.addEventListener('change', function(){changeCameraAngle(this,"y")});
-
- /*
- When a change occurs, a related event is fired,
- and the axis parameter is handled
- */
-
- function changeLightDirection(target, axis)
- {
- components.directionalLight.position[axis] = target.value;
- components.directionalLight.position.set(components.directionalLight.position.x,
- components.directionalLight.position.y,
- components.directionalLight.position.z).normalize();
- }
-
- function changeCameraDirection(target, axis)
- {
- camera.position[axis] = target.value;
- }
-
- function changeCameraAngle(target, axis)
- {
- camera.rotation[axis] = target.value;
- }
- }
+ function manipulate() {
+ /*
+ Search for the HTML <input type='range'> element
+ as the ID value and store it in the variable
+ */
+ var sliderLx = document.getElementById('slider-lx');
+ var sliderLy = document.getElementById('slider-ly');
+ var sliderLz = document.getElementById('slider-lz');
+
+ var sliderCz = document.getElementById('slider-cz');
+
+ var sliderCax = document.getElementById('slider-cax');
+ var sliderCay = document.getElementById('slider-cay');
+
+ /* Add an event listener to each <input type='range'> element */
+ sliderLx.addEventListener('change', function(){changeLightDirection(this, 'x')});
+ sliderLy.addEventListener('change', function(){changeLightDirection(this, 'y')});
+ sliderLz.addEventListener('change', function(){changeLightDirection(this, 'z')});
+
+ sliderCz.addEventListener('change', function(){changeCameraDirection(this, 'z')});
+
+ sliderCax.addEventListener('change', function(){changeCameraAngle(this, 'x')});
+ sliderCay.addEventListener('change', function(){changeCameraAngle(this, 'y')});
+
+ /*
+ When a change occurs, a related event is fired,
+ and the axis parameter is handled
+ */
+
+ function changeLightDirection(target, axis) {
+ components.directionalLight.position[axis] = target.value;
+ components.directionalLight.position.set(components.directionalLight.position.x,
+ components.directionalLight.position.y,
+ components.directionalLight.position.z).normalize();
+ }
+
+ function changeCameraDirection(target, axis) {
+ camera.position[axis] = target.value;
+ }
+
+ function changeCameraAngle(target, axis) {
+ camera.rotation[axis] = target.value;
+ }
+ }
</script>
</pre>
</li></ol>
<pre class="prettyprint">
<style type="text/css">
- @-webkit-keyframes boxani
- {
+ @-webkit-keyframes boxani {
from {left: 0; top: 0;}
to {left: 100px; top: 100px;}
}
- @-webkit-keyframes boxani_case01
- {
+ @-webkit-keyframes boxani_case01 {
0% {left: 0; top: 0;}
25% {left: 100px; top: 0;}
50% {left: 100px; top: 100px;}
<pre class="prettyprint lang-html">
<head>
<style type="text/css">
- .box
- {
+ .box {
-webkit-animation-name: boxani;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-fill-mode: none;
}
- .box.case01: hover
- {
+ .box.case01: hover {
-webkit-animation-play-state: paused;
-webkit-animation-fill-mode: forwards;
}
<pre class="prettyprint">
<style type="text/css">
- .box
- {
+ .box {
width: 150px; height: 100px; background: Coral; position: relative;
-webkit-animation: boxani 3s ease 1s infinite alternate backwards;
}
<li>To ensure that all the animation elements are played within the same time frame, some common properties are defined for the animation. The animation movement time is 7 seconds, and the animation repeats infinitely.
<p>When an animation that repeats itself is activated, it can look unnatural when it suddenly returns to its initial position after finishing an iteration. To make the repetition move naturally, set the <code>animation-direction</code> property to <code>alternate</code>. The alternate direction means that during the odd iterations the animation proceeds in the normal direction (from the 0% keyframe to the 100% keyframe), while during the even iterations the keyframes are played in the opposite direction from 100% to 0%.</p>
<pre class="prettyprint">
-.tizen-txt, .tizen-logo
-{
+.tizen-txt, .tizen-logo {
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
<li>During the 50 - 100% of the playing time, the values do not change, and the logo remains in its new position.</li>
</ul>
<pre class="prettyprint">
-@-webkit-keyframes tizen-logo
-{
+@-webkit-keyframes tizen-logo {
0% {width: 220px; height: 211px; left: 30px; top: -61px; opacity: 0;}
25% {width: 220px; height: 211px; left: 30px; top: -61px; opacity: 1;}
50% {left: 247px; top: 0px; width: 33px; height: 32px; opacity: 1;}
<p>To show the letters one at a time, the timing is pushed back a bit more for each consecutive letter:</p>
<pre class="prettyprint">
<!--Letter T-->
-@-webkit-keyframes tizen-txt-t
-{
+@-webkit-keyframes tizen-txt-t {
0% {left: 340px; top: 31px;}
30% {left: 340px; top: 31px; animation-timing-function: ease-in;}
40% {left: -10px; top: 31px; animation-timing-function: ease-out;}
}
<!--Letter I-->
-@-webkit-keyframes tizen-txt-i
-{
+@-webkit-keyframes tizen-txt-i {
0% {left: 340px; top: 31px;}
40% {left: 340px; top: 31px; animation-timing-function: ease-in;}
50% {left: 47px; top: 31px; animation-timing-function: ease-out;}
<li><p>After creating all the keyframes, define the <code>animation-name</code> property for each element:</p>
<pre class="prettyprint">
-.tizen-txt.t
-{
+.tizen-txt.t {
-webkit-animation-name: tizen-txt-t;
}
-.tizen-txt.i
-{
+.tizen-txt.i {
-webkit-animation-name: tizen-txt-i;
}
</pre></li>
<pre class="prettyprint">
<!--Background color-->
-#one
-{
+#one {
width: 180px;
height: 40px;
background-color: lightblue;
}
<!--Background image-->
-#one
-{
+#one {
width: 200px;
height: 100px;
background-color: #00F;
}
<!--Multiple images-->
-#multi
-{
+#multi {
width: 155px;
height: 100px;
border: 1px solid #000;
}
<!--Shading and border with rounded corners-->
-#shading
-{
+#shading {
width: 160px;
height: 40px;
border: 1px solid #000;
<li>Define the needed styles for the <code>div</code> element in the <code><head></code> section using the <code>parallelexample</code> ID.
<p>Define a background using the prepared images in the correct order. The images are shown in the order they have been added, with the first image on the topmost layer. Use the same order when defining the background position for each image.</p>
<pre class="prettyprint">
-#parallelexample
-{
+#parallelexample {
width: 300px;
height: 300px;
background-image: url(tizen2_32.png), url(tizen3_32.png), url(dot.png);
</pre></li>
<li>To create the parallax effect, create a method that moves the background layers by changing the horizontal position values of the images in the <code>div</code> element. To determine the position value change, add an <code>onchange</code> event handler for the slider to determine the change based on the slider handle movement.
<pre class="prettyprint">
-function moveLayers()
-{
- /* Get slider value */
- var poz = document.getElementById('position');
- /* Get the div element */
- var example = document.getElementById('ParallaxExamle');
- /* Add the event handler */
- poz.onchange = function()
- {
- var layer1 = this.value/8, layer2 = this.value/16;
- example.style.backgroundPosition =
- layer1 +'em 8em, ' + layer2 + 'em 4em, center top';
- }
+function moveLayers() {
+ /* Get slider value */
+ var poz = document.getElementById('position');
+ /* Get the div element */
+ var example = document.getElementById('ParallaxExamle');
+ /* Add the event handler */
+ poz.onchange = function() {
+ var layer1 = this.value/8, layer2 = this.value/16;
+ example.style.backgroundPosition = layer1 +'em 8em, ' +
+ layer2 + 'em 4em, center top';
+ };
}
</pre></li></ol>
<h3>Source Code</h3>
<fieldset>
<legend>required and optional</legend>
<label>email: <input type="email" required ></label>
- <label>password:
- <input type="Password" placeholder="required area" required >
- </label>
+ <label>password: <input type="Password" placeholder="required area" required ></label>
<label>date: <input type="date" placeholder="You know what to do, huh?"></label>
<textarea placeholder="Comment"></textarea>
<li>To handle text that exceeds the area of the box model, use the <code>text-overflow</code> property. The <code>text-overflow: ellipsis</code> property is used to indicate the text exceeded the padding area as '...'.
<pre class="prettyprint">
-div
-{
+div {
width: 250px;
margin: 20px auto;
padding: 20px 30px;
<li> Add an event listener to detect the <code>copy</code> event:
<pre class="prettyprint lang-js">
<script>
- document.addEventListener("copy", function(e)
- {
- copyHandler(e);
- }, false);
+ document.addEventListener('copy', function(e) {
+ copyHandler(e);
+ }, false);
</pre>
</li>
<li><p>When you start copying, the <code>copy</code> event is fired and the <code>copyHandler()</code> method is called.</p>
<p>Stop the system clipboard basic operation and set the range you want to copy:</p>
<pre class="prettyprint">
- function copyHandler(e)
- {
- e.preventDefault();
+ function copyHandler(e) {
+ e.preventDefault();
- var range = window.getSelection();
+ var range = window.getSelection();
</pre>
<div class="note">
</li>
<li>Store the data of the selected range:
<pre class="prettyprint">
- e.clipboardData.setData("text/plain", range);
- };
+ e.clipboardData.setData('text/plain', range);
+ }
</script>
</pre>
</li>
<li> Add an event listener to detect the <code>cut</code> event:
<pre class="prettyprint lang-js">
<script>
- document.addEventListener("cut", function(e)
- {
- cutHandler(e);
- }, false);
+ document.addEventListener('cut', function(e) {
+ cutHandler(e);
+ }, false);
</pre>
</li>
<li><p>When you start cutting, the <code>cut</code> event is fired and the <code>cutHandler()</code> method is called.</p>
<p>Stop the system clipboard basic operation and set the range you want to cut:</p>
<pre class="prettyprint">
- function cutHandler(e)
- {
- e.preventDefault();
+ function cutHandler(e) {
+ e.preventDefault();
- var range = window.getSelection();
+ var range = window.getSelection();
</pre>
</li>
<li>Store the data of the selected range:
<pre class="prettyprint">
- e.clipboardData.setData("text/plain", range);
- };
+ e.clipboardData.setData('text/plain', range);
+ }
</script>
</pre>
<li> Add an event listener to detect the <code>paste</code> event:
<pre class="prettyprint lang-js">
<script>
- document.addEventListener("paste", function(e)
- {
- pasteHandler(e);
- }, false);
+ document.addEventListener('paste', function(e) {
+ pasteHandler(e);
+ }, false);
</pre>
</li>
<li><p>When you start pasting, the <code>paste</code> event is fired and the <code>pasteHandler()</code> method is called.</p>
<p>Stop the system clipboard basic operation:</p>
<pre class="prettyprint">
- function pasteHandler(e)
- {
- e.preventDefault();
+ function pasteHandler(e) {
+ e.preventDefault();
</pre>
</li>
<li>Paste the clipboard data to the target using the <code>getData()</code> method:
<pre class="prettyprint">
- pasteTarget.innerHTML = e.clipboardData.getData("text/plain");
- };
+ pasteTarget.innerHTML = e.clipboardData.getData('text/plain');
+ }
</script>
</pre>
</li>
</head>
<body>
<h1>Clipboard API</h1>
- <div style="width: 300px; height: 100px;
- border: 1px solid #d9d9d9" contenteditable >
+ <div style="width: 300px; height: 100px; border: 1px solid #d9d9d9" contenteditable >
Edit Section
</div>
<div class="target">
This specification defines the common clipboard operations of cutting,
copying and pasting, in such a way that they are exposed to Web Applications
and can be adapted to provide advanced functionalities.
- Its goal is to provide for compatibility where possible
- with existing implementations.
+ Its goal is to provide for compatibility where possible with existing implementations.
</div>
<body>
</pre>
<li><p>Add event listeners to detect the <code>copy</code> and <code>paste</code> events:</p>
<pre class="prettyprint lang-js">
<script>
- var pasteTarget = document.getElementById("target");
- var evLogBox = document.getElementById("ev-log");
-
- document.addEventListener("copy", function(e)
- {
- copyHandler(e);
- }, false);
-
- document.addEventListener("paste", function(e)
- {
- pasteHandler(e);
- }, false);
+ var pasteTarget = document.getElementById('target');
+ var evLogBox = document.getElementById('ev-log');
+
+ document.addEventListener('copy', function(e) {
+ copyHandler(e);
+ }, false);
+
+ document.addEventListener('paste', function(e) {
+ pasteHandler(e);
+ }, false);
</pre>
</li>
<li>When the <code>copy</code> event occurs, stop the system clipboard basic operation and set the range you want to copy:
<pre class="prettyprint">
- function copyHandler(e)
- {
- e.preventDefault();
+ function copyHandler(e) {
+ e.preventDefault();
- var range = window.getSelection();
+ var range = window.getSelection();
</pre>
</li>
<li>Store the data of the selected range:
<pre class="prettyprint">
- e.clipboardData.setData("text/plain", range);
- evLogBox.innerHTML = "Event log: copy";
- };
+ e.clipboardData.setData('text/plain', range);
+ evLogBox.innerHTML = 'Event log: copy';
+ }
</pre>
</li>
<li>When the <code>paste</code> event occurs, stop the system clipboard basic operation and paste the clipboard data to the target using the <code>getData()</code> method:
<pre class="prettyprint">
- function pasteHandler(e)
- {
- e.preventDefault();
+ function pasteHandler(e) {
+ e.preventDefault();
- pasteTarget.innerHTML = e.clipboardData.getData("text/plain");
- evLogBox.innerHTML = "Event log: paste";
- };
+ pasteTarget.innerHTML = e.clipboardData.getData('text/plain');
+ evLogBox.innerHTML = 'Event log: paste';
+ }
</script>
</pre>
</li>
<pre class="prettyprint">
<!--Keywords-->
-#one
-{
+#one {
color: blue;
background: white;
border: 1px solid springgreen;
}
-#one span
-{
+#one span {
background: currentColor;
}
-#one span.hide
-{
+#one span.hide {
color: transparent;
}
<!--RGB-->
-#two
-{
+#two {
color: #ff0000;
}
<!--RGBA-->
-#three
-{
+#three {
color: rgba(100%, 0, 0, 0.5);
}
<!--HSL-->
-#four
-{
+#four {
color: hsl(0, 100%, 50%);
}
<!--HSLA-->
-#five
-{
+#five {
color: hsla(0, 100%, 50%, 0.5);
}
</pre>
var h = document.getElementById('hue').value,
s = document.getElementById('saturation').value,
l = document.getElementById('lightness').value,
- a = document.getElementById('alpha').value / 10;
+ a = document.getElementById('alpha').value / 10,
</pre></li>
<li>Set the HSLA text and the color of the color box by defining the color from the inputs in the HSL and HSLA formats.
<p>If the alpha is 1, the HSL format is displayed. Otherwise, the HSLA format is used.</p>
<pre class="prettyprint">
-/* Define formats */
-hsl = 'hsl(' + h + ', ' + s + '%, ' + l + '%)';
-hsla = 'hsla(' + h + ', ' + s + '%, ' + l + '%, ' + a + ')';
+ /* Define formats */
+ hsl = 'hsl(' + h + ', ' + s + '%, ' + l + '%)',
+ hsla = 'hsla(' + h + ', ' + s + '%, ' + l + '%, ' + a + ')',
-/* Set the color of the box */
-cBox = document.querySelector('#color-box'),
+ /* Set the color of the box */
+ cBox = document.querySelector('#color-box'),
-/* Set the text */
-tBox = document.querySelector('#text-box');
+ /* Set the text */
+ tBox = document.querySelector('#text-box');
</pre></li>
<li>Add an event handler to the input sliders to change the displayed text and color box color when the slider values change.
<pre class="prettyprint">
var inputs = document.querySelectorAll('#color-generator input[type=range]');
-for (i = 0; i < inputs.length; i++)
-{
- inputs[i].onchange = function()
- {
- /* Show color */
- }
+for (i = 0; i < inputs.length; i++) {
+ inputs[i].onchange = function() {
+ /* Show color */
+ };
}
</pre></li></ol>
<h3>Source Code</h3>
<li>Add event listeners for the various drag and drop events:
<pre class="prettyprint">
<script>
- var cols = document.querySelectorAll('#drag-list_.drag-row');
- var colsLength = cols.length;
-
- for (var i = 0; i < colsLength; i++)
- {
- cols[i].addEventListener('dragstart', dragStart, false);
- cols[i].addEventListener('drag', dragIng, false);
- cols[i].addEventListener('dragenter', dragEnter, false);
- cols[i].addEventListener('dragover', dragOver, false);
- cols[i].addEventListener('dragleave', dragLeave, false);
- cols[i].addEventListener('drop', dragDrop, false);
- cols[i].addEventListener('dragend', dragEnd, false);
- };
+ var cols = document.querySelectorAll('#drag-list_.drag-row');
+ var colsLength = cols.length;
+
+ for (var i = 0; i < colsLength; i++) {
+ cols[i].addEventListener('dragstart', dragStart, false);
+ cols[i].addEventListener('drag', dragIng, false);
+ cols[i].addEventListener('dragenter', dragEnter, false);
+ cols[i].addEventListener('dragover', dragOver, false);
+ cols[i].addEventListener('dragleave', dragLeave, false);
+ cols[i].addEventListener('drop', dragDrop, false);
+ cols[i].addEventListener('dragend', dragEnd, false);
+ }
</script>
</pre>
</li>
<li>Define event handlers for the events. In this case, each event handler displays a text on the screen.
<pre class="prettyprint">
-function dragStart(e)
-{
- log.innerHTML = "dragStart";
-};
-
-function dragIng(e)
-{
- log.innerHTML = "drag";
-};
-
-function dragOver(e)
-{
- e.preventDefault();
- log.innerHTML = "dragOver";
-};
-
-function dragEnter(e)
-{
- log.innerHTML = "dragEnter";
-};
-
-function dragLeave(e)
-{
- log.innerHTML = "dragLeave";
-};
-
-function dragDrop(e)
-{
- e.stopPropagation();
- log.innerHTML = "dragDrop";
-};
-
-function dragEnd(e)
-{
- log.innerHTML = "dragEnd";
-};
+function dragStart(e) {
+ log.innerHTML = 'dragStart';
+}
+
+function dragIng(e) {
+ log.innerHTML = 'drag';
+}
+
+function dragOver(e) {
+ e.preventDefault();
+ log.innerHTML = 'dragOver';
+}
+
+function dragEnter(e) {
+ log.innerHTML = 'dragEnter';
+}
+
+function dragLeave(e) {
+ log.innerHTML = 'dragLeave';
+}
+
+function dragDrop(e) {
+ e.stopPropagation();
+ log.innerHTML = 'dragDrop';
+}
+
+function dragEnd(e) {
+ log.innerHTML = 'dragEnd';
+}
</pre>
</li>
</ol>
<li>Add event listeners for the <code>dragover</code>, <code>dragleave</code>, <code>dragstart</code>, and <code>drop</code> events:
<pre class="prettyprint lang-js">
<script>
- var cols = document.querySelectorAll('#puzzle_.puzzle-piece');
- var colsLength = cols.length;
- for (var i = 0; i < colsLength; i++)
- {
- cols[i].addEventListener('dragstart', dragStartHandler, false);
- cols[i].addEventListener('dragover', dragOverHandler, false);
- cols[i].addEventListener('dragleave', dragLeaveHandler, false);
- cols[i].addEventListener('drop', dragDropHandler, false);
- };
+ var cols = document.querySelectorAll('#puzzle_.puzzle-piece');
+ var colsLength = cols.length;
+ for (var i = 0; i < colsLength; i++) {
+ cols[i].addEventListener('dragstart', dragStartHandler, false);
+ cols[i].addEventListener('dragover', dragOverHandler, false);
+ cols[i].addEventListener('dragleave', dragLeaveHandler, false);
+ cols[i].addEventListener('drop', dragDropHandler, false);
+ }
</script>
</pre>
</li>
<li>Use the <a href="http://www.w3.org/TR/2012/WD-html5-20120329/dnd.html#the-datatransfer-interface" target="_blank">DataTransfer</a> interface in the <code>dragStartHandler()</code> and <code>dragDropHandler()</code> event handlers to exchange image parts:
<pre class="prettyprint">
-function dragStartHandler(e)
-{
- /* Set data */
- dragElem = this;
- e.dataTransfer.effectAllowed = 'move';
- e.dataTransfer.setData('text/html', this.innerHTML);
- this.classList.add('over');
- for (var i = 0; i < colsLength; i++)
- {
- cols[i].classList.add('start');
- };
-};
-function dragDropHandler(e)
-{
- /* Get data */
- dragElem.innerHTML = this.innerHTML;
- this.innerHTML = e.dataTransfer.getData('text/html');
- for (var i = 0; i < colsLength; i++)
- {
- cols[i].className = "puzzle-piece";
- };
- /* Check key */
- puzzleCheck();
-};
+function dragStartHandler(e) {
+ /* Set data */
+ dragElem = this;
+ e.dataTransfer.effectAllowed = 'move';
+ e.dataTransfer.setData('text/html', this.innerHTML);
+ this.classList.add('over');
+ for (var i = 0; i < colsLength; i++) {
+ cols[i].classList.add('start');
+ }
+}
+function dragDropHandler(e) {
+ /* Get data */
+ dragElem.innerHTML = this.innerHTML;
+ this.innerHTML = e.dataTransfer.getData('text/html');
+ for (var i = 0; i < colsLength; i++) {
+ cols[i].className = 'puzzle-piece';
+ }
+ /* Check key */
+ puzzleCheck();
+}
</pre>
</li>
<li>Check the completion of the puzzle by making a user key using a simple array, and comparing the user key against the puzzle key (correct answer):
<pre class="prettyprint">
-var puzzleKey = ["01", "02", "03", "04", "05", "06"];
+var puzzleKey = ['01', '02', '03', '04', '05', '06'];
var puzzleArray = [];
-function puzzleCheck()
-{
- /* Initialize the user key */
- puzzleArray = [];
- /* Insert the keys in the array */
- for (var i = 0; i < colsLength; i++)
- {
- puzzleArray.push(cols[i].children[0].getAttribute('src').substring(12, 14));
- };
- originKey = puzzleKey.join();
- userKey = puzzleArray.join();
-
- if (originKey === userKey)
- {
- alert("Success !");
- };
-};
+function puzzleCheck() {
+ /* Initialize the user key */
+ puzzleArray = [];
+ /* Insert the keys in the array */
+ for (var i = 0; i < colsLength; i++) {
+ puzzleArray.push(cols[i].children[0].getAttribute('src').substring(12, 14));
+ }
+ originKey = puzzleKey.join();
+ userKey = puzzleArray.join();
+
+ if (originKey === userKey) {
+ alert('Success !');
+ }
+}
</pre>
</li>
</ol>
<li>
<div class="date"><span>APR</span><br/> 15</div>
<p class="title">
- Linux Foundation Collaboration Summit
- <span class="local">San Francisco, CA</span>
+ Linux Foundation Collaboration Summit <span class="local">San Francisco, CA</span>
</p>
</li>
<!--Other text items-->
.container article > * {border: 1px solid #ccc;}
<!--Font style for the article area titles-->
-.container .events > h2, .container .schedule > h2
-{
+.container .events > h2, .container .schedule > h2 {
padding: 10px 20px;
text-shadow: 1px 1px 2px #fff, -1px -1px 2px #000;
}
<!--List styles-->
-.container .events > ul, .container .schedule .img_list
-{
+.container .events > ul, .container .schedule .img_list {
height: 100%;
padding: 10px;
}
<!--Text style for the text list item title-->
-.container .events > ul > li .title
-{
+.container .events > ul > li .title {
color: #51809e;
text-shadow: 1px 1px 2px #000;
}
<!--Text style for the text list item location info-->
-.container .events > ul > li .title .local
-{
+.container .events > ul > li .title .local {
text-indent: 10px;
text-shadow: 0 0 0 #fff;
}
<!--Styles for the text list item date box-->
-.container .events > ul > li .date
-{
+.container .events > ul > li .date {
text-align: center;
}
-.container .events > ul > li .date
-{
+.container .events > ul > li .date {
background-color: #ddd;
border-radius: 10px;
box-shadow: inset -2px -2px 4px rgba(0, 0, 0, .5);
}
-.container .events > ul > li .date > span
-{
+.container .events > ul > li .date > span {
background-color: #fff;
border-radius: 5px;
}
<p>(The following figure applies to mobile applications only.)</p>
<pre class="prettyprint">
<!--Flexible alignment of text list-->
-.container .events > ul > li
-{
+.container .events > ul > li {
display: -webkit-flex;
-webkit-align-items: center;
}
-.container .events > ul > li: first-child
-{
+.container .events > ul > li: first-child {
margin-top: 0;
}
-.container .events > ul > li .date
-{
+.container .events > ul > li .date {
-webkit-flex: 0 0 20%;
text-align: center;
}
<!--Flexible alignment of icon list-->
-.container .schedule .img_list
-{
+.container .schedule .img_list {
display: -webkit-flex;
-webkit-justify-content: space-between;
}
<li>Special consideration can be given for some screen sizes. The following example defines a specific layout for small screens (where the screen width is less than 390 pixels). (The following figure applies to mobile applications only.)
<pre class="prettyprint">
-@media screen and (min-width: 390px)
-{
- .container .schedule .img_list
- {
+@media screen and (min-width: 390px) {
+ .container .schedule .img_list {
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-webkit-justify-content: space-between;
<!DOCTYPE html>
<!--Prior to HTML5-->
-<!DOCTYPE html PUBLIC "{HTML Version Information}"
- "{DTD (Document Type Definition) file link defined by Rule in HTML DOM}">
+<!DOCTYPE html PUBLIC "{HTML Version Information}" "{DTD (Document Type Definition) file link defined by Rule in HTML DOM}">
</pre>
<h2 id="dom">HTML DOM Tree</h2>
<html>
<head>
<meta charset="utf-8"/>
- <title>
- Tizen (in mobile applications) or Tizen Wearable (in wearable applications)
- </title>
+ <title> Tizen (in mobile applications) or Tizen Wearable (in wearable applications) </title>
<link rel="stylesheet" href="css/style.css"/>
<script src="/common/js/ui.js"></script>
</head>
<body>
<section id="tizen_wrap">
<header>
- <h1>
- Tizen Web App (in mobile applications)
- or Tizen Wearable Web App (in wearable applications)
- </h1>
+ <h1>Tizen Web App (in mobile applications) or Tizen Wearable Web App (in wearable applications)</h1>
</header>
<section id="contents">
<!--Content-->
/* Direct use in HTML */
<script>
- var obj = document.querySelector(".animated");
+ var obj = document.querySelector('.animated');
- function animate()
- {
- /* Execute */
- };
+ function animate() {
+ /* Execute */
+ }
- /* Call the animation function when the event is fired */
- webkitRequestAnimationFrame(animate);
+ /* Call the animation function when the event is fired */
+ webkitRequestAnimationFrame(animate);
</script>
</pre>
<p>Both ways described above give the same result in behavior. However, the position of the JavaScript code affects the order in which the methods are called.</p>
<body onload="touchEventHandler()">
<script>
- /* JavaScript */
- /* Directly assigning */
- window.onload = touchEventHandler; /* Assigns the name of the subject method */
+ /* JavaScript */
+ /* Directly assigning */
+ window.onload = touchEventHandler; /* Assigns the name of the subject method */
- /* Event listener (W3C standard) */
- document.addEventListener("touchstart", touchEventHandler, false);
+ /* Event listener (W3C standard) */
+ document.addEventListener('touchstart', touchEventHandler, false);
</script>
</pre>
<p>Prefer using W3C standard event listener methods. The inline JavaScript code applied directly to an HTML tag is difficult to maintain. Assigning a method directly to an event is also difficult when passing parameters, as the method needs to be assigned for every event.</p>
<head>
<script src="js/jquery_1.9.0_min.js"></script>
<script>
- window.onload = function()
- {
- testLog('head onload');
- };
-
- $(document).ready(function()
- {
- testLog('head ready');
- });
+ window.onload = function() {
+ testLog('head onload');
+ };
+
+ $(document).ready(function() {
+ testLog('head ready');
+ });
</script>
</head>
</pre>
<body>
<script src="js/jquery_1.9.0_min.js"></script>
<script>
- function testLog(txt)
- {
- var logText = document.querySelector('.log');
- logText.innerHTML += '<li>JavaScript in HTML ' + txt + '</li>';
- };
-
- window.onload = function()
- {
- testLog('body onload');
- };
-
- $(document).ready(function()
- {
- testLog('body ready');
- });
-
- testLog('body');
-
- (function()
- {
- testLog('body anonymous function');
- }();
+ function testLog(txt) {
+ var logText = document.querySelector('.log');
+ logText.innerHTML += '<li>JavaScript in HTML ' + txt + '</li>';
+ }
+
+ window.onload = function() {
+ testLog('body onload');
+ };
+
+ $(document).ready(function() {
+ testLog('body ready');
+ });
+
+ testLog('body');
+
+ (function() {
+ testLog('body anonymous function');
+ });
</script>
</body>
</pre>
<li>Combination and relevancy
<p>You can combine multiple conditions into 1 Boolean query with the <code>and</code> operator. To define a negative condition (something not being relevant), use the <code>not</code> operator.</p>
<pre class="prettyprint">
-@media not screen and (min-width: 320px), screen and (max-width: 480px)
-{
+@media not screen and (min-width: 320px), screen and (max-width: 480px) {
.example: after {content: "width: 320px ~ 480px"}
}
</pre>
<li>Viewport width
<p>You can define the query to match to a specific viewport width range using the <code>min-width</code> and <code>max-width</code> attributes.</p>
<pre class="prettyprint">
-@media all and (min-width: 320px) and (max-width: 480px)
-{
+@media all and (min-width: 320px) and (max-width: 480px) {
.example: after {content: "width: 320px ~ 480px"}
}
</pre>
<p>The <code>height</code> attribute refers to restoring the viewport's height, and the <code>device-height</code> attribute refers to restoring the resolution set in the device.</p>
<p>The same difference applies to the <code>width</code> and <code>aspect-ratio</code> attributes, which can assign 'device-'.</p>
<pre class="prettyprint">
-@media screen and (min-device-height: 700px)
-{
+@media screen and (min-device-height: 700px) {
.example: after {content: "min-device-height"}
}
-@media screen and (min-height: 550px)
-{
+@media screen and (min-height: 550px) {
.example: after {content: "min-height"}
}
</pre>
<p>You can use the <code>device-aspect-ratio</code> attribute to check the width-length ratio (aspect ratio) of the printing device.</p>
<pre class="prettyprint">
@media all and (device-aspect-ratio: 9/16) and (orientation: portrait),
- all and (device-aspect-ratio: 2/3) and (orientation: portrait)
-{
+ all and (device-aspect-ratio: 2/3) and (orientation: portrait) {
.example: after {content: "aspect-ratio, portrait"}
}
</pre>
<link rel="stylesheet" media="all and (max-width: 768px)" href="a.css">
<link rel="stylesheet" media="all and (min-width: 768px)" href="b.css">
<style>
- @media all and (max-width: 400px)
- {
+ @media all and (max-width: 400px) {
.example: after {content: "In HTML head"}
}
</style>
<!--a.css-->
body {background-color: #ccc}
-@media screen and (max-width: 480px)
-{
+@media screen and (max-width: 480px) {
.example: after {content:"a.css : width: ~ 480px"}
}
-@media screen and (min-width: 480px) and (max-width: 768px)
-{
+@media screen and (min-width: 480px) and (max-width: 768px) {
.example: after {content: "a.css : width: 480px ~ 768px"}
}
body {background-color: #333; color: #fff}
-@media screen and (min-width: 768px) and (max-width: 1024px)
-{
+@media screen and (min-width: 768px) and (max-width: 1024px) {
.example: after {content: "b.css : width: 768px ~ 1024px"}
}
<!--c.css-->
body {background-color: tomato}
-@media screen and (min-width: 768px) and (max-width: 1024px)
-{
+@media screen and (min-width: 768px) and (max-width: 1024px) {
.example: after {content: "c.css : width: 768px ~ 1024px"}
}
-@media screen and (min-width: 1024px) and (max-width: 1280px)
-{
+@media screen and (min-width: 1024px) and (max-width: 1280px) {
.example: after {content: "c.css : width: 1024px ~ 1280px"}
}
</pre>
</pre></li>
<li>Define basic styles for the page, using a flexible box (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#flexi">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#flexi">wearable</a> applications) and <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#multicolumn">multi-column</a> (in mobile applications only) layout with 2 columns. (The following figure applies to mobile applications only.)
<pre class="prettyprint">
-.container
-{
+.container {
display: -webkit-flex;
}
-.container aside
-{
+.container aside {
-webkit-flex: 1 0 20%;
}
-.contents
-{
+.contents {
-webkit-columns: 5em 3;
-webkit-column-rule: 1px solid #999;
-webkit-column-gap: 2em;
-webkit-flex: 1 1 auto;
}
-.contents h2
-{
+.contents h2 {
-webkit-column-span: all;
}
</pre>
<p>To solve the problem, use a media query to define a liquid layout that changes according to the screen resolution:</p>
<pre class="prettyprint">
-@media all and (max-width: 480px) and (orientation: portrait)
-{
+@media all and (max-width: 480px) and (orientation: portrait) {
.contents {-webkit-columns: 1;}
}
-@media all and (min-width: 480px) and (max-width: 768px)
-{
+@media all and (min-width: 480px) and (max-width: 768px) {
.contents {-webkit-columns: 2;}
.container {display: -webkit-flex;}
}
<p>The following conditions are generally used and cover all possibilities up to a Web browser in a PC:</p>
<pre class="prettyprint">
<!--Portrait mode of a smart phone-->
-@media screen and (max-width: 480px)
- and (orientation: portrait) {<!--Specific layout-->}
+@media screen and (max-width: 480px) and (orientation: portrait) {<!--Specific layout-->}
<!--Landscape mode of a smart phone and a small tablet-->
@media screen and (min-width: 480px) and (max-width: 768px) {<!--Specific layout-->}
<p>In the following code snippet and figure, the column number is set to 4. As a result, on a 480 x 800 display (shown on the top), the column width is 116 px, whereas on a 720 x 1280 display (shown on the bottom), the column with is 143 px.</p>
<p>The following code snippet demonstrates how to use the <code>column-count</code> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_count" target="_blank">multi_column_column_count/renamed_index.html</a>.</p>
<pre class="prettyprint">
-article
-{
+article {
column-count: 4;
-webkit-column-count: 4;
margin: 10px;
<p>The code snippet shows how the multi-column layout is implemented when the vertical space is limited. If there is more content than fits the available space, the next column is set outside the available space. Using the <code>overflow: scroll</code> property, the column can be scrolled horizontally.</p>
<p>The following code snippet demonstrates how to use the <code>column-width</code> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_width" target="_blank">multi_column_column_width/renamed_index.html</a>.</p>
<pre class="prettyprint">
-article
-{
+article {
width: 90vw;
height: 90vh;
column-width: 153px;
<p>The <code>column-gap</code> (or <code>-webkit-column-gap</code>) property sets the distance between columns. The property affects the column width, as the column width, gap, and margins all take available space. In the following code snippet and figure, the column gap is set to 17 px.</p>
<p>The following code snippet demonstrates how to use the <code>column-gap</code> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_gap" target="_blank">multi_column_column_gap/renamed_index.html</a>.</p>
<pre class="prettyprint">
-article
-{
+article {
height: 303px;
column-width: 153px;
-webkit-column-width: 153px;
<p>Rules are only displayed in the content area. If the <code>padding</code> property is set in the same element, the rule appears shorter than the background. In the following code snippet and figure, the rule width is set to 5 px.</p>
<p>The following code snippet demonstrates how to use the <code>column-rule</code> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_rule" target="_blank">multi_column_column_rule/renamed_index.html</a>.</p>
<pre class="prettyprint">
-article
-{
+article {
-webkit-column-rule-width: 5px;
-webkit-column-rule-color: rgb(92, 203, 246);
-webkit-column-rule-style: solid;
<p>In the following figure, the blue arrow shows the order of the column elements. In the upper header area, the <code>column-span</code> property is not used, and in the lower header area, the <code>column-span</code> property is set to <code>all</code>, as in the following code snippet.</p>
<p>The following code snippet demonstrates how to use the <code>column-span</code> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_span" target="_blank">multi_column_column_span/renamed_index.html</a>.</p>
<pre class="prettyprint">
-article.left header
-{
+article.left header {
column-span: all;
-webkit-column-span: all;
}
<p>The following code snippet and figure illustrate the use of the <code>break-</code> property. In the upper header area, the <code>break-</code> property is not used, and in the lower header area, the <code>break-before</code> property is set to <code>always</code>.</p>
<p>The following code snippet demonstrates how to use the <code>column-break</code> property. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_column_break" target="_blank">multi_column_column_break/renamed_index.html</a>.</p>
<pre class="prettyprint">
-article.lower section
-{
+article.lower section {
break-before: always;
-webkit-column-break-before: always;
}
<p>The <code>article</code> element acts as a multi-column container. Set the <code>column-width</code> (or <code>-webkit-column-width</code>) property to enable the multi-column layout:</p>
<pre class="prettyprint">
-article
-{
+article {
width: 80vw;
column-width: 119px;
-webkit-column-width: 119px;
<p>Define the <code>footer</code> element with the display height set to 5/100 and padding set to 2 * 2vh:</p>
<pre class="prettyprint">
-footer
-{
+footer {
padding: 2vh;
height: 5vh;
background: rgba(103, 119, 132, 0.2);
<p>Define the <code>section</code> elements setting the <code>border-bottom</code> and vertical <code>padding</code> values. It is not necessary to define horizontal padding, as it has been defined for the <code>article</code> element.</p>
<pre class="prettyprint">
-article>section
-{
+article > section {
border-bottom: 1px solid #d8d9d4;
padding: 4px 0;
text-align: center;
<p>In case of the image whose <code>id</code> attribute is set to <code>figure</code>, set it to be a floating element with text drawn around it.</p>
<pre class="prettyprint">
-img
-{
+img {
display: block;
margin: 4px auto;
}
-#figure
-{
+#figure {
float: right;
margin: 4px;
}
<li>
<p>Define the CSS display and column properties:</p>
<pre class="prettyprint">
-body
-{
+body {
display: flex;
display: -webkit-flex;
flex-direction: column;
<p>Set the <code>article</code>, <code>nav</code> and <code>footer</code> elements in one column using the flexible box layout.</p>
<p>The <code>nav</code> element is also a flexible box layout container to set UI elements in.</p>
<pre class="prettyprint">
-nav
-{
+nav {
height: 20vh;
padding-left: 20%;
padding-top: 10px;
<li>
<p>Define the styles for the <code>a</code> elements within the <code>nav</code> element to make them appear as buttons:</p>
<pre class="prettyprint">
-nav a
-{
+nav a {
margin: 3px;
border-radius: 5px;
padding: 5px 15px;
<li>
<p>Define the <code>input</code> element (with the property type set to <code>number</code>) style with an increased height to match the buttons around it:</p>
<pre class="prettyprint">
-nav input
-{
+nav input {
width: 50px;
height: 2em;
}
<li>
<p>The <code>article</code> element contains the column properties. Use the <code>-webkit-column-width</code> property to set the column width. The real width is calculated based on available space.</p>
<pre class="prettyprint">
-article
-{
+article {
width: 90vw;
column-width: 136px;
-webkit-column-width: 136px;
<li>
<p>Set the images within the <code>article</code> element with a block display to separate them from text:</p>
<pre class="prettyprint">
-article img
-{
+article img {
margin: 0 auto;
display: block;
}
<li>
<p>Define the <code>column-span</code> property as <code>all</code> for the <code>h1</code> elements:</p>
<pre class="prettyprint">
-article>h1
-{
+article > h1 {
background: rgba(103, 119, 132, 0.5);
padding: 4px;
text-align: center;
<li>
<p>Define the <code>break-inside</code> property as <code>avoid</code> to avoid breaking elements between columns:</p>
<pre class="prettyprint">
-article>section
-{
+article > section {
break-inside: avoid;
-webkit-column-break-inside: avoid;
border-bottom: 1px solid #d8d9d4;
<li>
<p>Set the <code>footer</code> size:</p>
<pre class="prettyprint">
-footer
-{
+footer {
padding: 2vh;
height: 5vh;
background: rgba(103, 119, 132, 0.2);
<li>
<p>Declare a variable for the images. Elements included in the variable amount to data displayed in a column layout, such as a newsfeed:</p>
<pre class="prettyprint">
-var images =
- ["images/pinwheel_green.png",
- "images/Tizen_Pinwheel_Secondary_Confetti.png",
- "images/Tizen_WhiteFold_4.png",
- "images/pinwheel_yellow.png"];
+var images = ['images/pinwheel_green.png',
+ 'images/Tizen_Pinwheel_Secondary_Confetti.png',
+ 'images/Tizen_WhiteFold_4.png',
+ 'images/pinwheel_yellow.png'];
</pre>
</li>
<li>
<p>Use the <code>addGroup()</code> method with the input parameter value to add random images to the column layout and initialize the button events:</p>
<pre class="prettyprint">
-window.onload = function()
-{
- addGroup(4);
- howManyInput = document.getElementById('howMany');
- var addBtn = document.getElementById('addSections');
- addBtn.onclick = function()
- {
- addGroup(howManyInput.value);
-
- return false;
- };
- var removeBtn = document.getElementById('removeGroup');
- removeBtn.onclick = function()
- {
- removeGroup();
-
- return false;
- };
+window.onload = function() {
+ addGroup(4);
+ howManyInput = document.getElementById('howMany');
+ var addBtn = document.getElementById('addSections');
+ addBtn.onclick = function() {
+ addGroup(howManyInput.value);
+
+ return false;
+ };
+ var removeBtn = document.getElementById('removeGroup');
+ removeBtn.onclick = function() {
+ removeGroup();
+
+ return false;
+ };
};
</pre>
</li>
<p>Declare the <code>newHTML</code> variable to add new content to the column layout. Each added element contains an <code>h1</code> element as a header, and <code>section</code> elements. Include an <code>img</code> element with a text description in each <code>section</code> element to display a random image. The <code>art</code> variable is initialized, and new HTML code (<code>newHTML</code>) is concatenated with the existing one (<code>innerHTML</code>):</p>
<pre class="prettyprint">
-function addGroup(howMany)
-{
- var h1No = document.querySelectorAll('article>h1').length + 1;
- var newHTML = "<h1>Group " + h1No + "</h1>";
- var i;
-
- for (i = 0; i < howMany; ++i)
- {
- newHTML += "<section><img alt='' src='";
- newHTML += images[Math.floor(Math.random() * 4)];
- newHTML += "'>Lorem ipsum dolor sit amet diam sodales rutrum.</section>";
- }
- var art = document.getElementById("article");
- art.innerHTML += newHTML;
+function addGroup(howMany) {
+ var h1No = document.querySelectorAll('article>h1').length + 1;
+ var newHTML = "<h1>Group " + h1No + "</h1>";
+ var i;
+
+ for (i = 0; i < howMany; ++i) {
+ newHTML += '<section><img alt="" src="';
+ newHTML += images[Math.floor(Math.random() * 4)];
+ newHTML += '">Lorem ipsum dolor sit amet diam sodales rutrum.</section>';
+ }
+ var art = document.getElementById('article');
+ art.innerHTML += newHTML;
}
</pre>
</li>
<li>
<p>When the user taps the <strong>Remove last Group</strong> button, the <code>removeGroup()</code> method is called to remove the group of images that was added last. Use the <code>all</code> variable to select all <code>h1</code> elements in the content using the <code>querySelectorAll()</code> method. If the <code>last</code> value is less than 0, there is no element to remove. Use the <code>removeNextSibling()</code> method to recursively delete the next sibling element, and the <code>removeChild()</code> method to remove the <code>h1</code> elements from its parent.</p>
<pre class="prettyprint">
-function removeGroup()
-{
- var all = document.querySelectorAll('article>h1');
- var last = all.length - 1;
- if (last < 0)
- {
- return;
- }
- removeNextSibling(all[last].nextSibling);
- all[last].parentElement.removeChild(all[last]);
+function removeGroup() {
+ var all = document.querySelectorAll('article>h1');
+ var last = all.length - 1;
+ if (last < 0) {
+ return;
+ }
+ removeNextSibling(all[last].nextSibling);
+ all[last].parentElement.removeChild(all[last]);
}
</pre>
</li>
</pre>
<p>In the CSS file:</p>
<pre class="prettyprint lang-html">
-@media screen and (max-resolution: 159dpi)
-{
+@media screen and (max-resolution: 159dpi) {
<!--Set styles-->
}
-@media screen and (min-resolution: 160dpi and max-resolution: 239dpi)
-{
+@media screen and (min-resolution: 160dpi and max-resolution: 239dpi) {
<!--Set styles-->
}
-@media screen and (min-resolution: 240dpi and max-resolution: 319dpi)
-{
+@media screen and (min-resolution: 240dpi and max-resolution: 319dpi) {
<!--Set styles-->
}
-@media screen and (min-resolution: 320dpi)
-{
+@media screen and (min-resolution: 320dpi) {
<!--Set styles-->
}
</pre>
<p>You can also set different layout and resources for the portrait and landscape views in the CSS file:</p>
<pre class="prettyprint lang-html">
-@media screen and (orientation: portrait)
-{
+@media screen and (orientation: portrait) {
<!--Set styles-->
}
-@media screen and (orientation: landscape)
-{
+@media screen and (orientation: landscape) {
<!--Set styles-->
}
</pre>
<img src="images/sample.jpg" alt="sample image"/>
<!--CSS-->
-.photo
-{
+.photo {
background: url(../images/sample.jpg) 0 0 no-repeat;
background-size: 100%;
width: 100%;
<ul><li>1024 x 768 px: 90 KB</li><li>300 x 200 px: 39 KB</li><li>300 x 200 px: 15 KB</li></ul>
<p>Current full HD displays have a resolution that is 1.5 to 2 times bigger than the actual screen size. The image quality is guaranteed if you size images as 2 times bigger than their original size.</p>
<pre class="prettyprint">
-img
-{
+img {
max-width: 100%;
}
</pre>
<h3 id="icons" name="icons">Icons</h3>
<p>Icons generally have a fixed size. Size icon images as 2 times bigger than their original size. Using the CSS3 <code>background-size</code> property, you can add an image with the size of, for example, 40 x 40 px, compressed as 20 x 20 px.</p>
<pre class="prettyprint">
-.prev_icon, .next_icon
-{
+.prev_icon, .next_icon {
padding-left: 30px;
height: 30px;
line-height: 30px;
background-size: auto 20px;
}
-.prev_icon.icon1
-{
+.prev_icon.icon1 {
background-image: url(../images/page_navi_arrow_left_01.png);
}
</pre>
<p>You can use the sprite image technique (grouping multiple images as one and showing the only desired images defined with the <code>background-position</code> property) to noticeably reduce the page loading speed without any loss in quality of the image, as the following example shows.
</p>
<pre class="prettyprint lang-html">
-.prev_icon, .next_icon
-{
+.prev_icon, .next_icon {
background-size: 20px auto; <!--Full HD Display-->
background-image: url(../images/page_navi_arrow.png);
}
-.prev_icon.icon1
-{
+.prev_icon.icon1 {
background-position: 0 0;
}
-.prev_icon.icon2
-{
+.prev_icon.icon2 {
background-position: 0 -50px;
}
</pre>
<p>The following example shows how JavaScript animation can be implemented:</p>
<pre class="prettyprint">
<script>
- var obj = document.querySelector(".animated img"), flag = 0;
- function animate()
- {
- obj.src = './images/sprite_' + ((flag++) % 10) + '.png';
- };
- setInterval(animate, 100);
+ var obj = document.querySelector('.animated img'), flag = 0;
+ function animate() {
+ obj.src = './images/sprite_' + ((flag++) % 10) + '.png';
+ }
+ setInterval(animate, 100);
</script>
</pre>
<pre class="prettyprint">
<script>
- var obj = document.querySelector(".animated img"), flag = 0, i = 0;
- function animate()
- {
- if (!(i % 6)) obj.src = './images/sprite_' + ((flag++) % 10) + '.png';
- i++;
- -webkit-RequestAnimationFrame(animate);
- };
- -webkit-RequestAnimationFrame(animate);
+ var obj = document.querySelector('.animated img'), flag = 0, i = 0;
+ function animate() {
+ if (!(i % 6)) obj.src = './images/sprite_' + ((flag++) % 10) + '.png';
+ i++;
+ -webkit-RequestAnimationFrame(animate);
+ }
+ -webkit-RequestAnimationFrame(animate);
</script>
</pre>
<p>The following example shows how CSS3 animation can be implemented:</p>
<pre class="prettyprint">
<style>
- .css_animation
- {
+ .css_animation {
width: 50px;
height: 70px;
background-image: url(../images/sprite.png);
-webkit-animation: cssAni .8s steps(10) infinite;
}
- @-webkit-keyframes cssAni
- {
+ @-webkit-keyframes cssAni {
from {background-position: 0px;}
to {background-position: -500px;}
}
<li>You can use the CSS selectors to ensure that elements with complex structures can be easily selected.
<p>For example, the following example selects the last element among the child nodes of the second <code><tr></code> element, which is a child of the <code><tbody></code> element in the second <code><table></code> element of the document.</p>
<pre class="prettyprint">
-var obj =
- document.querySelector('table:nth-child(2) tbody > tr:nth-child(2) :last-child');
+var obj = document.querySelector('table:nth-child(2) tbody > tr:nth-child(2) :last-child');
</pre></li>
<li>You can use method chaining to select an element:
<pre class="prettyprint">
</li>
<li>Apply a defined style to all elements stored in the <code>targetObj</code> node list:
<pre class="prettyprint">
-while (0 < i)
-{
- i--;
- targetObj[i].style.backgroundColor = 'orange';
- targetObj[i].textContent = 'Exam 3' + i;
+while (0 < i) {
+ i--;
+ targetObj[i].style.backgroundColor = 'orange';
+ targetObj[i].textContent = 'Exam 3' + i;
}
</pre></li></ol>
<li>Use <a href="transition_w.htm">CSS transitions</a> to add sliding effects when content appears:
<pre class="prettyprint lang-html">
-.accordion > li > div
-{
+.accordion > li > div {
padding: 0 15px;
<!--Assign time for CSS transformation-->
box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .5);
line-height: 2;
}
-<!--Assign styles to be applied in case the current class is added to p.title-->
-.accordion > li > p.current
-{
+<!--Assign styles to be applied when the current class is added to p.title-->
+.accordion > li > p.current {
background: -webkit-linear-gradient(top, #666, #000);
color: #fff;
}
-.accordion > li > p.current + div
-{
+.accordion > li > p.current + div {
opacity: 1;
height: 200px;
}
</pre></li>
<li>Use the <code>querySelector()</code> and <code>querySelectorAll()</code> methods to change the class of the subject in the elements where the event is fired:
<pre class="prettyprint">
-var testAccordion = function(obj)
-{
- var targetObj = document.querySelector(obj);
- var targetLength = document.querySelectorAll(obj + 'li').length;
-
- /* In case the elements are not selected */
- if (targetLength <= 0)
- return false;
-
- targetObj.onclick = function(e)
- {
- var that = e.target;
-
- /* In case the e.target class is not title */
- if ((that.className !== 'title'))
- return false;
-
- for (var i = 0; i < targetLength; i++)
- {
- /*
- Change all classes of the 'li p' elements
- at the bottom of .accordion to title
- */
- targetObj.querySelectorAll('li p')[i].className = 'title';
- }
- /* Define the e.target class as current */
- that.className += 'current';
- }
-}
+var testAccordion = function(obj) {
+ var targetObj = document.querySelector(obj);
+ var targetLength = document.querySelectorAll(obj + 'li').length;
+
+ /* If the elements are not selected */
+ if (targetLength <= 0)
+ return false;
+
+ targetObj.onclick = function(e) {
+ var that = e.target;
+
+ /* If the e.target class is not title */
+ if ((that.className !== 'title'))
+ return false;
+
+ for (var i = 0; i < targetLength; i++) {
+ /*
+ Change all classes of the 'li p' elements
+ at the bottom of .accordion to title
+ */
+ targetObj.querySelectorAll('li p')[i].className = 'title';
+ }
+ /* Define the e.target class as current */
+ that.className += 'current';
+ };
+};
</pre>
</li>
<li>Define the elements that use the accordion menu:
<li>To add an entry to the session history, use the <code>pushState()</code> method of the <code>history</code> interface (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/browsers.html#the-history-interface" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/CR-html5-20140429/browsers.html#the-history-interface" target="_blank">wearable</a> applications):
<pre class="prettyprint">
<script>
- history.pushState({index: currentIndex}, document.title);
+ history.pushState({index: currentIndex}, document.title);
</script>
</pre>
<li>To update the entry details, use the <code>replaceState()</code> method:
<pre class="prettyprint">
<script>
- history.replaceState({index: currentIndex}, document.title,
- '#page' + currentIndex);
+ history.replaceState({index: currentIndex}, document.title, '#page' + currentIndex);
</script>
</pre>
<p>The <code>replaceState()</code> method uses the same parameters as the <code>pushState()</code> method. The <code>history_sample.html</code> is the <code>url</code> parameter, which refers to the address of the page that is to be changed.</p>
var next = document.querySelector('.paging > a:nth-child(2)');
/* Prev button click event */
-prev.onclick = function()
-{
- currentIndex -= 1;
- setState(currentIndex);
+prev.onclick = function() {
+ currentIndex -= 1;
+ setState(currentIndex);
- return false;
+ return false;
};
/* Next button click event */
-next.onclick = function()
-{
- currentIndex += 1;
- setState(currentIndex);
+next.onclick = function() {
+ currentIndex += 1;
+ setState(currentIndex);
- return false;
+ return false;
};
</pre>
</li>
<li>If the <code>state</code> object has data in it, use the <code>replaceState()</code> method to change the previously stored information. Otherwise, add new info with the <code>pushState()</code> method.
<pre class="prettyprint">
-function setState(currentIndex)
-{
- if (history.state)
- {
- history.replaceState({index: currentIndex}, document.title,
- '#page' + currentIndex);
- }
- else
- {
- history.pushState({index: currentIndex}, document.title);
- }
- output.textContent = currentIndex;
+function setState(currentIndex) {
+ if (history.state) {
+ history.replaceState({index: currentIndex}, document.title, '#page' + currentIndex);
+ } else {
+ history.pushState({index: currentIndex}, document.title);
+ }
+ output.textContent = currentIndex;
}
</pre>
</li>
<p>Register the event listener:</p>
<pre class="prettyprint">
-window.addEventListener("popstate", foo, false);
+window.addEventListener('popstate', foo, false);
</pre></li>
<li>Define the event handler for the event. You can use the data stored in the <code>state</code> object (in <a href="http://www.w3.org/TR/2014/REC-html5-20141028/browsers.html#state-object" target="_blank">mobile</a> and <a href="http://www.w3.org/TR/2014/CR-html5-20140429/browsers.html#state-object" target="_blank">wearable</a> applications) to retrieve the correct location on the page to be loaded.
<pre class="prettyprint">
var output = document.querySelector('output');
-window.onpopstate = function()
-{
- currentIndex = history.state.index;
- output.textContent = currentIndex;
-}
+window.onpopstate = function() {
+ currentIndex = history.state.index;
+ output.textContent = currentIndex;
+};
</pre>
<p>In the snippet above, when a <code>popstate</code> event is fired, it saves the index value stored in the <code>state</code> object to the <code>currentIndex</code> variable, and outputs the <code><output></code> element from the correct index location.
</p>
<pre class="prettyprint">
<head>
<style type="text/css">
- .box
- {
+ .box {
transform: rotate(30deg);
transform-origin: 30% 30%;
perspective: 220;
-webkit-animation: trans-ani 10s infinite linear;
-webkit-backface-visibility: visible;
}
- .box.case01
- {
+ .box.case01 {
transform-style: preserve-3d;
perspective-origin: 30% 30%;
<pre class="prettyprint">
<head>
<style type="text/css">
- .box-translate
- {
+ .box-translate {
transform: translate(30px, 30px);
-webkit-transform: translate(30px, 30px);
}
- .box-scale
- {
+ .box-scale {
transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
}
- .box-rotate
- {
+ .box-rotate {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
- .box-skew
- {
+ .box-skew {
transform: skew(20deg, 20deg);
-webkit-transform: skew(20deg, 20deg);
}
- .box-matrix
- {
+ .box-matrix {
transform: matrix(0.8, 0.5, 0.9, 0.9, 0, 0);
-webkit-transform: matrix(0.8, 0.5, 0.9, 0.9, 0, 0);
}
.first-transform {opacity: .5; background: #3399cc;}
.transformed {opacity: .8;}
/* translate3d */
- .box-translate3d: hover .first-transform
- {
+ .box-translate3d: hover .first-transform {
transform: translate3d(-5px, -5px, -60px) rotateY(70deg);
-webkit-transform: translate3d(-5px, -5px, -60px) rotateY(70deg);
}
- .box-translate3d: hover .transformed
- {
+ .box-translate3d: hover .transformed {
transform: translate3d(15px, 15px, 60px) rotateY(70deg);
-webkit-transform: translate3d(15px, 15px, 60px) rotateY(70deg);
}
/* scale3d */
- .box-scale3d: hover .first-transform
- {
+ .box-scale3d: hover .first-transform {
transform: scale3d(1, 1, 1) rotateY(70deg);
-webkit-transform: scale3d(1, 1, 1) rotateY(70deg);
}
- .box-scale3d: hover .transformed
- {
+ .box-scale3d: hover .transformed {
transform: scale3d(0.6, 0.6, 2) rotateY(70deg);
-webkit-transform: scale3d(0.6, 0.6, 2) rotateY(70deg);
}
/* rotate3d */
- .box-rotate3d: hover .first-transform
- {
+ .box-rotate3d: hover .first-transform {
transform: rotate3d(-1, -1, -1, 110deg);
-webkit-transform: rotate3d(-1, -1, -1, 110deg);
}
- .box-rotate3d: hover .transformed
- {
+ .box-rotate3d: hover .transformed {
transform: rotate3d(1, 1, 1, 110deg);
-webkit-transform: rotate3d(1, 1, 1, 110deg);
}
/* matrix3d */
- .box-matrix3d: hover .first-transform
- {
- transform: matrix3d(0.3, 0.2, -0.9, 0, 0.2, 0.8, 0.2, 0, 0.6, 0,
- 0.4, 0, 0, 0, 0, 1);
- -webkit-transform: matrix3d(0.3, 0.2, -0.9, 0, 0.2, 0.8, 0.2, 0, 0.6,
- 0, 0.4, 0, 0, 0, 0, 1);
+ .box-matrix3d: hover .first-transform {
+ transform: matrix3d(0.3, 0.2, -0.9, 0, 0.2, 0.8, 0.2, 0, 0.6, 0, 0.4, 0, 0, 0, 0, 1);
+ -webkit-transform: matrix3d(0.3, 0.2, -0.9, 0, 0.2, 0.8, 0.2, 0, 0.6, 0, 0.4, 0, 0, 0, 0, 1);
}
- .box-matrix3d: hover .transformed
- {
- transform: matrix3d(0.4, -0.5, 0.8, 0, 0.2, 0.8, 0.2, 0, -0.6, 0, 0.4,
- 0, 0, 0, 0, 1);
- -webkit-transform: matrix3d(0.4, -0.5, 0.8, 0, 0.2, 0.8, 0.2, 0, -0.6,
- 0, 0.4, 0, 0, 0, 0, 1);
+ .box-matrix3d: hover .transformed {
+ transform: matrix3d(0.4, -0.5, 0.8, 0, 0.2, 0.8, 0.2, 0, -0.6, 0, 0.4, 0, 0, 0, 0, 1);
+ -webkit-transform: matrix3d(0.4, -0.5, 0.8, 0, 0.2, 0.8, 0.2, 0, -0.6, 0, 0.4, 0, 0, 0, 0, 1);
}
</style>
</head>
<body>
<h1>3D transform</h1>
<h2></h2>
- <p><strong>First box value:</strong>
- transform: translate3d(-5px, -5px, -60px) rotateY(70deg);
- </p>
- <p><strong>Second box value:</strong>
- transform: translate3d(15px, 15px, 60px) rotateY(70deg);
- </p>
+ <p><strong>First box value:</strong> transform: translate3d(-5px, -5px, -60px) rotateY(70deg);</p>
+ <p><strong>Second box value:</strong> transform: translate3d(15px, 15px, 60px) rotateY(70deg);</p>
<div class="boxarea box-translate3d">
<div class="box first-transform">
First box
</li>
<li>Define the basic style of the animation elements. Add the <code>perspective</code> property to increase the Z axis effect of the 3D transform.
<pre class="prettyprint">
-.animation-holder
-{
+.animation-holder {
-webkit-perspective: 1000px;
height: 88px;
left: 50%;
width: 280px;
}
.tizen-txt,
-.tizen-logo
-{
+.tizen-logo {
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
position: absolute;
}
-.tizen-txt.t
-{
+.tizen-txt.t {
background-image: url("images/txt_t.png");
height: 56px;
left: 0px;
<p>Assign keyframes for the logo element to transform it. In order to rotate the logo, use the <code>-webkit-transform: rotate()</code> method, which defines the angle of the rotation.
</p>
<pre class="prettyprint">
-@-webkit-keyframes tizen-logo
-{
- 0%
- {
+@-webkit-keyframes tizen-logo {
+ 0% {
-webkit-animation-timing-function: ease-in;
height: 211px;
left: 30px;
-webkit-transform: rotate(0deg);
width: 220px;
}
- 30%
- {
+ 30% {
-webkit-animation-timing-function: ease-out;
height: 211px;
left: 30px;
-webkit-transform: rotate(720deg);
width: 220px;
}
- 50%
- {
+ 50% {
height: 32px;
left: 247px;
opacity: 1;
-webkit-transform: rotate(1440deg);
width: 33px;
}
- 100%
- {
+ 100% {
height: 32px;
left: 247px;
opacity: 1;
<p align="center"><img alt="Animation" src="../../../images/css_transforms2.png" /></p>
<pre class="prettyprint">
-@-webkit-keyframes tizen-txt-t
-{
- 0%
- {
+@-webkit-keyframes tizen-txt-t {
+ 0% {
opacity: 0;
-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
}
- 30%
- {
+ 30% {
opacity: 0;
-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
}
- 35%
- {
+ 35% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) rotateY(0deg);
}
</pre></li>
<li>To emphasize the fact that the letters are being created on the right, change the location of the transform. If the <code>transform-origin</code> property is declared for the entire animation element, the logo rotation changes. Consequently, you must only declared it for the letters.
<pre class="prettyprint">
-.tizen-txt
-{
+.tizen-txt {
-webkit-transform-origin: 100% 50%;
}
</pre></li>
<li><p>Create the keyframes for the other letters similarly:</p>
<pre class="prettyprint">
-@-webkit-keyframes tizen-txt-i
-{
- 0%
- {
+@-webkit-keyframes tizen-txt-i {
+ 0% {
opacity: 0;
-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
}
- 32%
- {
+ 32% {
opacity: 0;
-webkit-transform: translate3d(20px, 0, -200px) rotateY(90deg);
}
- 37%
- {
+ 37% {
opacity: 1;
-webkit-transform: translateX(0) rotateY(0deg);
}
- 100% {}
+ 100% {}
}
</pre></li></ol>
<li>Create a modal layer pop-up using jQuery:
<pre class="prettyprint">
-(function($)
-{
- function showModalPopup(url)
- {
- $('body').append('<div class="mask"></div>'); /* Mask in body appended */
- $('.mask').css({'height': $(window).height()}); /* Mask area set */
-
- /* Target layer position set */
- $(url).css(
- {
- 'top': ($(window).height()/2 + $(document).scrollTop()
- - $(url).height()/2) + 'px',
- 'left': ($(window).width()/2 + $(document).scrollLeft()
- - $(url).width()/2) + 'px'
- });
-
- /* Fade effect */
- $('.mask').fadeTo('slow', 0.7);
- $(url).fadeTo('slow', 1);
- };
-
- $('.layerpopupActive a').on('click', function()
- {
- var targetUrl = $(this).attr('href');
-
- showModalPopup(targetUrl);
-
- return false;
- });
-
- /* End processing - Fade Out effect */
-
- $('body').on('click', function(e)
- {
- if (e.target.className === 'mask')
- {
+(function($) {
+ function showModalPopup(url) {
+ $('body').append('<div class='mask'></div>'); /* Mask in body appended */
+ $('.mask').css({'height': $(window).height()}); /* Mask area set */
+
+ /* Target layer position set */
+ $(url).css({
+ 'top': ($(window).height()/2 + $(document).scrollTop() - $(url).height()/2) + 'px',
+ 'left': ($(window).width()/2 + $(document).scrollLeft() - $(url).width()/2) + 'px'
+ });
+
+ /* Fade effect */
+ $('.mask').fadeTo('slow', 0.7);
+ $(url).fadeTo('slow', 1);
+ }
+
+ $('.layerpopupActive a').on('click', function() {
+ var targetUrl = $(this).attr('href');
+
+ showModalPopup(targetUrl);
+
+ return false;
+ });
+
+ /* End processing - Fade Out effect */
+
+ $('body').on('click', function(e) {
+ if (e.target.className === 'mask') {
$('.layerpop').fadeOut();
- $('.mask').fadeOut(400, function()
- {
- $('.mask').remove();
- });
- };
- });
+ $('.mask').fadeOut(400, function() {
+ $('.mask').remove();
+ });
+ }
+ });
})(jQuery);
</pre>
<li>Create a modal layer pop-up using CSS3:
<pre class="prettyprint">
<!--CSS-->
-.mask
-{
+.mask {
opacity: 0;
z-index: -1;
-webkit-transition: all 400ms ease-in-out;
}
-.mask.active
-{
+.mask.active {
opacity: .7;
z-index: 498;
}
<!--Layer pop-up public styles-->
-.layerpop
-{
+.layerpop {
opacity: 0;
z-index: -1;
-webkit-transition: all 300ms ease-in-out;
}
-.layerpop.active
-{
+.layerpop.active {
opacity: 1;
z-index: 499;
-}
+}</pre>
+<pre class="prettyprint">
/* JavaScript */
-function showModalPopup(url)
-{
- url.className += 'active';
+function showModalPopup(url) {
+ url.className += 'active';
}
</pre>
</li>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript transition sample</title>
<style>
- #box
- {
+ #box {
position: absolute;
width: 100px;
height: 100px;
<p>Perform CPU painting for a moving element at a rate of 1 frame per 16 ms (62.5 frames per second) using the <code>setTimeout()</code> method:</p>
<pre class="prettyprint">
<script>
- var delta = 0;
- function startTransition()
- {
- process();
- }
- function process()
- {
- document.getElementById('box').style.left = delta + "px";
- document.getElementById('box').style.top = delta + 50 + "px";
- delta += 4;
- if (delta <= 200)
- setTimeout(function() {process();}, 16);
- }
+ var delta = 0;
+ function startTransition() {
+ process();
+ }
+ function process() {
+ document.getElementById('box').style.left = delta + 'px';
+ document.getElementById('box').style.top = delta + 50 + 'px';
+ delta += 4;
+ if (delta <= 200)
+ setTimeout(function() {process();}, 16);
+ }
</script>
</head>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>-webkit-transition sample</title>
<style>
- #box
- {
+ #box {
position: absolute;
width: 100px;
height: 100px;
}
</style>
<script>
- function startTransition()
- {
- document.getElementById('box').style.webkitTransform =
- "translate(200px, 200px)";
- }
+ function startTransition() {
+ document.getElementById('box').style.webkitTransform = 'translate(200px, 200px)';
+ }
</script>
</head>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>-webkit-transition with translate3d sample</title>
<style>
- #box
- {
+ #box {
position: absolute;
width: 100px;
height: 100px;
}
</style>
<script>
- function startTransition()
- {
- document.getElementById('box').style.webkitTransform =
- "translate3d(200px, 200px, 0px)";
- }
+ function startTransition() {
+ document.getElementById('box').style.webkitTransform = 'translate3d(200px, 200px, 0px)';
+ }
</script>
</head>
<body>
<h3 id="scroll" name="scroll">Using Accelerated Overflow Scroll</h3>
<p>If a page has an overflow scroll, use the <code>-webkit-overflow-scrolling</code> attribute. It separates overflow scroll to an independent layer and enhances rendering performance:</p>
<pre class="prettyprint">
-#scroll_area
-{
+#scroll_area {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
<style type="text/css">
body{font-size: 12px}
- .box
- {
+ .box {
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: ease;
-webkit-transition-delay: 0.5s;
}
- .box: hover
- {
+ .box: hover {
width: 300px;
height: 200px;
background: CornflowerBlue;
<pre class="prettyprint">
<style type="text/css">
- .box
- {
+ .box {
-webkit-transition: width 1s ease 1s;
}
</style>
<p>Additionally, a <code>transition</code> property is declared in the <code>block-title</code> class:</p>
<pre class="prettyprint">
-.block-title
-{
+.block-title {
-webkit-transition: all 2s ease;
}
</pre>
<ol type="a"><li>To avoid unnecessary repetition, tie a list of <code>transition</code> elements together into groups <code>a</code> and <code>span</code>:
<pre class="prettyprint">
-.location, .date, .location .anibg, h3 > a, .day > span
-{
+.location, .date, .location .anibg, h3 > a, .day > span {
-webkit-transition: all 1s ease;
}
</pre></li>
<li><p>Create the effect using the width value of the added element:</p>
<pre class="prettyprint">
.location {position: relative; z-index: 3; margin-top: 3px;}
-.location .anibg
-{
+.location .anibg {
position: absolute;
left: -3px; top: 0;
display: block;
<p>The effect is defined by using the <code>position</code> property. The location element position is declared <code>relative</code>, while the <code>anibg</code> child element position is declared as <code>absolute</code>. The width of the child element basic state is set as 0. Since the child element layer covers the location text, the child element has been defined to come out from the back of the text in the <code>z-index</code> value of the child.</p></li>
<li><p>Define the state to be changed:</p>
<pre class="prettyprint">
-.location, .date, .location .anibg, h3 > a, .day > span
-{
+.location, .date, .location .anibg, h3 > a, .day > span {
-webkit-transition: all 1s ease;
}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript transition sample</title>
<style>
- #box
- {
+ #box {
position: absolute;
width: 100px;
height: 100px;
<p>Perform CPU painting for a moving element at a rate of 1 frame per 16 ms (62.5 frames per second) using the <code>setTimeout()</code> method:</p>
<pre class="prettyprint">
<script>
- var delta = 0;
- function startTransition()
- {
- process();
- }
- function process()
- {
- document.getElementById('box').style.left = delta + "px";
- document.getElementById('box').style.top = delta + 50 + "px";
- delta += 4;
- if (delta <= 200)
- setTimeout(function() {process();}, 16);
- }
+ var delta = 0;
+ function startTransition() {
+ process();
+ }
+ function process() {
+ document.getElementById('box').style.left = delta + 'px';
+ document.getElementById('box').style.top = delta + 50 + 'px';
+ delta += 4;
+ if (delta <= 200)
+ setTimeout(function() {process();}, 16);
+ }
</script>
</head>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>-webkit-transition sample</title>
<style>
- #box
- {
+ #box {
position: absolute;
width: 100px;
height: 100px;
}
</style>
<script>
- function startTransition()
- {
- document.getElementById('box').style.webkitTransform =
- "translate(200px, 200px)";
- }
+ function startTransition() {
+ document.getElementById('box').style.webkitTransform = 'translate(200px, 200px)';
+ }
</script>
</head>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>-webkit-transition with translate3d sample</title>
<style>
- #box
- {
+ #box {
position: absolute;
width: 100px;
height: 100px;
}
</style>
<script>
- function startTransition()
- {
- document.getElementById('box').style.webkitTransform =
- "translate3d(200px, 200px, 0px)";
- }
+ function startTransition() {
+ document.getElementById('box').style.webkitTransform = 'translate3d(200px, 200px, 0px)';
+ }
</script>
</head>
<body>
<h3 id="scroll" name="scroll">Using Accelerated Overflow Scroll</h3>
<p>If a page has an overflow scroll, use the <code>-webkit-overflow-scrolling</code> attribute. It separates overflow scroll to an independent layer and enhances rendering performance:</p>
<pre class="prettyprint">
-#scroll_area
-{
+#scroll_area {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#box2 {background-color: rgb(165, 241, 238);}
#box3 {background-color: rgb(248, 179, 179);}
#box4 {background-color: rgb(192, 161, 246);}
-.tile
-{
+.tile {
width: 50%;
height: 50%;
float: left;
.left {padding: 10px 5px 5px 10px;}
.right {padding: 10px 10px 5px 5px;}
-.box
-{
+.box {
width: 100%;
height: 100%;
}
#box2 {background-color: rgb(165, 241, 238);}
#box3 {background-color: rgb(248, 179, 179);}
#box4 {background-color: rgb(192, 161, 246);}
-.tile
-{
+.tile {
width: 50%;
height: 50%;
float: left;
.left {padding: 10px 5px 5px 10px;}
.right {padding: 10px 10px 5px 5px;}
-.box
-{
+.box {
width: 100%;
height: 100%;
padding: 20px;
<p>You can configure the device landscape and portrait mode using the <code>device-aspect-ratio</code> attribute in media queries. This approach is already commonly used in creating mobile Web applications. The following example shows how the <code>max-device-aspect-ratio</code> feature is used.</p>
<p>If you use the <code>orientation: portrait/landscape</code> feature, the layout can change unexpectedly when the virtual keypad is displayed. To avoid the problem, use the <code>device-aspect-ratio</code> to configure the portrait and landscape mode.</p>
<pre class="prettyprint lang-html">
-@media screen and (max-width: 320px) and (max-device-aspect-ratio: 1/1)
-{
+@media screen and (max-width: 320px) and (max-device-aspect-ratio: 1/1) {
<!--For portrait mode-->
}
-@media screen and (max-width: 640px) and (min-device-aspect-ratio: 11/10)
-{
+@media screen and (max-width: 640px) and (min-device-aspect-ratio: 11/10) {
<!--For landscape mode-->
}
</pre>
</div>
<pre class="prettyprint lang-html">
-@media all and (-tizen-geometric-shape: circle)
-{
+@media all and (-tizen-geometric-shape: circle) {
<!--For a circular device-->
}
</pre>
</section>
<!--CSS code-->
-html, body
-{
+html, body {
height: 100%;
width: 100%;
padding: 0;
overflow: hidden;
}
-section
-{
+section {
width: 100%;
height: 100%;
overflow: auto;
padding: 70px 0;
}
-header, footer
-{
+header, footer {
width: 100%;
height: 70px;
min-height: 70px;
position: fixed;
}
-header
-{
+header {
top: 0;
}
-footer
-{
+footer {
bottom: 0;
}
-article ul li
-{
+article ul li {
border-top: 1px solid rgba(52, 52, 52, 1);
padding: 15px 20px;
color: rgba(209, 209, 209, 1);
font-size: 40px;
}
-article ul li:first
-{
+article ul li:first {
border-top: 0 none;
}
</pre>
<p>To achieve a responsive layout for different devices, implement a relative layout. Simply set the <code>width: 100%</code> attribute to the layout elements in the CSS code:</p>
<pre class="prettyprint">
-section
-{
+section {
width: 100%;
height: 100%;
}
-header, footer
-{
+header, footer {
width: 100%;
}
</pre>
<p>During the migration, you can see how a certain portion of the rectangle view is covered over by the circular view, especially the header and the footer. To make them fully and consistently visible in the circular view, provide a "padding" space at the top and bottom of the page. In the following example migrating to a circular gear device from a rectangular Gear S, extra 77 px padding is used:</p>
<pre class="prettyprint">
-@media all and (-tizen-geometric-shape: circle)
-{
+@media all and (-tizen-geometric-shape: circle) {
section {padding: 77px 0;}
}
</pre>
<p>To implement the header and footer position, use the CSS <code>position</code> attribute:</p>
<pre class="prettyprint">
<!--Rectangular device-->
-header, footer
-{
+header, footer {
position: fixed;
}
<!--Circular device-->
-@media all and (-tizen-geometric-shape: circle)
-{
- header, footer
- {
+@media all and (-tizen-geometric-shape: circle) {
+ header, footer {
position: static;
}
}
<p>The scroll move requires several lines of JavaScript code. In the following sample, the few (N) seconds is set to 1500 ms, but you can change the value as needed.</p>
<pre class="prettyprint">
-(function initScrollPosition()
-{
- var SCROLL_DELAY_TIME = 1500,
- page = document.getElementById("main"),
- scrollPosition =
- window.parseInt(window.getComputedStyle(page)["padding-top"]),
- initScrollTimeoutId = null,
- mql = window.matchMedia("(-tizen-geometric-shape: circle)");
-
- /* Effect is applied to a circular device only, so use a media query */
- if (mql.matches)
- {
- page.addEventListener("scroll", function clearInitScrollCallback()
- {
+(function initScrollPosition() {
+ var SCROLL_DELAY_TIME = 1500,
+ page = document.getElementById('main'),
+ scrollPosition = window.parseInt(window.getComputedStyle(page)['padding-top']),
+ initScrollTimeoutId = null,
+ mql = window.matchMedia('(-tizen-geometric-shape: circle)');
+
+ /* Effect is applied to a circular device only, so use a media query */
+ if (mql.matches) {
+ page.addEventListener('scroll', function clearInitScrollCallback() {
window.clearTimeout(initScrollTimeoutId);
- page.removeEventListener("scroll", clearInitScrollCallback, false);
- }, false);
+ page.removeEventListener('scroll', clearInitScrollCallback, false);
+ }, false);
- initScrollTimeoutId = window.setTimeout(function()
- {
+ initScrollTimeoutId = window.setTimeout(function() {
page.scrollTop = scrollPosition;
- }, SCROLL_DELAY_TIME);
- }
+ }, SCROLL_DELAY_TIME);
+ }
}());
</pre>
<pre class="prettyprint">
<!--Common style for header and footer text-->
-header, footer
-{
+header, footer {
text-align: center;
}
<!--In a circular screen, list item has a center position-->
-@media all and (-tizen-geometric-shape: circle)
-{
- article ul li
- {
+@media all and (-tizen-geometric-shape: circle) {
+ article ul li {
text-align: center;
line-height: 60px;
}
<pre class="prettyprint">
<head>
<style>
- @font-face
- {
+ @font-face {
font-family: MuseoSans;
src: local('MuseoSans'),
url('https://www.tizen.org/sites/all/themes/tizen_theme/webfonts/244CBE_1_0.woff') format('woff');
}
- @font-face
- {
+ @font-face {
font-family: MuseoSans;
font-weight: bold;
src: local('MuseoSans'),
url('https://www.tizen.org/sites/all/themes/tizen_theme/webfonts/244CBE_0_0.woff') format('woff');
}
- @font-face
- {
+ @font-face {
font-family: MuseoSans;
font-weight: 900;
src: local('MuseoSans'),
<td>
<pre class="prettyprint">
var globalVar;
-test: function()
-{
- var one = globalVar + 1; (X)
- var two = globalVar + 2; (X)
- var ratio =
- window.innerWidth / (window.innerHeight + window.innerWidth); (X)
+test: function() {
+ var one = globalVar + 1; (X)
+ var two = globalVar + 2; (X)
+ var ratio = window.innerWidth /
+ (window.innerHeight + window.innerWidth); (X)
}
</pre></td>
<th>After</th>
<td>
<pre class="prettyprint">
-test: function()
-{
- var global = globalVar; (O)
- var one = global + 1;
- screenHeight = window.innerHeight; (O)
- screenWidth= window.innerWidth; (O)
- var ratio = screenWidth / (screenHeight + screenWidth);
+test: function() {
+ var global = globalVar; (O)
+ var one = global + 1;
+ screenHeight = window.innerHeight; (O)
+ screenWidth= window.innerWidth; (O)
+ var ratio = screenWidth / (screenHeight + screenWidth);
}
</pre></td>
</tr>
<th>Before</th>
<td>
<pre class="prettyprint">
-document.getElementById('a').onclick = function()
-{
- alert('<a> clicked!!');
-}
+document.getElementById('a').onclick = function() {
+ alert('<a> clicked!!');
+};
-document.getElementById('div').onclick = function()
-{
- alert('<div> clicked!!');
-}
+document.getElementById('div').onclick = function() {
+ alert('<div> clicked!!');
+};
</pre></td>
</tr>
<th>After</th>
<td>
<pre class="prettyprint">
-document.getElementById('ul').onclick = function()
-{
- var target = e.target;
- if (target.nodeName == 'a')
- {
- alert('<a> clicked!!');
- }
- else if (target.nodeName == 'div')
- {
- alert('<div> clicked!');
- }
-}
+document.getElementById('ul').onclick = function() {
+ var target = e.target;
+ if (target.nodeName == 'a') {
+ alert('<a> clicked!!');
+ } else if (target.nodeName == 'div') {
+ alert('<div> clicked!');
+ }
+};
</pre></td>
</tr>
</tbody>
<th>Removing an unused property</th>
<td>
<pre class="prettyprint">
-var myApp = {prop: "myprop"};
+var myApp = {prop: 'myprop'};
delete myApp.prop;
</pre></td>
</tr>
projects / sdk / online-doc.git / commitdiff